/* [hidden] must always win: .btn sets display:inline-block, which would
   otherwise defeat the hidden attribute and render gated controls (the
   door's Enter, the handoff's ceremony buttons) while they are meant to
   be absent. Found by the real-browser behavior pass, Oct 25, 2026. */
[hidden]{display:none !important}
/* house.css — DualisCapax unified front end design system.
   Tokens: the locked house set (as carried in unified-front-end-v2 :root).
   Bioluminescence: glow is layered radial gradients + under-stroke layering.
   HARD RULES (Oct 13 GPU discipline + founder directive Oct 25):
   no backdrop-filter, no blur(), no bloom/post chains, no filter drop-shadows. */
:root{
  --bg:#07080c; --fg:#f3efe6; --gold:#e8c36a; --teal:#14b8a6;
  --emerald:#00ff9d; --aqua:#00f5d4; --purple:#a855f7; --eblue:#2e7bff;
  --blue:#9ec9e8; /* generic site blue — never the eFuse color */
  --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.028);
  --border:rgba(255,255,255,.12);
  --border-purple:rgba(168,85,247,.35); --border-teal:rgba(20,184,166,.35);
  --muted:#a8a79e; --dim:#7a7c86;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* the glow field: three living lights on deep dark, painted once, fixed */
.glowfield{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(52rem 34rem at 12% -6%, rgba(168,85,247,.17), transparent 62%),
    radial-gradient(46rem 32rem at 88% 104%, rgba(20,184,166,.15), transparent 62%),
    radial-gradient(30rem 20rem at 50% 42%, rgba(0,245,212,.055), transparent 65%),
    var(--bg);
}
main{max-width:72rem; margin:0 auto; padding:0 1.1rem 4.5rem}
a{color:var(--blue)}
h1,h2,h3{line-height:1.12; margin:0 0 .5rem; text-wrap:balance}
h1{font-size:clamp(2.4rem,8.5vw,4.6rem); letter-spacing:.01em}
h2{font-size:clamp(1.55rem,5vw,2.3rem)}
h3{font-size:clamp(1.1rem,3.6vw,1.35rem)}
p{margin:.35rem 0 .8rem}
.kicker{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--aqua); margin:0 0 .6rem;
}
.kicker.purple{color:var(--purple)} .kicker.gold{color:var(--gold)}
.kicker.teal{color:var(--teal)}
.lede{font-size:clamp(1.05rem,3.4vw,1.3rem); color:var(--fg); max-width:44rem}
.muted{color:var(--muted)} .dim{color:var(--dim)}
section{margin:3.4rem 0 0}
/* picture-first: art leads, glass below */
.plate{
  border:1px solid var(--border); border-radius:1.1rem; overflow:hidden;
  background:linear-gradient(165deg, rgba(168,85,247,.10), rgba(20,184,166,.05) 55%, rgba(255,255,255,.02));
  display:flex; align-items:center; justify-content:center;
  min-height:11rem; padding:1.2rem;
}
.glass{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--border); border-radius:1.1rem; padding:1.15rem 1.25rem;
}
.grid{display:grid; gap:1rem; margin-top:1rem}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr))}
.card{
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  border:1px solid var(--border); border-radius:1.1rem;
  padding:1.15rem 1.1rem 1.25rem; text-align:center;
}
.card h3{margin-top:.4rem}
.card p{color:var(--muted)}
.card .art{display:flex; justify-content:center; margin-bottom:.4rem}
/* centered stat cells — numbers, labels, all field information centered */
.stats{display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(12.5rem,100%),1fr)); margin-top:1rem}
.stat{
  text-align:center; border:1px solid var(--border); border-radius:1.1rem;
  background:linear-gradient(165deg, var(--panel), var(--panel2));
  padding:1.2rem .8rem 1.05rem; min-width:0;
}
.stat .fig{
  display:block; font-size:clamp(1.7rem,6vw,2.5rem); font-weight:650;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere; line-height:1.08;
}
.stat .fig.gold{color:var(--gold)} .stat .fig.teal{color:var(--teal)}
.stat .fig.emerald{color:var(--emerald)} .stat .fig.aqua{color:var(--aqua)}
.stat .fig.purple{color:var(--purple)} .stat .fig.eblue{color:var(--eblue)}
.stat .lab{display:block; margin-top:.4rem; color:var(--muted); font-size:.98rem}
.stat .src{display:block; margin-top:.3rem; color:var(--dim); font-size:.85rem}
/* grade chips — honesty boundaries at normal size, never fine print */
.grade{
  display:inline-block; font-family:var(--mono); font-size:.8rem;
  letter-spacing:.22em; padding:.28rem .7rem .2rem; border-radius:99rem;
  border:1px solid var(--border); color:var(--muted); text-transform:uppercase;
}
.grade.live{color:var(--aqua); border-color:rgba(0,245,212,.45)}
.grade.proven{color:var(--emerald); border-color:rgba(0,255,157,.45)}
.grade.staged{color:var(--gold); border-color:rgba(232,195,106,.45)}
.grade.design{color:var(--purple); border-color:var(--border-purple)}
.grade.unknown{color:var(--dim)}
.grade.reported{color:var(--blue); border-color:rgba(158,201,232,.45)}
/* BOARD receipt strip (HUD-17): the receipt digest, mono and break-safe */
.digest{font-family:var(--mono); font-size:.82rem; color:var(--dim); overflow-wrap:anywhere}
/* buttons — the few real controls */
.btn{
  display:inline-block; font:inherit; font-weight:600; cursor:pointer;
  color:var(--fg); text-decoration:none; text-align:center;
  background:linear-gradient(165deg, rgba(168,85,247,.22), rgba(20,184,166,.14));
  border:1px solid var(--border-purple); border-radius:99rem;
  padding:.85rem 1.7rem; min-height:3.2rem;
}
.btn:active{transform:translateY(1px)}
.btn.quiet{background:transparent; border-color:var(--border)}
.btnrow{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:1.1rem}
/* topbar — the v2 shell's seating: Iris cluster + name, one line */
.topbar{
  display:flex; align-items:center; gap:.7rem; max-width:72rem; margin:0 auto;
  padding:.8rem 1.1rem .4rem;
}
.topbar .name{font-weight:650; letter-spacing:.02em}
.topbar nav{margin-left:auto; display:flex; gap:1rem; flex-wrap:wrap}
.topbar nav a{color:var(--muted); text-decoration:none; font-size:.98rem}
.topbar nav a:hover{color:var(--fg)}
.topbar a.name{color:var(--fg); text-decoration:none}
/* the narrative menu: the current room is underlined in aqua — the
   visitor always knows where in the story they are standing */
