/* ═══════════════════════════════════════════════════════════════════
   HYPR THEME — "Leonida Uplink"
   A weathered relay terminal picking up a signal from 2026 Vice City.
   Layers: oil-black ground · cyan/magenta signal (cyberpunk) · LCARS
   elbow frame & capsules (Star Trek) · Leonida sunset ramp (GTA VI) ·
   a sky that keeps real Vice City time.
   Loaded after each page's inline <style>, so these tokens win.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --night:#070A10; --dusk:#0B1018; --card:#101722; --card-2:#16202E;
  --night-rgb:7,10,16; --dusk2-rgb:11,16,24; --deep-rgb:13,19,28;
  --card-rgb:16,23,34; --card2-rgb:22,32,46; --text-rgb:235,240,247;
  --sky-mid:#0E1B2A; --sky-far:#3A1428;

  /* signal */
  --teal:#1EF2E6; --pink:#FF2FA0; --orange:#FF8A3D; --violet:#6F5BFF;
  --hx-cyan:#1EF2E6; --hx-mag:#FF2FA0; --hx-amber:#FFB454;
  --hx-violet:#6F5BFF;

  --text:#EBF0F7; --muted:#9AA4BE; --faint:#5E6784;
  --line:rgba(30,242,230,.11); --line-strong:rgba(30,242,230,.24);

  --grad:linear-gradient(100deg,#FF8A3D 0%,#FF2FA0 48%,#1EF2E6 100%);
  --grad-soft:linear-gradient(100deg,rgba(255,138,61,.16),rgba(255,47,160,.16) 48%,rgba(30,242,230,.16));
  --hx-plate:linear-gradient(160deg,rgba(30,242,230,.07),rgba(111,91,255,.06) 45%,rgba(255,47,160,.06));

  --font-display:"Big Shoulders Display","Bebas Neue",Impact,sans-serif;
  --font-script:"Share Tech Mono",monospace;
  --font-body:"Space Grotesk","Inter",system-ui,sans-serif;
  --font-mono:"Share Tech Mono","SFMono-Regular",Menlo,monospace;

  --radius:6px; --radius-sm:4px;
}

/* ── Ground: grain, vignette, scanlines ─────────────────────────── */
body{
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(255,47,160,.10),transparent 55%),
    radial-gradient(90% 60% at 100% 100%,rgba(30,242,230,.07),transparent 60%),
    radial-gradient(70% 50% at 0% 90%,rgba(111,91,255,.10),transparent 60%),
    var(--night);
  font-family:var(--font-body);
}
body::after{ /* scanlines + vignette */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px),
    radial-gradient(120% 120% at 50% 50%,transparent 55%,rgba(0,0,0,.55));
  opacity:.75;
}
main,.dash,footer{position:relative;z-index:1}

/* Horizon grid — fixed, drifting toward the viewer */
.hx-grid{
  position:fixed;left:-20vw;right:-20vw;bottom:0;height:38vh;z-index:0;pointer-events:none;
  transform-origin:50% 100%;transform:perspective(520px) rotateX(62deg);
  background-image:
    linear-gradient(rgba(30,242,230,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,47,160,.22) 1px,transparent 1px);
  background-size:100% 44px,64px 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%);
  animation:hx-grid-drift 6s linear infinite;opacity:.55;
}
@keyframes hx-grid-drift{to{background-position:0 44px,0 0}}

/* Periodic signal sweep down the page */
.hx-sweep{
  position:fixed;left:0;right:0;top:-12%;height:10%;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(30,242,230,.09) 50%,transparent);
  animation:hx-sweep 11s linear infinite;
}
@keyframes hx-sweep{0%{top:-12%}100%{top:112%}}

/* ── LCARS elbow frame (left edge, wide screens) ───────────────── */
.hx-frame{
  position:fixed;left:0;top:var(--nav-h);bottom:0;width:14px;z-index:150;pointer-events:none;
  display:none;
}
@media(min-width:1320px){.hx-frame{display:block}}
.hx-frame span{
  position:absolute;left:0;width:100%;border-radius:0 7px 7px 0;
}
.hx-frame .s1{top:18px;height:22%;background:var(--hx-amber)}
.hx-frame .s2{top:calc(22% + 26px);height:9%;background:var(--hx-violet)}
.hx-frame .s3{top:calc(31% + 34px);height:28%;background:var(--hx-cyan);animation:hx-lcars 4s steps(1) infinite}
.hx-frame .s4{top:calc(59% + 42px);height:12%;background:var(--hx-mag)}
.hx-frame .s5{top:calc(71% + 50px);bottom:18px;background:var(--hx-violet)}
@keyframes hx-lcars{0%,100%{opacity:1}50%{opacity:.35}}
.hx-frame .rd{
  position:absolute;left:20px;bottom:24px;white-space:nowrap;transform:rotate(-90deg);transform-origin:0 100%;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;color:var(--hx-cyan);opacity:.7;
}

/* ── Cursor light (desktop) ─────────────────────────────────────── */
.hx-cursor{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;z-index:0;
  pointer-events:none;border-radius:50%;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle,rgba(30,242,230,.11),rgba(255,47,160,.06) 40%,transparent 70%);
}
@media(hover:hover) and (pointer:fine){.hx-cursor{opacity:1}}

/* ── Nav / tabbar ───────────────────────────────────────────────── */
.nav{
  background:rgba(7,10,16,.86);
  border-bottom:1px solid rgba(30,242,230,.18);
  box-shadow:0 1px 0 rgba(111,91,255,.25),0 10px 40px rgba(0,0,0,.5);
}
.nav::after{opacity:.85;height:2px;box-shadow:0 0 14px rgba(30,242,230,.45)}
.tabbar{background:rgba(7,10,16,.94);border-top-color:rgba(30,242,230,.18)}
.brand{font-family:var(--font-display);font-weight:800;letter-spacing:.06em;text-shadow:0 0 18px rgba(30,242,230,.35)}
.nav-pill{border-radius:3px 14px 3px 14px;font-family:var(--font-mono);letter-spacing:.06em;text-transform:uppercase;font-size:12px}

/* ── Plates: every card becomes weathered copper + signal ───────── */
.news-box,.vault-strip,.dc-cell,.ticker,.section-alt .card,.card,.shot,.video-frame,
.side-box,.ovid-frame,.foot-block,.forum-card,.post,.map-card,.tile{
  border-radius:var(--radius);
  border:1px solid rgba(111,91,255,.32);
  background-image:var(--hx-plate);
  box-shadow:
    inset 0 0 0 1px rgba(30,242,230,.10),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 40px rgba(0,0,0,.55),
    0 0 0 6px rgba(7,10,16,.35);
  position:relative;
}
/* corner brackets */
.news-box::before,.vault-strip::before,.ticker::before,.video-frame::before,.ovid-frame::before{
  content:"";position:absolute;inset:6px;pointer-events:none;z-index:5;border-radius:2px;
  background:
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) top left/14px 1px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) top left/1px 14px no-repeat,
    linear-gradient(var(--hx-mag),var(--hx-mag)) bottom right/14px 1px no-repeat,
    linear-gradient(var(--hx-mag),var(--hx-mag)) bottom right/1px 14px no-repeat;
  opacity:.85;
}
.news-box:hover,.vault-strip:hover{border-color:rgba(30,242,230,.45);
  box-shadow:inset 0 0 0 1px rgba(30,242,230,.22),0 14px 44px rgba(0,0,0,.6),0 0 28px rgba(30,242,230,.10)}

/* LCARS header bars */
.news-box-head,.vault-strip-head{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--hx-amber);
  border-bottom:1px solid rgba(111,91,255,.35);
  background:linear-gradient(90deg,rgba(255,180,84,.10),transparent 60%);
  padding-left:22px;
}
.news-box-head::before,.vault-strip-head::before{
  content:"";position:absolute;left:0;top:0;bottom:auto;height:38px;width:8px;
  background:var(--hx-amber);border-radius:0 6px 6px 0;
}
.news-dot{background:var(--hx-cyan);box-shadow:0 0 10px var(--hx-cyan)}
.vault-all,.box-pill.primary,.btn-primary{
  border-radius:3px 12px 3px 12px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{border-radius:3px 14px 3px 14px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  -webkit-text-stroke:0;text-shadow:none;position:relative;overflow:hidden}
.btn-primary{background:var(--grad);color:#07090F;font-weight:700;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 8px 28px rgba(255,47,160,.35),0 0 18px rgba(30,242,230,.25)}
.btn-primary::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:30%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);
  animation:hx-shine 3.6s ease-in-out infinite}
