/* Stay Free Alberta Radio — 1960s American car-radio skin (baseline)
   Structure/JS live in radio.html; this file is only the look. Textures are CSS gradients + the
   inline SVG noise filters (#grain, #brush, #leather) declared at the top of radio.html. */
:root{
  --dash:#17120f; --dash-2:#221a15; --face:#1a1613; --face-2:#0f0c0a;
  --cream:#f1e3c4; --cream-dim:#b9a98a; --amber:#ffb347; --amber-hi:#ffd08a; --amber-dim:#8a5a22; --red:#ff4b2b; --vu-red:#c8352a;
  --ink:#1d1a17; --paper:#f4ead6; --navy:#0a1f3d; --gold:#eaa221;
  --chrome:linear-gradient(175deg,#ffffff 0%,#c9c9c9 14%,#f5f5f5 28%,#8a8a8a 46%,#dedede 60%,#7f7f7f 76%,#ececec 90%,#9a9a9a 100%);
  --chrome-h:linear-gradient(90deg,#9a9a9a 0%,#f2f2f2 12%,#b5b5b5 30%,#ffffff 50%,#a9a9a9 70%,#eeeeee 88%,#8f8f8f 100%);
  --sans:'Oswald',"Helvetica Neue",Arial,sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Inter,Segoe UI,Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--dash);color:var(--cream);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(ellipse at 50% -10%,rgba(255,179,71,.10),transparent 55%),
  radial-gradient(ellipse at 50% 110%,rgba(0,0,0,.6),transparent 60%),
  linear-gradient(180deg,#1d1713 0%,#15100d 60%,#0f0b09 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;mix-blend-mode:overlay;filter:url(#leather);background:#888}
.defs{position:absolute;width:0;height:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
.wrap{max-width:1320px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:.02em;line-height:1.15}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(21,17,14,.86);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.top .wrap{display:flex;align-items:center;gap:12px;height:56px}
.top img{height:34px;width:auto}
.top .name{font-family:var(--sans);font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem;text-decoration:none;color:var(--cream)}
.top .sp{flex:1}
.top a.home{color:var(--cream-dim);text-decoration:none;font-size:.95rem}
.top a.home:hover{color:var(--cream)}

/* dashboard */
.dash{padding:34px 0 40px}
.intro{text-align:center;color:var(--cream-dim);font-size:clamp(1rem,1.8vw,1.15rem);max-width:640px;margin:0 auto 26px}

/* ---------- the radio housing ---------- */
.radio{position:relative;display:grid;grid-template-columns:290px minmax(0,1fr) 340px;gap:18px;padding:30px 28px 28px;border-radius:28px;
  border:14px solid transparent;
  background:linear-gradient(#1b1714,#1b1714) padding-box,var(--chrome) border-box;
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 8px 18px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
.radio::before{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07),inset 0 0 60px rgba(0,0,0,.85),inset 0 -2px 0 rgba(0,0,0,.6)}
.radio::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;opacity:.22;mix-blend-mode:overlay;filter:url(#leather);background:#8a8a8a}
.radio>*{position:relative;z-index:1}
.radio>.face{z-index:2}   /* its pop-up menus must clear the lyrics panel that paints after it (barlight stays on top at 3) */
.screw{position:absolute;width:15px;height:15px;border-radius:50%;z-index:2;background:radial-gradient(circle at 35% 30%,#fff 0%,#cfcfcf 25%,#6e6e6e 60%,#2a2a2a 100%);box-shadow:0 1px 2px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.3)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:6px;height:2px;background:#2b2b2b;transform:rotate(-30deg);border-radius:1px;box-shadow:0 1px 0 rgba(255,255,255,.35)}
.screw.tl{left:-8px;top:-8px}.screw.tr{right:-8px;top:-8px}.screw.bl{left:-8px;bottom:-8px}.screw.br{right:-8px;bottom:-8px}
.screw.tr::after{transform:rotate(40deg)}.screw.bl::after{transform:rotate(10deg)}.screw.br::after{transform:rotate(-55deg)}

/* panels */
.panel{min-width:0}
.plate{position:relative;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 12px;border-radius:6px;overflow:hidden;
  background:var(--chrome-h);color:#2b2b2b;font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.35)}
.plate::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;filter:url(#brush);background:#bbb;pointer-events:none}
.plate>*{position:relative;z-index:1}
.plate .plate-r{letter-spacing:.08em;font-weight:500;text-transform:none;font-size:.78rem}
.plate .plate-btn{letter-spacing:.06em;text-transform:none;font-weight:500;font-size:.78rem;padding:4px 8px;border-radius:4px;color:#2b2b2b}
.plate .plate-btn:hover{background:rgba(0,0,0,.08)}

/* left: stations */
.stations{display:flex;flex-direction:column;gap:12px}
.station-list{flex:1;max-height:560px;overflow:auto;overscroll-behavior:contain;border-radius:10px;background:var(--face-2);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05);scrollbar-color:#4a3d32 #0f0c0a;scrollbar-width:thin;padding:6px}
.station{display:grid;grid-template-columns:38px 1fr 12px 34px;align-items:center;gap:8px;padding:9px 6px 9px 8px;border-radius:7px;cursor:pointer;color:var(--cream);transition:background .12s}
.station+.station{border-top:1px solid rgba(255,255,255,.04)}
.station:hover{background:rgba(255,255,255,.04)}
.station.on{background:linear-gradient(90deg,rgba(255,179,71,.14),rgba(255,179,71,.04));box-shadow:inset 3px 0 0 var(--amber)}
.station .f{font-family:var(--sans);font-weight:500;color:var(--amber-dim);font-size:.9rem;text-align:center;letter-spacing:.04em}
.station.on .f{color:var(--amber)}
.station .t{min-width:0;display:flex;flex-direction:column}
.station .t b{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.station .t small{color:var(--cream-dim);font-size:.74rem}
.station .lamp{width:8px;height:8px;border-radius:50%;background:#3a2f26;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.station.on .lamp{background:var(--amber-dim)}
.station.on.playing .lamp{background:var(--amber-hi);box-shadow:0 0 8px var(--amber),0 0 2px #fff}
.station .dl{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--cream-dim)}
.station .dl:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.station .dl svg{width:16px;height:16px}
.station .menu{position:relative;display:block}
.station .menu .pop{left:auto;right:0}
.dl-all{display:block}
.pushbtn.wide{width:100%;justify-content:center}

/* middle: face */
.face{display:flex;flex-direction:column;gap:14px;align-items:stretch;text-align:center}
.brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-6px}
.brand .script{font-family:'Yellowtail',cursive;font-size:2.3rem;line-height:1.1;color:#f7f7f7;
  background:linear-gradient(180deg,#f5f5f3 0%,#dededb 35%,#969696 50%,#e4e4e2 62%,#7f7f7f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;   /* chrome script, hazed: no longer a pure-white hot spot */
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.brand .model{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}

/* dial */
.dial{position:relative}
.glass{position:relative;border-radius:12px;overflow:hidden;background:
  radial-gradient(ellipse at 50% 130%,rgba(255,170,60,.28),transparent 60%),
  linear-gradient(180deg,#201711 0%,#120d09 55%,#0b0806 100%);
  box-shadow:inset 0 4px 14px rgba(0,0,0,.95),inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 rgba(255,255,255,.08);transition:background .6s}
.playing .dial .glass{background:
  radial-gradient(ellipse at 50% 130%,rgba(255,170,60,.55),transparent 62%),
  linear-gradient(180deg,#2a1c12 0%,#170f0a 55%,#0e0906 100%)}
.dial .glass{height:118px}
.dial .glass::before{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 6px #262120,inset 0 0 0 7px rgba(255,255,255,.08);pointer-events:none;z-index:3}
.reflect{position:absolute;inset:0;pointer-events:none;z-index:4;background:
  linear-gradient(168deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,transparent 42%,transparent 70%,rgba(255,255,255,.03) 100%),
  radial-gradient(ellipse 18% 14% at 84% 74%,rgba(215,228,250,.05),rgba(215,228,250,0) 70%),   /* smudges low on the right, clear of the lyric lines */
  radial-gradient(ellipse 12% 9% at 90% 88%,rgba(215,228,250,.05),rgba(215,228,250,0) 70%),
  linear-gradient(104deg,rgba(215,228,250,0) 72%,rgba(215,228,250,.035) 80%,rgba(215,228,250,0) 88%),
  radial-gradient(ellipse 100% 100% at 50% 50%,rgba(215,228,250,0) 62%,rgba(215,228,250,.05) 100%)}   /* haze gathering at the glass edges */
.scale{position:absolute;left:34px;right:34px;top:14px;bottom:14px}
.scale .tick{position:absolute;bottom:0;width:1px;height:10px;background:rgba(241,227,196,.55);transform:translateX(-.5px)}
.scale .tick.major{height:18px;width:2px;background:rgba(241,227,196,.9)}
.scale .num{position:absolute;bottom:24px;transform:translateX(-50%);font-family:var(--sans);font-weight:500;font-size:.98rem;letter-spacing:.04em;color:var(--cream);text-shadow:0 0 6px rgba(255,179,71,.5)}
.scale .mark{position:absolute;top:0;width:12px;height:12px;transform:translateX(-50%);padding:0;cursor:pointer;z-index:2}
.scale .mark::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--amber-dim);transition:border-color .2s}
.scale .mark:hover::before,.scale .mark.on::before{border-top-color:var(--amber-hi);filter:drop-shadow(0 0 4px var(--amber))}
.needle{position:absolute;top:8px;bottom:8px;width:3px;left:50%;background:linear-gradient(180deg,#ff6a3d,#ff2d1a);border-radius:2px;transform:translateX(-50%);z-index:2;
  box-shadow:0 0 10px rgba(255,75,43,.9),0 0 2px #fff;transition:left .7s cubic-bezier(.3,.9,.3,1)}
.band{display:flex;justify-content:space-between;align-items:center;padding:6px 16px 0;font-family:var(--sans);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--cream-dim)}
.band #freq{color:var(--amber);font-size:.95rem;letter-spacing:.1em;text-shadow:0 0 8px rgba(255,179,71,.6)}

/* ---------- jukebox title roller (replaces the dial) ----------
   .roller = chrome bezel set into the wood · .roller-frame = the glass window (it holds the perspective) ·
   .drum = the cylinder: the JS puts every .strip on it with an inline rotateX/translateZ, opacity and z-index
   (never set those here) · .roller-shade = drum curvature, the bezel's shadow and the selection lamp's spill ·
   .roller-glass = reflection, haze, smudges. The JS drum radius is 175px with 24° between strips, so the drum
   is scaled down inside the window to show three to five strips at once; the strips are wider than the window
   so their paper edges stay behind the bezel at every depth, and their print is padded in to clear the overflow.
   GOTCHA: no outer box-shadow (or drop-shadow filter) on .strip — Chrome inflates the 3D layer by the shadow and
   then mis-clips it inside the overflow:hidden perspective frame, cutting the paper short of the window edge;
   every strip shadow here is inset, and the lamp glow lives in .roller-shade instead. */
.roller{--rs:.625;position:relative;padding:7px;border-radius:13px;
  background:
    linear-gradient(104deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.42) 45%,rgba(255,255,255,0) 56%),
    linear-gradient(180deg,#fbfbf9 0%,#d6d6d2 5%,#9d9d99 17%,#e6e6e2 33%,#7e7e7a 52%,#c6c6c2 68%,#5f5f5c 87%,#a9a9a5 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 0 rgba(0,0,0,.85),0 0 0 3px rgba(0,0,0,.28),0 2px 3px rgba(0,0,0,.55),
             inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.5)}
/* chrome patina on the ring only: haze and fine scratches, tarnish gathering along the lower inner edge */
.roller::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:7px;pointer-events:none;z-index:2;
  opacity:.34;mix-blend-mode:multiply;filter:url(#brush);background:#b6b6b2;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.roller::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:7px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(240,243,247,.16) 0%,rgba(240,243,247,.05) 30%,rgba(240,243,247,0) 50%),   /* haze where the lamp hits the top of the ring */
             radial-gradient(ellipse 16% 90% at 20% 100%,rgba(52,56,62,.26),rgba(52,56,62,0) 70%),           /* mottled tarnish clouds on the lower band */
             radial-gradient(ellipse 12% 80% at 76% 100%,rgba(52,56,62,.2),rgba(52,56,62,0) 70%),
             radial-gradient(ellipse 60% 70% at 50% 100%,rgba(0,0,0,.28),rgba(0,0,0,0) 70%),
             linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.14) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* the window: black gasket, bevelled inner edge lit from above. Behind the strips, the drum's gunmetal body with
   the empty holder rails where the next strips would clip in (they show in the gaps between strips too; the
   positions are px from the centre because the drum's on-screen scale is fixed) */
.roller-frame{position:relative;z-index:1;height:216px;overflow:hidden;border-radius:7px;perspective:1400px;perspective-origin:50% 50%;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0) calc(50% - 166.5px*var(--rs)),rgba(150,165,185,.28) calc(50% - 166.5px*var(--rs)),rgba(150,165,185,.28) calc(50% - 165.5px*var(--rs)),rgba(0,0,0,.5) calc(50% - 165.5px*var(--rs)),rgba(0,0,0,.5) calc(50% - 164.5px*var(--rs)),rgba(0,0,0,0) calc(50% - 163.5px*var(--rs)),
      rgba(0,0,0,0) calc(50% - 118.5px*var(--rs)),rgba(170,185,205,.42) calc(50% - 118.5px*var(--rs)),rgba(170,185,205,.42) calc(50% - 117.5px*var(--rs)),rgba(0,0,0,.55) calc(50% - 117.5px*var(--rs)),rgba(0,0,0,.55) calc(50% - 116.5px*var(--rs)),rgba(0,0,0,0) calc(50% - 115.5px*var(--rs)),
      rgba(0,0,0,0) calc(50% - 45.0px*var(--rs)),rgba(190,205,225,.5) calc(50% - 45.0px*var(--rs)),rgba(190,205,225,.5) calc(50% - 44.0px*var(--rs)),rgba(0,0,0,.6) calc(50% - 44.0px*var(--rs)),rgba(0,0,0,.6) calc(50% - 43.0px*var(--rs)),rgba(0,0,0,0) calc(50% - 42.0px*var(--rs)),
      rgba(0,0,0,0) calc(50% + 42.0px*var(--rs)),rgba(0,0,0,.6) calc(50% + 42.0px*var(--rs)),rgba(0,0,0,.6) calc(50% + 43.0px*var(--rs)),rgba(190,205,225,.4) calc(50% + 43.0px*var(--rs)),rgba(190,205,225,.4) calc(50% + 44.0px*var(--rs)),rgba(0,0,0,0) calc(50% + 45.0px*var(--rs)),
      rgba(0,0,0,0) calc(50% + 115.5px*var(--rs)),rgba(0,0,0,.55) calc(50% + 115.5px*var(--rs)),rgba(0,0,0,.55) calc(50% + 116.5px*var(--rs)),rgba(170,185,205,.3) calc(50% + 116.5px*var(--rs)),rgba(170,185,205,.3) calc(50% + 117.5px*var(--rs)),rgba(0,0,0,0) calc(50% + 118.5px*var(--rs)),
      rgba(0,0,0,0) calc(50% + 163.5px*var(--rs)),rgba(0,0,0,.5) calc(50% + 163.5px*var(--rs)),rgba(0,0,0,.5) calc(50% + 164.5px*var(--rs)),rgba(150,165,185,.2) calc(50% + 164.5px*var(--rs)),rgba(150,165,185,.2) calc(50% + 165.5px*var(--rs)),rgba(0,0,0,0) calc(50% + 166.5px*var(--rs))),
    linear-gradient(180deg,#020305 0%,#0b0f15 22%,#1b222c 40%,#262f3a 50%,#1b222c 60%,#0b0f15 78%,#020305 100%);
  box-shadow:0 0 0 1px #000,0 -1px 0 1px rgba(0,0,0,.6),0 2px 0 1px rgba(255,255,255,.42)}
/* fine turning marks around the drum's circumference */
.roller-frame::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;z-index:0;pointer-events:none;
  transform:rotate(90deg);opacity:.2;mix-blend-mode:overlay;filter:url(#brush);background:#9aa4b0}
.drum{position:absolute;inset:0;transform-style:preserve-3d;transform:scale(var(--rs))}
/* a paper title strip in its holder: cream stock, yellowed ends, a printed blue frame, typewritten title over a
   printed rule and the artist line, the selection code knocked out of a solid blue box. The holder rail above
   each strip throws a soft shadow on its top edge; the paper curls into the clip at the bottom. */
.strip{position:absolute;left:-24%;right:-24%;top:50%;height:70px;margin-top:-35px;
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:18px;row-gap:0;
  padding:0 calc(4% + 20px) 0 calc(4% + 16px);border-radius:2px;text-align:left;cursor:pointer;backface-visibility:hidden;color:#1c1915;
  background:
    linear-gradient(90deg,rgba(122,98,52,.16) 0%,rgba(122,98,52,0) 4%,rgba(122,98,52,0) 96%,rgba(122,98,52,.16) 100%),
    linear-gradient(180deg,rgba(122,98,52,.11) 0%,rgba(122,98,52,0) 14%,rgba(122,98,52,0) 86%,rgba(122,98,52,.09) 100%),   /* yellowed top and bottom edges */
    linear-gradient(180deg,rgba(0,0,0,0) 72%,rgba(0,0,0,.07) 100%),
    linear-gradient(180deg,#faf3df 0%,#f3e9cd 48%,#e9dbb8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(0,0,0,.24),inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(0,0,0,.08),
             inset 0 8px 9px -7px rgba(0,0,0,.42),inset 0 -9px 10px -9px rgba(0,0,0,.2);
  transition:transform .55s cubic-bezier(.3,.9,.3,1),opacity .4s,box-shadow .3s}
.strip>*{position:relative;z-index:1}
/* printed frame + foxing, varied strip to strip so the drum does not repeat itself */
.strip::before{content:"";position:absolute;inset:5px 8px;border:1px solid rgba(34,72,138,.3);border-radius:1px;pointer-events:none;background:
  radial-gradient(ellipse 9% 38% at 85% 30%,rgba(132,108,62,.14),rgba(132,108,62,0) 70%),
  radial-gradient(ellipse 5% 24% at 13% 78%,rgba(132,108,62,.12),rgba(132,108,62,0) 70%)}
.strip:nth-child(2n)::before{background:
  radial-gradient(ellipse 7% 30% at 30% 22%,rgba(132,108,62,.13),rgba(132,108,62,0) 70%),
  radial-gradient(ellipse 10% 40% at 92% 70%,rgba(132,108,62,.11),rgba(132,108,62,0) 70%)}
.strip:nth-child(4n+3)::before{background:
  radial-gradient(circle at 76% 58%,rgba(140,112,64,0) 10.4%,rgba(140,112,64,.11) 11%,rgba(140,112,64,.03) 12.2%,rgba(140,112,64,0) 13%),
  radial-gradient(ellipse 6% 26% at 9% 26%,rgba(132,108,62,.12),rgba(132,108,62,0) 70%)}
.strip::after{content:"";position:absolute;inset:0;border-radius:2px;opacity:.13;mix-blend-mode:multiply;filter:url(#grain);background:#888;pointer-events:none;z-index:2}
.strip .num{grid-row:1/3;min-width:54px;padding:9px 10px 8px;border-radius:2px;text-align:center;
  font-family:var(--sans);font-weight:600;font-size:1.08rem;line-height:1;letter-spacing:.1em;color:#fff;
  background:linear-gradient(180deg,#2f6fc4,#1b4a8f);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(10,30,70,.45);text-shadow:0 1px 0 rgba(0,0,0,.3)}
.strip .title{grid-column:2;grid-row:1;font-family:'Special Elite','Courier New',monospace;font-size:1.5rem;line-height:1.15;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1b1813;text-shadow:0 0 .6px rgba(27,24,19,.65)}
.strip .sub{display:block;grid-column:2;grid-row:2;margin-top:2px;padding-top:3px;border-top:1px solid rgba(34,72,138,.45);
  font-family:var(--sans);font-weight:500;font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;color:#28508c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the typing sits a hair crooked on some strips, as it would */
.strip:nth-child(3n+1) .title{transform:rotate(-.35deg) translateY(.5px)}
.strip:nth-child(3n) .title{transform:rotate(.3deg)}
.strip:nth-child(5n+2) .num{transform:translateY(1px)}
/* the selected strip is lit by the selection lamp behind the window: brighter paper, a blue ring at its edge,
   light creeping in from the ends (all inset — see the gotcha above) */
.strip.on{color:#15120e;background:
    radial-gradient(ellipse 70% 130% at 50% 50%,rgba(255,255,255,.34),rgba(255,255,255,0) 72%),
    linear-gradient(90deg,rgba(122,98,52,.12) 0%,rgba(122,98,52,0) 4%,rgba(122,98,52,0) 96%,rgba(122,98,52,.12) 100%),
    linear-gradient(180deg,rgba(122,98,52,.08) 0%,rgba(122,98,52,0) 14%,rgba(122,98,52,0) 86%,rgba(122,98,52,.07) 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 72%,rgba(0,0,0,.06) 100%),
    linear-gradient(180deg,#fffbee 0%,#f8efd6 48%,#eee0bf 100%);
  box-shadow:inset 0 0 0 2px var(--led,#5fb3ff),inset 0 0 14px rgba(95,179,255,.35),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.18),
             inset 0 -9px 10px -9px rgba(0,0,0,.14)}
.strip.on .num{background:linear-gradient(180deg,#4a8de0,#245ca8)}
.strip:focus-visible{outline:2px solid var(--led,#5fb3ff);outline-offset:3px}
/* drum curvature: the strips roll away into the dark top and bottom, the bezel shades the top, a cool sheen from
   the lamp above rides the drum's upper curve, and the selection lamp spills blue into the gaps either side of the
   lit strip (which always sits at the centre; its on-screen half-height is 40px × --rs) */
.roller-shade{position:absolute;inset:0;z-index:200;pointer-events:none;background:
  linear-gradient(180deg,rgba(95,179,255,0) calc(50% - 64px*var(--rs)),rgba(95,179,255,.2) calc(50% - 43px*var(--rs)),rgba(95,179,255,.3) calc(50% - 40px*var(--rs)),rgba(95,179,255,0) calc(50% - 38px*var(--rs)),
                         rgba(95,179,255,0) calc(50% + 38px*var(--rs)),rgba(95,179,255,.3) calc(50% + 40px*var(--rs)),rgba(95,179,255,.2) calc(50% + 43px*var(--rs)),rgba(95,179,255,0) calc(50% + 64px*var(--rs))),
  linear-gradient(180deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.62) 10%,rgba(0,0,0,.3) 24%,rgba(0,0,0,.08) 37%,rgba(0,0,0,0) 44%,
                         rgba(0,0,0,0) 56%,rgba(0,0,0,.14) 64%,rgba(0,0,0,.48) 77%,rgba(0,0,0,.82) 90%,rgba(0,0,0,.97) 100%),
  linear-gradient(180deg,rgba(0,0,0,0) 28%,rgba(190,215,255,.07) 35%,rgba(190,215,255,0) 42%),
  linear-gradient(90deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 5%,rgba(0,0,0,0) 95%,rgba(0,0,0,.4) 100%)}
.roller-glass{position:absolute;inset:0;z-index:201;pointer-events:none;background:
  linear-gradient(164deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.06) 18%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 72%,rgba(255,255,255,.035) 100%),
  linear-gradient(164deg,rgba(255,255,255,0) 21.5%,rgba(255,255,255,.085) 23%,rgba(255,255,255,.085) 24.2%,rgba(255,255,255,0) 26%),
  radial-gradient(ellipse 30% 55% at 68% 62%,rgba(200,220,255,.05),rgba(200,220,255,0) 70%),
  radial-gradient(ellipse 18% 32% at 21% 76%,rgba(200,220,255,.04),rgba(200,220,255,0) 70%),
  radial-gradient(ellipse 13% 24% at 89% 22%,rgba(215,228,250,.07),rgba(215,228,250,0) 70%),   /* finger smudges, kept off the lit centre strip */
  radial-gradient(ellipse 9% 18% at 8% 80%,rgba(215,228,250,.05),rgba(215,228,250,0) 70%),
  linear-gradient(118deg,rgba(215,228,250,0) 63%,rgba(215,228,250,.045) 70%,rgba(215,228,250,0) 77%),   /* a wipe mark */
  linear-gradient(180deg,rgba(170,200,240,.03),rgba(170,200,240,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 12px 16px -8px rgba(0,0,0,.75)}
/* window heights: desktop must never scroll, so the window gives way first as the viewport gets shorter */
@media(min-width:1151px) and (max-height:900px){.roller-frame{height:196px}}
@media(min-width:1151px) and (max-height:800px){.roller-frame{height:144px}}
@media(min-width:1151px) and (max-height:740px){.roller{--rs:.55;padding:5px}.roller::before,.roller::after{padding:5px}.roller-frame{height:104px}.strip{left:-34%;right:-34%;padding:0 calc(5% + 20px) 0 calc(5% + 16px)}}
@media(max-width:760px){.roller{padding:6px;border-radius:11px}.roller::before,.roller::after{padding:6px}.roller-frame{height:180px}.strip .title{font-size:1.4rem}}

/* readout */
.readout{display:flex;flex-direction:column;align-items:center;gap:2px}
.np-label{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}
.np{font-family:var(--sans);font-weight:500;font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:.04em;color:var(--cream);line-height:1.2;transition:text-shadow .4s}
.playing .np{text-shadow:0 0 14px rgba(255,179,71,.55)}

/* meters */
.meterrow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
.vu{position:relative;border-radius:12px;padding:8px 10px 2px;background:
  radial-gradient(ellipse at 50% 0%,#fbf5e6,#eadfc4 70%,#d9cba8 100%);
  box-shadow:inset 0 0 0 4px #2a2524,inset 0 0 0 5px rgba(255,255,255,.35),inset 0 8px 16px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.6)}
.vu svg{display:block;width:100%;max-width:280px;height:auto;margin:0 auto}
.vu-arc{fill:none;stroke:#2a2524;stroke-width:3}
.vu-red{fill:none;stroke:var(--vu-red);stroke-width:5}
.vu-ticks line{stroke:#2a2524;stroke-width:1.5}
.vu-ticks line.maj{stroke-width:2.5}
.vu-ticks text{font-family:var(--sans);font-size:11px;fill:#2a2524;font-weight:500}
.vu-needle line{stroke:#1d1a17;stroke-width:2.2;stroke-linecap:round}
.vu-needle{transition:transform .08s linear}
.vu-pivot{fill:#1d1a17}
.vu-label{position:absolute;right:14px;top:10px;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;color:#2a2524}
.clock{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;background:var(--face-2);box-shadow:inset 0 2px 8px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.05);
  font-family:var(--sans);font-weight:500;font-size:1.35rem;letter-spacing:.08em;color:var(--amber);text-shadow:0 0 10px rgba(255,179,71,.6);font-variant-numeric:tabular-nums}
.clock .sep{color:var(--amber-dim)}

/* seek rail */
.seek{padding:2px 4px}
.bar{position:relative;height:10px;border-radius:99px;cursor:pointer;background:linear-gradient(180deg,#0c0907,#1c1612);box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.bar .buf{position:absolute;inset:2px;width:0;border-radius:99px;background:#2e2521}
.bar .fill{position:absolute;inset:2px;width:0;border-radius:99px;background:linear-gradient(90deg,var(--amber-dim),var(--amber));box-shadow:0 0 8px rgba(255,179,71,.6)}
.bar .knob-ind{position:absolute;top:50%;left:0;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#fff,#cfcfcf 30%,#7a7a7a 70%,#3a3a3a);box-shadow:0 2px 4px rgba(0,0,0,.8)}

/* knobs + pushbuttons */
.knobrow{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;margin-top:4px}
.knob{display:flex;flex-direction:column;align-items:center;gap:6px;user-select:none;touch-action:none;cursor:grab;outline:none}
.knob.held{cursor:grabbing}
.knob .cap{position:relative;width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2b2b2b 0 46%,#101010 47% 52%,transparent 53%),
             repeating-conic-gradient(from 0deg,#3a3a3a 0deg 5deg,#141414 5deg 10deg),
             radial-gradient(circle at 35% 30%,#ffffff 0%,#d8d8d8 20%,#8e8e8e 55%,#4a4a4a 100%);
  background-size:62% 62%,62% 62%,100% 100%;background-position:center,center,center;background-repeat:no-repeat;
  box-shadow:0 10px 18px rgba(0,0,0,.75),0 2px 3px rgba(0,0,0,.8),inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 4px rgba(0,0,0,.6);
  transition:transform .15s ease-out}
.knob .cap .mark{position:absolute;left:50%;top:9px;width:3px;height:16px;border-radius:2px;background:var(--cream);transform:translateX(-50%);box-shadow:0 0 4px rgba(255,255,255,.4)}
.knob:focus-visible .cap{box-shadow:0 10px 18px rgba(0,0,0,.75),0 0 0 3px rgba(255,179,71,.6)}
.knob .lbl{font-family:var(--sans);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--cream-dim)}
.pushrow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;align-content:start;padding-top:8px}
.pushbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:72px;height:42px;padding:0 14px;border-radius:7px;
  background:var(--chrome-h);color:#2b2b2b;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:0 4px 0 #6d6d6d,0 7px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(0,0,0,.25);
  transition:transform .08s,box-shadow .08s,filter .15s}
.pushbtn::after{content:"";position:absolute;inset:0;border-radius:7px;opacity:.28;mix-blend-mode:multiply;filter:url(#brush);background:#bbb;pointer-events:none}
.pushbtn>*{position:relative;z-index:1}
.pushbtn svg{width:16px;height:16px;flex:none}
.pushbtn:hover{filter:brightness(1.06)}
.pushbtn:active,.pushbtn.on{transform:translateY(3px);box-shadow:0 1px 0 #6d6d6d,0 2px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6),inset 0 2px 6px rgba(0,0,0,.25)}
.pushbtn.play{min-width:96px;height:46px;padding:0 18px;font-size:.78rem}
.pushbtn.play .pa{display:none}
.playing .pushbtn.play .pl{display:none}
.playing .pushbtn.play .pa{display:block}
.pushbtn .lamp{width:8px;height:8px;border-radius:50%;background:#5a4a3a;box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
.pushbtn.on .lamp{background:var(--amber-hi);box-shadow:0 0 8px var(--amber),0 0 2px #fff}
.actrow{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.menu{position:relative;display:inline-block}
.menu .pop{position:absolute;left:0;top:calc(100% + 10px);background:#fbf7ee;color:var(--ink);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.2);min-width:290px;padding:6px;display:none;z-index:9;text-align:left}
.menu.open .pop{display:block}
.dl-all .pop{top:auto;bottom:calc(100% + 10px)}                       /* Download-all sits at the foot of the Songs panel: open upward, never off-screen */
@media(min-width:1151px){#dlMenu .pop{top:auto;bottom:calc(100% + 10px)}} /* desktop: the face's Download is flush with the radio's bottom edge */
.pop a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:9px;text-decoration:none;color:var(--ink)}
.pop a:hover{background:#efe6d2}
.pop a b{font-weight:600}
.pop a small{color:#6b5f4f}
.pop .hint{display:block;padding:8px 12px 6px;font-size:.76rem;color:#6b5f4f}
.toast{font-size:.86rem;color:var(--amber);opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

/* right: lyrics */
.lyrics{display:flex;flex-direction:column;gap:12px}
.lyr-glass{flex:1;min-height:420px;height:calc(100vh - 270px);max-height:720px}
.lines{position:absolute;inset:0;overflow:auto;scroll-behavior:smooth;overscroll-behavior:contain;padding:150px 22px;scrollbar-width:thin;scrollbar-color:#4a3d32 transparent;z-index:2;
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.lines.tall{mask-image:none;-webkit-mask-image:none;padding:22px}
.ln{font-family:var(--sans);font-weight:400;font-size:1.25rem;letter-spacing:.02em;line-height:1.35;color:rgba(241,227,196,.42);padding:7px 0;cursor:pointer;transition:color .3s,font-size .3s,text-shadow .3s}
.ln:hover{color:rgba(241,227,196,.75)}
.ln.on{color:var(--amber-hi);font-weight:500;font-size:1.5rem;text-shadow:0 0 14px rgba(255,179,71,.55)}
.ln.done{color:rgba(241,227,196,.28)}
.ln.on .w{color:rgba(241,227,196,.55);transition:color .12s}
.ln.on .w.sung{color:var(--amber-hi);text-shadow:0 0 10px rgba(255,179,71,.7)}
.ln.empty{font-size:1rem;color:var(--cream-dim);cursor:default}
.gap{display:inline-flex;gap:7px;align-items:center;height:1.3em}
.gap i{width:8px;height:8px;border-radius:50%;background:var(--amber-dim);display:block;opacity:.4}
.ln.on .gap i{animation:dot 2.4s infinite}
.ln.on .gap i:nth-child(2){animation-delay:.8s}.ln.on .gap i:nth-child(3){animation-delay:1.6s}
@keyframes dot{0%,100%{opacity:.25}30%{opacity:1}}

/* licence card (glovebox paper) */
.licence{padding:10px 20px 20px}
.lic{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;align-items:center;padding:34px 34px;border-radius:18px;color:var(--ink);background:var(--paper);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.08)}
.lic h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--navy)}
.lic p{color:#4a4238;margin-top:12px;line-height:1.55}
.lic ul{margin:14px 0 0 20px;color:var(--ink)}
.lic li{margin:6px 0}
.lic a{color:var(--navy)}
.lic .cta{background:#1b1714;color:var(--cream);border-radius:14px;padding:26px;text-align:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lic .cta h3{font-size:1.2rem}
.lic .cta p{color:var(--cream-dim);font-size:.95rem;margin-top:8px}
.lic .cta .btn{margin-top:16px}
.lic .cta .verify{display:block;margin-top:14px;font-size:.88rem;color:var(--cream-dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 22px;font-weight:600;font-size:1rem;text-decoration:none;font-family:var(--body);transition:transform .12s,background .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--gold);color:#231a05}
.btn-primary:hover{background:#f2b03a}
.btn-soft{background:#e9e1cf;color:var(--ink)}
.btn-soft:hover{background:#dfd5bf}

footer{padding:28px 0 36px;text-align:center;color:var(--cream-dim);font-size:.88rem;position:relative;z-index:1}
footer a{color:var(--cream);text-decoration:none}
footer .sfa{margin-bottom:8px}

/* modal (certificate) — a clean paper document */
dialog{margin:auto;border:0;border-radius:22px;padding:0;max-width:560px;width:calc(100% - 32px);box-shadow:0 30px 80px rgba(0,0,0,.6);color:#1d1d1f;background:#fff;font-family:var(--body)}
dialog::backdrop{background:rgba(10,8,6,.6);backdrop-filter:blur(6px)}
.m{padding:28px 28px 26px}
.m h3{font-family:var(--body);font-size:1.45rem;font-weight:600;letter-spacing:-.02em}
.m .p{color:#6e6e73;margin-top:6px;font-size:.98rem}
.m .dim{color:#6e6e73}
.m .ok{color:#2a7a3b}
.m .x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;background:#f0f0f4;display:grid;place-items:center;color:#6e6e73}
.m .x svg{width:16px;height:16px}
.step{display:none}
.step.on{display:block}
.chk{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;cursor:pointer;user-select:none}
.chk:hover{background:#f5f5f7}
.chk input{width:20px;height:20px;accent-color:var(--navy)}
.chk.all{background:#f5f5f7;font-weight:600;margin-top:16px}
.chk small{color:#6e6e73;margin-left:auto;font-variant-numeric:tabular-nums}
.songs{margin-top:6px;max-height:36vh;overflow:auto;border-radius:12px}
.field{margin-top:16px}
.field label{display:block;font-size:.85rem;color:#6e6e73;margin-bottom:6px}
.field input{width:100%;font:inherit;padding:13px 14px;border-radius:12px;border:1px solid #d2d2d7;background:#fff;outline:none;transition:border .15s,box-shadow .15s}
.field input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(10,31,61,.12)}
.mact{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:22px}
.mact .err{color:#b50000;font-size:.9rem;margin-right:auto}
.m .btn-primary{background:var(--navy);color:#fff}
.m .btn-primary:hover{background:#13305c}
.m .btn-soft{background:#eef0f4;color:#1d1d1f}
.certwrap{margin-top:16px;border-radius:12px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.14);background:#fff}
.certwrap canvas{display:block;width:100%;height:auto}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .radio{grid-template-columns:290px minmax(0,1fr)}
  .stations{grid-row:1/3}
  .face,.lyrics{grid-column:2}
  .lyr-glass{height:420px;min-height:0}
  .station-list{max-height:none}
}
@media(max-width:760px){
  .wrap{padding:0 12px}
  .dash{padding:22px 0 28px}
  .radio{grid-template-columns:1fr;gap:16px;padding:22px 16px;border-radius:22px}
  .face{order:1}.lyrics{order:2}.stations{order:3}
  .stations{grid-row:auto}.face,.lyrics{grid-column:auto}
  .station-list{max-height:380px}
  .screw{width:12px;height:12px}
  .knobrow{grid-template-columns:auto auto;grid-template-areas:"push push" "vol tune";justify-items:center;gap:14px}
  .pushrow{grid-area:push}
  #volKnob{grid-area:vol}#tuneKnob{grid-area:tune}
  .knob .cap{width:72px;height:72px}
  .pushbtn{min-width:0;padding:0 11px;letter-spacing:.1em}
  .pushbtn span:not(.pl):not(.pa){font-size:.66rem}
  .dial .glass{height:100px}
  .scale{left:18px;right:18px}
  .scale .num{font-size:.8rem}
  .meterrow{grid-template-columns:1fr}
  .clock{justify-content:center}
  .lyr-glass{height:360px;min-height:0}
  .lines{padding:110px 16px}
  .ln{font-size:1.1rem}.ln.on{font-size:1.3rem}
  .lic{grid-template-columns:1fr;padding:24px 20px}
  .brand .script{font-size:1.9rem}
}
@media(prefers-reduced-motion:reduce){.ln,.needle,.knob .cap,.strip{transition:none}}

/* ===================== PATINA — film-prop ageing by material (2026-10-19) =====================
   One light: the bar lamp above. So dust and haze sit on the upward faces, tarnish and grime gather in
   the recesses and along the lower edges, scratches catch the lamp as fine bright streaks, and the spots
   fingers polish sit where the lamp reflects. Every layer here is an overlay pseudo-element UNDER the text
   layers (children carry z-index:1; the LCD gets one below) or an existing glass overlay that already sat
   over them, built only from gradients, the inline #grain/#brush filters and three tiny data: SVG tiles:
     --scr   fine directional scratches (alpha-thresholded turbulence, long thin horizontal streaks)
     --dust  sparse 1px specks
     --craze a few hairline lacquer cracks, lit edge over shadowed edge
   The page's layout block wins over this file at equal specificity, so new pseudo-elements and higher
   specificity are used where the layout block already styles an element. */
:root{
  --scr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Cfilter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.7' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.4 0 0 0 -1.5'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23f)'/%3E%3C/svg%3E");
  --dust:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 4 0 0 0 -2.8'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23f)'/%3E%3C/svg%3E");
  --craze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='400'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='rgba(0,0,0,.16)' stroke-width='1' transform='translate(0 1)'%3E%3Cpath d='M40 60l18 7 9-3 22 12 14 2 7 9 19 4'/%3E%3Cpath d='M160 30l-6 14 3 11-9 12 2 16-7 9'/%3E%3Cpath d='M300 90l25-4 11 6 30-2 12 7 20 1 9-6'/%3E%3Cpath d='M330 92l4 14-3 10'/%3E%3Cpath d='M90 250l12-10 10-2 8-12 14-4 6-11'/%3E%3Cpath d='M240 300l20 6 4 10 22 5 8-5 24 8'/%3E%3Cpath d='M400 200l-9 13-13 5-4 12-12 7-2 15'/%3E%3Cpath d='M30 340l24 3 10 8 26 1 14 6'/%3E%3Cpath d='M200 140l14 9 3 14 11 6 2 12'/%3E%3Cpath d='M350 330l16-8 20 2 11-9 24-3'/%3E%3Cpath d='M120 180l-8-9-2-14-10-8'/%3E%3Cpath d='M430 40l-14 6-9 12-16 4'/%3E%3Cpath d='M260 210l9 3 12-6 7 4'/%3E%3C/g%3E%3Cg stroke='rgba(255,255,255,.13)' stroke-width='.6'%3E%3Cpath d='M40 60l18 7 9-3 22 12 14 2 7 9 19 4'/%3E%3Cpath d='M160 30l-6 14 3 11-9 12 2 16-7 9'/%3E%3Cpath d='M300 90l25-4 11 6 30-2 12 7 20 1 9-6'/%3E%3Cpath d='M330 92l4 14-3 10'/%3E%3Cpath d='M90 250l12-10 10-2 8-12 14-4 6-11'/%3E%3Cpath d='M240 300l20 6 4 10 22 5 8-5 24 8'/%3E%3Cpath d='M400 200l-9 13-13 5-4 12-12 7-2 15'/%3E%3Cpath d='M30 340l24 3 10 8 26 1 14 6'/%3E%3Cpath d='M200 140l14 9 3 14 11 6 2 12'/%3E%3Cpath d='M350 330l16-8 20 2 11-9 24-3'/%3E%3Cpath d='M120 180l-8-9-2-14-10-8'/%3E%3Cpath d='M430 40l-14 6-9 12-16 4'/%3E%3Cpath d='M260 210l9 3 12-6 7 4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --grime:52,56,62;        /* cool neutral: no browns on the housing (blues-only directive) */
  --fox:132,108,62;        /* foxing on paper only */
}

/* --- chrome bezel around the housing: haze (milky at the top, dulled below), fine scratches, mottled tarnish
       clouds on the lower band, and a dark tarnish line in the groove where the chrome meets the wood (the
       ::after is the wood's own box; its outward shadow lands on the ring, heavier below, and the parent's ring
       mask trims both pseudo-elements). --- */
.radio .bezel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:
  var(--scr) 0 0/320px 160px repeat,
  var(--scr) 160px 70px/320px 160px repeat,
  radial-gradient(ellipse 26% 100% at 22% 100%,rgba(var(--grime),.34),rgba(var(--grime),0) 70%),
  radial-gradient(ellipse 20% 100% at 70% 100%,rgba(var(--grime),.26),rgba(var(--grime),0) 70%),
  radial-gradient(ellipse 100% 26% at 100% 64%,rgba(var(--grime),.18),rgba(var(--grime),0) 70%),
  radial-gradient(ellipse 100% 20% at 0% 40%,rgba(var(--grime),.14),rgba(var(--grime),0) 70%),
  linear-gradient(180deg,rgba(236,239,243,.18) 0%,rgba(236,239,243,.07) 28%,rgba(236,239,243,0) 52%,rgba(var(--grime),.12) 100%)}
.radio .bezel::after{content:"";position:absolute;inset:14px;border-radius:14px;pointer-events:none;
  box-shadow:0 0 5px 1px rgba(24,26,30,.6),0 8px 12px -3px rgba(0,0,0,.45),0 -3px 6px -3px rgba(0,0,0,.2)}

/* --- corner screws: tarnish ring in the recess around the head, a shadow pooling lower-right --- */
.screw::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:
  radial-gradient(circle at 50% 50%,rgba(var(--grime),0) 48%,rgba(var(--grime),.36) 66%,rgba(var(--grime),.12) 82%,rgba(var(--grime),0) 100%),
  radial-gradient(circle at 66% 76%,rgba(var(--grime),.3),rgba(var(--grime),0) 55%)}

/* --- the lacquered wood face of the housing: faint hairline crazing in the finish (one sparse pass, barely there), hand-worn matte patches low on both sides where hands reach the controls,
       dust settled against the bottom lip, a lacquer sheen along the top lip --- */
.radio::before{background:
  var(--craze) 41px 27px/600px 500px repeat,
  radial-gradient(ellipse 20% 13% at 90% 98%,rgba(190,200,212,.07),rgba(190,200,212,0) 70%),
  radial-gradient(ellipse 20% 13% at 10% 98%,rgba(190,200,212,.05),rgba(190,200,212,0) 70%),
  linear-gradient(0deg,rgba(190,200,212,.07),rgba(190,200,212,0) 3%),
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 2%)}

/* --- the routed, black-painted bays (transport, actions, volume slot, meter bay, download-all, LED strip):
       dust specks, grime in the lower corners, paint worn off the top lip where thumbs catch it --- */
.pushrow,.volrow,.meterrow,.ledbar{position:relative}
.pushrow::before,.actrow::before,.volrow::before,.meterrow::before,.dl-all::before,.ledbar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:
  var(--dust) 0 0/200px 200px repeat,
  radial-gradient(ellipse 30% 55% at 0% 100%,rgba(0,0,0,.30),rgba(0,0,0,0) 70%),
  radial-gradient(ellipse 30% 55% at 100% 100%,rgba(0,0,0,.30),rgba(0,0,0,0) 70%),
  radial-gradient(ellipse 34% 3px at 24% 0%,rgba(255,255,255,.26),rgba(255,255,255,0)),
  radial-gradient(ellipse 16% 2px at 80% 0%,rgba(255,255,255,.14),rgba(255,255,255,0)),
  radial-gradient(ellipse 18% 3px at 70% 100%,rgba(255,255,255,.08),rgba(255,255,255,0)),
  linear-gradient(0deg,rgba(150,160,175,.06),rgba(150,160,175,0) 30%);
  opacity:.7}
.meterrow::before{opacity:.6}

/* --- anodized aluminium pushbuttons: a dust haze on the top half, fine scratches, grime in the lower corners and
       along the foot, and the thumb-polished high spot in the middle where the lamp catches it. The surface, bevel
       and engraving are the layout block's; this is only the ::before under the icon/label. --- */
.radio .pushbtn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:
  var(--scr) 0 0/240px 120px repeat,
  radial-gradient(ellipse 44% 62% at 50% 42%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 30% 60% at 0% 100%,rgba(30,32,36,.18),rgba(30,32,36,0) 70%),
  radial-gradient(ellipse 30% 60% at 100% 100%,rgba(30,32,36,.18),rgba(30,32,36,0) 70%),
  linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 36%,rgba(0,0,0,0) 68%,rgba(0,0,0,.11) 100%);
  opacity:.9}

/* --- seek knob: the chrome ring shows concentric turning marks, a lamp haze upper-left and tarnish lower-right;
       the black ridged cap has its ridge tops polished bright around the rim and a finger-polished high spot where
       the thumb rides; grime in the groove under the rim. The LCD is lifted above the cap's overlay. --- */
.seekknob::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:
  repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,0) 1px 3px),
  repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.06) 0 1px,rgba(0,0,0,0) 1px 4px),
  radial-gradient(circle at 70% 78%,rgba(var(--grime),.28),rgba(var(--grime),0) 55%),
  radial-gradient(circle at 36% 28%,rgba(255,255,255,.12),rgba(255,255,255,0) 48%)}
.seekknob .cap .lcd{position:relative;z-index:1}
.seekknob .cap::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:
  radial-gradient(ellipse 48% 40% at 56% 30%,rgba(255,255,255,.17),rgba(255,255,255,0) 70%),
  radial-gradient(circle at 50% 50%,rgba(255,255,255,0) 58%,rgba(255,255,255,.06) 72%,rgba(255,255,255,.11) 86%,rgba(255,255,255,.03) 100%),
  radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 84%,rgba(0,0,0,.35) 100%)}
.seekknob .cap .lcd::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:
  linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%)}

/* --- volume slide knob (aluminium): dust haze above, scratches, a polished centre, grime at the foot --- */
.vknob::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:
  var(--scr) 0 0/120px 60px repeat,
  radial-gradient(ellipse 60% 50% at 50% 36%,rgba(255,255,255,.14),rgba(255,255,255,0) 70%),
  linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%,rgba(0,0,0,0) 64%,rgba(0,0,0,.14) 100%);
  opacity:.85}

/* --- glass: the roller window, the lyrics glass, the VU face. Haze that lifts the blacks a hair, finger smudges
       off to the sides (never across the lit title or the current lyric), dust settled on the inside bottom. --- */
.roller-glass::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;filter:url(#grain);background:#8a919c}
.lyr-glass::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;mix-blend-mode:screen;filter:url(#grain);background:#9aa3ad;
  -webkit-mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.35) 8%,transparent 28%);mask-image:linear-gradient(0deg,#000 0,rgba(0,0,0,.35) 8%,transparent 28%)}
.vu{isolation:isolate}
.vu::before{content:"";position:absolute;inset:5px;border-radius:9px;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 6% 10% at 14% 22%,rgba(128,126,122,.16),rgba(128,126,122,0) 70%),
  radial-gradient(ellipse 5% 8% at 88% 80%,rgba(128,126,122,.14),rgba(128,126,122,0) 70%),
  radial-gradient(ellipse 100% 100% at 50% 40%,rgba(120,126,136,0) 58%,rgba(120,126,136,.16) 100%),
  linear-gradient(0deg,rgba(120,126,136,.12),rgba(120,126,136,0) 25%)}
.vu::after{content:"";position:absolute;inset:5px;border-radius:9px;pointer-events:none;background:
  linear-gradient(172deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 12%,rgba(255,255,255,0) 28%),
  radial-gradient(ellipse 22% 30% at 12% 88%,rgba(255,255,255,.12),rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 16% 22% at 84% 92%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),
  radial-gradient(ellipse 100% 100% at 50% 50%,rgba(255,255,255,0) 64%,rgba(255,255,255,.07) 100%)}

/* --- paper title strips in the Songs list (same stock as the roller strips): yellowed ends and edges, foxing that
       differs row to row, a coffee ring on every fourth, a soft crease on every fifth --- */
.station::before{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;background:
  radial-gradient(ellipse 8% 36% at 84% 28%,rgba(var(--fox),.15),rgba(var(--fox),0) 70%),
  radial-gradient(ellipse 5% 26% at 56% 80%,rgba(var(--fox),.11),rgba(var(--fox),0) 70%),
  linear-gradient(90deg,rgba(122,98,52,.15) 0%,rgba(122,98,52,0) 5%,rgba(122,98,52,0) 95%,rgba(122,98,52,.15) 100%),
  linear-gradient(180deg,rgba(122,98,52,.12) 0%,rgba(122,98,52,0) 16%,rgba(122,98,52,0) 84%,rgba(122,98,52,.10) 100%)}
.station:nth-child(2n)::before{background:
  radial-gradient(ellipse 7% 30% at 34% 20%,rgba(var(--fox),.13),rgba(var(--fox),0) 70%),
  radial-gradient(ellipse 10% 40% at 93% 72%,rgba(var(--fox),.12),rgba(var(--fox),0) 70%),
  linear-gradient(90deg,rgba(122,98,52,.15) 0%,rgba(122,98,52,0) 5%,rgba(122,98,52,0) 95%,rgba(122,98,52,.15) 100%),
  linear-gradient(180deg,rgba(122,98,52,.10) 0%,rgba(122,98,52,0) 16%,rgba(122,98,52,0) 84%,rgba(122,98,52,.12) 100%)}
.station:nth-child(4n+3)::before{background:
  radial-gradient(circle at 74% 58%,rgba(140,112,64,0) 12.5%,rgba(140,112,64,.09) 13.1%,rgba(140,112,64,.03) 14.3%,rgba(140,112,64,0) 15.2%),
  radial-gradient(ellipse 6% 26% at 11% 26%,rgba(var(--fox),.12),rgba(var(--fox),0) 70%),
  linear-gradient(90deg,rgba(122,98,52,.15) 0%,rgba(122,98,52,0) 5%,rgba(122,98,52,0) 95%,rgba(122,98,52,.15) 100%),
  linear-gradient(180deg,rgba(122,98,52,.12) 0%,rgba(122,98,52,0) 16%,rgba(122,98,52,0) 84%,rgba(122,98,52,.10) 100%)}
.station:nth-child(5n+1)::before{background:
  linear-gradient(96deg,rgba(0,0,0,0) 63.3%,rgba(0,0,0,.06) 63.7%,rgba(255,255,255,.28) 64.1%,rgba(255,255,255,0) 64.7%),
  radial-gradient(ellipse 8% 36% at 84% 28%,rgba(var(--fox),.15),rgba(var(--fox),0) 70%),
  linear-gradient(90deg,rgba(122,98,52,.15) 0%,rgba(122,98,52,0) 5%,rgba(122,98,52,0) 95%,rgba(122,98,52,.15) 100%),
  linear-gradient(180deg,rgba(122,98,52,.12) 0%,rgba(122,98,52,0) 16%,rgba(122,98,52,0) 84%,rgba(122,98,52,.10) 100%)}
/* roller strips: a tea-stained corner on every fifth (the printed frame and foxing variants are above) */
.strip:nth-child(5n+4)::before{background:
  radial-gradient(ellipse 14% 60% at 97% 85%,rgba(var(--fox),.16),rgba(var(--fox),0) 70%),
  radial-gradient(ellipse 6% 28% at 40% 20%,rgba(var(--fox),.10),rgba(var(--fox),0) 70%)}

/* phone: the thinner bezel's groove */
@media(max-width:760px){
  .radio .bezel::after{inset:10px;border-radius:12px}
}