[hidden]{display:none !important}
:root{
  --bg:#0f1115; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --text:#e6e8ee; --muted:#9aa3b2; --accent:#ff5a3c; --accent2:#ffb03c; --ok:#3ccf91;
  --radius:10px; color-scheme:dark;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}
a{color:var(--accent2);text-decoration:none} a:hover{text-decoration:underline}
button,select{font:inherit;color:var(--text)}
.btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;white-space:nowrap;line-height:1.2}
.btn:hover{border-color:#3d4452;background:#252a35}
.btn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.armed{border-color:var(--accent2);color:var(--accent2)}
.btn:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.muted{color:var(--muted)}
kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:.85em;font-family:ui-monospace,monospace}

/* ---------- index ---------- */
.index{max-width:1100px;margin:0 auto;padding:32px 20px 60px}
.index header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.index h1{margin:0;font-size:28px;letter-spacing:.2px}
.index h1 span{color:var(--accent)}
.index .sub{color:var(--muted);margin-top:4px}
.search{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:var(--text);min-width:260px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 14px;color:var(--text);transition:border-color .15s,transform .15s}
.card:hover,.card:focus{border-color:var(--accent);text-decoration:none;transform:translateY(-1px);outline:none}
.card .t{font-size:19px;font-weight:650}
.card .a{color:var(--muted);margin-top:2px}
.card .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.tag{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.tag.ok{color:var(--ok);border-color:#22553f}
.tag.warn{color:var(--accent2);border-color:#5a4520}
.empty{color:var(--muted);padding:30px 0}
footer.idx{margin-top:36px;color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- practice ---------- */
body.practice{overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh}
.bar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.bar .title{font-weight:650;font-size:17px;margin-right:6px;white-space:nowrap}
.bar .title small{font-weight:400;color:var(--muted);margin-left:6px}
.bar .grp{display:flex;align-items:center;gap:4px;padding-left:8px;margin-left:0;border-left:1px solid var(--line)}
.bar .lbl{color:var(--muted);font-size:13px;margin-right:2px}
.bar .spacer{flex:1}
.bar select{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;min-width:92px;text-align:right}
.main{flex:1;display:flex;min-height:0}
.vpane{position:relative;background:#000;display:flex;align-items:center;justify-content:center;min-width:200px}
.vpane video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.vmsg{position:absolute;inset:auto 16px 16px 16px;background:rgba(20,22,28,.94);border:1px solid var(--accent);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.5;display:none}
.vmsg code{word-break:break-all;color:var(--accent2)}
.status{position:absolute;top:16px;left:50%;transform:translateX(-50%);background:rgba(10,12,16,.88);border:1px solid #3a4150;padding:10px 20px;border-radius:99px;font-size:22px;font-weight:650;pointer-events:none;opacity:0;transition:opacity .35s;white-space:nowrap;z-index:5;display:flex;align-items:center;gap:10px}
.status.show{opacity:1;transition:none}
.status kbd{font-size:15px}
.loopbadge{position:absolute;top:12px;right:12px;background:rgba(255,90,60,.9);color:#fff;font-size:13px;padding:3px 9px;border-radius:99px;display:none;font-variant-numeric:tabular-nums}
.divider{width:8px;cursor:col-resize;background:var(--line);flex:none;position:relative;touch-action:none}
.divider::after{content:"";position:absolute;top:50%;left:2px;width:4px;height:44px;margin-top:-22px;border-radius:3px;background:#4a5262}
.divider:hover,.divider.drag{background:#3a4150}
.tpane{flex:1;overflow-y:auto;overflow-x:auto;background:#1b1e25;min-width:200px;scroll-behavior:smooth}
.tpane.dragging{scroll-behavior:auto}
.pages{margin:0 auto;padding:10px;display:flex;flex-direction:column;gap:10px;align-items:center}
.pages img{display:block;width:100%;height:auto;background:#fff;border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.tpane.invert .pages img{filter:invert(.9) hue-rotate(180deg);background:#000}
.scrub{height:6px;background:#2a2f3a;position:relative;cursor:pointer}
.scrub .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:0}
.scrub .loop{position:absolute;top:0;bottom:0;background:rgba(255,176,60,.45);display:none}
.scrub:hover{height:10px;margin-top:-4px}
.files a{margin-right:2px}
.pbtn.trainerpb{text-decoration:none;color:var(--text);border-color:var(--accent2);padding:7px 10px;column-gap:6px}
.pbtn.trainerpb .pi{font-size:18px;min-width:20px}
.pbtn.trainerpb[hidden]{display:none}
.pbtn.trainerpb .caps{font-size:11px;color:var(--muted)}
.app{height:100dvh}
/* song page, responsive: phones stack the video over the tab; short (landscape phone) windows get a compact pedal row;
   big screens get bigger pedal buttons. The divider split is saved once you drag it (double-click: back to automatic). */
@media (max-width:800px){
  body.practice{overflow:hidden}
  .main{flex-direction:column} .divider{display:none}
  .vpane{flex:none !important;width:100% !important;height:auto;aspect-ratio:16/9;max-height:42vh}
  .app > .bar{row-gap:6px}
  .app{overflow-x:hidden}
  .app > .bar .grp{flex-wrap:wrap}
  /* the pedal row moves under the tab (thumb reach) and shows icons only */
  .pedal{order:5;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:6px 8px;border-top:1px solid var(--line);border-bottom:0}
  .pedal .plabel,.pedal .psep,.pedal .spacer,.pedal .lastkey,.pedal .pbtn .caps,.pedal .pbtn .pl,.pedal .speedbox .slabel{display:none}
  .pedal .pbtn{min-height:52px;display:flex;justify-content:center;align-items:center;padding:4px;min-width:0}
  .pedal .pbtn .pi{font-size:20px;min-width:0}
  .pedal .speedbox select{font-size:18px;min-width:0;width:100%;padding:2px}
}
@media (max-height:500px){
  .app > .bar{padding:4px 8px}
  .pedal{padding:4px 8px;gap:6px;flex-wrap:nowrap;overflow-x:auto}
  .pedal .pbtn{min-height:44px;padding:3px 8px}
  .pedal .pbtn .caps,.pedal .plabel,.pedal .lastkey{display:none}
  .pedal .speedbox select{font-size:20px;min-width:80px}
}
/* ultrawide: tab pages side by side, each about as tall as the pane, read left to right */
@media (min-aspect-ratio:12/5) and (min-height:600px){
  .tpane .pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc((100dvh - 150px) * .74)),1fr));align-items:start}
}
@media (min-width:2200px) and (min-height:1200px){
  .app > .bar{font-size:17px}
  .pedal .pbtn{min-height:clamp(60px,5.4vh,84px);padding:8px 18px}
  .pedal .pbtn .pl{font-size:clamp(16px,1.45vh,22px)}
  .pedal .pbtn .pi{font-size:clamp(22px,2vh,30px)}
  .pedal .speedbox select{font-size:clamp(30px,2.6vh,40px)}
}

/* ---------- pedal controls row ---------- */
.pedal{display:flex;align-items:stretch;gap:8px;padding:8px 12px;background:#13161c;border-bottom:1px solid var(--line);flex-wrap:wrap}
.plabel{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;line-height:1.25;align-self:center;margin-right:4px}
.psep{width:1px;background:var(--line);margin:0 4px}
.pbtn{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:7px 14px;cursor:pointer;min-height:60px;text-align:left}
.pbtn:hover{border-color:#4a5262;background:#262b36}
.pbtn:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.pbtn .pi{grid-row:1/3;font-size:22px;font-weight:700;min-width:30px;text-align:center;color:var(--accent2);font-variant-numeric:tabular-nums}
.pbtn .pl{font-size:16px;font-weight:600}
.pbtn .caps{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pbtn .caps kbd,.lastkey kbd{font-size:13px;padding:2px 8px;background:#0f1115;border-color:#3d4452;color:#fff}
.pbtn .or{font-size:11px;color:var(--muted)}
.pbtn .nokey,.nokey{font-size:12px;color:var(--accent2);font-style:italic}
.pbtn.playing{border-color:var(--ok)} .pbtn.playing .pi{color:var(--ok)}
.pbtn.hit{animation:hit .45s ease-out}
@keyframes hit{0%{background:var(--accent);border-color:var(--accent)}100%{background:var(--panel2)}}
.pbtn.gear .pi{color:var(--text)}
.speedbox{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 4px}
.speedbox select{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;background:#0f1115;border:2px solid #3d4452;border-radius:12px;padding:2px 8px;color:#fff;cursor:pointer;text-align:center;min-width:120px}
.speedbox select.slow{border-color:#3c8bff;color:#9cc4ff}
.speedbox select.fast{border-color:var(--accent2);color:var(--accent2)}
.speedbox .slabel{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.lastkey{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;text-align:center;align-self:center;line-height:1.9;min-width:80px}
.lastkey kbd{text-transform:none;letter-spacing:0}

/* ---------- remap modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:10}
.modal.show{display:flex}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 22px;width:min(860px,94vw);max-height:90vh;overflow:auto}
.mhead{display:flex;align-items:center;gap:8px}
.mhead h2{margin:0;font-size:21px}
.tester{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#0f1115;border:1px dashed #3d4452;border-radius:12px;padding:12px 16px;margin:6px 0 12px}
.tlabel{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tkey{font-size:34px;font-weight:800;font-family:ui-monospace,monospace;color:var(--accent2);margin:2px 0}
.tinfo{font-size:13px;color:var(--muted)}
.tinfo code{color:var(--text)}
.tmap{font-size:18px;text-align:right}
.warn{background:#3a2a12;border:1px solid var(--accent2);border-radius:10px;padding:10px 12px;margin-bottom:10px;line-height:2}
.maptable{width:100%;border-collapse:collapse}
.maptable td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.maptable tr.ghead th{text-align:left;padding:14px 8px 6px;font-size:12px;color:var(--accent2);text-transform:uppercase;letter-spacing:.08em}
.maptable td:first-child{width:34%}
.maptable td.ops{white-space:nowrap;text-align:right;width:1%}
.maptable td.ops .btn{margin-left:4px}
.maptable tr.capturing td{background:#2a1f12}
.listen{color:var(--accent2);font-weight:600;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.5}}
.chip{display:inline-flex;align-items:center;margin:2px 6px 2px 0}
.chip kbd{font-size:13px}
.chip .x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px;line-height:1}
.chip .x:hover{color:var(--accent)}
.export{margin-top:14px;color:var(--muted);font-size:14px}
.export textarea{width:100%;margin-top:8px;background:#0f1115;color:var(--text);border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,monospace;font-size:12px;padding:8px}
@media (max-width:1100px){ .pbtn .pl{font-size:14px} .pbtn{padding:6px 10px} }

/* ---------- song library ---------- */
.lib{max-width:1500px;margin:0 auto;padding:26px 20px 50px}
.libhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px}
/* v2.4.8: on phones the header wraps instead of pushing the page sideways (bands.html "All N songs" button made it 435 px wide,
   so the fixed Help / Report buttons sat off-screen to the right) */
@media (max-width:600px){.libhead{flex-wrap:wrap}}
.libhead h1{margin:0;font-size:28px} .libhead h1 span{color:var(--accent)}
.libhead .sub{color:var(--muted);margin-top:4px}
.viewtoggle{display:flex;gap:4px}
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.filters label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.filters select,.filters input[type=number]{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;color:var(--text);font:inherit;font-size:14px}
.filters select{max-width:200px}
.filters input[type=number]{width:72px}
.filters .search{flex:1 1 280px;min-width:240px}
.filters .chk input{accent-color:var(--accent);width:16px;height:16px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.songs{width:100%;border-collapse:collapse;font-size:14px}
table.songs th{position:sticky;top:0;background:var(--panel2);text-align:left;font-weight:600;color:var(--muted);padding:10px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
table.songs th:hover{color:var(--text)}
table.songs th.sorted{color:var(--accent2)}
table.songs th[data-dir]::after{content:attr(data-dir);font-size:10px;margin-left:5px}
table.songs td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.songs tr[data-song]{cursor:pointer}
table.songs tr[data-song]:hover td,table.songs tr[data-song]:focus td{background:#1c2029;outline:none}
table.songs td.t a{color:var(--text);font-weight:650;font-size:15px}
table.songs .num{text-align:right;font-variant-numeric:tabular-nums}
table.songs td.media{white-space:nowrap}
.prog{white-space:nowrap;line-height:1.55}
.prog .sec{display:inline-block;min-width:52px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.prog.est{color:#c9ced8}
.unk{color:#5c6474;font-style:italic}
.card .facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:14px}
.card .cprog{margin-top:8px;font-size:13px}
.card .cprog .prog{white-space:normal}
.speedbox .bpm{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;margin-top:1px}

/* ---------- bands ---------- */
body[data-mode="band"] .band-col{display:none}
.crumbs{font-size:14px;margin-bottom:4px}
.crumbs a{color:var(--muted)}
h2.sect{font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:22px 0 10px}
.grid.bands{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card.band .t{font-size:22px}
.card.band .count{color:var(--accent2);margin-top:4px;font-size:15px}
.card.band .count b{font-size:20px}
.card.band .a{margin-top:8px;font-size:13px}
.homesearch .search{font-size:16px;padding:11px 14px}
.quick{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 10px 10px;margin-bottom:10px}
table.songs.mini td{padding:7px 8px}
.quick .more{padding:8px 8px 0;font-size:14px}

/* song page: chapters + no-tab message */
select.chapters{max-width:220px;font-size:13px}
.notab{padding:24px 28px;max-width:640px;line-height:1.5}
.notab b{font-size:18px}
.tag.comp{color:#9bc1ff;border-color:#2c4a7a}

/* =====================================================================
   Landing page, top nav, band covers, lessons
   ===================================================================== */
:root{--display:"Arial Black","Helvetica Neue",system-ui,sans-serif;--script:Georgia,"Times New Roman",serif}
body.landing,body.bandspage,body.lessonspage,body.library{background:radial-gradient(1200px 600px at 85% -10%,rgba(255,90,60,.07),transparent 60%),var(--bg);background-attachment:fixed}

/* top nav */
.topnav{display:flex;align-items:center;gap:22px;padding:14px 28px;position:relative;z-index:4}
.topnav.solid{background:rgba(15,17,21,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0}
.topnav .brand{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:800;font-size:18px;letter-spacing:.2px}
.topnav .brand img{width:26px;height:26px}
.topnav .brand span{color:var(--accent)}
.topnav .brand:hover{text-decoration:none}
.navlinks{display:flex;gap:4px;margin-left:auto}
.navlinks a{color:#c4cad6;padding:7px 14px;border-radius:99px;font-weight:600;font-size:15px;border:1px solid transparent}
.navlinks a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.navlinks a[aria-current="page"]{color:#fff;border-color:rgba(255,90,60,.6);background:rgba(255,90,60,.12)}

/* hero */
.hero{position:relative;min-height:540px;background:
  linear-gradient(90deg,rgba(15,17,21,.96) 0%,rgba(15,17,21,.78) 34%,rgba(15,17,21,.15) 62%,rgba(15,17,21,0) 80%),
  linear-gradient(180deg,rgba(15,17,21,0) 70%,var(--bg) 100%),
  linear-gradient(180deg,rgba(15,17,21,.88) 0,rgba(15,17,21,.45) 70px,rgba(15,17,21,0) 130px),
  url(../assets/hero-guitar.svg) right center/cover no-repeat,#12141a}
.hero-in{position:relative;z-index:3;max-width:1500px;margin:0 auto;padding:56px 48px 120px}
.kicker{display:inline-block;color:var(--accent2);font-weight:700;text-transform:uppercase;letter-spacing:.32em;font-size:13px;margin-bottom:14px}
.kicker::before{content:"";display:inline-block;width:34px;height:2px;background:var(--accent);vertical-align:middle;margin-right:12px}
.mega{margin:0;line-height:.9;font-size:clamp(60px,7.2vw,118px);letter-spacing:-.02em}
.mega .w1{font-family:var(--display);font-weight:900;text-transform:uppercase;color:#f4f1ea;text-shadow:0 6px 30px rgba(0,0,0,.6)}
.mega .w2{display:block;font-family:var(--script);font-style:italic;font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(90deg,#ff5a3c 0%,#ff8a3c 45%,#ffd06a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .06em .08em 0;filter:drop-shadow(0 6px 24px rgba(255,90,60,.25))}
.lede{color:#c4cad6;font-size:19px;max-width:620px;margin:18px 0 22px;line-height:1.5}
.lede b{color:#fff}
.herosearch{position:relative;max-width:640px}
.herosearch .search{width:100%;font-size:17px;padding:15px 50px 15px 20px;border-radius:14px;background:rgba(23,26,33,.92);border:1px solid #39404e;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.herosearch .search:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(255,176,60,.18),0 10px 40px rgba(0,0,0,.45)}
.herosearch .slash{position:absolute;right:16px;top:15px;pointer-events:none;color:var(--muted)}
.herosearch .quick{position:absolute;left:0;top:calc(100% + 8px);width:min(980px,calc(100vw - 96px));z-index:20;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:60vh;overflow:auto}
.herolinks{margin-top:14px;font-size:15px}
.herolinks a{color:var(--muted)} .herolinks a:hover{color:var(--accent2)}

/* tiles */
.landing-main{max-width:1500px;margin:-108px auto 0;padding:0 48px 60px;position:relative;z-index:5}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.tiles .tile{grid-column:span 2}
.tiles .t-songs{grid-column:span 2}
.tiles .t-trainer{grid-column:span 2;min-height:240px}
.tiles .t-drills,.tiles .t-feedback{grid-column:span 3;min-height:240px}   /* v2.4.4: trainer joins the 3-up row, Drills + Feedback share the last row */
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:300px;border-radius:20px;overflow:hidden;color:var(--text);
  background:linear-gradient(160deg,#1d212b,#14171d);border:1px solid #2c323e;box-shadow:0 18px 50px rgba(0,0,0,.45);transition:transform .2s,border-color .2s,box-shadow .2s;isolation:isolate}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:var(--accent);text-decoration:none;box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px var(--accent);outline:none}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,17,21,0) 20%,rgba(15,17,21,.75) 58%,rgba(15,17,21,.97) 100%)}
.tile-body{padding:22px 26px 24px}
.tile .tnum{font-family:var(--display);font-size:13px;color:var(--accent2);letter-spacing:.2em}
.tile h2{margin:2px 0 6px;font-family:var(--display);font-weight:900;font-size:40px;letter-spacing:-.01em;text-transform:uppercase}
.tile p{margin:0 0 14px;color:#c4cad6;line-height:1.45;font-size:15px;max-width:440px}
.tile .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;background:var(--accent);padding:8px 16px;border-radius:99px;font-size:14px}
.tile .go b{transition:transform .2s}
.tile:hover .go b{transform:translateX(4px)}
.tile-art{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.collage{position:absolute;inset:0;z-index:-2;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);transform:rotate(-6deg) scale(1.25);transform-origin:60% 40%}
.collage img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1)}
.t-songs:hover .collage{transform:rotate(-6deg) scale(1.3);transition:transform .6s}
.t-jam{background:radial-gradient(400px 220px at 70% 0%,rgba(255,90,60,.28),transparent 70%),linear-gradient(160deg,#241a1d,#14171d)}
.eq .b{transform-box:fill-box;transform-origin:50% 100%;animation:eq 1.6s ease-in-out infinite alternate;opacity:.85}
.eq .b2{animation-delay:-.4s}.eq .b3{animation-delay:-1.1s}.eq .b4{animation-delay:-.7s}.eq .b5{animation-delay:-1.4s}
.eq .b6{animation-delay:-.2s}.eq .b7{animation-delay:-.9s}.eq .b8{animation-delay:-1.3s}.eq .b9{animation-delay:-.5s}.eq .b10{animation-delay:-1s}
@keyframes eq{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.eq .b{animation:none}}
.t-lessons{background:radial-gradient(420px 240px at 80% 10%,rgba(255,176,60,.18),transparent 70%),linear-gradient(160deg,#20201a,#14171d)}
.fret{opacity:.9}
.t-trainer{background:radial-gradient(420px 240px at 30% 10%,rgba(90,160,255,.18),transparent 70%),linear-gradient(160deg,#1a1e27,#14171d)}
.tabart{opacity:.6}
.t-feedback{background:radial-gradient(420px 240px at 50% 0%,rgba(90,200,255,.2),transparent 70%),linear-gradient(160deg,#18212a,#14171d)}
.wave{opacity:.45}
@media (max-width:1450px){.tiles{grid-template-columns:1fr 1fr}.tiles .tile{grid-column:auto}.tiles .t-feedback{grid-column:auto}.tile h2{font-size:36px}}   /* v2.4.4: Drills + Feedback pair up */

/* album shelf */
.shelf{margin-top:38px}
.shelfrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.lp{display:block;color:var(--text)}
.lp:hover{text-decoration:none}
.lp img.cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block;box-shadow:0 10px 26px rgba(0,0,0,.5);transition:transform .2s}
.lp:hover img.cover{transform:translateY(-3px) rotate(-1deg)}
.lp .lpt{display:block;margin-top:8px;font-weight:650;font-size:14px;line-height:1.25}
.lp .lpa{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* pages under the top nav */
.pagehead h1{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:40px;letter-spacing:-.01em}
.libhead .headtext{flex:1;min-width:0}
.libhead .crumbs{color:var(--muted)}
img.bandcover{width:120px;height:120px;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.5);border:1px solid var(--line);flex:none;align-self:center}
body[data-mode="band"] #libTitle{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:38px;letter-spacing:-.01em}

/* band cover cards */
.grid.bands.covers{grid-template-columns:repeat(auto-fill,minmax(640px,1fr));gap:24px}
.card.band.cover{padding:0;overflow:hidden;border-radius:18px;display:flex;flex-direction:row;background:linear-gradient(110deg,#1b1f28,#14171d);min-height:300px}
.card.band.cover:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.card.band .cv{position:relative;width:300px;flex:none;aspect-ratio:1/1;overflow:hidden;background:#0b0c0f}
.card.band .cv img.cover{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card.band:hover .cv img.cover{transform:scale(1.04)}
.card.band .cv::after{content:"";position:absolute;inset:0 0 0 auto;width:30%;background:linear-gradient(90deg,transparent,rgba(27,31,40,.9))}
.card.band .cvl{position:absolute;left:14px;bottom:12px;z-index:1;font-size:12px;color:#d7dbe4;background:rgba(15,17,21,.7);border:1px solid rgba(255,255,255,.12);padding:3px 9px;border-radius:99px}
.card.band .cb{padding:24px 28px 22px;display:flex;flex-direction:column;min-width:0}
.card.band.cover .t{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:30px;line-height:1.05;letter-spacing:-.01em}
.card.band.cover .count{margin-top:10px}
.card.band.cover .tags{margin-top:auto;padding-top:14px}
.card.band .open{color:var(--accent2);font-weight:700;font-size:14px;margin-top:14px}
@media (max-width:760px){.grid.bands.covers{grid-template-columns:1fr}.card.band.cover{flex-direction:column}.card.band .cv{width:100%}}
.card.band .minis{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.card.band .minis img.mini{width:40px;height:40px;border-radius:5px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.card.band .minis .more{font-size:12px;color:var(--muted);align-self:center;margin-left:4px}

/* album thumbs in song lists */
table.songs td.t a{display:inline-flex;align-items:center;gap:10px}
table.songs img.thumb{width:36px;height:36px;border-radius:5px;object-fit:cover;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.45);display:block}
table.songs td.t{min-width:200px}
table.songs.mini td.art{width:44px;padding-right:0}
table.songs.mini img.thumb{width:32px;height:32px}
.card.song .chead{display:flex;gap:12px;align-items:center}
.card.song img.art{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none;box-shadow:0 4px 12px rgba(0,0,0,.45)}

/* song page title art */
.bar .title{display:flex;align-items:center;gap:6px;margin-right:0}
.bar img.albumart{width:24px;height:24px;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.5)}

/* lessons */
.lib.narrow{max-width:1200px}
.lesson{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin-bottom:22px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.lesson.soon{background:transparent;border-style:dashed;box-shadow:none}
.lesson.soon h2{margin:0 0 6px;font-size:18px}
.lhead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lhead h2{margin:4px 0 0;font-size:30px}
.lhead .kicker{margin:0;font-size:12px}
.btn.big{font-size:16px;font-weight:700;padding:11px 20px;border-radius:99px;background:var(--accent);border-color:var(--accent);color:#fff}
.btn.big:hover{background:#ff7255}
.lblurb{color:#c4cad6;font-size:16px;line-height:1.55;max-width:820px}
.lfacts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px}
.lfacts .tag{font-size:13px;padding:4px 11px}
.lgrid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.lesson h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:10px 0 10px}
.pgpart{margin-bottom:14px}
.pgname{font-size:13px;color:var(--accent2);margin-bottom:6px;font-weight:600}
.pg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pg .pbar{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 10px 7px;display:flex;flex-direction:column;align-items:flex-start}
.pg .pbar b{font-size:18px}
.pg .pbar span{font-size:12px;color:var(--muted)}
.pg .pbar i{position:absolute;top:5px;right:8px;font-style:normal;font-size:10px;color:#5c6474}
/* v2.3.0: css/next.css also defines .pbar / .pbar i (a progress bar: height 8px, overflow hidden, gradient) and both
   files load on lessons.html, which squashed these bars to 8 px; undo those properties for the progression grid. */
.pg .pbar{height:auto;overflow:visible;margin:0}
.pg .pbar i{display:inline;height:auto;background:none;border-radius:0}
.pg .pbar.qc{border-color:var(--accent);background:rgba(255,90,60,.1)}
.legend{font-size:13px;color:var(--muted);margin-top:6px}
.legend .dot.root{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:11px;margin-right:4px}
.tips{line-height:1.7;color:#d3d7df;margin:0 0 12px;padding-left:20px}
.small{font-size:13px}
code{font-family:ui-monospace,monospace;font-size:.9em;color:var(--accent2)}

@media (max-width:1100px){
  .tiles{grid-template-columns:1fr}
  .tiles .tile,.tiles .t-feedback{grid-column:auto}
  .hero-in{padding:40px 24px 120px} .landing-main{padding:0 24px 50px}
  .lgrid{grid-template-columns:1fr}
  .navlinks a{padding:6px 9px}
}
/* keep the quick-search dropdown above the tiles while searching */
.hero-in:focus-within,.hero-in:has(.quick:not([hidden])){z-index:7}

/* ---------- in-page guidance (js/help.js) ---------- */
.tipstrip{display:flex;align-items:flex-start;gap:12px;padding:9px 14px;background:linear-gradient(90deg,rgba(255,176,60,.13),rgba(255,176,60,.04));
  border:1px solid rgba(255,176,60,.35);border-left:4px solid var(--accent2);color:#dfe3ea;font-size:14px;line-height:1.45}
.tipstrip[hidden]{display:none}
.tipstrip .tipico{font-size:18px;line-height:1.3}
.tipstrip .tipbody{flex:1;min-width:0}
.tipstrip .tiptitle{color:var(--accent2);font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-right:8px}
.tipstrip ul{display:inline;margin:0;padding:0;list-style:none}
.tipstrip li{display:inline}
.tipstrip li+li::before{content:"·";color:var(--accent2);font-weight:800;margin:0 9px}
.tipstrip kbd{font-size:12px;padding:0 5px;margin:0 1px}
.tipstrip .tipacts{display:flex;align-items:center;gap:10px;flex:none}
.tipstrip .tipmore{font-weight:650;white-space:nowrap}
.tipstrip .tipclose{padding:4px 10px;font-size:13px}
.app .tipstrip,.tapp .tipstrip{border-width:0 0 1px 4px;border-radius:0;flex:none}
.lib .tipstrip{border-radius:12px;margin:0 0 14px}
/* v2.4.8: the "?" help button and the 🐞 Report button (css/report.css) share one bottom-right row: help at the corner,
   Report to its left with a --gp-fab-gap gap, both 40 px tall, both clear of the iPhone safe areas (home bar, notch in landscape).
   The row position lives in these variables so page overrides (body.practice) move both buttons together. */
:root{--gp-fab-right:18px;--gp-fab-bottom:18px;--gp-fab-size:40px;--gp-fab-gap:10px}
body.practice{--gp-fab-bottom:26px}
.helpfab{position:fixed;right:calc(var(--gp-fab-right) + env(safe-area-inset-right,0px));bottom:calc(var(--gp-fab-bottom) + env(safe-area-inset-bottom,0px));
  z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.helpbtn{width:40px;height:40px;border-radius:50%;border:1px solid #4a5262;background:rgba(30,34,43,.92);color:var(--accent2);font:800 20px/1 system-ui,sans-serif;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5);opacity:.85}
.helpbtn:hover,.helpbtn[aria-expanded="true"]{opacity:1;border-color:var(--accent2)}
.helpmenu{background:#1b1f28;border:1px solid #3a4150;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.6);padding:6px;min-width:240px}
.helpmenu[hidden]{display:none}
.helpmenu .hm-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 12px;color:var(--text);font-size:14px;cursor:pointer;font-family:inherit}
.helpmenu .hm-item:hover{background:rgba(255,255,255,.07);text-decoration:none}

/* ---------- help.html ---------- */
.helppage .hwrap{max-width:1240px;margin:0 auto;padding:26px 40px 70px;display:grid;grid-template-columns:230px 1fr;gap:40px}
.helppage .htoc{position:sticky;top:84px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:15px}
.helppage .htoc b{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px 12px}
.helppage .htoc a{color:#c4cad6;padding:7px 12px;border-radius:8px;border-left:3px solid transparent}
.helppage .htoc a:hover{background:rgba(255,255,255,.05);text-decoration:none}
.helppage .htoc a.on{color:#fff;border-left-color:var(--accent);background:rgba(255,90,60,.08)}
.helppage h1{font-family:var(--display);font-weight:900;font-size:46px;margin:6px 0 4px;text-transform:uppercase;letter-spacing:-.01em}
.helppage h1 span{color:var(--accent)}
.helppage .lede{color:var(--muted);font-size:17px;margin:0 0 18px;max-width:760px}
.helppage section.hs{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 26px 18px;margin:0 0 20px;scroll-margin-top:84px}
.helppage section.hs:target{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.helppage h2{margin:0 0 10px;font-size:24px;display:flex;align-items:center;gap:10px}
.helppage h2 .hi{font-size:22px}
.helppage h2 a.open{margin-left:auto;font-size:14px;font-weight:650}
.helppage h3{margin:16px 0 6px;font-size:16px;color:var(--accent2)}
.helppage p,.helppage li{line-height:1.6;color:#d3d7df}
.helppage ul,.helppage ol{padding-left:22px;margin:6px 0 10px}
.helppage table.keys{border-collapse:collapse;margin:6px 0 12px;font-size:14px;min-width:420px}
.helppage table.keys td,.helppage table.keys th{border-bottom:1px solid var(--line);padding:6px 12px 6px 0;text-align:left;vertical-align:top}
.helppage table.keys th{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
/* v2.4.2: the 420 px table minimum and long code URLs made Help scroll sideways on a 390 px iPhone (WebKit); on phones they wrap */
@media (max-width:520px){.helppage .hs code{overflow-wrap:anywhere}.helppage table.keys{min-width:0;width:100%}.helppage table.keys td,.helppage table.keys th{padding-right:8px;overflow-wrap:anywhere}}
.helppage .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 30px}
.helppage .note{border-left:3px solid var(--accent2);background:rgba(255,176,60,.07);padding:8px 14px;border-radius:0 8px 8px 0;margin:10px 0}
.helppage .sw{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-1px;margin-right:4px}
@media (max-width:900px){.helppage .hwrap{grid-template-columns:1fr;padding:20px}.helppage .htoc{position:static;flex-direction:row;flex-wrap:wrap}}

/* ---------- chord sheet in the tab pane (js/chordsheet.js injects its own panel styles) ---------- */
.pages.sheet{display:block;padding:0;align-items:stretch}
.tpane.invert .pages.sheet{filter:none}
.topnav .navlinks a.navlow{opacity:.62;font-size:.88em;font-weight:500}   /* v2.3.0: owner-only "Archive" entry (js/sync.js): present but low-key */
.topnav .navlinks a.navlow:hover,.topnav .navlinks a.navlow[aria-current]{opacity:1}


/* v2.3.3 overlearn: compact repeat select + ↑× (then-faster) in the Loop group */
.grp .loopreps{min-width:2.6em;max-width:3.6em;padding:4px 4px;font-variant-numeric:tabular-nums;font-weight:700}
#btnThenFaster{min-width:2.4em;padding:6px 8px;font-weight:700}
#btnThenFaster.on{border-color:var(--accent2);color:var(--accent2)}
#btnThenFaster:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:1600px){
  .bar .grp .lbl{display:none}          /* drop "Loop"/"Tab"/"View" labels to keep one row */
  .grp .loopreps{min-width:2.4em;font-size:13px}
}
@media (max-width:720px){
  .grp .loopreps{min-width:2.4em;font-size:13px}
  #btnThenFaster{font-size:13px;padding:4px 6px}
}

/* v2.4.4: Drills tile on the home page */
.t-drills{background:radial-gradient(420px 240px at 70% 10%,rgba(60,207,145,.18),transparent 70%),linear-gradient(160deg,#18241f,#14171d)}
.drillart{opacity:.5}
/* v2.4.4: phones. The nav used to be a ~180 px sideways scroller with a hidden scrollbar next to the brand, so only
   2 links showed and everything from "Practice" on (incl. Drills) was off-screen with no hint. Now the links get their
   own full-width row under the brand and wrap, so every link (Drills too) is visible without scrolling. */
@media (max-width:720px){
  body .topnav{flex-wrap:wrap;row-gap:6px}
  body .topnav .navlinks{flex:1 1 100%;margin-left:0;flex-wrap:wrap;overflow:visible;gap:4px 2px}
  body .topnav .navlinks a{padding:5px 9px;font-size:14px}
}
/* v2.5.0 (backlog #24): song page on a phone. With the first-visit tips open the strip used to squeeze the video + tab
   pane to 0 px and the pedal row overlapped the video. Now the page scrolls instead of squeezing: the chord facts are one
   sideways-scrolling line, the tip strip is at most ~5 lines (it scrolls inside), the video + tab get at least 56 % of the
   screen, the pedal row sticks to the bottom (thumb reach) and the floating ? / 🐞 buttons sit just above it. */
@media (max-width:800px){
  body.practice{overflow-x:hidden;overflow-y:auto}
  body.practice .app{height:auto;min-height:100dvh;overflow-x:clip;overflow-y:visible}   /* clip, not hidden: hidden made .app a scroll box and broke the sticky pedal row */
  body.practice .songfacts{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.practice .songfacts::-webkit-scrollbar{display:none}
  body.practice .tipstrip{max-height:118px;overflow-y:auto;overscroll-behavior:contain;flex-wrap:wrap;font-size:13.5px}
  body.practice .tipstrip .tipacts{order:-1;flex:1 1 100%;justify-content:flex-end}
  body.practice .main{flex:none;height:max(380px,64dvh);min-height:0}
  body.practice .pedal{position:sticky;bottom:0;z-index:20;background:var(--panel);padding-bottom:max(6px,env(safe-area-inset-bottom))}
  body.practice{--gp-fab-bottom:150px}
}