:root{
  --bg:#0d1017; --bg2:#141924; --panel:#161c28; --panel2:#1b2231;
  --ink:#e7ecf5; --muted:#9aa6bd; --line:#28303f;
  --accent:#4f9cff; --accent2:#37c871; --warn:#ff9f43; --purple:#b57bff;
  --radius:14px; --maxw:820px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:rgba(13,16,23,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.2px}
.nav-toggle,.tools-toggle{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  width:38px;height:38px;border-radius:10px;font-size:18px;cursor:pointer}
.tools-toggle{margin-left:auto}
.nav-toggle{display:none}

/* layout */
.layout{display:flex;min-height:calc(100vh - 59px)}
.sidebar{width:270px;flex:0 0 270px;border-right:1px solid var(--line);padding:18px 12px;
  overflow-y:auto;height:calc(100vh - 59px);position:sticky;top:59px}
.nav-group{margin-bottom:18px}
.nav-group-title{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  padding:0 10px 6px}
.nav-link{display:block;padding:8px 12px;border-radius:9px;color:var(--ink);font-size:14.5px;margin:2px 0}
.nav-link:hover{background:var(--panel);text-decoration:none}
.nav-link.active{background:var(--accent);color:#04121f;font-weight:600}
.scrim{display:none}

.content{flex:1;overflow-y:auto;height:calc(100vh - 59px);padding:34px 26px 90px}
.lesson{max-width:var(--maxw);margin:0 auto}
.lesson h1{font-size:30px;line-height:1.2;margin:0 0 6px}
.lesson h3{margin:30px 0 10px;font-size:19px}
.lead{font-size:18px;color:var(--muted);margin:.2em 0 1.2em}
blockquote{margin:18px 0;padding:14px 18px;background:var(--panel);border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
.lesson ol,.lesson ul{padding-left:22px}
.lesson li{margin:6px 0}
.next{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}

/* tables */
.tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px}
.tbl th,.tbl td{border:1px solid var(--line);padding:9px 11px;text-align:left;vertical-align:top}
.tbl th{background:var(--panel2);font-weight:600}
.tbl tr:nth-child(even) td{background:rgba(255,255,255,.015)}

/* tab blocks */
pre.tab{background:#0a0d13;border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  overflow-x:auto;font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#bcd;line-height:1.5}

/* buttons */
.btn{background:var(--accent);color:#04121f;border:none;padding:9px 16px;border-radius:10px;
  font-weight:600;font-size:14px;cursor:pointer;display:inline-block}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.btn.playing{background:var(--warn)}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}

/* ---- widget shell ---- */
.w-metronome,.w-fretboard,.w-strum{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin:20px 0}

/* metronome */
.met-readout{font-size:15px;color:var(--muted);margin-bottom:8px}
.met-bpm{font-size:30px;color:var(--ink);font-weight:700}
.met-beats{display:flex;gap:8px;margin:6px 0 12px}
.met-beat{flex:1;text-align:center;padding:10px 0;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;font-weight:600;color:var(--muted);transition:.05s}
.met-beat.on{background:var(--accent);color:#04121f;transform:translateY(-2px)}
.met-slider,.mv-bpm,.st-bpm{width:100%;accent-color:var(--accent)}
.met-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.met-mode{font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:7px}

/* fretboard */
.fb-title,.mv-label{font-size:14px;color:var(--muted);margin-bottom:6px}
.fretboard-svg{width:100%;height:auto;display:block}
.fb-string{fill:#8895ad;font-size:12px;text-anchor:middle;font-family:var(--font)}
.fb-fretnum{fill:#5d677d;font-size:10px;text-anchor:middle;font-family:var(--font)}
.fb-lbl{fill:#04121f;font-size:12px;font-weight:700;text-anchor:middle;font-family:var(--font)}
.fb-dot.ghost{pointer-events:none}
.fb-controls{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.fb-controls select{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:6px 10px;font-size:15px}
.fb-legend{display:flex;gap:12px;color:var(--muted);font-size:13px;align-items:center}
.fb-legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:middle}
.fb-tip{color:var(--muted);font-size:13.5px;margin:10px 0 0;text-align:center}
.fb-stage{overflow-x:auto}

/* pentatonic-follow */
.pf-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.pf-toggle{display:flex;gap:6px}
.pf-btn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  padding:6px 11px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer}
.pf-btn:hover{color:var(--ink)}
.pf-btn.active{background:var(--c);border-color:var(--c);color:#04121f}
.pf-label{font-weight:600;color:var(--ink);font-size:15px;margin-bottom:8px}
.pf-legend{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.pf-legend i{display:inline-block;width:12px;height:12px;border-radius:50%}

/* move player */
.mv-head{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.mv-label.strong{color:var(--ink);font-weight:600;font-size:15px}
.mv-stage{overflow-x:auto}
.mv-foot{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.mv-foot label{display:flex;align-items:center;gap:8px;flex:1;min-width:160px}
.mv-click{flex:0!important}

/* strum grid */
.st-head{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.st-name{color:var(--muted);font-size:14px}
.st-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.st-cell{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 2px 6px;
  text-align:center;transition:.05s;min-height:64px;display:flex;flex-direction:column;justify-content:space-between}
.st-cell.accent{border-color:#3a4658}
.st-cell.on{background:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.st-cell.on .st-cl,.st-cell.on .st-beat,.st-cell.on .st-arrow{color:#04121f}
.st-arrow{font-size:20px;line-height:1;color:var(--ink);height:22px}
.st-cl{font-size:11px;color:var(--muted)}
.st-beat{font-size:11px;color:#5d677d}
.st-foot{display:flex;align-items:center;gap:12px;margin-top:12px;color:var(--muted);font-size:13.5px}
.st-foot label{display:flex;align-items:center;gap:8px;flex:1}

/* video */
.video-embed,.video-placeholder{margin:20px 0}
.video-frame{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%}
.video-cap{color:var(--muted);font-size:13px;margin-top:6px}
.video-placeholder{background:linear-gradient(150deg,var(--panel2),var(--panel));border:1px dashed #34405a;
  border-radius:var(--radius);padding:18px}
.vp-badge{display:inline-block;font-size:12px;background:var(--warn);color:#1b1200;padding:3px 9px;border-radius:20px;font-weight:700}
.vp-title{font-size:17px;font-weight:600;margin:9px 0 6px}
.vp-shoot{color:var(--ink);font-size:14px;margin-bottom:8px}
.vp-hint{color:var(--muted);font-size:12.5px}
.vp-hint code{background:#0a0d13;padding:1px 6px;border-radius:5px;border:1px solid var(--line)}
.widget-error{color:var(--warn);font-size:13px}

/* practice coach */
.pr-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0}
.pr-belt{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.pr-title{margin:6px 0 4px;font-size:22px}
.pr-goal{color:var(--muted);margin:0 0 14px}
.pr-days{display:flex;gap:8px}
.pr-day{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600}
.pr-day.done{background:var(--accent2);border-color:var(--accent2);color:#04121f}
.pr-day.today{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 2px rgba(79,156,255,.3)}
.pr-carry{margin-top:12px;padding:10px 12px;background:rgba(255,159,67,.09);border:1px solid rgba(255,159,67,.35);
  border-radius:10px;font-size:14px}
.pr-today{border-color:#31519b;background:linear-gradient(160deg,#17203a,var(--panel))}
.pr-day-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pr-day-label{font-weight:700;letter-spacing:.06em;color:var(--accent);font-size:13px}
.pr-mins{color:var(--muted);font-size:13px}
.pr-warmup{font-size:14px;color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:10px}
.pr-drill-name{margin:12px 0 6px;font-size:18px}
.pr-drill-name small{color:var(--muted);font-weight:400}
.pr-steps{margin:0;padding-left:20px}
.pr-steps li{margin:7px 0;font-size:14.5px}
.pr-lesson{font-size:13.5px;color:var(--muted)}
.pr-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.pr-eval-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pr-hint{color:var(--muted);font-size:13.5px;margin:10px 0 0}
.pr-form{margin-top:14px}
.pr-item{margin:14px 0;padding-top:12px;border-top:1px solid var(--line)}
.pr-item-label{font-size:14.5px;margin-bottom:8px}
.pr-item-label small{color:var(--muted)}
.pr-pills{display:flex;gap:8px;flex-wrap:wrap}
.pr-pill{padding:6px 13px;border-radius:20px;border:1px solid var(--line);background:var(--panel2);
  font-size:13px;cursor:pointer;color:var(--muted)}
.pr-pill input{display:none}
.pr-pill:has(input:checked){color:#04121f;font-weight:700}
.pr-pill.p2:has(input:checked){background:var(--accent2);border-color:var(--accent2)}
.pr-pill.p1:has(input:checked){background:var(--warn);border-color:var(--warn)}
.pr-pill.p0:has(input:checked){background:#ff6b6b;border-color:#ff6b6b}
.pr-bpm-in{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:9px;
  padding:8px 12px;font-size:15px;width:120px}
.pr-submit{margin-top:14px}
.pr-verdict{margin-top:14px;padding:13px 15px;border-radius:11px;font-size:14.5px;line-height:1.55}
.pr-verdict.v-pass{background:rgba(55,200,113,.1);border:1px solid rgba(55,200,113,.4)}
.pr-verdict.v-carry{background:rgba(255,159,67,.09);border:1px solid rgba(255,159,67,.4)}
.pr-verdict.v-repeat{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.4)}
.pr-call{margin-top:12px;font-size:16px;min-height:24px;color:var(--muted)}
.pr-call b{color:var(--ink)}
.pr-history{margin:18px 0 4px;font-size:13px;color:var(--muted)}
.pr-history div{padding:3px 0}
.pr-history span{color:#5d677d}
.pr-reset{text-align:right;margin-top:6px}
.pr-reset-link{font-size:12px;color:#5d677d}

/* placement */
.pr-challenge{font-size:16px;line-height:1.65;background:var(--panel2);border:1px solid var(--line);
  border-radius:11px;padding:14px 16px}

/* pocket check */
.pk .pk-what{color:var(--muted);font-size:14.5px;margin-top:0}
.pk-err{color:#ff6b6b;font-size:13px;margin-left:10px}
.pk-meter-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.pk-meter{flex:1;height:10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pk-meter-fill{height:100%;width:0;background:var(--accent2);transition:width .08s}
.pk-bpm{width:140px;accent-color:var(--accent)}
.pk-now{font-size:17px;margin-bottom:10px;min-height:24px}
.pk-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-bottom:12px}
.pk-bar{text-align:center;padding:8px 0;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600}
.pk-bar.now{border-color:var(--accent);color:var(--ink);box-shadow:0 0 0 2px rgba(79,156,255,.25)}
.pk-bar.hit{background:var(--accent2);border-color:var(--accent2);color:#04121f}
.pk-bar.miss{background:#ff6b6b;border-color:#ff6b6b;color:#2b0606}
.pk-report h3{margin:4px 0 10px}
.pk-score{margin:6px 0;font-size:14.5px}
.pk-score small{color:var(--muted)}
@media (max-width:820px){.pk-bars{grid-template-columns:repeat(6,1fr)}}

/* tools panel */
.tools-panel{position:fixed;right:16px;bottom:16px;z-index:40;width:min(340px,92vw);
  background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.5);padding:14px}
.tools-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600}
.tools-close{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
.tools-panel .w-metronome{margin:6px 0 0;border:none;background:transparent;padding:0}

/* mobile */
@media (max-width:820px){
  .nav-toggle{display:block}
  .sidebar{position:fixed;top:59px;left:0;transform:translateX(-100%);transition:.25s;z-index:25;
    background:var(--bg2);width:82vw}
  .sidebar.open{transform:none}
  .scrim.show{display:block;position:fixed;inset:59px 0 0;background:rgba(0,0,0,.5);z-index:24}
  .content{padding:22px 16px 90px}
  .lesson h1{font-size:24px}
  .st-cl{display:none}
}