: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: #665e57;--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;--on-key: #1a1814;--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}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}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;--page-pad: 3rem;padding:1.75rem var(--page-pad) 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-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)}.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)}#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}.primary-octave{margin-left:.08em;font-size:.36em;font-style:normal;letter-spacing:0;color:var(--ink-soft)}.in-key{font-family:var(--font-mono);font-size:.86rem;font-weight:600;letter-spacing:.04em;color:var(--ink);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.in-key:empty,.notes:empty,.alternates:empty{display:none}.trail{list-style:none;display:flex;justify-content:center;gap:.4rem;min-height:1.9rem;margin-top:.9rem}.trail-chip{flex:0 1 auto;min-width:1.9rem;padding:0 .5rem;border:1px solid var(--rule);border-radius:999px;font-family:var(--font-mono);font-size:.78rem;line-height:1.8rem;text-align:center;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trail-chip.latest{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.last-chord{display:flex;flex-direction:column;gap:.15rem;min-width:0;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper-edge);text-align:left}.last-chord-label{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}.last-chord-name{font-family:var(--font-display);font-size:1.45rem;line-height:1.2;color:var(--ink)}.last-chord-text{font-family:var(--font-mono);font-size:.74rem;line-height:1.4;color:var(--ink-soft)}@media not all and (min-width: 1100px) and (min-height: 700px){main{--bar-h: calc(3.6rem + env(safe-area-inset-bottom, 0px)) ;padding-bottom:0}main>header{order:0}main>.pane-header{order:1}main>.stage-dock{order:2}main>.key-row{order:3}main>.task-pane{order:4}main>.rail{display:contents}.rail>footer{order:6}.rail>.rail-bar{order:7}main[data-view=lessons]>.key-row,main[data-view=drills]>.key-row{order:2}main[data-view=lessons]>.key-row{display:none}main[data-view=lessons]>.task-pane,main[data-view=drills]>.task-pane{order:3}main[data-view=lessons] .rail>footer,main[data-view=drills] .rail>footer{order:4}.keyboard-wrap .key-legend{gap:.2rem .7rem;letter-spacing:.06em}.legend-more{display:none}main[data-view=lessons]>.stage-dock,main[data-view=drills]>.stage-dock{order:5;position:sticky;bottom:var(--bar-h);z-index:5;margin:0 calc(-1 * var(--page-pad));padding:.35rem var(--page-pad) .6rem;background:var(--bg);border-top:1px solid var(--rule-soft);box-shadow:0 -10px 18px -14px #1a181459}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,main[data-view=lessons] .trail,main[data-view=drills] .trail{display:none}.last-chord{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}}.keyboard-wrap{margin:.5rem 0 1rem;padding:0}.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}.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)}}.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)}.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;visibility:hidden;transition:opacity .14s ease,color .14s ease}.lookup-clear:hover{color:var(--ink)}.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-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-glyph{font-size:1rem;line-height:1;transform:translate(.1rem)}.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)}.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)}.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)}.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{--page-pad: 1.25rem;padding:1rem var(--page-pad) 0}.display{padding:1.5rem 0 1rem;min-height:160px}.keyboard{height:110px}.keyboard-frame{padding:.5rem .5rem .4rem}.meta{margin-top:1rem}.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}}.exercises{display:flex;flex-direction:column;gap:.85rem;padding:0 0 1.1rem;margin-top:.25rem}.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)}.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)}@media (max-width: 720px){.exercise-card{padding:1rem .75rem 1.2rem}}.exercise-scale-options{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.4rem 1.4rem}.hand-toggle{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{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,.hand-btn:focus-visible{color:var(--ink)}.hand-btn[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}.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)}.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-feedback.wrong{color:var(--miss-edge)}.lessons{display:flex;flex-direction:column;gap:.85rem;padding:0 0 1.1rem}.lesson-path{position:absolute;top:calc(100% + 4px);left:var(--pane-pad);z-index:20;width:min(30rem,calc(100% - 2 * var(--pane-pad)));overflow-y:auto;padding:.7rem .75rem .5rem;background:var(--paper);border:1px solid var(--rule);border-radius:6px;box-shadow:0 14px 30px #1a181438}.lesson-path-intro{font-family:var(--font-serif);font-style:italic;color:var(--ink-soft);font-size:.98rem;margin:0 .5rem .55rem}.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:.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(--bg)}.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.15rem;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:.9rem;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-btn[aria-current=true]{box-shadow:inset 2px 0 0 var(--accent-bright)}.lesson-card{align-items:stretch}.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-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-run-strip{display:flex;justify-content:center;width:100%}.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}}#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)}.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)}.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)}.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}}.topbar{flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}.topbar-search{flex:1 1 16rem;min-width:12rem;max-width:30rem}.topbar-search.has-target .lookup-clear{opacity:1;pointer-events:auto;visibility:visible}.topbar-search .lookup-hint{position:absolute;top:calc(100% + 3px);left:0;z-index:6;flex-basis:auto;margin:0;padding:.3rem .5rem;background:var(--paper);border:1px solid var(--rule);border-radius:2px;pointer-events:none}.topbar-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}.topbar .input-bar{margin:0;justify-content:flex-start;gap:.45rem .7rem}.pane-label{display:none}.task-pane{display:flex;flex-direction:column;min-width:0}.rail{display:flex;flex-direction:column;gap:.9rem;padding-top:1rem}.rail-section{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.rail-heading,.pane-label{font-family:var(--font-mono);font-size:.66rem;font-weight:400;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}.key-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.1rem;margin-top:.45rem;font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}.key-legend li{display:flex;align-items:center;gap:.4rem}.key-legend .legend-swatch{width:.95rem;height:1.2rem;font-size:.6rem}.key-legend .legend-swatch.held:after,.key-legend .legend-swatch.match:after{width:4px;height:4px}.key-legend .legend-swatch.target:before,.key-legend .legend-swatch.match:before{width:9px;height:9px;border-width:1.5px}.key-selector.locked .key-root-btn,.key-selector.locked .key-mode-btn{cursor:default}.key-selector.locked .key-root-btn:not(.active),.key-selector.locked .key-mode-btn:not(.active){opacity:.45}@media (max-width: 720px){.topbar{gap:.6rem .75rem;padding-bottom:.8rem}.masthead{gap:.45rem}.brand-mark{font-size:1.9rem}.wordmark{font-size:1.7rem}.tagline,.topbar .input-hint{display:none}.topbar-search{flex-basis:9rem;min-width:8rem;max-width:none}.topbar-tools{flex-basis:100%}}@media (min-width: 1100px) and (min-height: 700px){main{max-width:none;margin:0;padding:0;min-height:0;height:100dvh;display:grid;grid-template-columns:19rem minmax(0,1fr) 15rem;grid-template-rows:auto auto auto auto minmax(0,1fr);grid-template-areas:"topbar topbar topbar" "keyrow keyrow keyrow" "keyboard keyboard keyboard" "now modes rail" "now task rail"}main>header{grid-area:topbar;flex-wrap:nowrap;padding:.5rem 1rem;background:var(--paper)}header:after{display:none}.tagline{display:none}.brand-mark{font-size:1.9rem}.wordmark{font-size:1.75rem}.topbar-tools{flex-wrap:nowrap;margin-left:auto}.topbar .input-bar{flex-wrap:nowrap}.topbar .input-status{display:inline-block;max-width:15rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle}.topbar .input-status:before{display:inline-block;margin-right:.5rem;vertical-align:middle}.topbar .input-hint{display:none}.key-row{grid-area:keyrow;padding:.35rem 1rem;border-bottom:1px solid var(--rule)}.key-row .key-selector{flex-direction:row;align-items:center;gap:1rem;padding:0;margin:0}.key-row .key-selector-heading{margin:0}.key-row .key-selector-heading-rule{display:none}.key-row .key-selector-controls{flex:none;flex-wrap:nowrap;gap:1rem}.key-row .key-palette{flex:1;flex-wrap:nowrap;min-height:0}.key-row .key-chord-btn{min-width:0;padding:.32rem .4rem .36rem}.stage-dock{display:contents}.keyboard-wrap{grid-area:keyboard;margin:0;padding:.55rem 1rem .65rem;background:var(--paper-edge);border-bottom:1px solid var(--rule)}.display{grid-area:now;align-items:stretch;justify-content:flex-start;text-align:left;min-width:0;padding:.9rem 1.1rem;background:var(--paper);border-right:1px solid var(--rule);overflow:hidden}.pane-label{display:block;margin-bottom:.6rem}.primary{font-size:4.5rem;height:5rem;line-height:5rem;text-align:left;text-indent:0}.primary.empty:before{font-size:1.7rem}.meta{align-items:flex-start;margin-top:.5rem;gap:.35rem}.trail{justify-content:flex-start}.last-chord{margin-top:auto}.pane-header{grid-area:modes}.task-pane{grid-area:task;min-height:0;overflow-y:auto;padding:.4rem 1.25rem 1rem}.rail{grid-area:rail;min-height:0;overflow-y:auto;padding:.9rem;background:var(--paper);border-left:1px solid var(--rule)}}.rail-actions{align-items:stretch;gap:.55rem}.rail-pair{display:flex;gap:.5rem}.rail-pair .rail-btn{flex:1;min-width:0}.rail-btn{min-height:2.9rem;padding:.4rem .5rem;border:1px solid var(--ink);border-radius:6px;background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:.7rem;line-height:1.3;text-transform:uppercase;letter-spacing:.12em;cursor:pointer;transition:background-color .14s ease,color .14s ease,border-color .14s ease}.rail-btn-primary{min-height:3.5rem;background:var(--ink);color:var(--paper);font-size:.8rem}.rail-btn-exit{border-color:var(--rule);color:var(--ink-soft)}.rail-btn:hover:not(:disabled){background:var(--hover)}.rail-btn-primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.rail-btn[aria-pressed=true]{background:var(--ink);color:var(--paper)}.rail-btn.emphasis,.rail-btn.emphasis:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--paper)}.rail-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.rail-btn:disabled{opacity:.4;cursor:default}.rail-btn.empty{visibility:hidden}.rail-metronome,.rail-show{align-items:stretch}.rail-metronome{position:relative}.metro-row{display:flex;gap:.4rem}.metro-step{flex:none;width:2.9rem;padding:0;font-size:1.15rem;letter-spacing:0}.metro-click{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.4rem;padding-block:0}.metro-bpm{font-family:var(--font-display);font-size:1.55rem;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}.metro-unit{font-size:.62rem}.metro-pulse{flex:none;width:.55rem;height:.65rem;margin-right:.15rem;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}.metro-click[aria-pressed=true] .metro-pulse{height:.55rem;border-radius:50%;clip-path:none}.metro-pulse.beat{animation:metro-pulse .2s ease-out}@keyframes metro-pulse{0%{transform:scale(1.7)}to{transform:scale(1)}}@media (prefers-reduced-motion: reduce){.metro-pulse.beat{animation:none}}.rail-metronome.locked .metro-click:disabled{opacity:1}.rail-metronome.locked .metro-click[aria-pressed=false]{border-color:var(--rule)}.rail-metronome.locked .metro-click[aria-pressed=false] .metro-pulse{display:none}.metro-note{position:absolute;top:0;right:0;font-family:var(--font-mono);font-size:.62rem;line-height:1.5;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}.rail-toggles{display:flex;gap:.4rem}.rail-toggles .rail-btn{flex:1;min-width:0;padding-inline:.2rem;letter-spacing:.06em}.rail-bar,.rail-extras{display:contents}.rail-more{display:none}@media not all and (min-width: 1100px) and (min-height: 700px){.rail>.rail-bar{position:sticky;bottom:0;z-index:12;display:flex;align-items:stretch;gap:.35rem;height:var(--bar-h);margin:0 calc(-1 * var(--page-pad));padding:.4rem var(--page-pad) calc(.4rem + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--rule);box-shadow:0 -10px 18px -14px #1a181459}.rail-bar .rail-actions{flex:1;min-width:0;display:grid;grid-template-columns:1.25fr 1fr 1fr 1.25fr;gap:.35rem}.rail-actions .rail-heading{display:none}.rail-actions .rail-pair{display:contents}.rail-bar .rail-actions .rail-btn,.rail-bar .rail-more{min-width:0;min-height:0;padding:.15rem .25rem;font-size:.6rem;line-height:1.2;letter-spacing:.04em;overflow-wrap:anywhere}.rail-bar .rail-more{display:block;flex:none;width:3.2rem;border-color:var(--rule);color:var(--ink-soft)}.rail-bar .rail-more[aria-expanded=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.rail-bar .rail-extras{display:none}.rail-bar.more-open .rail-extras{position:absolute;left:0;right:0;bottom:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem 1.25rem;padding:.85rem var(--page-pad) .95rem;background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -12px 22px -14px #1a181466}.rail>footer{padding:1rem 0}}.pane-header{--pane-pad: 0px;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .75rem}.mode-toggle{display:flex;font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em}.view-btn{padding:.6rem 1rem;border:1px solid var(--ink);border-left-width:0;background:none;color:var(--ink);font:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;transition:background-color .14s ease,color .14s ease}.view-btn:first-of-type{border-left-width:1px;border-radius:4px 0 0 4px}.view-btn:last-of-type{border-radius:0 4px 4px 0}.view-btn:hover,.view-btn:focus-visible{background:var(--hover)}.view-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}.view-btn.active{background:var(--ink);color:var(--paper)}.pane-context{display:flex;align-items:center;min-width:0}.pane-context:empty,.pane-status:empty{display:none}.pane-status{font-family:var(--font-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft)}.pane-btn{min-height:2.35rem;padding:.3rem .8rem;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.pane-btn:hover{border-color:var(--ink-soft)}.pane-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.pane-tabs{display:flex}.pane-tabs .pane-btn:first-child{border-radius:4px 0 0 4px}.pane-tabs .pane-btn:last-child{border-left-width:0;border-radius:0 4px 4px 0}.pane-tabs .pane-btn[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.lesson-unit-btn:after{content:"▾";margin-left:.5rem;color:var(--muted)}.chord-detail{display:flex;flex-direction:column;gap:.85rem;padding-top:.35rem}.chord-detail-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.2rem 1.1rem}.chord-detail-name{font-family:var(--font-display);font-size:clamp(2.8rem,6vw,4.4rem);font-weight:400;line-height:.95;letter-spacing:-.015em;font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 1}.chord-detail-place{padding-bottom:.4rem;font-family:var(--font-mono);font-size:.86rem;font-weight:600;letter-spacing:.04em;color:var(--ink)}.chord-detail-place:empty{display:none}.chord-tones{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}.chord-tone{flex:1 1 4.6rem;min-height:4.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.4rem .3rem;border:2px solid var(--target-white-edge);border-radius:8px;background:var(--target-white);color:var(--on-key);text-align:center;transition:background-color .12s ease,border-color .12s ease}.chord-tone.held{background:var(--match-white);border-color:var(--match-white-edge)}.chord-tone.missing{border-style:dashed}.chord-tone-name{font-family:var(--font-display);font-size:1.6rem;line-height:1}.chord-tone-meta{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em}.playback-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;min-height:2.75rem}.playback-row>div{display:flex;align-items:center;gap:.5rem}.exercise-main{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%;min-width:0}.exercise-side{display:flex;flex-direction:column;gap:.55rem;width:100%;max-width:26rem}.exercise-prompt{display:flex;flex-direction:column;align-items:center;gap:.3rem}.exercise-prompt-roman{font-family:var(--font-display);font-size:clamp(4rem,10vw,7rem);font-weight:400;line-height:.95;color:var(--ink);min-height:clamp(3.8rem,9.5vw,6.65rem);font-variation-settings:"opsz" 144,"SOFT" 80,"WONK" 0}.exercise-prompt-name{font-family:var(--font-display);font-size:1.5rem;font-style:italic;font-weight:400;line-height:1.1;color:var(--ink-soft);min-height:1.65rem;font-variation-settings:"opsz" 60,"SOFT" 80,"WONK" 1}.exercise-stats{display:flex;gap:.5rem}.exercise-stat{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;padding:.5rem .75rem .55rem;border:1px solid var(--rule);border-radius:8px;background:var(--bg)}.exercise-stat-label,.exercise-next-label{font-family:var(--font-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.exercise-stat-value{font-family:var(--font-display);font-size:2rem;line-height:1.1;color:var(--ink)}.exercise-card[data-type=scales] .exercise-stat{flex-direction:row;align-items:baseline;justify-content:center;gap:.45rem;padding:.25rem .6rem}.exercise-card[data-type=scales] .exercise-stat-value{font-size:1.15rem}.exercise-next{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .75rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper-edge)}.exercise-next-roman{font-family:var(--font-display);font-size:1.6rem;line-height:1;color:var(--ink)}@media (min-width: 720px){.exercise-card[data-type=chords]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"type type" "main side";align-items:center;gap:.8rem 1.75rem}.exercise-card[data-type=chords] .exercise-type-toggle{grid-area:type;justify-self:center}.exercise-card[data-type=chords] .exercise-main{grid-area:main}.exercise-card[data-type=chords] .exercise-side{grid-area:side;max-width:none}}@media (min-width: 1100px) and (min-height: 700px){.pane-header{--pane-pad: 1.25rem;justify-content:flex-start;padding:.75rem var(--pane-pad) .35rem}.pane-status{margin-left:auto;text-align:right}}@media not all and (min-width: 1100px) and (min-height: 700px){.pane-header{padding:.85rem 0 .35rem}.pane-header .mode-toggle{flex:1 1 100%;max-width:30rem}.mode-toggle .view-btn{flex:1;padding-inline:.4rem}.pane-status{flex-basis:100%;text-align:center}.chord-detail-head{justify-content:center;text-align:center}.chord-detail .playback-row{justify-content:center}}