/* deweydo.com - 1950s atomic-age / Googie retro-futurism. Fonts self-hosted (see /fonts/LICENSE.txt). */
@font-face{font-family:Righteous;src:url(/fonts/righteous-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alfa Slab One";src:url(/fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Oswald;src:url(/fonts/oswald-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Oswald;src:url(/fonts/oswald-latin-600-normal.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-latin-wght-normal.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:Literata;src:url(/fonts/literata-latin-wght-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --cream:#f6f1e6;
  --paper:#fffaf2;
  --ink:#1a2332;
  --turquoise:#1f8a8c;
  --turquoise-deep:#146e70;
  --coral:#e4572e;
  --coral-deep:#c4451f;
  --chrome:#9aa3b2;
  --chrome-light:#d5dbe6;
  --gold:#d4a24a;
  --dim:#4a5568;
  --fs:21px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(ellipse 80% 50% at 100% -10%, rgba(31,138,140,.12), transparent 55%),
    radial-gradient(ellipse 60% 40% at -10% 100%, rgba(228,87,46,.08), transparent 50%),
    var(--cream);
  color:var(--ink);
  font:20px/1.65 Literata,Georgia,"Times New Roman",serif;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}
h1,h2,.brand,.chnum,.burst,.book-title{font-family:Righteous,"Alfa Slab One",Georgia,serif;font-weight:400}
nav,.band,.btn,.lab,.num,.rt,.crumb,.m,.size,.pn,.end,.by,.note,.foot,.d,.more-link{font-family:Oswald,"Arial Narrow",sans-serif}
a{color:var(--coral-deep)}
a:focus-visible,button:focus-visible{outline:3px solid var(--turquoise);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--gold);color:var(--ink);padding:8px 14px}

/* chrome strip header */
.top{
  background:linear-gradient(180deg,#2a3548 0%, var(--ink) 100%);
  border-bottom:4px solid var(--turquoise);
  position:relative;
}
.top:after{
  content:"";
  position:absolute;left:0;right:0;bottom:-8px;height:4px;
  background:linear-gradient(90deg,var(--coral),var(--gold),var(--turquoise),var(--coral));
  opacity:.85;
}
.top-in{
  max-width:1080px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:10px 20px;
  align-items:center;justify-content:space-between;
  padding:16px 18px 18px;
}
.brand{
  color:var(--cream);text-decoration:none;font-size:28px;letter-spacing:.04em;
  text-shadow:0 0 18px rgba(31,138,140,.45);
}
nav[aria-label=Main]{display:flex;gap:4px;flex-wrap:wrap}
nav[aria-label=Main] a{
  color:var(--cream);text-decoration:none;font-size:17px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 14px;
  border:2px solid transparent;border-radius:999px;
}
nav[aria-label=Main] a:hover{border-color:rgba(213,219,230,.35)}
nav[aria-label=Main] a[aria-current]{
  background:var(--turquoise);color:#fff;border-color:var(--turquoise);
  box-shadow:0 0 0 2px rgba(31,138,140,.25);
}

.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.narrow{max-width:760px;padding-top:36px;min-height:50vh}

/* atomic cover panel */
.cover{
  margin:28px 0 8px;
  border:3px solid var(--ink);
  background:var(--paper);
  border-radius:18px 18px 42px 18px;
  box-shadow:
    0 0 0 6px var(--cream),
    0 0 0 9px var(--turquoise),
    10px 12px 0 rgba(26,35,50,.18);
  overflow:hidden;
  position:relative;
}
.band{
  display:flex;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;
  background:linear-gradient(90deg,var(--turquoise-deep),var(--turquoise));
  color:#fff;
  padding:10px 18px;
  font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  border-bottom:3px solid var(--ink);
}
.cover-in{
  display:grid;gap:10px;
  padding:22px 22px 30px;
  background:
    radial-gradient(circle at 92% 12%, rgba(212,162,74,.22) 0 56px, transparent 57px),
    radial-gradient(circle at 8% 88%, rgba(31,138,140,.10) 0 72px, transparent 73px),
    var(--paper);
  position:relative;
}
.cover-in .words{display:flex;flex-direction:column;justify-content:center;min-width:0}
.cover-in .art{order:-1}
.art{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:auto;min-height:0;
  padding:4px 0 8px;
}
.art-frame{
  width:min(220px,70vw);
  aspect-ratio:1;
  display:grid;place-items:center;
}
.emblem{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 0 rgba(26,35,50,.08))}

