body{margin:0}
img{max-width:100%}
/* Layout: one screen, no scroll. Console bar, a glitching two-line headline, then a short dossier and the single
   button beside one large terminal pane where a particle field intercepts a post, locks on, and decrypts a ticker. */
:root{
  --ground:#040503; --pane:#070905; --line:#26330f; --cipher:#0e1506;
  --ink:#e9f0da; --muted:#8a9478;
  --lime:#c6ff3d; --lime-ink:#070a02; --lime-dim:#5f7a1d;
  --hot:#ff4d3d;
  --face:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --display:"VT323","VT fallback",ui-monospace,Menlo,Consolas,monospace;
  --glow:0 0 14px rgba(198,255,61,.55),0 0 2px rgba(198,255,61,.8);
  --gut:clamp(16px,3.2vw,44px);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
@font-face{font-family:"VT fallback";src:local("Courier New"),local("Menlo"),local("Consolas");size-adjust:68%}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--face);font-size:15px;line-height:1.55;overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--lime-ink)}
h1,p,dl,dd,dt{margin:0;padding:0}

/* atmosphere: cipher traffic, particle field, sweep, vignette, scanlines */
#hex{position:fixed;inset:0;z-index:0;margin:0;overflow:hidden;color:var(--cipher);font:13px/16px var(--face);white-space:pre;user-select:none;pointer-events:none}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.sweep{position:fixed;left:0;right:0;top:0;height:22vh;z-index:27;pointer-events:none;background:linear-gradient(to bottom,rgba(198,255,61,0),rgba(198,255,61,.05) 80%,rgba(198,255,61,0));animation:sweep 7s linear infinite}
@keyframes sweep{from{transform:translateY(-25vh)}to{transform:translateY(105vh)}}
body::before{content:"";position:fixed;inset:0;z-index:28;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.72) 100%)}
body::after{content:"";position:fixed;inset:0;z-index:30;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.26) 2px 3px)}
@media (min-width:861px){#field{filter:drop-shadow(0 0 5px rgba(198,255,61,.55))}}

.shell{position:relative;z-index:1;min-height:100%;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;gap:clamp(10px,2.2vh,24px);padding-block:16px 14px;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.9rem;letter-spacing:.04em}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.mark i{color:var(--muted);font-style:normal;font-weight:400}
.pip{width:12px;height:12px;background:var(--lime);box-shadow:var(--glow);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.meta{display:flex;gap:18px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.meta b{font-weight:500;color:var(--ink)}

/* headline */
h1{min-width:0;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:min(13.4vw,23vh);line-height:.8;color:var(--lime);text-shadow:var(--glow)}
h1 span{position:relative;display:block;width:max-content;max-width:100%;white-space:nowrap;animation:power 1s var(--ease) both}
h1 span:nth-child(2){animation-delay:.14s}
@keyframes power{0%{opacity:0;transform:scaleY(.03) scaleX(1.2);filter:brightness(4)}60%{opacity:1;transform:scaleY(1.06);filter:brightness(1.8)}100%{opacity:1;transform:none;filter:none}}
h1 span::before,h1 span::after{content:attr(data-t);position:absolute;left:0;top:0;text-shadow:none;clip-path:inset(50% 0 50% 0);pointer-events:none}
h1 span::before{color:var(--hot);animation:glitch-a 5.5s steps(1) infinite 1.4s}
h1 span::after{color:var(--ink);animation:glitch-b 5.5s steps(1) infinite 1.4s}
h1 span:nth-child(2)::before,h1 span:nth-child(2)::after{animation-delay:3.1s}
@keyframes glitch-a{0%,89%,100%{clip-path:inset(50% 0 50% 0);transform:none}
  90%{clip-path:inset(12% 0 64% 0);transform:translateX(-.06em)}92%{clip-path:inset(58% 0 18% 0);transform:translateX(.05em)}
  94%{clip-path:inset(34% 0 44% 0);transform:translateX(-.03em)}96%{clip-path:inset(76% 0 6% 0);transform:translateX(.07em)}}
@keyframes glitch-b{0%,90%,100%{clip-path:inset(50% 0 50% 0);transform:none}
  91%{clip-path:inset(44% 0 38% 0);transform:translateX(.08em)}93%{clip-path:inset(8% 0 80% 0);transform:translateX(-.05em)}
  95%{clip-path:inset(66% 0 22% 0);transform:translateX(.04em)}}
.cur{display:inline-block;width:.42em;height:.62em;margin-left:.06em;background:var(--lime);box-shadow:var(--glow);animation:blink 1s steps(1) infinite}

/* middle */
.mid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,4vw,64px);min-height:0}
.copy{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.dossier{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:.92rem;align-content:start}
.dossier dt{color:var(--muted);letter-spacing:.06em}
.dossier dd{color:var(--ink)}
.dossier dd b{font-weight:500;color:var(--lime)}
.pitch{display:grid;gap:22px;justify-items:start}
.lede{font-size:clamp(1rem,1.3vw,1.2rem);max-width:26em}
.lede::before{content:"> ";color:var(--lime)}
.red{color:var(--lime)}
.cta{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 26px;background:var(--lime);color:var(--lime-ink);text-decoration:none;font-weight:700;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  border:2px solid var(--lime);box-shadow:6px 6px 0 var(--lime-dim);margin:0 6px 6px 0;
  transition:box-shadow .18s var(--ease),translate .18s var(--ease),background-color .18s,color .18s}
.cta::before{content:"["}.cta::after{content:"]"}
.cta svg{width:20px;height:20px;transition:transform .25s var(--ease)}
.cta:hover,.cta:focus-visible{background:var(--ground);color:var(--lime);box-shadow:var(--glow);translate:6px 6px}
.cta:hover svg,.cta:focus-visible svg{transform:translateX(5px)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.cta:active{background:var(--lime);color:var(--lime-ink)}

.stage{position:relative;min-height:190px;height:100%;border:1px solid var(--line);background:rgba(7,9,5,.55)}
.tag{position:absolute;top:-.8em;padding:0 8px;background:var(--ground);font-size:.8rem;letter-spacing:.05em;white-space:nowrap}
#phase{left:14px;color:var(--muted)}
#lock{right:14px;color:var(--hot)}
#lock.open{color:var(--lime);text-shadow:var(--glow)}
.stage-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);color:var(--lime);font-size:clamp(3rem,10vw,9rem);text-shadow:var(--glow)}
.js .stage-fallback{visibility:hidden}

/* strip */
.strip{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:.9rem;min-height:1.6em}
.strip p:first-child{flex:1;min-width:0}
.strip p:first-child::before{content:"> intercept: ";color:var(--lime)}
.strip .note{color:var(--muted)}

@media (max-width:860px){
  .mid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(190px,1fr)}
  .dossier{display:none}
  .meta span:first-child{display:none}
  .strip{min-height:5.6em;flex-direction:column;flex-wrap:nowrap}
  .strip p:first-child{flex:none}
  .cta{height:58px}
}
@media (prefers-reduced-motion:reduce){
  .sweep{display:none}
  .pip,.cur,h1 span,h1 span::before,h1 span::after{animation:none}
  .cta,.cta svg{transition:none}
}