/* =============================================================================
   LOST GENESIS — the SPECIMEN ARCHIVE.  (own-world rebuild, 2026-08-12)

   This is NOT the terminal theme. The owner rejected a recolour of SequenceMods
   twice ("still too similar ... make theirs unique"), so this is a ground-up
   design system that shares nothing structural with it: no terminal.css, no
   shell prompt, no boot typer, no decode glyphs, no guillemet tab bar, no CRT.

   THE WORLD: a cold cryo-genetics archive. The island is a living archive of
   specimens; the site is the archive's console. Its identity is:
     - a COOL SANS body (system-ui) with a TECHNICAL MONO for headings, IDs and
       data — the exact opposite of a mono-on-black terminal, which is what read
       as "his";
     - the DNA double-helix as a HERO STRUCTURE, not a background texture;
     - content as RECORDS / DOSSIERS with call-numbers, not terminal output;
     - steel-navy ground + one electric cyan, with green/amber/red as state only.
   Self-contained: every font + image is local. Committed single dark world.
   ========================================================================= */

/* ---------------------------------------------------------------- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------- fonts ---- */
@font-face{font-family:"LG Display";src:url("/fonts/cascadia/CascadiaCode-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"LG Display";src:url("/fonts/cascadia/CascadiaCode-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"LG Mono";src:url("/fonts/jetbrains/JetBrainsMono.woff2") format("woff2");font-weight:100 800;font-display:swap}

/* --------------------------------------------------------------- tokens ---- */
:root{
  --void:#04070d; --void-2:#02040a;
  --surface:#080f1a; --surface-2:#0b1826; --surface-3:#0e2030;
  --line:#122c3a; --line-2:#0d2130; --line-lit:#1f5d70;
  --cyan:#2fc9e6; --cyan-lit:#7ff0ff; --cyan-dim:#5f97aa; --cyan-deep:#1a86a0;
  --ink:#d9e7ed; --ink-2:#9fb6c0; --ink-3:#6d8792;
  --green:#46d98f; --amber:#f2c14e; --red:#ff6b61;
  --glow: rgba(47,201,230,.34);
  --font-display:"LG Display",ui-monospace,Consolas,monospace;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-data:"LG Mono",ui-monospace,Consolas,monospace;
  --wrap: 1180px;
  --pad: clamp(16px, 3.2vw, 30px);
  --sec-y: clamp(44px, 7.5vh, 92px);
  --r: 3px;
}

/* ----------------------------------------------------------------- base ---- */
body{
  background:var(--void); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden; position:relative;
}
::selection{ background:rgba(47,201,230,.28); color:#eafcff; }

/* the ATMOSPHERE — a cold deep-field, not a CRT. A cyan glow bleeding from the
   top-right (where the hero helix sits) over a steel vignette. Fixed, cheap. */
.field{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 720px at 88% -12%, rgba(47,201,230,.14), transparent 58%),
    radial-gradient(900px 560px at 6% 108%, rgba(20,110,140,.10), transparent 62%),
    linear-gradient(180deg, #04070d 0%, #04080f 55%, #03060c 100%);
}
.field::after{ /* faint archival grain */
  content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:3px 3px;
}

.doc{ position:relative; z-index:1; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad); }

/* --------------------------------------------------------------- header ---- */
.site-head{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, rgba(4,7,13,.92), rgba(4,7,13,.72) 70%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line-2);
}
.site-head .wrap{ display:flex; align-items:center; gap:18px;
  min-height:64px; padding-block:10px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand .mark{ width:34px; height:34px; flex:none;
  background:url("/img/mark.png") center/contain no-repeat;
  filter:drop-shadow(0 0 9px var(--glow)); }
.brand .lockup{ display:flex; flex-direction:column; line-height:1.12; }
.brand .lockup b{ font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:.04em; color:var(--cyan-lit); }
.brand .lockup span{ font-family:var(--font-data); font-size:.62rem; letter-spacing:.22em;
  color:var(--ink-3); }

/* ONE ROW IS THE LAW of this header (owner order 2026-08-12): the section
   entries NEVER stack into a second line. `nowrap` states it; the tiers below
   buy the room honestly — tracking first, padding second, the brand sublabel
   third — and under 760px the row keeps its single line by sliding sideways
   instead of wrapping. The tools carry icons, not words, at every width. */
.nav{ display:flex; gap:4px; margin-left:auto; flex-wrap:nowrap; white-space:nowrap;
  min-width:0; }
.nav a{ position:relative; font-family:var(--font-display); font-weight:600;
  font-size:.72rem; letter-spacing:.2em; color:var(--ink-2); flex:none;
  padding:9px 12px; border-radius:var(--r); transition:color .16s, background .16s; }
.nav a::before{ content:""; position:absolute; left:12px; right:12px; bottom:5px; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav a:hover{ color:var(--cyan-lit); background:rgba(47,201,230,.05); }
.nav a:hover::before{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--cyan-lit); }
.nav a[aria-current="page"]::before{ transform:scaleX(1); background:var(--cyan-lit);
  box-shadow:0 0 8px var(--glow); }
/* the roomy tracking is ULTRAWIDE-ONLY: nine entries (STAFF reveals late for
   staff accounts) plus the tools have to hold one row on an ordinary desktop,
   and a tier that fits eight can still lose to the ninth arriving async. */
@media (max-width:1899px){
  .nav{ gap:2px; }
  .nav a{ letter-spacing:.13em; padding:9px 9px; }
  .nav a::before{ left:9px; right:9px; }
  .clock span{ display:none; }
  .lockup span{ display:none; }
}
@media (max-width:1180px){
  .nav{ gap:0; }
  .nav a{ font-size:.62rem; letter-spacing:.09em; padding:9px 7px; }
  .nav a::before{ left:7px; right:7px; }
}
@media (max-width:980px){
  .brand .lockup{ display:none; }
  .nav a{ letter-spacing:.06em; padding:9px 6px; }
}

.tools{ display:flex; align-items:center; gap:8px; flex:none; position:relative; }
.tool{ display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  color:var(--ink-2); padding:8px 11px; border:1px solid var(--line);
  border-radius:var(--r); background:rgba(255,255,255,.012);
  transition:border-color .16s, color .16s, background .16s; }
.tool:hover{ color:var(--cyan-lit); border-color:var(--line-lit); background:rgba(47,201,230,.06); }
.tool svg{ width:15px; height:15px; }
.tool.icon{ padding:8px; }                 /* square, icon only, named by title */
.tool.icon svg{ width:16px; height:16px; }
.tool.discord:hover{ color:#cfd6ff; border-color:#3a44a0; }
/* the sound tool draws its state: waves when it plays, a small cross when it
   is off. The child span stays in the markup as the accessible label. */
.tool[data-sound] .snd-on{ display:none; }
.tool[data-sound][aria-pressed="true"]{ color:var(--cyan); border-color:var(--cyan-deep); }
.tool[data-sound][aria-pressed="true"] .snd-on{ display:initial; }
.tool[data-sound][aria-pressed="true"] .snd-off{ display:none; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.clock{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;
  padding-left:6px; margin-left:2px; border-left:1px solid var(--line-2); }
.clock b{ font-family:var(--font-data); font-size:.82rem; color:var(--cyan); letter-spacing:.04em;
  font-variant-numeric:tabular-nums; }
.clock span{ font-family:var(--font-data); font-size:.54rem; letter-spacing:.2em; color:var(--ink-3); }

/* ------------------------------------------------ the signed-in menu ------- */
/* The persona chip opens a small panel: link Discord, or sign out. It is the
   ONLY overlay the header owns; it closes on Escape, on an outside press and
   on either action. */
.chip-user{ gap:8px; }
.chip-user .chip-pts{ font-family:var(--font-data); font-size:.7rem; color:var(--cyan);
  padding-left:8px; border-left:1px solid var(--line-2);
  font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.user-menu .um-pts{ display:block; margin-top:3px; font-family:var(--font-data);
  font-size:.62rem; color:var(--cyan); letter-spacing:.08em;
  font-variant-numeric:tabular-nums; }
.chip-user .caret{ width:10px; height:10px; transition:transform .16s; }
.chip-user[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.user-menu{ position:absolute; top:calc(100% + 10px); right:0; z-index:60; min-width:236px;
  background:rgba(6,11,19,.97); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 18px 42px rgba(0,0,0,.52);
  padding:6px; }
.user-menu[hidden]{ display:none; }
.user-menu .um-head{ padding:8px 11px 9px; font-family:var(--font-data); font-size:.56rem;
  letter-spacing:.2em; color:var(--ink-3); border-bottom:1px solid var(--line-2);
  margin-bottom:4px; }
.user-menu .um-head b{ display:block; font-family:var(--font-display); font-size:.74rem;
  letter-spacing:.12em; color:var(--ink); margin-top:3px; }
.user-menu a, .user-menu .um-row{ display:flex; width:100%; align-items:center; gap:9px;
  padding:9px 11px; font-family:var(--font-display); font-weight:600; font-size:.64rem;
  letter-spacing:.13em; color:var(--ink-2); border-radius:2px; text-align:left;
  transition:color .14s, background .14s; }
.user-menu a:hover, .user-menu .um-row:hover{ color:var(--cyan-lit);
  background:rgba(47,201,230,.07); }
.user-menu svg{ width:14px; height:14px; flex:none; }
.user-menu .um-note{ display:flex; align-items:center; gap:9px; padding:9px 11px;
  font-family:var(--font-data); font-size:.6rem; letter-spacing:.12em; color:var(--ink-3); }
.user-menu .um-row[data-armed="1"]{ color:var(--amber); }
.user-menu .um-row:disabled{ color:var(--ink-3); cursor:default; }

/* ----------------------------------------------------------------- hero ---- */
.hero{ position:relative; padding-block:clamp(34px, 7vh, 84px) var(--sec-y); }
.hero .wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,64px);
  align-items:center; }
.hero-copy{ max-width:38ch; }
.kicker{ display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:.7rem; letter-spacing:.28em;
  color:var(--cyan-dim); margin-bottom:18px; }
.kicker::before{ content:""; width:22px; height:1px; background:var(--cyan-deep); }
.display{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.5rem, 6vw, 4.7rem); line-height:.97; letter-spacing:-.02em;
  color:var(--cyan-lit); text-wrap:balance;
  text-shadow:0 0 40px rgba(47,201,230,.16); }
.display em{ display:block; font-style:normal; font-weight:600;
  font-size:clamp(1.2rem, 2.6vw, 1.9rem); letter-spacing:-.005em; line-height:1.1;
  color:var(--ink); margin-top:.35em; opacity:.94; }
.lede{ color:var(--ink-2); font-size:1.02rem; line-height:1.66; margin-top:22px; max-width:44ch; }
.tagline{ font-family:var(--font-data); font-size:.72rem; letter-spacing:.24em;
  color:var(--ink-3); margin-bottom:16px; }

.cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.btn{ display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:.74rem; letter-spacing:.12em;
  padding:12px 18px; border:1px solid var(--line-lit); border-radius:var(--r);
  color:var(--ink); background:rgba(47,201,230,.04);
  transition:border-color .16s, color .16s, background .16s, transform .12s; }
.btn::before{ content:"›"; color:var(--cyan); font-weight:700; }
.btn:hover{ color:var(--cyan-lit); border-color:var(--cyan); background:rgba(47,201,230,.1);
  transform:translateY(-1px); }
.btn.solid{ background:linear-gradient(180deg, rgba(47,201,230,.18), rgba(47,201,230,.08));
  border-color:var(--cyan-deep); color:var(--cyan-lit); }
.btn.solid:hover{ background:linear-gradient(180deg, rgba(47,201,230,.3), rgba(47,201,230,.14));
  box-shadow:0 0 22px rgba(47,201,230,.2); }
/* .act is kept as a class name because the sound engine maps it to the action
   cue; here it simply reuses the button skin. */
.act{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.72rem; letter-spacing:.1em;
  color:var(--cyan); padding:9px 14px; border:1px solid var(--line-lit);
  border-radius:var(--r); transition:color .16s, border-color .16s, background .16s; }
.act::before{ content:"›"; color:var(--cyan-dim); }
.act:hover{ color:var(--cyan-lit); border-color:var(--cyan); background:rgba(47,201,230,.07); }
.act.solid{ background:linear-gradient(180deg, rgba(47,201,230,.18), rgba(47,201,230,.07));
  border-color:var(--cyan-deep); color:var(--cyan-lit); }

/* the HELIX HERO — the DNA strand as the site's centrepiece */
.helix-stage{ position:relative; aspect-ratio:1/1.04; width:100%; max-width:440px;
  margin-inline:auto; }
.helix-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.helix-stage::before{ content:""; position:absolute; inset:6% 14%;
  background:radial-gradient(circle at 50% 42%, rgba(47,201,230,.16), transparent 66%);
  filter:blur(6px); }
.helix-stage .ring{ position:absolute; inset:0; border:1px solid var(--line-2);
  border-radius:50%; }
.helix-stage .ring.r2{ inset:11%; border-color:var(--line); opacity:.5; }
.helix-cap{ position:absolute; left:0; right:0; bottom:-2px; text-align:center;
  font-family:var(--font-data); font-size:.6rem; letter-spacing:.3em; color:var(--ink-3); }
.helix-cap b{ color:var(--cyan-dim); font-weight:400; }

/* -------------------------------------------------------------- sections --- */
.sec{ padding-block:var(--sec-y); position:relative; }
.sec + .sec{ padding-top:0; }
.sec-head{ max-width:60ch; margin-bottom:clamp(22px,3.4vh,40px); }
.sec-head .kicker{ margin-bottom:14px; }
.h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem,3.1vw,2.25rem);
  letter-spacing:-.01em; line-height:1.06; color:var(--ink); text-wrap:balance; }
