:root{
  --void:#03060b;
  --hull:rgba(11,19,29,.62);
  --line:rgba(70,110,140,.26);
  --line-lit:rgba(111,211,247,.6);
  --signal:#ffb347;
  --signal-dim:#a8702a;
  --sensor:#6fd3f7;
  --text:#c2d2de;
  --dim:#5d7385;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --display:"Oxanium",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--void);color:var(--text);font-family:var(--mono);
  font-size:14px;line-height:1.6;overflow-x:hidden;
  -webkit-user-select:none;user-select:none;
}
body.nogl{background:radial-gradient(ellipse 70% 60% at 68% 42%,#0d1626 0%,#050a12 45%,#03060b 100%) fixed}
a{color:inherit}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#neb{z-index:0}
#fx{z-index:1;pointer-events:none}

/* ---------- HUD chrome ---------- */
.hud{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hud .corner{position:absolute;width:58px;height:58px;border:1px solid var(--sensor);opacity:.42}
.hud .tl{top:16px;left:16px;border-right:0;border-bottom:0}
.hud .tr{top:16px;right:16px;border-left:0;border-bottom:0}
.hud .bl{bottom:16px;left:16px;border-right:0;border-top:0}
.hud .br{bottom:16px;right:16px;border-left:0;border-top:0}
.hud .edge{position:absolute;font-size:9.5px;letter-spacing:.24em;color:var(--dim);text-transform:uppercase;white-space:nowrap}
.hud .e-l{top:50%;left:-56px;transform:rotate(-90deg)}
.hud .e-r{top:50%;right:-50px;transform:rotate(90deg)}
.scan{position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(180deg,transparent,rgba(111,211,247,.05) 45%,rgba(111,211,247,.12) 50%,rgba(111,211,247,.05) 55%,transparent);
  animation:scanfall 8s linear infinite}
@keyframes scanfall{from{top:-160px}to{top:100%}}
.raster{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px);opacity:.42}
#reticle{position:absolute;top:0;left:0;width:54px;height:54px;margin:-27px 0 0 -27px;opacity:0;
  will-change:translate;transition:opacity .25s ease,scale .16s ease}
#reticle circle,#reticle path{fill:none;stroke:var(--signal);stroke-width:1;transition:stroke .16s ease}
#reticle.hot{scale:1.45}
#reticle.hot circle,#reticle.hot path{stroke:var(--sensor);stroke-width:1.3}
html.aim,html.aim *{cursor:none}

/* spine */
.spine{position:fixed;left:26px;top:50%;transform:translateY(-50%);height:38vh;width:1px;background:var(--line);z-index:4;pointer-events:none}
.spine b{position:absolute;left:-3px;width:7px;height:7px;background:var(--signal);box-shadow:0 0 10px var(--signal);transform:rotate(45deg);top:0;transition:top .12s linear}
.spine u{position:absolute;left:-2px;width:5px;height:1px;background:var(--dim);text-decoration:none}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:60;background:var(--void);display:none;flex-direction:column;justify-content:center;padding:0 10vw;font-size:12.5px;color:var(--sensor);gap:6px;pointer-events:none}
.js #boot{display:flex;animation:bootout .7s ease 1.5s forwards}
@keyframes bootout{to{opacity:0}}
#boot span{opacity:0;animation:bl .01s forwards}
#boot span:nth-child(1){animation-delay:.08s}
#boot span:nth-child(2){animation-delay:.30s}
#boot span:nth-child(3){animation-delay:.52s}
#boot span:nth-child(4){animation-delay:.76s}
#boot span:nth-child(5){animation-delay:1.02s;color:var(--signal)}
@keyframes bl{to{opacity:1}}

/* ---------- layout ---------- */
.shell{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:0 40px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:34px 0 0}
.mark{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;letter-spacing:.06em;font-size:15px;color:#e8f2fa}
.mark figure{position:relative;width:36px;height:36px;flex:none;border:1px solid var(--line-lit);overflow:hidden}
.mark img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.55) contrast(1.08)}
.mark figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(111,211,247,.22),rgba(255,179,71,.12));mix-blend-mode:screen}
.mark small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.14em;color:var(--dim);text-transform:lowercase}
.bar nav{display:flex;gap:26px;font-size:11px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}
.bar nav a{text-decoration:none;position:relative;padding-bottom:4px}
.bar nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--sensor);transition:width .22s ease}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--sensor);outline:none}
.bar nav a:hover::after,.bar nav a:focus-visible::after{width:100%}

