:root,:root[data-theme=dark]{--bg:#14110d;--panel:#1f1a14;--panel-2:#2a241b;--surface-3:#342c20;--border:#3a3226;--line:var(--border);--text:#ece5d8;--text-dim:#a89e8c;--text-h:#fdf8ee;--accent:#d9a05b;--accent-bg:#d9a05b26;--accent-border:#d9a05b80;--accent-soft:#d9a05b1a;--on-accent:#1a140c;--ok:#5bbf80;--bad:#e0666f;--gold:#e8b84b;--flame:#ff8a4c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-theme=light]{--bg:#f3ede2;--panel:#fffdf8;--panel-2:#efe7d8;--surface-3:#e6dcc9;--border:#ddd3c2;--line:var(--border);--text:#423a2c;--text-dim:#7a6f5c;--text-h:#2a2418;--accent:#9a6a2e;--accent-bg:#9a6a2e1f;--accent-border:#9a6a2e73;--accent-soft:#9a6a2e14;--on-accent:#fffdf8;--ok:#1f9d5b;--bad:#d6334b;--gold:#b9871f;--flame:#e0612f;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-skin=steel]{--accent:#6f9fd8;--accent-bg:#6f9fd826;--accent-border:#6f9fd880;--accent-soft:#6f9fd81a;--on-accent:#0c1420}:root[data-skin=steel][data-theme=light]{--accent:#35618e;--accent-bg:#35618e1f;--accent-border:#35618e73;--accent-soft:#35618e14;--on-accent:#fff}:root{--mono:ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font:16px/1.5 system-ui,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0}#root{min-height:100svh}h1,h2,h3{color:var(--text-h);margin:0}button{font:inherit;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform 60ms}button:active:not(:disabled){transform:scale(.97)}button:disabled{cursor:default;opacity:.5}input,textarea,select{font:inherit;color:var(--text)}.app{flex-direction:column;max-width:720px;min-height:100svh;margin:0 auto;display:flex;position:relative}.topbar{z-index:10;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.brand{letter-spacing:.3px;color:var(--text-h);align-items:center;gap:9px;font-size:19px;font-weight:650;display:flex}.brand svg{color:var(--accent)}.topbar-actions{align-items:center;gap:4px;display:flex}.icon-btn{width:38px;height:38px;color:var(--text-dim);background:0 0;border:1px solid #0000;border-radius:10px;place-items:center;display:grid}.icon-btn:hover{background:var(--panel);color:var(--text-h)}.icon-btn.active{color:var(--accent);background:var(--accent-bg)}.content{padding-bottom:calc(78px + env(safe-area-inset-bottom));flex:1}.bottomnav{z-index:10;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in srgb, var(--bg) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);justify-content:center;gap:2px;display:flex;position:fixed;bottom:0;left:0;right:0}.navtab{max-width:110px;color:var(--text-dim);background:0 0;border:none;border-radius:10px;flex-direction:column;flex:1;align-items:center;gap:3px;padding:6px 4px;font-size:11px;font-weight:500;display:flex;position:relative}.navtab.active{color:var(--accent)}.navtab.active svg{transform:translateY(-1px)}.rec-dot{background:var(--accent);border-radius:50%;width:9px;height:9px;animation:1.6s ease-out infinite navpulse}.nav-dot{background:var(--accent);border-radius:50%;width:7px;height:7px;animation:1.6s ease-out infinite navpulse;position:absolute;top:5px;right:22px}@keyframes navpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent)}70%{box-shadow:0 0 0 6px #0000}to{box-shadow:0 0 #0000}}.screen{padding:18px 16px 8px}.screen-title{margin-bottom:4px;font-size:26px;font-weight:680}.screen-sub{color:var(--text-dim);margin-bottom:18px;font-size:14px}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;margin-bottom:14px;padding:18px}.card-title{text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-bottom:12px;font-size:13px;font-weight:600}.muted{color:var(--text-dim)}.row{align-items:center;gap:10px;display:flex}.spread{justify-content:space-between}.stub{text-align:center;color:var(--text-dim);padding:40px 12px}.stub svg{color:var(--accent);opacity:.8;margin-bottom:12px}.btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text-h);border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-size:15px;font-weight:560;display:inline-flex}.btn:hover{border-color:var(--accent-border)}.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.btn-primary:hover{filter:brightness(1.06)}.btn-ghost{background:0 0}.btn-danger{color:var(--bad)}.btn-block{width:100%}.btn-lg{padding:14px 20px;font-size:16px}.btn-pill{border-radius:999px}.action-tiles{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.action-tile{border:1px solid var(--border);background:var(--panel-2);color:var(--text-h);text-align:center;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:18px 8px;font-size:12px;font-weight:560;display:flex}.action-tile:hover{border-color:var(--accent-border)}.field{margin-bottom:14px}.field label{color:var(--text-dim);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.input,.textarea,.select{border:1px solid var(--border);background:var(--bg);width:100%;color:var(--text);border-radius:11px;outline:none;padding:11px 12px}.input:focus,.textarea:focus,.select:focus{border-color:var(--accent-border)}.textarea{font-family:var(--mono);resize:vertical;white-space:pre;overflow-wrap:normal;min-height:200px;font-size:13px;line-height:1.5}.seg{background:var(--panel-2);border:1px solid var(--border);border-radius:11px;gap:3px;padding:3px;display:inline-flex}.seg button{color:var(--text-dim);background:0 0;border:none;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:560}.seg button.on{background:var(--accent);color:var(--on-accent)}.seg-compact button{padding:6px 9px;font-size:12.5px}.metro{text-align:center}.bpm-display{color:var(--text-h);font-variant-numeric:tabular-nums;font-size:76px;font-weight:720;line-height:1}.bpm-unit{color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-top:2px;font-size:14px}.beat-dots{justify-content:center;gap:12px;min-height:26px;margin:24px 0;display:flex}.beat-dot{background:var(--surface-3);border:1px solid var(--border);border-radius:50%;width:18px;height:18px;transition:transform .12s ease-out,background .12s ease-out}.beat-dot.lit{transition:none}.beat-dot.accent{border-color:var(--accent-border)}.beat-dot.lit{background:var(--accent);transform:scale(1.35)}.beat-dot.lit.accent{background:var(--flame)}.beat-dots.gap .beat-dot{opacity:.22;background:var(--surface-3);transform:none}.bpm-controls{align-items:center;gap:12px;margin:8px 0 4px;display:flex}.bpm-controls input[type=range]{accent-color:var(--accent);flex:1}.round-btn{border:1px solid var(--border);background:var(--panel-2);width:46px;height:46px;color:var(--text-h);border-radius:50%;place-items:center;font-size:22px;display:grid}.metro-start{background:var(--accent);width:92px;height:92px;color:var(--on-accent);border:none;border-radius:50%;place-items:center;margin:6px auto 0;display:grid}.metro-start.running{background:var(--flame)}.metro-compact{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px;display:flex}.mc-play{background:var(--accent);width:42px;height:42px;color:var(--on-accent);border:none;border-radius:50%;flex:none;place-items:center;display:grid}.mc-play.running{background:var(--flame)}.mc-step{flex:none;width:33px;height:33px;font-size:18px}.mc-bpm{font-variant-numeric:tabular-nums;white-space:nowrap}.mc-bpm b{color:var(--text-h);font-size:21px}.mc-bpm .muted{font-size:12px}.mc-dots{gap:8px;display:flex}.beat-dot.mc-dot{width:16px;height:16px}.timer-display{font-variant-numeric:tabular-nums;text-align:center;color:var(--text-h);letter-spacing:1px;font-size:60px;font-weight:700}.timer-display.running{color:var(--accent)}.stat-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.stat{background:var(--panel-2);text-align:center;border-radius:12px;padding:14px}.stat-num{color:var(--text-h);font-size:24px;font-weight:700}.stat-num .flame{color:var(--flame)}.stat-label{color:var(--text-dim);margin-top:2px;font-size:12px}.chart{width:100%;height:150px}.chart .bar{fill:var(--accent)}.chart .bar.today{fill:var(--flame)}.chart .bar.warmup{fill:var(--accent);opacity:.42}.chart-label{fill:var(--text-dim);font-size:10px}.chart-empty{text-align:center;color:var(--text-dim);padding:30px}.stage-pills{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px;display:grid}.stage-pill{border:1px solid var(--border);background:var(--panel-2);text-align:center;border-radius:8px;flex-direction:column;gap:2px;padding:6px 4px;display:flex}.stage-pill.locked{opacity:.5}.stage-pill-title{color:var(--text-h);white-space:nowrap;font-size:10px;font-weight:600}.stage-pill-count{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:10px}.stage-pill .reset-btn{align-self:center;margin-top:1px}.chord-question{justify-content:center;margin:4px 0 14px;display:flex}.scale-question{flex-direction:column;align-items:center;gap:6px;margin:4px 0 14px;display:flex}.scale-question svg{width:100%;max-width:320px;height:auto}.scale-question-key{color:var(--text-h);font-size:13px;font-weight:650}.scale-keys{grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px;display:grid}.scale-key{border:1px solid var(--border);background:var(--panel-2);text-align:center;cursor:pointer;border-radius:9px;flex-direction:column;gap:3px;padding:8px 4px;display:flex}.scale-key:disabled{cursor:default;opacity:.5}.scale-key.state-learn{border-color:var(--accent)}.scale-key.state-practice{border-color:var(--flame)}.scale-key.state-complete .scale-key-name{color:var(--accent)}.scale-key-name{color:var(--text-h);font-size:14px;font-weight:650}.scale-key-sub{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:9.5px;line-height:1.15}.scale-key-wrap{position:relative}.scale-key-wrap .scale-key{width:100%}.scale-key-reset{position:absolute;top:2px;right:2px}.reset-btn{width:20px;height:20px;color:var(--text-dim);opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;display:inline-flex}.reset-btn:hover{opacity:1;color:var(--text-h);background:var(--panel-2)}.pie-head{text-align:center;letter-spacing:.3px;text-transform:uppercase;color:var(--text-dim);margin:0 0 10px;font-size:12px;font-weight:600}.pie{width:172px;height:172px;margin:0 auto;display:block}.pie-slice{stroke:var(--panel);stroke-width:2px}.pie-slice.metronome{fill:var(--flame)}.pie-slice.playalong{fill:var(--accent)}.pie-slice.freeform{fill:var(--text-dim)}.pie-hub{fill:var(--text-h);font-size:19px;font-weight:650}.pie-legend{color:var(--text-dim);flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:12px;font-size:12px;display:flex}.pie-legend-item{align-items:center;gap:6px;display:inline-flex}.pie-swatch{border-radius:2px;width:10px;height:10px}.pie-swatch.metronome{background:var(--flame)}.pie-swatch.playalong{background:var(--accent)}.pie-swatch.freeform{background:var(--text-dim)}.pie-legend-val{color:var(--text-h);font-variant-numeric:tabular-nums}.bbars{flex-direction:column;gap:8px;display:flex}.bbars-row{grid-template-columns:minmax(0,1fr) 2fr auto;align-items:center;gap:8px;display:grid}.bbars-label{color:var(--text-h);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.bbars-track{background:var(--panel-2);border-radius:5px;height:9px;display:flex;overflow:hidden}.bbars-fill{height:100%}.bbars-fill.primary{background:var(--flame)}.bbars-fill.secondary{background:var(--accent)}.bbars-val{color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:11.5px}.bbars-more{text-align:center;color:var(--text-dim);margin-top:8px;font-size:11.5px}.bbars-swatch{border-radius:2px;width:10px;height:10px}.bbars-swatch.primary{background:var(--flame)}.bbars-swatch.secondary{background:var(--accent)}.list-item{text-align:left;background:var(--panel);border:1px solid var(--border);width:100%;color:var(--text);border-radius:13px;align-items:center;gap:12px;margin-bottom:10px;padding:14px;display:flex}.list-item:hover{border-color:var(--accent-border)}.list-item .li-main{flex:1;min-width:0}.li-title{color:var(--text-h);font-weight:600}.li-sub{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.chip{background:var(--accent-bg);color:var(--accent);border-radius:999px;align-items:center;gap:5px;padding:3px 9px;font-size:12px;font-weight:600;display:inline-flex}.sheet{font-family:var(--mono);white-space:pre-wrap;overflow-wrap:break-word;font-size:14px;line-height:1.6}.sheet .chord{color:var(--accent);font-weight:700}.sheet .sheet-text{white-space:pre-wrap;overflow-wrap:break-word}.sheet.has-rbars .sheet-line{align-items:stretch;display:flex}.sheet.has-rbars .sheet-text{flex:1;min-width:0}.sheet.has-rbars .rgutter{flex:none;align-items:stretch;gap:2px;margin-right:.5ch;display:flex}.sheet.has-rbars .rcell{align-self:stretch;width:.7ch;position:relative}.sheet.has-rbars .rbar:before{content:"";background:var(--accent);border-radius:1px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px)}.sheet.has-rbars .rbar-top:before{top:2px}.sheet.has-rbars .rbar-bot:before{bottom:2px}.sheet.has-rbars .rbar-top:after,.sheet.has-rbars .rbar-bot:after{content:"";background:var(--accent);border-radius:1px;width:5px;height:2px;position:absolute;left:50%;transform:translate(-1px)}.sheet.has-rbars .rbar-top:after{top:2px}.sheet.has-rbars .rbar-bot:after{bottom:2px}.hint{color:var(--text-dim);margin-top:6px;font-size:12px}.hint code{font-family:var(--mono)}.chord-grid{flex-wrap:wrap;justify-content:flex-start;gap:14px;display:flex}.chord-diagram{text-align:center}.chord-diagram .cd-name{color:var(--text-h);margin-bottom:4px;font-size:13px;font-weight:600}.snap-row{gap:6px;display:flex}.snap{border:1px solid var(--border);background:var(--panel-2);color:var(--text-dim);font-variant-numeric:tabular-nums;border-radius:9px;flex:1;padding:6px 0;font-size:13px}.snap.on{border-color:var(--accent-border);color:var(--accent);background:var(--accent-bg)}.chord-picker{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chord-chip{border:1px solid var(--accent-border);background:var(--accent-soft);color:var(--text);border-radius:999px;padding:4px 10px;font-size:13px;line-height:1.2}.chord-chip:hover{background:var(--accent-bg)}.keysig .keysig-stepper{justify-content:space-between;align-items:center;gap:10px;display:flex}.keysig-arrow{border:1px solid var(--border);background:var(--panel-2);width:44px;height:44px;color:var(--text);cursor:pointer;border-radius:12px;flex:none;justify-content:center;align-items:center;display:inline-flex}.keysig-arrow:hover{border-color:var(--accent-border);color:var(--accent)}.keysig-key{text-align:center;line-height:1.05}.keysig-kicker{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-weight:600}.keysig-keyname{color:var(--text-h);margin:2px 0;font-size:40px;font-weight:700}.keysig-keysub{letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);font-size:12px}.keysig-sigwrap{justify-content:center;margin-top:12px;display:flex}.keysig-sig{font-size:13px}.keysig-h{margin-top:20px}.keysig-notes{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.keysig-note{text-align:center;border:1px solid var(--border);background:var(--panel-2);border-radius:10px;padding:8px 2px}.keysig-note-name{color:var(--text-h);font-size:16px;font-weight:700}.keysig-deg{color:var(--text-dim);margin-top:2px;font-size:11px}.keysig-groups{flex-direction:column;gap:12px;display:flex}.keysig-group-head{align-items:baseline;gap:8px;margin-bottom:7px;display:flex}.keysig-group-label{color:var(--text);font-size:13px;font-weight:600}.keysig-group-hint{color:var(--text-dim);font-size:12px}.keysig-chips{flex-wrap:wrap;gap:8px;display:flex}.keysig-chip{border:1px solid var(--accent-border);background:var(--accent-bg);border-radius:12px;flex-direction:column;align-items:center;min-width:62px;padding:8px 12px;display:flex}.keysig-chip.is-dim{border-color:var(--border);background:var(--panel-2)}.keysig-chip-name{color:var(--text-h);font-size:17px;font-weight:700}.keysig-chip-deg{color:var(--text-dim);margin-top:1px;font-size:11px}.keysig-rel{letter-spacing:.3px;text-transform:uppercase;color:var(--accent);margin-top:5px;font-size:9.5px;font-weight:600}.keysig-note-text{margin-top:16px;margin-bottom:0;font-size:12px;line-height:1.6}.keysig-shape{text-align:center}.keysig-shape-name{color:var(--text-h);margin-bottom:4px;font-size:13px;font-weight:600}.keysig-modes{justify-content:center;gap:4px;margin-bottom:14px;display:flex}.keysig-mode{border:1px solid var(--border);background:var(--panel-2);width:42px;height:34px;color:var(--text-dim);cursor:pointer;border-radius:9px;justify-content:center;align-items:center;display:inline-flex}.keysig-mode.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.keysig-mode:not(.on):hover{color:var(--text);border-color:var(--accent-border)}.keysig-wheel{margin-top:16px}.keysig-wheel svg{width:100%;max-width:340px;margin:0 auto;display:block}.kw-seg{cursor:pointer}.kw-seg .kw-outer,.kw-seg .kw-inner{fill:var(--panel-2);stroke:var(--border);stroke-width:1px}.kw-seg .kw-inner{fill:var(--surface-3)}.kw-seg:hover .kw-outer,.kw-seg:hover .kw-inner,.kw-seg.near .kw-outer,.kw-seg.near .kw-inner{fill:var(--accent-soft)}.kw-seg.sel .kw-outer,.kw-seg.sel .kw-inner{fill:var(--accent-bg);stroke:var(--accent);stroke-width:2px}.kw-maj{fill:var(--text-h);font-size:13px;font-weight:700}.kw-min{fill:var(--text-dim);font-size:10px}.kw-seg.sel .kw-maj,.kw-seg.sel .kw-min{fill:var(--accent)}.kw-hub{fill:var(--text-h);font-size:22px;font-weight:700}.kw-hub-sub{letter-spacing:1px;text-transform:uppercase;fill:var(--text-dim);font-size:10px}.share-qr{text-align:center;margin-top:12px}.share-qr img{width:220px;max-width:72%;height:auto;image-rendering:pixelated;background:#fff;border-radius:12px;padding:10px;display:inline-block}.be-grid{border:1px solid var(--border);background:var(--panel-2);max-height:320px;font-family:var(--mono);border-radius:10px;padding:6px 8px;font-size:13px;overflow:auto}.be-row{align-items:stretch;gap:8px;min-height:22px;display:flex}.be-lanes{flex:none;gap:3px;display:flex}.be-cell{border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:4px;align-self:stretch;width:20px;min-height:20px;position:relative}.be-cell.be-on{border-color:var(--accent-border);background:color-mix(in srgb, var(--accent) 12%, transparent)}.be-cell.be-on:before{content:"";background:var(--accent);border-radius:1px;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-1px)}.be-cell.be-top:before{top:3px}.be-cell.be-bot:before{bottom:3px}.be-cell.be-top:after,.be-cell.be-bot:after{content:"";background:var(--accent);border-radius:1px;width:6px;height:2px;position:absolute;left:50%;transform:translate(-1px)}.be-cell.be-top:after{top:3px}.be-cell.be-bot:after{bottom:3px}.be-split{border:1px solid var(--border);background:var(--panel);width:16px;height:14px;color:var(--text-dim);z-index:1;border-radius:4px;place-items:center;padding:0;display:grid;position:absolute;top:-7px;left:50%;transform:translate(-50%)}.be-split.be-split-on{border-color:var(--accent);color:var(--accent);background:var(--panel-2)}.be-text{white-space:pre;text-overflow:ellipsis;min-width:0;color:var(--text);flex:1;align-self:center;overflow:hidden}.be-text.be-blank{color:var(--text-dim)}.arp-diagram{text-align:center}.arp-diagram .cd-name{color:var(--text-h);margin-bottom:4px;font-size:13px;font-weight:600}.photo-grid{flex-wrap:wrap;gap:10px;display:flex}.photo-thumb{border:1px solid var(--border);background:var(--panel-2);border-radius:10px;width:84px;height:84px;position:relative;overflow:hidden}.photo-thumb img{object-fit:cover;width:100%;height:100%;display:block}.photo-thumb-num{background:var(--accent);min-width:18px;height:18px;color:var(--on-accent);border-radius:9px;justify-content:center;align-items:center;padding:0 4px;font-size:11px;font-weight:700;display:flex;position:absolute;bottom:4px;left:4px}.photo-thumb-remove{color:#fff;background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;display:flex;position:absolute;top:4px;right:4px}.arp-rows{flex-direction:column;display:flex}.arp-pair{border-top:1px solid var(--border);padding:12px 2px}.arp-pair:first-child{border-top:none}.arp-pair-body{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.arp-cap{text-transform:uppercase;letter-spacing:.4px;color:var(--text-dim);text-align:center;margin-top:2px;font-size:10px}.seg-tabs{width:100%;display:flex}.seg-tabs button{white-space:nowrap;flex:1;padding:7px 6px;font-size:13px}.seg-grid{grid-template-columns:1fr 1fr;width:100%;display:grid}.tour{z-index:2000;position:fixed;inset:0}.tour-dim{background:#0a0a0e9e;position:fixed;inset:0}.tour-spot{box-shadow:0 0 0 2px var(--accent), 0 0 0 9999px #0a0a0e9e;pointer-events:none;border-radius:12px;transition:top .25s,left .25s,width .25s,height .25s;position:fixed}.tour-card{background:var(--panel);border:1px solid var(--accent-border);z-index:2001;border-radius:14px;width:min(360px,100vw - 32px);padding:16px 18px;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000073}.tour-title{color:var(--text-h);margin:0 0 6px;font-size:17px}.tour-body{color:var(--text);margin:0 0 14px;font-size:14px;line-height:1.6}.tour-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.tour-dots{color:var(--text-dim);font-size:12px}.tour-skip{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:6px 4px;font-size:13px}.tour-skip:hover{color:var(--text)}.tour-next{background:var(--accent);color:var(--on-accent);cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:14px;font-weight:600}.tour-next:hover{filter:brightness(1.06)}.help-head{cursor:pointer;width:100%;color:var(--text-h);font:inherit;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;gap:10px;padding:0;display:flex}.help-head .help-htitle{font-size:15px;font-weight:640}.help-head .chev{color:var(--text-dim);flex:none;transition:transform .15s}.help-head[aria-expanded=true] .chev{transform:rotate(90deg)}.help-body{margin-top:12px}.help-body p{color:var(--text);margin:0 0 10px;font-size:14px;line-height:1.62}.help-tips{background:var(--panel-2);border-radius:10px;margin:10px 0 0;padding:10px 12px}.help-tips li{color:var(--text-dim);margin-left:16px;font-size:13px;line-height:1.55}.song-side{flex-direction:column;display:flex}@media (width>=1000px){.app{max-width:1180px}.screen:not(.song-view){max-width:720px;margin-inline:auto}.song-cols{grid-template-columns:2fr 3fr;align-items:start;gap:16px;display:grid}.song-side{align-self:start;max-height:calc(100vh - 92px);position:sticky;top:60px;overflow-y:auto}}.fretboard-scroll{-webkit-overflow-scrolling:touch;margin:0 -4px;padding-bottom:4px;overflow:auto hidden}.fretboard-scroll svg{display:block}.teach{background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:13px;margin-bottom:16px;padding:14px;line-height:1.55}.q-prompt{color:var(--text-h);margin-bottom:18px;font-size:19px;font-weight:600;line-height:1.4}.choice{text-align:left;border:1px solid var(--border);background:var(--panel);width:100%;color:var(--text);border-radius:12px;margin-bottom:10px;padding:14px 16px;font-size:15px}.choice:hover:not(:disabled){border-color:var(--accent-border)}.choice.correct{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 14%, var(--panel));color:var(--text-h)}.choice.wrong{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 12%, var(--panel))}.progress-bar{background:var(--panel-2);border-radius:999px;height:8px;margin-bottom:18px;overflow:hidden}.progress-bar>div{background:var(--accent);height:100%;transition:width .25s}.banner{border:1px solid;border-radius:12px;margin-bottom:14px;padding:12px 14px;font-size:14px}.banner-warn{background:color-mix(in srgb, var(--gold) 14%, var(--panel));border-color:color-mix(in srgb, var(--gold) 45%, transparent);color:var(--text-h)}.banner-err{background:color-mix(in srgb, var(--bad) 12%, var(--panel));border-color:color-mix(in srgb, var(--bad) 45%, transparent)}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{color:var(--text-dim);background:0 0;border:none;align-items:center;gap:6px;margin-bottom:8px;padding:4px 0;font-weight:560;display:inline-flex}.back-btn:hover{color:var(--text-h)}.modal-overlay{z-index:50;background:#0000008c;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}.modal{background:var(--panel);border:1px solid var(--border);width:100%;max-width:420px;margin-bottom:calc(74px + env(safe-area-inset-bottom));border-radius:18px;padding:18px;box-shadow:0 -8px 30px #0006}@media (width>=520px){.modal-overlay{align-items:center}.modal{margin-bottom:0}}.tap-pulse{transform:scale(.96);border-color:var(--accent)!important;background:var(--accent-bg)!important}.section-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:8px;margin:6px 2px 8px;padding-bottom:6px;display:flex}.section-name{color:var(--text-h);font-size:14px;font-weight:650}.section-name.muted{color:var(--text-dim);font-weight:600}.yt-host{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;top:0;left:-9999px}.yt-minibar{left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));z-index:30;background:color-mix(in srgb, var(--panel-2) 96%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border);align-items:center;gap:10px;padding:8px 12px;display:flex;position:fixed}.yt-minibar-title{text-align:left;width:100%;color:var(--text-h);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:13px;font-weight:560;display:block;overflow:hidden}.yt-minibar-time{color:var(--text-dim);font-variant-numeric:tabular-nums;flex:none;font-size:11px}.yt-minibar-range{accent-color:var(--accent);flex:1;min-width:0;height:4px}.playalong-minibar{z-index:15;background:color-mix(in srgb, var(--bg) 88%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:8px 14px;display:flex;position:fixed;left:0;right:0}.playalong-minibar-play{background:var(--accent);width:34px;height:34px;color:var(--on-accent);cursor:pointer;border:none;border-radius:50%;flex:none;place-items:center;display:grid}.playalong-minibar-play:disabled{opacity:.5;cursor:default}.playalong-minibar-skip{border:1px solid var(--border);background:var(--panel-2);height:30px;color:var(--text-h);font-variant-numeric:tabular-nums;border-radius:8px;flex:none;padding:0 8px;font-size:11px;font-weight:600}.playalong-minibar-range{accent-color:var(--accent);flex:1;min-width:0;height:4px}.playalong-minibar-time{color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:right;flex:none;min-width:26px;font-size:11px}.toast{left:50%;bottom:calc(86px + env(safe-area-inset-bottom));z-index:60;background:var(--panel-2);border:1px solid var(--border);border-radius:12px;align-items:center;gap:12px;width:calc(100% - 32px);max-width:420px;padding:12px 14px;animation:.25s ease-out both toastIn;display:flex;position:fixed;transform:translate(-50%);box-shadow:0 8px 30px #0006}.toast-msg{min-width:0;color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.toast-action{color:var(--accent);cursor:pointer;background:0 0;border:none;flex:none;padding:4px 6px;font-size:13px;font-weight:700}.toast-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;flex:none;padding:2px;display:inline-flex}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.view-anim{animation:.28s both viewFade}@keyframes viewFade{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.view-anim{animation:none}}.scale-shapes{flex-direction:column;gap:14px;display:flex}.scale-shape{border:1px solid var(--border);border-radius:12px;padding:8px 10px 4px}.scale-shape-label{color:var(--text-dim);margin-bottom:4px;font-size:12px;font-weight:600}.scale-shape-svg{--shape-dot-a:var(--accent);--shape-dot-b:var(--gold);max-width:100%;height:auto;display:block}.scale-shape-tint-a{--dot-fill:var(--accent)}.scale-shape-tint-b{--dot-fill:var(--gold)}.arp-cell{border-radius:10px;padding:4px}.arp-now{background:var(--accent-bg);border-radius:10px}.skeleton{background:linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%);background-size:200% 100%;animation:1.4s ease-in-out infinite shimmer}.skeleton-bar{border:1px solid var(--border);border-radius:13px;height:56px;margin-bottom:10px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}.install-banner{background:var(--panel-2);border:1px solid var(--accent-border);border-radius:12px;align-items:center;gap:10px;margin:10px 16px 0;padding:10px 12px;display:flex}.install-banner-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.install-banner-text strong{color:var(--text-h);font-size:13px}.install-banner-text span{color:var(--text-dim);font-size:12px;line-height:1.35}.countin-badge{letter-spacing:.04em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:2px 8px;font-size:10px;font-weight:700;animation:.8s ease-out infinite navpulse}