.h2 b{ color:var(--cyan-lit); font-weight:700; }
.sub{ color:var(--ink-2); margin-top:12px; font-size:1rem; line-height:1.6; max-width:52ch; }

/* ---------------------------------------------------------------- records -- */
.records{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:clamp(12px,1.6vw,18px); }
.rec{ position:relative; display:flex; flex-direction:column;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px;
  transition:border-color .18s, transform .18s, box-shadow .18s; }
.rec::before{ /* the cyan corner tick — an archive registration mark */
  content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:2px solid var(--cyan-deep); border-left:2px solid var(--cyan-deep);
  border-top-left-radius:var(--r); opacity:.7; transition:border-color .18s, opacity .18s; }
.rec:hover{ border-color:var(--line-lit); transform:translateY(-2px);
  box-shadow:0 14px 40px -22px rgba(0,0,0,.8), 0 0 0 1px rgba(47,201,230,.06) inset; }
.rec:hover::before{ border-color:var(--cyan); opacity:1; }
.rec-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.rec-id{ font-family:var(--font-data); font-size:.62rem; letter-spacing:.14em; color:var(--cyan-dim);
  border:1px solid var(--line); padding:2px 7px; border-radius:2px; }
.rec-title{ font-family:var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.02em;
  color:var(--cyan-lit); }
