/* SIGNAL 2002, period probe 1. Tokens for the system stage. */
:root{
  --ground:#1b2a5c;          /* plain letterbox ground, the blue under the chrome */
  --hole:#05070d;
  --lcd:#7dfcff;             /* lit LCD, cyan */
  --lcd-ghost:rgba(125,252,255,.09);
  --lcd-dim:#3c8fa6;
  --sel:#1c3fd0;             /* selection bar */
  --amber:#ffc23a;
  --px:"Silkscreen",monospace;
  --dot:"VT323",monospace;
}
@font-face{font-family:"DSEG7";src:url(https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG7-Classic/DSEG7Classic-Bold.woff2) format("woff2");}
@font-face{font-family:"DSEG14";src:url(https://cdn.jsdelivr.net/npm/dseg@0.46.0/fonts/DSEG14-Classic/DSEG14Classic-Bold.woff2) format("woff2");}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ground);overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.frame{position:fixed;inset:0;display:grid;place-items:center}
.stage{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;
  background:var(--skin) 0 0/var(--sw) var(--sh) no-repeat;color:var(--lcd);font-family:var(--dot);image-rendering:auto}
.hole{position:absolute;overflow:hidden;background:var(--hole)}
.hole::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px)}

/* segment readouts: unlit segments drawn behind */
.seg{position:relative;display:inline-block;font-family:"DSEG7",var(--dot);line-height:1}
.seg__ghost{color:var(--lcd-ghost)}
.seg__lit{position:absolute;right:0;top:0;text-shadow:0 0 6px rgba(125,252,255,.55)}
.seg--title{font-family:"DSEG14",var(--dot);font-size:30px;position:absolute;left:14px;top:10px}
.seg--title .seg__lit{left:0;right:auto;white-space:pre}
.seg--clock{font-size:40px;position:absolute;right:16px;top:9px}
.lcd__sub{position:absolute;left:14px;right:14px;bottom:5px;display:flex;gap:22px;font-family:var(--px);font-size:9px;color:var(--lcd-dim)}
.lcd__sub--r{justify-content:flex-end}
.lcd__sub span:last-child{margin-left:auto;color:var(--lcd)}