@keyframes hx-shine{0%,60%{left:-30%}100%{left:130%}}
.btn-ghost{border:1px solid rgba(30,242,230,.35);background:rgba(16,23,34,.6);color:var(--hx-cyan)}
.btn-ghost:hover{border-color:var(--hx-cyan);background:rgba(30,242,230,.08);box-shadow:0 0 18px rgba(30,242,230,.25)}
.box-pill{border-radius:3px 10px 3px 10px;font-family:var(--font-mono);letter-spacing:.05em}
.chip{border-radius:3px 12px 3px 12px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.chip.active{background:var(--hx-amber);color:#07090F;box-shadow:0 0 16px rgba(255,180,84,.45)}

/* ── Typography ───────────────────────────────────────────────────── */
h1,h2,h3,.sec-title,.dash-title,.brand{font-family:var(--font-display);font-weight:800}
.sec-title{letter-spacing:.02em}
.sec-eyebrow,.dash-eyebrow,.eyebrow-script{
  font-family:var(--font-script);transform:none;font-size:clamp(14px,1.9vh,20px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--hx-violet);text-shadow:0 0 12px rgba(111,91,255,.5);animation:none;
}
.dash-eyebrow::before,.sec-eyebrow::before{content:"▸ ";color:var(--hx-cyan)}
.dash-title{
  -webkit-text-stroke:0;
  text-shadow:
    -2px 0 rgba(30,242,230,.55),2px 0 rgba(255,47,160,.55),
    0 4px 0 rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.7);
  animation:hx-chroma 7s ease-in-out infinite;
}
.dash-title .vi{color:var(--hx-amber);text-shadow:-2px 0 rgba(30,242,230,.6),2px 0 rgba(255,47,160,.6),0 0 30px rgba(255,180,84,.55)}
@keyframes hx-chroma{
  0%,88%,100%{text-shadow:-2px 0 rgba(30,242,230,.55),2px 0 rgba(255,47,160,.55),0 4px 0 rgba(0,0,0,.6),0 18px 40px rgba(0,0,0,.7)}
  90%{text-shadow:-6px 0 rgba(30,242,230,.8),6px 0 rgba(255,47,160,.8),0 4px 0 rgba(0,0,0,.6)}
  93%{text-shadow:4px 0 rgba(30,242,230,.8),-4px 0 rgba(255,47,160,.8),0 4px 0 rgba(0,0,0,.6)}
}
.dash-title.hx-glitch{animation:hx-chroma 7s ease-in-out infinite,hx-glitch .6s steps(3) 1 both}
@keyframes hx-glitch{
  0%{clip-path:inset(0 0 60% 0);transform:translate(-4px,0)}
  25%{clip-path:inset(40% 0 20% 0);transform:translate(5px,-2px)}
  50%{clip-path:inset(70% 0 0 0);transform:translate(-3px,2px)}
  75%{clip-path:inset(10% 0 50% 0);transform:translate(2px,0)}
  100%{clip-path:inset(0 0 0 0);transform:none}
}
.tagline-pill{border-radius:3px 12px 3px 12px;font-family:var(--font-mono);border-color:rgba(255,180,84,.4);background:rgba(255,180,84,.08);color:var(--hx-amber)}

/* countdown = amber readout */
.dc-cell{background:linear-gradient(180deg,rgba(22,32,46,.9),rgba(7,10,16,.95));border-color:rgba(255,180,84,.3)}
.dc-cell::after{content:"";position:absolute;left:8px;right:8px;top:6px;height:1px;background:rgba(255,180,84,.35)}
.dc-num{font-family:var(--font-mono);background:none;-webkit-text-fill-color:var(--hx-amber);color:var(--hx-amber);
  text-shadow:0 0 6px rgba(255,180,84,.8),0 0 22px rgba(255,180,84,.45);animation:hx-flicker 4s steps(1) infinite}
.dc-label{font-family:var(--font-mono);color:var(--hx-cyan);letter-spacing:.28em}
@keyframes hx-flicker{0%,97%,100%{opacity:1}98%{opacity:.6}99%{opacity:.9}}

/* ── Hero atmosphere ─────────────────────────────────────────────── */
.hero-sky{background:
  radial-gradient(90% 60% at 50% 100%,rgba(255,47,160,.45),rgba(255,138,61,.28) 30%,transparent 65%),
  linear-gradient(180deg,#070A10,#0E1B2A 55%,#3A1428)}
.hero-sun{background:conic-gradient(from 180deg,#FFB454,#FF2FA0,#6F5BFF,#1EF2E6,#FFB454);
  filter:blur(1px) saturate(1.2);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 10px);
  mask-image:repeating-linear-gradient(180deg,#000 0 7px,transparent 7px 10px)}
.hero-horizon{background:linear-gradient(180deg,transparent,rgba(30,242,230,.18) 50%,var(--night))}
.hero-shots-scrim{background:linear-gradient(180deg,rgba(7,10,16,.35),rgba(7,10,16,.75) 60%,var(--night))}

/* ── Rows / cards micro-interactions ─────────────────────────────── */
.news-row,.vstrip-card,.oshot-card,.art-row{transition:transform .18s,color .18s,text-shadow .18s}
.news-row:hover,.vstrip-card:hover,.oshot-card:hover,.art-row:hover{
  transform:translateX(4px);text-shadow:-1px 0 rgba(30,242,230,.5),1px 0 rgba(255,47,160,.5)}
.news-row-src,.vstrip-meta,.ovid-meta,.oshot-card>span:last-child{font-family:var(--font-mono);letter-spacing:.08em;color:var(--hx-cyan);font-size:10.5px}
.shot img,.oshot-card img,.vstrip-thumb{filter:saturate(1.1) contrast(1.05)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(7,10,16,.85));box-shadow:inset 0 0 0 1px rgba(30,242,230,.15)}
.shot:hover::after{box-shadow:inset 0 0 0 1px var(--hx-cyan),inset 0 0 24px rgba(30,242,230,.25)}
.shot .lbl{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-size:11px;color:var(--hx-amber)}

/* sections + footer */
.section-alt{background:linear-gradient(180deg,rgba(11,16,24,.9),rgba(111,91,255,.12))}
.sunset-rule{border:0;height:2px;background:var(--grad);opacity:.9;box-shadow:0 0 12px rgba(255,47,160,.4)}
footer{background:linear-gradient(180deg,var(--dusk),#050609);border-top:1px solid rgba(111,91,255,.4)}
footer h4{font-family:var(--font-mono);letter-spacing:.2em;color:var(--hx-amber);text-transform:uppercase;font-size:12px}
::selection{background:var(--hx-cyan);color:#07090F}
:focus-visible{outline:2px solid var(--hx-amber);outline-offset:3px}

/* ── Boot overlay ─────────────────────────────────────────────────── */
.hx-boot{
  position:fixed;inset:0;z-index:9999;background:#050609;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);color:var(--hx-cyan);letter-spacing:.2em;font-size:clamp(11px,1.6vw,14px);
  transition:opacity .45s ease,visibility .45s;
}
.hx-boot.out{opacity:0;visibility:hidden}
.hx-boot .box{position:relative;padding:28px 36px;border:1px solid rgba(30,242,230,.35);min-width:min(520px,86vw)}
.hx-boot .box::before{content:"";position:absolute;left:-14px;top:0;bottom:0;width:8px;background:var(--hx-amber);border-radius:6px 0 0 6px}
.hx-boot p{margin:0 0 8px;opacity:0;transform:translateY(4px);animation:hx-boot-line .25s forwards}
.hx-boot p:nth-child(2){animation-delay:.18s}.hx-boot p:nth-child(3){animation-delay:.36s}.hx-boot p:nth-child(4){animation-delay:.58s;color:var(--hx-amber)}
.hx-boot p b{color:var(--hx-mag);font-weight:400}
.hx-boot .bar{height:2px;margin-top:14px;background:rgba(30,242,230,.15);overflow:hidden}
.hx-boot .bar i{display:block;height:100%;width:0;background:var(--grad);animation:hx-boot-bar .85s .15s ease-out forwards}
@keyframes hx-boot-line{to{opacity:1;transform:none}}
@keyframes hx-boot-bar{to{width:100%}}

/* ── Motion & small screens ────────────────────────────────────────── */
@media(max-width:820px){.hx-grid{height:26vh;opacity:.4}body::after{opacity:.5}}
@media(prefers-reduced-motion:reduce){
  .hx-grid,.hx-sweep,.dash-title,.dc-num,.btn-primary::after,.hx-frame .s3{animation:none!important}
  .hx-sweep,.hx-cursor{display:none}
  .hx-boot{display:none}
}

/* ── Signal field canvas ──────────────────────────────────────────── */
.hx-field{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.95;mix-blend-mode:screen}
.dash-bg .hx-field{position:absolute;z-index:5}

/* ── Living sky: variables are set every minute from Vice City time ── */
:root{--vc-top:#070A10;--vc-mid:#0E1B2A;--vc-hz:#3A1428;--vc-glow:rgba(255,47,160,.45);--vc-glow2:rgba(255,138,61,.28);--vc-sun-y:118%;--vc-sun-a:.9}
.hero-sky{background:
  radial-gradient(90% 60% at 50% 100%,var(--vc-glow),var(--vc-glow2) 30%,transparent 65%),
  linear-gradient(180deg,var(--vc-top),var(--vc-mid) 55%,var(--vc-hz))!important;
  transition:background 2s linear}
.hero-sun{top:auto;bottom:calc(100% - var(--vc-sun-y));opacity:var(--vc-sun-a);transition:bottom 2s linear,opacity 2s linear}
.hx-vcclock{
  position:fixed;right:18px;bottom:18px;z-index:160;pointer-events:none;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:var(--hx-cyan);
  padding:8px 12px;border:1px solid rgba(30,242,230,.3);border-radius:3px 12px 3px 12px;
  background:rgba(7,10,16,.7);backdrop-filter:blur(8px);
}
.hx-vcclock b{color:var(--hx-amber);font-weight:400}
@media(max-width:820px){.hx-vcclock{bottom:calc(var(--tab-h) + 12px);right:10px;font-size:10px}}

/* ── Holographic tilt & sheen ───────────────────────────────────────── */
.hx-tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hx-tilt{transition:transform .18s ease-out}
.hx-tilt::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),rgba(30,242,230,.08) 30%,rgba(255,47,160,.05) 50%,transparent 70%);
  opacity:var(--sh,0);transition:opacity .3s;mix-blend-mode:screen;
}

/* ── Narrow screens: mono digits are wider than the old condensed face ── */
@media(max-width:520px){
  .dash-countdown{gap:6px;width:100%}
  .dc-cell{min-width:0;flex:1 1 0;padding:8px 4px}
  .dc-num{font-size:clamp(22px,7.5vw,34px);letter-spacing:-.02em}
  .dc-label{font-size:7px;letter-spacing:.16em}
  .dash-cta .btn{padding:10px 14px;font-size:11px}
  .hx-vcclock{font-size:9px;padding:6px 9px}
}

  
/* ═══════════════════════════════════════════════════════════════════
   HYPR v2 — "Signal Glass"
   Second layer over the Leonida Uplink theme. Sharper glass, holo foil,
   rotating conic borders, HUD viewport corners, aurora field, particles,
   3D tilt and magnetic buttons. All decorative; degrades cleanly.
   ═══════════════════════════════════════════════════════════════════ */
@property --hx-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --hx-mx{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --hx-my{syntax:"<percentage>";inherits:true;initial-value:50%}

:root{
  --hx-glass:rgba(12,18,28,.42);
  --hx-glass-hi:rgba(255,255,255,.14);
  --hx-glass-edge:rgba(30,242,230,.55);
  --hx-foil:conic-gradient(from var(--hx-a),#1EF2E6,#6F5BFF,#FF2FA0,#FFB454,#1EF2E6);
}

/* ── Aurora field behind everything ─────────────────────────────── */
.hx-aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(70px) saturate(1.3);opacity:.55;
  background:
    radial-gradient(38% 30% at 20% 20%,rgba(30,242,230,.35),transparent 70%),
    radial-gradient(34% 28% at 80% 30%,rgba(255,47,160,.32),transparent 70%),
    radial-gradient(40% 34% at 55% 85%,rgba(111,91,255,.30),transparent 70%),
    radial-gradient(28% 22% at 10% 85%,rgba(199,116,58,.35),transparent 70%);
  animation:hx-aurora 26s ease-in-out infinite alternate}
@keyframes hx-aurora{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(4%,-3%) rotate(6deg) scale(1.08)}
  100%{transform:translate(-3%,4%) rotate(-5deg) scale(1.04)}}
.hx-particles{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7}

/* ── HUD viewport corners + ticks ───────────────────────────────── */
.hx-hud{position:fixed;inset:calc(var(--nav-h) + 10px) 12px 12px 12px;z-index:140;pointer-events:none}
.hx-hud i{position:absolute;width:26px;height:26px;border:2px solid var(--hx-cyan);opacity:.75;
  filter:drop-shadow(0 0 6px rgba(30,242,230,.6))}
.hx-hud .tl{left:0;top:0;border-right:0;border-bottom:0}
.hx-hud .tr{right:0;top:0;border-left:0;border-bottom:0;border-color:var(--hx-mag)}
.hx-hud .bl{left:0;bottom:0;border-right:0;border-top:0;border-color:var(--hx-amber)}
.hx-hud .br{right:0;bottom:0;border-left:0;border-top:0}
.hx-hud .ticks{position:absolute;right:0;top:40px;bottom:40px;width:10px;
  background:repeating-linear-gradient(180deg,rgba(30,242,230,.5) 0 1px,transparent 1px 14px);opacity:.35}
.hx-hud .tag{position:absolute;right:-96px;top:50%;transform:rotate(90deg);transform-origin:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;color:var(--hx-mag);opacity:.7;white-space:nowrap}
.hx-hud .fps{position:absolute;left:34px;bottom:2px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--hx-amber);opacity:.8}
@media(max-width:820px){.hx-hud{display:none}}

/* ── Super-sharp glass ───────────────────────────────────────────── */
.news-box,.vault-strip,.dc-cell,.ticker,.video-frame,.ovid-frame,.foot-block,.card,.tile,.forum-card,.post{
  background-color:var(--hx-glass)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.6) brightness(1.08);backdrop-filter:blur(22px) saturate(1.6) brightness(1.08);
  border:1px solid transparent;
  background-image:
    linear-gradient(var(--hx-glass),var(--hx-glass)),
    linear-gradient(135deg,var(--hx-glass-hi) 0%,rgba(255,255,255,.02) 35%,rgba(255,255,255,0) 50%,rgba(30,242,230,.18) 100%);
  background-origin:border-box;background-clip:padding-box,border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(30,242,230,.12),
    inset 0 0 40px rgba(30,242,230,.04),
    0 20px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(0,0,0,.4);
}
/* refractive top edge specular */
.news-box::after,.vault-strip::after,.ovid-frame::after,.dc-cell::after{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;pointer-events:none;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),rgba(30,242,230,.8),transparent);
  filter:blur(.3px)}
/* rotating holographic foil border, revealed on hover */
.news-box,.vault-strip,.dc-cell,.ovid-frame{isolation:isolate}
.hx-foil{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  padding:1px;background:var(--hx-foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;animation:hx-spin 4s linear infinite}
.news-box:hover>.hx-foil,.vault-strip:hover>.hx-foil,.dc-cell:hover>.hx-foil,.ovid-frame:hover>.hx-foil{opacity:1}
.dc-cell>.hx-foil{opacity:.55}
@keyframes hx-spin{to{--hx-a:360deg}}
/* pointer-tracked sheen */
.hx-tilt{transition:transform .12s ease-out,box-shadow .3s}
.hx-tilt::before{z-index:7}
.hx-tilt .hx-sheen{position:absolute;inset:0;pointer-events:none;z-index:6;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--hx-mx) var(--hx-my),rgba(255,255,255,.16),rgba(30,242,230,.06) 40%,transparent 70%)}
.hx-tilt:hover .hx-sheen{opacity:1}

