/* 1979 radio era. Desktop cabinet rules are the shortwave from
   https://24ailab.com/fm/story.css (#radio), placed on its own page.
   The pocket set is only for narrow screens. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f4f1ea;color:#1d2a3a;font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{background-image:radial-gradient(circle at 20% 10%,#fff 0,transparent 42%),radial-gradient(circle at 80% 80%,#e7e1d6 0,transparent 46%)}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));
 background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.8)}
header h1{margin:0;flex:1;text-align:center;font-size:16px;letter-spacing:.08em}
#to1998{display:inline-flex;align-items:center;gap:6px;color:#1a6fd6;font-weight:650;text-decoration:none;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 14px rgba(20,40,80,.08)}
#to1998 span{font-variant-numeric:tabular-nums}
#profileBtn{font:600 14px/1 inherit;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.9);background:rgba(255,255,255,.72);color:#1d2a3a;cursor:pointer;box-shadow:0 4px 14px rgba(20,40,80,.08)}
#to1998:focus-visible,#profileBtn:focus-visible,.power:focus-visible,#tune:focus-visible,#ptune:focus-visible,#dvol:focus-visible,#pvol:focus-visible{outline:2px solid #1a2744;outline-offset:3px}
#stage{padding-bottom:24px}
@media (max-width:700px){
  header{gap:8px}
  header h1{font-size:14px}
  #to1998,#profileBtn{font-size:13px;padding:8px 10px}
}
#now,.note{text-align:center;color:#4c463c;margin:8px 16px}
.note{font-size:12px;color:#7a7368}.note a{color:inherit}
#world{position:relative;width:640px;height:500px;margin:150px auto 10px}
#radio,#radio *{position:absolute}
#radio{left:0;top:0;width:640px;height:640px}
#radio .handle{left:150px;top:104px;width:340px;height:70px;border:12px solid #2a2b2f;border-bottom:0;border-radius:40px 40px 0 0;box-shadow:inset 0 2px 0 rgba(255,255,255,.12)}
#radio .ant{left:548px;top:-150px;width:6px;height:320px;transform:rotate(14deg);transform-origin:50% 100%;border-radius:3px;background:linear-gradient(90deg,#8d939b,#f4f6f8 45%,#a8aeb6 60%,#6f757d)}
#radio .ant i{left:-3px;top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9aa1a9 60%,#5c6168)}
#radio .body{left:36px;top:156px;width:568px;height:320px;border-radius:24px;
 background:linear-gradient(180deg,#3a3c41 0,#25262a 8%,#1c1d20 70%,#141517 100%);
 box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 -2px 0 rgba(0,0,0,.5) inset,0 40px 70px -20px rgba(16,30,55,.45),0 18px 30px -12px rgba(16,30,55,.35)}
#radio .body::after{content:"";position:absolute;left:10px;right:10px;top:6px;height:10px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent)}
#radio .grille{left:20px;top:20px;width:244px;height:282px;border-radius:14px;background:linear-gradient(160deg,#4a4d53,#2e3035);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
#radio .dial{left:282px;top:26px;width:262px;height:112px;border-radius:9px;overflow:hidden;background:linear-gradient(180deg,#fbe7b8,#f0c56e 70%,#e3a94a);box-shadow:inset 0 0 0 2px #0d0d0f,inset 0 6px 14px rgba(0,0,0,.35)}
#radio .dial svg{left:0;top:0;width:262px;height:112px}
#radio .glow{left:0;top:0;width:262px;height:112px;background:radial-gradient(ellipse at 50% 120%,rgba(255,180,60,.55),transparent 60%);mix-blend-mode:screen;pointer-events:none}
#needle{left:0;top:8px;width:2px;height:96px;background:#d1271b;box-shadow:0 0 6px rgba(209,39,27,.6)}
#radio .plate{left:284px;top:150px;width:260px;font:600 9.5px -apple-system,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#c9ccd1}
#radio .plate em{position:static;display:block;font-style:normal;color:#80858d;letter-spacing:.14em;margin-top:3px;font-size:8.5px}
#radio .meter{left:284px;top:186px;width:130px;height:52px;border-radius:6px;background:#a8b59a;box-shadow:inset 0 2px 5px rgba(0,0,0,.5);font:700 22px ui-monospace,Menlo,monospace;color:#1f2a1a;padding:5px 9px}
#radio .meter span,#radio .meter small{position:static}#radio .meter small{font-size:9px;margin-left:4px}
#radio .sig{left:9px;bottom:6px;display:flex;gap:3px;align-items:flex-end}#radio .sig i{position:static;width:6px;background:#1f2a1a;opacity:.15}
#radio .sig i:nth-child(1){height:3px}#radio .sig i:nth-child(2){height:5px}#radio .sig i:nth-child(3){height:7px}#radio .sig i:nth-child(4){height:9px}#radio .sig i:nth-child(5){height:11px}#radio .sig i:nth-child(6){height:13px}
#radio.on .sig i{opacity:.9}
#led{left:426px;top:192px;width:9px;height:9px;border-radius:50%;background:#5a1d16;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
#led.on{background:#ff5a2a;box-shadow:0 0 10px 2px rgba(255,90,42,.7)}
#radio .bands{left:426px;top:212px;display:flex;gap:4px}
#radio .bands i{position:static;font:700 7.5px -apple-system,sans-serif;color:#c9ccd1;letter-spacing:.05em;padding:5px 4px;border-radius:3px;background:linear-gradient(#45484e,#2a2c30);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 2px 3px rgba(0,0,0,.5)}
#radio .bands i.on{color:#ffb35c}
.knob{border-radius:50%}
#radio .knob.vol{left:300px;top:250px;width:54px;height:54px;background:radial-gradient(circle at 40% 35%,#6a6e75,#2b2d31 70%);box-shadow:0 6px 12px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.25);cursor:pointer;touch-action:none}
#tune{left:410px;top:206px;width:112px;height:112px;background:repeating-conic-gradient(#3b3e44 0 4deg,#202226 4deg 8deg);box-shadow:0 10px 18px rgba(0,0,0,.6),inset 0 0 0 3px #17181b;cursor:pointer;touch-action:none}
#tune::before{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#8b9098,#3a3d42 55%,#202226);box-shadow:inset 0 1px 1px rgba(255,255,255,.35)}
#tune::after{content:"";position:absolute;left:52px;top:18px;width:8px;height:8px;border-radius:50%;background:#e9ecef;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#gdots{left:0;top:0;width:640px;height:640px;pointer-events:none}
#gdots i{width:11px;height:11px;border-radius:50%;background:#16171a;box-shadow:inset 0 1.5px 1.5px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.12)}
#dpower{position:relative;display:block;margin:12px auto 0;min-width:88px;height:36px;border-radius:999px;border:0;cursor:pointer;color:#f4f1ea;background:#2a241e;font:700 14px/1 inherit}
@media (max-width:700px){#dpower{display:none}}

/* Phone only. A slim dark pocket transistor: glass scale, perforated speaker, side wheels.
   Hidden on a wide screen so the story cabinet stays the desktop radio. */
