: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{--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{flex:1;padding-bottom:78px}.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}.navtab.active{color:var(--accent)}.navtab.active svg{transform:translateY(-1px)}.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}.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)}.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 50ms,background 50ms}.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)}.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;align-items:center;gap:10px;display:flex}.mc-play{background:var(--accent);width:44px;height:44px;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:36px;height:36px;font-size:19px}.mc-bpm{font-variant-numeric:tabular-nums;white-space:nowrap}.mc-bpm b{color:var(--text-h);font-size:23px}.mc-bpm .muted{font-size:12px}.mc-dots{gap:7px;margin-left:auto;display:flex}.beat-dot.mc-dot{width:13px;height:13px}.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}.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:1px;width:1.1ch;margin-right:.4ch;display:flex}.sheet.has-rbars .rbar{background:var(--accent);border-radius:1px;width: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}.arp-diagram{text-align:center}.arp-diagram .cd-name{color:var(--text-h);margin-bottom:4px;font-size:13px;font-weight:600}.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}.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}