:root{--ink:#111;--paper:#fff;--panel:#fff;--muted:#666;--line:#e0ddd8;--good:#1a7a4c;--bad:#b33a2b;--gap:#b0b0b0;--warm-bg:#f7f5f0;--chip-border:#ddd9d4;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--font-wire:"Inter Variable", "Inter", system-ui, -apple-system, sans-serif;--font-ui:"Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;font-family:var(--font-ui)}*{box-sizing:border-box}html,body{background:var(--paper);min-height:100%;color:var(--ink);margin:0}#app{max-width:920px;margin:0 auto;padding:1.25rem 1rem 3rem}.brand{font-family:var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem;font-size:.75rem;font-weight:600}h1{margin:0 0 .5rem;font-size:1.6rem;font-weight:600}.sub{color:var(--muted);margin:0 0 1.25rem}.map{flex-direction:column;gap:.75rem;display:flex}.skill-node{background:var(--panel);border:1px solid var(--line);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;border-radius:8px;align-items:center;gap:1rem;padding:1rem 1.15rem;display:flex}.skill-node:hover{border-color:var(--ink)}.skill-node.locked{opacity:.4;cursor:not-allowed}.skill-node .dot{background:var(--ink);color:#fff;width:2.25rem;height:2.25rem;font-weight:700;font-family:var(--font-mono);border-radius:50%;place-items:center;display:grid}.skill-node.crowned .dot{background:var(--good)}.skill-meta{flex:1}.skill-meta strong{display:block}.skill-meta span{color:var(--muted);font-size:.9rem}.skill-meta code{font-family:var(--font-wire);background:var(--warm-bg);color:var(--ink);border-radius:4px;padding:.1em .35em;font-size:.85em;font-weight:600}.chapters{margin-top:.5rem}.lesson-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:1.25rem 1.35rem 1.5rem}.lesson-body h2{margin:0 0 .75rem;font-size:1.35rem;font-weight:600}.lesson-body h3{margin:1.1rem 0 .4rem;font-size:1.05rem;font-weight:600}.lesson-body p{color:var(--ink);margin:0 0 .75rem;line-height:1.45}.lesson-body ul{margin:0 0 .85rem;padding-left:1.2rem}.lesson-body li{margin:.25rem 0;line-height:1.4}.lesson-body code{font-family:var(--font-mono);background:#f4f4f4;border-radius:3px;padding:.05em .3em;font-size:.88em}.lesson-code{border:1px solid var(--line);font-family:var(--font-mono);background:#f7f7f7;border-radius:6px;margin:0 0 .9rem;padding:.75rem .9rem;font-size:.85rem;line-height:1.4;overflow-x:auto}.lesson-card .actions{margin-top:1rem}.lesson-tip{border:1px solid var(--line);background:#fafafa;border-radius:8px;margin:0 0 .75rem;padding:.55rem .85rem}.lesson-tip summary{cursor:pointer;font-weight:600;list-style:none}.lesson-tip summary::-webkit-details-marker{display:none}.lesson-tip[open]{padding-bottom:.85rem}.lesson-tip .lesson-body{margin-top:.65rem}.lesson-tip .lesson-body h2{font-size:1.1rem}.exercise-hud{align-items:center;gap:.75rem;margin-bottom:.75rem;padding:.25rem 0;display:flex}.hud-close{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:50%;flex-shrink:0;align-items:center;padding:.35rem;transition:color .15s,background .15s;display:flex}.hud-close:hover{color:var(--ink);background:var(--warm-bg)}.progress-track{background:#e8e5e0;border-radius:999px;flex:1;height:12px;overflow:hidden}.progress-fill{background:var(--good);border-radius:999px;height:100%;transition:width .4s}.hearts{letter-spacing:.1em;color:var(--bad);white-space:nowrap;flex-shrink:0;font-size:1rem}.top-actions{margin-bottom:.75rem}.score-stage{border:1px solid var(--line);background:#fff;border-radius:14px;min-height:120px;padding:1rem .75rem;position:relative;overflow-x:auto}.play-controls{justify-content:center;gap:.75rem;margin:.5rem 0 .15rem;display:flex}.play-btn{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:.35rem .6rem;font-size:.85rem;transition:color .15s,background .15s}.play-btn:hover{color:var(--ink);background:var(--warm-bg)}.play-btn:disabled{opacity:.3;cursor:not-allowed}.play-btn:disabled:hover{color:var(--muted);background:0 0}.lesson-drawer{background:var(--warm-bg);border-radius:14px;max-height:50vh;margin:.25rem 0 .5rem;padding:1rem 1.25rem 1.25rem;overflow-y:auto}.lesson-drawer[hidden]{display:none}.lesson-drawer .lesson-body h2{margin:0 0 .5rem;font-size:1.1rem}.lesson-drawer .lesson-body h3{margin:.8rem 0 .3rem;font-size:.95rem}.lesson-drawer .lesson-body p{margin:0 0 .5rem;font-size:.92rem;line-height:1.5}.lesson-drawer .lesson-body ul{font-size:.92rem}.lesson-drawer .lesson-body code{font-family:var(--font-wire);background:#0000000f;border-radius:4px;padding:.1em .35em;font-size:.88em}.lesson-drawer .lesson-code{font-family:var(--font-wire);background:#0000000f;border:none;border-radius:8px;padding:.65rem .85rem;font-size:.88rem}.score-stage svg{max-width:100%;height:auto;display:block}.score-center{width:fit-content;margin:0 auto;position:relative}.score-ghost{z-index:1}.score-live{z-index:2;pointer-events:none;position:absolute;top:0;left:0}.score-live[hidden]{display:none!important}.score-stage .gap-pending,.score-stage .gap-pending *{fill:var(--gap)!important;stroke:var(--gap)!important;color:var(--gap)!important}.score-stage .gap-covered,.score-stage .gap-covered *{visibility:hidden!important}.score-stage .gap-filled,.score-stage .gap-filled *{fill:var(--ink)!important;stroke:var(--ink)!important}.score-live .live-chrome{visibility:hidden!important}.status{text-align:center;min-height:1.3em;margin:0 0 .5rem;font-weight:600}.status.ok{color:var(--good)}.status.bad{color:var(--bad)}.wire-line{background:var(--warm-bg);border:none;border-radius:14px;margin:.25rem 0 1rem;padding:.85rem 1rem}.wire-text{font-family:var(--font-wire);letter-spacing:.01em;white-space:pre-wrap;word-break:break-word;min-height:2em;margin:0;font-size:1.15rem;font-weight:500;line-height:2;display:block}.wire-text .given-run{font-family:var(--font-wire);color:var(--muted);white-space:pre;opacity:.55;font-weight:400;display:inline}.wire-text .given-tok{font-family:var(--font-wire);white-space:pre;color:inherit;opacity:1}.wire-text .tok-sep{white-space:pre;display:inline}.wire-text .tok-event-gap{width:.6em;display:inline-block}.wire-text .tok-slot{font-family:var(--font-wire);color:var(--line);padding:0 .15rem;font-weight:400;display:inline}.tok-chip{font-family:var(--font-wire);vertical-align:baseline;border:2px solid var(--chip-border);color:var(--ink);cursor:pointer;white-space:pre;box-sizing:border-box;background:#fff;justify-content:center;align-items:center;margin:0;padding:.5rem .6rem;font-size:1.05rem;font-weight:500;line-height:1;transition:transform .1s,border-color .15s,box-shadow .15s;display:inline-flex}.tok-chip.pill-left{border-right:1px dashed var(--chip-border);border-radius:999px 0 0 999px}.tok-chip.pill-mid{border-left:none;border-right:1px dashed var(--chip-border);border-radius:0}.tok-chip.pill-right{border-left:none;border-radius:0 999px 999px 0}.tok-chip.pill-solo{border-radius:999px}.wire-text .tok-chip.pill-left+.tok-chip.pill-mid,.wire-text .tok-chip.pill-left+.tok-chip.pill-right,.wire-text .tok-chip.pill-mid+.tok-chip.pill-mid,.wire-text .tok-chip.pill-mid+.tok-chip.pill-right{margin-left:-1px}.bank .tok-chip{margin:.2rem;box-shadow:0 2px #ccc8c2}.bank .tok-chip+.tok-chip{margin-left:.2rem}button.tok-chip:hover{z-index:1;border-color:#bbb7b0}button.tok-chip:active{box-shadow:none;transform:translateY(1px)}.tok-chip.pitch,.tok-chip.pitchclose{font-weight:600}.tok-chip.conductor{background:var(--ink);color:#fff;border-color:var(--ink)}.tok-chip.staff{color:#fff;background:#78716c;border-color:#78716c}.bank .tok-chip.conductor{box-shadow:0 2px #000}.bank .tok-chip.staff{box-shadow:0 2px #57534e}button.tok-chip.conductor:hover,button.tok-chip.staff:hover{filter:brightness(1.2);border-color:inherit}.tok-chip.in-wire{vertical-align:baseline;position:relative}.tok-chip.in-wire:not(.removable){cursor:default}.tok-chip.removable{cursor:grab}.tok-chip.removable:active{cursor:grabbing}.tok-chip.dragging{opacity:.45}.tok-chip.drop-before{box-shadow:inset 3px 0 0 var(--ink)}.tok-chip.drop-after{box-shadow:inset -3px 0 0 var(--ink)}.tok-slot.drop-target{outline:2px solid var(--ink);outline-offset:1px}.tok-chip.removable:hover{outline:2px solid var(--ink);outline-offset:1px;z-index:2}.bank{flex-wrap:wrap;justify-content:center;gap:.5rem;min-height:2.75rem;margin-bottom:1.25rem;padding:.25rem 0;display:flex}.bank-empty{color:var(--muted);font-size:.9rem;font-family:var(--font-wire)}.actions{flex-wrap:wrap;gap:.5rem;display:flex}button.btn{font:inherit;border:2px solid var(--ink);cursor:pointer;background:var(--ink);color:#fff;border-radius:12px;padding:.55rem 1.15rem;font-weight:600;transition:transform .1s,box-shadow .1s}button.btn.secondary{color:var(--ink);background:#fff}button.btn:disabled{opacity:.35;cursor:not-allowed}.exercise-actions{gap:.5rem;padding:.25rem 0 1rem;display:flex}.exercise-actions .check-btn{background:var(--good);border:2px solid var(--good);color:#fff;text-transform:uppercase;letter-spacing:.06em;border-bottom:4px solid #146538;border-radius:14px;flex:1;padding:.8rem 1.5rem;font-size:1.05rem}.exercise-actions .check-btn:active:not(:disabled){border-bottom-width:2px;transform:translateY(2px)}.exercise-actions .icon-btn{background:var(--paper);color:var(--ink);border:2px solid var(--line);border-bottom:4px solid #ccc8c2;border-radius:14px;padding:.7rem 1rem;font-size:1.15rem}.exercise-actions .icon-btn:active{border-bottom-width:2px;transform:translateY(2px)}.options{flex-direction:column;gap:.5rem;margin:.5rem 0 1rem;display:flex}.option-card{text-align:left;border:1px solid var(--line);cursor:pointer;font:inherit;background:#fff;border-radius:8px;padding:.85rem 1rem}.option-card.selected{border-color:var(--ink)}.option-card code{font-family:var(--font-mono);color:var(--ink);font-size:1rem}.boss-input{width:100%;font-family:var(--font-wire);border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;margin-bottom:.75rem;padding:.75rem .9rem;font-size:1.05rem}.loading{color:var(--muted);text-align:center;padding:2rem}.complete-card{border:1px solid var(--line);text-align:center;background:#fff;border-radius:8px;padding:1.5rem}.complete-card h2{margin-top:0}@keyframes tile-bounce{0%{transform:translateY(0)}35%{transform:translateY(-10px)}55%{transform:translateY(2px)}70%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes tile-shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(5px)}45%{transform:translate(-4px)}60%{transform:translate(3px)}75%{transform:translate(-2px)}}@keyframes glow-green{0%{box-shadow:0 0 #1a7a4c66}40%{box-shadow:0 0 12px 4px #1a7a4c40}to{box-shadow:none}}@keyframes glow-red{0%{box-shadow:0 0 #b33a2b66}40%{box-shadow:0 0 12px 4px #b33a2b40}to{box-shadow:none}}@keyframes status-pop{0%{opacity:0;transform:scale(.85)}60%{opacity:1;transform:scale(1.05)}to{transform:scale(1)}}@keyframes score-celebrate{0%{filter:brightness()}30%{filter:brightness(1.15)saturate(1.2)}to{filter:brightness()}}@keyframes note-glow-green{0%{filter:drop-shadow(0 0 #0000)}25%{filter:drop-shadow(0 0 6px #1a7a4ccc)}70%{filter:drop-shadow(0 0 3px #1a7a4c4d)}to{filter:none}}@keyframes note-glow-red{0%{filter:none}25%{filter:drop-shadow(0 0 5px #b33a2bb3)}to{filter:none}}@keyframes note-appear{0%{opacity:0}to{opacity:1}}.wire-line.anim-correct{box-shadow:inset 0 0 0 2px var(--good);animation:.6s ease-out glow-green}.wire-line.anim-wrong{box-shadow:inset 0 0 0 2px var(--bad);animation:.45s ease-out glow-red}.wire-text .tok-chip.anim-bounce{animation:.45s ease-out both tile-bounce}.wire-text .tok-chip.anim-shake,.bank .tok-chip.anim-shake{animation:.4s ease-out tile-shake}.status.anim-pop{animation:.35s ease-out status-pop}.score-stage.anim-celebrate{animation:.6s ease-out score-celebrate}.score-stage .anim-note-glow{animation:.7s ease-out both note-glow-green}.score-stage .anim-note-glow *,.score-stage .anim-note-glow{fill:var(--good)!important;stroke:var(--good)!important}.score-stage .anim-note-appear{animation:.35s ease-out both note-appear}.score-stage .anim-note-miss{animation:.45s ease-out note-glow-red}.option-card.anim-shake{animation:.4s ease-out tile-shake}.option-card.anim-correct{border-color:var(--good);animation:.6s ease-out glow-green}@media (width<=640px){#app{padding:.75rem .65rem 2rem}.score-stage{border-radius:10px;min-height:80px;padding:.5rem .25rem}.wire-line{border-radius:10px;padding:.65rem .75rem}.wire-text{font-size:1rem;line-height:1.8}.wire-text .given-run{font-size:.9rem}.tok-chip{padding:.4rem .5rem;font-size:.92rem}.bank{gap:.35rem}.exercise-actions .check-btn{padding:.65rem 1rem;font-size:.95rem}.exercise-actions .icon-btn{padding:.55rem .75rem}.play-controls{gap:.5rem;margin:.25rem 0 .1rem}.play-btn{padding:.25rem .4rem;font-size:.8rem}.progress-track{height:10px}.lesson-drawer{padding:.75rem .85rem}.lesson-drawer .lesson-body p,.lesson-drawer .lesson-body ul{font-size:.85rem}.skill-node{gap:.75rem;padding:.75rem .85rem}.skill-node .dot{width:2rem;height:2rem;font-size:.85rem}.skill-meta span{font-size:.8rem}}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}