/* ── Holo scan on imagery ────────────────────────────────────────── */
.shot,.oshot-card img,.vstrip-thumb,.art-thumb,.ovid-frame{overflow:hidden}
.shot::before,.oshot-card::before{
  content:"";position:absolute;left:0;right:0;top:-30%;height:30%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(30,242,230,.28),transparent);
  mix-blend-mode:screen;opacity:0;transition:opacity .2s}
.shot:hover::before,.oshot-card:hover::before{opacity:1;animation:hx-scan 1.1s linear infinite}
@keyframes hx-scan{to{top:110%}}
.oshot-card{position:relative}

/* ── Nav: laser underline + brand halo ───────────────────────────── */
.nav a:not(.nav-pill){position:relative}
.nav a:not(.nav-pill)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:linear-gradient(90deg,var(--hx-cyan),var(--hx-mag));transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 10px var(--hx-cyan)}
.nav a:not(.nav-pill):hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.brand{position:relative}
.brand::after{content:"";position:absolute;inset:-8px -14px;z-index:-1;border-radius:999px;
  background:radial-gradient(60% 100% at 50% 50%,rgba(30,242,230,.18),transparent 70%);filter:blur(6px)}

/* ── Buttons: magnetic + energy ring ─────────────────────────────── */
.btn{transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,border-color .2s}
.btn-primary{box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 10px 34px rgba(255,47,160,.45),0 0 0 0 rgba(30,242,230,.5)}
.btn-primary:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 14px 40px rgba(255,47,160,.55),0 0 0 6px rgba(30,242,230,.14),0 0 40px rgba(30,242,230,.35)}
.btn-ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--hx-foil);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;animation:hx-spin 3s linear infinite}
.btn-ghost:hover::before{opacity:1}