.topbar nav a[aria-current="page"]{color:var(--fg); box-shadow:inset 0 -2px 0 var(--aqua)}
/* journey continuity: each room hands the visitor to the next beat */
.continue{border-top:1px solid var(--border); padding-top:2.2rem}
.continue .btnrow{margin-top:1rem}
/* the film's chapter table: storyboard beats as opening details */
.beats{margin-top:1.4rem; text-align:left}
.beats details{
  border:1px solid var(--border); border-radius:.9rem; margin-top:.55rem;
  background:linear-gradient(165deg, var(--panel), var(--panel2)); padding:.7rem 1rem;
}
.beats summary{cursor:pointer; font-weight:600; color:var(--fg)}
.beats details p{color:var(--muted); margin:.45rem 0 .25rem}
/* the gate word — scarlet's own seating: small mono, bottom-left of a black field */
.gatefield{
  position:relative; min-height:62vh; border:1px solid var(--border);
  border-radius:1.1rem; background:#000; overflow:hidden; margin-top:1rem;
}
.gateword{
  position:absolute; left:1.2rem; bottom:1rem; margin:0;
  font-family:var(--mono); font-size:clamp(1rem,3.4vw,1.25rem);
  letter-spacing:.55em; color:var(--teal);
}
.gateword.hole{color:var(--gold)}
.gatenote{position:absolute; left:1.2rem; top:1rem; right:1.2rem; color:var(--muted)}
/* the framed picture — Grok's ceremony shape: a frame on a black screen */
.frame{
  border:1px solid rgba(232,195,106,.55); outline:1px solid rgba(168,85,247,.35);
  outline-offset:6px; border-radius:.4rem; background:#000;
  padding:2.2rem 1.4rem; text-align:center; max-width:34rem; margin:1.4rem auto;
}
.frame .status{font-family:var(--mono); letter-spacing:.18em; color:var(--muted); min-height:1.6em}
.holdtrack{height:.5rem; border-radius:99rem; border:1px solid var(--border); margin:1rem auto 0; max-width:16rem; overflow:hidden}
.holdfill{height:100%; width:0%; background:linear-gradient(90deg, var(--purple), var(--teal))}
/* helix dividers + hero art scale with the screen, never bleed */
.helixwrap{display:flex; justify-content:center; padding:.4rem 0}
.helixwrap svg{max-width:100%; height:auto}
footer{max-width:72rem; margin:0 auto; padding:0 1.1rem 3rem; color:var(--dim)}
.doctrine{font-size:clamp(1.05rem,3.4vw,1.3rem); color:var(--fg); text-align:center}
.center{text-align:center}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
}