:root{--bg:#140c2b;--bg2:#1f1442;--card:#261a52;--ink:#f6f1ff;--mut:#b7a9e0;--pri:#ff5fa2;--pri2:#ffb347;--ok:#3ee6a0;--warn:#ffcc4d;--vio:#8c6cff;--r:18px}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
body{padding:calc(56px + env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom));background:radial-gradient(120% 60% at 100% 0,#3a1d6e 0,transparent 60%),radial-gradient(90% 50% at 0 100%,#4a1240 0,transparent 60%),var(--bg);min-height:100vh}
a{color:var(--pri2)}h1{font-size:1.6rem;line-height:1.15;margin:.2em 0}h2{font-size:1.05rem;margin:1.4em 0 .5em;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}h3{margin:.2em 0 .6em}
main{max-width:560px;margin:0 auto;padding:12px 16px;outline:none}
.top{position:fixed;inset:0 0 auto;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(20,12,43,.85);backdrop-filter:blur(10px)}
.logo{font-weight:900;font-size:1.3rem;color:var(--ink);text-decoration:none}.logo span{background:linear-gradient(90deg,var(--pri),var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent}
.chip{background:var(--card);padding:4px 12px;border-radius:99px;font-weight:700}
.tabs{position:fixed;inset:auto 0 0;z-index:5;display:flex;background:rgba(31,20,66,.95);backdrop-filter:blur(10px);padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #34266b}
.tabs a{flex:1;text-align:center;color:var(--mut);text-decoration:none;font-size:.75rem;padding:4px;border-radius:12px}.tabs a b{display:block;font-size:1.35rem}.tabs a.on{color:var(--ink);background:#33236b}
body.onboard .tabs{display:none}
.hero{padding:18px 4px}.hero p{color:var(--mut);margin:.3em 0}.hero.small h1{font-size:1.8rem}.eyebrow{color:var(--pri2)!important;font-weight:700;font-size:.85rem;margin:0}
.pick{display:grid;gap:14px}.pick-card{border:0;border-radius:24px;padding:22px;text-align:left;color:#fff;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;align-items:center;font:inherit;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pick-card.guitar{background:linear-gradient(135deg,#ff5fa2,#ff9254)}.pick-card.bass{background:linear-gradient(135deg,#6c5cff,#2fc6ff)}
.pick-card .big{grid-row:span 2;font-size:3rem}.pick-card b{font-size:1.5rem}.pick-card small{opacity:.9}.pick-card:active{transform:scale(.98)}
.toggle{display:flex;align-items:center;gap:10px;margin:16px 0;cursor:pointer}.toggle input{display:none}.toggle span{width:46px;height:26px;border-radius:99px;background:#3b2d75;position:relative;flex:none;transition:.2s}
.toggle span:after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}.toggle input:checked+span{background:var(--ok)}.toggle input:checked+span:after{left:23px}
.fine{color:var(--mut);font-size:.85rem}
.bar{height:10px;background:#33246a;border-radius:99px;overflow:hidden;margin:12px 0 4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pri),var(--pri2))}
.cta{display:block;width:100%;text-align:center;border:0;border-radius:16px;padding:16px;font:700 1.05rem system-ui;color:#1a0f33;background:linear-gradient(90deg,var(--pri2),var(--pri));text-decoration:none;cursor:pointer;margin:12px 0;box-shadow:0 8px 24px rgba(255,95,162,.3)}
.cta.alt{background:linear-gradient(90deg,#2fc6ff,var(--vio));color:#fff}.cta.half{width:auto;flex:1}.cta.rec.on{background:#ff3b5c;color:#fff;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(255,59,92,.2)}}
.card{background:var(--card);border-radius:var(--r);padding:16px;margin:10px 0;box-shadow:0 6px 20px rgba(0,0,0,.25)}.card.warn{border:1px solid var(--warn)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tile{background:var(--card);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);font-size:1.7rem}.tile b{display:block;font-size:.95rem;margin-top:4px}
.diagrams{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.diagram{width:150px;height:auto;background:#fff8ef;border-radius:14px}.diagram.wide{width:100%;max-width:360px}
.d-title{font:800 22px system-ui;fill:#2a1650}.d-title.sm{font-size:14px}.d-nut,.d-nutv{fill:#2a1650;stroke:#2a1650;stroke-width:5}.d-fret{stroke:#9a8bb8;stroke-width:2}.d-string{stroke:#4b3a6e}
.d-dot{fill:#ff5fa2}.d-opendot{fill:#6c5cff}.d-open{fill:none;stroke:#2a1650;stroke-width:2}.d-mute{font:700 16px system-ui;fill:#c33}.d-finger{font:700 12px system-ui;fill:#fff}.d-label{font:600 12px system-ui;fill:#5b4a80}.d-label.sm{font-size:10px}.d-inlay{fill:#cbbfe0}
.week{background:var(--card);border-radius:var(--r);margin:10px 0;overflow:hidden}.week summary{display:flex;gap:12px;align-items:center;padding:14px;cursor:pointer;list-style:none}.week summary::-webkit-details-marker{display:none}
.week summary small{display:block;color:var(--mut);font-size:.8rem}.week summary span:nth-child(2){flex:1}.wnum{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--pri),var(--pri2));font-weight:800;color:#1a0f33;flex:none}
.week.locked{opacity:.55}.wp{color:var(--mut);font-size:.85rem}.days{display:grid;gap:6px;padding:0 14px 14px}.day{background:#33246a;border-radius:12px;padding:10px 12px;color:var(--ink);text-decoration:none;font-weight:700}.day small{display:block;font-weight:400;color:var(--mut)}.day.done{background:#1f5a4a}.day.done:after{content:" ✓";color:var(--ok)}
.ghost{background:#33246a;color:var(--ink);border:0;border-radius:12px;padding:10px 14px;font:600 .9rem system-ui;cursor:pointer}.danger{background:#5a1830;color:#ffd0dc;border:0;border-radius:12px;padding:12px;width:100%;font:700 1rem system-ui;margin-top:8px}
.back{text-decoration:none;color:var(--mut)}.pt{margin-top:6px}
.steps{list-style:none;padding:0;margin:0}.step{background:var(--card);border-radius:var(--r);padding:14px;margin:10px 0;border-left:5px solid var(--pri)}.step:nth-child(2){border-color:var(--pri2)}.step:nth-child(3){border-color:#2fc6ff}.step:nth-child(4){border-color:var(--ok)}
.sh{display:flex;justify-content:space-between}.mins{color:var(--mut);font-size:.85rem}.step p{margin:.4em 0}.srow{display:flex;gap:10px;align-items:center;justify-content:space-between}
.timer{background:#33246a;color:var(--ink);border:0;border-radius:10px;padding:8px 12px;font:600 .9rem system-ui}.chk{display:flex;gap:6px;align-items:center;color:var(--mut)}.chk input{width:20px;height:20px;accent-color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.chipbtn{background:#33246a;color:var(--ink);border:0;border-radius:99px;padding:8px 14px;font:700 .9rem system-ui;text-decoration:none;cursor:pointer}.chipbtn.on{background:var(--pri);color:#1a0f33}
.video{margin:10px 0;border-radius:var(--r);overflow:hidden}.video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid-btn{width:100%;display:flex;gap:14px;align-items:center;text-align:left;background:linear-gradient(135deg,#3a1d6e,#5a1d5e);color:var(--ink);border:0;padding:14px;font:inherit;cursor:pointer;border-radius:var(--r)}.vid-btn small{display:block;color:var(--mut)}
.play{width:48px;height:48px;border-radius:50%;background:#ff0033;display:grid;place-items:center;font-size:1.2rem;flex:none}
.seg{display:flex;gap:4px;background:var(--card);padding:4px;border-radius:14px}.seg a{flex:1;text-align:center;padding:9px 2px;border-radius:10px;color:var(--mut);text-decoration:none;font-size:.82rem;font-weight:700}.seg a.on{background:var(--pri);color:#1a0f33}
.tuner{text-align:center}.tuner .note{font:900 4.5rem system-ui;margin:10px 0}.tuner.ok .note{color:var(--ok)}
.meter{position:relative;height:16px;background:linear-gradient(90deg,#ff5f6d,#ffcc4d 40%,#3ee6a0 50%,#ffcc4d 60%,#ff5f6d);border-radius:99px;margin:10px 0}
.meter i{position:absolute;top:-6px;left:50%;width:6px;height:28px;margin-left:-3px;background:#fff;border-radius:3px;transition:left .08s}.meter .mid,.timeline .mid{position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:rgba(255,255,255,.6)}
.cents{color:var(--mut);min-height:1.4em}.strs{display:flex;justify-content:center;gap:8px;margin:12px 0}.strs span{background:#33246a;border-radius:10px;padding:6px 10px;font-weight:800}.strs span.on{background:var(--ok);color:#10301f}
.big-note{font:900 4rem system-ui;text-align:center;color:var(--pri2)}
.verdict{font-size:1.3rem;font-weight:800;padding:12px;border-radius:14px;margin:10px 0}.verdict small{display:block;font-size:.85rem;font-weight:500;opacity:.85}.verdict.ok{background:#1f5a4a}.verdict.meh{background:#5a4a1f}
.chroma{display:flex;gap:3px;height:90px;align-items:flex-end}.cb{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center}.cb i{display:block;background:#5b4a80;border-radius:4px 4px 0 0;min-height:2px}.cb.want i{background:var(--vio)}.cb small{font-size:.6rem;color:var(--mut)}
.listening{animation:blink 1s infinite}@keyframes blink{50%{opacity:.4}}
.bpm{display:flex;align-items:center;justify-content:center;gap:14px}.bpm b{font:900 3rem system-ui;min-width:90px;text-align:center}.bpm button{width:52px;height:52px;border-radius:50%;border:0;background:#33246a;color:var(--ink);font-size:1.6rem}
.beats{display:flex;justify-content:center;gap:14px;margin:12px 0}.beats i{width:22px;height:22px;border-radius:50%;background:#33246a;transition:.05s}.beats i.on{background:var(--pri2);transform:scale(1.3)}.beats i:first-child.on{background:var(--pri)}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.timeline{position:relative;height:36px;background:#33246a;border-radius:10px;margin:8px 0}.timeline i{position:absolute;top:8px;width:14px;height:20px;margin-left:-7px;border-radius:4px}.timeline i.ok{background:var(--ok)}.timeline i.off{background:#ff5f6d}
.calib summary{cursor:pointer;color:var(--mut);margin-top:10px}
.take audio{width:100%;margin:8px 0}.tbl{width:100%;border-collapse:collapse;font-size:.85rem}.tbl td,.tbl th{padding:4px;border-bottom:1px solid #3b2d75;text-align:left}.okc{color:var(--ok)}.offc{color:#ff8a95}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats div{background:var(--card);border-radius:var(--r);padding:14px;text-align:center}.stats b{display:block;font-size:1.8rem}.stats small{color:var(--mut)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}.badge{background:var(--card);border-radius:var(--r);padding:12px 6px;text-align:center;filter:grayscale(1);opacity:.45}.badge span{font-size:2rem;display:block}.badge small{font-size:.72rem}.badge.got{filter:none;opacity:1;box-shadow:0 0 0 2px var(--pri2) inset}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:#1a0f33;padding:12px 18px;border-radius:14px;font-weight:700;z-index:9;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:90vw}
.vid-fallback a{font-weight:700}
.tabs a[hidden]{display:none}
.install{display:none;border:0;color:var(--ink);cursor:pointer}body.can-install .install{display:inline-block}.hdr{display:flex;gap:8px}
button.ghost.install{width:100%;margin:6px 0}