/* ── Title: holographic fill ─────────────────────────────────────── */
.dash-title{
  background:linear-gradient(100deg,#fff 0%,#EBF0F7 30%,#1EF2E6 50%,#fff 70%,#EBF0F7 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hx-chroma 7s ease-in-out infinite,hx-holo 6s linear infinite;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 18px 40px rgba(0,0,0,.7))}
.dash-title .vi{background:linear-gradient(100deg,#FFB454,#FF2FA0 50%,#FFB454);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hx-holo 6s linear infinite reverse}
@keyframes hx-holo{to{background-position:220% 0}}

/* ── Countdown flip tick ─────────────────────────────────────────── */
.dc-num.hx-tick{animation:hx-tick .35s ease-out}
@keyframes hx-tick{0%{transform:translateY(-6px);filter:brightness(2)}100%{transform:none;filter:none}}

/* ── Scroll reveal ───────────────────────────────────────────────── */
.hx-reveal{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.hx-reveal.in{opacity:1;transform:none}

/* ── Motion & mobile budget ──────────────────────────────────────── */
@media(max-width:820px){
  .hx-aurora{filter:blur(40px);opacity:.4}
  .news-box,.vault-strip,.dc-cell,.ticker,.video-frame,.ovid-frame{-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
}
@media(prefers-reduced-motion:reduce){
  .hx-aurora,.hx-foil,.btn-ghost::before,.dash-title,.dash-title .vi,.shot:hover::before,.oshot-card:hover::before{animation:none!important}
  .hx-particles{display:none}
  .hx-reveal{opacity:1;transform:none;transition:none}
  .hx-tilt{transform:none!important}
}

  
/* ═══════════════════════════════════════════════════════════════════
   HYPR v3 — "Terminal Vice"
   Third layer. Dials the LCARS/Trek chrome down ~75%, replaces it with
   a computer-terminal language (hex rain, chamfered panels, decode text,
   circuit traces, reticle cursor, page wipes) and restyles the hero
   wordmark to sit stacked like the GTA VI title lock-up: small tracked
   GRAND THEFT AUTO over a huge sunset-gradient VI.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trek reduction ──────────────────────────────────────────────── */
.hx-frame{display:none!important}
.news-box-head::before,.vault-strip-head::before{display:none}
.news-box-head,.vault-strip-head{padding-left:16px;background:linear-gradient(90deg,rgba(30,242,230,.08),transparent 60%);color:var(--hx-cyan)}
.news-box-head .news-dot,.vault-strip-head .news-dot{display:none}
.news-box-head::after,.vault-strip-head::after{content:"_";margin-left:6px;animation:hx-caret 1s steps(1) infinite;color:var(--hx-cyan)}
.hx-hud .ticks{opacity:.18}
.hx-hud i{width:18px;height:18px;border-width:1.5px}
/* chamfered corners replace LCARS capsules */
.btn,.vault-all,.box-pill,.chip,.nav-pill,.tagline-pill{
  border-radius:2px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn-primary{clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.dc-cell{border-radius:2px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.dc-cell>.hx-foil,.dc-cell::after{display:none}
.dc-cell{border:1px solid rgba(30,242,230,.35);background-image:
  linear-gradient(var(--hx-glass),var(--hx-glass)),
  linear-gradient(135deg,rgba(30,242,230,.5),rgba(30,242,230,.05) 40%,rgba(255,47,160,.4))}
.news-box::before,.vault-strip::before,.ticker::before,.video-frame::before,.ovid-frame::before{
  inset:0;background:
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) top left/18px 2px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) top left/2px 18px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) bottom right/18px 2px no-repeat,
    linear-gradient(var(--hx-cyan),var(--hx-cyan)) bottom right/2px 18px no-repeat}
.hx-boot .box::before{display:none}
.hx-boot .box{clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);background:rgba(30,242,230,.03)}

/* ── Circuit traces + hex rain ───────────────────────────────────── */
.hx-circuit{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160' fill='none' stroke='%231EF2E6' stroke-width='1'><path d='M0 40h40v40h40V0M80 160v-40h40V80h40M0 120h20v40M120 0v40h40'/><circle cx='40' cy='80' r='2.5' fill='%231EF2E6'/><circle cx='120' cy='80' r='2.5' fill='%23FF2FA0'/><circle cx='20' cy='120' r='2' fill='%23FFB454'/></svg>");
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%,transparent 30%,#000 100%);mask-image:radial-gradient(70% 70% at 50% 40%,transparent 30%,#000 100%)}
.hx-rain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;mix-blend-mode:screen}

/* ── Data stream bar under the nav ───────────────────────────────── */
.hx-stream{position:fixed;left:0;right:0;top:var(--nav-h);height:18px;z-index:199;pointer-events:none;overflow:hidden;
  background:rgba(7,10,16,.7);border-bottom:1px solid rgba(30,242,230,.15);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;line-height:18px;color:rgba(30,242,230,.6);white-space:nowrap}
.hx-stream span{display:inline-block;padding-left:100%;animation:hx-stream 38s linear infinite}
.hx-stream b{color:var(--hx-mag);font-weight:400}.hx-stream i{color:var(--hx-amber);font-style:normal}
@keyframes hx-stream{to{transform:translateX(-100%)}}
body{padding-top:var(--nav-h)}
.hx-hud{top:calc(var(--nav-h) + 10px)}
@media(max-width:820px){.hx-stream{display:none}body{padding-top:var(--nav-h)}}

/* ── Reticle cursor + click pulse ───────────────────────────────── */
@media(hover:hover) and (pointer:fine){
  .hx-ret{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;z-index:9998;pointer-events:none;
    border:1px solid rgba(30,242,230,.7);border-radius:50%;transition:transform .12s,border-color .2s,width .2s,height .2s,margin .2s;
    box-shadow:0 0 12px rgba(30,242,230,.4)}
  .hx-ret::before,.hx-ret::after{content:"";position:absolute;background:rgba(30,242,230,.8)}
  .hx-ret::before{left:50%;top:-6px;bottom:-6px;width:1px;margin-left:-.5px}
  .hx-ret::after{top:50%;left:-6px;right:-6px;height:1px;margin-top:-.5px}
  .hx-ret.hot{width:48px;height:48px;margin:-24px 0 0 -24px;border-color:var(--hx-mag);box-shadow:0 0 18px rgba(255,47,160,.5)}
  .hx-ret .rd{position:absolute;left:44px;top:-2px;font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;color:var(--hx-cyan);white-space:nowrap;opacity:.8}
}
.hx-pulse{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;z-index:9997;pointer-events:none;border-radius:50%;
  border:2px solid var(--hx-mag);animation:hx-pulse .6s ease-out forwards}
@keyframes hx-pulse{to{transform:scale(9);opacity:0;border-width:.5px}}

/* ── Page wipe on navigation ────────────────────────────────────── */
.hx-wipe{position:fixed;inset:0;z-index:99999;pointer-events:none;background:
  linear-gradient(180deg,rgba(7,10,16,.98),rgba(7,10,16,.98)),
  repeating-linear-gradient(180deg,transparent 0 2px,rgba(30,242,230,.15) 2px 3px);
  clip-path:inset(0 100% 0 0);transition:clip-path .38s cubic-bezier(.7,0,.3,1)}
.hx-wipe.go{clip-path:inset(0 0 0 0)}

/* ── Decode / scramble text on load ─────────────────────────────── */
.hx-decode{font-variant-ligatures:none}
.hx-decode .g{color:var(--hx-cyan);opacity:.7}

/* ── Hero wordmark: stacked title lock-up ───────────────────────── */
.dash-title{display:flex;flex-direction:column;align-items:center;line-height:.85;gap:.02em;
  background:none;-webkit-text-fill-color:initial;color:var(--text);animation:none;filter:none;text-shadow:none}
.dash-title .gta{
  display:block;font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(18px,3.4vh,42px);letter-spacing:.22em;color:#fff;
  -webkit-text-stroke:1px rgba(0,0,0,.35);paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 18px rgba(255,255,255,.25),0 0 40px rgba(255,47,160,.25)}
.dash-title .vi{
  display:block;margin:0;font-family:var(--font-display);font-weight:900;font-style:italic;
  font-size:clamp(96px,26vh,290px);letter-spacing:-.04em;line-height:.78;transform:skewX(-6deg);
  background:linear-gradient(175deg,#FFE29A 0%,#FF9A3D 22%,#FF2FA0 55%,#8B4DFF 85%,#2E7BFF 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:0;padding:.06em .1em;text-shadow:none;animation:none}
.dash-title{filter:drop-shadow(0 0 2px rgba(255,255,255,.35)) drop-shadow(0 6px 0 rgba(90,10,60,.85)) drop-shadow(0 0 28px rgba(255,47,160,.55)) drop-shadow(0 0 60px rgba(139,77,255,.35));animation:hx-vi-pulse 5s ease-in-out infinite}
@keyframes hx-vi-pulse{0%,100%{filter:drop-shadow(0 0 2px rgba(255,255,255,.35)) drop-shadow(0 6px 0 rgba(90,10,60,.85)) drop-shadow(0 0 28px rgba(255,47,160,.55)) drop-shadow(0 0 60px rgba(139,77,255,.35))}
  50%{filter:drop-shadow(0 0 3px rgba(255,255,255,.8)) drop-shadow(0 6px 0 rgba(90,10,60,.85)) drop-shadow(0 0 40px rgba(255,138,61,.7)) drop-shadow(0 0 90px rgba(255,47,160,.5))}}
.dash-title.hx-glitch .vi{animation:hx-glitch .7s steps(2) 1}
.dash-hero{gap:clamp(6px,1.2vh,14px)}
.dash-eyebrow{color:var(--hx-cyan);text-shadow:0 0 12px rgba(30,242,230,.5)}
/* palm-light behind the VI */
.dash-hero::before{content:"";position:absolute;left:50%;top:38%;width:min(60vw,560px);height:min(60vw,560px);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(255,47,160,.28),rgba(255,138,61,.14) 35%,transparent 65%);filter:blur(30px);animation:hx-aurora 14s ease-in-out infinite alternate}
.dash-hero{position:relative}

/* ── Countdown = hex readout ─────────────────────────────────────── */
.dc-cell .hx-hex{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;color:rgba(30,242,230,.55);margin-top:2px}

/* ── Image glitch slices occasionally ───────────────────────────── */
.hx-slice{animation:hx-slice .5s steps(3) 1}
@keyframes hx-slice{0%{clip-path:inset(20% 0 60% 0);transform:translateX(-6px)}33%{clip-path:inset(60% 0 10% 0);transform:translateX(6px)}66%{clip-path:inset(5% 0 80% 0);transform:translateX(-3px)}100%{clip-path:none;transform:none}}

@media(max-width:820px){.hx-rain{opacity:.35}.hx-circuit{opacity:.1}.dash-title .vi{font-size:clamp(84px,22vh,180px)}}
@keyframes hx-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hx-rain,.hx-ret,.hx-pulse,.hx-wipe,.hx-stream span{display:none;animation:none}
  .dash-title .vi,.dash-hero::before,.news-box-head::after{animation:none}
}

  
/* ═══════════════════════════════════════════════════════════════════
   HYPR v4 — "Liquid Rice"
   Fourth layer. Glass on everything, liquid-glass refraction via SVG
   displacement in backdrop-filter, cursor-reactive borders on every
   panel, cross-document View Transitions, scroll-driven animations,
   oklch()/color-mix() tokens, a Ctrl+K command palette (Popover API),
   a live notification island, adaptive quality, Konami ULTRA mode.
   ═══════════════════════════════════════════════════════════════════ */
@property --hx-px{syntax:"<length>";inherits:true;initial-value:0px}
@property --hx-py{syntax:"<length>";inherits:true;initial-value:0px}

:root{
  --hx-cyan:oklch(88% .17 190); --hx-mag:oklch(66% .27 350); --hx-amber:oklch(82% .16 70);
  --hx-glass:color-mix(in oklab,oklch(20% .03 250) 42%,transparent);
  --hx-glass-2:color-mix(in oklab,oklch(24% .04 250) 55%,transparent);
  --hx-edge:color-mix(in oklab,var(--hx-cyan) 45%,transparent);
  --hx-radius:8px;
  scroll-behavior:smooth;
}
/* cross-document page transitions (Chromium 126+); replaces the JS wipe when supported */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hx-vt-out .32s cubic-bezier(.7,0,.3,1) both}
::view-transition-new(root){animation:hx-vt-in .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes hx-vt-out{to{opacity:0;transform:scale(1.02);filter:blur(6px)}}
@keyframes hx-vt-in{from{opacity:0;transform:scale(.985);filter:blur(10px) saturate(2)}}
@supports(view-transition-name:root){.hx-wipe{display:none}}

/* ── Global glass ────────────────────────────────────────────────── */
.nav,.tabbar,.hx-stream,.ticker,.news-box,.vault-strip,.dc-cell,.ovid-frame,.video-frame,.foot-block,
.btn-ghost,.box-pill,.chip,.nav-pill,.tagline-pill,footer .wrap,.section-alt .wrap,.lightbox .lb-btn,.card,.tile,.forum-card,.post{
  background-color:var(--hx-glass)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.8) contrast(1.05) brightness(1.06);
  backdrop-filter:blur(28px) saturate(1.8) contrast(1.05) brightness(1.06);
}
.nav{-webkit-backdrop-filter:blur(34px) saturate(2);backdrop-filter:blur(34px) saturate(2);
  background-color:color-mix(in oklab,oklch(12% .02 250) 62%,transparent)!important;
  border-bottom:1px solid var(--hx-edge)}
.tabbar{background-color:color-mix(in oklab,oklch(12% .02 250) 70%,transparent)!important;border-top:1px solid var(--hx-edge)}
/* Fresnel edge: brighter rim where the glass meets light */
.news-box,.vault-strip,.dc-cell,.ovid-frame,.video-frame,.ticker,.foot-block{
  border-radius:var(--hx-radius);
  box-shadow:
    inset 0 1px 0 color-mix(in oklab,white 28%,transparent),
    inset 0 0 0 1px color-mix(in oklab,var(--hx-cyan) 14%,transparent),
    inset 0 -20px 40px -30px color-mix(in oklab,var(--hx-mag) 40%,transparent),
    0 30px 80px -20px oklch(0% 0 0 / .8),
    0 0 0 1px oklch(0% 0 0 / .5)}

/* ── Cursor-reactive border on EVERY panel (one :root var, no per-element JS) ── */
.news-box,.vault-strip,.dc-cell,.ovid-frame,.video-frame,.ticker,.foot-block,.btn,.box-pill,.chip{position:relative}
.hx-ring{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:8;padding:1.5px;
  background:radial-gradient(360px circle at calc(var(--hx-px) - var(--hx-ox,0px)) calc(var(--hx-py) - var(--hx-oy,0px)),
    color-mix(in oklab,var(--hx-cyan) 85%,white),color-mix(in oklab,var(--hx-mag) 60%,transparent) 30%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.9;transition:opacity .3s}
.hx-ring::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(260px circle at calc(var(--hx-px) - var(--hx-ox,0px)) calc(var(--hx-py) - var(--hx-oy,0px)),color-mix(in oklab,white 10%,transparent),transparent 60%)}

/* ── Scroll-driven: progress bar + parallax hero + reveal ────────── */
.hx-progress{position:fixed;left:0;top:var(--nav-h);height:2px;width:100%;z-index:201;transform-origin:left;
  background:linear-gradient(90deg,var(--hx-cyan),var(--hx-mag),var(--hx-amber));box-shadow:0 0 12px var(--hx-cyan);
  transform:scaleX(0)}
@supports(animation-timeline:scroll()){
  .hx-progress{animation:hx-progress linear both;animation-timeline:scroll(root)}
  @keyframes hx-progress{to{transform:scaleX(1)}}
  @keyframes hx-parallax{to{transform:translateY(-40px) scale(.96);opacity:.35;filter:blur(2px)}}
  .vault-strip,.section{animation:hx-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  @keyframes hx-rise{from{opacity:.2;transform:translateY(40px) perspective(900px) rotateX(6deg)}}
}
@media(max-width:820px){.hx-progress{top:var(--nav-h)}}

/* ── Notification island ─────────────────────────────────────────── */
.hx-island{position:fixed;left:50%;bottom:22px;transform:translate(-50%,160%);z-index:300;
  display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;border-radius:999px;max-width:min(92vw,560px);
  background:color-mix(in oklab,oklch(10% .02 250) 78%,transparent);-webkit-backdrop-filter:blur(30px) saturate(2);backdrop-filter:blur(30px) saturate(2);
  border:1px solid var(--hx-edge);box-shadow:0 20px 60px oklch(0% 0 0/.6),inset 0 1px 0 color-mix(in oklab,white 25%,transparent);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--text);
  transition:transform .6s cubic-bezier(.2,1.2,.2,1)}
.hx-island.in{transform:translate(-50%,0)}
.hx-island .dot{width:8px;height:8px;border-radius:50%;background:var(--hx-mag);box-shadow:0 0 12px var(--hx-mag);animation:pulse 1.4s infinite}
.hx-island b{color:var(--hx-amber);font-weight:400}
.hx-island a{color:#07090F;background:var(--hx-cyan);text-decoration:none;padding:5px 12px;border-radius:999px;font-weight:600;white-space:nowrap}
.hx-island button{color:var(--muted);padding:4px 6px}
@media(max-width:820px){.hx-island{bottom:calc(var(--tab-h) + 12px);font-size:10.5px}}

/* ── Command palette (Popover API) ───────────────────────────────── */
.hx-cmd{inset:0;margin:auto;width:min(92vw,640px);border:1px solid var(--hx-edge);border-radius:14px;padding:0;
  background:color-mix(in oklab,oklch(9% .02 250) 80%,transparent);-webkit-backdrop-filter:blur(36px) saturate(2);backdrop-filter:blur(36px) saturate(2);
  color:var(--text);box-shadow:0 40px 120px oklch(0% 0 0/.8),inset 0 1px 0 color-mix(in oklab,white 25%,transparent);
  font-family:var(--font-body);opacity:0;transform:translateY(-10px) scale(.98);transition:opacity .2s,transform .2s,overlay .2s allow-discrete,display .2s allow-discrete}
.hx-cmd:popover-open{opacity:1;transform:none}
@starting-style{.hx-cmd:popover-open{opacity:0;transform:translateY(-10px) scale(.98)}}
.hx-cmd::backdrop{background:oklch(0% 0 0/.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hx-cmd input{width:100%;padding:16px 18px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--text);
  font:15px var(--font-mono);letter-spacing:.06em;outline:none}
.hx-cmd input::placeholder{color:var(--faint)}
.hx-cmd ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.hx-cmd li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--muted)}
.hx-cmd li[aria-selected="true"],.hx-cmd li:hover{background:color-mix(in oklab,var(--hx-cyan) 12%,transparent);color:var(--text)}
.hx-cmd li kbd{margin-left:auto;font:10px var(--font-mono);letter-spacing:.1em;color:var(--hx-cyan);border:1px solid var(--line);padding:2px 6px;border-radius:4px}
.hx-cmd li .k{font:10px var(--font-mono);letter-spacing:.14em;color:var(--hx-amber);min-width:52px}
.hx-cmd .hint{padding:8px 14px;border-top:1px solid var(--line);font:10px var(--font-mono);letter-spacing:.14em;color:var(--faint)}
.hx-kbd{position:fixed;left:16px;bottom:34px;z-index:200;font:10px var(--font-mono);letter-spacing:.14em;color:var(--faint);
  border:1px solid var(--line);padding:5px 9px;border-radius:6px;background:var(--hx-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);cursor:pointer}
.hx-kbd:hover{color:var(--hx-cyan);border-color:var(--hx-edge)}
@media(max-width:820px){.hx-kbd{display:none}}

/* ── Micro-polish ───────────────────────────────────────────────── */
h1,h2,h3,.sec-title,.dash-tagline{text-wrap:balance}
p{text-wrap:pretty}
.news-row:has(img):hover img,.art-row:hover img{transform:scale(1.06)}
.news-row img,.art-row img{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
img{image-rendering:auto}
.nav a,.btn,.box-pill,.chip{transition-timing-function:cubic-bezier(.2,.8,.2,1)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:oklch(8% .02 250)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--hx-cyan),var(--hx-mag));border-radius:99px;border:3px solid oklch(8% .02 250)}
html{scrollbar-color:var(--hx-cyan) oklch(8% .02 250)}
.dash-title .vi{background-image:linear-gradient(175deg,oklch(94% .1 85) 0%,oklch(76% .19 55) 22%,oklch(66% .27 350) 55%,oklch(58% .25 300) 85%,oklch(62% .2 255) 100%)}

/* ── ULTRA mode (Konami) ────────────────────────────────────────── */
html.hx-ultra .hx-rain{opacity:1;mix-blend-mode:normal}
html.hx-ultra .hx-aurora{opacity:.9;filter:blur(50px) saturate(2)}
html.hx-ultra .hx-grid{opacity:1;animation-duration:1.2s}
html.hx-ultra body::after{opacity:1}
html.hx-ultra .dash-title{animation:hx-vi-pulse 1.2s ease-in-out infinite,hx-glitch 2s steps(2) infinite}
html.hx-ultra .news-box,html.hx-ultra .vault-strip{animation:hx-hue 4s linear infinite}
@keyframes hx-hue{to{filter:hue-rotate(360deg)}}

/* ── Adaptive quality (set by JS when FPS drops) ────────────────── */
html.hx-lite .hx-rain,html.hx-lite .hx-particles,html.hx-lite .hx-aurora,html.hx-lite .hx-sweep{display:none}
html.hx-lite .news-box,html.hx-lite .vault-strip,html.hx-lite .ovid-frame{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
html.hx-lite .hx-ring{display:none}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .dash-hero,.vault-strip,.section{animation:none!important}
  .hx-island{transition:none}
}

  
/* ═══════════════════════════════════════════════════════════════════
   HYPR v5 — "Shader City"
   Fifth layer. Raw-WebGL synthwave shader skyline behind everything,
   neofetch-style system monitor, a real command terminal (` key),
   synthesized UI audio (opt-in), idle screensaver, spring easings,
   variable-font breathing, gyro parallax on mobile.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --hx-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1.004 83.8%,1);
  --hx-snap:linear(0,.4 7%,.8 15%,1.05 25%,.98 35%,1);
}
.hx-gl{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
html.hx-lite .hx-gl{display:none}
.hx-aurora{opacity:.28}  /* shader carries the atmosphere now */

/* spring easings on interactive things */
.btn,.box-pill,.chip,.vault-all,.nav-pill,.news-row,.vstrip-card,.oshot-card,.hx-tilt{transition-timing-function:var(--hx-spring)}
.btn:active,.box-pill:active,.chip:active{transform:scale(.94);transition-duration:.08s}

/* variable-font breathing on nav + headings (Big Shoulders wght axis) */
.nav a:not(.nav-pill){font-variation-settings:"wght" 500;transition:font-variation-settings .35s var(--hx-spring),color .2s}
.nav a:not(.nav-pill):hover{font-variation-settings:"wght" 800}
.sec-title{transition:letter-spacing .5s var(--hx-spring)}
.section:hover .sec-title{letter-spacing:.06em}

/* ── System monitor (neofetch) ────────────────────────────────────── */
.hx-sys{position:fixed;left:16px;bottom:64px;z-index:200;width:236px;padding:10px 12px;border-radius:8px;
  background:var(--hx-glass);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid var(--hx-edge);box-shadow:0 20px 50px oklch(0% 0 0/.6),inset 0 1px 0 color-mix(in oklab,white 22%,transparent);
  font:10px/1.7 var(--font-mono);letter-spacing:.08em;color:var(--muted);transform:translateX(calc(-100% - 24px));transition:transform .6s var(--hx-spring)}
.hx-sys.in{transform:none}
.hx-sys .h{color:var(--hx-cyan);letter-spacing:.2em;margin-bottom:4px;display:flex;justify-content:space-between}
.hx-sys .h button{color:var(--faint);font:inherit;letter-spacing:0}
.hx-sys .h button:hover{color:var(--hx-mag)}
.hx-sys .r{display:flex;gap:8px}.hx-sys .r span:first-child{color:var(--hx-amber);min-width:52px}
.hx-sys .bar{height:4px;background:oklch(0% 0 0/.5);border-radius:2px;overflow:hidden;margin:2px 0 4px}
.hx-sys .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--hx-cyan),var(--hx-mag));transition:width .5s var(--hx-spring)}
.hx-sys .sw{display:flex;gap:4px;margin-top:6px}.hx-sys .sw i{width:14px;height:8px;border-radius:2px}
@media(max-width:1100px){.hx-sys{display:none}}