#pocket{display:none}
@media (max-width:700px){
  #world{display:none}
  #pocket{display:flex;justify-content:center;padding:52px 28px 12px 36px}
  #pocket .case{position:relative;width:200px;height:348px;border-radius:8px;color:#d5dee8;background:
    linear-gradient(180deg,rgba(255,255,255,.2),transparent 10px),
    linear-gradient(90deg,#0e141c 0%,#2a3544 7%,#1a2430 16%,#243140 50%,#1a2430 84%,#121820 93%,#0c1016 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(0,0,0,.65),inset 0 -8px 12px rgba(0,0,0,.25),0 18px 28px rgba(8,12,18,.28)}
  #pocket .pant{position:absolute;left:22px;top:-48px;width:3px;height:54px;border-radius:2px;background:linear-gradient(90deg,#8d949c,#f4f6f8 42%,#6c737c)}
  #pocket .pant::after{content:"";position:absolute;left:-2px;top:-5px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9aa1a8)}
  #pocket .strap{position:absolute;left:-16px;top:132px;width:12px;height:96px;border:3px solid #2c343e;border-right:0;border-radius:10px 0 0 10px}
  #pocket .glass{position:absolute;left:12px;right:12px;top:14px;height:74px;border-radius:2px;overflow:hidden;background:
    linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 30%),
    linear-gradient(180deg,#2a3848,#10161e 72%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 8px 12px rgba(0,0,0,.4)}
  #pocket .hint{position:absolute;left:8px;top:5px;font:600 8px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(226,234,242,.55)}
  #pocket .ticks{position:absolute;left:8px;right:8px;top:20px;height:16px;background:linear-gradient(#c5d0dc,#c5d0dc) 0 7px/100% 1px no-repeat,repeating-linear-gradient(90deg,#c5d0dc 0 1px,transparent 1px 7px);opacity:.8}
  #pneedle{position:absolute;top:16px;left:8px;width:1.5px;height:22px;background:#f7fafc;box-shadow:0 0 0 .5px rgba(0,0,0,.45)}
  #pnow{position:absolute;left:8px;right:8px;bottom:7px;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eef3f8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #pocket .speaker{position:absolute;left:16px;right:28px;top:102px;bottom:34px;border-radius:1px;background-color:#121820;background-image:radial-gradient(circle,#070b10 .85px,transparent 1.05px);background-size:4px 4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.08)}
  #pocket .mark{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.22em;color:rgba(214,222,230,.5)}
  #ppower{position:absolute;left:-18px;top:108px;width:44px;height:44px;padding:0;border:0;background:transparent;color:transparent;font-size:0;cursor:pointer}
  #ppower::before{content:"";position:absolute;right:0;top:9px;width:16px;height:26px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#12181f,#8b97a3 46%,#2a313a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
  #ppower[aria-pressed="true"]::before{background:linear-gradient(90deg,#12181f,#f4f7fb 50%,#6a7786)}
  .wheel{position:absolute;right:-18px;width:56px;height:56px}
  .wheel.tune{top:150px}.wheel.vol{top:214px}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .engraved{position:absolute;right:8px;width:14px;height:10px;pointer-events:none;opacity:.55}
  .engraved.tune{top:172px;background:linear-gradient(#9aa6b2,#9aa6b2) 0 4px/5px 1px no-repeat,linear-gradient(#9aa6b2,#9aa6b2) 9px 4px/5px 1px no-repeat;box-shadow:0 1px 0 rgba(0,0,0,.65)}
  .engraved.tune::before,.engraved.tune::after{content:"";position:absolute;top:2px;width:0;height:0;border-top:3px solid transparent;border-bottom:3px solid transparent}
  .engraved.tune::before{left:0;border-right:3px solid #9aa6b2}
  .engraved.tune::after{right:0;border-left:3px solid #9aa6b2}
  .engraved.vol{top:238px}
  .engraved.vol::before,.engraved.vol::after{content:"";position:absolute;left:2px;width:10px;height:1px;background:#9aa6b2;box-shadow:0 1px 0 rgba(0,0,0,.65)}
  .engraved.vol::before{top:2px}
  .engraved.vol::after{top:7px;width:6px;left:4px}
  .pknob{position:absolute;right:0;top:4px;width:44px;height:48px;border:0;background:transparent;touch-action:none;cursor:pointer}
  .pknob::before{content:"";position:absolute;right:0;top:4px;width:16px;height:40px;border-radius:1px 2px 2px 1px;background:repeating-linear-gradient(#9aa6b2 0 1px,#1c232c 1px 3px);background-position:0 var(--roll,0);box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 #0c1014}
  #ppower:focus-visible,.pknob:focus-visible{outline:2px solid #1a2744;outline-offset:2px}
}