.rec-tag{ margin-left:auto; font-family:var(--font-data); font-size:.58rem; letter-spacing:.16em;
  color:var(--ink-3); }
.rec p{ color:var(--ink-2); font-size:.92rem; line-height:1.6; }
.rec-foot{ margin-top:auto; padding-top:14px; }

/* ------------------------------------------------------------- chips/dots -- */
.chip{ display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-data); font-size:.6rem; letter-spacing:.14em;
  padding:3px 9px; border-radius:20px; border:1px solid var(--line-lit);
  color:var(--cyan); text-transform:uppercase; }
.chip.on{ color:var(--green); border-color:rgba(70,217,143,.4); background:rgba(70,217,143,.07); }
.chip.wait{ color:var(--amber); border-color:rgba(242,193,78,.35); background:rgba(242,193,78,.06); }
.chip.off{ color:var(--ink-3); border-color:var(--line); }
.dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--ink-3);
  box-shadow:0 0 0 3px rgba(255,255,255,.02); }
.dot.on{ background:var(--green); box-shadow:0 0 10px rgba(70,217,143,.7); }
.dot.wait{ background:var(--amber); box-shadow:0 0 10px rgba(242,193,78,.6);
  animation:pulse 1.5s ease-in-out infinite; }
.dot.off{ background:var(--red); box-shadow:0 0 8px rgba(255,107,97,.5); }
@keyframes pulse{ 50%{ opacity:.4; } }