/* ── Terminal drawer ─────────────────────────────────────────────── */
.hx-term{position:fixed;left:0;right:0;top:0;height:min(46vh,420px);z-index:400;transform:translateY(-102%);
  background:color-mix(in oklab,oklch(6% .02 250) 88%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  border-bottom:1px solid var(--hx-edge);box-shadow:0 30px 80px oklch(0% 0 0/.7);
  font:13px/1.5 var(--font-mono);color:var(--text);display:flex;flex-direction:column;transition:transform .45s var(--hx-spring)}
.hx-term.open{transform:none}
.hx-term .out{flex:1;overflow:auto;padding:14px 18px 6px;white-space:pre-wrap;word-break:break-word}
.hx-term .out .c{color:var(--hx-cyan)}.hx-term .out .m{color:var(--hx-mag)}.hx-term .out .a{color:var(--hx-amber)}.hx-term .out .d{color:var(--faint)}
.hx-term .in{display:flex;gap:8px;padding:8px 18px 12px;border-top:1px solid var(--line)}
.hx-term .in b{color:var(--hx-mag);font-weight:400}
.hx-term input{flex:1;background:none;border:0;outline:0;color:var(--text);font:inherit;caret-color:var(--hx-cyan)}
.hx-term::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 2px,oklch(0% 0 0/.12) 2px 3px)}

/* ── Idle screensaver ────────────────────────────────────────────── */
.hx-saver{position:fixed;inset:0;z-index:9990;background:oklch(4% .01 250);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  opacity:0;visibility:hidden;transition:opacity 1.4s,visibility 1.4s;cursor:none}
.hx-saver.on{opacity:1;visibility:visible}
.hx-saver .t{font:900 clamp(60px,16vw,220px)/1 var(--font-display);letter-spacing:-.02em;
  background:linear-gradient(175deg,oklch(94% .1 85),oklch(76% .19 55) 25%,oklch(66% .27 350) 60%,oklch(58% .25 300));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hx-saver-drift 18s ease-in-out infinite alternate}
