:root{--bg: #14181f;--bg-2: #1a1f28;--surface: #212832;--surface-2: #2a323e;--surface-3: #343d4b;--border: rgba(255, 255, 255, .09);--border-strong: rgba(255, 255, 255, .18);--text: #eef2f7;--muted: #9aa6b8;--faint: #66718a;--accent: #4f8fe8;--accent-2: #3b78d0;--accent-soft: rgba(79, 143, 232, .16);--accent-line: rgba(79, 143, 232, .32);--accent-shadow: rgba(79, 143, 232, .28);--accent-text: #ffffff;--good: #5fd39a;--good-soft: rgba(95, 211, 154, .16);--bad: #ff6b57;--bad-soft: rgba(255, 107, 87, .16);--info: #7cc4ff;--wood: #4a3524;--wood-edge: #2f2016;--nut: #e8dcc4;--wire: #b9b2a6;--string: #d9d3c7;--marker: #7a6350;--paper: #f8f1e3;--paper-ink: #1f1a13;--paper-muted: #7d7468;--paper-active: #1f6fb2;--paper-bad: #c9402b;--glow: rgba(79, 143, 232, .12);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--radius: 16px;--radius-sm: 12px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .25);color-scheme:dark;font-family:Segoe UI Variable Text,Segoe UI,system-ui,-apple-system,Roboto,Helvetica Neue,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}:root[data-theme=light]{--bg: #efeae2;--bg-2: #e8e2d8;--surface: #fffdf9;--surface-2: #f6f1e8;--surface-3: #e9e2d6;--border: rgba(40, 30, 15, .1);--border-strong: rgba(40, 30, 15, .2);--text: #1f1a13;--muted: #6b6257;--faint: #a39a8d;--accent: #2b6cb0;--accent-2: #245c96;--accent-soft: rgba(43, 108, 176, .13);--accent-line: rgba(43, 108, 176, .35);--accent-shadow: rgba(43, 108, 176, .25);--accent-text: #ffffff;--good: #1e8a4e;--good-soft: rgba(30, 138, 78, .14);--bad: #c9402b;--bad-soft: rgba(201, 64, 43, .12);--info: #1f6fb2;--glow: rgba(43, 108, 176, .12);--shadow: 0 10px 30px rgba(60, 40, 10, .14);--shadow-sm: 0 2px 8px rgba(60, 40, 10, .08);--wood: #e6c994;--wood-edge: #c4a46c;--nut: #f7efdc;--wire: #8d8578;--string: #6e6558;--marker: #3b3127;color-scheme:light}@media(prefers-color-scheme:light){:root:not([data-theme=dark]){--bg: #efeae2;--bg-2: #e8e2d8;--surface: #fffdf9;--surface-2: #f6f1e8;--surface-3: #e9e2d6;--border: rgba(40, 30, 15, .1);--border-strong: rgba(40, 30, 15, .2);--text: #1f1a13;--muted: #6b6257;--faint: #a39a8d;--accent: #2b6cb0;--accent-2: #245c96;--accent-soft: rgba(43, 108, 176, .13);--accent-line: rgba(43, 108, 176, .35);--accent-shadow: rgba(43, 108, 176, .25);--accent-text: #ffffff;--good: #1e8a4e;--good-soft: rgba(30, 138, 78, .14);--bad: #c9402b;--bad-soft: rgba(201, 64, 43, .12);--info: #1f6fb2;--glow: rgba(43, 108, 176, .12);--shadow: 0 10px 30px rgba(60, 40, 10, .14);--shadow-sm: 0 2px 8px rgba(60, 40, 10, .08);--wood: #e6c994;--wood-edge: #c4a46c;--nut: #f7efdc;--wire: #8d8578;--string: #6e6558;--marker: #3b3127;color-scheme:light}}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);background:radial-gradient(1200px 500px at 50% -10%,var(--glow),transparent 60%),var(--bg);min-height:100vh;-webkit-tap-highlight-color:transparent}h1,h2,h3{letter-spacing:-.01em}.app{max-width:680px;margin:0 auto;padding:calc(12px + var(--safe-top)) 16px calc(24px + var(--safe-bottom))}.app-bar{display:flex;align-items:center;gap:12px;padding:6px 0 14px}.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-text);display:grid;place-items:center;font-weight:800;font-size:1.2rem;box-shadow:var(--shadow-sm);flex:0 0 auto}.brand h1{font-size:1.1rem;margin:0;line-height:1.2}.brand p{margin:0;font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.icon-btn{width:40px;height:40px;min-height:0;padding:0;border-radius:12px;display:inline-grid;place-items:center;flex:0 0 auto}.stage-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:.85rem;white-space:nowrap}.muted{color:var(--muted)}.small{font-size:.8rem;margin-top:28px;color:var(--faint)}.error{color:var(--bad);background:var(--bad-soft);border-radius:var(--radius-sm);padding:10px 12px}.eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.section-title{font-size:1.05rem;font-weight:700;margin:22px 0 4px}.key-name{font-weight:500}.hint{display:flex;gap:6px;align-items:flex-start}.hint svg{flex:0 0 auto;margin-top:3px}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:0 0 12px;box-shadow:var(--shadow-sm)}.panel.tight{padding:12px}.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}input,button{font:inherit;padding:10px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);min-height:48px}button{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .12s,transform .08s,border-color .12s,opacity .12s}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default;transform:none}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn,button.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600}button.primary,.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-text);border-color:transparent;box-shadow:0 6px 18px var(--accent-shadow)}button.primary:active,.btn.primary:active{box-shadow:none}button.ghost{background:transparent}button.big,.btn.big{width:100%;min-height:58px;font-size:1.1rem;border-radius:14px}.controls{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.controls button{flex:1 1 auto;min-width:96px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.cta{margin:14px 0 16px}.cta-row{display:flex;gap:10px;margin-top:10px}.cta-row .btn{flex:1 1 0}.sticky-cta{position:sticky;bottom:0;padding:12px 0 calc(8px + var(--safe-bottom));margin:8px -16px 0;padding-left:16px;padding-right:16px;background:linear-gradient(to top,var(--bg) 70%,transparent);z-index:5}.segmented{display:flex;gap:4px;padding:4px;background:var(--bg-2);border:1px solid var(--border);border-radius:14px}.seg{flex:1 1 0;min-height:44px;min-width:0;padding:6px 8px;border:none;border-radius:10px;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:.9rem;font-weight:600}.seg.on{background:var(--surface-3);color:var(--text);box-shadow:var(--shadow-sm)}.seg svg{flex:0 0 auto}.segmented.compact .seg{min-height:36px;font-size:.85rem}.toggle{display:flex;gap:10px;align-items:center;margin:2px 0 12px;font-size:.9rem;cursor:pointer}.toggle input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:42px;height:24px;min-height:0;padding:0;margin:0;border-radius:999px;background:var(--surface-3);border:1px solid var(--border-strong);position:relative;flex:0 0 auto;transition:background .15s}.toggle input:after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform .15s}.toggle input:checked{background:var(--accent);border-color:var(--accent)}.toggle input:checked:after{transform:translate(18px);background:var(--accent-text)}.ring{position:relative;flex:0 0 auto}.ring svg{display:block;transform:rotate(0)}.ring-track{fill:none;stroke:var(--surface-3)}.ring-arc{fill:none;stroke-linecap:round;transition:stroke-dasharray .4s ease}.ring-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.ring-label{font-weight:800;font-size:1rem;font-variant-numeric:tabular-nums}.ring-sub{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.hero{display:flex;align-items:center;gap:14px;background:linear-gradient(145deg,var(--surface-2),var(--surface));border-color:var(--accent-line)}.hero-main{flex:1 1 auto;min-width:0}.hero-title{margin:0 0 6px;font-size:1.25rem;font-weight:800;line-height:1.2}.hero-number{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;padding:0 .3em;border-radius:999px;background:var(--accent);color:var(--accent-text);font-size:.8em;margin-right:4px;vertical-align:2px}.hero-summary{margin:0;color:var(--muted);font-size:.92rem}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{display:flex;flex-direction:column;margin:0}.stat-label,.score-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.stat-value{font-weight:800;font-size:1.7rem;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}.stat-sub{color:var(--muted);font-size:.85rem}.small-note{font-size:.85rem;margin:6px 0 10px}.path{margin:6px 0 0}.path-part{margin:10px 0 14px}.path-part-title{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 4px}.path-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.path-node{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:8px 10px;min-height:56px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}.path-item.current .path-node{border-color:var(--accent);background:linear-gradient(135deg,var(--accent-soft),var(--surface))}.path-item.locked .path-node{opacity:.55}.node{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;flex:0 0 auto;background:var(--surface-3);color:var(--muted)}.path-item.current .node{background:var(--accent);color:var(--accent-text)}.path-item.reached .node{background:var(--good-soft);color:var(--good)}.node-text{display:flex;flex-direction:column;min-width:0}.node-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-sub{font-size:.8rem;color:var(--muted)}.explainer-row{display:flex;gap:10px;overflow-x:auto;padding:6px 2px 10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.explainer-card{flex:0 0 150px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:84px;padding:12px;text-align:left;scroll-snap-align:start;background:var(--surface);border-radius:14px;font-weight:600;font-size:.9rem;color:var(--text)}.explainer-card svg{color:var(--accent)}.reset-row{margin-top:16px}button.link{background:none;border:none;color:var(--accent);padding:8px 0;min-height:44px;text-align:left;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px}button.link.subtle{color:var(--muted);font-size:.85rem;min-height:36px}.status-card{display:flex;align-items:center;gap:12px;margin-bottom:12px}.status-line{flex:1 1 auto;min-height:1.5em;color:var(--muted);font-size:.95rem}.listens{display:flex;gap:5px;flex:0 0 auto}.listens .dot{width:10px;height:10px;border-radius:50%;background:var(--surface-3);border:1px solid var(--border-strong)}.listens .dot.used{background:var(--accent);border-color:var(--accent)}.count-in .beat{display:inline-block;width:1.8em;height:1.8em;line-height:1.8em;margin-left:6px;border-radius:50%;text-align:center;background:var(--surface-3);color:var(--muted);font-variant-numeric:tabular-nums}.count-in .beat.on{background:var(--accent);color:var(--accent-text);font-weight:700}.board{padding:10px 10px 6px}.fretboard{width:100%;height:auto;display:block}.fb-wood{fill:var(--wood);stroke:var(--wood-edge)}.fb-nut{fill:var(--nut);stroke:var(--wood-edge);stroke-width:.5}.fb-wire{stroke:var(--wire);stroke-width:2}.fb-string{stroke:var(--string)}.fb-marker{fill:var(--marker)}.fb-fret-number,.fb-string-name{fill:var(--muted);font-size:11px;font-family:inherit}.fb-played{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.45}.fb-active-dot{fill:var(--accent)}.fb-active-glow{fill:var(--accent);opacity:.3;animation:pulse .5s ease-out}@keyframes pulse{0%{opacity:.6;r:9}to{opacity:.3;r:13}}.listen-only{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:96px;padding:12px 16px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:4px 0}.start-note{width:min(100%,240px);margin:4px auto 0}.start-note .staff-canvas{min-height:0;background:var(--paper);border-radius:8px;box-shadow:0 0 0 10px var(--paper);margin:10px 0 14px}.ear{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:0 16px}.pip{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-strong);transition:background .15s,border-color .15s}.pip.on{background:var(--accent);border-color:var(--accent)}.staff-input{margin-top:8px}.staff-input.disabled{opacity:.6}.staff-canvas{position:relative;width:100%;min-height:120px;touch-action:manipulation;-webkit-user-select:none;user-select:none;cursor:crosshair}.staff-canvas svg{display:block}.staff-input .staff-canvas,.feedback-staffs .staff-wrap,.melody-staff .staff-canvas,.card-example .staff-canvas,.guide-staff{background:var(--paper);border-radius:8px;box-shadow:0 0 0 10px var(--paper);margin-top:14px;margin-bottom:14px}.feedback-staffs .staff-wrap{margin-top:12px}.staff-loading{padding:40px 0;text-align:center;color:var(--paper-muted)}.staff-message{min-height:1.5em;margin:4px 0 10px;color:var(--muted);font-size:.9rem}.staff-paper{width:100%}.slot{position:absolute;border:2px dashed rgba(31,26,19,.3);border-radius:6px;pointer-events:none;opacity:.8;box-sizing:border-box}.slot.selected{border-color:var(--paper-active);background:#1f6fb224;opacity:1}.palette{display:flex;gap:8px;margin-bottom:8px}.palette button{flex:1 1 0;min-width:0;padding:6px 4px;min-height:50px}.palette-gap{width:6px;flex:0 0 6px}.icon-button{display:inline-flex;align-items:center;justify-content:center}.icon-button.selected{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.icon-button.glyph{font-size:1.5rem;line-height:1}.note-icon{width:16px;height:26px}.palette.undo-row{margin-top:2px}button.undo{width:100%;min-height:50px;font-size:1rem;font-weight:600;border-color:var(--accent);color:var(--accent);background:transparent}button.undo:disabled{border-color:var(--border);color:var(--muted)}button.undo span{font-size:1.3rem;margin-right:6px}.staff-canvas.static{cursor:default}.result-hero{display:flex;align-items:center;gap:16px}.result-hero.perfect{border-color:#5fd39a66;background:linear-gradient(145deg,var(--good-soft),var(--surface))}.result-rings{display:flex;gap:10px;flex:0 0 auto}.result-text{flex:1 1 auto;min-width:0}.result-title{margin:0 0 4px;font-size:1.15rem;font-weight:800}.verdict{margin:0;color:var(--muted);font-size:.95rem}.notes-count{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:var(--surface-3);font-size:.85rem;font-weight:600}.score-value.good{color:var(--good)}.score-value.bad{color:var(--bad)}.tally-strip{display:flex;align-items:center;gap:12px;margin:0 0 12px}.tally-dots{display:flex;gap:5px;flex:1 1 auto}.tally-dots span{flex:1 1 0;height:8px;border-radius:4px;background:var(--surface-3)}.tally-dots span.on{background:var(--good)}.tally-text{font-size:.85rem;white-space:nowrap}.feedback-staffs{margin:4px 0 8px}.staff-block{margin-bottom:6px}.staff-caption{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin:0 0 -2px 2px}.staff-block.playing .staff-caption{color:var(--accent)}.staff-wrap{position:relative}.feedback-overlay{position:absolute;top:0;left:0;pointer-events:none}.ghost-head{fill:var(--paper-bad);fill-opacity:.45;stroke:var(--paper-bad);stroke-width:1.5}.badge circle{fill:var(--paper-bad)}.badge text{fill:#fff;font-size:11px;font-weight:700;font-family:inherit}.legend{font-size:.8rem;margin:2px 0 8px}.swatch{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 3px 0 8px;vertical-align:middle}.swatch.good{background:#1e8a4e}.swatch.bad{background:var(--paper-bad)}.swatch.missing{background:#8c8478}.swatch.ghost{background:#c9402b73;border:1.5px solid var(--paper-bad)}.swatch.active{background:var(--paper-active)}.pitch-label{font-family:inherit;font-weight:600;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round}.pitch-label.ghost{fill:var(--paper-bad)}.length-change{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--good);padding:12px 14px;border-radius:var(--radius-sm);margin:0 0 12px}.length-change.shorter{border-left-color:var(--accent)}.mistakes{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.mistakes li{display:flex;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}.mistakes li p{margin:4px 0 0;color:var(--muted);font-size:.95rem}.mistake-number{flex:0 0 28px;height:28px;border-radius:50%;background:var(--bad);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:.9rem}.card-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:flex-end;justify-content:center;z-index:10;padding:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px 20px 0 0;padding:14px 18px calc(18px + var(--safe-bottom));width:100%;max-width:680px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow)}.card:before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--border-strong);margin:0 auto 12px}.card h2{margin:0 0 8px;font-size:1.2rem}.card p{margin:0 0 10px}.card-example{margin:12px 0}.card-example figcaption{font-size:.85rem;margin-top:4px}@media(min-width:640px){.card-backdrop{align-items:center;padding:16px}.card{border-radius:20px}.card:before{display:none}}.guide h2{margin:.2rem 0 .4rem;font-size:1.3rem}.guide-facts{margin:.4rem 0 0;padding:0;list-style:none;display:grid;gap:6px}.guide-facts li{padding:8px 12px;background:var(--bg-2);border-radius:10px;font-size:.95rem}.guide-staff{position:relative;width:100%;padding-bottom:14px}.guide .fretboard{margin:.4rem 0 .6rem}.chip{min-height:36px;padding:4px 12px;border-radius:999px;font-size:.9rem}.chip.selected{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}.stage-summary{margin:0 0 12px}details.debug{margin-top:8px;color:var(--muted)}details.debug summary{cursor:pointer;padding:8px 0}.note-list{margin:4px 0 0;padding-left:1.6em;font-variant-numeric:tabular-nums}.note-list li.on{color:var(--accent)}::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease-in-out}html.theme-fade,html.theme-fade *,html.theme-fade *:before,html.theme-fade *:after{transition:background-color .45s ease,color .45s ease,border-color .45s ease,fill .45s ease,stroke .45s ease,box-shadow .45s ease!important}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}