.hero{min-height:82vh;display:flex;flex-direction:column;justify-content:center;padding:60px 0 40px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.3em;color:var(--signal);text-transform:uppercase;margin-bottom:24px}
.eyebrow::after{content:"";flex:1;max-width:190px;height:1px;background:linear-gradient(90deg,var(--signal-dim),transparent)}

.callsign{font-family:var(--display);font-weight:800;font-size:clamp(54px,11.6vw,152px);line-height:.84;letter-spacing:-.035em;color:#f2f8fd}
.ln{position:relative;display:block}
.ln.amber{color:var(--signal);text-shadow:0 0 52px rgba(255,179,71,.5)}
.ln::before,.ln::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;clip-path:inset(100% 0 0 0)}
.ln::before{color:#ff4d6d;transform:translate(-3px,0);animation:g1 5.5s steps(1) infinite}
.ln::after{color:var(--sensor);transform:translate(3px,0);animation:g2 5.5s steps(1) infinite}
.ln.amber::before,.ln.amber::after{animation-delay:.16s}
@keyframes g1{0%,88%{clip-path:inset(100% 0 0 0)}89%{clip-path:inset(18% 0 62% 0)}90%{clip-path:inset(70% 0 12% 0)}91%{clip-path:inset(40% 0 44% 0)}92%,100%{clip-path:inset(100% 0 0 0)}}
@keyframes g2{0%,88.5%{clip-path:inset(100% 0 0 0)}89.5%{clip-path:inset(60% 0 24% 0)}90.5%{clip-path:inset(10% 0 76% 0)}91.5%{clip-path:inset(48% 0 36% 0)}92.5%,100%{clip-path:inset(100% 0 0 0)}}

.lede{max-width:46ch;margin-top:32px;font-size:15px;color:var(--text)}
.lede+.lede{margin-top:12px;color:var(--dim);font-size:13.5px}

.readout{display:flex;flex-wrap:wrap;margin-top:46px;max-width:640px;border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(10px)}
.readout div{flex:1 1 0;min-width:112px;padding:16px 20px;border-right:1px solid var(--line);position:relative}
.readout div:last-child{border-right:0}
.readout div::before{content:"";position:absolute;top:0;left:0;width:18px;height:1px;background:var(--sensor)}
.readout b{display:block;font-family:var(--display);font-weight:600;font-size:27px;color:#f2f8fd;line-height:1.1}
.readout small{font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase}

/* ---------- panels ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:40px 0 26px}
.section-head h2{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.34em;color:var(--sensor);text-transform:uppercase}
.section-head p{font-size:11px;letter-spacing:.06em;color:var(--dim)}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;perspective:1200px}
.grid .panel:last-child:nth-child(odd){grid-column:1/-1}
.panel{
  position:relative;display:block;text-decoration:none;padding:28px 28px 22px;
  background:var(--hull);backdrop-filter:blur(10px);border:1px solid var(--line);
  transform-style:preserve-3d;transition:transform .3s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
  overflow:hidden;
}
.js .panel{opacity:0}
.js .panel.in{opacity:1;transition:opacity .6s ease,transform .3s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease}
.panel:hover,.panel:focus-visible{border-color:var(--line-lit);background:rgba(18,32,46,.72);box-shadow:0 18px 50px -20px rgba(111,211,247,.35);outline:none}
.panel .brk{position:absolute;width:16px;height:16px;border:1px solid var(--signal);opacity:.75;transition:opacity .4s ease .15s}
.js .panel .brk{opacity:0}
.js .panel.in .brk{opacity:.75}
.panel .brk.a{top:8px;left:8px;border-right:0;border-bottom:0}
.panel .brk.b{bottom:8px;right:8px;border-left:0;border-top:0}
.panel .trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.panel .trace rect{fill:none;stroke:var(--sensor);stroke-width:1;stroke-dasharray:70 1500;opacity:0;transition:opacity .2s}
.panel:hover .trace rect,.panel:focus-visible .trace rect{opacity:.9;animation:trace 2.2s linear infinite}
@keyframes trace{to{stroke-dashoffset:-1570}}
.panel .glow{position:absolute;left:-45%;top:0;width:45%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(111,211,247,.1),transparent)}
.panel:hover .glow{animation:sweepx 1.15s ease-out}
@keyframes sweepx{to{left:115%}}
.p-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.p-game{font-size:10px;letter-spacing:.2em;color:var(--signal);text-transform:uppercase}
.p-state{font-size:10px;letter-spacing:.16em;color:#5f9c78;text-transform:uppercase;display:flex;align-items:center;gap:7px}
.p-state i{width:6px;height:6px;background:currentColor;border-radius:50%;box-shadow:0 0 8px currentColor;animation:pulse 2.4s ease-in-out infinite}
.p-state.off{color:var(--dim)}
.p-state.off i{animation:none;box-shadow:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.28}}
.p-name{font-family:var(--display);font-weight:600;font-size:26px;color:#f2f8fd;letter-spacing:-.01em;line-height:1.15}
.p-desc{margin-top:9px;font-size:12.5px;color:var(--dim);max-width:38ch}
.p-foot{margin-top:24px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.panel:hover .p-foot span:last-child,.panel:focus-visible .p-foot span:last-child{color:var(--sensor)}

/* ---------- ticker ---------- */
.ticker{margin-top:46px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:12px 0;background:rgba(6,12,20,.45);backdrop-filter:blur(6px)}
.ticker div{display:inline-block;white-space:nowrap;font-size:11px;letter-spacing:.1em;color:var(--dim);animation:roll 46s linear infinite;will-change:transform}
.ticker b{color:var(--sensor);font-weight:400}
.ticker em{font-style:normal;color:var(--signal)}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- archive ---------- */
.archive{list-style:none;border-top:1px solid var(--line)}
.archive a{
  display:grid;grid-template-columns:190px 1fr auto;align-items:baseline;gap:20px;
  padding:13px 16px 13px 14px;border-bottom:1px solid var(--line);text-decoration:none;
  position:relative;transition:background .2s ease,padding-left .2s ease;
}
.archive a::before{
  content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
  background:var(--signal);transform:scaleY(0);transform-origin:50% 50%;transition:transform .2s ease;
}
.archive a:hover,.archive a:focus-visible{background:rgba(18,32,46,.55);padding-left:22px;outline:none}
.archive a:hover::before,.archive a:focus-visible::before{transform:scaleY(1)}
.a-game{font-size:10px;letter-spacing:.2em;color:var(--signal-dim);text-transform:uppercase}
.a-name{font-size:13px;color:var(--dim);transition:color .2s ease}
.archive a:hover .a-name,.archive a:focus-visible .a-name{color:var(--sensor)}
.a-year{font-size:10px;letter-spacing:.14em;color:var(--dim)}

/* ---------- footer ---------- */
footer{margin-top:52px;padding:34px 0 76px;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;justify-content:space-between;font-size:11px;letter-spacing:.06em;color:var(--dim)}
footer a{color:var(--sensor);text-decoration:none}
footer a:hover{text-decoration:underline}
.idcard{display:flex;gap:20px;align-items:center;border:1px solid var(--line);background:var(--hull);backdrop-filter:blur(10px);padding:18px 24px 18px 18px;max-width:570px}
.idcard figure{position:relative;width:96px;height:96px;flex:none;overflow:hidden;border:1px solid var(--line-lit)}
.idcard img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.6) contrast(1.1)}
.idcard figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(111,211,247,.2),rgba(255,179,71,.1)),repeating-linear-gradient(180deg,rgba(3,6,11,.4) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.idcard figure b{position:absolute;width:9px;height:9px;border:1px solid var(--signal)}
.idcard figure b:nth-of-type(1){top:4px;left:4px;border-right:0;border-bottom:0}
.idcard figure b:nth-of-type(2){bottom:4px;right:4px;border-left:0;border-top:0}
.id-name{font-family:var(--display);font-weight:600;font-size:22px;color:#f2f8fd;line-height:1.2}
.id-role{font-size:10px;letter-spacing:.22em;color:var(--signal);text-transform:uppercase;margin-top:5px}
.id-body{margin-top:11px;font-size:11.5px;color:var(--dim);line-height:1.65;max-width:38ch}

@media (max-width:900px){
  .shell{padding:0 24px}
  .grid{grid-template-columns:1fr;perspective:none}
  .hero{min-height:70vh;padding:36px 0}
  .bar nav,.hud .edge,.spine{display:none}
  .hud .corner{width:36px;height:36px}
}
@media (max-width:520px){
  .shell{padding:0 18px}
  .readout div{flex:1 1 44%}
  .archive a{grid-template-columns:1fr auto;gap:2px 14px}
  .a-game{grid-column:1;order:1}
  .a-year{grid-column:2;grid-row:1}
  .a-name{grid-column:1/-1;order:2}
  .idcard{padding:16px}
  .idcard figure{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scan,.ticker div,.ln::before,.ln::after,.p-state i,.panel .trace rect,.panel .glow{animation:none!important}
  .js #boot{animation-delay:.15s;animation-duration:.2s}
  .panel{opacity:1!important}
  .panel .trace rect{opacity:0!important}
  *{transition-duration:.01ms!important}
}