:root{--ground:#f4f4f8;--surface:#fff;--surface-2:#edecf3;--ink:#17161f;--ink-soft:#5a566b;--ink-faint:#67637c;--rule:#e0deea;--tonic:#a85f0c;--tonic-wash:#f6ecdd;--dominant:#4a40c4;--dominant-wash:#e9e7fa;--pass:#276448;--fail:#9e3535;--f-display:"Instrument Serif", Georgia, serif;--f-body:"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#121118;--surface:#1a1922;--surface-2:#22212c;--ink:#eceaf3;--ink-soft:#a19cb4;--ink-faint:#938ead;--rule:#2b2937;--tonic:#e4a257;--tonic-wash:#2a2117;--dominant:#9a91f7;--dominant-wash:#1e1c33;--pass:#5fbe8f;--fail:#e28080}}:root[data-theme=dark]{--ground:#121118;--surface:#1a1922;--surface-2:#22212c;--ink:#eceaf3;--ink-soft:#a19cb4;--ink-faint:#938ead;--rule:#2b2937;--tonic:#e4a257;--tonic-wash:#2a2117;--dominant:#9a91f7;--dominant-wash:#1e1c33;--pass:#5fbe8f;--fail:#e28080}*{box-sizing:border-box}body{background:var(--ground);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0;font-size:16px;line-height:1.55}#app{max-width:34rem;padding:1.5rem 1.15rem calc(2.5rem + env(safe-area-inset-bottom));flex-direction:column;gap:1.1rem;min-height:100dvh;margin:0 auto;display:flex}:focus-visible{outline:2px solid var(--dominant);outline-offset:2px}h1{font-family:var(--f-display);letter-spacing:-.015em;margin:0;font-size:3.4rem;font-weight:400;line-height:.92}h2{margin:0 0 .15rem;font-size:1.05rem;font-weight:700}p{margin:0}.eyebrow{font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-size:.68rem}.card{background:var(--surface);border:1px solid var(--rule);border-radius:8px;flex-direction:column;gap:.65rem;padding:1rem 1.05rem;display:flex}.muted{color:var(--ink-soft);font-size:.9rem}.mono{font-family:var(--f-mono);letter-spacing:.05em;color:var(--ink-faint);font-size:.72rem}button{font:inherit;cursor:pointer;border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:7px;padding:.7rem .9rem;transition:border-color .12s,background .12s}button:hover:not(:disabled){border-color:var(--ink-faint)}button:disabled{opacity:.45;cursor:default}button.primary{background:var(--tonic-wash);border-color:var(--tonic);color:var(--tonic);font-weight:600}button.game{background:var(--dominant-wash);border-color:var(--dominant);color:var(--dominant);font-weight:600}button.ghost{color:var(--ink-soft);background:0 0}.row{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.spread{justify-content:space-between;align-items:baseline;gap:.75rem;display:flex}.strip{gap:3px;height:20px;display:flex}.strip span{background:var(--surface-2);border-radius:1px;flex:1}.strip span.blk{background:var(--rule)}.strip span.root{background:var(--tonic)}.strip span.fifth{background:var(--dominant)}.seg{border:1px solid var(--rule);border-radius:7px;display:flex;overflow:hidden}.seg button{background:0 0;border:none;border-radius:0;flex:1;padding:.5rem .6rem;font-size:.85rem}.seg button[aria-pressed=true]{background:var(--surface-2);font-weight:600}.status{font-family:var(--f-mono);letter-spacing:.05em;color:var(--ink-faint);justify-content:space-between;font-size:.72rem;display:flex}.stage{background:var(--surface);border:1px solid var(--rule);text-align:center;border-radius:8px;flex-direction:column;align-items:center;gap:.9rem;padding:1.5rem 1.1rem;display:flex}.replay{min-width:11rem;padding:.85rem 1.4rem;font-size:1rem}.choices{grid-template-columns:repeat(2,1fr);gap:.5rem;display:grid}.choices button{min-height:3.4rem;padding:.95rem .6rem;font-size:.95rem}.choices button.correct{border-color:var(--pass);color:var(--pass);font-weight:600}.choices button.wrong{border-color:var(--fail);color:var(--fail)}.verdict{flex-direction:column;gap:.6rem;display:flex}.verdict .headline{font-weight:600}.verdict .headline.ok{color:var(--pass)}.verdict .headline.no{color:var(--fail)}.answer{font-family:var(--f-mono);color:var(--ink);font-size:.95rem}.big{font-family:var(--f-display);font-size:3rem;line-height:1}.big.ok{color:var(--pass)}.big.no{color:var(--fail)}table.confusions{border-collapse:collapse;width:100%;font-size:.86rem}table.confusions td{border-bottom:1px solid var(--rule);padding:.3rem 0}table.confusions td:last-child{text-align:right;font-family:var(--f-mono);color:var(--ink-faint);font-size:.8rem}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.masthead h1{font-size:3rem}h1.small{font-size:2.2rem}.tonic-side{border-left:3px solid var(--tonic)}.dominant-side{border-left:3px solid var(--dominant)}.part-head{align-items:baseline;gap:.85rem;padding-bottom:.35rem;display:flex}.part-head .pn{font-family:var(--f-display);color:var(--tonic);font-size:1.9rem;line-height:1}button.lesson,button.game-row{text-align:left;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.65rem .75rem;display:grid}button.game-row{grid-template-columns:1fr auto}button.lesson.passed{border-color:color-mix(in srgb, var(--pass) 45%, transparent)}button.lesson.locked,button.game-row.locked{opacity:.5}.lid{font-family:var(--f-mono);color:var(--ink-faint);font-size:.72rem}.ltitle{font-weight:500;line-height:1.3}.grade{font-family:var(--f-mono);letter-spacing:.04em;white-space:nowrap;font-size:.7rem}.grade.ok{color:var(--pass)}.grade.open{color:var(--dominant)}.grade.locked{color:var(--ink-faint)}.teach{gap:.9rem;min-height:12rem}.teach p{line-height:1.62}.teach .aim{font-family:var(--f-display);color:var(--ink-soft);font-size:1.25rem;line-height:1.3}.aside{border-left:2px solid var(--rule);color:var(--ink-soft);padding-left:.85rem;font-size:.92rem}.block{flex-direction:column;gap:.55rem;display:flex}.row.split{grid-template-columns:1fr 1fr;display:grid}.keys-scroll{-webkit-overflow-scrolling:touch;padding-bottom:.2rem;overflow:auto hidden}.keys{-webkit-user-select:none;user-select:none;touch-action:pan-x;width:100%;height:9rem;position:relative}@media (pointer:coarse){.keys{min-width:calc(var(--whites,14) * 2.6rem)}}.keys .key{border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding:0;display:flex;position:absolute;top:0}.keys .key.white{border:1px solid var(--rule);color:#4a4a58;z-index:1;background:#fbfbfd;height:100%}.keys .key.black{z-index:2;background:#24222e;border:1px solid #100f16;height:62%}.keys .key span{font-family:var(--f-mono);pointer-events:none;padding-bottom:.4rem;font-size:.6rem}.keys .key.white:hover:not(:disabled){background:var(--tonic-wash)}.keys .key.black:hover:not(:disabled){background:#3a3648}.keys .key.lit{background:var(--tonic);border-color:var(--tonic)}.keys .key.correct{background:var(--pass);border-color:var(--pass)}.keys .key.wrong{background:var(--fail);border-color:var(--fail)}.keys .key.given{box-shadow:inset 0 0 0 2px var(--dominant)}.tile-mode{font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dominant);opacity:.85;font-size:.6rem;position:absolute;top:.4rem;right:.5rem}.play-surface{flex-direction:column;gap:.6rem;display:flex}.play-surface .played{font-family:var(--f-mono);letter-spacing:.02em;background:var(--card);border:1px solid var(--rule);white-space:nowrap;border-radius:8px;min-height:1.6rem;margin:0;padding:.5rem .7rem;font-size:1.05rem;overflow-x:auto}.play-surface .eyebrow{margin:0}.play-surface .row{gap:.5rem;display:flex}.play-surface .row button{flex:1}.move .brief{border-left:2px solid var(--dominant);background:var(--card);border-radius:0 8px 8px 0;margin-top:.6rem;padding:.6rem .75rem}.move .brief .eyebrow{margin:0 0 .25rem}button.applied{border-color:var(--pass)}.status .leave{color:var(--muted);background:0 0;border:none;margin-left:.5rem;padding:0 .5rem;font-size:1rem;line-height:1}.status .leave:hover{color:var(--ink)}.row.split{padding-bottom:calc(.75rem + env(safe-area-inset-bottom));margin-top:auto}#app:has(.run){height:100dvh;overflow:hidden}.run{flex-direction:column;flex:1;gap:1.1rem;min-height:0;display:flex}.run-body{flex-direction:column;gap:1.1rem;min-height:0;display:flex;overflow-y:auto}.run-actions{padding-bottom:calc(.75rem + env(safe-area-inset-bottom));flex-direction:column;gap:.6rem;margin-top:auto;display:flex}.run-actions>button{width:100%}@media (height<=540px){#app{gap:.6rem;padding-top:.6rem}.run,.run-body{gap:.55rem}.keys{height:5.5rem}.card{padding:.65rem .85rem}.tab-head h1{font-size:1.7rem}.instruction{font-size:1rem}.stage{gap:.4rem}.tap-pad{min-height:5rem}.play-surface .played{padding:.3rem .55rem}}.found{flex-direction:column;gap:.2rem;margin:.4rem 0;display:flex}input[type=number]{border:1px solid var(--rule);background:var(--card);width:5.5rem;min-height:2.75rem;color:var(--ink);font:inherit;text-align:center;border-radius:8px;padding:.5rem .6rem}.carrying-on{text-align:center;opacity:.75;padding:.9rem 0}input[type=search],input[type=text],input[type=url],input[type=file]{border:1px solid var(--rule);background:var(--card);width:100%;min-height:2.75rem;color:var(--ink);font:inherit;border-radius:8px;padding:.65rem .75rem}input[type=file]{padding:.55rem .75rem}.seg button{min-height:2.75rem}.results{flex-direction:column;gap:.9rem;display:flex}.term{border-bottom:1px solid var(--rule)}.term:last-of-type{border-bottom:none}.term-head{text-align:left;background:0 0;border:none;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;padding:.6rem 0;display:flex}.term-head .ltitle{font-weight:600}.term-head .mono{color:var(--muted);white-space:normal;font-size:.78rem}.term.open{padding-bottom:.6rem}.term.open .records{border-left:2px solid var(--dominant);margin:.4rem 0;padding-left:.7rem}.term.open .records .mono{margin:.15rem 0;font-size:.78rem}.row.wrap{flex-wrap:wrap;gap:.4rem}button.chip{background:var(--tonic-wash);border:1px solid var(--rule);border-radius:999px;padding:.3rem .6rem;font-size:.75rem}.sandbox-symbol{letter-spacing:-.01em;min-height:2.6rem;margin:0 0 .2rem;font-size:2.1rem;font-weight:600}.row.spread{justify-content:space-between;align-items:center}.chord-pad{grid-template-columns:repeat(4,1fr);gap:.4rem;display:grid}@media (width>=520px){.chord-pad{grid-template-columns:repeat(7,1fr)}}.chord-key{flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .3rem;display:flex}.chord-key .cn{font-size:1rem;font-weight:600}input[type=range]{width:100%;accent-color:var(--tonic)}select{border:1px solid var(--rule);background:var(--card);color:var(--ink);font:inherit;border-radius:8px;flex:1;padding:.5rem}.tap-surface{flex-direction:column;gap:.6rem;display:flex}.tap-pad{letter-spacing:.02em;background:var(--tonic-wash);border:2px solid var(--tonic);min-height:9rem;color:var(--ink);touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:14px;font-size:1.4rem;font-weight:500;transition:transform 60ms,background 60ms}.tap-pad.hit{background:var(--tonic);color:var(--on-tonic,#fff);transform:scale(.985)}.tap-pad:disabled{opacity:.6}.rhythm-chart{flex-direction:column;gap:.35rem;display:flex}.rhythm-chart .chart-bar{gap:2px;display:flex}.rhythm-chart .cell{border:1px solid var(--rule);background:var(--card);height:2.4rem;font-family:var(--f-mono);color:var(--muted);border-radius:3px;flex:1;justify-content:center;align-items:center;font-size:.65rem;display:flex}.rhythm-chart .cell.beat{border-color:var(--ink);opacity:1}.rhythm-chart .cell.want{background:var(--fail);border-color:var(--fail);color:#fff}.rhythm-chart .cell.both{background:var(--pass);border-color:var(--pass);color:#fff}.rhythm-chart .cell.extra{box-shadow:inset 0 0 0 2px var(--fail)}table.transcript th{font-family:var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);text-align:right;padding-bottom:.4rem;font-size:.66rem;font-weight:500}table.transcript th:first-child,table.transcript td:first-child{text-align:left}table.transcript td{text-align:right;font-family:var(--f-mono);font-size:.78rem}table.transcript td:first-child{font-family:var(--f-body);font-size:.86rem}.instruction{font-family:var(--f-display);color:var(--ink);font-size:2.6rem;line-height:1}.staff{color:var(--ink);max-width:100%;overflow-x:auto}.staff svg{max-width:100%;height:auto;color:var(--ink);display:block}.staff svg [fill=none]{stroke:currentColor}.staff svg path:not([fill=none]),.staff svg rect:not([fill=none]),.staff svg text,.staff svg g{fill:currentColor!important}.staff svg .vf-stem path,.staff svg .vf-stave path,.staff svg .vf-stavebarline path,.staff svg .vf-beam path{stroke:currentColor}.staff svg{shape-rendering:geometricprecision}.staff svg path{vector-effect:non-scaling-stroke}.staff svg .vf-stem path{stroke-width:1.5px;stroke-linecap:butt}.staff-slot{min-height:8.75rem}.game-group{grid-template-columns:1.4rem 1fr auto;align-items:baseline;gap:.6rem;padding:.85rem 0 .15rem;display:grid}.game-group .gn{font-family:var(--f-display);color:var(--dominant);font-size:1.35rem;line-height:1}.game-group .gt{font-size:.92rem;font-weight:600}.sync-body{flex-direction:column;gap:.55rem;display:flex}.synckey{font-family:var(--f-mono);letter-spacing:.04em;word-break:break-all;background:var(--surface-2);border:1px solid var(--rule);-webkit-user-select:all;user-select:all;border-radius:5px;padding:.55rem .6rem;font-size:.78rem}.sync-body input[type=text]{font:inherit;border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-radius:7px;width:100%;padding:.6rem .7rem;font-size:.88rem}.sync-body input[type=text]::placeholder{color:var(--ink-faint)}.weak-row{border-bottom:1px solid var(--rule);grid-template-columns:1fr auto auto;align-items:baseline;gap:.7rem;padding:.4rem 0;display:grid}.weak-row:last-of-type{border-bottom:none}.moves{gap:.7rem;display:grid}.move{background:var(--surface);border:1px solid var(--rule);border-radius:8px;flex-direction:column;gap:.5rem;padding:.9rem 1rem;display:flex}.move.locked{opacity:.55}.move h4{margin:0;font-size:1rem;font-weight:700}.move p{font-size:.9rem;line-height:1.55}.tuner{background:var(--surface);border:1px solid var(--rule);text-align:center;border-radius:8px;flex-direction:column;align-items:center;gap:.7rem;padding:1.1rem;display:flex}.tuner-note{font-family:var(--f-display);font-size:3rem;line-height:1}.tuner-meter{background:var(--surface-2);border-radius:5px;width:100%;height:10px;position:relative}.tuner-centre{background:var(--rule-strong,var(--ink-faint));width:2px;height:16px;position:absolute;top:-3px;left:50%}.tuner-needle{background:var(--ink-faint);border-radius:2px;width:4px;height:18px;transition:left 80ms linear,background .15s;position:absolute;top:-4px;left:50%;transform:translate(-50%)}.tuner-needle.close{background:var(--pass)}#app{padding-bottom:0}.tab-body{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom));flex-direction:column;gap:1.1rem;display:flex}.tab-head h1{font-size:2.6rem}.tab-head{padding-top:.5rem}.tabbar{background:var(--surface);border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom);z-index:10;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar .tab{color:var(--ink-faint);background:0 0;border:none;border-radius:0;flex-direction:column;align-items:center;gap:.15rem;padding:.6rem .3rem .7rem;display:flex}.tabbar .tab.current{color:var(--tonic)}.tab-glyph{font-size:1.05rem;line-height:1}.tab-label{letter-spacing:.03em;font-size:.68rem}.hero h2{font-family:var(--f-display);margin:.1rem 0 .2rem;font-size:1.9rem;font-weight:400;line-height:1.1}button.part-toggle{text-align:left;background:var(--surface-2);grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.6rem;padding:.65rem .75rem;display:grid}button.part-toggle .pn{font-family:var(--f-display);color:var(--tonic);font-size:1.25rem;line-height:1}button.part-toggle.open{border-color:var(--tonic)}.play-group{grid-template-columns:2rem 1fr auto;align-items:baseline;gap:.6rem;padding:.6rem 0 .1rem;display:grid}.play-group .pn{font-family:var(--f-display);color:var(--dominant);font-size:1.3rem;line-height:1}.play-group .gt{font-size:.92rem;font-weight:600}.tiles{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.5rem;display:grid}button.tile{text-align:left;flex-direction:column;align-items:flex-start;gap:.3rem;min-height:4.6rem;padding:.7rem .75rem;display:flex;position:relative}button.tile.locked{opacity:.5}.tile-name{font-size:.88rem;font-weight:500;line-height:1.3}.tile-score{font-family:var(--f-mono);color:var(--dominant);font-size:.72rem}button.tile.locked .tile-score{color:var(--ink-faint)}.figures{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.figure{flex-direction:column;gap:.1rem;display:flex}.figure-value{font-family:var(--f-display);color:var(--tonic);font-size:1.7rem;line-height:1}.figure-label{font-family:var(--f-mono);letter-spacing:.06em;color:var(--ink-faint);font-size:.64rem}.chart svg{width:100%;height:auto;display:block}.chart .bar{fill:var(--dominant)}.chart .bar.good{fill:var(--pass)}.chart .bar.empty{fill:var(--rule)}table.stats-table{border-collapse:collapse;width:100%;min-width:26rem;font-size:.84rem}table.stats-table th{font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:right;padding:0 .5rem .4rem;font-size:.62rem;font-weight:500}table.stats-table th:first-child,table.stats-table td:first-child{text-align:left}table.stats-table td{text-align:right;border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-variant-numeric:tabular-nums;padding:.35rem .5rem;font-size:.78rem}table.stats-table td:first-child{font-family:var(--f-body);font-size:.86rem}table.stats-table td.good{color:var(--pass)}.danger-side{border-left:3px solid var(--fail)}button.danger{border-color:var(--fail);color:var(--fail);background:0 0;font-weight:600}button.danger:hover:not(:disabled){background:color-mix(in srgb, var(--fail) 12%, transparent);border-color:var(--fail)}.confirm{color:var(--fail);font-weight:600}.footnote{text-align:center;padding:1rem 0 0}