/* --------------------------------------------------------------- panel ----- */
.card{ background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.card-head{ display:flex; align-items:center; gap:10px; padding-bottom:14px;
  margin-bottom:14px; border-bottom:1px solid var(--line-2); }
.card-head h2, .card-head h3{ font-family:var(--font-display); font-weight:700;
  font-size:.92rem; letter-spacing:.03em; color:var(--cyan-lit); }
.card-head .node{ width:7px; height:7px; flex:none; background:var(--cyan);
  box-shadow:0 0 8px var(--glow); transform:rotate(45deg); }
.card-head .meta{ margin-left:auto; font-family:var(--font-data); font-size:.62rem;
  letter-spacing:.14em; color:var(--ink-3); display:inline-flex; align-items:center; gap:7px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.card-foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-data); font-size:.66rem; letter-spacing:.06em; color:var(--ink-3); }

/* ---------------------------------------------------------- data / census -- */
.dl{ display:flex; flex-direction:column; gap:2px; }
.dl li{ display:flex; align-items:baseline; gap:12px; padding:7px 0;
  border-bottom:1px dashed var(--line-2); }
.dl li:last-child{ border-bottom:0; }
.dl .k{ font-family:var(--font-data); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2); }
.dl .v{ margin-left:auto; font-family:var(--font-data); font-size:.82rem; color:var(--cyan-lit);
  font-variant-numeric:tabular-nums; }
.dl .v.on{ color:var(--green); }
.dl .v.muted{ color:var(--ink-3); }

/* ----------------------------------------------------------------- assay --- */
.assay{ display:flex; flex-direction:column; gap:1px; }
.assay li{ display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--line-2); font-size:.9rem; color:var(--ink-2); }
.assay li:last-child{ border-bottom:0; }
.assay .no{ font-family:var(--font-data); font-size:.68rem; color:var(--cyan-dim);
  width:1.8em; flex:none; }
.assay .st{ margin-left:auto; }
.assay li.met{ color:var(--ink); }
.assay li.met .no{ color:var(--green); }

.meter{ display:flex; align-items:center; gap:12px; }
.track{ flex:1; display:flex; gap:3px; }
.track i{ flex:1; height:8px; background:var(--surface-3); border:1px solid var(--line-2);
  border-radius:1px; transition:background .3s, box-shadow .3s; }
.track i.f{ background:linear-gradient(180deg, var(--cyan-lit), var(--cyan));
  border-color:var(--cyan-deep); box-shadow:0 0 8px rgba(47,201,230,.35); }
.pc{ font-family:var(--font-data); font-size:.72rem; color:var(--cyan-lit);
  font-variant-numeric:tabular-nums; flex:none; }

