:root{
  --bg:#070c10; --panel:#0d151c; --line:#1d2d39;
  --text:#9db3c1; --bright:#dcecf4; --accent:#5fd0e8; --dim:#4d6675;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:12px/1.75 "Courier New",Courier,monospace; letter-spacing:.05em;
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(rgba(255,255,255,.022) 0 1px,transparent 1px 3px);
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--bright); background:rgba(95,208,232,.1)}

/* ---------- splash ---------- */
.splash{overflow:hidden}
#cubes{position:fixed;inset:0;z-index:1}
.grid-floor{
  position:fixed;inset:0;z-index:0;opacity:.14;
  background:
    linear-gradient(transparent 60%,rgba(180,215,230,.5)),
    repeating-linear-gradient(90deg,rgba(190,220,235,.55) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(rgba(190,220,235,.55) 0 1px,transparent 1px 90px);
  transform:perspective(420px) rotateX(72deg) translateY(28%) scale(2.4);
  transform-origin:bottom;
}
.splash-ui{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;pointer-events:none;
}
.splash-ui::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 46% 40% at 50% 50%,
    rgba(7,12,16,.86) 0%, rgba(7,12,16,.62) 45%, transparent 78%);
}
.splash-ui > *{pointer-events:auto}
.mark{position:fixed;top:22px;left:26px;color:var(--dim);font-size:10px;letter-spacing:.3em}
.title{
  margin:0;font-size:clamp(34px,7vw,72px);font-weight:400;letter-spacing:.16em;
  color:var(--bright);text-shadow:0 0 26px rgba(95,208,232,.35);
  display:flex;align-items:center;gap:14px;
}
.blip{display:inline-block;width:.34em;height:.72em;background:var(--accent);box-shadow:0 0 14px var(--accent)}
.subtitle{margin-top:6px;color:var(--dim);font-size:10px;letter-spacing:.34em;text-transform:uppercase}
.enter{
  margin-top:52px;padding:11px 34px;font-size:12px;letter-spacing:.42em;
  color:var(--bright);border:1px solid var(--line);
  background:rgba(10,20,28,.55);backdrop-filter:blur(2px);transition:.22s;
}
.enter:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 24px rgba(95,208,232,.22);letter-spacing:.5em}
.fineprint{
  position:fixed;bottom:24px;color:var(--dim);font-size:13px;
  letter-spacing:.32em;text-transform:uppercase;opacity:.85;
}.corner{position:fixed;width:16px;height:16px;border:1px solid var(--line);z-index:12}
.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.br{bottom:14px;right:14px;border-left:0;border-top:0}
body.leaving{opacity:0;transition:opacity .5s ease}

/* ---------- interior pages ---------- */
.wrap{max-width:880px;margin:0 auto;padding:0 24px 90px}
.topbar{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d161d,#070c10)}
.topbar .wrap{padding-top:20px;padding-bottom:0}
.logo{color:var(--bright);font-size:15px;letter-spacing:.26em}
.logo span{color:var(--accent)}
nav{display:flex;gap:2px;margin-top:18px;flex-wrap:wrap}
nav a{
  padding:7px 18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);border:1px solid var(--line);border-bottom:0;background:#0b1318;
}
nav a:hover{color:var(--accent);background:#101c24}
nav a.on{color:#04141a;background:var(--accent);border-color:var(--accent)}

h2{
  display:flex;align-items:center;gap:10px;margin:44px 0 14px;
  font-size:15px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--bright);
}
h2::before{content:"";width:9px;height:15px;background:var(--accent);box-shadow:0 0 10px rgba(95,208,232,.5)}
p{max-width:66ch}
hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.panel{border:1px solid var(--line);background:var(--panel);padding:20px 24px}
.meta{color:var(--dim);font-size:10px;letter-spacing:.24em;text-transform:uppercase}
ul{list-style:none;padding:0}
ul li{padding:7px 0 7px 20px;border-bottom:1px solid #131f27;position:relative}
ul li::before{content:"›";position:absolute;left:2px;color:var(--accent)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
footer{margin-top:60px;padding-top:18px;border-top:1px solid var(--line);color:var(--dim);font-size:10px;letter-spacing:.2em}