:root{
  --gold:#e8c37a;
  --amber:#ffb347;
  --ink:#e9e6df;
  --dim:#9a958a;
  --panel:rgba(14,14,20,.58);
  --edge:rgba(232,195,122,.22);
  --hal:#ff2b2b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:var(--ink);
  font:15px/1.5 "SF Mono",ui-monospace,Menlo,Consolas,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.nebula{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 78% 18%, rgba(90,60,160,.28), transparent 60%),
    radial-gradient(50% 45% at 15% 82%, rgba(20,90,140,.24), transparent 62%),
    radial-gradient(35% 30% at 55% 55%, rgba(232,195,122,.08), transparent 70%);
  animation:drift 90s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.06)}}

/* scene transition veil */
.veil{
  position:fixed;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none;
}
.veil.flash{animation:veilFlash .9s ease}
@keyframes veilFlash{0%{opacity:0}30%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.veil.flash{animation:none}}
#sceneName{color:var(--gold)}

/* ---- header ---- */
.top{
  position:relative;z-index:3;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px clamp(14px,3vw,40px) 6px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
h1{
  margin:0;font-size:clamp(13px,1.5vw,17px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 18px #000;
}
h1 .colon{color:var(--amber)}
h1 .hl{color:var(--gold)}
.controls{display:flex;gap:10px}
.btn{
  font:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:rgba(255,255,255,.05);
  border:1px solid var(--edge);border-radius:999px;padding:8px 16px;cursor:pointer;
  backdrop-filter:blur(8px);transition:border-color .2s,background .2s,color .2s;
}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn[aria-pressed="true"]{border-color:var(--hal);color:#ffd0d0;background:rgba(255,43,43,.12)}

/* ---- HAL eye ---- */
.hal{position:relative;width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,#5b0f0f,#160202 70%);
  box-shadow:0 0 0 2px #22130a,0 0 16px rgba(255,43,43,.5)}
.hal-lens{position:absolute;inset:5px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,#ffd7a0 0 8%,#ff8a2b 22%,#ff2b2b 45%,#6b0000 78%);
  box-shadow:0 0 14px 3px rgba(255,43,43,.75);
  animation:breathe 4.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* ---- lede ---- */
.lede{
  position:relative;z-index:3;margin:14px clamp(14px,3vw,40px) 4px;
  max-width:62ch;color:var(--dim);font-size:clamp(12px,1.15vw,15px);
  min-height:1.5em;
}
.lede .caret{color:var(--amber)}

/* ---- grid ---- */
.grid{
  position:relative;z-index:2;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  padding:22px clamp(14px,3vw,40px) 40px;
  max-width:1240px;margin:0 auto;
}
.card{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--edge);border-radius:14px;
  padding:16px 18px;backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0;transform:translateY(14px);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.card.in{animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.card:hover{
  transform:translateY(-3px);border-color:var(--gold);
  background:rgba(24,22,18,.7);
  box-shadow:0 22px 60px rgba(0,0,0,.7),0 0 0 1px rgba(232,195,122,.25),0 0 34px rgba(232,195,122,.14);
}
.card:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.glyph{
  flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
  font-size:19px;color:var(--gold);border-radius:11px;
  background:radial-gradient(circle at 30% 25%,rgba(232,195,122,.22),rgba(232,195,122,.04));
  border:1px solid var(--edge);
}
.card-body{min-width:0}
.card-title{font-weight:600;letter-spacing:.03em}
.card-desc{color:var(--dim);font-size:12.5px;margin-top:2px}

/* ---- footer ---- */
.foot{
  position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:8px 12px;
  padding:8px clamp(14px,3vw,40px) 26px;color:#6f6a60;font-size:11.5px;letter-spacing:.08em;
}
.foot code{color:var(--gold);font-size:11.5px}
.foot .sep{opacity:.4}

@media (max-width:620px){
  h1{letter-spacing:.2em}
  .lede{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .nebula,.hal-lens{animation:none}
  .card{opacity:1;transform:none}
}