/* ------------------------------------------------------------------ gate --- */
.gate{ text-align:center; padding:22px 8px 8px; display:flex; flex-direction:column;
  align-items:center; gap:12px; }
.gate .g-mark{ width:46px; height:46px; border:1px solid var(--line-lit); border-radius:50%;
  display:grid; place-items:center; color:var(--cyan); position:relative; }
.gate .g-mark::before{ content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--cyan); box-shadow:0 0 12px var(--glow); }
.gate .g-mark::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid var(--line-2); }
.gate h3{ font-family:var(--font-display); font-weight:700; font-size:.98rem; letter-spacing:.04em;
  color:var(--ink); }
.gate p{ color:var(--ink-2); font-size:.9rem; max-width:40ch; }
.gate .act, .gate .btn{ margin-top:6px; }

/* --------------------------------------------------------------- keys ------ */
.keys{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.key{ border:1px solid var(--line); border-radius:var(--r); padding:14px;
  background:rgba(47,201,230,.02); transition:border-color .16s, background .16s; }
.key:hover{ border-color:var(--line-lit); background:rgba(47,201,230,.05); }
.key h3{ font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.08em;
  color:var(--cyan-lit); margin-bottom:6px; display:flex; align-items:center; gap:7px; }
.key h3::before{ content:""; width:5px; height:5px; background:var(--cyan-deep);
  transform:rotate(45deg); flex:none; }
.key.danger h3{ color:var(--red); }
.key.danger h3::before{ background:var(--red); }
.key p{ color:var(--ink-3); font-size:.82rem; line-height:1.5; }

/* --------------------------------------------------------------- steps ----- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.8vw,20px);
  counter-reset:step; }
.step{ position:relative; padding:20px 18px; border:1px solid var(--line);
  border-radius:var(--r); background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.step .no{ font-family:var(--font-data); font-size:.66rem; letter-spacing:.18em; color:var(--cyan-dim); }
.step h3{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:.02em;
  color:var(--ink); margin:8px 0 6px; }
.step p{ color:var(--ink-2); font-size:.9rem; line-height:1.55; }
.step::after{ content:""; position:absolute; top:0; left:0; width:34px; height:2px;
  background:linear-gradient(90deg, var(--cyan), transparent); }

/* ------------------------------------------------------------ footer bar --- */
.foot{ border-top:1px solid var(--line-2); margin-top:var(--sec-y); }
.foot .wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 22px; padding-block:18px; }
.foot .census{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.foot .census span{ font-family:var(--font-data); font-size:.68rem; letter-spacing:.1em;
  color:var(--ink-3); }
.foot .census b{ color:var(--cyan); font-weight:400; }
.foot .census b.on{ color:var(--green); }
.foot .sig{ margin-left:auto; font-family:var(--font-data); font-size:.62rem; letter-spacing:.16em;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:8px; }
.foot .sig::before{ content:""; width:5px; height:5px; background:var(--cyan-deep);
  transform:rotate(45deg); }

/* the archive LOG strip (the old ticker, re-cast) */
.log{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  overflow:hidden; background:rgba(2,4,10,.5); }
.log .tape{ display:inline-flex; gap:40px; white-space:nowrap; padding:9px 0;
  animation:marquee 42s linear infinite; }
.log .tape span{ font-family:var(--font-data); font-size:.68rem; letter-spacing:.14em;
  color:var(--ink-3); display:inline-flex; align-items:center; gap:10px; }
.log .tape span::before{ content:""; width:4px; height:4px; background:var(--cyan-deep);
  transform:rotate(45deg); }
.log .tape b{ color:var(--cyan-lit); font-weight:400; }
.log .tape .g{ color:var(--green); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* -------------------------------------------------------------- utilities -- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,18px); }
.ok{ color:var(--green); } .muted{ color:var(--ink-3); }
/* reveal is an ENHANCEMENT, never a hide: default is fully visible, so content
   is shown with no JS, no IntersectionObserver, and in any screenshot. The
   entrance only PLAYS (as an animation) once JS marks the element .in. */
@keyframes rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
.reveal.in{ animation:rise .6s ease both; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .helix-stage{ order:-1; max-width:300px; }
  .two, .grid-2{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  /* the brand and the tools share the top line; the sections keep their ONE
     row underneath and slide sideways when the island has more doors than the
     screen has width. The soft mask says "there is more" without a scrollbar. */
  .site-head .wrap{ flex-wrap:wrap; min-height:0; }
  .nav{ order:3; width:100%; margin-left:0; overflow-x:auto; scrollbar-width:none;
    -webkit-mask:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ padding:8px 9px; font-size:.64rem; letter-spacing:.1em; }
}
@media (max-width: 640px){
  .keys{ grid-template-columns:1fr; }
  .display{ font-size:clamp(2.1rem,10vw,3rem); }
}

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .log .tape{ animation:none; }
}