/* tuner */
.tuner{padding:16px 22px}
.tuner__band{position:relative;height:58px;border-bottom:1px solid var(--lcd-dim)}
.tuner__ticks{position:absolute;inset:0}
.tuner__ticks i{position:absolute;bottom:0;width:1px;background:var(--lcd-dim)}
.tuner__ticks i.own{background:var(--amber);height:20px}
.tuner__ticks b{position:absolute;bottom:22px;transform:translateX(-50%);font:400 9px var(--px);color:var(--lcd-dim)}
.tuner__ticks b.own{color:var(--amber);bottom:24px}
.tuner__needle{position:absolute;top:0;bottom:-4px;width:3px;background:#ff3b2f;box-shadow:0 0 6px #ff3b2f}
.tuner__row{display:flex;align-items:flex-end;gap:12px;margin-top:16px}
.seg--mhz{font-size:76px}
.tuner__mhz{font:400 14px var(--px);padding-bottom:6px}
.tuner__state{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font:400 12px var(--px)}
.tuner__air{background:var(--lcd-ghost);color:var(--lcd-dim);padding:2px 6px}
[data-locked="true"] .tuner__air{background:#ff3b2f;color:#fff}
[data-locked="false"] .tuner__air{visibility:hidden}
.tuner__stn{font:400 22px var(--px);margin-top:12px;letter-spacing:1px}
.tuner__what,.tuner__note{font-size:22px;line-height:1.05;color:var(--lcd)}
.tuner__note{color:var(--amber)}
[data-locked="false"] .tuner__stn,[data-locked="false"] .tuner__what{color:var(--lcd-dim)}
.tuner__meter{position:absolute;right:22px;bottom:16px;display:flex;gap:2px;align-items:flex-end;height:30px}
.tuner__meter i{width:6px;background:var(--lcd)}
.tuner__time{position:absolute;left:22px;bottom:14px;font:400 10px var(--px);color:var(--lcd-dim)}
[data-state="playing"] .tuner__time{color:var(--lcd)}

/* releases list, numbered rows, selection bar */
.list{padding:10px 8px}
.rel{list-style:none;font-size:18px;line-height:1}
.rel li{display:grid;grid-template-columns:20px 1fr auto;column-gap:6px;padding:4px 6px 5px;cursor:pointer}
.rel li small{grid-column:2/4;font-size:16px;color:var(--lcd-dim)}
.rel li.sel{background:var(--sel);color:#fff}
.rel li.sel small{color:#bcd0ff}

/* the wire: stepped marquee */
.wire__track{position:absolute;top:9px;white-space:nowrap;font-size:26px;line-height:1}
.wire__track span{margin-right:60px}
.wire__track em{font-style:normal;color:var(--amber);margin-right:12px;font-family:var(--px);font-size:11px;vertical-align:4px}

/* cards */
.card{display:flex;gap:16px;padding:12px}
.card__img{height:140px;width:auto;max-width:200px;object-fit:cover;image-rendering:pixelated;filter:contrast(1.1)}
.card__txt{font-size:21px;line-height:1.05;display:flex;flex-direction:column;gap:3px}
.card__big{font:400 22px var(--px);color:#fff;margin-bottom:6px}
.dim{color:var(--lcd-dim)}
.seg--sm{font-size:18px;color:var(--amber)}

/* keys: the off state is in the skin; lit and pressed are slices of the other renders */
.key{position:absolute;border:0;background:transparent no-repeat;background-size:var(--sw) var(--sh);cursor:pointer;display:block}
.key:hover,.key:focus-visible,.key[aria-current="page"]{background-image:var(--lit)}
.key:active,.key.is-down{background-image:var(--down)}
.key:focus-visible{outline:2px dotted var(--amber);outline-offset:2px}
.preload{position:absolute;width:0;height:0;background:var(--lit),var(--down)}

/* the handheld skin */
.menu{z-index:5;padding:18px 16px}
.menu[hidden]{display:none}
.menu__h{font:400 12px var(--px);color:var(--lcd-dim);margin-bottom:10px}
.menu ul{list-style:none}
.menu a{display:flex;justify-content:space-between;padding:12px 10px;font-family:"DSEG14",var(--dot);font-size:22px;color:var(--lcd);text-decoration:none;border-bottom:1px solid #12303a}
.menu a[aria-current]{background:var(--sel);color:#fff}
.menu__close{margin-top:18px;width:100%;padding:12px;background:#0c1838;color:var(--lcd);border:1px solid var(--lcd-dim);font:400 14px var(--px)}
.is-phone .seg--title{font-size:22px;left:10px;top:7px}
.is-phone .lcd__sub{font-size:8px;gap:10px;left:10px;right:10px;bottom:4px}
.is-phone .lcd__sub span:nth-child(2){display:none}
.is-phone .tuner{padding:10px 12px}
.is-phone .tuner__band{height:46px}
.is-phone .tuner__ticks b{font-size:7px}
.is-phone .tuner__ticks b:not(.own){display:none}
.is-phone .seg--mhz{font-size:52px}
.is-phone .tuner__row{margin-top:12px}
.is-phone .tuner__stn{font-size:16px;margin-top:8px}
.is-phone .tuner__what,.is-phone .tuner__note{font-size:18px}
.is-phone .tuner__meter{right:12px;bottom:10px;height:22px}
.is-phone .tuner__time{left:12px;bottom:10px}
.is-phone .wire__track{top:8px;font-size:22px}
.is-phone .list{overflow-y:auto}

/* fit: radii measured from the render (wells 8px, keys 10px; blender/skin.py R_WELL, R_KEY) */
:root{--r-well:8px;--r-key:10px}
.hole{border-radius:var(--r-well)}
.key{border-radius:var(--r-key)}
.rel li.sel{border-radius:3px}
.card__img{border-radius:4px}
.menu a[aria-current]{border-radius:3px}
.menu__close{border-radius:var(--r-key)}
.tuner__what,.tuner__note{text-wrap:balance}
.list{overscroll-behavior:contain}

/* boot: the logo turn under the same VHS surface as the screens, then the wells power on */
.boot{position:fixed;inset:0;z-index:50;background:#05070d;display:grid;place-items:center;cursor:pointer;overflow:hidden}
.boot[hidden]{display:none}
.boot__logo{width:min(62vw,560px);height:auto;filter:drop-shadow(3px 0 0 rgba(255,40,60,.55)) drop-shadow(-3px 0 0 rgba(40,140,255,.55));animation:jit .18s steps(2) infinite}
.boot::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px)}
.boot::after{content:"";position:absolute;left:0;right:0;height:14%;top:-20%;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.08),rgba(255,255,255,0));animation:track 1.6s steps(12) infinite}
.boot__read{position:absolute;bottom:12%;left:0;right:0;text-align:center;color:var(--lcd);font-family:"DSEG14",var(--dot);font-size:22px;letter-spacing:2px;text-shadow:0 0 6px rgba(125,252,255,.55)}
.boot__read .seg__ghost{position:absolute;left:0;right:0;color:var(--lcd-ghost);text-shadow:none}
.boot__skip{position:absolute;bottom:6%;left:0;right:0;text-align:center;font:400 10px var(--px);color:var(--lcd-dim)}
@keyframes jit{0%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}}
@keyframes track{to{top:110%}}
.stage.is-off .hole{filter:brightness(0)}
.stage .hole.is-on1{filter:brightness(.35) contrast(1.4)}
@media (prefers-reduced-motion:reduce){.boot__logo,.boot::after{animation:none}}
.rel li span{text-wrap:balance}

/* ROUTE 1: period-size text inside the same holes.
   Sizes at 1440 (CSS px on the 1440 stage): VT323 rows 15 to 16px, Silkscreen caps 9 to 10px, nothing under 9px. */
.tuner{padding:10px 16px}
.tuner__band{height:50px}
.tuner__body{display:grid;grid-template-columns:262px 1fr;column-gap:14px;margin-top:6px}
.tuner__row{margin-top:2px;gap:8px}
.seg--mhz{font-size:50px}
.tuner__mhz{font-size:10px;padding-bottom:4px}
.tuner__state{font-size:9px;gap:4px}
.tuner__stn{font-size:14px;margin-top:8px}
.tuner__what,.tuner__note{font-size:16px;line-height:1.05}
.tuner__meter{left:16px;right:auto;bottom:10px;height:18px}
.tuner__time{left:110px;bottom:12px;font-size:9px}
.stations{list-style:none;border-left:1px solid #12303a;padding-left:10px;height:174px;overflow-y:auto}
.stations li button{all:unset;cursor:pointer;display:grid;grid-template-columns:38px 1fr auto;column-gap:6px;width:100%;box-sizing:border-box;padding:2px 5px 3px;border-radius:3px;font-family:var(--dot);font-size:16px;line-height:1;color:var(--lcd)}
.stations li button:focus-visible{outline:1px dotted var(--amber)}
.st__f{color:var(--amber)}
.st__a{font:400 9px var(--px);color:var(--lcd-dim);align-self:center}
.st__w{grid-column:2/4;font-size:15px;color:var(--lcd-dim)}
.stations li.on button{background:var(--sel);color:#fff}
.stations li.on .st__w,.stations li.on .st__a{color:#bcd0ff}
.stations li.on .st__f{color:var(--amber)}

.list{padding:8px 6px;overflow-y:auto}
.chart__h{display:grid;grid-template-columns:20px 1fr auto;column-gap:6px;padding:0 6px 4px;font:400 9px var(--px);color:var(--lcd-dim);border-bottom:1px solid #12303a;margin-bottom:3px}
.rel{font-size:16px}
.rel li{padding:3px 6px 4px}
.rel li small{font-size:15px}

.wire__track{top:4px;font-size:19px}
.wire__track em{font-size:9px;vertical-align:2px}
.wire__list{position:absolute;left:12px;right:12px;bottom:4px;font-size:16px;line-height:1;color:var(--lcd-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wire__list b{font:400 9px var(--px);color:var(--amber);margin-right:10px;vertical-align:1px}

.card{gap:14px;padding:10px 12px}
.card__img{height:144px}
.card__txt{gap:0;min-width:0}
.listing div{padding:3px 0 4px;border-bottom:1px solid #12303a}
.listing div:last-child{border-bottom:0}
.listing dt{font:400 10px var(--px);color:var(--lcd);letter-spacing:.5px;margin-bottom:2px}
.listing dt small{font-size:9px;color:var(--amber)}
.listing dd{font-size:16px;line-height:1.05;color:var(--lcd-dim)}
.listing__on dt{font-size:14px;color:#fff}
.listing__on dd{color:var(--lcd)}
.listing .seg--sm{font-size:14px}

.lcd__sub{gap:14px}
.lcd__sub span:last-child{margin-left:auto}
.lcd__sub--r{gap:12px}

/* phone: same holes; readable sizes held, wells scroll inside */
.is-phone .tuner{overflow-y:auto;overscroll-behavior:contain}
.is-phone .tuner__body{display:block}
.is-phone .stations{height:auto;overflow:visible;border-left:0;border-top:1px solid #12303a;padding:6px 0 0;margin-top:30px}
.is-phone .stations li button{font-size:18px}
.is-phone .st__w{font-size:16px}
.is-phone .tuner__meter{position:static;margin-top:6px}
.is-phone .tuner__time{position:static;margin-top:4px}
.is-phone .wire__track{top:2px;font-size:17px}
.is-phone .wire__list{font-size:15px;bottom:3px}
.is-phone .lcd__sub span:nth-child(3),.is-phone .lcd__sub span:nth-child(4){display:none}
.is-phone .rel{font-size:17px}
.is-phone .lcd__sub{font-size:9px}
.is-phone .tuner__ticks b.own{font-size:9px}
.is-phone .tuner__ticks b.own:nth-of-type(even){display:none} /* every other station label on the phone band; all eight are in the menu */

/* ROUTE 3: two rendered doors inside the held outer frame; the home and the lower deck sit behind them. */
.under,.doors{position:absolute;left:0;top:0;transform-origin:0 0}
.under{z-index:0}.stage{z-index:1}
.doors{z-index:3;border:0;padding:0;background:none;cursor:pointer}
.doors img{position:absolute;left:0;top:0;width:100%;height:100%}
.doors:focus-visible{outline:2px dotted #ffc23a;outline-offset:-60px}
.under[hidden],.doors[hidden],.seam-led[hidden]{display:none}
.seam-led{position:absolute;width:2px;background:#7dfcff;box-shadow:0 0 6px #7dfcff;pointer-events:none;animation:seamblink 2.4s steps(1) infinite}
@keyframes seamblink{0%{opacity:0}70%{opacity:1}80%{opacity:0}90%{opacity:1}}
@media (prefers-reduced-motion:reduce){.seam-led{animation:none;opacity:.6}}

/* ROUTE 3 edit 4: the ground behind the console (route3.js picks it) */
.ground{position:fixed;inset:0;z-index:-1;background:#05070d center/cover no-repeat;image-rendering:auto}
.has-ground{background:#05070d}.has-ground body{background:transparent}
.has-ground .frame{z-index:0}
.ground--city{filter:brightness(.82)}

/* SILVER (5 Oct): the home's wells in SOUND E silver's palette (period-sound-e-silver/sound.css), the home face only.
   Royal blue wells, fine dot grid, white segments, pale blue dims; orange only on the needle, ON AIR and LOCKED. */
.stage{--hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--amber:#ff8a1e;--sel:#0b1f74}
.stage .hole{background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.stage .hole::after{background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.stage .hole::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.stage .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
.stage .tuner__needle{background:#ff8a1e;box-shadow:none}
.stage [data-locked="true"] .tuner__air{background:#ff8a1e;color:#081a5e}
.stage .tuner__ticks i.own{background:#ffffff}
.stage .tuner__ticks b.own,.stage .st__f,.stage .stations li.on .st__f,.stage .tuner__note,.stage .seg--sm{color:#ffffff}
.stage .wire__track em,.stage .wire__list b,.stage .listing dt small{color:#cfdcff}
.stage .stations,.stage .chart__h,.stage .listing div,.stage .menu a{border-color:rgba(159,182,255,.3)}
.stage .stations li.on .st__w,.stage .stations li.on .st__a,.stage .rel li.sel small{color:#cfdcff}
.stage .tuner__meter i{background:#ffffff}
.stage .menu__close{background:#0b1f74;border-color:#9fb6ff}
.stage .key:focus-visible{outline-color:#ff8a1e}

/* phone full screen (5 Oct): the ground goes, the housing's silver fills behind the grown stage (sampled from the phone
   skins' outer bevel: lit from the upper left, 254 at the top, about 205 left and 145 right at mid height, 122 at the foot) */
html.is-full,html.is-full body{background:linear-gradient(160deg,#f2f2f4 0,#d6d7da 34%,#a9abae 70%,#7c7d81 100%) fixed}
.is-full .ground{display:none}
.is-full .frame{height:100dvh}
.menu .menu__full{display:flex;justify-content:space-between;width:100%;padding:12px 10px;background:none;border:0;border-bottom:1px solid #12303a;font-family:"DSEG14",var(--dot);font-size:22px;color:var(--lcd);text-align:left;cursor:pointer}
.menu .menu__full[aria-pressed="true"]{background:var(--sel);color:#fff;border-radius:3px}
.menu .menu__full:focus-visible{outline:2px dotted var(--amber);outline-offset:-2px}
.stage .menu .menu__full{border-color:rgba(159,182,255,.3)}