/* =====================================================================
   Dad Songs: worn truck dash, woodgrain, amber VFD glow.
   ===================================================================== */
@font-face{font-family:"Alfa Slab One";src:url(/assets/fonts/AlfaSlabOne-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(/assets/fonts/VT323-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:500;src:url(/assets/fonts/BarlowCondensed-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:600;src:url(/assets/fonts/BarlowCondensed-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow Condensed";font-weight:700;src:url(/assets/fonts/BarlowCondensed-700.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:400;src:url(/assets/fonts/Barlow-400.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:500;src:url(/assets/fonts/Barlow-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Barlow";font-weight:600;src:url(/assets/fonts/Barlow-600.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Permanent Marker";src:url(/assets/fonts/PermanentMarker-400.woff2) format("woff2");font-display:swap}

:root{
  --bg:#0d0907; --bg2:#15100c; --ink:#f3e6cf; --muted:#a8957a; --dim:#6f604d;
  --amber:#ffb547; --amber-hot:#ffd58a; --amber-dim:#8a5a1c; --glass:#0a0705;
  --accent:#ffb547; --line:rgba(255,214,160,.12); --r:18px;
  --f-slab:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --f-vfd:"VT323","Courier New",monospace;
  --f-cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Permanent Marker","Comic Sans MS",cursive;
  --mini-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:400 17px/1.55 var(--f-body);
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(255,170,70,.10),transparent 60%),
    radial-gradient(900px 700px at 100% 100%,rgba(120,50,10,.18),transparent 60%),
    url(/assets/img/vinyl.png) 0 0/384px,
    var(--bg);
  background-blend-mode:normal,normal,soft-light,normal;
  overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--amber-hot)}
button{font:inherit;color:inherit}
svg{width:1em;height:1em;fill:currentColor;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--amber);color:#1a0f05;padding:8px 14px;border-radius:8px;font:700 15px var(--f-cond)}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--amber-hot);outline-offset:3px}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;background:url(/assets/img/grain.png);opacity:.22;mix-blend-mode:overlay}
[hidden]{display:none!important}

/* ---------------------------------------------------------------- top bar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px clamp(14px,3vw,36px);background:linear-gradient(180deg,rgba(13,9,7,.96),rgba(13,9,7,.82));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{text-decoration:none;display:flex;align-items:center}
.brand__badge{display:inline-flex;gap:.42em;align-items:center;font:400 22px/1 var(--f-slab);letter-spacing:.06em;color:#1b1006;
  padding:7px 16px 6px;border-radius:999px;
  background:linear-gradient(180deg,#ffe2a6 0%,#ffb547 48%,#c97a1d 52%,#f3a53a 100%);
  box-shadow:0 0 0 2px #2a1a0c,0 0 0 4px #b9b2a6,0 0 0 5px #4a443c,0 6px 18px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:0 1px 0 rgba(255,240,210,.55)}
.topnav{display:flex;align-items:center;gap:clamp(10px,2vw,26px);font:600 15px var(--f-cond);letter-spacing:.14em;text-transform:uppercase}
.topnav a{color:var(--muted);text-decoration:none}
.topnav a:hover{color:var(--amber-hot)}
.btn-install{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--amber-dim);background:rgba(255,181,71,.08);color:var(--amber-hot);
  padding:7px 12px;border-radius:10px;font:600 14px var(--f-cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.btn-install svg{font-size:18px}

/* ---------------------------------------------------------------- the dash */
main{display:block}
.dash{padding:clamp(14px,3vw,40px) clamp(10px,3vw,36px) 10px;max-width:1360px;margin:0 auto}
.dash__panel{position:relative;display:grid;gap:clamp(16px,2.2vw,28px);
  grid-template-columns:minmax(220px,300px) minmax(0,1fr) minmax(300px,400px);grid-template-areas:"deck console lyrics";
  padding:clamp(18px,2.6vw,34px);border-radius:28px;
  background:
    linear-gradient(180deg,rgba(255,220,170,.10),rgba(0,0,0,0) 18%,rgba(0,0,0,.25) 100%),
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 30%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.35)),
    url(/assets/img/wood.webp) center/900px auto,#2a170c;
  box-shadow:0 0 0 1px #070403,0 0 0 4px #3b3631,0 0 0 5px #8e877c,0 0 0 7px #2a2622,0 30px 80px rgba(0,0,0,.6),
    inset 0 2px 0 rgba(255,230,190,.18),inset 0 -20px 40px rgba(0,0,0,.35)}
.lyrics-closed .dash__panel{grid-template-columns:minmax(220px,320px) minmax(0,1fr);grid-template-areas:"deck console"}
.dash__screws i{position:absolute;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#e9e3d8,#7c766c 60%,#3a3530);box-shadow:0 1px 2px rgba(0,0,0,.7)}
.dash__screws i::after{content:"";position:absolute;left:2px;right:2px;top:5px;height:2px;background:#3a342d;transform:rotate(35deg)}
.dash__screws i:nth-child(1){left:12px;top:12px}.dash__screws i:nth-child(2){right:12px;top:12px}
.dash__screws i:nth-child(3){left:12px;bottom:12px}.dash__screws i:nth-child(4){right:12px;bottom:12px}

/* cover deck */
.deck{grid-area:deck;display:flex;flex-direction:column;gap:12px;align-self:start}
.deck__art{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 3px #15100b,0 0 0 5px #9a9387,0 0 0 6px #3a352f,0 14px 30px rgba(0,0,0,.6)}
.deck__art img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.deck__glare{position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.16),transparent 38%,transparent 70%,rgba(255,200,140,.08));pointer-events:none}
.deck__label{display:flex;gap:12px;justify-content:center;align-items:baseline;font:400 22px/1 var(--f-vfd);color:var(--amber);letter-spacing:.12em;
  background:var(--glass);padding:7px 10px 5px;border-radius:8px;box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,230,190,.15);
  text-shadow:0 0 8px rgba(255,181,71,.6)}

/* console */
.console{grid-area:console;display:flex;flex-direction:column;gap:16px;min-width:0}
.vfd{position:relative;padding:14px 18px 12px;border-radius:14px;background:var(--glass);overflow:hidden;
  box-shadow:inset 0 3px 14px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,181,71,.10),0 1px 0 rgba(255,230,190,.18),0 0 0 3px #1a120b;
  color:var(--amber);text-shadow:0 0 6px rgba(255,170,60,.75),0 0 18px rgba(255,150,40,.35)}
.vfd::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.28) 2px 3px),radial-gradient(ellipse at 50% 0,rgba(255,190,110,.10),transparent 70%)}
.vfd__row{display:flex;align-items:center;gap:12px;font:400 20px/1 var(--f-vfd);letter-spacing:.14em}
.vfd__tag{flex:1}
.vfd__mode{opacity:.75}
.vfd__eq{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.vfd__eq i{width:4px;height:3px;background:var(--amber);box-shadow:0 0 6px rgba(255,170,60,.8)}
.is-playing .vfd__eq i{animation:eq 1s infinite ease-in-out alternate}
.vfd__eq i:nth-child(2){animation-delay:-.4s!important}.vfd__eq i:nth-child(3){animation-delay:-.7s!important}
.vfd__eq i:nth-child(4){animation-delay:-.2s!important}.vfd__eq i:nth-child(5){animation-delay:-.55s!important}
@keyframes eq{0%{height:3px}50%{height:14px}100%{height:6px}}
.vfd__title{margin:10px 0 4px;font:400 clamp(34px,3.6vw,54px)/.95 var(--f-vfd);letter-spacing:.04em;color:var(--amber-hot);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.vfd__artist{font:400 24px/1.1 var(--f-vfd);letter-spacing:.12em;color:var(--amber);opacity:.85;min-height:1.1em;text-transform:uppercase}
.vfd__time{margin-top:6px;font:400 30px/1 var(--f-vfd);letter-spacing:.06em;display:flex;gap:8px}
.vfd__sep{opacity:.5}

/* tuning-dial seek */
.dial{position:relative;padding:6px 0 18px}
.dial__ticks{position:absolute;left:5px;right:5px;bottom:0;height:12px;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(90deg,rgba(243,230,207,.75) 0 2px,transparent 2px 10%) left top/100% 12px no-repeat,
             repeating-linear-gradient(90deg,rgba(168,149,122,.6) 0 1px,transparent 1px 2.5%) left bottom/100% 6px no-repeat}
.range{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer;margin:0;--p:0%}
.range::-webkit-slider-runnable-track{height:10px;border-radius:6px;
  background:linear-gradient(90deg,var(--accent) 0,var(--amber) var(--p),#1a120b var(--p));box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 rgba(255,230,190,.15)}
.range::-moz-range-track{height:10px;border-radius:6px;background:#1a120b;box-shadow:inset 0 2px 4px rgba(0,0,0,.8)}
.range::-moz-range-progress{height:10px;border-radius:6px;background:linear-gradient(90deg,var(--accent),var(--amber))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:30px;margin-top:-10px;border-radius:3px;border:0;
  background:linear-gradient(90deg,#ff9b2f,#ffe0a0,#ff9b2f);box-shadow:0 0 10px rgba(255,170,60,.9),0 2px 4px rgba(0,0,0,.6)}
.range::-moz-range-thumb{width:10px;height:30px;border-radius:3px;border:0;background:linear-gradient(90deg,#ff9b2f,#ffe0a0,#ff9b2f);box-shadow:0 0 10px rgba(255,170,60,.9)}
.range--vol::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--amber) var(--p),#1a120b var(--p))}
.range--vol::-webkit-slider-thumb{width:22px;height:22px;margin-top:-8px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f4efe6,#9b958a 55%,#4b463f);box-shadow:0 2px 5px rgba(0,0,0,.7),0 0 0 2px #1a120b}
.range--vol::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#f4efe6,#9b958a 55%,#4b463f)}

/* transport: chunky dash buttons */
.transport{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px)}
.tbtn{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;border:0;cursor:pointer;color:var(--amber-hot);
  background:linear-gradient(180deg,#3a2d22,#1d150f);font-size:24px;
  box-shadow:0 0 0 2px #0b0705,0 0 0 3px #5d554b,0 6px 0 #0b0705,0 8px 14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,190,.25);
  transition:transform .08s,box-shadow .08s,color .2s}
.tbtn:hover{color:#fff1d2}
.tbtn:active{transform:translateY(4px);box-shadow:0 0 0 2px #0b0705,0 0 0 3px #5d554b,0 2px 0 #0b0705,0 3px 6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,230,190,.2)}
.tbtn--big{width:82px;height:82px;border-radius:50%;font-size:36px;color:#2a1606;
  background:radial-gradient(circle at 45% 30%,#ffe3a6,#ffb547 45%,#c26f16 100%);
  box-shadow:0 0 0 3px #0b0705,0 0 0 5px #a39b8f,0 0 0 6px #3e3832,0 6px 0 #0b0705,0 10px 24px rgba(255,150,40,.25),inset 0 2px 0 rgba(255,255,255,.55)}
.tbtn--big:hover{color:#000}
.tbtn--big:active{box-shadow:0 0 0 3px #0b0705,0 0 0 5px #a39b8f,0 0 0 6px #3e3832,0 2px 0 #0b0705,inset 0 2px 0 rgba(255,255,255,.4)}
.tbtn--sm{width:46px;height:46px;font-size:20px;color:var(--muted)}
.tbtn--sm[aria-pressed="true"]{color:var(--amber-hot);text-shadow:0 0 8px var(--amber)}
.tbtn--sm[aria-pressed="true"]::after{content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.tbtn__one{position:absolute;right:6px;top:4px;font:700 11px/1 var(--f-cond);color:var(--amber);display:none}
.tbtn[data-mode="one"] .tbtn__one{display:block}
.console__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.vol{display:flex;align-items:center;gap:10px;flex:1 1 180px;max-width:260px}
.ibtn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:var(--muted);font-size:21px;cursor:pointer}
.ibtn:hover{color:var(--amber-hot);background:rgba(255,181,71,.08)}
.console__btns{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;border:1px solid rgba(255,214,160,.18);cursor:pointer;
  background:rgba(10,7,5,.55);color:var(--ink);font:600 15px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.chip svg{font-size:17px;color:var(--amber)}
.chip:hover{border-color:var(--amber-dim);color:var(--amber-hot)}
.chip[aria-expanded="true"]{border-color:var(--amber-dim);background:rgba(255,181,71,.10)}
.chip--amber{background:linear-gradient(180deg,#ffcf7a,#f0a237);color:#2a1606;border-color:#7a4a12}
.chip--amber svg{color:#2a1606}
.chip--amber:hover{color:#000}

.upnext{display:flex;align-items:center;gap:12px;width:100%;margin-top:auto;padding:8px 12px 8px 10px;border-radius:12px;cursor:pointer;text-align:left;
  border:1px solid rgba(255,214,160,.14);background:rgba(10,7,5,.5);color:var(--ink);box-shadow:inset 0 2px 8px rgba(0,0,0,.5)}
.upnext:hover{border-color:var(--amber-dim)}
.upnext__k{font:400 18px/1 var(--f-vfd);letter-spacing:.14em;color:var(--amber);text-transform:uppercase;text-shadow:0 0 6px rgba(255,170,60,.6);white-space:nowrap}
.upnext img{width:40px;height:40px;border-radius:6px;object-fit:cover;flex:none}
.upnext__t{flex:1;min-width:0;font:400 17px/1.2 var(--f-slab);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.upnext__d{font:400 20px/1 var(--f-vfd);color:var(--muted)}

/* ---------------------------------------------------------------- lyrics window ("I window") */
.lyrics{grid-area:lyrics;display:flex;flex-direction:column;min-height:440px;contain:size;align-self:stretch;
  border-radius:16px;background:linear-gradient(180deg,#0c0806,#120c08);overflow:hidden;
  box-shadow:inset 0 3px 14px rgba(0,0,0,.9),0 0 0 3px #1a120b,0 0 0 4px #5d554b,0 1px 0 5px rgba(255,230,190,.08)}
.lyrics[data-open="false"]{display:none}
.lyrics__bar{display:flex;align-items:center;gap:4px;padding:8px 8px 6px 10px;border-bottom:1px solid var(--line)}
.lyrics__tabs{display:flex;gap:4px;flex:1}
.lyrics__tabs button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:0;border-radius:8px;cursor:pointer;background:transparent;
  color:var(--muted);font:600 14px/1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase}
.lyrics__tabs button svg{font-size:16px}
.lyrics__tabs button[aria-selected="true"]{background:rgba(255,181,71,.12);color:var(--amber-hot)}
.lyrics__tabs button:disabled{opacity:.35;cursor:not-allowed}
.lyrics__close{display:none}
.lyrics__song{display:flex;justify-content:space-between;gap:10px;padding:8px 16px 0;font:600 13px/1.2 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.lyrics__sync{color:var(--amber-dim);white-space:nowrap}
.lyrics__body{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 18px 45%;scrollbar-width:thin;scrollbar-color:#3a2a1c transparent;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%);mask:linear-gradient(180deg,transparent 0,#000 12%,#000 82%,transparent 100%)}
.lyrics__lines{list-style:none;margin:0;padding:0}
.lyrics__lines .ly{padding:6px 10px;margin:0 -10px;border-radius:8px;font:500 clamp(18px,1.5vw,21px)/1.35 var(--f-body);color:#8b7a64;
  transition:color .25s,transform .25s,text-shadow .25s,background .25s;transform-origin:left center}
.lyrics__lines.is-synced .ly{cursor:pointer}
.lyrics__lines.is-synced .ly:hover{background:rgba(255,181,71,.06);color:#c9b391}
.lyrics__lines .ly.is-past{color:#5f5243}
.lyrics__lines .ly.is-now{color:var(--amber-hot);transform:scale(1.04);text-shadow:0 0 14px rgba(255,170,60,.55);background:linear-gradient(90deg,rgba(255,181,71,.10),transparent)}
.lyrics__lines .ly--gap{height:14px;padding:0}
.lyrics__lines:not(.is-synced) .ly{color:#c9b391}
.lyrics__hint{color:var(--muted);font:500 17px/1.5 var(--f-body);padding:8px 0}
.lyrics__video{flex:1;display:flex;align-items:center;background:#000}
.lyrics__video video{width:100%;max-height:100%;background:#000;display:block}
.lyrics.is-video .lyrics__song{padding-bottom:8px}

/* ---------------------------------------------------------------- content blocks */
.block{max-width:1180px;margin:0 auto;padding:clamp(34px,6vw,70px) clamp(14px,3vw,36px) 10px}
.block__head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:16px}
.stamp{margin:0;font:400 clamp(30px,4vw,46px)/1 var(--f-slab);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);
  text-shadow:0 3px 0 #000,0 0 30px rgba(255,170,60,.12)}
.block__sub{margin:0;color:var(--muted);font:600 15px var(--f-cond);letter-spacing:.14em;text-transform:uppercase}
.block__lede{max-width:62ch;color:#cdbb9f;margin:0 0 22px}
.jcard{margin:0;font:400 clamp(22px,2.6vw,30px)/1 var(--f-hand);color:var(--amber-hot);transform:rotate(-3deg);
  padding:6px 14px 8px;background:#efe3c7;color:#2b1c10;border-radius:3px;box-shadow:0 6px 16px rgba(0,0,0,.45);
  background-image:repeating-linear-gradient(180deg,transparent 0 22px,rgba(60,100,170,.18) 22px 23px)}

/* jukebox queue */
.queue{list-style:none;margin:0;padding:10px;border-radius:20px;display:grid;gap:8px;
  background:linear-gradient(180deg,rgba(255,220,170,.05),rgba(0,0,0,.2)),url(/assets/img/wood.webp) center/900px,#2a170c;
  box-shadow:0 0 0 1px #070403,0 0 0 3px #3b3631,0 0 0 4px #8e877c,0 18px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,230,190,.15)}
.q{display:flex;align-items:stretch;border-radius:12px;background:linear-gradient(180deg,#f1e5cb,#e2d2b0);color:#2a1c10;
  box-shadow:0 2px 0 #6e5a3c,0 4px 10px rgba(0,0,0,.35);overflow:hidden;transition:transform .15s,box-shadow .15s}
.q:hover{transform:translateY(-1px)}
.q.is-current{background:linear-gradient(180deg,#ffdc96,#f5b85a);box-shadow:0 2px 0 #7a4a12,0 0 0 2px var(--amber),0 0 26px rgba(255,170,60,.35)}
.q__main{flex:1;display:flex;align-items:center;gap:14px;min-width:0;padding:8px 10px 8px 8px;border:0;background:transparent;cursor:pointer;text-align:left;color:inherit}
.q__slot{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:8px;background:#1d140d;color:var(--amber);
  font:400 24px/1 var(--f-vfd);letter-spacing:.04em;text-shadow:0 0 6px rgba(255,170,60,.7);box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.q__thumb{width:56px;height:56px;flex:none;border-radius:7px;object-fit:cover;box-shadow:0 0 0 2px rgba(40,25,10,.5)}
.q__text{flex:1;min-width:0;display:flex;flex-direction:column}
.q__title{font:400 clamp(17px,1.8vw,21px)/1.15 var(--f-slab);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.q__artist{font:600 14px/1.3 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:#6b4f2e}
.q__eq{display:none;gap:3px;align-items:flex-end;height:18px}
.q__eq i{width:4px;height:4px;background:#7a3c08;border-radius:1px}
.q.is-current .q__eq{display:inline-flex}
.is-playing .q.is-current .q__eq i{animation:eq .9s infinite ease-in-out alternate}
.q__eq i:nth-child(2){animation-delay:-.35s!important}.q__eq i:nth-child(3){animation-delay:-.7s!important}
.q__plays{display:inline-flex;align-items:center;gap:4px;font:600 15px var(--f-cond);color:#6b4f2e;min-width:48px;justify-content:flex-end}
.q__plays svg{font-size:13px}
.q__dur{font:400 24px/1 var(--f-vfd);color:#3a2817;min-width:52px;text-align:right}
.q__dl{display:grid;place-items:center;width:58px;flex:none;border-left:1px dashed rgba(60,40,20,.35);color:#5b3b14;font-size:22px;text-decoration:none}
.q__dl:hover{background:rgba(255,255,255,.25);color:#000}
.kbd-hint{color:var(--dim);font:500 14px var(--f-cond);letter-spacing:.06em;margin:14px 4px 0}
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;margin:0 1px;border-radius:5px;border:1px solid #4a3a2a;background:#1a120c;color:var(--muted);font:600 13px var(--f-cond);text-align:center}

/* downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.dl{display:flex;gap:16px;padding:14px;border-radius:16px;background:linear-gradient(180deg,#1b140f,#120d09);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden}
.dl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.dl__cover{width:120px;height:120px;border-radius:10px;object-fit:cover;flex:none;box-shadow:0 0 0 2px #000,0 6px 14px rgba(0,0,0,.5)}
.dl__body{min-width:0;display:flex;flex-direction:column}
.dl__title{margin:0;font:400 22px/1.1 var(--f-slab)}
.dl__artist{margin:2px 0 0;font:600 14px var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dl__meta,.dl__count{margin:4px 0 0;font:500 15px var(--f-cond);letter-spacing:.06em;color:var(--muted)}
.dl__count{color:var(--amber)}
.dl__btns{display:flex;gap:8px;margin-top:auto;padding-top:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:10px;font:700 15px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid transparent}
.btn svg{font-size:18px}
.btn--amber{background:linear-gradient(180deg,#ffd27e,#f0a033);color:#2a1606;border-color:#7a4a12;box-shadow:0 3px 0 #6d3f0c,0 6px 16px rgba(255,150,40,.18)}
.btn--amber:hover{filter:brightness(1.07)}
.btn--amber:active{transform:translateY(2px);box-shadow:0 1px 0 #6d3f0c}
.btn--ghost{background:transparent;color:var(--ink);border-color:rgba(255,214,160,.22)}
.btn--ghost:hover{border-color:var(--amber-dim);color:var(--amber-hot)}
.noscript-list{color:var(--muted)}

/* share */
.shares{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,214,160,.2);background:rgba(20,14,10,.7);
  color:var(--ink);text-decoration:none;font:600 15px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.share-btn svg{font-size:18px;color:var(--amber)}
.share-btn:hover{border-color:var(--amber-dim);color:var(--amber-hot)}

.foot{max-width:1180px;margin:60px auto 0;padding:26px clamp(14px,3vw,36px) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line);text-align:center;color:var(--muted)}
.foot__line{margin:0 0 6px;font:400 20px/1.2 var(--f-slab);color:var(--ink)}
.foot__small{margin:4px 0;font:500 15px var(--f-cond);letter-spacing:.05em}
.foot__copy{color:var(--dim)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--mini-h) + 24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:80;
  padding:10px 18px;border-radius:10px;background:#1d140d;color:var(--amber-hot);border:1px solid var(--amber-dim);font:600 16px var(--f-cond);letter-spacing:.08em;
  box-shadow:0 10px 30px rgba(0,0,0,.6);transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* mini player */
.mini{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:8px;height:calc(var(--mini-h) + env(safe-area-inset-bottom));
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(32,22,15,.98),rgba(16,11,8,.99));
  border-top:1px solid rgba(255,214,160,.16);box-shadow:0 -10px 30px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .25s}
.is-ready.has-song.dash-away .mini,.is-ready.has-song.sheet-open .mini{transform:none}
.mini__info{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;cursor:pointer;text-align:left;padding:0}
.mini__info img{width:48px;height:48px;border-radius:6px;object-fit:cover;flex:none}
.mini__text{display:flex;flex-direction:column;min-width:0}
.mini__text b{font:400 16px/1.2 var(--f-slab);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini__text span{font:600 12px var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tbtn--mini{width:44px;height:44px;border-radius:12px;font-size:19px;box-shadow:0 0 0 1px #0b0705,0 0 0 2px #5d554b,0 3px 0 #0b0705}
.tbtn--mplay{color:#2a1606;background:radial-gradient(circle at 45% 30%,#ffe3a6,#ffb547 45%,#c26f16)}
.mini__prog{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(255,255,255,.06)}
.mini__prog i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--accent),var(--amber));box-shadow:0 0 8px var(--amber)}

/* ---------------------------------------------------------------- medium: lyrics under the console */
@media (max-width:1179px) and (min-width:900px){
  .dash__panel{grid-template-columns:minmax(220px,300px) minmax(0,1fr);grid-template-areas:"deck console" "lyrics lyrics"}
  .lyrics{height:440px;contain:none}
}

/* lyric video mode: the video gets the full width under the console */
@media (min-width:900px){
  .video-mode .dash__panel,.video-mode.lyrics-closed .dash__panel{grid-template-columns:minmax(220px,300px) minmax(0,1fr);grid-template-areas:"deck console" "lyrics lyrics"}
  .video-mode .lyrics{contain:none;height:auto;min-height:0}
  .video-mode .lyrics__video{aspect-ratio:16/9}
  .video-mode .lyrics__video video{height:100%}
}

/* ---------------------------------------------------------------- phones */
@media (max-width:899px){
  body{font-size:16px;padding-bottom:calc(var(--mini-h) + env(safe-area-inset-bottom))}
  .toast{bottom:calc(var(--mini-h) + 20px + env(safe-area-inset-bottom))}
  .topnav a{display:none}
  .btn-install span{display:none}
  .brand__badge{font-size:18px;padding:6px 13px 5px}
  .dash{padding:12px 10px 0}
  .dash__panel,.lyrics-closed .dash__panel{grid-template-columns:1fr;grid-template-areas:"deck" "console";padding:18px 14px 20px;border-radius:22px;gap:14px}
  .deck{flex-direction:row;align-items:center;gap:14px}
  .deck__art{width:min(42vw,190px);flex:none}
  .deck__label{flex-direction:column;align-items:flex-start;gap:6px;flex:1;background:transparent;box-shadow:none;padding:0}
  .deck__slot{font-size:64px;line-height:.8;padding:10px 14px 6px;border-radius:10px;background:var(--glass);box-shadow:inset 0 2px 8px rgba(0,0,0,.8),0 1px 0 rgba(255,230,190,.15)}
  .deck__of{font-size:20px}
  .upnext{margin-top:2px}
  .vfd{padding:12px 14px 10px}
  .vfd__title{font-size:clamp(30px,9vw,44px)}
  .vfd__artist{font-size:20px}
  .vfd__time{font-size:26px}
  .tbtn{width:54px;height:54px}
  .tbtn--big{width:76px;height:76px}
  .tbtn--sm{width:44px;height:44px}
  .vol{display:none}
  .console__row{justify-content:center}
  .console__btns{justify-content:center}
  /* lyrics become a bottom sheet over the page */
  .lyrics{position:fixed;left:0;right:0;top:max(64px,9vh);bottom:calc(var(--mini-h) + env(safe-area-inset-bottom));height:auto;z-index:55;border-radius:20px 20px 0 0;
    box-shadow:0 -20px 60px rgba(0,0,0,.7),0 0 0 1px #3b3631;animation:sheet .28s ease-out}
  .lyrics__close{display:grid}
  .lyrics__bar{padding:10px 8px 8px 12px}
  .lyrics__bar::before{content:"";position:absolute;left:50%;top:5px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#3a2c1f}
  .lyrics__lines .ly{font-size:20px}
  .q__main{gap:10px;padding:7px 8px 7px 7px}
  .q__slot{width:36px;height:36px;font-size:20px}
  .q__thumb{width:48px;height:48px}
  .q__plays{display:none}
  .q__dur{font-size:21px;min-width:44px}
  .q__dl{width:50px}
  .kbd-hint{display:none}
  .dl-grid{grid-template-columns:1fr}
  .dl__cover{width:96px;height:96px}
  .sheet-open{overflow:hidden}
}
@keyframes sheet{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- pop-out lyrics window */
.pop{min-height:100vh;height:100vh;overflow:hidden}
.pop__wrap{display:flex;flex-direction:column;height:100vh;padding:12px 12px 8px}
.pop__head{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,220,170,.06),rgba(0,0,0,.2)),url(/assets/img/wood.webp) center/700px,#2a170c;box-shadow:0 0 0 2px #3b3631,0 8px 20px rgba(0,0,0,.5)}
.pop__head img{width:56px;height:56px;border-radius:8px;object-fit:cover;flex:none}
.pop__text{flex:1;min-width:0;display:flex;flex-direction:column}
.pop__tag{font:400 17px/1 var(--f-vfd);letter-spacing:.14em;color:var(--amber);text-shadow:0 0 6px rgba(255,170,60,.7)}
.pop__text b{font:400 19px/1.15 var(--f-slab);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop__text span:last-child{font:600 13px var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pop__ctl{display:flex;gap:8px}
.pop__time{display:flex;align-items:center;gap:10px;padding:10px 4px;font:400 20px/1 var(--f-vfd);color:var(--amber)}
.pop__bar{flex:1;height:4px;border-radius:2px;background:#1d140d;overflow:hidden}
.pop__bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--accent),var(--amber))}
.pop__body{flex:1;border-radius:14px;background:#0b0806;box-shadow:inset 0 3px 14px rgba(0,0,0,.9),0 0 0 1px #2c241c}
.pop .lyrics__lines .ly{font-size:22px}
.pop__foot{margin:8px 4px 0;font:500 13px var(--f-cond);letter-spacing:.06em;color:var(--dim);text-align:center}

/* ---------------------------------------------------------------- 404 */
.nf{min-height:80vh;display:grid;place-items:center;text-align:center;padding:40px 20px}
.nf__code{font:400 clamp(80px,16vw,160px)/1 var(--f-vfd);color:var(--amber);text-shadow:0 0 20px rgba(255,170,60,.6)}
.nf h1{font:400 clamp(28px,4vw,40px)/1.1 var(--f-slab);margin:6px 0 12px}
.nf p{color:var(--muted);margin:0 0 22px}

/* ======================= LANDING HERO (code-drawn SVG scene) ======================= */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(460px,72vh,760px);display:flex;align-items:center;
  background:#2a1724;border-bottom:1px solid rgba(255,190,110,.18)}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:-3}
.hero__shade{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,8,10,.72) 0%,rgba(14,8,10,.38) 34%,transparent 58%),
             linear-gradient(0deg,rgba(13,9,7,.95) 0%,rgba(13,9,7,0) 18%)}
.hero__copy{position:relative;max-width:1360px;width:100%;margin:0 auto;padding:clamp(40px,7vh,90px) clamp(18px,4vw,56px) clamp(70px,10vh,120px)}
.hero__kicker{margin:0 0 8px;font:700 15px/1 var(--f-cond);letter-spacing:.28em;text-transform:uppercase;color:var(--amber-hot);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero__title{margin:0;font:400 clamp(54px,8.6vw,124px)/.92 var(--f-slab);letter-spacing:.01em;color:#ffe2ad;
  text-shadow:0 2px 0 #6d3f0c,0 0 34px rgba(255,170,70,.35),0 8px 30px rgba(0,0,0,.55)}
.hero__lede{max-width:30ch;margin:16px 0 26px;font:500 clamp(18px,1.7vw,22px)/1.45 var(--f-body);color:#f5e7d0;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.btn--big{padding:14px 22px;font-size:17px}
.hero .btn--ghost{background:rgba(20,12,10,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.resume{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:18px;padding:9px 14px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,190,110,.35);background:rgba(20,12,10,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  font:500 15px/1.2 var(--f-body);color:var(--ink);text-align:left}
.resume[hidden]{display:none}
.resume svg{font-size:15px;color:var(--amber)}
.resume b{color:var(--amber-hot);font-weight:600}
.resume__at{font-family:var(--f-vfd);font-size:19px;color:var(--amber)}
.resume:hover{border-color:var(--amber)}
/* idle deck before a song is picked */
body:not(.has-song) #npCover{opacity:.9}
body:not(.has-song) .vfd__title{color:var(--amber-hot)}
.chip:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:899px){
  .hero{min-height:min(760px,calc(100svh - 60px));align-items:flex-start;flex-direction:column}
  .hero__bg{object-position:74% 100%}
  .hero__copy{padding:30px 18px 40px}
  .hero__title{font-size:clamp(50px,15vw,76px)}
  .hero__lede{margin:12px 0 20px;font-size:17px}
  .btn--big{padding:13px 18px;font-size:16px}
  .hero__shade{background:linear-gradient(180deg,rgba(14,8,10,.55) 0%,rgba(14,8,10,.15) 45%,transparent 60%),linear-gradient(0deg,rgba(13,9,7,.95) 0%,rgba(13,9,7,0) 14%)}
}