/* =============================================================================
   MY DINO + VAULT — the archive skin for the FRAMEWORK's working panels.
   (merged page, 2026-08-12; framework merge design: live hosts vault)

   The page mounts the canonical webcore scripts (site.js, livecard.js, live.js,
   vault.js) untouched — every id and class below is THEIRS; this block only
   dresses that DOM in the archive's voice. theme.css (generated, LG palette)
   loads first and lg.css last, so shared token names resolve to the archive.
   ========================================================================== */

/* tokens the canonical sheets read that the archive re-voices */
:root{
  --font-mono:"LG Mono",ui-monospace,Consolas,monospace;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bad:#ff6b61; --bad-ink:#ff8b82;
}

/* --- buttons the canonical js emits ---------------------------------------- */
.btn-primary{ background:linear-gradient(180deg, rgba(47,201,230,.2), rgba(47,201,230,.08));
  border-color:var(--cyan-deep); color:var(--cyan-lit); }
.btn-primary:hover{ background:linear-gradient(180deg, rgba(47,201,230,.3), rgba(47,201,230,.14));
  box-shadow:0 0 22px rgba(47,201,230,.2); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; }
.btn[disabled]:hover{ color:var(--ink); border-color:var(--line-lit); background:rgba(47,201,230,.04); }

/* --- utility classes the fragments/scripts expect --------------------------- */
.dim{ color:var(--ink-3); }
.mt-s{ margin-top:10px; } .mt-m{ margin-top:18px; } .mt-l{ margin-top:clamp(22px,3.4vh,40px); }
.gate-act{ margin-top:6px; }
.gate-note{ font-size:.8rem; color:var(--ink-3); }
.notice{ display:flex; gap:12px; align-items:flex-start; margin-top:18px;
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  background:rgba(47,201,230,.03); color:var(--ink-2); font-size:.9rem; }
.notice svg{ width:18px; height:18px; color:var(--cyan-dim); flex:none; }

/* --- the live host + canonical gates ---------------------------------------- */
.lvhost .gate, #vault-root .gate{
  border:1px solid var(--line); border-radius:var(--r); padding:26px 18px 22px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.lvhost{ min-height:120px; }

/* --- the fallback figure card (livecard absent) ------------------------------ */
.status{ border:1px solid var(--line); border-radius:var(--r); padding:18px;
  background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.status-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.status-top h3{ font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  letter-spacing:.03em; color:var(--cyan-lit); }
.status-figs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:9px; }
.fig{ border:1px solid var(--line-2); border-radius:var(--r); padding:10px 12px;
  background:rgba(47,201,230,.02); }
.fig b{ display:block; font-family:var(--font-data); font-size:1.05rem; color:var(--ink);
  font-variant-numeric:tabular-nums; }