.hx-saver .s{font:12px var(--font-mono);letter-spacing:.3em;color:var(--hx-cyan);opacity:.8}
.hx-saver .d{font:11px var(--font-mono);letter-spacing:.2em;color:var(--faint)}
@keyframes hx-saver-drift{from{transform:translate(-6vw,-4vh)}to{transform:translate(6vw,4vh)}}

/* ── Audio toggle chip ───────────────────────────────────────────── */
.hx-sfx{position:fixed;right:16px;bottom:64px;z-index:200;font:10px var(--font-mono);letter-spacing:.14em;color:var(--faint);
  border:1px solid var(--line);padding:5px 9px;border-radius:6px;background:var(--hx-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);cursor:pointer}
.hx-sfx.on{color:var(--hx-cyan);border-color:var(--hx-edge);box-shadow:0 0 12px color-mix(in oklab,var(--hx-cyan) 40%,transparent)}
@media(max-width:820px){.hx-sfx{bottom:calc(var(--tab-h) + 12px)}}

/* gyro parallax target */
.dash-main{transition:transform .2s ease-out;transform-style:preserve-3d}


/* let the shader skyline show through the homepage hero backdrop */
.dash-bg .hero-sky,.dash-bg .hero-horizon{background:transparent!important}
.dash-bg .hero-sun{display:none}
.dash-bg .hero-shots{opacity:.35;mix-blend-mode:screen}
.dash-bg .hero-shots-scrim{background:linear-gradient(180deg,rgba(7,10,16,.15),rgba(7,10,16,.55) 70%,rgba(7,10,16,.85))}
.hx-grid{opacity:.25}
@media(prefers-reduced-motion:reduce){.hx-gl,.hx-saver{display:none}.hx-sys,.hx-term{transition:none}}

  
/* ── Enhanced nav wordmark ───────────────────────────────────────── */
.brand-x{position:relative;display:flex;align-items:center;gap:8px;padding:4px 14px 4px 6px;margin-left:-6px;border-radius:8px;overflow:hidden;flex-shrink:0;
  font-family:var(--font-display);font-weight:900;font-size:23px;letter-spacing:.04em;line-height:1;text-decoration:none;
  border:1px solid transparent;transition:border-color .3s,box-shadow .3s,transform .4s var(--hx-spring,ease)}