.book-title{
  font-size:clamp(44px,11vw,92px);
  line-height:.92;margin:4px 0 10px;
  text-transform:uppercase;
  color:var(--ink);
  letter-spacing:.02em;
  background:linear-gradient(180deg,var(--ink) 40%, var(--turquoise-deep));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* fallback if clip unsupported */
  filter:none;
}
@supports not (background-clip:text){
  .book-title{color:var(--ink);background:none}
}
.by{
  margin:0 0 16px;font-size:17px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--turquoise-deep);font-weight:600;
}
.blurb{font-size:21px;max-width:32em;margin:0 0 24px;color:var(--ink)}
.btn{
  display:inline-block;
  background:linear-gradient(180deg,var(--coral) 0%, var(--coral-deep) 100%);
  color:#fff;text-decoration:none;
  font-size:clamp(17px,4.5vw,20px);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  padding:14px 24px;
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:5px 5px 0 var(--ink);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn.off{
  background:var(--paper);color:var(--dim);
  border-style:dashed;box-shadow:none;border-radius:12px;
}

.latest{
  display:flex;gap:18px;align-items:center;text-decoration:none;color:var(--ink);
  background:linear-gradient(135deg,#ffe8c8, #fff3df);
  border:3px solid var(--ink);
  border-radius:16px 48px 16px 16px;
  padding:16px 20px;margin:28px 0 10px;
  box-shadow:6px 6px 0 rgba(31,138,140,.35);
}
.burst{
  flex:none;display:grid;place-items:center;
  width:86px;height:86px;
  background:var(--coral);color:#fff;font-size:18px;letter-spacing:.04em;
  clip-path:polygon(50% 0,61% 18%,82% 8%,80% 30%,100% 38%,84% 54%,96% 74%,74% 76%,68% 98%,50% 84%,32% 98%,26% 76%,4% 74%,16% 54%,0 38%,20% 30%,18% 8%,39% 18%);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.lab{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:15px;font-weight:600;color:var(--turquoise-deep)}
.latest strong{display:block;font-size:22px;line-height:1.25;margin:.15em 0}
.latest .m{font-size:17px;color:var(--dim)}

.block{padding:36px 0 0}
h2{
  font-size:30px;margin:0 0 14px;text-transform:uppercase;
  color:var(--turquoise-deep);line-height:1.15;letter-spacing:.03em;
}
.chapters{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.chapters li a,.chapters li.soon{
  display:flex;gap:14px;align-items:baseline;padding:16px 4px;
  color:var(--ink);text-decoration:none;
}
.chapters li+li{border-top:2px solid rgba(26,35,50,.15)}
.chapters li a:hover .t{color:var(--coral-deep)}
.num{font-size:26px;font-weight:600;color:var(--coral);min-width:1.2em}
.t{font-size:22px;font-weight:600;line-height:1.3}
.t .d{display:block;font-size:16px;font-weight:500;color:var(--dim);letter-spacing:.02em}
.dots{flex:1;border-bottom:3px dotted var(--chrome);min-width:16px;transform:translateY(-6px)}
.rt{font-size:17px;white-space:nowrap;color:var(--turquoise-deep)}
.soon{color:var(--dim)}
.soon .t{font-style:italic;font-weight:400}
.soon .num{color:var(--dim)}
.soon .dots{border-color:#c5cdd8}
.note{font-size:17px;color:var(--dim)}

.two{display:grid;gap:22px}
.box{
  border:3px solid var(--ink);background:var(--paper);
  padding:22px 24px;border-radius:16px 16px 28px 16px;
  box-shadow:5px 5px 0 rgba(26,35,50,.12);
}
.box h2{font-size:24px}
.box p{margin:0 0 .5em}
.more{border-style:dashed;background:transparent;box-shadow:none}
.more-link{font-size:17px;text-transform:uppercase;letter-spacing:.06em}

.foot{
  text-align:center;margin-top:56px;padding:26px 18px;
  background:linear-gradient(180deg,#243044, var(--ink));
  color:var(--cream);font-size:16px;font-weight:500;letter-spacing:.08em;
  border-top:4px solid var(--coral);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;
}
.foot .sep{opacity:.55}
.foot-bmc{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.foot-bmc:hover,.foot-bmc:focus-visible{color:#fff}

@media(min-width:760px){
  .cover-in{grid-template-columns:1.25fr .95fr;gap:20px 28px;padding:40px 44px 48px;align-items:center}
  .cover-in .art{order:2;padding:0;justify-self:end}
  .art-frame{width:min(300px,100%)}
  .two{grid-template-columns:1fr 1fr}
}

/* reading */
.reading{background:var(--paper)}
.chapter{max-width:760px;margin:0 auto;padding:30px 18px 0}
.chead{text-align:center;border-bottom:3px double var(--turquoise);padding-bottom:20px;position:relative}
.chead:after{
  content:"";display:block;width:48px;height:48px;margin:18px auto 0;
  background:
    radial-gradient(circle at center, var(--gold) 0 5px, transparent 6px),
    conic-gradient(from 0deg, var(--turquoise), var(--coral), var(--turquoise));
  border-radius:50%;
  mask:radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 54%),
       linear-gradient(#000,#000);
  -webkit-mask:
    radial-gradient(circle, transparent 38%, #000 40%, #000 52%, transparent 54%),
    linear-gradient(#000,#000);
  opacity:.9;
}
.crumb{font-size:16px;text-transform:uppercase;letter-spacing:.1em;margin:0}
.crumb a{color:var(--turquoise-deep)}
.chnum{
  display:inline-block;
  background:linear-gradient(135deg,var(--turquoise),var(--turquoise-deep));
  color:#fff;padding:6px 18px;font-size:18px;margin:16px 0 8px;
  border:2px solid var(--ink);border-radius:999px;
  letter-spacing:.06em;
}
.chapter h1,.ptitle{
  font-size:clamp(38px,8vw,60px);line-height:1.05;margin:8px 0 10px;
  letter-spacing:.02em;
}
.ptitle{color:var(--ink)}
.chead .m{font-size:16px;margin:0;color:var(--dim)}
.size{
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin:18px 0 26px;font-size:16px;text-transform:uppercase;letter-spacing:.08em;
}
.size button{
  font:600 17px Oswald,sans-serif;background:var(--cream);
  border:2px solid var(--ink);border-radius:999px;
  padding:6px 14px;min-width:54px;min-height:44px;cursor:pointer;color:var(--ink);
}
.size button:hover{background:var(--chrome-light)}
.prose{font-size:var(--fs);line-height:1.75;max-width:34em;margin:0 auto}
.prose p{margin:0 0 1.15em}
.prose>p:first-child{font-weight:600}
.prose hr{border:0;text-align:center;margin:1.8em 0;height:auto}
.prose hr:after{
  content:"\2739  \2739  \2739";
  color:var(--turquoise);letter-spacing:.55em;white-space:pre;
}
.prose blockquote{
  margin:1.3em 0;padding:.7em 1.1em;
  border-left:6px solid var(--coral);
  background:linear-gradient(90deg, rgba(31,138,140,.08), transparent);
  border-radius:0 12px 12px 0;
}
.prose h2{font-size:1.25em;color:var(--ink);text-transform:none}
.end{
  text-align:center;text-transform:uppercase;letter-spacing:.16em;
  font-size:16px;margin:32px 0 0;color:var(--turquoise-deep);
}
.pn{
  display:grid;gap:12px;margin:24px 0 0;
  font-size:17px;text-transform:uppercase;letter-spacing:.05em;
}
.pn>*{
  padding:14px 18px;border:2px solid var(--ink);text-decoration:none;text-align:center;
  color:var(--ink);background:var(--cream);border-radius:14px;
}
.pn .lab{font-size:15px;color:var(--coral)}
.pn .off{color:var(--dim);border-style:dashed;background:transparent}
.pn .toc{
  background:linear-gradient(180deg,var(--turquoise),var(--turquoise-deep));
  color:#fff;font-weight:600;box-shadow:4px 4px 0 var(--ink);
}
@media(min-width:760px){.pn{grid-template-columns:1fr auto 1fr;align-items:center}}

.lost{text-align:center}
.art.small{height:auto;max-width:200px;margin:0 auto;padding:0}
.art.small .art-frame{width:100%}

.tipbox{
  display:flex;align-items:center;gap:14px;margin:28px 0 0;padding:16px 18px;
  border:2px solid var(--ink);background:var(--paper);
  border-radius:16px 40px 16px 16px;
  box-shadow:5px 5px 0 var(--coral);color:var(--ink);
}
.tipbox p{
  margin:0;font-family:Oswald,"Arial Narrow",sans-serif;
  font-size:18px;font-weight:500;letter-spacing:.03em;line-height:1.35;
}
.tipbox .cup,.about-bmc .cup{flex:none;color:var(--ink)}
.bmc{
  white-space:nowrap;color:var(--coral-deep);font-weight:600;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}
.bmc:hover,.bmc:focus-visible{color:var(--turquoise-deep)}
.about-bmc{
  display:flex;align-items:center;gap:10px;margin:28px 0 0;
  font-family:Oswald,"Arial Narrow",sans-serif;font-size:17px;
  letter-spacing:.05em;text-transform:uppercase;
}

/* Private audio page - classic portable player */
.audio-wrap{padding-bottom:2.5rem;max-width:100%}
.audio-gate,.audio-player{margin:1rem 0 2rem}
.audio-form{display:grid;gap:.65rem;max-width:22rem}
.audio-form label{font-family:var(--sans,Oswald,sans-serif);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal,#1f8a8c)}
.audio-form input{
  font:inherit;padding:.75rem .9rem;border:2.5px solid var(--ink,#1a2332);border-radius:10px;
  background:var(--paper,#f6f1e6);color:var(--ink,#1a2332);font-size:1.05rem;
}
.audio-form input:focus{outline:3px solid var(--teal,#1f8a8c);outline-offset:2px}
.audio-err{color:var(--orange,#e4572e);font-size:.95rem;margin:.75rem 0 0;text-align:center}

/* Classic portable: 61.8 x 103.5 mm → aspect 61.8/103.5. Size never depends on lyrics. */
.deck{
  --deck-silver:#e8eaee;
  --deck-silver-2:#c8ccd4;
  --deck-ink:#1a2332;
  --deck-screen:#c5d6c0;
  --deck-screen-ink:#1a2e1a;
  --deck-bright:#0d1f0d;
  --deck-pad:clamp(12px, 2.8cqw, 22px);
  box-sizing:border-box;
  width:min(92vw, calc(92svh * 0.597), 520px);
  aspect-ratio:61.8 / 103.5;
  height:auto;
  max-height:92svh;
  margin:1.25rem auto 0;
  padding:var(--deck-pad);
  padding-bottom:calc(var(--deck-pad) * 1.15);
  background:linear-gradient(160deg,#f7f8fa 0%,var(--deck-silver) 40%,var(--deck-silver-2) 100%);
  border:3px solid var(--deck-ink);border-radius:clamp(22px, 5vw, 32px);
  box-shadow:6px 6px 0 var(--deck-ink), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.08);
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  display:grid;
  grid-template-rows:40% minmax(0,1fr) auto;
  gap:0;
  overflow:hidden;
  container-type:size;
  container-name:deck;
}
.deck-screen{
  box-sizing:border-box;
  min-height:0;height:100%;width:100%;
  aspect-ratio:auto;
  background:linear-gradient(180deg,#d4e4cf 0%,var(--deck-screen) 100%);
  border:3px solid var(--deck-ink);border-radius:clamp(10px, 2.5cqw, 14px);
  padding:clamp(8px, 2.2cqw, 14px) clamp(8px, 2.2cqw, 12px) clamp(6px, 1.8cqw, 10px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-columns:1fr;
  gap:6px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
  color:var(--deck-screen-ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow:hidden;
  container-type:size;
  container-name:screen;
}
/* Meta/lyrics: no forced screen-grid placement (Now Playing owns its own grid) */
.deck-meta,.deck-lyrics{
  min-height:0;min-width:0;overflow:hidden;
}
.deck-meta{
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.deck-meta[hidden],.deck-lyrics[hidden]{display:none!important}
.deck-label{margin:0 0 .15rem;font-size:clamp(.6rem, 3.2cqw, .7rem);letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.deck-title{
  margin:0;font-size:clamp(.95rem, 6.5cqw, 1.35rem);font-weight:700;line-height:1.2;
  font-family:var(--display,Righteous,sans-serif);letter-spacing:.02em;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-wrap:balance;
}
.deck-sub{margin:.15rem 0 0;font-size:clamp(.8rem, 4.5cqw, .95rem);opacity:.85;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

.deck-lyrics{
  display:grid;
  grid-template-rows:minmax(0,1fr) minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(2px, 1cqh, 6px);
  text-align:center;padding:2px 0;
}
.lyrics-line{
  margin:0;min-height:0;min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  text-wrap:balance;line-height:1.25;
  transition:opacity .25s ease;
}
.lyrics-prev,.lyrics-next{
  font-size:clamp(.65rem, 4.2cqw, .95rem);opacity:.38;color:var(--deck-screen-ink);
  align-self:center;
}
.lyrics-cur{
  font-size:clamp(.95rem, 6.8cqw, 1.55rem);font-weight:700;opacity:1;
  color:var(--deck-bright);letter-spacing:.01em;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  align-self:center;
}
.lyrics-line .lw{display:inline;margin:0 .08em 0 0}
.lyrics-cur .lw{opacity:.42;transition:opacity .12s ease, color .12s ease}
.lyrics-cur .lw.done{opacity:.72}
.lyrics-cur .lw.on{opacity:1;color:#0a1a0a;text-shadow:0 0 0.5px currentColor}

.deck-progress{margin:0;flex:none;min-width:0;width:100%}
.deck-track{
  --knob-r:9px;
  position:relative;height:24px;display:flex;align-items:center;cursor:pointer;
  touch-action:none;-webkit-tap-highlight-color:transparent;
  box-sizing:border-box;overflow:visible;
}
.deck-track::before{
  content:"";position:absolute;left:var(--knob-r);right:var(--knob-r);top:50%;
  height:7px;margin-top:-3.5px;border-radius:999px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(255,255,255,.22) 45%, rgba(0,0,0,.10) 100%),
    rgba(26,35,50,.20);
  border:1.5px solid var(--deck-ink);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.35);
}
.deck-fill{
  position:absolute;left:var(--knob-r);top:50%;height:7px;margin-top:-3.5px;
  border-radius:999px;width:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.18) 100%),
    var(--deck-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
  will-change:width;
}
.deck-knob{
  position:absolute;top:50%;left:var(--knob-r);width:18px;height:18px;margin:0;
  transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at 32% 28%, #ffffff 0%, #f4f5f7 42%, #d5d8de 78%, #b9bec8 100%);
  border:2px solid var(--deck-ink);
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 1px rgba(0,0,0,.14);
  will-change:left;
}
.deck-times{display:flex;justify-content:space-between;margin-top:.2rem;font-size:clamp(.65rem, 3cqw, .75rem);opacity:.85}

/* Wheel sits in the middle row; size from deck width, never from lyrics */
.deck-wheel{
  position:relative;
  box-sizing:border-box;
  width:min(72%, 78cqw);
  aspect-ratio:1;height:auto;
  max-height:100%;
  margin:auto;
  border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#f2f3f5 0%,#d5d8de 55%,#b8bdc8 100%);
  border:3px solid var(--deck-ink);
  box-shadow:inset 0 2px 4px #fff, inset 0 -3px 6px rgba(0,0,0,.12), 3px 3px 0 var(--deck-ink);
  touch-action:none;cursor:grab;
  flex:none;
}
.deck-wheel:active{cursor:grabbing}
.wheel-center{
  position:absolute;left:50%;top:50%;width:36%;height:36%;
  transform:translate(-50%,-50%);
  border-radius:50%;border:3px solid var(--deck-ink);
  background:linear-gradient(160deg,#fff,#e6e8ed);
  color:var(--deck-ink);display:grid;place-items:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 1px 0 #fff, 0 2px 0 rgba(0,0,0,.08);
  z-index:2;
}
.wheel-center:active{background:#dfe2e8}
.wheel-btn{
  position:absolute;width:22%;height:22%;border:0;background:transparent;color:var(--deck-ink);
  display:grid;place-items:center;cursor:pointer;padding:0;z-index:2;
  -webkit-tap-highlight-color:transparent;
}
.wheel-btn:active{opacity:.55}
.wheel-back{left:4%;top:50%;transform:translateY(-50%)}
.wheel-fwd{right:4%;top:50%;transform:translateY(-50%)}
.wheel-btn svg{width:70%;height:70%}

.deck-tools{
  display:flex;justify-content:center;align-items:center;
  margin:0;padding-top:clamp(6px, 1.5cqh, 12px);
  flex:none;min-height:0;
}
.lyrics-toggle{
  font-family:var(--sans,Oswald,sans-serif);font-size:clamp(.65rem, 3.2cqw, .8rem);letter-spacing:.06em;text-transform:uppercase;
  background:transparent;border:2px solid var(--deck-ink);border-radius:999px;
  padding:.35rem .9rem;color:var(--deck-ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lyrics-toggle[aria-pressed="true"]{background:var(--deck-ink);color:#f7f8fa}

.wheel-center svg{display:block;width:42%;height:42%}
.wheel-center .icon-play[hidden],
.wheel-center .icon-pause[hidden]{display:none!important}
.wheel-center .icon-play:not([hidden]),
.wheel-center .icon-pause:not([hidden]){display:block}

/* --- ipod multi-chapter UI --- */
.ipod-bar{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  flex:none;min-height:0;padding:0 2px 4px;border-bottom:1px solid rgba(26,46,26,.25);
  margin-bottom:2px;
}
.ipod-bar-title{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(.7rem, 4.2cqw, .9rem);font-weight:700;letter-spacing:.02em;
  color:var(--deck-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ipod-batt{
  flex:none;width:clamp(18px, 6cqw, 26px);height:clamp(9px, 2.8cqw, 12px);
  border:1.5px solid var(--deck-bright);border-radius:2px;position:relative;
  box-sizing:border-box;
}
.ipod-batt::after{
  content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);
  width:2px;height:40%;background:var(--deck-bright);border-radius:0 1px 1px 0;
}
.ipod-batt-fill{
  display:block;height:100%;width:72%;
  background:linear-gradient(180deg,#6fdf6a,#2e9b2a);
}

/* iPod classic: fixed row height (~6 visible), scroll inside screen */
.ipod-list{
  --ipod-row-h: clamp(30px, 13.2cqh, 38px);
  min-height:0;overflow:hidden;display:flex;flex-direction:column;
}
.ipod-rows{
  list-style:none;margin:0;padding:0;min-height:0;flex:1;
  overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:auto;
  scroll-padding-block:2px;
  display:block; /* rows stack at fixed height; do not flex-compress */
  /* thin iPod-style scrollbar on the right */
  scrollbar-width:thin;
  scrollbar-color:rgba(40,48,60,.55) transparent;
}
.ipod-rows::-webkit-scrollbar{width:3px}
.ipod-rows::-webkit-scrollbar-track{background:transparent}
.ipod-rows::-webkit-scrollbar-thumb{
  background:rgba(40,48,60,.5);border-radius:3px;
}
.ipod-row{
  box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:6px;
  height:var(--ipod-row-h);min-height:var(--ipod-row-h);max-height:var(--ipod-row-h);
  padding:0 clamp(8px, 2.4cqw, 12px);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(.78rem, 4.6cqw, .98rem);line-height:1.15;
  color:var(--deck-bright);cursor:pointer;border-radius:0;
  border-bottom:1px solid rgba(20,28,40,.08);
  scroll-margin-block:2px;
  flex:none;
}
.ipod-row .ipod-row-main{
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;
}
.ipod-row .ipod-row-detail{
  font-size:.78em;opacity:.7;font-weight:500;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  justify-self:end;
}
.ipod-row.soon{
  grid-template-columns:minmax(0,1fr) auto auto;
}
.ipod-row.soon .ipod-row-main{opacity:.75;font-weight:500}
.ipod-chevron{font-size:1.1em;opacity:.55;padding-left:2px;line-height:1}
.ipod-row.on{
  color:#fff;
  background:linear-gradient(180deg,#6db3ff 0%,#1a6fd0 45%,#0b4ea8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.2);
  border-bottom-color:transparent;
}
.ipod-row.on .ipod-chevron,.ipod-row.on .ipod-row-detail{opacity:.95;color:#fff}

/* Screen body: row1 title bar | row2 list OR now */
.deck-screen{
  grid-template-rows:auto minmax(0,1fr);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.ipod-list,.ipod-now{
  grid-row:2;grid-column:1;min-height:0;min-width:0;overflow:hidden;
  align-self:stretch;justify-self:stretch;
}
.ipod-list[hidden],.ipod-now[hidden]{display:none!important}

/* Now Playing: strict 3 rows inside screen body
   (title bar is sibling row above)
   1) cover + meta  2) full-width progress+times  3) fixed-height lyrics */
.ipod-now{
  display:grid;
  /* cover+meta and progress are intrinsic; lyrics gets leftover (capped) */
  grid-template-rows:max-content max-content minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  align-content:start;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.now-top{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:8px;
  align-items:center;
  min-height:56px; /* never shrink below cover */
  height:56px;
  max-height:56px;
  min-width:0;
  grid-row:1;
  grid-column:1;
  overflow:hidden;
  flex:none;
}
.now-art{
  width:56px;height:56px;flex:none;
  border:2px solid var(--deck-ink);border-radius:6px;overflow:hidden;
  box-shadow:1px 1px 0 rgba(0,0,0,.15);background:#fff;
}
.now-art img{width:100%;height:100%;object-fit:cover;display:block}
.now-meta{
  min-width:0;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.now-book,.now-ch,.now-of{
  margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.now-book{
  font-size:11px;line-height:1.2;opacity:.72;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;
}
.now-ch{
  font-size:15px;line-height:1.2;font-weight:700;color:var(--deck-bright);
}
.now-of{
  font-size:11px;line-height:1.2;opacity:.75;font-weight:500;
}

.ipod-now .deck-progress{
  grid-row:2;grid-column:1;
  align-self:start;
  width:100%;
  min-width:0;
  min-height:34px;
  margin:0;
  /* keep knob+shadow inside .ipod-now overflow:hidden */
  padding:0 3px;
  box-sizing:border-box;
  position:relative;
  z-index:1;
  overflow:visible;
}
.ipod-now .deck-times{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:3px;
  padding:0 3px; /* align with inset track */
  box-sizing:border-box;
  font-size:11px;line-height:1.2;opacity:.85;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
.ipod-now .deck-track{height:22px;--knob-r:9px} /* radius + border breathing room */
.ipod-now .deck-knob{
  width:16px;height:16px;margin:0;
  transform:translate(-50%,-50%);
}
.ipod-now .deck-track:not(.deck-scrubbing):not(.deck-playing) .deck-knob{
  transition:left 70ms linear;
}
.ipod-now .deck-track:not(.deck-scrubbing):not(.deck-playing) .deck-fill{
  transition:width 70ms linear;
}
.ipod-now .deck-track::before,.ipod-now .deck-fill{height:5px;margin-top:-2.5px}
@media (min-width:428px){
  .ipod-now .deck-track{--knob-r:10px;height:24px}
  .ipod-now .deck-knob{width:18px;height:18px}
  .ipod-now .deck-track::before,.ipod-now .deck-fill{height:6px;margin-top:-3px}
}

.ipod-now .deck-lyrics{
  grid-row:3;grid-column:1;
  position:relative;
  height:100%;
  max-height:5.6em; /* fixed cap */
  min-height:0;min-width:0;
  overflow:hidden;
  margin:0;padding:0;
  align-self:stretch;justify-self:stretch;
}
.ipod-now .deck-lyrics[hidden]{
  /* keep the row reserved so layout does not jump; just blank it */
  display:grid!important;visibility:hidden;pointer-events:none;
}

.wheel-menu{
  top:5%;left:50%;transform:translateX(-50%);
  width:auto;height:auto;font-family:var(--sans,Oswald,sans-serif);
  font-size:clamp(.55rem, 3cqw, .7rem);font-weight:700;letter-spacing:.12em;
  color:var(--deck-ink);
}