.fig span{ font-family:var(--font-data); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.status-note{ margin-top:12px; font-family:var(--font-data); font-size:.68rem;
  letter-spacing:.08em; color:var(--ink-3); }
.pill{ display:inline-flex; align-items:center; font-family:var(--font-data);
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px;
  border-radius:20px; border:1px solid var(--line-lit); color:var(--cyan); }
.pill.live{ color:var(--green); border-color:rgba(70,217,143,.4); background:rgba(70,217,143,.07); }
.pill.soon{ color:var(--amber); border-color:rgba(242,193,78,.35); background:rgba(242,193,78,.06); }

/* --- the action rail (park / redeem / slay / travel) ------------------------- */
.lva{ margin-top:14px; }
.lva-label{ font-family:var(--font-data); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cyan-dim); margin-bottom:9px; }
.lva-rail{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.lva-btn{ text-align:left; border:1px solid var(--line); border-radius:var(--r);
  padding:12px 13px; background:rgba(47,201,230,.02); display:block; width:100%;
  transition:border-color .16s, background .16s, transform .12s; }
.lva-btn:hover:not([disabled]){ border-color:var(--cyan); background:rgba(47,201,230,.07);
  transform:translateY(-1px); }
.lva-btn i{ display:block; width:20px; height:20px; color:var(--cyan); margin-bottom:8px; }
.lva-btn i svg{ width:20px; height:20px; }
.lva-btn b{ display:block; font-family:var(--font-display); font-weight:700;
  font-size:.8rem; letter-spacing:.08em; color:var(--cyan-lit); text-transform:uppercase; }
.lva-btn small{ display:block; margin-top:4px; font-size:.76rem; line-height:1.45;
  color:var(--ink-3); }
.lva-btn.is-bad i, .lva-btn.is-bad b{ color:var(--red); }
.lva-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.lva-btn[aria-expanded="true"]{ border-color:var(--cyan); background:rgba(47,201,230,.08); }
.lva-panel{ margin-top:10px; border:1px solid var(--line-lit); border-radius:var(--r);
  padding:14px 15px; background:linear-gradient(180deg, var(--surface-2), var(--surface)); }
.lva-panel-head{ font-family:var(--font-display); font-weight:700; font-size:.82rem;
  letter-spacing:.08em; color:var(--cyan-lit); text-transform:uppercase; margin-bottom:8px; }
.lva-confirm p{ color:var(--ink-2); font-size:.92rem; }
.lva-acts{ display:flex; gap:9px; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
.lva-row{ display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px dashed var(--line-2); }
.lva-row:last-child{ border-bottom:0; }
.lva-row-l{ flex:1; min-width:0; color:var(--ink-2); font-size:.9rem; }
.lva-list{ display:flex; flex-direction:column; }
.lva-code{ display:flex; align-items:center; gap:10px; font-family:var(--font-data);
  font-size:1.15rem; letter-spacing:.2em; color:var(--cyan-lit); }
.lva-code-ttl{ font-family:var(--font-data); font-size:.66rem; letter-spacing:.1em;
  color:var(--amber); }
.lva-code-none{ color:var(--ink-3); font-size:.85rem; }
.lva-field{ display:flex; gap:9px; flex-wrap:wrap; margin-top:8px; }
.lva-input{ flex:1; min-width:140px; padding:9px 11px; font-family:var(--font-data);
  font-size:.95rem; letter-spacing:.14em; color:var(--ink); background:var(--void-2);
  border:1px solid var(--line-lit); border-radius:var(--r); }
.lva-input:focus{ outline:none; border-color:var(--cyan); }
.lva-say{ display:flex; align-items:center; gap:8px; margin-top:10px;
  font-size:.88rem; color:var(--green); }
.lva-say svg{ width:15px; height:15px; flex:none; }
.lva-say.is-bad{ color:var(--red); }

/* --- the vault slots grid ----------------------------------------------------- */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(12px,1.6vw,18px); }
.slot{ position:relative; border:1px solid var(--line); border-radius:var(--r);
  padding:16px 16px 14px; background:linear-gradient(180deg, var(--surface-2), var(--surface));
  transition:border-color .18s, transform .18s; }
.slot::before{ content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:2px solid var(--cyan-deep); border-left:2px solid var(--cyan-deep);
  border-top-left-radius:var(--r); opacity:.7; }
.slot:hover{ border-color:var(--line-lit); transform:translateY(-2px); }
.slot-top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.slot-top h3{ font-family:var(--font-display); font-weight:700; font-size:.94rem;
  letter-spacing:.03em; color:var(--cyan-lit); }
.slot-facts{ display:flex; flex-direction:column; gap:6px; margin:0; }
.slot-facts > div{ display:flex; align-items:baseline; gap:10px; }
.slot-facts dt{ font-family:var(--font-data); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }
.slot-facts dd{ margin-left:auto; font-family:var(--font-data); font-size:.85rem;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.slot-facts .slot-muts{ display:block; }
.slot-facts .slot-muts dd{ margin-left:0; margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; }
.slot-mut{ font-family:var(--font-data); font-size:.62rem; letter-spacing:.08em;
  padding:2px 7px; border:1px solid var(--line-lit); border-radius:2px; color:var(--cyan); }
.slot-act{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line-2); }
.slot-say{ font-size:.82rem; color:var(--green); margin-bottom:7px; }
.slot-say.is-bad{ color:var(--red); }
.slot-ask{ font-size:.85rem; color:var(--ink-2); margin-bottom:8px; }
.slot-drop{ font-size:.68rem; }
.slot-act .btn{ margin-right:7px; margin-top:4px; }

/* the merged page's sec-head h3 (prime block heading in the fallback card) */
.sec-head h3{ font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:.04em; color:var(--cyan-lit); }

/* phone: the rail collapses to two columns, slots to one */
@media (max-width:560px){
  .lva-rail{ grid-template-columns:1fr 1fr; }
  .slots{ grid-template-columns:1fr; }
}

/* --- the framework live-bar, in archive voice -------------------------------- */
/* Seated IN THE FLOW under the header (`site.livebar_mount`, owner order
   2026-08-12 after his reference — population + restart + weather + the LIVE
   seal, and deliberately NO storm timer). The dock rules below it remain the
   fallback: a page where the header is missing still gets the bar, at the
   viewport's foot. */
#wc-livebar.lb-flow{ position:static; z-index:30;
  display:flex; align-items:center; gap:18px; flex-wrap:nowrap; min-width:0;
  padding:7px max(var(--pad), calc((100% - var(--wrap)) / 2));
  min-height:34px;
  background:linear-gradient(180deg, rgba(6,11,19,.88), rgba(5,9,16,.7));
  border-top:0; border-bottom:1px solid var(--line-2);
  backdrop-filter:none; -webkit-backdrop-filter:none; }
#wc-livebar:not(.lb-flow){ position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:8px var(--pad); min-height:38px;
  background:linear-gradient(0deg, rgba(2,4,10,.96), rgba(4,7,13,.88));
  border-top:1px solid var(--line-2);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
