:root{--bg:#0b0d14;--bg2:#10131d;--panel:#161a28;--panel2:#1c2133;--line:#262c42;--txt:#eef1ff;--mut:#9aa3c7;--acc:#7c5cff;--acc2:#22d3ee;--good:#3ddc84;--warn:#ffd24d;--r:18px;
--font:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#1b1740 0,transparent 60%),var(--bg);color:var(--txt);font:18px/1.55 var(--font);min-height:100dvh;-webkit-font-smoothing:antialiased}
h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:.2em 0 .3em;letter-spacing:-.01em}h2{font-size:clamp(22px,3.6vw,28px);margin:.2em 0 .5em}h3{font-size:20px;margin:.2em 0 .5em}
p{margin:.5em 0}.muted{color:var(--mut)}.small{font-size:15px}.lead{font-size:20px;color:#d4daf5}.big{font-size:21px}
.screen{display:none}.screen.active{display:block}.hidden{display:none!important}
.wrap{max-width:980px;margin:0 auto;padding:18px 18px 90px}.wrap.narrow{max-width:760px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;max-width:980px;margin:0 auto;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.02em}
.topnav{display:flex;gap:8px;flex-wrap:wrap}.crumb{color:var(--mut);font-weight:700}
.back{background:none;border:0;color:var(--txt);font:inherit;font-weight:700;cursor:pointer;padding:10px 6px}
.card{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:14px 0;box-shadow:0 10px 40px #0006}
.center{text-align:center}
.btn,.chip{font:inherit;font-weight:700;border:1px solid var(--line);background:var(--panel2);color:var(--txt);border-radius:14px;padding:12px 20px;min-height:48px;cursor:pointer;transition:transform .08s,background .15s}
.chip{padding:8px 14px;min-height:42px;border-radius:999px;font-size:16px}
.btn:hover,.chip:hover{background:#262d47}.btn:active,.chip:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--acc),#5a7bff 60%,var(--acc2));border:0;box-shadow:0 8px 28px #7c5cff55}
.btn.big{min-height:58px;font-size:20px;padding:14px 28px}.btn.ghost{background:transparent}.btn.danger{color:#ff8b95;border-color:#5b2a33;background:transparent}
.btn:focus-visible,.chip:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--acc2);outline-offset:2px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.btnrow.center{justify-content:center}.btnrow.between{justify-content:space-between}
.sticky{position:sticky;bottom:0;z-index:5;padding:30px 0 14px;margin-top:0;background:linear-gradient(transparent,var(--bg) 55%)}.sticky .btn{box-shadow:0 10px 40px #000a,0 8px 28px #7c5cff55}
.ticks{list-style:none;padding:0;margin:.6em 0}.ticks li{position:relative;padding:6px 0 6px 34px}
.ticks li:before{content:"✓";position:absolute;left:0;top:7px;width:24px;height:24px;border-radius:50%;background:#7c5cff33;color:#b8a8ff;text-align:center;font-size:15px;line-height:24px;font-weight:800}
/* home */
.hero{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;background:radial-gradient(600px 240px at 90% 0,#7c5cff44,transparent 70%),linear-gradient(180deg,var(--panel),var(--bg2))}
.eyebrow{color:var(--acc2);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:14px}
.ring{--p:0;width:130px;height:130px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--acc2) calc(var(--p)*1%),#262c42 0);position:relative}
.ring:before{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--panel)}.ring *{position:relative}.ring b{font-size:30px;line-height:1}.ring span{font-size:14px;color:var(--mut)}
.section-title{margin-top:26px}
.path{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px;position:relative}
.pnode button{width:100%;display:flex;align-items:center;gap:16px;text-align:left;font:inherit;color:var(--txt);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;cursor:pointer;min-height:76px}
.pnode button:hover:not(:disabled){border-color:#4b55a0;background:var(--panel2)}
.pnode.current button{border-color:var(--acc);box-shadow:0 0 0 3px #7c5cff33}
.pnode.locked button{opacity:.5;cursor:not-allowed}
.pnum{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-content:center;font-weight:800;font-size:20px;background:#262c42}
.pnode.done .pnum{background:#1c5a3a;color:#7dffb4}.pnode.current .pnum{background:linear-gradient(135deg,var(--acc),var(--acc2))}
.ptxt{flex:1;display:flex;flex-direction:column}.ptxt b{font-size:20px}.ptxt small{color:var(--mut);font-size:15px}.pstars{color:var(--warn);letter-spacing:2px;font-size:22px}
.footnote{margin-top:24px}
/* ready */
.split{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:start}
.firstnote{text-align:center}.firstnote .fretboard{width:170px}
.opt{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}.opt:last-child{border:0}
.opt.col{flex-direction:column;align-items:stretch}.opt small{display:block;color:var(--mut);font-size:15px;line-height:1.35;margin-top:2px}
.seg{display:flex;background:#0d1019;border:1px solid var(--line);border-radius:12px;padding:3px;flex:none}.seg button{font:inherit;font-weight:700;font-size:16px;background:none;border:0;color:var(--mut);padding:9px 14px;border-radius:9px;cursor:pointer;min-height:42px}.seg button.on{background:var(--acc);color:#fff}
select{font:inherit;font-size:16px;background:#0d1019;color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:46px;max-width:230px}
input[type=range]{width:100%;max-width:260px;accent-color:var(--acc);height:36px}.opt.col input[type=range]{max-width:none}
.switch{position:relative;width:62px;height:36px;flex:none}.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2}.switch i{position:absolute;inset:0;background:#2a3050;border-radius:99px;transition:.2s}.switch i:after{content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+i{background:var(--acc)}.switch input:checked+i:after{left:30px}
.switch input:focus-visible+i{outline:3px solid var(--acc2)}
/* fretboard svg */
.fretboard{width:100%;max-width:220px;height:auto}.fb-fret{stroke:#3a4266;stroke-width:2}.fb-nut{stroke:#e9edff;stroke-width:6}.fb-string{stroke:#aab3dd;opacity:.6}
.fb-fretnum{fill:#8b94bd;font:700 15px system-ui}.fb-letter{font:800 15px system-ui;text-anchor:middle}.fb-finger{fill:#10131c;font:900 17px system-ui;text-anchor:middle}.fb-x{fill:#ff8b95;font:900 22px system-ui;text-anchor:middle}
.fb-dot.pulse,.fb-open.pulse{animation:pulse 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes pulse{50%{transform:scale(1.14)}}
/* play */
#play{height:100dvh;overflow:hidden}#play.active{display:block}
.playgrid{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud hud" "stage next" "lanes next";gap:10px 16px;padding:12px 16px;max-width:1100px;margin:0 auto}
.hud{grid-area:hud;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.hud-title{font-weight:800;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-stats{display:flex;gap:18px}.hud-stats div{display:flex;flex-direction:column;align-items:center;line-height:1.1}.hud-stats b{font-size:26px}.hud-stats span{font-size:13px;color:var(--mut)}
.progress{grid-column:1/-1;height:6px;background:#1c2133;border-radius:9px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.stage{grid-area:stage;position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#0a0c14,#10131d);border:1px solid var(--line);min-height:240px;touch-action:none}
#highway{width:100%;height:100%;display:block}
.countdown{position:absolute;inset:0;display:grid;place-content:center;font-size:clamp(90px,22vw,180px);font-weight:900;pointer-events:none;color:#fff;text-shadow:0 0 40px var(--acc)}
.countdown.pop{animation:cd .9s ease-out}@keyframes cd{0%{transform:scale(1.6);opacity:0}25%{opacity:1}100%{transform:scale(.9);opacity:.1}}
.feedback{position:absolute;left:0;right:0;top:16%;text-align:center;font-weight:900;font-size:clamp(26px,5vw,42px);pointer-events:none;opacity:0;transform:translateY(10px)}
.feedback.show{opacity:1;transform:none;transition:.12s}
.feedback.perfect{color:#fff3a8;text-shadow:0 0 24px #ffd24d}.feedback.good{color:#9cf2c6;text-shadow:0 0 18px #3ddc84}.feedback.slow{color:#b8c4ff}
.feedback.miss,.feedback.hint{color:#ffcf8a;font-size:clamp(20px,3.6vw,28px)}
.heard{position:absolute;left:10px;top:8px;right:10px;height:30px;border-radius:9px;background:#0d1019cc;overflow:hidden;font-size:15px;font-weight:700}
.heard i{position:absolute;left:0;top:0;bottom:0;background:#7c5cff55;transition:width .06s}.heard span{position:relative;display:block;padding:3px 12px;color:#d4daf5}
.nextpanel{grid-area:next;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.nextpanel.waiting{border-color:var(--warn);box-shadow:0 0 0 3px #ffd24d33}
.np-label{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:800}.np-diagram{width:100%;display:flex;justify-content:center}.np-diagram .fretboard{max-width:210px}
.np-text{font-size:17px;line-height:1.4}.np-text span{color:#c3cae8}.allset{font-size:70px}
.lanebuttons{grid-area:lanes;display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.lanebuttons button{--c:#fff;position:relative;font:inherit;border:0;border-radius:14px;min-height:64px;background:color-mix(in srgb,var(--c) 85%,#000);color:#10131c;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:manipulation;line-height:1.1}
.lanebuttons button b{font-size:24px}.lanebuttons button span{font-size:14px;font-weight:800}.lanebuttons button kbd{position:absolute;top:4px;right:6px;font-size:11px;opacity:.55}.lanebuttons button.down{transform:scale(.94);filter:brightness(1.25)}
.overlay{position:fixed;inset:0;background:#05060acc;backdrop-filter:blur(6px);display:grid;place-items:center;z-index:50;padding:14px;overflow:auto}
.modal{max-width:640px;width:100%;max-height:92dvh;overflow:auto;margin:0}.modal.onboarding{max-width:700px;display:flex;flex-direction:column;overflow:hidden;max-height:94dvh}.onboarding .ob-body{overflow:auto;flex:1;min-height:0;padding-right:4px}.onboarding .illus{max-height:270px}.onboarding .btnrow{flex:none}
/* results */
.stars{font-size:70px;letter-spacing:8px;color:#303756}.stars .on{color:var(--warn);text-shadow:0 0 30px #ffd24d88;display:inline-block;animation:starpop .5s both}@keyframes starpop{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
.rstats{display:flex;justify-content:center;gap:34px;margin:18px 0}.rstats b{display:block;font-size:36px}.rstats span{color:var(--mut);font-size:15px}
.rbreak{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.rbreak span{padding:6px 14px;border-radius:99px;font-weight:700;font-size:16px;background:#262c42}.rbreak .pf{color:#fff3a8}.rbreak .gd{color:#9cf2c6}.rbreak .ms{color:#ffcf8a}
.unlock{margin-top:18px;padding:12px;border-radius:14px;background:#1c5a3a55;color:#9cf2c6}
/* tuner */
.tuner{text-align:center}.t-note{font-size:120px;font-weight:900;line-height:1;color:#6c7499}.t-note.near{color:var(--warn)}.t-note.ok{color:var(--good);text-shadow:0 0 40px #3ddc8488}
.t-sub{color:var(--mut);min-height:28px}.t-msg{font-size:21px;font-weight:700;min-height:62px;margin:14px 0}
.gauge{position:relative;height:56px;margin:20px 6px 44px;border-radius:12px;background:linear-gradient(90deg,#3a2a40,#1a1f33 40%,#1a1f33 60%,#3a2a40)}
.gauge .zone{position:absolute;left:44%;width:12%;top:0;bottom:0;background:#3ddc8433;border-left:2px solid #3ddc84;border-right:2px solid #3ddc84}
.needle{position:absolute;left:50%;top:-6px;bottom:-6px;width:6px;margin-left:-3px;border-radius:4px;background:#fff;transition:left .08s,background .15s}.needle.ok{background:var(--good)}
.gauge span{position:absolute;bottom:-26px;font-size:14px;color:var(--mut)}.g-l{left:0}.g-c{left:50%;transform:translateX(-50%)}.g-r{right:0}
.t-strings{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:38px 0 14px}
.tstring{--c:#fff;font:inherit;background:var(--panel2);border:2px solid var(--c);color:var(--txt);border-radius:14px;padding:10px 4px;cursor:pointer;display:flex;flex-direction:column;min-height:74px}
.tstring b{font-size:30px;color:var(--c);line-height:1}.tstring span{font-size:12px;color:var(--mut)}.tstring.live,.tstring.sel{background:color-mix(in srgb,var(--c) 28%,var(--panel2))}
/* onboarding & misc */
.ob-step{color:var(--acc2);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.ob-body{margin-top:8px}
.ob-dots{display:flex;gap:8px;justify-content:center;margin:16px 0 2px}.ob-dots i{width:9px;height:9px;border-radius:50%;background:#2c3354}.ob-dots i.on{background:var(--acc2);width:26px;border-radius:9px}
.illus{width:100%;height:auto;display:block;margin:6px 0 10px;background:#0d1019;border-radius:14px;border:1px solid var(--line)}
.illus text{fill:#cdd5ff;font:700 13px system-ui}.illus .callout text{fill:#9aa6d6}.illus .hl{font:700 16px system-ui;text-anchor:middle;fill:#9ee8f5}.illus .fn{font:800 18px system-ui;text-anchor:middle;fill:#e9edff}
.strings{display:grid;gap:8px;margin:10px 0}.srow{display:grid;grid-template-columns:44px 1fr 150px 110px;align-items:center;gap:12px;background:#0d1019;border-radius:12px;padding:8px 12px}
.sdot{width:36px;height:36px;border-radius:50%;display:grid;place-content:center;font-weight:900;color:#10131c;font-size:19px}.sline{display:block;border-radius:3px;width:100%}.sname{font-size:19px}.ssize{color:var(--mut);font-size:15px;text-align:right}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.choice{font:inherit;color:var(--txt);text-align:left;background:var(--panel2);border:2px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:4px}
.choice.sel{border-color:var(--acc2);background:#17304a}.choice .em{font-size:36px}.choice b{font-size:20px}.choice small{color:var(--mut);font-size:15px;line-height:1.35}
kbd{background:#262c42;border-radius:6px;padding:1px 7px;font-size:.85em;border:1px solid #3a4266}
.gloss{margin:0}.gloss dt{font-weight:800;color:var(--acc2);margin-top:12px}.gloss dd{margin:2px 0 0;color:#d4daf5}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#232a45;border:1px solid #4b55a0;padding:14px 20px;border-radius:14px;max-width:min(92vw,560px);z-index:90;box-shadow:0 10px 40px #000a}
@media (max-width:760px){
  body{font-size:17px}.hero{grid-template-columns:1fr}.hero-meter{display:none}.split{grid-template-columns:1fr}.firstnote{display:flex;gap:14px;align-items:center;text-align:left;flex-wrap:wrap}.firstnote .np-label{width:100%}
  .opt{flex-wrap:wrap}.srow{grid-template-columns:40px 1fr 110px}.ssize{display:none}.choices{grid-template-columns:1fr}.t-note{font-size:96px}.t-strings{gap:5px}
  .playgrid{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"hud" "next" "stage" "lanes";padding:8px 10px;gap:8px}
  .hud{grid-template-columns:auto 1fr}.hud-title{display:none}.hud-stats{justify-content:flex-end;gap:14px}.hud-stats b{font-size:22px}
  .nextpanel{flex-direction:row;text-align:left;padding:8px 12px;gap:12px;align-items:center;max-height:128px;overflow:hidden}.np-label{display:none}.np-diagram{width:92px;flex:none}.np-diagram .fretboard{max-width:92px}.np-text{font-size:15px;flex:1;overflow:hidden;line-height:1.3}.np-text span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  #np-hear{flex:none;padding:6px 10px;min-height:40px}.lanebuttons button{min-height:56px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}