.brand-x::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:linear-gradient(100deg,color-mix(in oklab,var(--hx-cyan) 10%,transparent),color-mix(in oklab,var(--hx-mag) 10%,transparent))}
.brand-x:hover{border-color:var(--hx-edge);box-shadow:0 0 24px color-mix(in oklab,var(--hx-mag) 30%,transparent),inset 0 1px 0 rgba(255,255,255,.12);transform:translateY(-1px)}
.brand-x:hover::before{opacity:1}
.bx-badge{width:38px;height:38px;flex-shrink:0;display:grid;place-items:center;filter:drop-shadow(0 0 8px color-mix(in oklab,var(--hx-mag) 60%,transparent))}
.bx-badge svg{width:100%;height:100%;overflow:visible}
.bx-hex{fill:color-mix(in oklab,oklch(12% .03 250) 85%,transparent);stroke:url(#bx-grad);stroke-width:1.5;
  stroke-dasharray:110;stroke-dashoffset:0;animation:bx-trace 6s linear infinite}
.bx-star{fill:url(#bx-grad);animation:bx-beat 2.4s ease-in-out infinite;transform-origin:20px 20px}
@keyframes bx-trace{to{stroke-dashoffset:-220}}
@keyframes bx-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.14) rotate(6deg)}}
.bx-text{display:flex;flex-direction:column;gap:3px}
.bx-top{display:flex;align-items:center;gap:2px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7);-webkit-font-smoothing:antialiased}
.bx-top .w2{color:var(--hx-cyan);letter-spacing:.06em;padding-right:3px}
.bx-stars{display:inline-flex;gap:2px;margin:0 7px;transform:translateY(-1px)}
.bx-stars i{width:11px;height:11px;display:block;opacity:0;transform:scale(.4);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:linear-gradient(180deg,#FFF3B0,#FFB454 55%,#FF8A3D);filter:drop-shadow(0 0 5px rgba(255,180,84,.9));
  animation:bx-ignite .45s var(--hx-snap,ease-out) forwards,star-pulse 2.6s ease-in-out infinite}
.bx-stars i:nth-child(1){animation-delay:.2s,.7s}.bx-stars i:nth-child(2){animation-delay:.32s,.82s}.bx-stars i:nth-child(3){animation-delay:.44s,.94s}
.bx-stars i:nth-child(4){animation-delay:.56s,1.06s}.bx-stars i:nth-child(5){animation-delay:.68s,1.18s}.bx-stars i:nth-child(6){animation-delay:.8s,1.3s}
@keyframes bx-ignite{to{opacity:1;transform:scale(1)}}
.brand-x:hover .bx-stars i{opacity:1;transform:none;animation:bx-siren .5s steps(1) infinite}
.brand-x:hover .bx-stars i:nth-child(even){animation-delay:.25s}
@keyframes bx-siren{0%,49%{background:linear-gradient(180deg,#FFD9D9,#FF3B3B);filter:drop-shadow(0 0 6px #FF3B3B)}50%,100%{background:linear-gradient(180deg,#DCE8FF,#3C78FF);filter:drop-shadow(0 0 6px #3C78FF)}}
.bx-sub{font:8.5px var(--font-mono);letter-spacing:.26em;color:var(--faint);opacity:0;transform:translateY(-4px);animation:bx-sub .5s ease-out 1.1s forwards}
.bx-sub b{color:var(--hx-cyan);font-weight:400}.bx-sub em{color:#FF3B3B;font-style:normal;text-shadow:0 0 6px rgba(255,59,59,.7)}
@keyframes bx-sub{to{opacity:1;transform:none}}
.bx-sheen{position:absolute;top:-40%;bottom:-40%;left:-40%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);opacity:0}
.brand-x:hover .bx-sheen{animation:bx-sheen .8s ease-out 1}
@keyframes bx-sheen{0%{left:-40%;opacity:1}100%{left:120%;opacity:0}}
@media(max-width:820px){.brand-x{font-size:22px;gap:8px;padding:4px 8px 4px 4px}.bx-badge{width:30px;height:30px}.bx-sub{display:none}.bx-stars i{width:9px;height:9px}}
@media(prefers-reduced-motion:reduce){.bx-hex,.bx-star,.bx-top,.bx-stars i,.bx-sub,.bx-sheen{animation:none!important}.bx-stars i{opacity:1;transform:none}.bx-sub{opacity:1;transform:none}}
  
/* ── Cinematic nav pills (original vector art, inlined) ─────────── */
.nav-pill{position:relative;overflow:hidden;padding:7px 16px 7px 14px;border-radius:6px;isolation:isolate;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:#0B0614 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2t5IiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMUIwQjNBIi8+PHN0b3Agb2Zmc2V0PSIuNTUiIHN0b3AtY29sb3I9IiM3QTFCNkIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjdBM0QiLz48L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzdW4iIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGRkUyOUEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjJGQTAiLz48L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzZWEiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGRjdBM0QiIHN0b3Atb3BhY2l0eT0iLjkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxRUYyRTYiIHN0b3Atb3BhY2l0eT0iLjU1Ii8+PC9saW5lYXJHcmFkaWVudD4KICAgIDxtYXNrIGlkPSJzdW5tIj48cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjYwIiBmaWxsPSIjZmZmIi8+PGcgZmlsbD0iIzAwMCI+PHJlY3QgeD0iMTIwIiB5PSIzMCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxMjAiIHk9IjM1IiB3aWR0aD0iNjAiIGhlaWdodD0iMi41Ii8+PHJlY3QgeD0iMTIwIiB5PSI0MSIgd2lkdGg9IjYwIiBoZWlnaHQ9IjMiLz48cmVjdCB4PSIxMjAiIHk9IjQ4IiB3aWR0aD0iNjAiIGhlaWdodD0iMy41Ii8+PC9nPjwvbWFzaz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIyMCIgaGVpZ2h0PSI2MCIgZmlsbD0idXJsKCNza3kpIi8+CiAgPGNpcmNsZSBjeD0iMTUwIiBjeT0iMzgiIHI9IjE5IiBmaWxsPSJ1cmwoI3N1bikiIG1hc2s9InVybCgjc3VubSkiLz4KICA8cmVjdCB5PSI0NiIgd2lkdGg9IjIyMCIgaGVpZ2h0PSIxNCIgZmlsbD0idXJsKCNzZWEpIi8+CiAgPGcgZmlsbD0iIzBCMDYxNCI+CiAgICA8cmVjdCB4PSI4IiB5PSIzMCIgd2lkdGg9IjciIGhlaWdodD0iMzAiLz48cmVjdCB4PSIxNyIgeT0iMjIiIHdpZHRoPSI5IiBoZWlnaHQ9IjM4Ii8+PHJlY3QgeD0iMjgiIHk9IjM0IiB3aWR0aD0iNiIgaGVpZ2h0PSIyNiIvPjxyZWN0IHg9IjM2IiB5PSIxNCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjQ2Ii8+PHJlY3QgeD0iNDgiIHk9IjI2IiB3aWR0aD0iOCIgaGVpZ2h0PSIzNCIvPjxyZWN0IHg9IjU4IiB5PSIxOSIgd2lkdGg9IjciIGhlaWdodD0iNDEiLz48cmVjdCB4PSI2NyIgeT0iMzEiIHdpZHRoPSIxMSIgaGVpZ2h0PSIyOSIvPjxyZWN0IHg9IjgwIiB5PSIxMCIgd2lkdGg9IjgiIGhlaWdodD0iNTAiLz48cmVjdCB4PSI5MCIgeT0iMjgiIHdpZHRoPSI5IiBoZWlnaHQ9IjMyIi8+PHJlY3QgeD0iMTAxIiB5PSIyMSIgd2lkdGg9IjciIGhlaWdodD0iMzkiLz48cmVjdCB4PSIxMTAiIHk9IjM2IiB3aWR0aD0iMTAiIGhlaWdodD0iMjQiLz48cmVjdCB4PSIxMjIiIHk9IjI3IiB3aWR0aD0iNiIgaGVpZ2h0PSIzMyIvPjxyZWN0IHg9IjE4MCIgeT0iMzMiIHdpZHRoPSI4IiBoZWlnaHQ9IjI3Ii8+PHJlY3QgeD0iMTkwIiB5PSIyNCIgd2lkdGg9IjkiIGhlaWdodD0iMzYiLz48cmVjdCB4PSIyMDEiIHk9IjMwIiB3aWR0aD0iNyIgaGVpZ2h0PSIzMCIvPjxyZWN0IHg9IjIxMCIgeT0iMzgiIHdpZHRoPSIxMCIgaGVpZ2h0PSIyMiIvPgogIDwvZz4KICA8ZyBmaWxsPSIjMUVGMkU2IiBvcGFjaXR5PSIuODUiPjxyZWN0IHg9IjM4IiB5PSIxOCIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNDIiIHk9IjI0IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI4MiIgeT0iMTQiIHdpZHRoPSIxLjUiIGhlaWdodD0iMiIvPjxyZWN0IHg9Ijg0IiB5PSIyMiIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTkiIHk9IjI3IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjIiLz48cmVjdCB4PSI2MCIgeT0iMjQiIHdpZHRoPSIxLjUiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjE5MiIgeT0iMjgiIHdpZHRoPSIxLjUiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjEwMyIgeT0iMjYiIHdpZHRoPSIxLjUiIGhlaWdodD0iMiIvPjwvZz4KICA8ZyBmaWxsPSIjRkZCNDU0IiBvcGFjaXR5PSIuOCI+PHJlY3QgeD0iNDAiIHk9IjMwIiB3aWR0aD0iMS41IiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIyMSIgeT0iMzUiIHdpZHRoPSIxLjUiIGhlaWdodD0iMiIvPjxyZWN0IHg9Ijg2IiB5PSIzNCIgd2lkdGg9IjEuNSIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iNjIiIHk9IjM2IiB3aWR0aD0iMS41IiBoZWlnaHQ9IjIiLz48cmVjdCB4PSIxOTUiIHk9IjQwIiB3aWR0aD0iMS41IiBoZWlnaHQ9IjIiLz48L2c+CiAgPGcgc3Ryb2tlPSIjMEIwNjE0IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE2OCA2MFYzMiIvPjxwYXRoIGQ9Ik0xNjggMzNjLTYtNC0xMi0zLTE1IDFNMTY4IDMzYzYtNCAxMi0zIDE1IDFNMTY4IDMyYy0zLTYtOS04LTEzLTZNMTY4IDMyYzMtNiA5LTggMTMtNk0xNjggMzJjLTEtNiAyLTExIDYtMTJNMTY4IDMyYzEtNi0yLTExLTYtMTIiLz48L2c+CiAgPHJlY3Qgd2lkdGg9IjIyMCIgaGVpZ2h0PSI2MCIgZmlsbD0idXJsKCNza3kpIiBvcGFjaXR5PSIwIi8+Cjwvc3ZnPgo=") center/cover no-repeat!important;
  box-shadow:inset 0 0 0 1px rgba(30,242,230,.35),inset 0 1px 0 rgba(255,255,255,.18);color:#fff;
  text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;min-width:150px;
  transition:transform .35s var(--hx-spring,ease),box-shadow .25s,background-position .8s ease}
.nav-pill.rdr{background:#3A0C0C url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjAgNjAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIHNsaWNlIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icnNreSIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzNBMEMwQyIvPjxzdG9wIG9mZnNldD0iLjUiIHN0b3AtY29sb3I9IiNCODMyMUUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGMEEyNEEiLz48L2xpbmVhckdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJyc3VuIiBjeD0iLjUiIGN5PSIuNSIgcj0iLjUiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI0ZGRjFDOSIvPjxzdG9wIG9mZnNldD0iLjYiIHN0b3AtY29sb3I9IiNGRkMwNEEiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjdBMkEiIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+CiAgICA8ZmlsdGVyIGlkPSJncmFpbiI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9Ii45IiBudW1PY3RhdmVzPSIyIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAuMjUgMCIvPjwvZmlsdGVyPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjYwIiBmaWxsPSJ1cmwoI3Jza3kpIi8+CiAgPGNpcmNsZSBjeD0iNzIiIGN5PSIzMCIgcj0iMjQiIGZpbGw9InVybCgjcnN1bikiLz4KICA8Y2lyY2xlIGN4PSI3MiIgY3k9IjMwIiByPSIxMiIgZmlsbD0iI0ZGRTM5QSIvPgogIDxwYXRoIGQ9Ik0wIDQwbDE4LTkgMTIgNiAxNi0xNCAxNCA5IDEyLTYgMjAgMTIgMTQtMTAgMTYgOCAxMi0xNCAxOCAxMiAxNC04IDIwIDkgMTQtNyAyMCAxMFY2MEgweiIgZmlsbD0iIzNBMTQwOCIvPgogIDxwYXRoIGQ9Ik0wIDQ3bDIyLTYgMTQgNSAxOC05IDE2IDcgMjQtNiAxNiA2IDIyLTggMTggNyAyMC01IDIyIDcgMjgtNlY2MEgweiIgZmlsbD0iIzFFMEEwNiIvPgogIDxnIGZpbGw9IiMwRTA1MDMiPjxwYXRoIGQ9Ik0xODYgNjBWMzhoM3YtOGgydjhoM3YyMnoiLz48cGF0aCBkPSJNMTgwIDQ2aDN2MTRoLTN6TTE5NCA0NmgzdjE0aC0zeiIvPjxwYXRoIGQ9Ik0xODYgNjBWMzAiLz48L2c+CiAgPGcgc3Ryb2tlPSIjMEUwNTAzIiBzdHJva2Utd2lkdGg9IjEuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBmaWxsPSJub25lIj48cGF0aCBkPSJNNDAgNjBWNDZNNDAgNDdjLTQgMC02IDQtNCA3TTQwIDQ5YzQtMSA2IDMgNCA3Ii8+PHBhdGggZD0iTTExOCA2MFY1ME0xMTggNTFjLTMgMC00IDMtMyA1Ii8+PC9nPgogIDxnIGZpbGw9IiNGRkUzOUEiPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjEwIiByPSIuNyIvPjxjaXJjbGUgY3g9IjMwIiBjeT0iOCIgcj0iLjYiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxNCIgcj0iLjciLz48Y2lyY2xlIGN4PSIxMTAiIGN5PSI2IiByPSIuNSIvPjxjaXJjbGUgY3g9IjE3MCIgY3k9IjE4IiByPSIuNSIvPjwvZz4KICA8cmVjdCB3aWR0aD0iMjIwIiBoZWlnaHQ9IjYwIiBmaWx0ZXI9InVybCgjZ3JhaW4pIiBvcGFjaXR5PSIuNiIvPgo8L3N2Zz4K") center/cover no-repeat!important;
  box-shadow:inset 0 0 0 1px rgba(255,180,84,.45),inset 0 1px 0 rgba(255,255,255,.18);color:#FFF3DC}
.nav-pill::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55)),linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.05) 70%);transition:opacity .3s}
.nav-pill::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-40%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);opacity:0}
.nav-pill:hover{transform:translateY(-2px) scale(1.03);background-position:60% center!important;
  box-shadow:inset 0 0 0 1px rgba(30,242,230,.8),0 10px 26px rgba(255,47,160,.45),0 0 30px rgba(30,242,230,.25);color:#fff}
.nav-pill.rdr:hover{box-shadow:inset 0 0 0 1px rgba(255,180,84,.9),0 10px 26px rgba(184,50,30,.55),0 0 30px rgba(255,180,84,.3);color:#FFF3DC}
.nav-pill:hover::before{opacity:.6}
.nav-pill:hover::after{animation:bx-sheen .7s ease-out 1}
.nav-pill .np-dot{width:8px;height:8px;background:#1EF2E6!important;box-shadow:0 0 10px #1EF2E6,0 0 2px #fff!important;animation:pulse 1.6s infinite}
.nav-pill.rdr .np-dot{background:#FFB454!important;box-shadow:0 0 10px #FFB454,0 0 2px #fff!important}
.nav-pill .np-sub,.nav-pill.rdr .np-sub,.nav-pill:hover .np-sub,.nav-pill.rdr:hover .np-sub{color:rgba(255,255,255,.92);font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 0 #000,1px 0 0 #000,-1px 0 0 #000}
.nav-pill[aria-current="page"]{box-shadow:inset 0 0 0 2px #1EF2E6,0 0 18px rgba(30,242,230,.5)!important}
.nav-pill.rdr[aria-current="page"]{box-shadow:inset 0 0 0 2px #FFB454,0 0 18px rgba(255,180,84,.5)!important}
.nav-pill.rdr:hover .np-dot,.nav-pill:hover .np-dot{background:#fff!important}
@media(max-width:1180px){.nav-pill{min-width:0;padding:7px 12px}}
  
/* ── Enhanced nav links ─────────────────────────────────────────── */
.nl-x{position:relative;gap:2px;padding:3px;border-radius:8px;background:color-mix(in oklab,oklch(14% .03 250) 88%,transparent);
  transform:translateZ(0);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.08)}
.nl-x a{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:5px;white-space:nowrap;
  font-family:var(--font-display);font-weight:800;font-size:14.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.9);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;
  background:none;position:relative;z-index:1;transition:color .2s,transform .3s var(--hx-spring,ease);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.nl-x a::after{display:none}
.nl-x a svg{width:16px;height:16px;flex-shrink:0;opacity:.95;stroke-width:2;transition:opacity .2s,transform .3s var(--hx-spring,ease),filter .2s}
.nl-x a:hover{color:#07090F;background:none;transform:none;text-shadow:none}
.nl-x a:hover svg{opacity:1;transform:scale(1.15) rotate(-6deg);filter:none}
.nl-x a:hover .soon{color:#07090F;border-color:rgba(0,0,0,.4)}
.nl-x:hover a[aria-current="page"]:not(:hover){color:var(--text)}
.nl-x:hover a[aria-current="page"]:not(:hover) .soon{color:var(--hx-mag);border-color:color-mix(in oklab,var(--hx-mag) 50%,transparent)}
.nl-x.glow-on a[aria-current="page"]{color:#07090F;background:none;box-shadow:none;text-shadow:none}
.nl-x a[aria-current="page"] svg{opacity:1;filter:none}
.nl-x a[aria-current="page"] .soon{color:#07090F;border-color:rgba(0,0,0,.4)}
/* sliding glow follows the active/hovered link */
.nl-glow{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;z-index:0;border-radius:5px;pointer-events:none;will-change:left,width;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  background:linear-gradient(100deg,var(--hx-amber),var(--hx-mag) 55%,var(--hx-cyan));
  box-shadow:0 0 18px color-mix(in oklab,var(--hx-mag) 55%,transparent),0 0 30px color-mix(in oklab,var(--hx-cyan) 25%,transparent);
  transition:left .45s var(--hx-spring,ease),width .45s var(--hx-spring,ease),opacity .2s;opacity:0}
.nl-glow.on{opacity:1}
.nl-x a .soon{font-size:8px;letter-spacing:.14em;color:var(--hx-mag);vertical-align:baseline;margin-left:0;
  border:1px solid color-mix(in oklab,var(--hx-mag) 50%,transparent);padding:1px 5px;border-radius:99px;line-height:1.3}
@media(max-width:1500px){.nl-x a{padding:8px 8px;gap:4px;font-size:13.5px;letter-spacing:.06em}.nl-x a .soon{display:none}.nav-pill{min-width:0;padding:7px 11px}}
@media(max-width:1300px){.nl-x a .nl-t{display:none}.nl-x a{padding:8px 10px}.nl-x a svg{width:17px;height:17px}}
@media(prefers-reduced-motion:reduce){.nl-glow{transition:none}}
  
/* ── State-of-the-art footer ─────────────────────────────────────── */
.ft{position:relative;margin-top:clamp(40px,7vw,96px);padding:0 0 max(28px,env(safe-area-inset-bottom));border-top:0;
  background:linear-gradient(180deg,transparent,color-mix(in oklab,oklch(6% .02 250) 70%,transparent) 12%,oklch(4% .015 250));isolation:isolate}
.ft-wave{height:40px;overflow:hidden;opacity:.9}
.ft-wave svg{width:100%;height:100%;display:block}
.ft-wave-p{fill:none;stroke:var(--hx-cyan);stroke-width:1.2;stroke-dasharray:6 8;animation:ft-dash 6s linear infinite;filter:drop-shadow(0 0 6px var(--hx-cyan))}
.ft-wave-p2{stroke:var(--hx-mag);animation-direction:reverse;filter:drop-shadow(0 0 6px var(--hx-mag))}
@keyframes ft-dash{to{stroke-dashoffset:-140}}
.ft-marquee{overflow:hidden;border-top:1px solid var(--hx-edge);border-bottom:1px solid var(--hx-edge);
  background:var(--hx-glass);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ft-marquee-track{display:flex;width:max-content;animation:ft-marquee 40s linear infinite}
.ft-marquee-track span{padding:10px 0;font-family:var(--font-display);font-weight:900;font-size:clamp(18px,2.6vw,30px);letter-spacing:.14em;color:transparent;
  -webkit-text-stroke:1px color-mix(in oklab,var(--text) 55%,transparent);white-space:nowrap}
.ft-marquee-track i{font-style:normal;-webkit-text-stroke:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em}
.ft-marquee:hover .ft-marquee-track{animation-play-state:paused}
@keyframes ft-marquee{to{transform:translateX(-50%)}}
.ft-wrap{padding-top:clamp(28px,4vw,52px)}
.ft-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:clamp(22px,3vw,48px);align-items:start}
@media(max-width:980px){.ft-grid{grid-template-columns:1fr 1fr}.ft-brand-col{grid-column:1/-1}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr}}
.ft-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--font-display);font-weight:900;font-size:34px;letter-spacing:.05em;color:var(--text);line-height:1}
.ft-brand .ft-b2{color:var(--muted)}
.ft-stars{display:inline-flex;gap:2px}
.ft-stars i{width:14px;height:14px;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:var(--grad);
  animation:ft-star 2.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,47,160,.6))}
.ft-stars i:nth-child(2){animation-delay:.12s}.ft-stars i:nth-child(3){animation-delay:.24s}.ft-stars i:nth-child(4){animation-delay:.36s}.ft-stars i:nth-child(5){animation-delay:.48s}.ft-stars i:nth-child(6){animation-delay:.6s}
@keyframes ft-star{0%,100%{transform:scale(1)}50%{transform:scale(1.25) rotate(8deg)}}
.ft-tag{margin:12px 0 18px;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:36ch;text-wrap:pretty}
.ft-status{display:flex;flex-direction:column;gap:6px;font:11px var(--font-mono);letter-spacing:.14em;color:var(--faint)}
.ft-st{display:flex;align-items:center;gap:10px}.ft-st b{color:var(--text);font-weight:400;margin-left:auto;font-variant-numeric:tabular-nums}
.ft-led{width:7px;height:7px;border-radius:50%;background:var(--hx-cyan);box-shadow:0 0 8px var(--hx-cyan);animation:pulse 2s infinite}
.ft-led.amber{background:var(--hx-amber);box-shadow:0 0 8px var(--hx-amber)}.ft-led.mag{background:var(--hx-mag);box-shadow:0 0 8px var(--hx-mag)}
.ft-col h4{font:11px var(--font-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--hx-cyan);margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ft-col a{display:flex;align-items:center;gap:10px;padding:7px 0;color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s,transform .3s var(--hx-spring)}
.ft-col a:hover{color:var(--text);transform:translateX(6px)}
.ft-col a .k{font:10px var(--font-mono);letter-spacing:.12em;color:var(--hx-amber);opacity:.8}
.ft-col a .x{margin-left:auto;color:var(--hx-cyan);opacity:.6;font-size:12px}
.ft-col a em{font:9px var(--font-mono);letter-spacing:.14em;color:var(--hx-mag);font-style:normal;border:1px solid color-mix(in oklab,var(--hx-mag) 40%,transparent);padding:1px 6px;border-radius:99px}
.ft-console{display:flex;flex-direction:column;gap:6px}
.ft-cmd{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid var(--line);background:var(--hx-glass);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--muted);font-size:13px;text-align:left;transition:border-color .2s,color .2s,transform .3s var(--hx-spring)}
.ft-cmd:hover{border-color:var(--hx-edge);color:var(--text);transform:translateX(4px)}
.ft-cmd kbd{font:10px var(--font-mono);letter-spacing:.08em;color:var(--hx-cyan);border:1px solid var(--hx-edge);padding:2px 6px;border-radius:4px;min-width:20px;text-align:center}
.ft-cmd span{margin-left:auto}
.ft .foot-top-btn{font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;background:var(--hx-glass);box-shadow:none}
.ft-legal{margin-top:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:8px;background:var(--hx-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow:hidden}
.ft-legal summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  font:11px var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);transition:color .2s}
.ft-legal summary::-webkit-details-marker{display:none}
.ft-legal summary:hover,.ft-legal[open] summary{color:var(--hx-cyan)}
.ft-legal-i{font-size:16px;transition:transform .3s var(--hx-spring)}
.ft-legal[open] .ft-legal-i{transform:rotate(45deg)}
.ft-legal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:0 16px 16px;border-top:1px solid var(--line);padding-top:16px}
.ft-lb h5{font:10px var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--hx-amber);margin:0 0 6px}
.ft-lb p{margin:0;color:var(--faint);font-size:12.5px;line-height:1.65}
.ft-bottom{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.ft .foot-copy{margin:0;padding:0;border:0;color:var(--faint);font-size:12px}
.ft .foot-copy::before{content:none}
.ft-build{margin:0;font:10px var(--font-mono);letter-spacing:.2em;color:var(--faint)}
.ft-build span:first-child{color:var(--hx-mag)}
@media(prefers-reduced-motion:reduce){.ft-marquee-track,.ft-wave-p,.ft-stars i,.ft-led{animation:none}}
  
/* ── Footer: skyline, watermark, launch road, socials ─────────── */
.ft-skyline{position:relative;height:180px;overflow:hidden;margin-top:-40px;
  background:linear-gradient(180deg,transparent,rgba(255,47,160,.10) 40%,rgba(255,138,61,.16) 70%,rgba(4,6,10,.0))}
.ft-sun{position:absolute;left:50%;bottom:-70px;width:250px;height:250px;transform:translateX(-50%);border-radius:50%;
  background:conic-gradient(from 180deg,#FFB454,#FF2FA0,#6F5BFF,#1EF2E6,#FFB454);filter:blur(1px) saturate(1.2);opacity:.85;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 13px),linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-in;
  mask-image:repeating-linear-gradient(180deg,#000 0 9px,transparent 9px 13px),linear-gradient(180deg,#000 55%,transparent);mask-composite:intersect}
.ft-sky{position:absolute;left:0;right:0;bottom:0;width:100%;height:180px;display:block}
.ft-bld{fill:#05070C}
.ft-win rect{fill:var(--c,#1EF2E6);opacity:.15;animation:ft-win 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes ft-win{0%,100%{opacity:.15}50%{opacity:.95}}
.ft-wrap{position:relative;isolation:isolate}
.ft-wm{position:absolute;right:-2%;top:-30px;z-index:-1;pointer-events:none;font:900 clamp(200px,28vw,420px)/1 var(--font-display);font-style:italic;letter-spacing:-.05em;
  background:linear-gradient(175deg,#FFE29A,#FF9A3D 22%,#FF2FA0 55%,#8B4DFF 85%,#2E7BFF);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.10;transform:skewX(-6deg)}
.ft-road{margin-top:22px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--hx-glass);position:relative;overflow:hidden}
.ft-road-h{display:flex;justify-content:space-between;font:10px var(--font-mono);letter-spacing:.22em;color:var(--hx-cyan);text-transform:uppercase;margin-bottom:8px}
.ft-road-h b{color:var(--hx-amber);font-weight:400}
.ft-road-bar{height:8px;border-radius:99px;background:oklch(0% 0 0/.5);overflow:hidden;position:relative}
.ft-road-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hx-cyan),var(--hx-mag),var(--hx-amber));box-shadow:0 0 14px var(--hx-mag);transition:width 1.4s var(--hx-spring,ease)}
.ft-road-bar b{position:absolute;top:-4px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 14px var(--hx-cyan);transform:translateX(-50%);left:0;transition:left 1.4s var(--hx-spring,ease)}
.ft-road-m{display:flex;justify-content:space-between;margin-top:6px;font:9px var(--font-mono);letter-spacing:.14em;color:var(--faint)}
.ft-social{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ft-social a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:5px;color:var(--muted);text-decoration:none;
  font:10.5px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--hx-glass);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:color .2s,border-color .2s,transform .3s var(--hx-spring,ease)}
.ft-social a:hover{color:#fff;border-color:var(--hx-edge);transform:translateY(-2px)}
.ft-social svg{width:13px;height:13px;fill:currentColor}
.ft-top{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--hx-edge);border-radius:5px;color:var(--hx-cyan);
  font:10px var(--font-mono);letter-spacing:.2em;background:var(--hx-glass);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:transform .3s var(--hx-spring,ease),color .2s}
.ft-top:hover{color:#fff;transform:translateY(-3px)}
.ft-top i{display:inline-block;font-style:normal;animation:ft-bounce 1.8s ease-in-out infinite}
@keyframes ft-bounce{50%{transform:translateY(-3px)}}
@media(max-width:820px){.ft-skyline{height:120px}.ft-sky{height:120px}.ft-sun{width:220px;height:220px}.ft-wm{display:none}}
@media(prefers-reduced-motion:reduce){.ft-win rect,.ft-top i{animation:none}.ft-win rect{opacity:.6}}