/* Shared station styles for the standalone pages (work.html, explainers.html).
   The home page (site.html) carries its own inline copy because it doubles as the preview source. */
:root{
  --void:#05060d; --night:#0a0d22; --panel:#0f1330; --line:#232a55;
  --phosphor:#ece8f4; --dim:#9d9bbd; --soft:#c3c1dc;
  --violet:#8952e5; --violet-hi:#a77bff; --cyan:#00d4ff; --heat:#ff5a1f; --mustard:#f5c518; --green:#4dff9a;
  --pixel:"Silkscreen","Courier New",monospace;
  --term:"VT323","Courier New",monospace;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --body:"Jost","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,rgba(137,82,229,.16),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(0,212,255,.07),transparent 60%),var(--night);
  color:var(--phosphor);font:400 18px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
p{margin:0}
h1,h2,h3,h4{margin:0;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.tag{font:400 12px/1 var(--pixel);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.chan{color:var(--cyan)} .mus{color:var(--mustard)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* buttons: every one moves */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;font:400 24px/1 var(--term);text-decoration:none;padding:12px 18px 11px;border:1px solid currentColor;border-radius:2px;cursor:pointer;background:none;color:inherit;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),background .18s,color .18s,box-shadow .25s,text-shadow .18s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-2px);text-shadow:1.5px 0 rgba(255,40,90,.7),-1.5px 0 rgba(0,212,255,.8)}
.btn:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(1px) scale(.97);transition-duration:.06s}
.btn .arw{display:inline-block;transition:transform .2s}
.btn:hover .arw{transform:translateX(4px)}
.btn.go{color:var(--void);background:var(--phosphor);border-color:var(--phosphor);animation:breathe 3.2s ease-in-out infinite}
.btn.go:hover{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 28px rgba(0,212,255,.6);text-shadow:none}
.btn.alt{color:var(--mustard)}
.btn.alt:hover{background:var(--mustard);color:var(--void);text-shadow:none;box-shadow:0 0 26px rgba(245,197,24,.45)}
.btn.sm{font-size:20px;padding:9px 14px 8px}
.btn:disabled{opacity:.6;cursor:wait}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 rgba(236,232,244,0)}50%{box-shadow:0 0 22px 2px rgba(167,123,255,.45)}}
@keyframes blink{50%{opacity:.25}}

/* status bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(5,6,13,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:18px;padding-block:10px}
.os{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 14px/1 var(--pixel);letter-spacing:.12em;white-space:nowrap}
.os .sun{width:22px;height:22px;flex:none;border-radius:50%;background:linear-gradient(180deg,#7fe3ff 0%,#9fb4ff 45%,#c4a0ff 58%,var(--mustard) 62%,var(--mustard) 100%);
  -webkit-mask:repeating-linear-gradient(180deg,#000 0 2.4px,transparent 2.4px 4px);mask:repeating-linear-gradient(180deg,#000 0 2.4px,transparent 2.4px 4px);transition:transform .5s}
.os:hover .sun{transform:rotate(-12deg) scale(1.12)}
.os small{font:400 11px/1 var(--pixel);color:var(--dim)}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu a{position:relative;font:400 21px/1 var(--term);text-decoration:none;color:var(--dim);padding:6px 10px;transition:color .15s}
.menu a:not(.btn)::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.menu a:not(.btn):hover{color:var(--phosphor)}
.menu a:not(.btn):hover::after{transform:scaleX(1)}
.menu .btn{margin-left:8px}
@media (max-width:900px){.menu a:not(.btn){display:none}}
@media (max-width:520px){.os small{display:none}}

/* CRT primitive */
.crt{position:relative;border-radius:18px/14px;overflow:hidden;background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 0 10px #0c0d14,0 0 0 11px rgba(255,255,255,.05),0 30px 80px -20px rgba(0,0,0,.8),0 0 120px -30px rgba(137,82,229,.45)}
.crt img{width:100%;height:100%;object-fit:cover}
.crt::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 40px rgba(0,0,0,.6)}

/* sections */
section.s{padding-block:96px 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:40px}
.head h2{font:800 clamp(30px,4.2vw,52px)/1.05 var(--display);letter-spacing:-.02em;margin-top:12px}
.head p{color:var(--dim);max-width:56ch}

/* status chips */
.st{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;font:700 10.5px/1 var(--pixel);letter-spacing:.14em;padding:6px 8px;border:1px solid currentColor;border-radius:2px;text-transform:uppercase}
.st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.st.live{color:var(--green)} .st.live i{box-shadow:0 0 8px var(--green);animation:blink 2s steps(2) infinite}
.st.run{color:var(--cyan)} .st.open{color:var(--heat)} .st.res{color:var(--mustard)} .st.unb{color:var(--violet-hi)}

/* footer */
footer.foot{margin-top:110px;border-top:1px solid var(--line);padding-block:28px 48px}
footer.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font:400 19px/1.3 var(--term);color:var(--dim)}
footer.foot a{text-decoration:none;transition:color .15s}
footer.foot a:hover{color:var(--cyan)}
footer.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}

@media (max-width:980px){.head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){section.s{padding-block:72px 0}}