:root{--bg:#111311;--panel:#1b1e1b;--panel2:#232723;--ink:#f3f0e7;--muted:#aaa99e;--lime:#c9f24a;--orange:#ff7648;--line:#3c413b;--radius:18px}
*{box-sizing:border-box}
.temporarily-hidden{display:none!important}
html{color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 80% 0,#29301f 0,transparent 30rem),var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
button,select,input{font:inherit}
button,select{min-height:46px}
button{border:1px solid var(--line);border-radius:10px;background:#292d29;color:var(--ink);padding:.65rem 1rem;cursor:pointer;font-weight:700}
button:hover{border-color:var(--lime)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wrap{width:min(100% - 28px,820px);margin-inline:auto}
.hero{padding:42px 0 26px;border-bottom:1px solid var(--line)}
.eyebrow,.step{margin:0;color:var(--lime);font-size:.72rem;font-weight:900;letter-spacing:.16em}
h1{margin:.15rem 0;font-size:clamp(2.5rem,10vw,5.4rem);line-height:.9;letter-spacing:-.055em}
h1 span{color:var(--lime)}
.hero .wrap>p:last-child{color:var(--muted);margin:1rem 0 0}
.panel{background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,4vw,28px);margin:16px 0;box-shadow:0 12px 38px #0004}
.section-top,.title-row,.switch-row{display:flex;justify-content:space-between;gap:12px;align-items:center}
h2,h3,p{margin-top:0}h2{margin-bottom:14px;font-size:1.35rem}h3{margin:.45rem 0;font-size:1.45rem}
.secondary{font-size:.78rem}.select-label{display:block;color:var(--muted);font-size:.8rem;margin-bottom:5px}
.phrase-settings{display:block}.phrase-settings>div{min-width:0}
select{width:100%;border:1px solid var(--line);border-radius:10px;padding:0 12px;background:#111;color:var(--ink)}
.phrase-card{margin-top:14px;padding:16px;background:#1115;border-left:3px solid var(--lime);border-radius:8px}
.tag-row{display:flex;gap:10px;align-items:center;font-size:.78rem;color:var(--muted)}
.tag{background:var(--orange);color:#18130f;border-radius:99px;padding:2px 9px;font-weight:800}.icon-btn{font-size:1.6rem;border:0;background:transparent;padding:0;min-width:46px}.icon-btn.on{color:var(--lime)}
.check{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.check input{width:19px;height:19px;accent-color:var(--lime)}
#position-label,.root-key{font:800 .72rem ui-monospace,monospace;color:var(--lime)}
.tab{overflow:hidden;background:#0b0d0b;border-radius:10px;padding:16px 8px;white-space:nowrap;font:700 clamp(.66rem,2.4vw,.95rem)/2 ui-monospace,SFMono-Regular,Consolas,monospace;color:#d8d8cd}
.tab-block+.tab-block{margin-top:18px;padding-top:12px;border-top:1px dashed #596050}
.tab-row,.tab-measures{display:flex}.tab-label{width:20px;color:var(--lime);flex:none}.tab-cells,.measure-cells{display:grid;flex:1;min-width:0}
.measure-cells span{text-align:center;color:#9fa493;font-size:.68rem;letter-spacing:.08em;border-left:2px solid #6f7d3b;border-right:2px solid #6f7d3b;line-height:1.5;margin-bottom:5px}
.tab-cell{text-align:center;border-bottom:1px solid #74776c;height:1.9em}.tab-cell.bar-start{border-left:3px solid var(--lime)}.tab-cell.bar-end{border-right:3px solid var(--lime)}.tab-note{display:inline-block;background:#0b0d0b;padding:0 1px;border-radius:4px;transition:.08s}.tab-note.current{background:var(--lime);color:#10130d;transform:scale(1.18)}
.progress-track{height:5px;background:#080908;margin:13px 0 18px;border-radius:99px;overflow:hidden}.progress-track div{height:100%;width:0;background:var(--orange)}
.transport{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:7px}.transport button{padding:.6rem .35rem;font-size:.78rem}.primary{background:var(--lime);color:#14170f;border-color:var(--lime)}
.switch-row{margin-top:10px}.switch-row button{flex:1;font-size:.72rem;padding-inline:.45rem}.toggle[aria-pressed="true"]{border-color:var(--lime);color:var(--lime)}
.count-display{position:fixed;inset:0;display:none;place-items:center;background:#0b0d0bd9;z-index:10;font-size:min(42vw,14rem);font-weight:900;color:var(--lime)}
.count-display.show{display:grid}
.tempo-panel output{font-size:1.35rem;font-weight:900;color:var(--lime)}
input[type=range]{width:100%;accent-color:var(--lime)}
.speed-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.speed-row .active{background:var(--lime);color:#111}
.hand-practice{border-color:#65752f}.hand-intro{color:var(--muted);margin-bottom:14px}.guide-controls{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;margin-bottom:18px}.guide-controls strong{text-align:right;color:var(--lime);font-size:.85rem}
.fret-scroll{overflow-x:auto;padding-bottom:8px}.fretboard{--string-label-width:32px;--fret-width:44px;width:max-content;min-width:0;display:grid;font:700 .72rem ui-monospace,monospace}
.fret-cell{height:48px;border-right:2px solid #706b58;border-bottom:1px solid #827c66;display:grid;place-items:center;background:#302b22}.fret-cell.label{position:sticky;left:0;z-index:2;background:#171916;color:var(--lime);border-right:3px solid #ddd}.fret-cell.header{height:24px;background:transparent;border:0;color:var(--muted)}
.dot{display:grid;place-items:center;width:30px;height:30px;min-height:30px;padding:0;border:1px solid #a5aa9e;border-radius:50%;background:#73776d;color:#fff;cursor:pointer}.dot:hover{transform:scale(1.12);border-color:#fff}.dot.root{background:var(--orange);font-weight:900}.dot.current,.dot.preview,.dot.target{outline:4px solid var(--lime);outline-offset:2px;transform:scale(1.12)}.dot.preview{background:var(--lime);color:#111}.dot.target{background:var(--lime);color:#111;box-shadow:0 0 0 8px #c9f24a22,0 0 24px var(--lime)}.dot.wrong{outline:4px solid #ff4f55;background:#ff4f55;transform:translateX(2px)}
.legend{font-size:.75rem;color:var(--muted);margin:10px 0 0}.legend span{color:var(--orange);font-weight:900}.legend strong{color:var(--lime)}
.practice-count{color:var(--muted);font-size:.82rem;margin:.35rem 0 .8rem}
footer{text-align:center;color:var(--muted);font-size:.75rem;padding:28px 14px 50px}
@media(max-width:500px){.section-top{align-items:flex-start}.secondary{max-width:145px}.phrase-settings{grid-template-columns:1fr}.transport{grid-template-columns:1fr 1fr}.switch-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.switch-row button:last-child{grid-column:1/-1}.panel{border-radius:14px}.tab{padding-inline:5px}.guide-controls{grid-template-columns:1fr 1fr}.guide-controls strong{grid-column:1/-1;text-align:left}.fretboard{--string-label-width:24px;--fret-width:22px;font-size:.58rem}.fret-cell{height:38px}.dot{width:19px;height:19px;min-height:19px;font-size:.55rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}