/* SONYX (Fretwork Coach) — base styles, mobile first. Colors come from the tokens below; css/theme.css adds the schemes, frosted-glass surfaces, type and spacing. */
:root{
  /* Scheme 1 · Amber Stage (default). Schemes 2–4 override these in css/theme.css ([data-scheme]). */
  --bg:#0b090d; --panel:#1a1720; --panel2:#221e29; --inset:#0b0a0e; --line:#2f2a36; --text:#f2ede4; --muted:#a8a1ae;
  --accent:#f5a524; --accent-d:#d48a10; --accent-text:#ffc55c; --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --btn-top:#ffbd45; --btn-bot:#e08f12; --btn-ink:#1a1206; --success:#4fd18b; --warning:#ff7a45; --danger:#ff5a52; --meta:#c9b8f0;
  --amber:var(--accent); --amber-d:var(--accent-d); --amber-soft:var(--accent-soft); --red:var(--danger); --green:var(--success); --radius:18px;
  --head:'Space Grotesk','Arial Narrow','Helvetica Neue',sans-serif; --body:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),radial-gradient(circle at 50% -10%,#2b2129 0,var(--bg) 60%);background-attachment:fixed}
body.has-tabs .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body.has-actions .wrap{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.wrap{max-width:760px;margin:0 auto;padding:max(10px,env(safe-area-inset-top)) 16px 40px}
a{color:inherit}
.link{color:var(--accent-text);text-decoration:none;font-weight:600;font-size:14px;display:inline-block;margin-bottom:10px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:6px 0 14px}
.logo{font-family:var(--head);letter-spacing:.14em;text-transform:uppercase;font-size:17px;display:flex;align-items:center;gap:10px;text-decoration:none}
.top-settings{font-size:22px;text-decoration:none;color:var(--muted);padding:6px 10px}
.jewel{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red),inset 0 -2px 3px rgba(0,0,0,.4)}
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:.02em;line-height:1.2;margin:0 0 8px}
h1{font-size:30px}h2{font-size:24px}h3{font-size:19px}
.label{font-family:var(--head);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--amber);margin-bottom:6px}
p{margin:0 0 12px}.muted{color:var(--muted)}.small{font-size:14px}.center{text-align:center}
.ok{color:var(--green)}.bad{color:#ff8a80}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:0 0 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 26px rgba(0,0,0,.35)}
.card.center{text-align:center;padding:40px 18px}
.grille{background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 5px),linear-gradient(180deg,#2a2530,#1d1a21)}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.sec-head h3{margin:0}

/* Buttons and inputs */
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:600 16px var(--body);min-height:52px;padding:12px 18px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;user-select:none;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);border-color:var(--accent-d)}
.btn.stop{background:linear-gradient(180deg,#f0645a,#b8322a);border-color:#e2483d;color:#fff}
.btn.ghost{background:transparent}.btn.danger{color:#ff8a80}
.btn.block{width:100%;margin-top:10px}
.btn.sm{min-height:40px;padding:8px 12px;font-size:14px}
.btn[disabled]{opacity:.5;pointer-events:none}
.kbtn{min-height:50px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:600 15px var(--body);cursor:pointer}
.kbtn.sm{min-height:36px;min-width:36px;padding:0 10px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>.btn{flex:1 1 140px}
.row.nowrap{flex-wrap:nowrap}.row.nowrap input{flex:1;min-width:0}.row.nowrap .btn{flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 15px var(--body);cursor:pointer}
.chip.on{background:var(--amber-soft);border-color:var(--amber);color:var(--accent-text)}
input[type=text],input[type=number],input[type=password],input[type=date],textarea,select{width:100%;background:#0f0d11;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:13px 14px;font:16px var(--body)}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--amber)}
textarea{min-height:96px;resize:vertical}
.field{margin-top:14px}.field>label{display:block;font-weight:600;margin-bottom:8px}
label.mini{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);flex:1 1 100px}
label.mini.grow{flex:2 1 180px}
label.mini select{min-height:46px;padding:8px 10px}
.switch{display:flex;align-items:center;gap:10px;min-height:44px}
.switch input{width:22px;height:22px;accent-color:var(--amber)}
.filebtn{position:relative;overflow:hidden}.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.badge{font-size:12px;padding:3px 10px;border-radius:99px;border:1px solid var(--line);font-family:var(--body);font-weight:600;letter-spacing:0}
.badge.ok{border-color:var(--green);color:var(--green)}

.progress{height:6px;background:#0d0b0f;border-radius:99px;overflow:hidden;margin:0 0 18px;border:1px solid var(--line)}
.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-d),var(--amber));box-shadow:0 0 12px var(--amber);transition:width .25s}

/* Bars */
#actionbar,#tabbar{position:fixed;left:0;right:0;bottom:0;background:rgba(18,16,20,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:20;display:none}
#actionbar.show,#tabbar.show{display:block}
#actionbar.show~#tabbar{display:none}
#actionbar .inner,#tabbar .inner{max-width:760px;margin:0 auto;display:flex;gap:10px}
#actionbar .btn{flex:1}
#tabbar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
#tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--muted);font-size:12px;font-weight:600;padding:6px 0;border-radius:10px;min-height:52px;justify-content:center}
#tabbar a .ti{font-size:20px;line-height:1}
#tabbar a.on{color:var(--amber);background:var(--amber-soft)}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#2a2530;border:1px solid var(--amber);padding:10px 16px;border-radius:12px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center}
.toast.show{opacity:1}

/* Sheets */
.sheet-wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}
.sheet-wrap.open{opacity:1}
.sheet{position:relative;width:100%;max-width:760px;max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .2s}
.sheet-wrap.open .sheet{transform:none}
.sheet-x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:16px;cursor:pointer}