body.has-livebar .doc{ padding-bottom:52px; }
#wc-livebar .lb-left, #wc-livebar .lb-mid, #wc-livebar .lb-right{
  display:inline-flex; align-items:center; gap:9px; }
#wc-livebar .lb-mid{ flex:1; justify-content:center; }
#wc-livebar .lb-k{ font-family:var(--font-data); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3); }
#wc-livebar .lb-v{ font-family:var(--font-data); font-size:.74rem; color:var(--cyan-lit);
  font-variant-numeric:tabular-nums; }
#wc-livebar .lb-sep{ width:1px; height:14px; background:var(--line-lit); display:inline-block; }
#wc-livebar .lb-pulse{ width:8px; height:8px; border-radius:50%; background:var(--ink-3);
  display:inline-block; position:relative; }
#wc-livebar .lb-pulse.on{ background:var(--green); box-shadow:0 0 9px rgba(70,217,143,.7); }
#wc-livebar .lb-pulse.part{ background:var(--amber); box-shadow:0 0 9px rgba(242,193,78,.6); }
#wc-livebar .lb-pulse.off{ background:var(--red); box-shadow:0 0 8px rgba(255,107,97,.5); }
#wc-livebar .lb-pulse i{ display:none; }
#wc-livebar .lb-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:14px; }
#wc-livebar .lb-bars i{ width:3px; min-height:2px; background:var(--cyan-deep);
  border-radius:1px; opacity:.8; }
#wc-livebar .lb-src{ font-family:var(--font-data); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line-lit); color:var(--cyan); }
#wc-livebar .lb-src.on{ color:var(--green); border-color:rgba(70,217,143,.4);
  background:rgba(70,217,143,.07); }
#wc-livebar .lb-src.part{ color:var(--amber); border-color:rgba(242,193,78,.35);
  background:rgba(242,193,78,.06); }
#wc-livebar .lb-src.off{ color:var(--red); border-color:rgba(255,107,97,.35);
  background:rgba(255,107,97,.06); }
@media (max-width:640px){
  #wc-livebar .lb-mid .lb-wx{ display:none; }
  #wc-livebar .lb-mid .lb-sep{ display:none; }
  #wc-livebar .lb-bars{ display:none; }
}

/* =============================================================================
   THE STAFF CONSOLE'S CONTROLS, in archive voice.  (owner order 2026-08-12:
   the console's fields shipped as the browser's own WHITE boxes. This world
   replaced the shared sheet that dresses controls by tag, and never adopted
   that layer — so every input fell back to the user agent. This is that
   layer, scoped to the console page (`body[data-console]`) so no shipped
   player surface changes appearance. `color-scheme` is what stops the browser
   painting its own LIGHT chrome inside a select, a search field's clear
   button or a date picker — no background rule can reach those parts. */
body[data-console] input,
body[data-console] select,
body[data-console] textarea{
  font:inherit; color:var(--ink);
  background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r);
  padding:8px 11px;
  color-scheme:dark;
  transition:border-color .16s, background .16s;
}
body[data-console] input::placeholder,
body[data-console] textarea::placeholder{ color:var(--ink-3); }
body[data-console] input:hover,
body[data-console] select:hover,
body[data-console] textarea:hover{ border-color:var(--line-lit); }
body[data-console] input:focus,
body[data-console] select:focus,
body[data-console] textarea:focus{ border-color:var(--cyan-deep); background:var(--surface-3); }
body[data-console] input:disabled,
body[data-console] select:disabled,
body[data-console] textarea:disabled{ color:var(--ink-3); cursor:not-allowed; opacity:.6; }
body[data-console] select{ cursor:pointer; }
body[data-console] textarea{ min-height:96px; resize:vertical; }
body[data-console] input[type="number"]{ font-family:var(--font-data);
  font-variant-numeric:tabular-nums; }
body[data-console] input[type="checkbox"],
body[data-console] input[type="radio"]{
  width:auto; padding:0; accent-color:var(--cyan);
}

/* The one switch that arms a whole panel gets a real toggle, not a square:
   an owner glancing at the bar reads its position before its label. */
body[data-console] .admin-switch input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:36px; height:19px; flex:none; margin:0;
  border:1px solid var(--line); border-radius:999px;
  background:var(--surface-2); position:relative; cursor:pointer;
}
body[data-console] .admin-switch input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px; width:13px; height:13px;
  border-radius:50%; background:var(--ink-3); transition:transform .16s, background .16s;
}
body[data-console] .admin-switch input[type="checkbox"]:checked{
  border-color:var(--cyan-deep); background:rgba(47,201,230,.14);
}
body[data-console] .admin-switch input[type="checkbox"]:checked::after{
  background:var(--cyan); transform:translateX(17px);
  box-shadow:0 0 7px var(--glow);
}
body[data-console] .admin-switch:has(input:checked){ color:var(--ink); }