:root{color-scheme:dark;--night:#080d09;--lime:#ceff52;--paper:#edf3db;--mono:ui-monospace,'Cascadia Mono','Courier New',monospace;--heavy:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;--edge:clamp(14px,3.9vw,60px)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{display:grid;grid-template-rows:auto minmax(0,1fr);height:100dvh;background:var(--night);color:var(--paper);font:14px var(--mono)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.masthead{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;min-height:clamp(42px,6dvh,62px);padding:0 var(--edge);background:#0a100b;border-bottom:1px solid #c7ff7130}
.station{width:max-content;display:inline-flex;gap:9px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.14em;white-space:nowrap}
.station img{width:27px;height:27px}
.station:hover{color:var(--lime)}
.station-id,.on-air{font-size:9px;font-weight:700;letter-spacing:.15em;white-space:nowrap;color:#c3d0ad}
.station-id b,.on-air{color:var(--lime)}
.on-air{justify-self:end}
.on-air i,.device-id i,.field-mark i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 9px var(--lime);animation:signal 2.8s infinite}
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:0;background:#172015 url('assets/seattle.webp') 78% 32% / cover no-repeat}
.city-world{position:absolute;left:0;top:0;width:1536px;height:1024px;transform-origin:0 0;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(var(--scene-scale,1));pointer-events:none}
.city-art{position:absolute;inset:0;width:100%;height:100%}
#world-fx{position:absolute;inset:0}
.atmosphere{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#070d09a8,transparent 34%),linear-gradient(0deg,#070c0a 0%,#080e0bae 10%,transparent 38%);z-index:2}
.city-zoey{position:absolute;height:auto;transform-origin:50% 100%;filter:brightness(.64) saturate(.68) drop-shadow(0 2px 3px #090d06);z-index:2}
.zoey-walker{left:1138px;top:708px;width:30px;animation:walker-crossing 17s linear infinite}
.zoey-crouch{left:1305px;top:649px;width:108px;animation:street-crouch 7s ease-in-out infinite}
.field-mark{position:absolute;top:clamp(18px,4dvh,45px);left:var(--edge);z-index:3;display:grid;gap:6px;padding:0 0 0 9px;border-left:1px solid #c8fa5470;color:var(--lime);font-size:10px;font-weight:700;letter-spacing:.15em;text-shadow:0 0 6px #111509}
.field-mark small{font-size:8px;color:#cbd4b9;font-weight:400}
.field-mark i{margin:0 3px}
.receiver{position:absolute;left:var(--edge);bottom:max(clamp(24px,5dvh,55px),env(safe-area-inset-bottom));display:flex;align-items:end;gap:clamp(9px,1.6vw,24px);z-index:4}
.contact-print{position:absolute;z-index:-1;left:4%;bottom:76%;width:clamp(57px,6.9vw,95px);padding:4px;margin:0;background:#96967a;color:#15190b;border:1px solid #a8a783;box-shadow:2px 3px 8px #020602;transform:rotate(-11deg);filter:brightness(.71) saturate(.62)}
.contact-print img{width:100%;height:auto;aspect-ratio:1.22;object-fit:cover;object-position:50% 36%}
.contact-print figcaption{padding:4px 0 2px;font-weight:700;font-size:clamp(5px,.64vw,8px);letter-spacing:-.03em;text-align:center;white-space:nowrap}
.tuner{position:relative;z-index:1;padding-bottom:7px;min-width:0}
.device-id,.tuner-status{color:#d7e1c1;margin:0;font-size:9px;line-height:1.5;letter-spacing:.065em;white-space:nowrap;text-shadow:0 1px 4px #050805}
.device-id i{width:4px;height:4px;margin-right:3px}
.play-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 13px;margin:5px 0;border:1px solid var(--lime);background:#d0ff69;color:#151e0b;font-size:11px;letter-spacing:.11em;font-weight:900;box-shadow:0 0 17px #a5f35150,3px 3px 0 #617b32;transition:background .18s,color .18s}
.play-button:hover{background:#10150a;color:var(--lime)}
.program-preview-button{display:block;margin:4px 0;padding:5px 7px;min-height:33px;border:1px solid #b4df7366;background:#111a0be6;color:#e2f3c8;font-size:10px;font-weight:700}
.program-preview-button:hover,.program-preview-button:focus-visible{color:var(--lime);border-color:var(--lime)}
.program-preview-status{max-width:18ch;margin:4px 0;color:#f4e4bb;font-size:9px;line-height:1.35}
.play-icon{width:10px;height:12px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.playing .play-icon{clip-path:polygon(0 0,36% 0,36% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0)}
.social-dock{position:absolute;z-index:3;right:max(var(--edge),env(safe-area-inset-right));bottom:max(clamp(11px,3dvh,30px),env(safe-area-inset-bottom));isolation:isolate}
.dock-zoey{position:absolute;z-index:-1;bottom:calc(100% - 7px);left:50%;width:clamp(132px,16vw,200px);max-width:none;transform:translateX(-50%);mask-image:linear-gradient(0deg,transparent 0%,#000 27%);filter:drop-shadow(0 0 11px #79984270);pointer-events:none;animation:look-over 5.5s ease-in-out infinite}
.bubbles{display:flex;align-items:flex-start;gap:clamp(4px,.65vw,9px);padding:6px 8px;border:1px solid #beff6b35;border-radius:90px;background:linear-gradient(180deg,#2b532537,#07180d7d);box-shadow:inset 0 1px 1px #caff9b20,0 5px 24px #030604a8;backdrop-filter:blur(2px)}
.bubble-link{--charge:0;--orb:clamp(36px,4.3vw,44px);position:relative;display:grid;justify-items:center;min-width:var(--orb);gap:4px;border-radius:32px;color:#d6e1c3;font-size:8px;font-weight:700;text-align:center;white-space:nowrap}
.bubble-icon{position:relative;display:grid;place-items:center;width:var(--orb);aspect-ratio:1;border-radius:50%;border:1px solid #aeef85b5;background:radial-gradient(ellipse at 37% 18%,#e8ffd46b,#8dff712f 24%,transparent 50%),radial-gradient(ellipse at 62% 88%,#55ff7847,transparent 57%),linear-gradient(145deg,#66b55757,#144b2295 55%,#10361c5c);color:#e4ffd3;box-shadow:inset 0 1px 2px #eaffd2b5,inset 0 -5px 10px #020c04a3,0 1px 9px #060c07b8,0 0 16px rgb(120 255 87 / calc(var(--charge) * .52));backdrop-filter:blur(3px) saturate(1.35);transition:box-shadow .13s,color .13s,transform .14s}
.bubble-icon>svg:not(.electric){width:47%;height:47%;fill:currentColor;filter:drop-shadow(0 2px 2px #0a2a0f)}
.bubble-icon::before{content:'';position:absolute;inset:3px;border:1px solid #d7ffb435;border-left-color:#edffd97a;border-right-color:#61f56738;border-radius:50%;pointer-events:none}
.bubble-icon::after{content:'';position:absolute;top:6%;left:17%;width:48%;height:26%;border-radius:55% 50% 45% 36%;background:radial-gradient(ellipse at 45% 8%,#f4ffe9c9,#d2ffc367 37%,transparent 77%);transform:rotate(-22deg);pointer-events:none}
.electric{position:absolute;z-index:2;inset:50% auto auto 50%;width:154%;height:154%;overflow:visible;transform:translate(-50%,-50%);opacity:max(var(--charge),var(--contact,0));pointer-events:none;transition:opacity .11s}
.electric path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.electric .arc-glow{stroke:#58ff3b;stroke-width:7;filter:blur(4px);opacity:.7}
.electric .arc-body{stroke:#84ff61;stroke-width:2.8;filter:drop-shadow(0 0 3px #75ff53)}
.electric .arc-core{stroke:#f1ffdc;stroke-width:.85}
.electric .arc-branches{stroke:#bcff98;stroke-width:.9}
.electric .arc-sparks{stroke:#e1ffc6;stroke-width:1.05;filter:drop-shadow(0 0 2px #a1ff67)}
.bubble-link:is(:hover,:focus-visible,:active){--contact:1;color:#ebffd6}
.bubble-link:is(:hover,:focus-visible,:active) .bubble-icon{color:#f7ffed;box-shadow:inset 0 1px 5px #ebffceca,inset 0 -6px 13px #172e13a8,0 0 14px #94ff52af,0 0 31px #73ff518c;transform:translateY(-2px)}
.bubble-link:active .bubble-icon{transform:translateY(0) scale(.92)}
@keyframes signal{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes look-over{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-4px)}}
@keyframes walker-crossing{0%,100%{transform:translate(-15px,4px) scale(.91);opacity:.35}12%,83%{opacity:.86}89%{transform:translate(34px,-14px) scale(.73);opacity:.2}}
@keyframes street-crouch{0%,100%{transform:translateY(1px)}50%{transform:translate(-2px,-2px)}}
@media(max-width:650px) and (orientation:portrait){
  .masthead{grid-template-columns:1fr auto}.station-id{display:none}
  .station{font-size:11px;gap:7px}.station img{width:24px;height:24px}
  .on-air{font-size:8px}
  .field-mark{top:16px;font-size:8px}.field-mark small{font-size:7px}
  .atmosphere{background:linear-gradient(0deg,#070c0a 0%,#080e0bbd 16%,transparent 48%)}
  .receiver{bottom:max(100px,calc(91px + env(safe-area-inset-bottom)));gap:7px;align-items:end;flex-direction:row-reverse}
  .receiver .tv-stage{width:clamp(115px,34vw,165px)}
  .contact-print{left:1%;bottom:73%;width:55px}
  .device-id,.tuner-status{font-size:7px}
  .play-button{min-height:37px;padding:0 8px;font-size:9px;gap:6px}
  .tuner{padding-bottom:4px}
  .social-dock{bottom:max(11px,env(safe-area-inset-bottom))}
  .bubble-link{--orb:clamp(36px,9.5vw,40px);font-size:7px}
  .dock-zoey{width:clamp(132px,34vw,152px)}
}
@media(max-height:500px) and (orientation:landscape){
  .masthead{min-height:36px}.station img{width:21px;height:21px}
  .receiver{bottom:18px}.receiver .tv-stage{width:min(19vw,31dvh,155px)}
  .contact-print{display:none}
  .social-dock{bottom:max(10px,env(safe-area-inset-bottom))}
  .bubble-link{--orb:clamp(35px,8dvh,44px)}
  .dock-zoey{width:clamp(105px,43dvh,175px)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}