/* Image tiles (Wikipedia) */
.wimg{position:relative;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h) 45% 28%),hsl(calc(var(--h) + 40) 40% 16%));display:flex;align-items:center;justify-content:center}
.wimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.wimg.loaded img{opacity:1}
.wimg-fallback{font:600 26px var(--head);color:rgba(255,255,255,.75);letter-spacing:.05em}
.wimg.round{border-radius:50%}
.wimg.sm{width:56px;height:56px;flex:none}.wimg.sm .wimg-fallback{font-size:18px}
.wimg.cover{width:120px;height:120px;border-radius:8px;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.wimg.thumb{width:62px;height:62px;border-radius:10px;flex:none}.wimg.thumb .wimg-fallback{font-size:18px}
.wimg.banner{height:140px;border-radius:10px;margin:-4px -4px 14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tiles.small{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.tiles.players{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
.tile{position:relative;border:2px solid var(--line);background:var(--panel);border-radius:14px;padding:0 0 10px;color:var(--text);cursor:pointer;text-align:left;overflow:hidden;display:flex;flex-direction:column;font-family:var(--body)}
.tile .wimg{aspect-ratio:4/3;width:100%}
.tiles.players .tile{align-items:center;text-align:center;padding:12px 8px}
.tiles.players .tile .wimg{width:84px;height:84px;aspect-ratio:auto}
.tile-name{font-weight:600;font-size:15px;padding:8px 10px 0;line-height:1.25}
.tile-sub{font-size:12px;color:var(--muted);padding:2px 10px 0;line-height:1.3}
.tiles.players .tile-name,.tiles.players .tile-sub{padding-left:2px;padding-right:2px}
.tile .tick{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:var(--amber);color:var(--btn-ink);font-weight:700;display:none;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.tile.on{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.tile.on .tick{display:flex}
.tiles.small .tile-name{font-size:13px}
.pcards,.idresults{display:grid;gap:10px;margin-top:10px}
.pcard{display:flex;gap:12px;align-items:center;background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:10px}
.pcard.miss{border-style:dashed}
.pbody{flex:1;min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tags span{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:#d9d2c5}

/* Questionnaire bits */
.topic{padding:12px 0;border-bottom:1px solid var(--line)}.topic:last-child{border:0}
.topic .t{font-weight:600}.topic .d{color:var(--muted);font-size:13px;margin-bottom:8px}
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.seg.s3{grid-template-columns:repeat(3,1fr)}
.seg button{min-height:46px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 13px var(--body);cursor:pointer;padding:4px}
.seg button.on{background:var(--amber-soft);border-color:var(--amber);color:var(--accent-text)}
.quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.stepper{display:grid;grid-template-columns:52px 52px 1fr 52px 52px;gap:6px;align-items:stretch}
.stepper.s1{grid-template-columns:60px 1fr 60px}
.stepper button{min-height:56px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font:600 18px var(--body);cursor:pointer}
.stepper input{text-align:center;font:600 26px var(--head);padding:6px}
.unit{text-align:center;color:var(--muted);font-size:13px;margin-top:6px}
ul.steps{padding-left:20px;margin:0 0 14px}ul.steps li{margin:4px 0}

/* Metronome */
.metro{background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:14px;margin:14px 0}
.card>.metro:first-child{margin-top:0}
.beats{display:flex;gap:10px;justify-content:center;margin-bottom:10px}
.beats i{width:20px;height:20px;border-radius:50%;background:#2a252e;border:1px solid #3d3742;transition:background .04s}
.beats i.on{background:var(--amber);box-shadow:0 0 14px var(--amber)}
.beats i.on.acc{background:#ffe0a0;box-shadow:0 0 18px #ffd27a}
.beats i.on.silent{background:#4b3d24;box-shadow:none}
.bpmrow{display:grid;grid-template-columns:50px 50px 1fr 50px 50px;gap:6px;align-items:center}
.bpm{text-align:center;line-height:1}.bpm b{font:600 42px var(--head);display:block;transition:color .2s}.bpm span{font-size:11px;letter-spacing:.2em;color:var(--muted)}
.bpm b.goal-hit{color:var(--green)}
input[type=range]{width:100%;accent-color:var(--amber);height:34px;margin:6px 0}
.metro .row{margin-top:6px}
.metro-opts{margin-top:10px}
.backing{font-size:13px;color:var(--accent-text);text-align:center;margin-top:8px}
.timer{text-align:center;margin:14px 0;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--inset)}
.timer .time{font:600 60px var(--head);font-variant-numeric:tabular-nums;line-height:1}
.timer .time.live{color:var(--amber);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 50%,transparent)}
.timer .status{color:var(--muted);font-size:13px;margin:6px 0 4px}

/* Assessment */
pre.tab{background:#0b0a0d;border:1px solid var(--line);border-radius:10px;padding:12px;overflow-x:auto;font:14px/1.35 var(--mono);color:#f3e6c4;margin:10px 0}
.diagrams{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.diagrams svg{width:100px;height:auto}
.pattern{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;text-align:center;margin:10px 0;font-family:var(--mono)}
.pattern span{color:var(--muted);font-size:13px}.pattern b{font:600 20px var(--head);color:var(--amber);min-height:28px}
.instr{background:rgba(255,255,255,.03);border-left:3px solid var(--amber);padding:10px 12px;border-radius:0 10px 10px 0;margin:10px 0}
.why{color:var(--muted);font-size:14px}
.watch{font-size:14px;color:#ffb3ad;margin-top:8px}
.rubric{display:grid;gap:8px;margin-top:8px}
.rubric button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:54px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 15px var(--body);cursor:pointer}
.rubric .n{font:600 22px var(--head);width:28px;color:var(--amber);flex:none}
.rubric button.on{border-color:var(--amber);background:var(--amber-soft)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.opts.one{grid-template-columns:1fr}
.opt{min-height:62px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 16px var(--body);cursor:pointer}
.opt.right{border-color:var(--green);background:rgba(92,196,107,.17)}.opt.wrong{border-color:var(--red);background:rgba(226,72,61,.17)}
.qhead{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:6px}
.qtext{font-size:19px;font-weight:600;margin:6px 0 4px}
.playbig{width:100%;min-height:70px;font-size:18px;margin-top:10px}
.verdict.pass{border-color:rgba(92,196,107,.7)}.verdict.edge{border-color:color-mix(in srgb,var(--accent) 80%,transparent)}.verdict.fail{border-color:rgba(226,72,61,.7)}
.bigres{font:600 32px var(--head);margin:4px 0}
.hist{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.hist span{font-size:12px;padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--panel)}
.hist .pass{border-color:var(--green)}.hist .edge{border-color:var(--amber)}.hist .fail{border-color:var(--red)}
.song{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--panel)}
.song .top{display:flex;gap:8px}.song .top input{flex:1}

/* Levels and profile */
.lv{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;margin:9px 0;font-size:14px}
.lv b{font:600 18px var(--head);text-align:right}
.bar{height:10px;background:#0d0b0f;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-d),var(--amber))}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:12px}
.kpi .k{font-family:var(--head);text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted)}
.kpi .v{font:600 17px var(--head);margin-top:4px}
.edgelist .e{padding:10px 0;border-bottom:1px solid var(--line)}.edgelist .e:last-child{border:0}
.edgelist .h{display:flex;justify-content:space-between;font-weight:600}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);margin-left:6px;font-weight:500}
pre.profile{white-space:pre-wrap;word-break:break-word;background:#0b0a0d;border:1px solid var(--line);border-radius:10px;padding:14px;font:13px/1.5 var(--mono);max-height:420px;overflow:auto}
.radar{width:100%;max-width:400px;display:block;margin:0 auto}

/* Dashboard */
.dash-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.dash-head h1{margin:0}
.streak-badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);flex:none}
.streak-badge b{font:600 30px var(--head);line-height:1}
.streak-badge span{font-size:11px;line-height:1.2;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.streak-badge.hot{border-color:var(--amber);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 25%,transparent)}
.streak-badge.hot b{color:var(--amber)}
.session.live{border-color:var(--amber)}
.live-clock{font:600 56px var(--head);font-variant-numeric:tabular-nums;color:var(--amber);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent);line-height:1.1;margin:4px 0 6px}
.session .chips{margin:6px 0 2px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.stat{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:12px}
.stat .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-family:var(--head)}
.stat .v{font:600 22px var(--head);margin-top:2px}
.stat.ok{border-color:rgba(92,196,107,.6)}.stat.ok .v{color:var(--green)}
.course{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--inset);margin-top:10px;text-decoration:none}
.cbody{flex:1;min-width:0}.cbody b{display:block;font-size:16px}
.cprog{display:flex;align-items:center;gap:10px;margin-top:6px}.cprog .bar{flex:1}.cprog span{font:600 14px var(--head);min-width:38px;text-align:right}
.cprog.big .bar{height:14px}
.album{display:flex;gap:14px;align-items:flex-start}
.album-body{min-width:0}.album h3{margin-bottom:2px}
.album .reason{color:var(--accent-text)}
.cal-title{font-weight:600;margin-bottom:8px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;text-align:center}
.cal .cw{font-size:11px;color:var(--muted);font-weight:600}
.cal .cd{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:13px;background:var(--inset);border:1px solid transparent;color:var(--muted)}
.cal .cd.empty{background:none}
.cal .cd.some{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--text)}
.cal .cd.done{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);font-weight:700}
.cal .cd.today{border-color:var(--text)}
.cal .cd.future{opacity:.45}
.calnav{display:flex;gap:6px}
.cal-foot{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-top:10px;align-items:center}
.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.dot.done{background:var(--amber)}.dot.some{background:color-mix(in srgb,var(--accent) 30%,transparent)}
.logrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.logrow:last-child{border:0}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--amber);animation:spin 1s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Tools */
.segtabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:14px}
.segtabs a{text-align:center;padding:12px 6px;border-radius:9px;text-decoration:none;font-weight:600;color:var(--muted)}
.segtabs a.on{background:var(--panel2);color:var(--amber);box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.exrow{display:flex;align-items:center;gap:12px;text-decoration:none;padding:14px}
.exrow>div{flex:1;min-width:0}
.chev{font-size:24px;color:var(--muted)}

/* Tuner */
.tuner{text-align:center;transition:border-color .2s,box-shadow .2s}
.tuner.intune{border-color:var(--green);box-shadow:0 0 0 3px rgba(92,196,107,.2),0 10px 26px rgba(0,0,0,.35)}
.tuner-note{font:600 72px var(--head);line-height:1;margin-top:4px}
.tuner-note small{font-size:24px;color:var(--muted);margin-left:4px}
.tuner.intune .tuner-note{color:var(--green)}
.gauge{width:100%;max-width:360px;display:block;margin:4px auto 0}
.strobe{height:22px;margin:4px auto 10px;max-width:360px;border-radius:6px;border:1px solid var(--line);background-color:var(--inset);background-image:repeating-linear-gradient(90deg,var(--amber) 0 10px,transparent 10px 20px);opacity:.85}
.tuner.intune .strobe{background-image:repeating-linear-gradient(90deg,var(--green) 0 10px,transparent 10px 20px)}
.tuner-read{display:flex;justify-content:center;gap:16px;font:600 16px var(--mono);color:var(--muted);flex-wrap:wrap}
.tuner-read span:first-child{color:var(--text)}
.tuner-status{font-weight:600;margin:10px 0 0;min-height:24px}
.tuner-status.ok{color:var(--green)}.tuner-status.near{color:var(--amber)}.tuner-status.off{color:#ffb3ad}
.strings{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
.a4{display:flex;align-items:center;gap:8px}.a4 b{font:600 18px var(--head);min-width:36px;text-align:center;color:var(--text)}

/* Tab player */
.tp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tp-goal{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--inset);flex:none}
.tp-goal span{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.tp-goal b{font:600 26px var(--head);color:var(--green);line-height:1.1}
.tp-view{position:relative;background:#0b0a0d;border:1px solid var(--line);border-radius:12px;margin:10px 0 6px;overflow:hidden}
.tp-view.scroll{height:150px}
.tp-view.static{padding:6px 0}
.tp-track{will-change:transform}
.tp-view.scroll .tp-track{display:flex;position:absolute;top:8px;left:0}
.tp-playline{position:absolute;top:0;bottom:0;left:30%;width:2px;background:var(--amber);box-shadow:0 0 10px var(--amber);pointer-events:none}
.tab-sys{padding:4px 6px;overflow-x:auto}
.tp-view.static .tab-sys{opacity:.75}.tp-view.static .tab-sys.active{opacity:1}
.tabsvg{display:block}
.tab-sname{font:600 11px var(--mono);fill:var(--muted)}
.tab-line{stroke:#4a4350;stroke-width:1}
.tab-bar{stroke:#6a6170;stroke-width:1.5}
.tab-count{font:10px var(--mono);fill:#5d5662}
.tab-note rect{fill:#0b0a0d}
.tab-note text{font:600 13px var(--mono);fill:#f3e6c4;text-anchor:middle}
.tab-note.on rect{fill:var(--amber)}
.tab-note.on text{fill:var(--btn-ink)}
.tab-tech{font:600 10px var(--mono);fill:var(--accent-text);text-anchor:middle}
.tab-head{stroke:var(--amber);stroke-width:2}
.tp-progress{height:4px;background:var(--inset);border-radius:4px;overflow:hidden;margin-bottom:10px}
.tp-progress i{display:block;height:100%;background:var(--amber);width:0}
.tp-meter{text-align:center;font-size:13px;color:var(--muted);min-height:20px;margin:2px 0 6px}
.toggles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tgl{min-height:42px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 14px var(--body);cursor:pointer}
.tgl.on{border-color:var(--amber);color:var(--accent-text);background:var(--amber-soft)}
.tgl.on::before{content:'✓ '}

/* Course */
.course-hero h1{margin-top:4px}

@media(max-width:560px){
  h1{font-size:26px}
  .kpis{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .opts{grid-template-columns:1fr}
  .stepper{grid-template-columns:46px 46px 1fr 46px 46px}
  .bpmrow{grid-template-columns:44px 44px 1fr 44px 44px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tiles.players{grid-template-columns:repeat(3,1fr)}
  .tiles.small{grid-template-columns:repeat(3,1fr)}
  .tiles.players .tile .wimg{width:64px;height:64px}
  .wimg.cover{width:96px;height:96px}
  .tuner-note{font-size:60px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Phase B: routines ---------- */
.tmode{margin-bottom:12px}
.hm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm .stepper{margin-top:4px}
input[type=time]{width:100%;background:#0f0d11;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:13px 14px;font:600 22px var(--body);margin-top:4px;color-scheme:dark}
.coach{background:color-mix(in srgb,var(--accent) 8%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:12px;padding:10px 12px;margin:10px 0}
.planrow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.planrow:last-child{border:0}
.pblock{font:600 10px var(--head);text-transform:uppercase;letter-spacing:.12em;padding:4px 8px;border-radius:6px;background:var(--inset);border-left:3px solid var(--bc);color:var(--muted);width:92px;text-align:left}
.pname{display:flex;flex-direction:column;min-width:0}
.pmin{font:600 18px var(--head)}
.b-warmup{--bc:#7aa7d6}.b-review{--bc:#a98be0}.b-stretch{--bc:var(--amber)}.b-theory{--bc:#5cc4b4}.b-music{--bc:#e2708a}
.run-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.pace{font-size:13px;font-weight:600;padding:6px 10px;border-radius:99px;border:1px solid var(--line);white-space:nowrap}
.pace.ok,.pace.ahead{border-color:var(--green);color:var(--green)}
.pace.behind{border-color:var(--red);color:#ff8a80}
.pace.open{color:var(--muted)}
.run-steps{display:flex;gap:3px;margin-bottom:12px}
.run-steps i{height:6px;border-radius:3px;background:var(--line);min-width:6px}
.run-steps i.done{background:var(--bc);opacity:.55}
.run-steps i.cur{background:var(--bc);box-shadow:0 0 8px var(--bc)}
.runcard{transition:border-color .3s}
.runcard.timeup{border-color:var(--amber);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 25%,transparent),0 10px 26px rgba(0,0,0,.35)}}
.countdown{text-align:center;margin-bottom:8px}
.cd-time{font:600 64px var(--head);font-variant-numeric:tabular-nums;line-height:1;color:var(--amber);text-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.timeup .cd-time{color:var(--accent-text)}
.cd-sub{font-size:13px;color:var(--muted)}
.tempo-row{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:var(--muted);margin:4px 0 6px}
.tempo-row b{color:var(--text);font:600 18px var(--head)}
.tempo-row b.goal{color:var(--green)}
.bar.thin{height:6px;margin:4px 0 10px}
.note{font-size:14px;margin:6px 0;color:#c9b8f0}
.note.warn{color:#ffb3ad}
.run-ctrl{margin-bottom:14px}
.run-ctrl .btn{flex:1 1 100px}
.result-step{background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}
.result-step h3{margin-bottom:10px}
.resrow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.resrow:last-child{border:0}
.ri{font-size:18px;text-align:center}
.rt{font:600 16px var(--head);white-space:nowrap}
.routine-cta{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.routine-cta.live{border-color:var(--amber)}
.badge.warn{border-color:var(--red);color:#ff8a80}

/* ---------- Phase B: progress tree ---------- */
.tree .unit{position:relative;padding-left:18px;margin-top:18px}
.tree .unit::before{content:'';position:absolute;left:13px;top:34px;bottom:-14px;width:2px;background:var(--line)}
.tree .unit:last-child::before{display:none}
.unit-head{display:flex;gap:12px;align-items:flex-start;margin-left:-18px;margin-bottom:8px}
.unum{width:28px;height:28px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font:600 14px var(--head);flex:none}
.nodes{display:grid;gap:8px;padding-left:18px}
.node{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;width:100%;min-height:62px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:500 15px var(--body);cursor:pointer;position:relative}
.node::before{content:'';position:absolute;left:-18px;top:50%;width:14px;height:2px;background:var(--line)}
.nic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--panel2);border:2px solid var(--line)}
.nbody{display:flex;flex-direction:column;min-width:0}
.nlbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.node.locked{opacity:.55}
.node.available .nic{border-color:var(--amber);color:var(--amber)}
.node.in_progress{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.node.in_progress .nic{border-color:var(--amber);background:linear-gradient(90deg,var(--amber) 50%,var(--panel2) 50%);color:var(--btn-ink)}
.node.mastered .nic{border-color:var(--green);background:var(--green);color:#0d1a0f}
.node.mastered .nlbl{color:var(--green)}
.due{color:var(--amber);font-weight:600}
.exsheet{padding:12px 0;border-bottom:1px solid var(--line)}
.exsheet:last-of-type{border:0}
.spark{display:flex;align-items:flex-end;gap:3px;height:40px;margin-top:6px}
.spark i{flex:1;background:#4b3d24;border-radius:2px 2px 0 0}
.spark i.c{background:var(--amber)}
@media(max-width:560px){.pblock{width:74px;font-size:9px}.cd-time{font-size:56px}#tabbar a{font-size:11px}}

/* ---------- Calibration, ladders, reassessment ---------- */
.ladder{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 8px}
.ladder i{color:var(--muted);font-style:normal}
.rung{font:600 14px var(--head);padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.rung.start{border-color:var(--amber)}
.rung.on{background:var(--amber-soft);border-color:var(--amber);color:var(--accent-text)}
.ramp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.levelup{border-color:rgba(92,196,107,.6)}
.lvchg{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}
.lvchg:last-of-type{border:0}
.lesson{margin-top:4px;color:#b9e3be}
.nudge{display:flex;gap:12px;align-items:center;justify-content:space-between;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.rarow{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;min-height:64px;padding:10px 12px;margin:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:500 15px var(--body);cursor:pointer}
.rarow.on{border-color:var(--amber);background:var(--amber-soft)}
.rcheck{width:26px;height:26px;border-radius:7px;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--btn-ink);font-weight:700}
.rarow.on .rcheck{background:var(--amber);border-color:var(--amber)}
.rbody{display:flex;flex-direction:column;min-width:0}
.rstat{text-align:right;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rstat b{font:600 20px var(--head);color:var(--text);letter-spacing:0}
.rstat.estimated{color:#ffb3ad}.rstat.higher{color:var(--accent-text)}.rstat.placed{color:var(--green)}

/* ---------- Phase C: evaluation ---------- */
.segtabs.two{grid-template-columns:1fr 1fr}
.segtabs.four{grid-template-columns:repeat(4,1fr)}
.segtabs.four a{font-size:14px;padding:12px 2px}
.evbtn{margin-top:12px}
.evsetup h3{margin-top:4px}
.evpick,.evhist{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;min-height:58px;padding:10px 12px;margin:6px 0;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:500 15px var(--body);cursor:pointer;text-decoration:none}
.evpick>span:first-child,.evhist>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.evhist .score{font:600 22px var(--head);width:44px;text-align:center;color:var(--amber)}
.evhist .score.ok{color:var(--green)}
.evrun{display:grid;gap:10px}
.camwrap{position:relative;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:16/9}
.camwrap video{width:100%;height:100%;object-fit:cover;display:block}
.camwrap video.mirror{transform:scaleX(-1)}
.camguide{position:absolute;inset:8%;border:2px dashed rgba(255,255,255,.45);border-radius:10px;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.camguide span{background:rgba(0,0,0,.55);font-size:12px;padding:3px 8px;border-radius:6px;margin-bottom:6px}
.evstatus{display:flex;align-items:center;gap:10px}
.recdot{width:12px;height:12px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:pulse 1.2s infinite}
.meter{height:10px;border-radius:6px;background:var(--inset);border:1px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--amber),var(--red));transition:width .1s}
.evclick{text-align:center;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--inset)}
.evclick .big{font:600 36px var(--head)}
.pad{padding:30px 10px}
.spinner.sm{width:16px;height:16px;border-width:3px;display:inline-block;vertical-align:-3px;margin:0 6px 0 0}
.scorehead{display:flex;gap:16px;align-items:center;margin-bottom:12px}
.ring{--p:0;width:86px;height:86px;border-radius:50%;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(closest-side,var(--panel) 78%,transparent 80% 100%),conic-gradient(var(--rc) calc(var(--p)*1%),var(--line) 0)}
.ring b{font:600 28px var(--head);line-height:1}.ring span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.ring.ok{--rc:var(--green)}.ring.mid{--rc:var(--amber)}.ring.low{--rc:var(--red)}
.evres .stats{grid-template-columns:repeat(3,1fr)}
.timeline{width:100%;height:auto;display:block;background:var(--inset);border:1px solid var(--line);border-radius:10px;margin-top:6px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:6px 0 10px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
.fbblock{margin-top:14px}
.fbrow{padding:4px 0;font-size:14px}
.fbrow.ok{color:#b9e3be}
.issue{padding:10px 12px;border-radius:10px;background:var(--inset);border-left:3px solid var(--amber);margin:8px 0}
.issue.high{border-left-color:var(--red)}.issue.low{border-left-color:var(--muted)}
.issue .fix{color:var(--accent-text);margin-top:4px}
.rxrow{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.rxrow input{width:22px;height:22px;accent-color:var(--amber);flex:none;margin-top:2px}
.frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.frames figure{margin:0;background:var(--inset);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.frames img{width:100%;display:block}
.frames figcaption{font-size:12px;padding:6px}
.playback{width:100%;border-radius:10px;margin-top:8px;background:#000}
details summary{cursor:pointer}
@media(max-width:560px){.evres .stats{grid-template-columns:repeat(2,1fr)}.segtabs.four a{font-size:12px}}

/* ---------- Audio input setup ---------- */
.inputline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--inset);margin-top:10px}
.inputline span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dualmeter{display:grid;gap:8px}
.dualmeter>div{display:grid;grid-template-columns:62px 1fr 56px;align-items:center;gap:8px;font-size:13px}
.dualmeter .meter{height:14px}
.dualmeter b{font:600 13px var(--mono);text-align:right}

/* ---------------------------- Phase D: practice ask box ---------------------------- */
.sechead{font-size:20px;margin:18px 0 10px}
.askcard{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.askbox{display:flex;gap:10px;align-items:stretch;background:var(--inset);border:1px solid var(--line);border-radius:16px;padding:8px}
.askbox textarea{min-height:52px;border:0;background:transparent;padding:8px 6px;resize:none;flex:1}
.askbox textarea:focus{outline:none}
.askbox:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.askbox .btn{flex:none;align-self:flex-end}
.askchips{margin-top:10px}
.chip.sm{min-height:36px;padding:6px 12px;font-size:13px}
.askresult{margin-top:12px}
.askex{border:1px solid var(--line);border-left:4px solid var(--bc,var(--amber));border-radius:12px;padding:12px;margin:10px 0;background:rgba(255,255,255,.02)}
.askex-h{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.askex-h .pblock{width:auto}
.askex .instr{margin:8px 0}
.askex-act{margin-top:10px}.askex-act .btn{flex:0 1 auto}
.askreq{margin:-6px 0 10px 6px}
.savedhead{margin-top:12px}
pre.tab.small{font-size:12px;padding:10px}

/* ------------------------------- Phase D: songs ------------------------------- */
.addsong{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.songlist,.reclist{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.songrow{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.songrow:last-child{border:0}
.sr-main{display:flex;flex-direction:column;flex:1;min-width:0}
.sr-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--muted);font-size:24px}
.reccard{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.reccard:last-child{border:0}
.rc-main p{margin:6px 0}
.badge.diff.d1{border-color:var(--green);color:var(--green)}.badge.diff.d2{border-color:var(--amber);color:var(--accent-text)}.badge.diff.d3{border-color:var(--red);color:#ff8a80}
.badge.fit{color:#c9b8f0;border-color:#6d5a9c}
.techs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.techs span{font-size:12px;padding:3px 9px;border-radius:99px;background:var(--inset);border:1px solid var(--line);color:var(--muted)}
.chipselect{width:auto;min-height:36px;padding:6px 10px;font-size:13px;border-radius:999px}
.songhead .songtop{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.songhead h1{font-size:26px;margin:0 0 2px}
.songfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.segtabs.status a{font-size:13px;padding:10px 2px}
.tempofield .stepper{max-width:360px}
.tabimport textarea{font:13px/1.35 var(--mono);min-height:150px;white-space:pre;overflow-x:auto}
.findtabs{align-items:center;margin:8px 0}.findtabs .btn{flex:0 0 auto}
.tabopts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.tabopts select{margin-top:4px}
.bargrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:10px 0}
.bargrid .bar{min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:600 14px var(--body);cursor:pointer}
.bargrid .bar.practiced{border-color:var(--amber-d)}
.bargrid .bar.mastered{border-color:var(--green);color:var(--green)}
.bargrid .bar.sel{background:var(--amber);border-color:var(--amber);color:var(--btn-ink)}
.selbar{background:var(--amber-soft);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;padding:10px 12px;margin:8px 0}
.selbar .row{margin-top:8px}.selbar .row .btn{flex:1 1 auto}
.secrow{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.secrow:last-child{border:0}
.secrow>span.small.muted{flex:1}
.linkbtn{background:none;border:0;color:var(--text);text-align:left;font:inherit;cursor:pointer;padding:0;flex:1}
.lessonplan{margin-top:10px}
@media(max-width:560px){.addsong{grid-template-columns:1fr}.reccard{grid-template-columns:auto 1fr}.reccard>.btn{grid-column:1/-1}.askbox{flex-direction:column}.askbox .btn{align-self:stretch}.segtabs.status a{font-size:11px}}
.stepper.s1{grid-template-columns:44px minmax(48px,1fr) 44px}
.stepper.s1 input{padding:4px 0;min-width:0;font-size:22px}
.askresult .row .btn.primary{flex:2 1 220px}

/* ------------------------------ Picking directions ------------------------------ */
.tp-view.scroll.picks{height:170px}
.tab-pick{fill:none;stroke:#d8cfbf;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.tab-pick.on{stroke:var(--amber);stroke-width:2.4}
.tab-finger{font:italic 600 12px var(--body);fill:#d8cfbf;text-anchor:middle}
.tab-finger.on{fill:var(--amber)}
.pickrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-top:10px}
.pickrow label.mini{flex:0 0 220px}
.pickrow select{margin-top:4px;padding:10px 12px}
.pickkey{display:flex;gap:12px;flex-wrap:wrap;align-items:center;flex:1 1 220px;padding-bottom:6px}
.pickkey svg{vertical-align:-2px;margin-right:2px}

/* ------------------------------- Chord glossary ------------------------------- */
.segtabs.five{grid-template-columns:repeat(5,1fr)}
.segtabs.five a{font-size:14px;padding:12px 2px}
.rootpick{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:4px 0 12px}
.rootbtn{min-height:42px;border-radius:10px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:600 15px var(--body);cursor:pointer;padding:0}
.rootbtn.on{background:var(--amber);border-color:var(--amber);color:var(--btn-ink)}
.typepick select{margin-top:4px}
.chordhead{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:14px 0 12px}
.chordhead h2{font-size:32px;margin:0}
.tones{display:flex;gap:6px;flex-wrap:wrap}
.tone{display:flex;flex-direction:column;align-items:center;min-width:44px;padding:5px 8px;border-radius:10px;background:var(--inset);border:1px solid var(--line);border-top:3px solid var(--fc)}
.tone b{font-size:16px}.tone i{font-style:normal;font-size:12px;color:var(--muted)}
.gviews{margin-top:4px}
.fbwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,#2a1d14,#1f160f);border:1px solid #3b2a1c;border-radius:12px;padding:6px 4px;margin:6px 0}
.fboard{display:block}
.fb-fret{stroke:#9a8f80;stroke-width:1.6}
.fb-nut{stroke:#efe7d6;stroke-width:5}
.fb-str{stroke:#d6c9b3;opacity:.85}
.fb-inlay{fill:#4c3a2a}
.fb-num{font:10px var(--mono);fill:#8d7d6a}.fb-num.em{fill:#d6c9b3}
.fb-sname{font:600 11px var(--mono);fill:#a39888}
.fb-x{font:600 15px var(--body);fill:#ff8a80}
.fb-mark circle{stroke:#120d09;stroke-width:1.5}
.fb-mark text{font:700 11px var(--body);fill:#120d09;pointer-events:none}
.fb-mark text.sm{font-size:9px}
.fb-mark.ghost{opacity:.55}
.fb-hit{fill:transparent;cursor:pointer}
.fb-hit:hover{fill:color-mix(in srgb,var(--accent) 12%,transparent)}
.fboard.interactive .fb-mark{pointer-events:none}
.fam-root{--fc:#f5a524;fill:#f5a524}.fam-third{--fc:#5cc4b4;fill:#5cc4b4}.fam-fifth{--fc:#7aa7d6;fill:#7aa7d6}.fam-seventh{--fc:#b593ec;fill:#b593ec}
.fam-sixth{--fc:#e0a96d;fill:#e0a96d}.fam-sus{--fc:#c9d36a;fill:#c9d36a}.fam-ext{--fc:#ec7f9b;fill:#ec7f9b}
.fblegend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--muted);margin:6px 0 10px}
.fblegend>span{display:inline-flex;align-items:center;gap:5px}
.fblegend i{width:12px;height:12px;border-radius:50%;background:var(--fc);display:inline-block}
.labmodes{margin-left:auto;display:flex;gap:6px}
.vinfo{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 10px}
.vinfo>b{font-size:18px}
.vinfo .btn{flex:0 0 auto}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-top:8px}
.vcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px 8px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);cursor:pointer;font:inherit}
.vcard.on{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.cdiag{width:100%;max-width:120px;height:auto}
.cd-name{font:600 13px var(--head);fill:var(--text)}
.cd-str{stroke:#8d867c;stroke-width:1}
.cd-fret{stroke:#8d867c;stroke-width:1}.cd-fret.nut{stroke:#ece6da;stroke-width:4}
.cd-base{font:10px var(--body);fill:#a39d93}
.cd-x{font:12px var(--body);fill:#a39d93}
.cd-open{fill:none!important;stroke:var(--fc);stroke-width:1.8}
.cd-olab{font:600 8px var(--body);fill:#a39d93}
.cd-dot{stroke:#120d09;stroke-width:1}
.cd-lab{font:700 8.5px var(--body);fill:#120d09}.cd-lab.sm{font-size:7px}
.cd-barre{fill:color-mix(in srgb,var(--accent) 35%,transparent)}
.diagrams .cdiag{width:110px}
.buildres{background:var(--inset);border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px}
.bname{font:600 34px var(--head);color:var(--accent-text)}
.buildres .row{margin-top:10px}.buildres .row .btn{flex:0 0 auto}
@media(max-width:560px){.rootpick{grid-template-columns:repeat(6,1fr)}.segtabs.five a{font-size:11px;padding:11px 1px}.chordhead h2{font-size:26px}.labmodes{margin-left:0}}
.fb-x,.fb-num,.fb-sname,.fb-inlay,.fb-str,.fb-fret,.fb-nut{pointer-events:none}
/* Track of the Day */
input[type=url]{width:100%;background:#0f0d11;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:11px 12px;font:15px var(--body)}
.card.track{padding:0;overflow:hidden}
.track-media{position:relative;background:#000}
.track-poster{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;background:#0b0a0c;cursor:pointer;overflow:hidden;color:inherit}
.track-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.track-poster.none{cursor:default}
.track-poster .wimg.poster{position:absolute;inset:0;width:100%;height:100%}
.track-poster .wimg.poster .wimg-fallback{font-size:56px}
.track-poster::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.55));pointer-events:none}
.playbig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:linear-gradient(180deg,var(--btn-top),var(--btn-bot));color:var(--btn-ink);font-size:30px;display:flex;align-items:center;justify-content:center;padding-left:6px;box-shadow:0 8px 26px rgba(0,0,0,.55);z-index:1;transition:transform .15s}
.track-poster:hover .playbig{transform:translate(-50%,-50%) scale(1.06)}
.tp-status{position:absolute;left:12px;bottom:10px;z-index:1;font-size:13px;color:#fff;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:999px}
.yt-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-frame iframe,.yt-frame .yt-target{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px}
.track-body{padding:16px 18px 18px}
.track-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.track-top .label{margin:0}
.pill{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.track h3{margin:8px 0 2px;font-size:23px}
.track .listen{margin:12px 0 6px}.track .ear{margin:0 0 6px}
.track .listen b,.track .ear b{color:var(--accent-text);font-weight:600}
.track .reason{color:var(--muted);font-style:italic;margin-bottom:4px}
.track-actions{margin-top:12px}.track-actions>.btn{flex:0 1 auto}
.tstatus{margin:10px 0 4px}
.track .link{margin:0;font-size:inherit}
.fixvid{margin-top:4px;font-size:14px}.fixvid summary{color:var(--muted)}
.fixvid .row{margin:10px 0 8px}
.textbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent-text);cursor:pointer;text-decoration:underline}
.skel{color:var(--muted)}
.ytkey-help ol{margin:8px 0 0;padding-left:20px}.ytkey-help li{margin-bottom:4px}
.ytkey-help .link{margin:0;font-size:inherit}.ytkey-help code{font-size:13px;word-break:break-all}
@media(min-width:700px){
  .card.track{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
  .track-media{align-self:stretch;display:flex;align-items:center;background:#0b0a0c}
  .track-media>*{width:100%}
  .track-body{padding:16px 18px 16px 4px}
  .track-body{padding-left:18px}
}
/* Profile import */
.impblock .filebtn{margin-top:10px}
.pasteimp{margin-top:10px;font-size:14px}.pasteimp summary{color:var(--muted)}
.pasteimp textarea{margin:8px 0 0;font:13px var(--mono);min-height:110px}
.imp-status{margin:8px 0 0;white-space:pre-line}.imp-status:empty{display:none}
/* Exercise library (Practice tab) */
.libhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}
.libhead .sechead{margin-bottom:6px}
input[type=search].libsearch{width:100%;background:#0f0d11;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 14px;font:16px var(--body);margin:4px 0 10px;-webkit-appearance:none;appearance:none}
input[type=search].libsearch:focus{outline:2px solid color-mix(in srgb,var(--accent) 50%,transparent);border-color:var(--amber)}
.libcats{margin-bottom:6px}
.libcat{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
.libcat h3{margin:0;font-size:18px}
.liblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.librow{display:flex;align-items:center;gap:10px;text-decoration:none;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:64px}
.librow:hover{border-color:#4a4251}
.lrmain{flex:1;min-width:0}.lrmain b{display:block;line-height:1.3}
/* Variations */
.varchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.varchip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 14px var(--body);cursor:pointer;text-align:left}
.varchip .vlv{font:600 11px var(--mono);color:var(--muted);background:var(--inset);border-radius:6px;padding:2px 5px}
.varchip.on{background:var(--amber-soft);border-color:var(--amber);color:var(--accent-text)}
.varchip.on .vlv{color:var(--accent-text)}
.varchip.edge{border-style:dashed;border-color:#8a7bb8}
.varchip .vm{font-style:normal;color:var(--muted)}.varchip .vm.ok{color:var(--green)}
.varchip .vedge{font-size:11px;color:#c9b8f0}
.varnote{margin:8px 0 0;font-size:14px;color:var(--muted)}.varnote b{color:var(--text)}
.varrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 2px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--inset)}
.varrow .vtxt{font-size:14px;color:#c9b8f0;min-width:0}
.varrow .btn{flex:none}
.varmini{font-size:13px;color:var(--muted);margin:6px 0 4px;line-height:1.5}
.varmini span.ok{color:var(--green)}
.loghist{margin-top:10px}
/* Dashboard routine builder */
.routine-cta.builder .field{margin-top:10px}
.routine-cta.builder .field>label{font-size:14px;color:var(--muted)}
.planbox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* Quick tuner button + sheet */
.tunefab{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 11px;border-radius:999px;border:1px solid #4a4251;background:rgba(36,33,42,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);font:600 14px var(--body);box-shadow:0 8px 22px rgba(0,0,0,.45);cursor:pointer}
.tunefab svg{color:var(--amber)}
.tunefab:active{transform:translateY(1px)}
body.has-tabs .tunefab{bottom:calc(80px + env(safe-area-inset-bottom))}
body.has-actions .tunefab{bottom:calc(88px + env(safe-area-inset-bottom))}
body.tuning .tunefab{border-color:var(--amber);background:var(--amber-soft)}
.qtsheet .qt-head h2{margin:0 0 6px}
.tuner.mini{text-align:center}
.tuner.mini .tmini-top{display:flex;align-items:center;justify-content:center;gap:18px}
.tuner.mini .tuner-note{font-size:56px;margin:0}
.tuner.mini .tmini-read{display:flex;flex-direction:column;align-items:flex-start;font:600 14px var(--mono);color:var(--muted)}
.tuner.mini .tmini-read span:first-child{color:var(--text);font-size:18px}
.tuner.mini .gauge{max-width:260px;margin-top:0}
.tuner.mini .strobe{max-width:260px;height:16px}
.tuner.mini .tuner-status{margin-top:4px}
.tuner.mini .strings{justify-content:center}
.tuner.mini .strings .chip{min-height:38px;padding:6px 11px;font-size:13px}
.tuner.mini .tmini-ctrl{align-items:center}
.tuner.mini .tmini-ctrl .btn{flex:1 1 140px}
.tuner.mini .tmini-ctrl select{flex:1 1 160px;width:auto}
.tuner.mini .tmini-foot{margin-top:10px}.tuner.mini .tmini-foot .link{margin:0;font-size:inherit}
.tuner.mini.intune .tuner-note{color:var(--green)}
/* Pop-up quick tuner: a small meter just above the fork */
.tunepop{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(68px + env(safe-area-inset-bottom));z-index:26;width:196px;padding:8px 10px 8px;border-radius:16px;border:1px solid var(--line);background:rgba(28,26,31,.97);box-shadow:0 12px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom right;transition:opacity .14s,transform .14s}
.tunepop.show{opacity:1;transform:none}
.tunepop::after{content:'';position:absolute;right:18px;bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
body.has-tabs .tunepop{bottom:calc(132px + env(safe-area-inset-bottom))}
body.has-actions .tunepop{bottom:calc(140px + env(safe-area-inset-bottom))}
.tuner.pop{text-align:center}
.tuner.pop .gauge{display:block;width:100%;max-width:none;margin:0}
.tpop-read{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:-4px}
.tuner.pop .tuner-note{font:600 30px/1 var(--head);margin:0}
.tuner.pop .tuner-note small{font-size:13px;color:var(--muted);margin-left:1px}
.tpop-cents{font:600 13px var(--mono);color:var(--muted);min-width:44px;text-align:left}
.tuner.pop .tuner-status{font-size:12px;margin:2px 0 0;min-height:16px;padding:0}
.tuner.pop.intune .tuner-note{color:var(--green)}
.tunefab[hidden]{display:none}
@media(max-width:560px){.liblist{grid-template-columns:1fr}.tunefab span{display:none}.tunefab{padding:0;width:44px;justify-content:center}}
/* Library topics (collapsible, with pictures) */
.topics{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.topic{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel2),var(--panel));overflow:hidden}
.topic.open{border-color:hsl(var(--h) 40% 38%)}
.topic-btn{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.topic-btn:hover .topic-img{filter:brightness(1.12)}
.topic-img{flex:none;width:68px;height:68px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 25%,hsl(var(--h) 45% 32%),hsl(calc(var(--h) + 25) 40% 14%));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.35)}
.topic-img svg{width:56px;height:56px;display:block}
.topic-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.topic-txt b{font:600 19px var(--head);letter-spacing:.02em}
.topic-meta{color:#c9b8f0}
.topic-chev{flex:none;font-size:26px;color:var(--muted);transition:transform .2s;line-height:1}
.topic.open .topic-chev{transform:rotate(90deg);color:var(--accent-text)}
.topic-body{padding:0 12px 12px}
.topic-body .liblist{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.topic-body .librow{background:var(--inset)}
@media(max-width:560px){.topic-img{width:58px;height:58px;border-radius:12px}.topic-img svg{width:48px;height:48px}.topic-btn{gap:12px;padding:10px 12px}.topic-body .liblist{grid-template-columns:1fr}}
/* Claude API spend */
.spend-total{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 8px}
.spend-total b{font:600 38px var(--head);color:var(--accent-text);line-height:1}
.spend-rows{margin:6px 0 4px}
.spend-row{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:1px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.spend-row:last-child{border:0}.spend-row .sd{grid-column:1/-1;font-size:13px}.spend-row b{font-family:var(--mono);font-weight:600}
.spend-sub{font:600 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px}
/* Key / strings / chords pickers (library + routine runner) */
.params{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;align-items:end;margin:6px 0 4px}
.params label.mini.param{flex:none;min-width:0}
.params label.mini.param span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.params label.mini select{width:100%}
.params>.btn{min-height:46px}
.librow.special{border-color:rgba(185,166,239,.45);background:linear-gradient(135deg,rgba(185,166,239,.14),var(--inset) 60%)}
.librow.special b::before{content:'◎ ';color:#b9a6ef}
/* Fretboard area + string focus */
.fb-dim{fill:rgba(10,7,5,.58);pointer-events:none}
.fb-focus{fill:color-mix(in srgb,var(--accent) 16%,transparent);stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:1;pointer-events:none}
.fb-mark.target circle{stroke:#fff;stroke-width:2.2}
.fb-mark.wrong circle{fill:#e2483d}
.fb-mark.wrong text{fill:#fff}
/* Interval trainer */
.itplay{text-align:left}
.it-summary{font-size:15px;color:#c9b8f0;margin:2px 0 8px}
.it-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.it-keychip{font:500 16px var(--body);padding:6px 14px;border-radius:999px;background:var(--inset);border:1px solid var(--line)}
.it-keychip b{font:600 20px var(--head);color:var(--accent-text);margin:0 2px}
.it-keychip small{color:var(--muted);font-size:13px}
.it-keychip.new{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft);animation:itpulse .6s ease-out}
@keyframes itpulse{from{transform:scale(1.08)}to{transform:scale(1)}}
.it-prompt{text-align:center;margin:10px 0 4px}
.it-int{font:600 92px/1 var(--head);color:var(--text);letter-spacing:.01em;text-shadow:0 4px 18px color-mix(in srgb,var(--accent) 25%,transparent)}
.it-int.long{font-size:44px;line-height:1.15}
.it-sub{font-size:15px;color:var(--muted);margin-top:6px}
.it-sub b{color:var(--text)}
.it-status{text-align:center;font-weight:600;min-height:26px;margin:8px 0 6px}
.it-status.ok{color:var(--green)}.it-status.bad{color:#ff8a80}.it-status.mid{color:var(--accent-text)}
.it-shape{text-align:center;color:#c9b8f0;margin:0 0 8px}
.it-time{margin:4px 0 8px}
.it-time i{transition:width .1s linear}
.it-meter{height:4px;border-radius:3px;background:#0d0b0f;overflow:hidden;margin:2px 0 6px}
.it-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3f8f4a,var(--green));transition:width .08s linear}
.it-board.tapping{outline:1px dashed color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:-1px}
.it-btns{margin-top:8px}.it-btns>.btn{flex:1 1 90px}
.it-how{margin:10px 0 0}
.it-res{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.it-res .bigres{font-size:46px;line-height:1}
.bigres.ok{color:var(--green)}.bigres.bad{color:#ff8a80}
.it-per{display:grid;gap:4px;margin:12px 0}
.it-prow{display:grid;grid-template-columns:52px 1fr 44px 56px;align-items:center;gap:10px}
.it-prow b{font:600 18px var(--head)}
.it-prow .bar{display:block;margin:0}
.it-prow span.small{text-align:right}
.itset fieldset{border:0;margin:0;padding:0;min-width:0}
.itset fieldset[disabled]{opacity:.55}
.it-sublabel{margin:14px 0 4px;color:#c9b8f0}
.it-setbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.it-custom{margin:4px 0 8px}.it-custom .chip{min-width:48px}
.it-stats{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.istat{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:6px 10px;border-radius:12px;border:1px solid var(--line);background:var(--inset)}
.istat b{font:600 20px var(--head)}.istat small{font-size:11px;color:var(--muted);white-space:nowrap}
.istat.good{border-color:rgba(92,196,107,.6)}.istat.good b{color:var(--green)}
.istat.mid{border-color:color-mix(in srgb,var(--accent) 50%,transparent)}.istat.mid b{color:var(--accent-text)}
.istat.weak{border-color:rgba(226,72,61,.6)}.istat.weak b{color:#ff8a80}
@media(max-width:560px){.it-int{font-size:76px}.it-int.long{font-size:34px}.params{grid-template-columns:1fr 1fr}.it-prow{grid-template-columns:44px 1fr 40px 50px}}
@media(max-width:560px){.itset .params select{font-size:15px;padding:8px}}
/* Master classes */
.mastercard .mc-intro{margin:0 0 10px}
.mc-foryou{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,transparent),var(--inset) 70%);color:var(--text);font:inherit;cursor:pointer}
.mc-foryou:hover{border-color:var(--amber)}
.mc-foryou .label{margin:0}
.mc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mc-txt b{font:600 18px var(--head);letter-spacing:.02em}
.mc-go{flex:none;font-weight:700;color:var(--accent-text);white-space:nowrap}
.mc-sub{margin:14px 0 6px}
.mc-recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.mc-rec{display:flex;align-items:center;gap:12px;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;cursor:pointer}
.mc-rec:hover{border-color:#4a4251}
.mc-rec .mc-txt b{font-size:16px}
.topic-img.sm{width:48px;height:48px;border-radius:12px}.topic-img.sm svg{width:40px;height:40px}
.topic-img.thumb{width:64px;height:64px;border-radius:12px}.topic-img.thumb svg{width:52px;height:52px}
.mc-ask{display:flex;gap:8px;margin-top:12px}
.mc-ask input{flex:1;min-width:0}
.mc-ask .btn{flex:none}
.course.master{display:flex;align-items:center;gap:12px}
.course-hero .mc-banner{display:flex;justify-content:center;padding:14px 0 6px;margin:-4px 0 6px;border-radius:12px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}
.course-hero .mc-banner .topic-img{width:96px;height:96px;border-radius:22px}.course-hero .mc-banner .topic-img svg{width:80px;height:80px}
.mcbtn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:left;margin:0 0 14px;padding:12px 14px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text);font:500 15px var(--body);cursor:pointer}
.mcbtn:hover{border-style:solid}
.mcbtn .small{margin-left:auto}
.mcrun{margin-top:8px}
.askmc{margin:8px 0 2px}
.mcsheet .mc-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:6px}
.mcsheet .mc-top h2{margin:0 0 2px}
.mcsheet textarea{width:100%}
.mc-outline ol{margin:4px 0 10px;padding-left:20px}.mc-outline li{margin:3px 0}
@media(max-width:560px){.mc-recs{grid-template-columns:1fr}.mc-foryou{gap:10px;padding:10px}.mcbtn .small{margin-left:0}}
/* "What do you want to work on?": folds to just the text box */
.askhead{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.askhead .label{flex:1;margin:0;cursor:pointer}
.askhead .badge{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text)}
.askchev{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:600 20px/1 var(--body);cursor:pointer;transform:rotate(90deg);transition:transform .18s}
.askcard.collapsed .askchev{transform:rotate(0deg)}
.askcard.collapsed .ask-more,.askcard.collapsed .askbox .btn{display:none}
.askcard.collapsed .askbox{padding:4px 8px}
.askcard.collapsed .askbox textarea{min-height:0;height:40px;padding:9px 6px;overflow:hidden;white-space:nowrap}
.askcard.collapsed{padding-bottom:14px}
@media(max-width:560px){.askcard:not(.collapsed) .askbox textarea{min-height:84px}}
/* Track of the Day: YouTube's standard embed player */
.yt-embed{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Songsterr */
.sst{margin:2px 0 10px}
.sst-h{margin:4px 0}
.sst-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;margin:0 0 6px;border-radius:10px;border:1px solid var(--line);background:var(--inset);color:var(--text);font:inherit;cursor:pointer}
.sst-row:hover{border-color:#4a4251}
.sst-row.static{cursor:default}
.sst-main{flex:1;min-width:0;display:flex;flex-direction:column}
.sst-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sst-add{color:var(--accent-text);font-weight:600;white-space:nowrap}
.sst-parts{display:grid;gap:6px;margin:10px 0}
.sst-part{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--inset);text-decoration:none;color:var(--text)}
.sst-part:hover{border-color:var(--amber)}
.sst-kind{flex:none;width:28px;text-align:center;font-size:18px}
.sst-kind.k-bass{filter:hue-rotate(160deg)}
.sstcard .btn.primary{flex-direction:column;gap:0}
.sstcard .btn.primary .small{font-weight:500;opacity:.8}
/* ---------------- Tab player: transport, seek/loop strip, live fretboard ---------------- */
.tp-view.scroll,.tp-view.scroll.picks{height:auto;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#4a4251 transparent;-webkit-overflow-scrolling:touch}
.tp-view.scroll .tp-track{display:flex;position:static;width:max-content;padding:8px 0 2px}
.tp-view.scroll .tab-sys{overflow:visible}
.tp-view.seekable .tabsvg{cursor:pointer}
.tp-view.static .tab-sys{opacity:.8}
.tab-selrect{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1;pointer-events:none}
.tab-note.insel rect{fill:#3a2a10}
.tab-note.insel text{fill:var(--accent-text)}
.tab-note.on rect{fill:var(--amber)}
.tab-note.on text{fill:var(--btn-ink)}
.tab-barno{font:600 9px var(--mono);fill:#6d6472}
.tab-head{pointer-events:none}
.tp-ruler{position:relative;height:28px;margin:2px 0 6px;background:var(--inset);border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.tp-ruler.ro{cursor:default;touch-action:auto}
.tp-rfill{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--accent) 16%,transparent);pointer-events:none}
.tp-rsel{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--accent) 26%,transparent);border-left:2px solid var(--amber);border-right:2px solid var(--amber);pointer-events:none}
.tp-rsel[hidden]{display:none}
.tp-rhead{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--amber);box-shadow:0 0 8px var(--amber);pointer-events:none}
.tp-rbars{position:absolute;inset:0;pointer-events:none}
.tp-rbar{position:absolute;top:0;bottom:0;border-left:1px solid #3d3742;font:600 10px var(--mono);color:var(--muted);padding:6px 0 0 4px;line-height:1}
.tp-rbar.minor{border-left-color:#29242d}
.tp-selbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 6px 6px 12px;margin:0 0 6px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:var(--amber-soft);font-size:14px}
.tp-selbar[hidden]{display:none}
.tp-selbar b{color:var(--accent-text)}
.tp-selbar .btn{flex:none}
.tp-hint{margin:0 0 8px}
.tpneck{margin:4px 0 10px}
.tpneck[hidden]{display:none}
.tpneck svg.tpboard{width:100%;height:auto;min-width:660px}
.tpboard .fb-mark{opacity:.3;transition:opacity .08s}
.tpboard .fb-mark.out{opacity:.08}
.tpboard .fb-mark.on,.tpboard .fb-mark.tap{opacity:1}
.tpboard .fb-mark.on circle{stroke:#fff;stroke-width:2.2;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 95%,transparent))}
.tp-controls{display:grid;gap:10px;margin-top:6px}
.tp-transport{display:flex;gap:10px}
.tp-transport[hidden]{display:none}
.tp-transport .tp-play{flex:1 1 auto}
.tp-transport .tp-restart{min-width:58px;font-size:18px}
.tp-transport .btn:not(.tp-play){flex:0 1 auto}
.btn.pause{background:var(--panel2);border-color:var(--amber);color:var(--accent-text)}
.tp-tempo .bpm span{letter-spacing:.04em;font-size:12px;white-space:nowrap}
.tp-tempo-wrap input[type=range]{margin:4px 0 0}
.tp-goal span:last-child{letter-spacing:.04em;text-transform:none}
/* Chord boxes light up while their chord sounds */
.cdiag{transition:transform .12s ease,background-color .12s,box-shadow .12s;border-radius:12px}
.cdiag.playing{background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:0 0 0 2px var(--amber),0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-2px) scale(1.05)}
.cdiag.playing .cd-name{fill:var(--accent-text)}
.cdiag.playing .cd-str,.cdiag.playing .cd-fret{stroke:var(--accent-text)}
.diagrams-cap{flex-basis:100%;text-align:center;margin-bottom:-4px}
.backnow{color:var(--amber);margin-left:6px;font-weight:700}
/* Tempo lines: what the BPM means */
.tempo-row{align-items:baseline}
.tempo-row .tr-main{color:var(--muted)}
.tempo-row b.tv{font:600 16px var(--body);color:var(--accent-text)}

/* ---------------- Wide windows: more room, columns ---------------- */
.exgrid>.card{min-width:0}
@media(min-width:900px){
  .wrap{max-width:1240px;padding-left:32px;padding-right:32px}
  #actionbar .inner,#tabbar .inner{max-width:1240px}
  header.top{padding:10px 0 20px}
  .card{padding:22px 24px;margin-bottom:18px}
  h1{font-size:34px}
  .view.v-welcome,.view.v-onboarding,.view.v-assessment{max-width:880px;margin:0 auto}
  .sheet{max-width:880px}
  .stats{gap:14px;margin-bottom:18px}
  .tp-controls{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:20px}
  .tp-meter{margin-top:6px}
  .diagrams{gap:16px}
  .diagrams .cdiag{width:118px}
}
@media(min-width:1000px){
  /* dashboard: main column + side column */
  .dash-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 24px;align-items:start}
  .dash-side .card.track{display:block}
  .dash-side .track-body{padding:16px 22px 20px}
  .dash-side .mc-recs{grid-template-columns:1fr 1fr}
  /* practice library: topics side by side, the open one full width */
  .v-practice .topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .v-practice .topic.open{grid-column:1/-1}
  .v-practice .topic-body .liblist{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  /* exercise page: variations | about, then the player and the log full width */
  .exgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
  .exgrid .explayer,.exgrid .exlog{grid-column:1/-1}
  .exhead .why{max-width:820px}
  /* routine runner: timer and tempo | what to do */
  .run-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 30px;align-items:start}
  .run-grid .countdown{text-align:left}
  .run-b .why:first-child{margin-top:4px}
  /* long single-column screens flow into two columns */
  .view.v-settings,.view.v-profile,.view.v-results{columns:2;column-gap:20px}
  .view.v-settings>*,.view.v-profile>*,.view.v-results>*{break-inside:avoid}
  .view.v-settings>h1,.view.v-settings>.link,.view.v-settings>.label,.view.v-profile>h1,.view.v-profile>.link,.view.v-profile>.label,.view.v-results>h1,.view.v-results>.label{column-span:all}
}
@media(min-width:1400px){
  .wrap{max-width:1360px}
  #actionbar .inner,#tabbar .inner{max-width:1360px}
}
@media(min-width:900px){
  .tpneck svg.tpboard{max-width:1040px;margin:0 auto;display:block}
}
@media(min-width:1000px){
  /* songs hub: add a song | my songs, recommendations in two columns */
  .view.v-songs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:start}
  .view.v-songs>*:not(section.card:nth-of-type(1)):not(section.card:nth-of-type(2)){grid-column:1/-1}
  .v-songs .reclist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .v-songs .reccard:last-child{border-bottom:1px solid var(--line)}
  /* tools: keep the tuner and metronome a comfortable size */
  .view.v-tools .tuner,.view.v-tools .metro{max-width:880px;margin-left:auto;margin-right:auto}
}
/* API keys: what is saved, without showing it */
.keyfp{font:600 13px var(--mono);color:var(--accent-text);word-break:break-all}
.keynote{margin-top:6px}
.keyqr{margin:12px 0 4px;text-align:center}
.keyqr svg{width:260px;max-width:100%;height:auto;background:#fff;border-radius:12px;padding:8px;display:block;margin:0 auto 8px}
.keyline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.keyline:last-of-type{border:0}
.drivebox{border:1px solid var(--line);border-radius:12px;padding:12px;margin:8px 0 12px;background:var(--inset)}
.drivebox .row .btn{flex:1 1 160px}
.drivesetup{margin-top:8px}.drivesetup summary{color:var(--muted)}.drivesetup .row{margin-top:6px}

/* ---------- Artist series ---------- */
.artist-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:10px}
.artist-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);color:var(--text);text-decoration:none;text-align:left;padding:0 0 8px;cursor:pointer;font-family:var(--body);transition:border-color .15s,transform .15s}
.artist-tile:hover{border-color:var(--amber);transform:translateY(-1px)}
.artist-tile .wimg{aspect-ratio:1/1;width:100%}
.artist-tile .at-name{font-weight:600;font-size:14px;padding:7px 9px 0;line-height:1.2}
.artist-tile .at-tech{padding:2px 9px 0;line-height:1.25;font-size:12px}
.artist-tile.other{border-style:dashed}
.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin:14px 0}
.artist-big{display:flex;gap:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px;color:var(--text);text-decoration:none;transition:border-color .15s}
.artist-big:hover{border-color:var(--amber)}
.artist-big .wimg{width:92px;height:92px;border-radius:10px;flex:none}
.artist-big .ab-body p{margin:4px 0 8px}
.chip.sm{font-size:12px;padding:3px 9px}
.artist-head{display:flex;gap:18px;align-items:flex-start;margin:10px 0 16px}
.artist-head .wimg.artist-photo{width:150px;height:150px;border-radius:14px;flex:none;box-shadow:0 8px 22px rgba(0,0,0,.45)}
.artist-head h1{margin:2px 0 4px}
.artist-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.artist-lessons,.artist-side{min-width:0}
.artist-head .row .btn{flex:none}
.artist-lesson .instr{white-space:pre-line}
.riffs .riff{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.riffs .riff:last-child{border-bottom:0}
.riff-act{display:flex;gap:6px;flex:none}

@media (min-width:1000px){.artist-cols{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.artist-side{position:sticky;top:12px}}

/* ---------- Technique library ---------- */
.tech-filters{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.tech-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tech-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;color:var(--text);text-decoration:none;transition:border-color .15s,transform .15s}
.tech-card:hover{border-color:var(--amber);transform:translateY(-1px)}
.tech-card p{margin:0}
.tc-top{display:flex;justify-content:space-between;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.tc-dom{color:var(--amber)}.tc-lv{color:var(--muted)}
.tc-meter{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin-top:4px}
.tc-meter i{height:6px;border-radius:3px;background:rgba(255,255,255,.08);position:relative}
.tc-meter i.in{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.tc-meter i.you{outline:2px solid #ece6da;outline-offset:1px}
.tc-fit.fit{color:#7fd49a}.tc-fit.stretch{color:#f5a524}.tc-fit.review{color:var(--muted)}
.tech-level .chips{margin-top:6px}
.lib-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin:16px 0}
.lib-more-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:14px;color:var(--text);text-decoration:none;margin-bottom:12px}
.lib-more .lib-more-card{margin-bottom:0}
.lib-more-card:hover{border-color:var(--amber)}
.lib-more-card > span:nth-child(2){display:flex;flex-direction:column;gap:2px;flex:1}
.lm-ic{font-size:26px;flex:none}
.askex-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lesson-badge{font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);font-weight:600}
.lesson-badge.ok{color:#7fd49a;border-color:rgba(127,212,154,.45)}

/* ---------- Learning paths (four stages) ---------- */
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:6px 0 16px}
.path-stage{display:flex;flex-direction:column;gap:4px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px 14px;color:var(--text);font-family:var(--body);cursor:pointer;position:relative;transition:border-color .15s}
.path-stage:hover{border-color:var(--amber)}
.path-stage.on{border-color:var(--amber);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 3%,transparent))}
.path-stage.missing{cursor:default;border-style:dashed;opacity:.6}
.path-stage.missing:hover{border-color:var(--line)}
.ps-name{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ps-here{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--btn-ink);background:var(--amber);border-radius:999px;padding:2px 7px}
.ps-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:2px}
.ps-bar i{display:block;height:100%;background:#7fd49a}
@media (max-width:720px){.path{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stage-dots{display:inline-flex;gap:3px;align-items:center}
.stage-dots i{width:14px;height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.stage-dots i.on{background:var(--amber)}

/* ---------- Knowledge-base requests ---------- */
.kbgap{border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:12px;padding:12px;margin:12px 0;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.45}
.kbgap .row{gap:8px}
.kbgap .row .btn{flex:none}
.kbgap.done{border-style:solid;border-color:rgba(127,212,154,.45);background:rgba(127,212,154,.07)}
.kbreq{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.kbreq input{flex:1 1 220px;min-width:0}
.kbreq select{flex:0 0 auto}
.kbqueue{margin-top:14px}
.kbq-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.kbq-row:last-child{border-bottom:0}
.kbq-row > span:first-child{flex:1;min-width:0}
.kbq-status{font-size:12px;font-weight:600;color:var(--amber);white-space:nowrap}
.kbq-status.added{color:#7fd49a}

/* ---------- Guided lessons: the app's pick first, your choice under "Customize" ---------- */
.routine-cta.guided h3 .hl{color:var(--amber)}
.why-list{margin:6px 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.45}
.why-list li::marker{color:var(--amber)}
.quick-time{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.quick-time .chips{gap:6px}
button.linkbtn.small,a.linkbtn.small,.routine-cta .linkbtn{display:inline-block;flex:none;color:var(--amber);font-size:13px;margin-top:10px;text-decoration:none}
.routine-cta .linkbtn:hover,.linkbtn.small:hover{text-decoration:underline}
.nextlesson{border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,transparent),color-mix(in srgb,var(--accent) 2%,transparent));border-radius:14px;padding:14px;margin:12px 0}
.course-hero .nextlesson{margin-top:14px}
.nextlesson > b{display:block;font-size:17px;margin:4px 0}
.nextlesson p{margin:4px 0 10px}
.nextlesson .row{gap:8px}
.nextlesson.muted-card{border-color:var(--line);background:var(--panel)}
details.customize{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
details.customize > summary{cursor:pointer;color:var(--amber);font-size:13px;font-weight:600;list-style:none}
details.customize > summary::-webkit-details-marker{display:none}
details.customize > summary::before{content:'▸ ';}
details.customize[open] > summary::before{content:'▾ ';}
.artist-lesson.flash{outline:2px solid var(--amber);outline-offset:3px;transition:outline-color .3s}
.routine-cta .also{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.routine-cta .also .linkbtn{margin:0}
.clicksound select{min-width:150px}
.toggles .clicksound{display:inline-flex;align-items:center;gap:6px;margin:4px 0 0}
.method-chip{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(185,166,239,.14);color:#cfc3f5;border:1px solid rgba(185,166,239,.35);font-weight:600}
.methods details.method{border-top:1px solid var(--line);padding:8px 0}
.methods details.method summary{cursor:pointer;list-style:none}
.methods details.method summary::-webkit-details-marker{display:none}
.methods details.method p{margin:6px 0 0}

/* ---------------- Layout cleanup (2026-10-09.2): Home = today, Practice = learn, Profile = history ---------------- */
.slimnote{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;margin:0 0 14px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;background:var(--amber-soft);color:var(--text);text-decoration:none;font-size:14px;line-height:1.4}
.slimnote .go{color:var(--amber);font-weight:600;white-space:nowrap}
.slimnote:hover{border-color:var(--amber)}
.courselist .course:first-child{margin-top:4px}
.courselist .course{padding:8px 10px}
.courselist .cbody b{font-size:15px}
/* This week */
.weekcard.live{border-color:var(--amber)}
.wk-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 12px}
.wk-sum>div{display:flex;flex-direction:column;gap:1px}
.wk-sum b{font:600 22px var(--head);line-height:1.1}
.wk-sum b.ok{color:var(--green)}
.wk-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.wk-day{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--muted)}
.wk-col{width:100%;height:46px;background:var(--inset);border-radius:6px;display:flex;align-items:flex-end;overflow:hidden;border:1px solid transparent}
.wk-col i{display:block;width:100%;border-radius:5px 5px 0 0}
.wk-col i.some{background:color-mix(in srgb,var(--accent) 35%,transparent)}
.wk-col i.done{background:linear-gradient(180deg,var(--btn-top),var(--btn-bot))}
.wk-day.today .wk-col{border-color:var(--text)}
.wk-day.today span{color:var(--text);font-weight:700}
.wk-day.future{opacity:.45}
.wk-actions{gap:8px}
.wk-actions .btn{flex:1}
.wk-hint{margin:8px 0 0}
.wk-live select{width:100%;margin-bottom:10px}
.wk-live .linkbtn{margin-top:8px}
/* Explore */
.explore .ex-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--inset);color:var(--text);text-decoration:none;text-align:left;font:inherit;cursor:pointer}
.explore .ex-row:hover{border-color:var(--amber)}
.explore .ex-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.explore .ex-txt .label{margin:0;font-size:10px}
.explore .ex-ic{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;font-size:22px;border-radius:10px;background:var(--panel2)}
/* Guided lesson: plan summary, details folded */
.planbox.guided{padding-top:12px}
.plan-sum{display:flex;gap:4px;margin-bottom:8px}
.plan-sum .ps{min-width:46px;display:flex;flex-direction:column;gap:4px;font-size:10px;font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.plan-sum .ps i{display:block;height:6px;border-radius:3px;background:var(--bc)}
.plan-sum .ps span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-stretch{margin:6px 0 4px}
.plan-full{margin:4px 0 12px}
.plan-full summary{cursor:pointer;color:var(--amber);font-size:13px;padding:6px 0;list-style-position:inside}
.plan-full[open] summary{margin-bottom:4px}
/* Practice: learn in depth */
.learn-grid{display:grid;gap:0 18px}
.learn-links{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.learn-links .lib-more-card{margin-bottom:0}
@media(min-width:1000px){
  .learn-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:start}
  .learn-grid .mc-recs{grid-template-columns:1fr 1fr}
}
.history .stats{margin:4px 0 10px}
@media(max-width:560px){.history .stats{grid-template-columns:repeat(2,1fr)}.slimnote{font-size:13px}}
.history .cal-head{margin:6px 0 8px}.history .cal-title{margin:0}
.history .cal .cd{aspect-ratio:auto;height:34px}

/* ---------------- Playback bar (ui/transport.js) ---------------- */
#transport{position:fixed;left:0;right:0;bottom:0;z-index:21;display:none;background:rgba(24,21,27,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -10px 28px rgba(0,0,0,.35);padding:6px 12px 8px}
#transport.show{display:block}
body:not(.has-actions):not(.has-tabs) #transport{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
#transport .inner{max-width:760px;margin:0 auto}
.tr-prog{position:absolute;left:0;right:0;top:-1px;height:3px;background:transparent}
.tr-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber-d),var(--amber));box-shadow:0 0 10px var(--amber)}
.tr-status{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 5px;min-height:15px}
.tr-status b{color:var(--text);font-weight:600}
.tr-main{display:flex;align-items:center;gap:8px}
.tr-main .kbtn{min-height:44px;min-width:44px;padding:0 10px}
.tr-play{min-height:46px;padding:8px 16px;flex:0 0 auto;min-width:92px}
.tr-tempo{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;min-width:0}
.tr-bpm{text-align:center;line-height:1;min-width:64px}
.tr-bpm b{font:600 26px var(--head);display:block;font-variant-numeric:tabular-nums}
.tr-bpm span{font-size:10px;letter-spacing:.08em;color:var(--muted);white-space:nowrap}
.tr-bpm.goal-hit b{color:var(--green)}
.tr-more.on{border-color:var(--amber);color:var(--amber)}
.tr-range{width:100%;margin:0}
.tr-main .tr-range{flex:1;min-width:120px}
.tr-opts{padding-top:8px}
.tr-opts[hidden]{display:none}
.tr-tgls{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.tr-tgls .tgl{padding:6px 12px;font-size:13px}
.tr-tgls .clicksound select{padding:6px 8px;font-size:13px}
.tr-ramptxt{margin-top:6px}
.wide-only{display:none}
@media(min-width:700px){
  #transport .inner{max-width:1240px}
  .wide-only{display:inline-flex}
  input.wide-only{display:block}
  .narrow-only{display:none!important}
  .tr-tempo{flex:0 0 auto}
}
@media(max-width:400px){.tr-play{min-width:0;padding:8px 14px}.tr-pl{display:none}}
body.has-transport .wrap{padding-bottom:calc(var(--dock-top,0px) + 28px)}
body.has-transport .tunefab{bottom:calc(var(--dock-top,0px) + 12px)}
/* players hand their transport, tempo and playback switches to the bar */
.tabplayer.docked .tp-restart,.tabplayer.docked .tp-play,.tabplayer.docked .tp-tempo-wrap,.tabplayer.docked .ramp-row,
.tabplayer.docked .toggles [data-tg="sound"],.tabplayer.docked .toggles [data-tg="click"],.tabplayer.docked .toggles [data-tg="loop"],.tabplayer.docked .toggles [data-tg="countIn"],.tabplayer.docked .toggles .clicksound{display:none}
.tabplayer.docked .tp-controls{display:block}
.tabplayer.docked .tp-transport:not(:has(.btn:not(.tp-play))){display:none}
.metro.docked>.bpmrow,.metro.docked>input[type=range],.metro.docked>.row:not(.metro-opts),.metro.docked .ramp-row,.metro.docked .clicksound{display:none}
.metro.compact.docked>.metro-opts{display:none}
@media(min-width:700px){button.wide-only{display:inline-flex;align-items:center;justify-content:center}}
.tr-tgls .clicksound{display:inline-flex;align-items:center;gap:6px;margin:0}
.tr-tgls .clicksound select{width:auto}
.tr-tgls label.mini.clicksound{flex-direction:row;flex:0 0 auto;font-size:13px}
.tr-tgls label.mini.clicksound select{min-height:34px}
.pathnote{margin:-2px 0 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tab-tech.bar{fill:#9fd3ff}

/* Lesson rows (artist and technique pages): name + one-line summary; tap to open the full lesson */
.lesson-row{padding:0;margin:8px 0;overflow:hidden;transition:border-color .15s}
.lesson-row .lr-head{appearance:none;display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;background:none;border:0;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.lesson-row .lr-head:hover{background:rgba(255,255,255,.03)}
.lesson-row .lr-head:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.lesson-row .lr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lesson-row .lr-txt b{font-size:15px}
.lesson-row .lr-sum{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lesson-row .lr-side{display:flex;align-items:center;gap:8px;flex:none}
.lesson-row .lr-chev{font-size:20px;color:var(--muted);transition:transform .15s;line-height:1}
.lesson-row.open{border-color:var(--amber)}
.lesson-row.open .lr-chev{transform:rotate(90deg);color:var(--amber)}
.lesson-row.open .lr-sum{display:none}
.lesson-row .lr-body{padding:0 14px 14px}
.lesson-row .lr-body[hidden]{display:none}
.lesson-row .lr-meta{margin-bottom:6px}
.lesson-row.done .lr-txt b{color:#cfe9d6}
@media(max-width:560px){.lesson-row .lr-head{padding:11px 12px}.lesson-row .lr-body{padding:0 12px 12px}}
/* Artist bio */
.card.bio h3{margin-bottom:6px}
.bio-text p{margin:0 0 10px;line-height:1.6}
.bio.clamped .bio-text{max-height:7.4em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent)}
.bio-credit{margin:6px 0 0}

/* Lesson topics: one button per topic, opening its lesson rows (one topic open at a time) */
.lesson-group{border:1px solid var(--line);border-radius:14px;background:var(--panel);margin:0 0 10px;overflow:hidden}
.lesson-group .lg-head{appearance:none;display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:none;border:0;color:var(--text);text-align:left;font:inherit;cursor:pointer}
.lesson-group .lg-head:hover{background:rgba(255,255,255,.03)}
.lesson-group .lg-head:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.lesson-group .lg-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lesson-group .lg-txt b{font:600 16px var(--head)}
.lesson-group .lg-side{flex:none}
.lesson-group .lg-prog{flex:none;width:54px;height:6px;border-radius:99px;background:var(--inset);overflow:hidden;border:1px solid var(--line)}
.lesson-group .lg-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--amber-d),var(--amber))}
.lesson-group.done .lg-prog i{background:var(--green)}
.lesson-group.open{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.lesson-group.open .lg-head{border-bottom:1px solid var(--line)}
.lesson-group.open .lg-head .lr-chev{transform:rotate(90deg);color:var(--amber)}
.lesson-group .lr-chev{font-size:20px;color:var(--muted);transition:transform .15s;line-height:1}
.lesson-group .lg-body{padding:6px 12px 10px}
.lesson-group .lg-body[hidden]{display:none}
.lesson-group .lg-note{margin:6px 4px 8px}
.lesson-group .pathnote{display:block;margin:-2px 4px 8px}
@media(max-width:560px){.lesson-group .lg-prog{display:none}.lesson-group .lg-head{padding:13px 14px}.lesson-group .lg-body{padding:4px 8px 8px}}
/* Artist head: bio and most popular video under the name */
.artist-head .ah-body{flex:1;min-width:0}
.ah-bio{margin:4px 0 10px;max-width:760px}
.ah-bio .bio-text p{margin:0 0 8px;line-height:1.6;color:#ddd5c8}
.ah-bio.clamped .bio-text{max-height:6.4em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent);mask-image:linear-gradient(180deg,#000 50%,transparent)}
.ah-bio .why{margin:0}
.ah-chips{margin:10px 0 0}
.ah-act{margin-top:12px;align-items:center;gap:12px}
.topvid{appearance:none;display:flex;align-items:center;gap:12px;width:100%;max-width:520px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--inset);color:var(--text);text-align:left;font:inherit;cursor:pointer;text-decoration:none}
.topvid:hover{border-color:var(--amber)}
.topvid .tv-thumb{position:relative;flex:none;width:128px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.topvid .tv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.topvid .tv-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:rgba(0,0,0,.25);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.topvid .tv-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.topvid .tv-txt .label{margin:0;font-size:10px}
.topvid .tv-txt b{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.topvid.link-only{padding:10px 12px}
.topvid .tv-ic{width:36px;height:36px;border-radius:10px;background:#c4302b;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none}
.topvid-player{max-width:560px}
.topvid-player .yt-embed{position:relative;aspect-ratio:16/9}
.topvid-player iframe{position:absolute;inset:0;width:100%;height:100%;border-radius:10px}
.tv-under{margin-top:6px;max-width:560px}
@media (max-width:620px){.topvid .tv-thumb{width:112px}}

/* Artist head: photo | name, then bio, video, chips and the master class (photo beside the name on phones) */
.artist-head{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:"photo title" "photo body";column-gap:18px;align-items:start}
.artist-head .wimg.artist-photo{grid-area:photo}
.artist-head .ah-title{grid-area:title}
.artist-head .ah-body{grid-area:body}
@media (max-width:620px){
  .artist-head{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"photo title" "body body";column-gap:14px;align-items:center}
  .artist-head .wimg.artist-photo{width:76px;height:76px;border-radius:12px}
  .artist-head .ah-title h1{font-size:28px;margin:0}
  .artist-head .ah-body{margin-top:10px}
}
.songs-card summary{list-style:none;display:flex;align-items:center;gap:10px;cursor:pointer}
.songs-card summary::-webkit-details-marker{display:none}
.songs-card summary h3{margin:0;flex:1}
.songs-card[open] summary{margin-bottom:10px}
.songs-card[open] summary .lr-chev{transform:rotate(90deg);color:var(--amber)}
.songs-card .lr-chev{font-size:20px;color:var(--muted);transition:transform .15s}

/* Tools: six tabs, trainers, note finder, scales glossary */
.segtabs.six{grid-template-columns:repeat(6,1fr)}
.segtabs.six a{font-size:14px;padding:12px 2px}
@media(max-width:560px){.segtabs.six{grid-template-columns:repeat(3,1fr)}.segtabs.six a{font-size:12px}}
.trainer-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.trainer-tab{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-decoration:none}
.trainer-tab.on{border-color:var(--amber);background:var(--amber-soft)}
.nf-q{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:2px 0 8px}
.nf-note{font:700 56px var(--head);color:var(--amber);line-height:1}
.nf-on{font-size:18px}
.nf-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:4px 0 8px}
.nf-stats b{color:var(--text);font-size:16px;margin-right:4px}
.nf-neck{margin:6px 0 10px}
.nf-fb{min-height:20px;margin:4px 0 10px}
.nf-fb.bad{color:#ff8a80}
.nf-choices{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:6px 0}
.nf-choices .chip{justify-content:center}
.nf-choices .chip.bad{border-color:var(--red);color:#ff8a80}
@media(min-width:1000px){.nf{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0 18px;align-items:start}}
.sc-act{align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.sc-act .btn{flex:none}
.sc-pos{margin:6px 0 10px}
.sc-info{display:grid;grid-template-columns:150px 1fr;gap:8px 16px;margin:14px 0 0}
.sc-info dt{font:600 12px var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--amber);padding-top:2px}
.sc-info dd{margin:0;line-height:1.55}
@media(max-width:560px){.sc-info{grid-template-columns:1fr;gap:2px}.sc-info dd{margin-bottom:10px}}
.notwhat{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px;padding:10px 12px;border:1px dashed var(--line);border-radius:12px}
.notwhat .btn{flex:none}

/* ---------------- Practice page (#/play): fixed stage, right rail and slide-out panel ---------------- */
body.playmode header.top{display:none}
body.playmode .wrap{padding-top:0;padding-bottom:0}
body.playmode .tunefab{display:none}
.play{--rail-w:84px;--panel-w:400px}
.play-bar{position:fixed;top:0;left:0;right:0;z-index:24;display:flex;align-items:center;gap:12px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top));background:rgba(18,16,20,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.play-bar .pb-back{min-height:42px;padding:0 12px;display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--text);white-space:nowrap}
.play-bar .pb-title{flex:1;min-width:0}
.play-bar .pb-title .label{margin:0;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-bar .pb-title b{display:block;font:600 17px var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play-bar .pb-nav{display:flex;gap:6px}
.play-bar .pb-nav .kbtn{min-height:42px;min-width:44px;font-size:22px;line-height:1}
.play-bar .pb-nav .kbtn:disabled{opacity:.35}
.play-stage{position:fixed;top:var(--play-top,64px);bottom:var(--dock-top,110px);left:0;right:var(--rail-w);padding:10px 16px 8px;display:flex;flex-direction:column;overflow:hidden;z-index:2;transition:right .2s}
.play-stage .stage-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none;margin-bottom:2px}
.play-stage .stage-meta .tempo-row{margin:0}
.play-stage .stage-tool{flex:1;min-height:0;display:flex;flex-direction:column}
.play-stage .stage-tool>.tabplayer{flex:1;min-height:0;display:flex;flex-direction:column}
.play-stage .tabplayer .tp-view{flex:none}
.play-stage .tabplayer .tpneck{flex:1 1 auto;min-height:0;overflow:auto}
.play-stage .tabplayer .tp-hint,.play-stage .tabplayer .toggles,.play-stage .tabplayer .pickrow,.play-stage .tabplayer .tp-meter,.play-stage .tabplayer .tp-controls{display:none}
.play-stage .tabplayer .tp-selbar{flex:none}
.play-stage .stage-tool>.metro,.play-stage .stage-tool [data-r="metro"]{overflow:auto}
.play-rail{position:fixed;right:0;top:var(--play-top,64px);bottom:var(--dock-top,110px);width:var(--rail-w);z-index:23;display:flex;flex-direction:column;gap:4px;padding:8px 6px;background:rgba(24,21,27,.97);border-left:1px solid var(--line);overflow-y:auto}
.rail-btn{appearance:none;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px;border:1px solid transparent;border-radius:10px;background:none;color:var(--muted);font:600 11px var(--body);cursor:pointer;text-align:center;line-height:1.15}
.rail-btn span{font-size:20px;line-height:1;color:var(--text)}
.rail-btn:hover{background:rgba(255,255,255,.04);color:var(--text)}
.rail-btn.on{border-color:var(--amber);background:var(--amber-soft);color:var(--amber)}
.play-panel{position:fixed;right:var(--rail-w);top:var(--play-top,64px);bottom:var(--dock-top,110px);width:var(--panel-w);z-index:23;background:var(--panel);border-left:1px solid var(--line);box-shadow:-14px 0 30px rgba(0,0,0,.4);display:flex;flex-direction:column;animation:ppIn .18s ease-out}
.play-panel[hidden]{display:none}
@keyframes ppIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.pp-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);flex:none}
.pp-head .segtabs{flex:1;margin:0}
.segtabs.three{grid-template-columns:repeat(3,1fr)}
.segtabs.three a{font-size:13px;padding:10px 2px}
.pp-body{flex:1;overflow-y:auto;padding:14px 16px 18px}
.pp-body h4{font:600 12px var(--head);text-transform:uppercase;letter-spacing:.1em;color:var(--amber);margin:16px 0 6px}
.pp-body h4:first-child,.pp-body .small.muted:first-child+h4{margin-top:8px}
.pp-body p{margin:0 0 8px;line-height:1.55}
.study .st-skill{margin:8px 0 0}
.st-theory{margin:0 0 6px;padding-left:18px;display:flex;flex-direction:column;gap:5px;line-height:1.5}
.st-theory li::marker{color:var(--amber)}
.pp-body .instr{white-space:pre-line}
.pp-body .rubric{margin-top:8px}
@media(min-width:1000px){.play.panel-open .play-stage{right:calc(var(--rail-w) + var(--panel-w))}}
@media(max-width:999px){.play-panel{width:min(var(--panel-w),calc(100vw - var(--rail-w)))}}
@media(max-width:620px){
  .play{--rail-w:56px}
  .rail-btn b{font-size:9px}
  .rail-btn span{font-size:18px}
  .play-bar{gap:8px;padding:8px 10px}
  .play-bar .pb-backtxt{display:none}
  .play-stage{padding:8px 10px 6px}
  .play-bar .pb-title b{font-size:15px}
}
/* Light tab: the tab, bar strip and fretboard on a light background */
.tabplayer.tp-light .tp-view{background:#f6f1e7;border-color:#d9cfbe}
.tabplayer.tp-light .tab-line{stroke:#b9ae9d}
.tabplayer.tp-light .tab-bar{stroke:#857a6b}
.tabplayer.tp-light .tab-sname,.tabplayer.tp-light .tab-count,.tabplayer.tp-light .tab-barno{fill:#6e6457}
.tabplayer.tp-light .tab-note rect{fill:#f6f1e7}
.tabplayer.tp-light .tab-note text{fill:#1d1812}
.tabplayer.tp-light .tab-note.insel rect{fill:#f3dcaa}
.tabplayer.tp-light .tab-note.insel text{fill:#5a3a00}
.tabplayer.tp-light .tab-note.on rect{fill:var(--amber)}
.tabplayer.tp-light .tab-note.on text{fill:var(--btn-ink)}
.tabplayer.tp-light .tab-tech{fill:#a3600a}
.tabplayer.tp-light .tab-tech.bar{fill:#1f6fb0}
.tabplayer.tp-light .tab-pick{stroke:#3d352c}
.tabplayer.tp-light .tab-finger{fill:#3d352c}
.tabplayer.tp-light .tab-selrect{fill:color-mix(in srgb,var(--accent) 18%,transparent)}
.tabplayer.tp-light .tp-ruler{background:#efe8da;border-color:#d9cfbe}
.tabplayer.tp-light .tp-rbar{color:#6e6457}
.tabplayer.tp-light .fbwrap{background:linear-gradient(180deg,#f2e2c0,#e6d0a3);border-color:#d3bd92}
.tabplayer.tp-light .fb-str{stroke:#5f4f3c}
.tabplayer.tp-light .fb-fret{stroke:#8f7c63}
.tabplayer.tp-light .fb-nut{stroke:#3d3328}
.tabplayer.tp-light .fb-num{fill:#7a6a55}.tabplayer.tp-light .fb-num.em{fill:#3d3328}
.tabplayer.tp-light .fb-sname{fill:#5f4f3c}
.tabplayer.tp-light .fb-inlay{fill:#c8ad80}

/* Two-column pages (artist, technique path): details on the left, next lesson + course + lessons on the right */
.page-cols{display:flex;flex-direction:column;gap:0}
.page-cols .pc-side{order:-1}
.page-cols .pc-main{order:0}
.page-cols .artist-head{margin-top:6px}
.side-course .btn{margin-top:6px}
@media(min-width:1000px){
  .page-cols{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:0 24px;align-items:start}
  .page-cols .pc-side,.page-cols .pc-main{order:0}
}
@media(max-width:999px){.v-artist .page-cols .pc-main,.v-artist .page-cols .pc-side{display:contents}.v-artist .page-cols .artist-head{order:0}.v-artist .page-cols .nextlesson{order:1}.v-artist .page-cols .side-course{order:2}.v-artist .page-cols .artist-lessons{order:3}.v-artist .page-cols .songs-card{order:4}}

/* Color language: skill areas (.dom-*), kinds of topic (.kind-*), level bands (.lvl-*) */
.dom-fretting{--dc:#ff8a7a}.dom-picking{--dc:#f5c044}.dom-rhythm{--dc:#6fd3a0}.dom-fretboard{--dc:#7aa7ff}.dom-theory{--dc:#b593ec}.dom-ear{--dc:#5cc4e0}.dom-improv{--dc:#ff9f4a}.dom-repertoire{--dc:#e47ad8}
.kind-technique{--kc:#f5a524}.kind-subject{--kc:#5cc4b4}.kind-style{--kc:#e2708a}
.lvl-found{--lc:#5cc46b}.lvl-inter{--lc:#4f9df5}.lvl-adv{--lc:#a77bf0}.lvl-mast{--lc:#ff6b5a}
.lvl-pill{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;background:var(--lc,#f5a524);color:#120d09;font:700 12px var(--head)}
.lv.dom-fretting .lv-name,.lv[class*="dom-"] .lv-name{color:var(--dc)}
.lv[class*="dom-"] .bar i{background:var(--dc)}
.lv .lvl-pill{margin-left:8px}
.lvl-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.lvl-legend i{display:inline-block;width:14px;height:6px;border-radius:3px;background:var(--lc);margin-right:5px;vertical-align:2px}
.edgelist .e[class*="dom-"] .e-name{color:var(--dc);font-weight:600}
/* Technique library: bubbles (area + name; tap for details) */
.tech-legend{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:4px}
.tech-legend .lvl-pill{margin-left:4px;min-width:22px;height:18px;font-size:10px}
.kdot{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid var(--kc);margin:0 4px 0 8px;vertical-align:-2px}
.chip.dom-chip.on{border-color:var(--dc);color:var(--dc);background:transparent}
.chip.kind-chip.on{border-color:var(--kc);color:var(--kc);background:transparent}
.tech-bubbles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:14px 0 18px;align-items:start;grid-auto-flow:row dense}
.tech-bubble{border:1px solid color-mix(in srgb,var(--kc) 70%,transparent);border-radius:18px;background:var(--panel);transition:transform .12s,box-shadow .12s}
.tech-bubble:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tech-bubble.open{background:color-mix(in srgb,var(--kc) 12%,var(--panel));border-color:var(--kc);box-shadow:0 8px 26px rgba(0,0,0,.4)}
.tb-detail{grid-column:1 / -1;position:relative;border:1px solid color-mix(in srgb,var(--kc) 70%,transparent);border-radius:16px;background:var(--panel2);padding:14px 16px;animation:tbIn .15s ease-out}
.tb-detail::before{content:'';position:absolute;top:-7px;left:var(--notch,24px);width:12px;height:12px;background:var(--panel2);border-left:1px solid color-mix(in srgb,var(--kc) 70%,transparent);border-top:1px solid color-mix(in srgb,var(--kc) 70%,transparent);transform:rotate(45deg)}
.tb-dhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.tb-dhead .tb-dom{font:700 11px var(--head);text-transform:uppercase;letter-spacing:.12em;color:var(--dc)}
.tb-dhead b{font:600 18px var(--head);flex:1}
.tb-detail .tb-body{padding:0}
@keyframes tbIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tb-head{appearance:none;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-content:start;gap:4px 8px;width:100%;height:86px;box-sizing:border-box;padding:12px 14px;background:none;border:0;text-align:left;color:var(--text);font:inherit;cursor:pointer}
.tb-head .tb-dom{font:700 11px var(--head);text-transform:uppercase;letter-spacing:.12em;color:var(--dc)}
.tb-head .lvl-pill{grid-row:1;grid-column:2}
.tb-head b{grid-column:1 / -1;font:600 16px var(--head);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-resolution:2dppx){.tech-bubble{border-width:.5px;border-color:var(--kc)}}
.tb-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.tb-body .btn{margin-top:4px}
@media(max-width:560px){.tech-bubbles{grid-template-columns:repeat(2,minmax(0,1fr))}.tb-head{height:80px;padding:11px 12px}.tb-head b{font-size:14px}}
/* Practice hub: exercise library main, learning shortcuts and master classes in a narrow right column */
.practice-cols{display:flex;flex-direction:column}
@media(min-width:1000px){
  .practice-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:0 24px;align-items:start}
  .v-practice .practice-cols .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:999px){.practice-cols .px-side{order:-1}}
.mastercard.compact .mc-intro{font-size:13px}
.mastercard.compact .mc-recs{grid-template-columns:1fr !important;gap:6px}
.mastercard.compact .mc-foryou{padding:10px;flex-wrap:wrap;align-items:flex-start}
.mastercard.compact .mc-foryou .mc-txt{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.mastercard.compact .mc-foryou .mc-txt .small{font-size:12.5px;line-height:1.4}
.mastercard.compact .mc-foryou .mc-go{flex-basis:100%;text-align:right}
.mastercard.compact .mc-rec .small{display:none}
.mastercard.compact .mc-ask input{font-size:14px}
.px-side .learn-links{margin-bottom:12px}

/* Course skill tree (video-game style): tiers of glowing orbs with progress rings and unlock lines */
.skilltree-card{overflow:hidden}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:4px 0 6px}
.stl{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:5px;vertical-align:-2px;border:2px solid var(--line)}
.stl.available{border-color:var(--amber);box-shadow:0 0 8px var(--amber)}.stl.in_progress{border-color:#4f9df5;background:conic-gradient(#4f9df5 50%,transparent 0)}.stl.mastered{background:linear-gradient(180deg,#ffd27a,#c47f0e);border-color:#ffd27a}.stl.locked{opacity:.5}.stl.due{border-color:#ff6b5a;box-shadow:0 0 8px #ff6b5a}
.skilltree{position:relative;padding:6px 0 10px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 60%)}
.st-lines{position:absolute;inset:0;pointer-events:none;overflow:visible}
.st-lines path{fill:none;stroke:#3d3644;stroke-width:3;stroke-linecap:round}
.st-lines path.lit{stroke:#c9932c;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 50%,transparent))}
.st-tier{position:relative;margin:18px 0 6px}
.st-tier-head{display:flex;gap:12px;align-items:flex-start;max-width:min(300px,40%);margin:0 0 10px 18px;text-align:left}
.st-tier+.st-tier{border-top:1px dashed rgba(255,255,255,.06);padding-top:14px}
@media(min-width:760px){.st-tier{min-height:120px}.st-tier-head{position:absolute;left:0;top:14px;max-width:min(240px,26%);margin:0 0 0 18px}.st-tier:first-child .st-tier-head{top:0}}
.st-nodes{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 26px}
.st-node{appearance:none;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;width:118px;padding:4px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;text-align:center}
.st-orb{--ring:var(--dc,#f5a524);position:relative;width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--ring) calc(var(--pct) * 1%),#2b2630 0);transition:transform .15s,box-shadow .15s}
.st-orb::before{content:'';position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3340,#17141a 70%);border:1px solid #4a4251}
.st-ic{position:relative;font-size:26px;line-height:1}
.st-node:hover .st-orb{transform:scale(1.06)}
.st-node:focus-visible{outline:none}.st-node:focus-visible .st-orb{box-shadow:0 0 0 3px var(--amber)}
.st-name{font:600 13px var(--head);line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.st-sub{color:var(--muted)}
.st-node.locked{filter:grayscale(1);opacity:.5}
.st-node.available .st-orb{box-shadow:0 0 0 2px var(--amber),0 0 18px color-mix(in srgb,var(--accent) 45%,transparent);animation:stGlow 2.4s ease-in-out infinite}
.st-node.in_progress .st-orb{box-shadow:0 0 14px rgba(79,157,245,.35)}
.st-node.mastered .st-orb{--ring:#ffd27a;box-shadow:0 0 0 2px #ffd27a,0 0 20px rgba(255,210,122,.55)}
.st-node.mastered .st-orb::before{background:radial-gradient(circle at 35% 30%,#ffe2a0,#c47f0e 75%);border-color:#ffd27a}
.st-node.mastered .st-ic{color:#3a2400}
.st-node.due .st-orb{box-shadow:0 0 0 2px #ff6b5a,0 0 18px rgba(255,107,90,.5)}
.st-node.next .st-name{color:var(--amber)}
.st-nextlbl{color:var(--amber)}
@keyframes stGlow{0%,100%{box-shadow:0 0 0 2px var(--amber),0 0 12px color-mix(in srgb,var(--accent) 35%,transparent)}50%{box-shadow:0 0 0 2px var(--amber),0 0 24px color-mix(in srgb,var(--accent) 60%,transparent)}}
@media(prefers-reduced-motion:reduce){.st-node.available .st-orb{animation:none}}
@media(max-width:560px){.st-node{width:96px}.st-orb{width:58px;height:58px}.st-ic{font-size:22px}.st-nodes{gap:14px 12px}.st-tier-head{max-width:none;margin-left:6px;position:relative;z-index:1;width:fit-content;padding:4px 8px 4px 0;background:var(--panel);border-radius:8px}}
@media(max-width:560px){.tech-filters .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-right:-16px;padding-right:16px}.tech-filters .chips::-webkit-scrollbar{display:none}.tech-filters .chip{flex:none;min-height:40px;padding:8px 14px}}
/* Technique library: the four small level pills, colored by band */
.lvl-dots{display:inline-flex;gap:3px;align-items:center}
.lvl-dots i{width:14px;height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.lvl-dots i.on{background:var(--lc);box-shadow:0 0 5px color-mix(in srgb,var(--lc) 55%,transparent)}
.lvl-num{margin-left:5px;font:700 13px var(--head);color:var(--lc);min-width:14px;text-align:right}
.tb-head .lvl-dots{grid-row:1;grid-column:2;align-self:center}
.lvl-key{display:inline-flex;flex-wrap:wrap;gap:4px 12px;align-items:center}
.lvl-key>span{display:inline-flex;align-items:center;gap:5px}
.lvl-sw{display:inline-block;width:14px;height:6px;border-radius:3px;background:var(--lc)}
.lv .lvl-dots{margin-left:8px}
.edges .lvl-dots,.e .h .lvl-dots{flex:none}
.tb-stages{display:flex;align-items:center;gap:8px}
/* Guest mode */
.guest-card .row{margin-top:10px;flex-wrap:wrap}
.guest-card ul{margin:6px 0 10px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.guest-note{border-style:dashed}
.guest-note p{margin:4px 0 10px}
.guest-line{padding:8px 10px;border-radius:10px;background:var(--inset);border:1px dashed var(--line)}
.guest-offer h3{margin-top:0}
/* The four-tier control (Foundations · Intermediate · Advanced · Mastery) */
.tier4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 14px}
.t4{appearance:none;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:52px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:600 15px var(--head);text-align:left;cursor:pointer}
.t4:hover{border-color:var(--amber)}
.t4.on{background:color-mix(in srgb,var(--amber) 16%,var(--panel));border-color:var(--amber);color:var(--text)}
.t4.rec:not(.on){border-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.t4-rec{font:700 10px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.t4-rec.soon{color:var(--muted)}
.t4.missing{opacity:.5;cursor:default}
.t4-sub{font:400 12px var(--body);color:var(--muted)}
.tier4.compact{gap:6px;margin:0 0 10px}
.tier4.compact .t4{min-height:40px;padding:7px 9px;font-size:13px}
@media(max-width:560px){.tier4{grid-template-columns:repeat(2,minmax(0,1fr))}.tier4.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.tier4.compact .t4{font-size:12px;padding:7px 6px}.tier4.compact .t4-rec{font-size:8.5px;letter-spacing:.04em}}
.custom .tier4,.pp-body .tier4{grid-template-columns:repeat(2,minmax(0,1fr))}
.custom .tier4.compact .t4,.pp-body .tier4.compact .t4{font-size:14px;padding:8px 10px}
.custom .tier4.compact .t4-rec,.pp-body .tier4.compact .t4-rec{font-size:9.5px;letter-spacing:.08em}
.closest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 12px}
.how-taught .ht-steps{margin:8px 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.how-taught .ht-steps li span{display:block;margin-top:2px}
.how-taught.pending{border-style:dashed}
.ht-src ul{margin:6px 0 0;padding-left:18px}
/* Note finder: levels, answering on the guitar, time limit */
.nf-modes{display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 6px}
.nf-time{height:5px;border-radius:3px;background:var(--inset);overflow:hidden;margin:6px 0 8px}
.nf-time i{display:block;height:100%;width:100%;background:var(--amber);transform-origin:left;animation:nfTime linear forwards}
@keyframes nfTime{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.nf-listen{display:flex;align-items:center;gap:10px;margin:8px 0}
.nf-mic{font:600 14px var(--head);color:var(--amber)}
.nf-meter{flex:1;max-width:220px;height:6px;border-radius:3px;background:var(--inset);overflow:hidden}
.nf-meter i{display:block;height:100%;width:0;background:#5cc46b;transition:width .08s}
.nf-custom summary{list-style:none;display:flex;align-items:baseline;gap:10px;cursor:pointer}
.nf-custom summary::-webkit-details-marker{display:none}
.nf-custom summary h3{margin:0}
.nf-custom[open] summary{margin-bottom:10px}
@media(prefers-reduced-motion:reduce){.nf-time i{animation:none}}