:root{--font-display: "Fraunces", "Instrument Serif", Georgia, serif;--font-serif: "Instrument Serif", "Fraunces", Georgia, serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--bg: #efe8d8;--paper: #f7f1e3;--paper-edge: #e8dfca;--ink: #1a1814;--ink-soft: #3a342c;--muted: #78706a;--rule: #cdc3ad;--rule-soft: #ddd2bb;--accent: #2a4d7a;--accent-bright: #5a89c0;--accent-warm: #b34a1e;--white-key: #fbf8ef;--white-key-shadow: #ddd4bd;--black-key: #15110d;--held-white: #5a89c0;--held-black: #7ba6d8;--target-white: #fcd5a3;--target-white-edge: #d9a96e;--target-black: #e8a85c;--match-white: #e07a1a;--match-white-edge: #a04f08;--match-black: #c25e0a;--next-ring: #2a4d7a;--next-key: #2a4d7a;--ok: #3d7a52;--miss-white: #e6a39a;--miss-edge: #a8382b;--miss-black: #a8382b;--felt: #8a2a2a;--felt-shadow: #5d1a1a;--bg-glow: rgba(255, 250, 235, .6);--hover: rgba(26, 24, 20, .06);--gsi-bg: #ffffff;--gsi-border: #747775;--gsi-text: #1f1f1f;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #16130f;--paper: #201c16;--paper-edge: #29241c;--ink: #efe7d4;--ink-soft: #d3c9b3;--muted: #9a907e;--rule: #4a4236;--rule-soft: #3a332a;--accent: #93b4dd;--accent-bright: #a9c4e8;--accent-warm: #e3916a;--white-key: #e7e0cd;--white-key-shadow: #b3aa94;--black-key: #0b0907;--held-white: #6c98cf;--held-black: #86ade0;--target-white: #e8c08c;--target-white-edge: #b5884f;--target-black: #c98a42;--match-white: #e2883a;--match-white-edge: #e39a55;--match-black: #cf7224;--next-ring: #93b4dd;--ok: #72c08d;--miss-white: #d98e83;--miss-edge: #ef7d6c;--miss-black: #b8473a;--felt: #6e2424;--felt-shadow: #431414;--bg-glow: rgba(255, 236, 200, .035);--hover: rgba(255, 240, 210, .07);--gsi-bg: #131314;--gsi-border: #8e918f;--gsi-text: #e3e3e3;color-scheme:dark}}:root[data-theme=dark]{--bg: #16130f;--paper: #201c16;--paper-edge: #29241c;--ink: #efe7d4;--ink-soft: #d3c9b3;--muted: #9a907e;--rule: #4a4236;--rule-soft: #3a332a;--accent: #93b4dd;--accent-bright: #a9c4e8;--accent-warm: #e3916a;--white-key: #e7e0cd;--white-key-shadow: #b3aa94;--black-key: #0b0907;--held-white: #6c98cf;--held-black: #86ade0;--target-white: #e8c08c;--target-white-edge: #b5884f;--target-black: #c98a42;--match-white: #e2883a;--match-white-edge: #e39a55;--match-black: #cf7224;--next-ring: #93b4dd;--ok: #72c08d;--miss-white: #d98e83;--miss-edge: #ef7d6c;--miss-black: #b8473a;--felt: #6e2424;--felt-shadow: #431414;--bg-glow: rgba(255, 236, 200, .035);--hover: rgba(255, 240, 210, .07);--gsi-bg: #131314;--gsi-border: #8e918f;--gsi-text: #e3e3e3;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{height:100%}body{font-family:var(--font-serif);background:var(--bg);color:var(--ink);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;background-image:radial-gradient(ellipse at top,var(--bg-glow),transparent 60%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");background-attachment:fixed}main{max-width:1180px;margin:0 auto;padding:1.75rem 3rem 2rem;min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--rule);position:relative}header:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--rule-soft)}.masthead{display:flex;align-items:center;gap:.85rem;min-width:0}.brand-mark{font-family:"Bravura Text","Noto Music","Symbola",var(--font-display);font-size:2.6rem;line-height:1;color:var(--ink);margin-top:-.25rem;transform:translateY(2px)}.brand-text{display:flex;flex-direction:column;gap:.05rem;min-width:0}.wordmark{font-family:var(--font-display);font-size:2.4rem;font-weight:400;font-style:italic;line-height:.95;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;font-feature-settings:"ss01","kern","liga"}.tagline{font-family:var(--font-serif);font-size:.85rem;color:var(--muted);letter-spacing:.01em;margin-top:.05rem}.tagline em{font-style:italic}.segmented{display:inline-flex;align-items:stretch;gap:0;padding:2px;border:1px solid var(--rule);border-radius:999px;background:var(--paper);font-family:var(--font-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em}.segmented>.divider{display:none}.segmented>button{border:none!important;border-radius:999px;padding:.28rem .75rem;margin:0;background:none;color:var(--muted);font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;transition:background .14s ease,color .14s ease}.segmented>button:hover:not(:disabled),.segmented>button:focus-visible{color:var(--ink);outline:none}.segmented>button:focus-visible{box-shadow:0 0 0 1px var(--ink)}.segmented>button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.segmented>button:disabled{opacity:.4;cursor:default}.input-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.25rem;margin:.15rem 0 .45rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em}.input-main,.input-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem}.input-status{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft)}.input-status:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--rule);flex-shrink:0}.input-bar[data-status=none] .input-status{color:var(--muted)}.input-bar[data-status=midi] .input-status:before,.input-bar[data-status=mic] .input-status:before{background:var(--ok)}.input-bar[data-status=connecting] .input-status:before{background:var(--target-black);animation:input-connecting .9s ease-in-out infinite alternate}@keyframes input-connecting{0%{opacity:.35}to{opacity:1}}.input-bar[data-status=error] .input-status{color:var(--miss-edge);font-family:var(--font-serif);font-size:.98rem;text-transform:none;letter-spacing:0}.input-bar[data-status=error] .input-status:before{background:var(--miss-edge)}.input-sources{display:inline-flex;gap:.35rem}.source-btn{font:inherit;text-transform:inherit;letter-spacing:inherit;padding:.3rem .75rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink-soft);cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.source-btn:hover,.source-btn:focus-visible{color:var(--ink);border-color:var(--ink-soft);outline:none}.input-bar[data-status=none] .source-btn,.input-bar[data-status=error] .source-btn{background:var(--ink);border-color:var(--ink);color:var(--paper)}.source-btn[aria-pressed=true]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.input-hint{font-family:var(--font-serif);font-style:italic;font-size:.98rem;text-transform:none;letter-spacing:0;color:var(--muted)}.key-legend{position:relative}.key-legend summary{cursor:pointer;list-style:none;color:var(--muted);padding:.3rem .2rem}.key-legend summary::-webkit-details-marker{display:none}.key-legend summary:hover,.key-legend[open] summary{color:var(--ink)}.key-legend ul{position:absolute;right:0;bottom:calc(100% + .4rem);z-index:20;list-style:none;min-width:17rem;padding:.7rem .85rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;box-shadow:0 8px 20px #1a181424;display:flex;flex-direction:column;gap:.45rem;font-family:var(--font-serif);font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--ink-soft)}.key-legend li{display:flex;align-items:center;gap:.6rem}.legend-swatch{position:relative;flex-shrink:0;width:1.3rem;height:1.7rem;border:1px solid var(--rule);border-radius:0 0 3px 3px;background:var(--white-key);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:#1a1814c7}.legend-swatch.held{background:var(--held-white)}.legend-swatch.target{background:var(--target-white)}.legend-swatch.match{background:var(--match-white)}.legend-swatch.miss{background:var(--miss-white)}.legend-swatch.next{box-shadow:inset 0 0 0 2px var(--next-key);color:var(--next-key)}.legend-swatch.held:after,.legend-swatch.match:after,.legend-swatch.target:before,.legend-swatch.match:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}.legend-swatch.held:after,.legend-swatch.match:after{width:6px;height:6px;background:#1a1814c7}.legend-swatch.target:before,.legend-swatch.match:before{width:12px;height:12px;border:2px solid rgba(26,24,20,.78)}#device-select,#size-select{font:inherit;font-family:var(--font-mono);text-transform:none;letter-spacing:.05em;background:var(--paper);border:1px solid var(--rule);padding:.3rem .6rem;color:var(--ink);cursor:pointer;border-radius:2px}.display{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.25rem 0 1rem}.primary{font-family:var(--font-serif);font-size:clamp(4rem,12vw,9rem);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--ink);height:clamp(4rem,12vw,9rem);line-height:clamp(4rem,12vw,9rem);text-align:center;align-self:stretch;transition:color .22s ease,opacity .22s ease;font-feature-settings:"kern","liga","ss01";text-indent:-.04em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.primary.empty{color:var(--rule);font-family:var(--font-display);font-style:italic;font-weight:300;font-variation-settings:"opsz" 144,"SOFT" 100,"WONK" 1;letter-spacing:0;font-size:0;text-indent:0}.primary.empty:before{content:"Listen";font-size:clamp(1.6rem,3.4vw,2.4rem);display:inline-block;letter-spacing:.01em;vertical-align:middle}.primary.empty:after{content:"";display:inline-block;width:2.5rem;height:1px;background:var(--rule);margin-left:.7rem;vertical-align:middle;position:relative;top:-.1em}.meta{margin-top:.9rem;min-height:2.75rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.notes{font-family:var(--font-mono);font-size:.92rem;letter-spacing:.24em;color:var(--ink-soft);text-transform:uppercase;font-weight:500;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.alternates{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;opacity:.7;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.keyboard-wrap{margin:.5rem 0 1rem;padding:0}main[data-view=lessons]>*,main[data-view=drills]>*{order:2}main[data-view=lessons]>header,main[data-view=drills]>header,main[data-view=lessons]>.mode-toggle,main[data-view=drills]>.mode-toggle{order:0}main[data-view=lessons]>.stage-dock,main[data-view=drills]>.stage-dock{order:3;position:sticky;bottom:0;z-index:5;margin:0 -.75rem;padding:.35rem .75rem .6rem;background:var(--bg);border-top:1px solid var(--rule-soft);box-shadow:0 -10px 18px -14px #1a181459}main[data-view=lessons]>footer,main[data-view=drills]>footer{order:4}main[data-view=lessons] .display,main[data-view=drills] .display{flex-direction:row;gap:.9rem;padding:.1rem 0 .2rem;min-height:2.2rem}main[data-view=lessons] .primary,main[data-view=drills] .primary{font-size:1.6rem;height:2rem;line-height:2rem;align-self:center;flex:1;min-width:0}main[data-view=lessons] .primary.empty,main[data-view=drills] .primary.empty{font-size:0}main[data-view=lessons] .primary.empty:before,main[data-view=drills] .primary.empty:before,main[data-view=lessons] .primary.empty:after,main[data-view=drills] .primary.empty:after{content:none}main[data-view=lessons] .display:has(.primary.empty),main[data-view=drills] .display:has(.primary.empty){display:none}main[data-view=lessons] .meta,main[data-view=drills] .meta{margin-top:0;min-height:0}main[data-view=lessons] .alternates,main[data-view=drills] .alternates{display:none}main[data-view=lessons] .keyboard-wrap,main[data-view=drills] .keyboard-wrap{margin:.2rem 0 0}main[data-view=lessons] .keyboard,main[data-view=drills] .keyboard{height:118px}main[data-view=lessons] .fingering-toggle,main[data-view=drills] .fingering-toggle{display:none}@media (max-width: 720px){main[data-view=lessons] .input-hint,main[data-view=drills] .input-hint,main[data-view=lessons] .sound-picker,main[data-view=drills] .sound-picker{display:none}main[data-view=lessons] .input-bar,main[data-view=drills] .input-bar{gap:.35rem .75rem}}.playback-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;min-height:2.75rem;margin:.5rem 0 2rem}.playback-row-side{display:flex;align-items:center;gap:1.5rem}.playback-row-left{justify-self:start}.playback-row-right{justify-self:end}.playback-row-side>div{display:flex;align-items:center;gap:.5rem}@media (max-width: 920px){.playback-row{grid-template-columns:auto;justify-items:center;gap:1rem}.playback-row-side{flex-wrap:wrap;justify-content:center;justify-self:auto!important;gap:1rem 1.25rem}}.keyboard-frame{position:relative;background:linear-gradient(to bottom,var(--paper-edge) 0%,var(--paper) 100%);border:1px solid var(--rule);border-radius:4px;padding:.65rem .65rem .5rem;box-shadow:0 1px #ffffff80 inset,0 6px 14px #1a181414}.keyboard-frame.windowed{padding-left:1.7rem;padding-right:1.7rem}.keyboard-nav{position:absolute;top:50%;transform:translateY(-50%);width:1.5rem;height:3rem;border:none;background:none;font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer}.keyboard-nav.prev{left:.15rem}.keyboard-nav.next{right:.15rem}.keyboard-nav:disabled{opacity:.25;cursor:default}.keyboard-nav:focus-visible{outline:1px solid var(--ink);outline-offset:-2px}.keyboard-felt{height:6px;border-radius:2px;margin-bottom:.55rem;background:linear-gradient(to bottom,var(--felt) 0%,var(--felt) 60%,var(--felt-shadow) 100%);box-shadow:inset 0 1px #ffffff2e,inset 0 -1px #00000059;position:relative}.keyboard-felt:before,.keyboard-felt:after{content:"";position:absolute;top:50%;width:3px;height:3px;border-radius:50%;background:#ffffff59;transform:translateY(-50%)}.keyboard-felt:before{left:4px}.keyboard-felt:after{right:4px}.keyboard{position:relative;height:150px;width:100%;-webkit-user-select:none;user-select:none}.key{position:absolute;top:0;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;transition:background-color 70ms ease-out,border-color 70ms ease-out}.key:active{filter:brightness(.9)}.key:focus{outline:none}.key:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;z-index:3}.key.white{background:var(--white-key);border:1px solid var(--rule);height:100%;z-index:1;border-radius:0 0 3px 3px;box-shadow:inset 0 -3px 0 var(--white-key-shadow),inset 0 1px #fff9}.key.white.held{background:var(--held-white);border-color:var(--held-white);box-shadow:inset 0 -3px #0000002e}.key.black{background:linear-gradient(to bottom,#2a221a 0%,var(--black-key) 60%,#0a0805 100%);height:65%;z-index:2;border-radius:0 0 3px 3px;box-shadow:inset 0 -3px #00000080,inset 0 1px #ffffff0d}.key.black.held{background:var(--held-black);box-shadow:inset 0 -3px #0000004d}.key.white.target{background:var(--target-white);border-color:var(--target-white-edge)}.key.black.target{background:var(--target-black)}.key.white.held.target{background:var(--match-white);border-color:var(--match-white-edge);box-shadow:inset 0 -5px #0000004d}.key.black.held.target{background:var(--match-black);box-shadow:inset 0 -5px #0006}.key:before,.key:after{content:"";position:absolute;left:50%;transform:translate(-50%,50%);border-radius:50%;pointer-events:none;opacity:0}.key.white:before,.key.white:after{bottom:30px}.key.black:before,.key.black:after{bottom:22px}.key:before{width:12px;height:12px;border:2px solid var(--key-mark)}.key:after{width:6px;height:6px;background:var(--key-mark)}.key.white{--key-mark: rgba(26, 24, 20, .78)}.key.black{--key-mark: rgba(255, 255, 255, .9)}.key.target:before,.key.held:after{opacity:1}.key.miss:before{content:"×";opacity:1;width:auto;height:auto;border:none;border-radius:0;font-family:var(--font-mono);font-size:15px;font-weight:700;line-height:1;color:var(--key-mark)}.key-finger{position:absolute;bottom:6px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.72rem;font-weight:500;line-height:1;pointer-events:none;opacity:0;transition:opacity 80ms ease-out}.key-finger.visible{opacity:.9}.key.white .key-finger{color:var(--key-mark)}.key.black .key-finger{color:#ffffffd9}.keyboard.fingerings-hidden .key-finger{display:none}.key.white.next{border-color:var(--next-key);box-shadow:inset 0 0 0 2px var(--next-key),inset 0 -3px 0 var(--white-key-shadow)}.key.black.next{box-shadow:inset 0 0 0 2px var(--next-key),inset 0 -3px #00000080}.key-finger.next{font-size:1.05rem;font-weight:700;opacity:1}.keyboard.fingerings-hidden .key-finger.next{display:block}.key.white .key-finger.next{color:var(--next-key)}.key.black .key-finger.next{color:#fff}.key.white.miss{animation:key-miss-white .45s ease-out}.key.black.miss{animation:key-miss-black .45s ease-out}@keyframes key-miss-white{0%,40%{background:var(--miss-white);border-color:var(--miss-edge)}to{background:var(--white-key)}}@keyframes key-miss-black{0%,40%{background:var(--miss-black)}to{background:var(--black-key)}}.key-selector{display:flex;flex-direction:column;gap:.7rem;padding:0 0 1.1rem;margin-top:.25rem}.key-selector-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:.1rem}.key-selector-heading-rule{flex:1;height:1px;background:var(--rule)}.key-selector-heading-text{font-family:var(--font-display);font-size:.78rem;font-style:italic;font-weight:400;letter-spacing:.04em;color:var(--ink-soft);font-variation-settings:"opsz" 14,"SOFT" 100,"WONK" 1}.key-selector-controls{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}.key-roots{display:flex;flex-wrap:wrap;gap:.15rem;font-family:var(--font-mono)}.key-root-btn{background:none;border:1px solid transparent;font:inherit;font-family:var(--font-display);font-size:.95rem;font-style:italic;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;letter-spacing:0;color:var(--muted);cursor:pointer;padding:.25rem .5rem;border-radius:2px;min-width:2.1rem;text-align:center;line-height:1.1;transition:color .14s ease,background-color .14s ease,border-color .14s ease}.key-root-btn:hover{color:var(--ink)}.key-root-btn.active{color:var(--ink);background:var(--paper);border-color:var(--rule)}.key-mode-toggle{display:flex;align-items:center;gap:.35rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.key-mode-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.key-mode-btn:hover{color:var(--ink)}.key-mode-btn.active{color:var(--ink);border-bottom-color:var(--ink)}.key-mode-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.key-mode-group{display:flex;align-items:center;gap:.85rem}.key-preview{display:flex;align-items:center}.key-preview-btn{background:var(--ink);color:var(--paper);border:none;border-radius:50%;width:1.7rem;height:1.7rem;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 2px 6px #1a181426;transition:background-color .14s ease,transform .14s ease,opacity .14s ease}.key-preview-btn:hover:not(:disabled){background:var(--accent)}.key-preview-btn.playing{background:var(--accent)}.key-preview-btn:active:not(:disabled){transform:scale(.92)}.key-preview-btn:disabled{cursor:default;opacity:.3}.key-preview-btn .play-glyph{font-size:.6rem;transform:translate(.07rem)}.key-palette{display:flex;flex-wrap:wrap;gap:.4rem;align-items:stretch;min-height:2.6rem}.key-palette-hint{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--muted);align-self:center;padding:.25rem 0}.key-chord-btn{flex:1 1 0;min-width:5.5rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.5rem .5rem .55rem;cursor:pointer;font:inherit;color:var(--ink);transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.key-chord-btn:hover{border-color:var(--ink-soft);background:var(--white-key)}.key-chord-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.key-chord-btn .roman{font-family:var(--font-display);font-style:italic;font-size:1.05rem;font-weight:400;line-height:1;letter-spacing:.01em;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1}.key-chord-btn .chord-name{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);line-height:1}.key-chord-btn:hover .chord-name{color:var(--ink-soft)}.key-chord-btn.active .chord-name{color:var(--paper-edge)}.lookup{display:flex;flex-direction:column;gap:.7rem;padding:0 0 1.25rem;margin-top:.5rem}.lookup-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:.3rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.32em;color:var(--muted)}.lookup-heading-rule{flex:1;height:1px;background:var(--rule)}.lookup-heading-text{font-family:var(--font-display);font-size:.78rem;font-style:italic;font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-soft);font-variation-settings:"opsz" 14,"SOFT" 100,"WONK" 1}.lookup-row{display:flex;align-items:center;gap:1.5rem}.lookup-row-1{position:relative;flex-direction:row;align-items:stretch;column-gap:.6rem;row-gap:0;flex-wrap:wrap}.lookup-input-wrap{position:relative;display:flex;align-items:center;flex:1;min-width:0}.lookup-input{flex:1;font:inherit;font-family:var(--font-serif);font-size:.92rem;background:var(--paper);border:1px solid var(--rule-soft);padding:.5rem 2rem .5rem .85rem;color:var(--ink);border-radius:2px;outline:none;transition:border-color .14s ease,box-shadow .14s ease}.lookup-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px #1a18140f}.lookup-input::placeholder{color:var(--muted);font-style:italic}.lookup-clear{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-family:var(--font-display);font-size:1.3rem;cursor:pointer;padding:.15rem .4rem;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease,color .14s ease}.lookup-clear:hover{color:var(--ink)}.lookup.has-target .lookup-clear{opacity:1;pointer-events:auto}.lookup-suggestions{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:10;background:var(--paper);border:1px solid var(--rule);border-radius:2px;list-style:none;margin:0;padding:.25rem 0;max-height:16rem;overflow-y:auto;box-shadow:0 6px 20px #1a18141a}.lookup-suggestion{padding:.45rem .95rem;font-family:var(--font-serif);font-size:.95rem;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;transition:background-color .1s ease}.lookup-suggestion[data-kind=scale]:after,.lookup-suggestion[data-kind=chord]:after{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.lookup-suggestion[data-kind=scale]:after{content:"scale"}.lookup-suggestion[data-kind=chord]:after{content:"chord"}.lookup-suggestion:hover,.lookup-suggestion.highlighted{background:var(--hover)}.lookup-hint{flex-basis:100%;margin-top:.45rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted);min-height:1em;opacity:0;transition:opacity .14s ease}.lookup-hint.visible{opacity:1}.lookup-browse{margin-top:.1rem;padding:.95rem 1rem 1rem;background:var(--paper);border:1px solid var(--rule);border-radius:3px;display:flex;flex-direction:column;gap:.85rem;box-shadow:0 1px #ffffff80 inset,0 4px 14px #1a18140f}.browse-controls{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;padding-bottom:.7rem;border-bottom:1px solid var(--rule-soft)}.browse-roots{display:flex;flex-wrap:wrap;gap:.15rem}.browse-root-btn{background:none;border:1px solid transparent;font:inherit;font-family:var(--font-display);font-size:.95rem;font-style:italic;font-variation-settings:"opsz" 60,"SOFT" 100,"WONK" 1;color:var(--muted);cursor:pointer;padding:.2rem .5rem;border-radius:2px;min-width:2.1rem;text-align:center;line-height:1.1;transition:color .14s ease,background-color .14s ease,border-color .14s ease}.browse-root-btn:hover{color:var(--ink)}.browse-root-btn[aria-pressed=true]{color:var(--ink);background:var(--bg);border-color:var(--rule)}.browse-tabs{display:flex;align-items:center;gap:.3rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.browse-tab-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.3rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.browse-tab-btn:hover{color:var(--ink)}.browse-tab-btn[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.browse-tabs{margin-left:auto}.browse-keys .key-selector-heading{display:none}.browse-keys .key-selector{padding:0;margin:0}.browse-groups{display:flex;flex-direction:column;gap:.85rem}.browse-group{display:grid;grid-template-columns:9.5rem 1fr;gap:.85rem;align-items:baseline}.browse-group-title{font-family:var(--font-display);font-size:.85rem;font-style:italic;font-weight:400;color:var(--ink-soft);font-variation-settings:"opsz" 24,"SOFT" 100,"WONK" 1;letter-spacing:.01em;padding-top:.25rem;border-right:1px solid var(--rule-soft);padding-right:.85rem;text-align:right}.browse-group-entries{display:flex;flex-wrap:wrap;gap:.3rem}.browse-entry-btn{background:var(--bg);border:1px solid var(--rule);font:inherit;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink);cursor:pointer;padding:.32rem .65rem;border-radius:2px;line-height:1.2;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.browse-entry-btn:hover{background:var(--white-key);border-color:var(--ink-soft)}.browse-entry-btn.active{background:var(--ink);border-color:var(--ink);color:var(--paper)}.inversion-controls.disabled,.octave-controls.disabled{opacity:.4;pointer-events:none}.inversion-btn,.octave-btn{background:none;border:none;font:inherit;font-family:var(--font-mono);font-size:.85rem;color:var(--muted);cursor:pointer;padding:.2rem .45rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease,opacity .14s ease}.inversion-btn:hover,.octave-btn:hover{color:var(--ink)}.inversion-btn:disabled,.octave-btn:disabled{opacity:.3;cursor:default;color:var(--muted)}.inversion-label,.octave-label{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);min-width:3rem;text-align:center}.octave-label{min-width:3.5rem}.play-controls.disabled,.play-mode-toggle.disabled{opacity:.4;pointer-events:none}.play-btn{background:var(--ink);color:var(--paper);border:none;border-radius:50%;width:2.75rem;height:2.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 1px #fff3 inset,0 4px 10px #1a18142e;transition:background-color .14s ease,transform .14s ease,box-shadow .14s ease}.play-btn:hover{background:var(--accent)}.play-btn:active{transform:scale(.94);box-shadow:0 2px 6px #1a18142e}.play-glyph{font-size:1rem;line-height:1;transform:translate(.1rem)}.play-mode-toggle,.fingering-toggle{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em}.mode-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.mode-btn:hover{color:var(--ink)}.play-mode-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.sound-picker{display:inline-flex;align-items:center;gap:.45rem;position:relative}.sound-select{font:inherit;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.22rem .45rem;cursor:pointer;transition:border-color .14s ease,opacity .14s ease}.sound-select:hover{border-color:var(--ink)}.sound-select:disabled{opacity:.5;cursor:progress}.sound-picker.loading:after{content:"loading";font-family:var(--font-mono);font-size:.62rem;font-style:italic;color:var(--muted);letter-spacing:.04em;margin-left:.1rem}.sound-picker-hint{position:absolute;top:calc(100% + .35rem);right:0;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.04em;color:var(--muted);background:var(--paper);border:1px solid var(--rule);border-radius:2px;padding:.3rem .5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s ease;z-index:5}.sound-picker-hint.visible{opacity:1;pointer-events:auto;cursor:pointer}.reset-controls.disabled{opacity:.4;pointer-events:none}.reset-btn{background:none;border:none;font:inherit;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted);cursor:pointer;padding:.35rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.reset-btn:hover:not(:disabled){color:var(--ink);border-bottom-color:var(--ink)}.reset-btn:disabled{cursor:default}footer{margin-top:auto;padding-top:1.4rem;border-top:1px solid var(--rule);position:relative;display:flex;flex-direction:column;align-items:center;gap:.65rem;text-align:center}footer:before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:var(--rule-soft)}.footer-ornament{font-family:var(--font-display);font-size:1.05rem;color:var(--rule);font-style:italic;line-height:1;-webkit-user-select:none;user-select:none}.theme-toggle{background:none;border:1px solid var(--rule);border-radius:999px;padding:.25rem .7rem;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer}.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--ink);border-color:var(--ink-soft);outline:none}.footer-link{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}.footer-link:hover,.footer-link:focus-visible{color:var(--ink);border-bottom-color:var(--ink-soft);outline:none}.footer-tools{display:flex;align-items:center;gap:.75rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.22em;color:var(--muted)}@media (max-width: 720px){main{padding:1.25rem 1.25rem 1.5rem}header{flex-direction:column;align-items:flex-start;gap:1rem}.wordmark{font-size:2rem}.brand-mark{font-size:2.2rem}.display{padding:1.5rem 0 1rem;min-height:160px}.keyboard{height:110px}.keyboard-frame{padding:.5rem .5rem .4rem}.meta{margin-top:1rem}.playback-row{display:flex;flex-direction:column;align-items:center;gap:1rem}.playback-row-side{flex-direction:column;gap:1rem;justify-self:auto}.playback-row-side>div{justify-content:center}.key-selector-controls{flex-direction:column;align-items:stretch;gap:.75rem}.key-roots,.key-mode-toggle{justify-content:center}.key-palette{gap:.3rem}.key-chord-btn{flex:1 1 calc(25% - .3rem);min-width:0;padding:.4rem .3rem .45rem}.key-chord-btn .roman{font-size:.95rem}.key-chord-btn .chord-name{font-size:.6rem;letter-spacing:.12em}.lookup-browse{padding:.75rem .7rem .85rem}.browse-controls{flex-direction:column;align-items:stretch;gap:.7rem}.browse-roots,.browse-tabs{justify-content:center}.browse-group{grid-template-columns:1fr;gap:.35rem}.browse-group-title{text-align:left;padding-right:0;padding-top:0;border-right:none;border-bottom:1px solid var(--rule-soft);padding-bottom:.25rem}}.mode-toggle{display:flex;align-items:baseline;justify-content:center;gap:.6rem;padding:.85rem 0 .2rem;font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.28em}.mode-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.35rem .5rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.mode-btn:hover,.mode-btn:focus-visible{color:var(--ink);outline:none}.mode-btn.active{color:var(--ink);border-bottom-color:var(--ink)}.mode-divider{color:var(--rule);-webkit-user-select:none;user-select:none}.exercises{display:flex;flex-direction:column;gap:.85rem;padding:0 0 1.1rem;margin-top:.25rem}.exercise-heading{display:flex;align-items:center;gap:.85rem;margin-bottom:.1rem}.exercise-heading-rule{flex:1;height:1px;background:var(--rule)}.exercise-heading-text{font-family:var(--font-display);font-size:.78rem;font-style:italic;font-weight:400;letter-spacing:.04em;color:var(--ink-soft);font-variation-settings:"opsz" 14,"SOFT" 100,"WONK" 1}.exercise-card{display:flex;flex-direction:column;align-items:center;gap:.65rem;padding:1.2rem 1rem 1.4rem;background:var(--paper);border:1px solid var(--rule-soft);border-radius:3px}.exercise-type-toggle{display:flex;align-items:baseline;gap:.35rem;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.24em}.exercise-type-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.25rem .45rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease}.exercise-type-btn:hover,.exercise-type-btn:focus-visible{color:var(--ink);outline:none}.exercise-type-btn[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.exercise-type-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.exercise-content{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%}.exercise-prompt-scale-name{font-family:var(--font-display);font-size:clamp(2rem,4.5vw,2.8rem);font-style:italic;font-weight:400;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;font-feature-settings:"ss01","kern","liga";min-height:clamp(2rem,4.5vw,2.8rem)}.exercise-scale-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1.4rem}.hand-toggle,.staff-toggles{display:flex;align-items:baseline;gap:.35rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em}.hand-toggle .divider{color:var(--rule);-webkit-user-select:none;user-select:none}.hand-btn,.staff-toggle-btn{background:none;border:none;font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--muted);cursor:pointer;padding:.25rem .4rem;border-bottom:1px solid transparent;transition:color .14s ease,border-color .14s ease,opacity .14s ease}.hand-btn:hover,.staff-toggle-btn:hover,.hand-btn:focus-visible,.staff-toggle-btn:focus-visible{color:var(--ink);outline:none}.hand-btn[aria-pressed=true],.staff-toggle-btn[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.staff-toggle-btn:disabled{opacity:.4;cursor:default}.run-strip{display:flex;align-items:flex-start;gap:.6rem;max-width:100%;padding-top:.2rem}.run-strip-hand{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--paper);background:var(--ink-soft);border-radius:2px;padding:.2rem .35rem;margin-top:.3rem;flex-shrink:0}.run-strip-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;row-gap:.6rem}.run-strip-half{display:flex;align-items:flex-start}.run-step{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:1.75rem;padding:.2rem .15rem .25rem;border-bottom:2px solid transparent;font-family:var(--font-mono);transition:color .16s ease,border-color .16s ease,opacity .16s ease}.run-step-name{font-size:.95rem;color:var(--muted);min-height:1.2em}.run-step-finger{font-size:.72rem;font-weight:500;color:var(--muted);min-height:1em}.run-step.done .run-step-name,.run-step.done .run-step-finger{color:var(--match-white-edge)}.run-step.next{border-bottom-color:var(--ink)}.run-step.next .run-step-name{color:var(--ink);font-weight:500}.run-step.next .run-step-finger{color:var(--next-ring);font-size:.9rem;font-weight:700}.run-step.pending{opacity:.7}.run-step.turn{margin-right:.35rem;box-shadow:1px 0 0 var(--rule)}.run-step.miss{animation:run-step-miss .6s ease-out}@keyframes run-step-miss{0%,35%{background:var(--miss-white)}to{background:transparent}}.run-gap{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:.5rem;padding-top:.15rem;font-family:var(--font-mono);line-height:1}.run-gap-step{font-size:.56rem;letter-spacing:.05em;color:var(--muted)}.run-gap-step.half{color:var(--accent-warm);font-weight:700}.run-gap-cross{font-size:.85rem;color:var(--next-ring);margin-top:.15rem;cursor:help}.staff{width:100%;display:flex;justify-content:center}.staff-svg{width:100%;max-width:520px;height:auto;overflow:visible}.staff-line,.staff-ledger{stroke:var(--ink-soft);stroke-width:1}.staff-turn{stroke:var(--rule);stroke-width:1;stroke-dasharray:2 3}.staff-clef{font-family:Noto Music,serif;fill:var(--ink)}.staff-clef.treble{font-size:40px}.staff-clef.bass{font-size:44px}.staff-accidental{font-family:Noto Music,serif;font-size:28px;fill:var(--ink)}.staff-head{fill:var(--ink);transition:fill .16s ease}.staff-note.done .staff-head{fill:var(--match-white-edge)}.staff-note.next .staff-head{fill:var(--next-ring)}.staff-note.pending{opacity:.55}.staff-note.miss .staff-head,.staff-note.miss .staff-accidental{fill:var(--miss-edge)}.staff-note.miss .staff-ledger{stroke:var(--miss-edge)}.staff-note.miss{animation:staff-miss .7s ease-out forwards}@keyframes staff-miss{0%,50%{opacity:.9}to{opacity:0}}.exercise-call{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.28em;color:var(--muted)}.exercise-prompt{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-height:clamp(3.6rem,8vw,5.4rem)}.exercise-prompt-roman{font-family:var(--font-mono);font-size:.9rem;letter-spacing:.24em;color:var(--muted);text-transform:none;font-weight:500;min-height:1.1rem}.exercise-prompt-name{font-family:var(--font-display);font-size:clamp(2.6rem,6vw,4rem);font-style:italic;font-weight:400;line-height:1;letter-spacing:-.015em;color:var(--ink);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1;font-feature-settings:"ss01","kern","liga";min-height:clamp(2.6rem,6vw,4rem)}.key-selector.in-practice .key-chord-btn{cursor:default;opacity:.7}.key-selector.in-practice .key-chord-btn:hover,.key-selector.in-practice .key-chord-btn:focus-visible{opacity:.7}.key-selector.in-practice .key-chord-btn.active{opacity:1}.exercise-feedback{font-family:var(--font-serif);font-size:1.05rem;font-style:italic;color:var(--muted);min-height:1.4rem;text-align:center;transition:color .22s ease}.exercise-feedback.correct{color:var(--match-white-edge)}.exercise-stats{display:flex;align-items:baseline;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}.exercise-stat{display:inline-flex;align-items:baseline;gap:.45rem}.exercise-stat-label{color:var(--muted)}.exercise-stat-value{color:var(--ink);font-weight:500;letter-spacing:.08em;min-width:1.2em;text-align:right;display:inline-block}.exercise-stat-divider{color:var(--rule);-webkit-user-select:none;user-select:none}.exercise-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;padding-top:.4rem}.exercise-btn{background:var(--paper);border:1px solid var(--rule);font:inherit;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);cursor:pointer;padding:.45rem .85rem;border-radius:2px;transition:color .14s ease,border-color .14s ease,background .14s ease}.exercise-btn:hover,.exercise-btn:focus-visible{color:var(--ink);border-color:var(--ink-soft);outline:none}.exercise-btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}.exercise-btn.primary:hover,.exercise-btn.primary:focus-visible{background:var(--ink-soft);color:var(--paper)}.exercise-btn:disabled{opacity:.45;cursor:default}.exercise-feedback.wrong{color:var(--miss-edge)}.lessons{display:flex;flex-direction:column;gap:.85rem;padding:0 0 1.1rem}.lesson-path-intro{font-family:var(--font-serif);font-style:italic;color:var(--ink-soft);text-align:center;font-size:1.05rem;margin-bottom:.4rem}.lesson-path-list{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--rule-soft)}.lesson-path-item{border-bottom:1px solid var(--rule-soft)}.lesson-path-btn{display:grid;grid-template-columns:2rem 1fr auto;align-items:center;gap:.9rem;width:100%;padding:.75rem .5rem;background:none;border:none;text-align:left;cursor:pointer;color:var(--ink);transition:background .14s ease}.lesson-path-btn:hover,.lesson-path-btn:focus-visible{background:var(--paper);outline:none}.lesson-path-num{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);text-align:center}.lesson-path-item.complete .lesson-path-num{color:var(--match-white-edge)}.lesson-path-text{display:flex;flex-direction:column;gap:.1rem;min-width:0}.lesson-path-title{font-family:var(--font-display);font-size:1.35rem;font-style:italic;line-height:1.1;font-variation-settings:"opsz" 60,"SOFT" 80,"WONK" 1}.lesson-path-concept{font-family:var(--font-serif);font-size:.95rem;color:var(--muted)}.lesson-path-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.18em;white-space:nowrap}.lesson-path-badge{background:var(--ink);color:var(--paper);padding:.18rem .45rem;border-radius:2px}.lesson-path-status{color:var(--muted)}.lesson-path-status.complete{color:var(--match-white-edge)}.lesson-path-status.in-progress{color:var(--accent)}.lesson-path-item.recent .lesson-path-btn{box-shadow:inset 2px 0 0 var(--accent-bright)}.lesson-card{align-items:stretch}.lesson-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem}.lesson-header:after{content:"";width:4.5rem}.lesson-back{background:none;border:none;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);cursor:pointer;padding:.3rem 0;width:4.5rem;text-align:left}.lesson-back:hover,.lesson-back:focus-visible{color:var(--ink);outline:none}.lesson-unit-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);font-style:italic;font-weight:400;text-align:center;line-height:1;font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1}.lesson-stepper{display:flex;justify-content:center;flex-wrap:wrap;gap:.35rem}.lesson-step{width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid var(--rule);background:var(--paper);font-family:var(--font-mono);font-size:.68rem;color:var(--muted);cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease}.lesson-step.passed{background:var(--match-white-edge);border-color:var(--match-white-edge);color:var(--paper)}.lesson-step[aria-current=step]{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink);color:var(--ink)}.lesson-step.passed[aria-current=step]{color:var(--paper)}.lesson-step:disabled{opacity:.4;cursor:default}.lesson-card>.exercise-call{text-align:center}.lesson-body{display:flex;flex-direction:column;align-items:center;gap:.65rem;width:100%}.lesson-body .exercise-actions,.lesson-body .tempo-controls .exercise-actions{align-self:stretch;align-items:center}.lesson-concept-title{font-family:var(--font-display);font-size:1.35rem;font-weight:400;text-align:center;font-variation-settings:"opsz" 60,"SOFT" 80,"WONK" 1}.lesson-concept-text{font-family:var(--font-serif);font-size:1.08rem;line-height:1.45;color:var(--ink-soft);max-width:34rem}.lesson-prompt{font-family:var(--font-display);font-size:clamp(1.35rem,3.5vw,1.8rem);font-style:italic;text-align:center;line-height:1.15;font-variation-settings:"opsz" 60,"SOFT" 80,"WONK" 1}.lesson-instructions{font-family:var(--font-serif);font-size:1rem;color:var(--muted);text-align:center;max-width:32rem}.lesson-answer{font-family:var(--font-mono);font-size:1.1rem;letter-spacing:.1em;min-height:1.3rem;color:var(--match-white-edge)}.lesson-counter{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}.lesson-run-options{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.35rem 1rem;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.2em}.lesson-run-strip{display:flex;justify-content:center;width:100%}.lesson-footer{display:flex;justify-content:center;min-height:2.2rem}.tempo-rungs{display:flex;gap:.35rem}.tempo-rung{font-family:var(--font-mono);font-size:.78rem;padding:.3rem .6rem;border:1px solid var(--rule);border-radius:999px;background:var(--paper);color:var(--ink-soft);cursor:pointer}.tempo-rung.target{border-style:dashed;border-color:var(--ink-soft)}.tempo-rung.cleared{background:var(--match-white-edge);border-color:var(--match-white-edge);color:var(--paper)}.tempo-rung[aria-pressed=true]{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}.tempo-rung:disabled{opacity:.4;cursor:default}.tempo-controls{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%}.tempo-pulse{width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:1rem;color:var(--ink)}.tempo-pulse.beat{animation:tempo-pulse .22s ease-out}@keyframes tempo-pulse{0%{background:var(--target-white);border-color:var(--target-white-edge);transform:scale(1.12)}to{background:transparent;transform:scale(1)}}.timing-timeline{display:flex;flex-direction:column;align-items:center;gap:.25rem;width:100%}.timing-svg{width:100%;max-width:420px;height:auto}.timing-axis{stroke:var(--rule);stroke-width:1}.timing-beat{stroke:var(--ink-soft);stroke-width:1}.timing-window{fill:var(--paper-edge)}.timing-dot.in{fill:var(--match-white-edge)}.timing-dot.out{fill:var(--miss-edge)}.timing-summary{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--muted)}@media (max-width: 720px){.lesson-path-btn{grid-template-columns:1.5rem 1fr auto;gap:.6rem}.lesson-path-title{font-size:1.15rem}.lesson-header:after,.lesson-back{width:3.6rem}}.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;flex-shrink:0}#sign-in-slot{position:relative}.signin-trigger{background:none;border:1px solid var(--rule);border-radius:999px;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);padding:.3rem .75rem;cursor:pointer;transition:color .14s ease,border-color .14s ease,background .14s ease}.signin-trigger:hover,.signin-trigger:focus-visible{color:var(--ink);border-color:var(--ink-soft);outline:none}.exercise-hint[aria-pressed=true]{background:var(--target-white);border-color:var(--target-white-edge);color:var(--ink)}@media (max-width: 720px){.exercise-card{padding:1rem .75rem 1.2rem}.exercise-stats{flex-wrap:wrap;justify-content:center}}.signin-panel{position:absolute;top:calc(100% + .4rem);right:0;min-width:280px;max-width:calc(100vw - 2rem);background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:0 6px 18px #1a18141a;padding:.9rem .9rem .85rem;z-index:10}.signin-panel-label{font-family:var(--font-serif);font-size:.98rem;line-height:1.4;color:var(--ink-soft);margin:0 0 .75rem}.signin-panel-error{font-family:var(--font-serif);font-size:.95rem;color:var(--miss-edge);margin:0 0 .7rem;line-height:1.4}.signin-panel-note{font-family:var(--font-serif);font-style:italic;font-size:.95rem;color:var(--muted);margin:0 0 .7rem;line-height:1.4}.google-signin-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;min-height:40px;padding:0 .85rem;background:var(--gsi-bg);border:1px solid var(--gsi-border);border-radius:4px;color:var(--gsi-text);font-family:Roboto,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:.25px;cursor:pointer;transition:box-shadow .14s ease,background .14s ease}.google-signin-btn:hover:not(:disabled){box-shadow:0 1px 3px #3c40434d,0 1px 2px #3c404326}.google-signin-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.google-signin-btn:disabled{opacity:.6;cursor:progress}.google-mark{display:inline-flex;width:20px;height:20px;flex-shrink:0}.google-mark svg{width:100%;height:100%}.profile-chip{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--rule);border-radius:999px;padding:.25rem .7rem .25rem .25rem;font-family:var(--font-mono);font-size:.7rem;color:var(--ink);cursor:pointer;transition:border-color .14s ease}.profile-chip:hover,.profile-chip:focus-visible{border-color:var(--ink-soft);outline:none}.profile-chip-avatar{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--paper);font-family:var(--font-display);font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;font-weight:500;line-height:1}.profile-chip-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-panel{position:absolute;top:calc(100% + .4rem);right:0;min-width:280px;max-width:calc(100vw - 2rem);background:var(--paper);border:1px solid var(--rule);border-radius:4px;box-shadow:0 6px 18px #1a18141a;padding:.9rem;z-index:10}.profile-panel-header{display:flex;align-items:center;gap:.65rem;margin-bottom:.85rem}.profile-panel-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--paper);font-family:var(--font-display);font-size:1.2rem;display:inline-flex;align-items:center;justify-content:center;font-weight:500;flex-shrink:0}.profile-panel-email{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);word-break:break-all}.profile-panel-field{margin-bottom:.65rem}.profile-panel-field-label{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-soft);margin:0 0 .2rem}.profile-panel-name-input{width:100%;background:var(--paper);border:1px solid var(--rule);border-radius:2px;font:inherit;font-family:var(--font-mono);font-size:.85rem;color:var(--ink);padding:.35rem .5rem;box-sizing:border-box}.profile-panel-name-input:focus-visible{outline:none;border-color:var(--ink-soft)}.profile-panel-signout{display:block;width:100%;background:none;border:1px solid var(--rule);border-radius:2px;font-family:var(--font-mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink);padding:.45rem .75rem;cursor:pointer;transition:border-color .14s ease,color .14s ease;margin:.4rem 0 .85rem}.profile-panel-signout:hover,.profile-panel-signout:focus-visible{border-color:var(--ink-soft);color:var(--accent-warm);outline:none}.profile-panel-deletion-note{font-family:var(--font-serif);font-size:.75rem;color:var(--ink-soft);line-height:1.45;margin:0;border-top:1px solid var(--rule-soft);padding-top:.65rem}.profile-panel-toast{font-family:var(--font-mono);font-size:.7rem;color:var(--accent-warm);margin:.4rem 0 0}@media (max-width: 720px){#sign-in-slot{top:.5rem;right:.5rem}.signin-panel,.profile-panel{position:fixed;top:auto;bottom:1rem;left:1rem;right:1rem;max-width:none;min-width:0}}