@font-face{font-family:ibm plex mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:ibm plex mono;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:newsreader;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:newsreader;font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/newsreader-italic-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:newsreader;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-latin-ext.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:newsreader;font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/newsreader-latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:noto music;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-music-music.woff2)format("woff2");unicode-range:U+25CC,U+2669-266F,U+1D000-1D0F5,U+1D100-1D126,U+1D129-1D1EA,U+1D200-1D245}:root{--paper:#FBF8F1;--white:#FFFFFF;--ink:#191970;--ink-deep:#10104F;--ink-text:#2C2C6E;--muted:#40407A;--muted-2:#5A5A8A;--gold:#D4AF37;--gold-light:#E2C35A;--gold-dark:#8C6D12;--cream:#F3EBD3;--lavender:#ECECF6;--lavender-glyph:#DCDCEE;--on-ink:#C8C8EA;--on-ink-dim:#9A9AD0;--ink-glyph:#23237E;--line:rgba(25, 25, 112, .2);--line-soft:rgba(25, 25, 112, .15);--line-faint:rgba(25, 25, 112, .094);--fam-1:#191970;--fam-2:#6B5FC7;--fam-3:#C9A227;--fam-4:#3E8E7E;--teal-light:#8FD0BF;--violet-light:#A99CF0;--ok:#2E7550;--ok-soft:#E3EFE5;--bad:#B0372B;--bad-soft:#F6E2DD;--bad-light:#E8735F;--on-ink-line:rgba(200, 200, 234, .3);--on-ink-line-soft:rgba(200, 200, 234, .18);--scrim:rgba(16, 16, 79, .45);--serif:"Newsreader", "Noto Music", Georgia, serif;--sans:"IBM Plex Sans", "Noto Music", system-ui, -apple-system, "Segoe UI", sans-serif;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--music:"Noto Music", "Newsreader", Georgia, serif;--gutter:clamp(16px, 5vw, 72px);color-scheme:light}*,*::before,*::after{box-sizing:border-box}html,body{height:100%}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}#app{min-height:100%;display:flex;flex-direction:column}button{font:inherit;color:inherit}h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}p{margin:0}svg{display:block}img{max-width:100%;height:auto}kbd{font:500 12px var(--mono);padding:1px 6px;border:1px solid}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}[hidden]{display:none!important}.mono-label{margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}.eyebrow{font:500 12px var(--mono);letter-spacing:.14em;color:var(--gold-dark);text-transform:uppercase}.sb-back{color:var(--on-ink);text-decoration:none;margin-right:14px}.sb-back:hover{color:#fff}.footer-legal{display:flex;flex-wrap:wrap;gap:24px}.footer-legal a{color:inherit}.statusbar{background:var(--ink);color:var(--on-ink);padding:0 var(--gutter);min-height:36px;display:flex;justify-content:space-between;align-items:center;gap:18px;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase}.sb-brand{opacity:.7}.sb-stats{display:flex;align-items:center;gap:18px;margin-left:auto}.sb-item{display:inline-flex;gap:6px;color:var(--on-ink-dim);white-space:nowrap}.sb-item b{font-weight:500;color:var(--white);font-variant-numeric:tabular-nums}.sb-item.is-on b{color:var(--gold-light)}.sb-sound{background:0 0;border:0;padding:2px 0;cursor:pointer;color:var(--on-ink-dim);font:inherit;letter-spacing:inherit;text-transform:inherit;border-bottom:1px solid transparent}.sb-sound:hover{color:var(--white)}.sb-sound[aria-pressed=true]{color:var(--white);border-bottom-color:var(--gold)}.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--gutter);border-bottom:1px solid var(--ink)}.logo{display:flex;align-items:center;gap:16px;background:0 0;border:0;padding:0;cursor:pointer;color:var(--ink)}.logo img{display:block;height:60px;width:auto;mix-blend-mode:multiply}.logo-sub{font:italic 25px var(--serif);padding-left:16px;border-left:1px solid var(--line);line-height:1.1}.nav{display:flex;gap:32px;font-size:15px;align-items:center}.nav button{background:0 0;border:0;padding:0 0 3px;cursor:pointer;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}.nav button:hover{color:var(--gold-dark)}.nav button.is-active{border-bottom-color:var(--gold)}.btn{display:inline-flex;gap:14px;align-items:center;justify-content:center;padding:17px 24px;border:1px solid transparent;border-radius:0;font:500 16px/1.2 var(--sans);cursor:pointer;transition:background .2s,gap .2s,color .2s,border-color .2s}.btn:hover:not(:disabled){gap:22px}.btn--primary{background:var(--ink);color:var(--paper)}.btn--primary:hover:not(:disabled){background:var(--ink-deep)}.btn--outline{border-color:var(--ink);background:0 0;color:var(--ink)}.btn--outline:hover:not(:disabled){background:var(--cream)}.btn--gold{background:var(--gold);color:var(--ink);font-weight:600}.btn--gold:hover:not(:disabled){background:var(--gold-light)}.btn:disabled{background:var(--lavender);color:var(--muted-2);border-color:transparent;cursor:not-allowed}.btn small{font:500 12px var(--mono);padding:2px 7px;border:1px solid;opacity:.75}.btn-row,.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.link-btn{background:0 0;border:0;padding:4px 0;cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);border-bottom:1px solid var(--gold)}.link-btn:hover{color:var(--gold-dark)}.play{display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:1px solid var(--ink);background:0 0;cursor:pointer;font-weight:500;color:var(--ink);text-align:left;transition:background .2s}.play:hover{background:var(--cream)}.play-ico{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-dark);display:grid;place-items:center}.play-ico svg{width:13px;height:13px;margin-left:2px}.play.is-played .play-ico{background:var(--gold);color:var(--ink)}.play.is-pulse .play-ico{animation:ping .5s ease-out}.play--accent{border-color:var(--gold-dark)}.play--quiet{border-color:var(--line)}.hero{position:relative;overflow:hidden;padding:clamp(40px,7vw,88px)var(--gutter)clamp(56px,8vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(40px,5vw,64px);align-items:center}.staff-lines{position:absolute;left:0;right:0;top:170px;height:121px;background:repeating-linear-gradient(var(--line-faint) 0 1px,transparent 1px 30px)}.hero-clef{position:absolute;left:24px;top:60px;font:clamp(160px,22vw,300px)/1 var(--music);color:var(--gold);opacity:.28;pointer-events:none}.hero-copy{position:relative;display:flex;flex-direction:column;gap:26px;padding-left:clamp(0px,3vw,40px);min-width:0}.hero-copy h1{font:clamp(46px,6.4vw,84px)/1 var(--serif);letter-spacing:-.03em}.hero-copy h1 em{color:var(--gold-dark)}.hero-lead{font-size:19px;line-height:1.55;color:var(--muted);max-width:460px}.rank{display:grid;gap:8px;max-width:420px;padding-top:22px;border-top:1px solid var(--line)}.rank-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.rank-head .mono-label{color:var(--gold-dark)}.rank-name{font:italic 25px var(--serif)}.rank-next{color:var(--muted-2);font-size:14px;font-variant-numeric:tabular-nums}.meter{height:3px;background:var(--line-soft)}.meter-fill{height:100%;background:var(--gold);transition:width .6s}.circle-card{position:relative;margin:0 22px 22px 0;padding:44px 24px 52px;background:var(--ink);color:var(--on-ink);display:grid;justify-items:center;box-shadow:16px 16px 0 var(--gold);min-width:0}.circle-card .pcircle{width:min(100%,340px)}.cc-label,.cc-foot{position:absolute;left:18px;font:12px var(--mono);color:var(--on-ink-dim)}.cc-label{top:16px}.cc-foot{bottom:16px;right:18px}.paths{padding:40px var(--gutter)88px}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--ink)}.section-head h2{font:clamp(34px,4vw,46px)/1.1 var(--serif)}.glyphs{font:24px var(--music);color:var(--gold);letter-spacing:.2em}#kurse,#kapitel,#blitzrunde,#erfolge{scroll-margin-top:90px}.chapters{list-style:none;margin:0;padding:0}.chapter{width:100%;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding:26px 12px;border:0;border-bottom:1px solid var(--line-soft);background:0 0;text-align:left;cursor:pointer;color:var(--ink);transition:background .25s,padding .25s}.chapter:hover:not(:disabled){background:var(--white);padding-left:20px}.chapter:disabled{cursor:not-allowed}.chapter.is-next{background:var(--cream)}.ch-num{flex:0 0 64px;align-self:flex-start;font:44px/1 var(--serif)}.ch-text{flex:1 1 300px;display:flex;flex-direction:column;gap:6px;min-width:0}.ch-title{font:500 24px/1.2 var(--serif)}.ch-sub{font-size:15px;line-height:1.55;color:var(--muted)}.ch-status{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:150px}.ch-status .mono-label{color:var(--muted-2)}.chapter.is-next .ch-status .mono-label{color:var(--gold-dark)}.chapter:disabled .ch-num,.chapter:disabled .ch-title{color:var(--muted-2);opacity:.55}.chapter:disabled .ch-sub{opacity:.6}.stars{display:inline-flex;gap:3px}.meter--row{width:140px}.course-tip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:15px;color:var(--muted)}.course-tip .link-btn{font-size:15px}.course-done{font:italic 22px var(--serif);color:var(--gold-dark)}.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;padding:0 var(--gutter)72px}.pager-link{display:grid;gap:6px;padding:22px 12px;border:0;border-top:1px solid var(--ink);background:0 0;text-align:left;cursor:pointer;color:var(--ink);transition:background .2s}.pager-link:hover{background:var(--white)}.pager-link.is-next{grid-column:2;text-align:right}.pager-link .mono-label{color:var(--gold-dark)}.pager-title{font:500 24px/1.2 var(--serif)}.star svg{width:16px;height:16px;color:var(--lavender-glyph)}.star.is-on svg{color:var(--gold)}.band{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,72px)var(--gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(24px,4vw,56px);align-items:end}.band h2{position:relative;font:clamp(40px,5vw,60px)/1 var(--serif)}.band p{position:relative;font-size:18px;line-height:1.55;color:var(--on-ink)}.band .btn,.band .mono-label{position:relative;justify-self:start}.band .mono-label{color:var(--on-ink-dim)}.band-glyph{position:absolute;right:30%;top:-50px;font:240px/1 var(--music);color:var(--ink-glyph);pointer-events:none}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}.card{padding:28px 28px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.card h3{font:500 22px/1.2 var(--serif)}.card p{line-height:1.55;color:var(--muted);font-size:15px}.badge-glyph{font:44px/1 var(--music);color:var(--gold-dark)}.badge .mono-label{color:var(--gold-dark)}.badge.is-locked .badge-glyph{color:var(--lavender-glyph)}.badge.is-locked .mono-label,.badge.is-locked h3{color:var(--muted-2)}.site-footer{margin-top:auto;border-top:1px solid var(--ink);padding:36px var(--gutter);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;font-size:14px}.footer-block{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.footer-block p{color:var(--muted)}.copyright{color:var(--muted)}.lesson-head{border-bottom:1px solid var(--ink);padding:18px var(--gutter)16px;display:grid;gap:14px}.lh-row{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap}.crumbs{display:flex;gap:10px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.1em;color:var(--gold-dark);text-transform:uppercase}.prog{display:flex;align-items:center;gap:14px;min-width:0}.prog svg{height:34px;width:auto;max-width:100%;overflow:visible}.pg-line{stroke:var(--line);stroke-width:1}.pg-note{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}.pg-note.is-done{fill:var(--ink)}.pg-note.is-cur{fill:var(--gold);stroke:var(--gold-dark)}.prog-count{font:500 12px var(--mono);color:var(--muted-2);letter-spacing:.08em;white-space:nowrap}.combo{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dark);white-space:nowrap}.combo b{font-weight:500;color:var(--ink);background:var(--gold);padding:2px 6px;margin-left:6px}.combo.is-pop{animation:pop .35s ease-out}.stage{width:100%;max-width:calc(780px + 2 * var(--gutter));padding:clamp(32px,5vw,56px)var(--gutter)72px;display:grid;gap:32px}.stage-card.is-shake{animation:shake .4s}.step{display:grid;gap:24px;min-width:0}.step.is-enter{animation:enter .4s cubic-bezier(.2,.8,.3,1)}.st-title{font:clamp(34px,4.4vw,46px)/1.08 var(--serif);letter-spacing:-.02em}.st-text{font-size:18px;line-height:1.7;color:var(--ink-text);display:grid;gap:14px;max-width:64ch}.st-text strong{color:var(--ink);font-weight:600}.st-media{display:grid;gap:18px;justify-items:start;min-width:0}.hint{font-size:14px;color:var(--muted-2)}.readout{width:100%;padding:14px 18px;background:var(--white);border:1px solid var(--line);color:var(--ink-text);font-size:16px;line-height:1.55}.readout strong{color:var(--ink)}.aside{font-size:15px;line-height:1.6;color:var(--muted);max-width:64ch}.step-actions{display:grid;gap:18px;border-top:1px solid var(--ink);padding-top:22px}.fb{padding:20px 24px;display:grid;gap:6px;background:var(--lavender);color:var(--ink-text)}.fb-title{font:italic 26px/1.2 var(--serif);color:var(--ink)}.fb-msg{display:grid;gap:6px;font-size:16px;line-height:1.6}.fb-msg strong{color:var(--ink)}.fb.is-ok{background:var(--cream)}.fb.is-ok .fb-title{color:var(--ok)}.fb.is-bad{background:var(--bad-soft)}.fb.is-bad .fb-title{color:var(--bad)}.actions-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.actions-row .btn--check{margin-left:auto;min-width:180px}.xp-float{position:absolute;right:8px;top:-14px;font:italic 22px var(--serif);color:var(--gold-dark);pointer-events:none;animation:floatUp 1.1s ease-out forwards;white-space:nowrap}.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;width:100%;border-top:1px solid var(--ink)}.opts--wide{grid-template-columns:minmax(0,1fr)}.opt{display:flex;align-items:center;gap:18px;text-align:left;padding:18px 12px;border:0;border-bottom:1px solid var(--line-soft);background:0 0;cursor:pointer;font-size:18px;color:var(--ink);min-width:0;transition:background .2s,padding .2s,color .2s}.opt:hover:not(:disabled){background:var(--white);padding-left:18px}.opt-key{flex:none;width:30px;height:30px;display:grid;place-items:center;font:500 13px var(--mono);border:1px solid var(--line);color:var(--muted-2)}.opt-t{min-width:0;overflow-wrap:anywhere}.opt:disabled{cursor:default}.opt:disabled:not(.is-ok):not(.is-bad){opacity:.45}.opt.is-sel{background:var(--ink);color:var(--paper);padding-left:18px}.opt.is-sel .opt-key{border-color:var(--gold);color:var(--gold)}.opt.is-ok{background:var(--ok-soft);color:var(--ok);padding-left:18px}.opt.is-ok .opt-key{border-color:var(--ok);background:var(--ok);color:var(--white)}.opt.is-bad{background:var(--bad-soft);color:var(--bad);padding-left:18px}.opt.is-bad .opt-key{border-color:var(--bad);color:var(--bad)}.opt.is-bad:disabled .opt-t{text-decoration:line-through}.kb-wrap{width:100%;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}.kb{position:relative;height:172px;min-width:calc(var(--whites) * 30px);max-width:calc(var(--whites) * 56px);user-select:none;-webkit-user-select:none;touch-action:manipulation;border-top:3px solid var(--ink)}.kb-key{position:absolute;top:0;padding:0;border:0;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background-color .15s}.kb-w{height:100%;background:var(--white);border:1px solid var(--ink);border-top:0;z-index:1}.kb-w+.kb-w{border-left:0}.kb-b{height:60%;background:var(--ink);z-index:2}.kb-lab{font:500 10px var(--mono);color:var(--muted-2);padding-bottom:10px;pointer-events:none;white-space:nowrap}.kb-b .kb-lab{color:var(--on-ink);font-size:9px;padding-bottom:7px}.kb-key.is-down{filter:brightness(.9)}.kb-key.mk-step{background:var(--cream)}.kb-key.mk-step .kb-lab{color:var(--gold-dark)}.kb-key.mk-ref{background:var(--gold)}.kb-key.mk-ref .kb-lab{color:var(--ink)}.kb-key.mk-sel,.kb-key.is-sel{background:var(--fam-2)}.kb-key.mk-sel .kb-lab,.kb-key.is-sel .kb-lab{color:var(--white)}.kb-key.mk-ok{background:var(--ok)}.kb-key.mk-ok .kb-lab{color:var(--white)}.kb.is-locked .kb-key{cursor:default}.staff{width:100%;max-width:440px;height:auto;overflow:visible}.st-line{stroke:var(--ink);stroke-opacity:.55;stroke-width:1}.st-ledger{stroke:var(--ink);stroke-width:1.2}.st-clef{font-family:var(--music);font-size:60px;fill:var(--ink)}.st-head{fill:var(--ink)}.st-hole{fill:var(--paper)}.st-acc{font-family:var(--music);font-size:22px;fill:var(--ink)}.st-lab{font:500 9px var(--mono);fill:var(--muted-2)}.st-cap{font:italic 13px var(--serif);fill:var(--muted)}.st-group.is-hl .st-head,.st-group.is-hl .st-acc{fill:var(--fam-2)}.st-group.is-hl .st-lab,.st-group.is-hl .st-cap{fill:var(--fam-2)}.st-clef--bass{font-size:47px}.st-ph{font:500 15px var(--mono);fill:var(--muted-2)}.st-hit{fill:transparent}.st-group.is-tap{cursor:pointer;outline:none}.st-group.is-tap:hover .st-head,.st-group.is-tap:hover .st-acc,.st-group.is-tap:focus-visible .st-head{fill:var(--gold-dark)}.st-group.is-pick .st-head,.st-group.is-pick .st-acc{fill:var(--fam-2)}.st-group.is-ghost .st-head{fill:var(--muted-2);opacity:.35}.st-group.is-given .st-head,.st-group.is-given .st-acc{fill:var(--gold-dark)}.st-group.is-ok .st-head,.st-group.is-ok .st-acc{fill:var(--ok)}.st-group.is-bad .st-head,.st-group.is-bad .st-acc{fill:var(--bad)}.pick{display:flex;align-items:center;gap:18px;width:100%;max-width:400px}.pick .staff{flex:auto;min-width:0;cursor:pointer}.nudges{display:grid;gap:8px}.nudge{width:48px;height:48px;border:1px solid var(--ink);background:0 0;color:var(--ink);cursor:pointer;font-size:15px;transition:background .2s}.nudge:hover{background:var(--cream)}.circle-card .staff{width:min(100%,420px)}.circle-card .st-line,.arcade .st-line{stroke:var(--on-ink);stroke-opacity:.5}.circle-card .st-ledger,.arcade .st-ledger{stroke:var(--on-ink)}.circle-card .st-clef,.arcade .st-clef{fill:var(--gold)}.circle-card .st-head,.circle-card .st-acc,.arcade .st-head,.arcade .st-acc{fill:var(--paper)}.circle-card .st-hole,.arcade .st-hole{fill:var(--ink)}.circle-card .st-lab,.arcade .st-lab{fill:var(--on-ink-dim)}.circle-card .st-cap,.arcade .st-cap{fill:var(--on-ink)}.circle-card .st-group.is-hl .st-head,.circle-card .st-group.is-hl .st-acc,.circle-card .st-group.is-hl .st-cap,.circle-card .st-group.is-tap:hover .st-head,.circle-card .st-group.is-tap:hover .st-acc,.circle-card .st-group.is-tap:focus-visible .st-head{fill:var(--gold)}.ar-media .staff{max-width:380px}.circle-box{width:min(100%,320px);justify-self:center}.circle-box--sm{width:min(100%,240px)}.pcircle{width:100%;height:auto;overflow:visible}.pc-ring{fill:none;stroke:var(--line);stroke-width:1}.pc-dot{cursor:pointer;outline:none}.pc-dot circle{fill:var(--paper);stroke:var(--line);stroke-width:1.5;transition:fill .2s,stroke .2s}.pc-dot text{font:500 11px var(--mono);fill:var(--muted);pointer-events:none}.pc-dot.is-black circle{fill:var(--lavender)}.pc-dot:hover circle{stroke:var(--ink)}.pc-dot:focus-visible circle{stroke:var(--gold);stroke-width:3}.pc-dot.f1 circle{fill:var(--fam-1);stroke:var(--fam-1)}.pc-dot.f1 text{fill:var(--white)}.pc-dot.f2 circle{fill:var(--fam-2);stroke:var(--fam-2)}.pc-dot.f2 text{fill:var(--white)}.pc-dot.f3 circle{fill:var(--fam-3);stroke:var(--fam-3)}.pc-dot.f3 text{fill:var(--ink)}.pc-dot.f4 circle{fill:var(--fam-4);stroke:var(--fam-4)}.pc-dot.f4 text{fill:var(--white)}.pc-dot.is-target circle{fill:var(--ok);stroke:var(--ok)}.pc-dot.is-target text{fill:var(--white)}.pc-poly{stroke-width:2;stroke-linejoin:miter;fill-opacity:.08;transition:fill-opacity .25s,stroke-width .25s}.pc-poly.f1{stroke:var(--fam-1);fill:var(--fam-1)}.pc-poly.f2{stroke:var(--fam-2);fill:var(--fam-2)}.pc-poly.f3{stroke:var(--fam-3);fill:var(--fam-3)}.pc-poly.f4{stroke:var(--fam-4);fill:var(--fam-4)}.pc-poly.is-line{fill-opacity:0}.pc-poly.is-on{fill-opacity:.2;stroke-width:3.5}.pc-poly.is-draw{animation:polyIn .5s cubic-bezier(.2,.8,.3,1);transform-box:view-box;transform-origin:150px 150px}.pc-arrow{fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round}.pc-arrowhead{fill:var(--ok)}.circle-card .pc-ring{stroke:var(--on-ink-line)}.circle-card .pc-dot circle{fill:var(--ink);stroke:var(--on-ink-line)}.circle-card .pc-dot text{fill:var(--on-ink)}.circle-card .pc-dot:hover circle{stroke:var(--on-ink)}.circle-card .pc-dot.f1 circle{fill:var(--paper);stroke:var(--paper)}.circle-card .pc-dot.f1 text{fill:var(--ink)}.circle-card .pc-dot.f2 circle{fill:var(--violet-light);stroke:var(--violet-light)}.circle-card .pc-dot.f2 text{fill:var(--ink)}.circle-card .pc-dot.f3 circle{fill:var(--gold);stroke:var(--gold)}.circle-card .pc-dot.f3 text{fill:var(--ink)}.circle-card .pc-poly.f1{stroke:var(--paper);fill:var(--paper)}.circle-card .pc-poly.f2{stroke:var(--violet-light);fill:var(--violet-light)}.circle-card .pc-poly.f3{stroke:var(--gold);fill:var(--gold)}.circle-card .pc-dot.f4 circle{fill:var(--teal-light);stroke:var(--teal-light)}.circle-card .pc-dot.f4 text{fill:var(--ink)}.circle-card .pc-poly.f4{stroke:var(--teal-light);fill:var(--teal-light)}.chain{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;font:30px/1.2 var(--serif)}.chain-iv{font:500 12px var(--mono);padding:2px 7px;border:1px solid;align-self:center}.chain-iv.iv-3{color:var(--fam-2)}.chain-iv.iv-4{color:var(--gold-dark)}.chord-name{font:italic 22px var(--serif);color:var(--muted);min-height:1.4em}.chord-name strong{font-weight:400;color:var(--ink)}.moves{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));width:100%;border-top:1px solid var(--ink);opacity:.4;transition:opacity .3s}.moves.is-on{opacity:1}.moves li{padding:14px 14px 16px 0;border-bottom:1px solid var(--line-soft);display:grid;gap:2px}.moves b{font:24px var(--serif)}.moves span{font-size:14px;color:var(--muted)}.moves li.is-lead b{color:var(--ok)}.ear-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:10px;width:100%}.explore{display:grid;grid-template-columns:minmax(0,300px)minmax(0,1fr);gap:32px;align-items:center;width:100%}.explore .circle-box{width:100%}.explore-side{display:grid;gap:16px;justify-items:start;min-width:0}.found-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.found,.types{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:4px 10px;font:500 12px var(--mono);letter-spacing:.06em;border:1px dashed var(--line);color:var(--muted-2);min-width:2.6em;text-align:center}.chip.is-on{border-style:solid;border-color:var(--ink);background:var(--ink);color:var(--paper)}.seg{display:inline-flex;border:1px solid var(--ink)}.seg button{border:0;background:0 0;padding:9px 16px;cursor:pointer;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.done{width:100%;max-width:calc(980px + 2 * var(--gutter));padding:clamp(40px,6vw,72px)var(--gutter)88px;display:grid;gap:40px}.done-head{display:grid;gap:20px}.done-head h1{font:clamp(44px,6vw,76px)/1.02 var(--serif);letter-spacing:-.03em}.done-rating{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.big-stars{display:flex;gap:6px}.big-star svg{width:34px;height:34px;color:var(--lavender-glyph)}.big-star.is-on svg{color:var(--gold);animation:starIn .5s cubic-bezier(.3,1.5,.5,1)both;animation-delay:var(--d)}.done-sub{font:italic 22px var(--serif);color:var(--muted)}.done-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--ink)}.ds{display:flex;flex-direction:column;gap:6px;padding:24px 20px 28px 0;border-bottom:1px solid var(--line)}.ds+.ds{padding-left:24px;border-left:1px solid var(--line)}.ds dt{order:2;font:500 12px var(--mono);letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}.ds dd{margin:0;font:clamp(40px,5vw,64px)/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}.takeaway{margin:0;background:var(--cream);padding:26px 30px;display:grid;gap:10px}.takeaway .mono-label{color:var(--gold-dark)}.takeaway p:last-child{font:24px/1.4 var(--serif);color:var(--ink)}.arcade{position:relative;overflow:hidden;flex:1;background:var(--ink);color:var(--paper);padding:clamp(40px,6vw,72px)var(--gutter)80px;display:grid;align-content:start;gap:26px}.arcade>*{position:relative}.arcade-glyph{position:absolute;right:8%;top:-40px;font:260px/1 var(--music);color:var(--ink-glyph);pointer-events:none}.arcade h1{font:clamp(48px,6vw,84px)/1 var(--serif);letter-spacing:-.03em}.arcade .eyebrow{color:var(--gold)}.arcade .link-btn{color:var(--paper)}.arcade .link-btn:hover{color:var(--gold-light)}.rules{list-style:none;margin:0;padding:0;max-width:560px;border-top:1px solid var(--on-ink-line)}.rules li{padding:14px 0;border-bottom:1px solid var(--on-ink-line-soft);color:var(--on-ink);font-size:17px}.rules b{color:var(--white);font-weight:500}.arcade .chip{border-color:var(--on-ink-line);color:var(--on-ink-dim)}.arcade .chip.is-on{border-color:var(--gold);background:0 0;color:var(--gold-light)}.record{color:var(--on-ink);font-size:17px}.record b{font:30px var(--serif);color:var(--white);margin-left:6px}.score-big{font:clamp(80px,14vw,150px)/.9 var(--serif);letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}.score-big span{font:500 13px var(--mono);letter-spacing:.1em;color:var(--on-ink-dim);margin-left:12px;text-transform:uppercase}.arcade .done-stats{border-top-color:var(--on-ink-line);max-width:640px}.arcade .ds{border-color:var(--on-ink-line-soft)}.arcade .ds dt{color:var(--on-ink-dim)}.ar-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.ar-time{font:34px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--gold-light)}.ar-line{height:3px;background:var(--on-ink-line-soft)}.ar-line-fill{height:100%;width:100%;background:var(--gold)}.ar-line-fill.is-low{background:var(--bad-light)}.ar-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.ar-score{display:flex;align-items:baseline;gap:14px}.ar-score strong{font:52px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums}.ar-score .mono-label{color:var(--on-ink-dim)}.arcade .combo{color:var(--gold-light)}.ar-card{display:grid;gap:22px;max-width:780px}.ar-card.is-shake{animation:shake .4s}.ar-tag{justify-self:start;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}.ar-prompt{font:clamp(26px,3.4vw,36px)/1.25 var(--serif)}.ar-prompt strong{font-weight:500;color:var(--gold-light)}.ar-media:empty{display:none}.arcade .opts{border-top-color:var(--on-ink-line)}.arcade .opt{color:var(--paper);border-bottom-color:var(--on-ink-line-soft)}.arcade .opt:hover:not(:disabled){background:var(--ink-glyph)}.arcade .opt-key{border-color:var(--on-ink-line);color:var(--on-ink-dim)}.arcade .opt.is-ok{background:var(--ok);color:var(--white)}.arcade .opt.is-ok .opt-key{border-color:var(--white);background:0 0;color:var(--white)}.arcade .opt.is-bad{background:var(--bad);color:var(--white)}.arcade .opt.is-bad .opt-key{border-color:var(--white);color:var(--white)}.arcade .play{color:var(--paper);border-color:var(--on-ink-line)}.arcade .play:hover{background:var(--ink-glyph)}.arcade .play-ico{color:var(--gold)}.opts.opts--two{grid-template-columns:repeat(2,minmax(0,1fr))}.overlay{position:fixed;inset:0;z-index:60;background:var(--scrim);display:grid;place-items:center;padding:20px;animation:fade .15s}.dialog{width:min(100%,440px);margin:0 14px 14px 0;background:var(--paper);border:1px solid var(--ink);padding:28px;display:grid;gap:12px;box-shadow:14px 14px 0 var(--gold)}.dialog h3{font:32px/1.1 var(--serif)}.dialog p{color:var(--muted);line-height:1.6}.dialog-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;flex-wrap:wrap;margin-top:12px}.toasts{position:fixed;right:var(--gutter);bottom:24px;z-index:70;display:grid;gap:14px;justify-items:end;pointer-events:none;max-width:calc(100% - 32px)}.toast{display:flex;align-items:center;gap:14px;padding:14px 20px 14px 16px;margin:0 8px 8px 0;background:var(--ink);color:var(--paper);box-shadow:8px 8px 0 var(--gold);animation:toastIn .35s cubic-bezier(.2,.8,.3,1);transition:opacity .4s,transform .4s}.toast-glyph{font:28px/1 var(--music);color:var(--gold);min-width:1em;text-align:center}.toast-text{display:grid;gap:2px}.toast-text .mono-label{color:var(--on-ink-dim);font-size:11px}.toast-text span:last-child{font:20px var(--serif)}.toast.is-out{opacity:0;transform:translateY(8px)}.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.15)}100%{transform:scale(1)}}@keyframes ping{0%{box-shadow:0 0 rgba(212,175,55,.55)}100%{box-shadow:0 0 0 12px rgba(212,175,55,0)}}@keyframes starIn{from{transform:scale(0)rotate(-40deg);opacity:0}to{transform:none;opacity:1}}@keyframes floatUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-34px)}}@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes polyIn{from{opacity:0;transform:scale(.55)rotate(-25deg)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}@media(max-width:899px){.nav{display:none}.logo img{height:48px}.logo-sub{font-size:21px}.explore{grid-template-columns:minmax(0,1fr)}.explore .circle-box{width:min(100%,300px)}}@media(max-width:560px){.sb-brand{display:none}.sb-stats{gap:14px;margin-inline:auto}.logo{gap:12px}.logo-sub{padding-left:12px}.circle-card{padding:40px 12px 48px;box-shadow:10px 10px 0 var(--gold);margin:0 10px 10px 0}.chapter{padding-inline:4px;gap:10px 16px}.chapter:hover:not(:disabled){padding-left:4px}.ch-num{flex-basis:44px;font-size:34px}.ch-status{flex-direction:row;align-items:center;min-width:0;margin-left:60px}.pager{grid-template-columns:minmax(0,1fr)}.pager-link.is-next{grid-column:1}.opts,.opts--wide{grid-template-columns:minmax(0,1fr)}.opts.opts--two{grid-template-columns:repeat(2,minmax(0,1fr))}.actions-row .btn--check{width:100%}.kb{height:150px;min-width:calc(var(--whites) * 26px)}.done-stats{grid-template-columns:minmax(0,1fr)}.ds+.ds{padding-left:0;border-left:0}.ds{flex-direction:row;align-items:baseline;gap:14px;padding-block:16px}.ds dd{font-size:40px}.toasts{left:16px;right:16px;justify-items:stretch}}.noten-glyph{font:44px/1.15 var(--music);color:var(--ink)}.noten-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:0 24px;width:100%;border-top:1px solid var(--ink)}.noten-value{display:grid;gap:6px;justify-items:start;align-content:start;padding:16px 0 20px;border-bottom:1px solid var(--line-soft)}.noten-vname{font:500 20px/1.2 var(--serif)}.noten-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;width:100%;max-width:520px;min-height:88px;padding:10px 22px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);background:linear-gradient(transparent calc(50% - .5px),var(--line) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px))}.noten-bar .noten-glyph{font-size:50px}.noten-vbtns{display:flex;flex-wrap:wrap;gap:8px}.noten-vbtn{padding:8px 14px;gap:10px}.noten-vbtn .noten-glyph{font-size:30px;line-height:1;color:inherit}.noten-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px 32px;width:100%;max-width:560px}.noten-trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px 24px;width:100%}.noten-trio figure{margin:0;display:grid;gap:4px;min-width:0}.noten-trio figcaption{font:500 12px var(--mono);letter-spacing:.1em;color:var(--gold-dark);text-transform:uppercase}.noten-rq .opt-t{font:30px/1.2 var(--music);letter-spacing:.12em}.ns-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:8px 24px;width:100%;max-width:520px}.ns-pair figure{margin:0;display:grid;gap:4px;min-width:0}.ns-pair figcaption{font:500 12px var(--mono);letter-spacing:.1em;color:var(--gold-dark);text-transform:uppercase}.ns-order{display:flex;flex-wrap:wrap;gap:8px}.ns-glyph{font:88px/1 var(--music);color:var(--ink)}.umk-seg{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}.umk-seg button{flex:auto}