/* ============================================================================
   IntraID — "Vault Core" interface
   ----------------------------------------------------------------------------
   An alien-instrument look: bio-luminescent cyan on deep void, holographic
   glass panels with cut corners, a slow particle field behind everything, and
   readouts that behave like telemetry rather than like a website.

   Two rules the theme is not allowed to break:
     1. The consent screen stays legible. Ornament sits behind and around the
        words, never on top of them — a person deciding what to share must be
        able to read it at a glance, on a phone, in sunlight.
     2. Nothing is fetched from another domain. No CDN font, no CDN script.
        A page that says "nothing leaves" and then calls out to three hosts is
        not telling the truth.

   Everything degrades: @media (prefers-reduced-motion) stills the whole thing,
   and with JavaScript off the layout is complete and static.
   ========================================================================= */

:root{
  /* void and structure */
  --void:#03070A; --deep:#050C11; --panel:#08141A; --panel-2:#0B1C23;
  --line:rgba(63,232,208,.15); --line-2:rgba(63,232,208,.30); --line-3:rgba(63,232,208,.55);

  /* light */
  --ink:#DDF4EF; --dim:#7DA49D; --dimmer:#4E6F69;
  --cyan:#3FE8D0; --cyan-deep:#0E5F55; --cyan-ink:#01201C;
  --mint:#57F0A8; --violet:#A77CFF; --violet-deep:#2A1F52;
  --amber:#FFC86B; --red:#FF6F6F;

  --glow:0 0 22px rgba(63,232,208,.20);
  --glow-strong:0 0 34px rgba(63,232,208,.42);
  --r:4px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}
/* .btn sets display:inline-flex, which overrides the browser's own
   [hidden]{display:none} — so a hidden button stays on screen. Bitten by this
   on /welcome, where Begin and Stop were visible at the same time. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--ink);
  font:15px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ---------------------------------------------------------------- the void
   Three stacked layers, all fixed, all pointer-events:none:
     #voidfield  — canvas, drifting motes (app.js)
     .grid-veil  — a faint hex/line lattice
     .scan-veil  — one slow horizontal sweep, the "instrument is live" tell   */
#voidfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.grid-veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.30;
  background-image:
    linear-gradient(rgba(63,232,208,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,232,208,.055) 1px,transparent 1px),
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(63,232,208,.14),transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%,rgba(167,124,255,.10),transparent 65%);
  background-size:52px 52px,52px 52px,100% 100%,100% 100%;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%,#000 30%,transparent 85%);
}
.scan-veil{
  position:fixed;left:0;right:0;height:180px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(63,232,208,.045) 45%,rgba(63,232,208,.075) 50%,transparent);
  animation:sweep 11s linear infinite;
}
@keyframes sweep{0%{top:-200px}100%{top:100%}}

body>header,body>main,body>footer,body>.consent,body>.narrow,body>div{position:relative;z-index:2}

/* --------------------------------------------------------------- typography */
a{color:var(--cyan);text-decoration:none;transition:color .18s,text-shadow .18s}
a:hover{color:#8CFFEE;text-shadow:0 0 12px rgba(63,232,208,.55)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.02em;font-weight:620}
h1{font-size:clamp(28px,4.6vw,46px)}
h2{font-size:22px}
h3{font-size:16px}
p{margin:0 0 1em}
small,.small{font-size:13px}
.dim{color:var(--dim)}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em}
strong,b{font-weight:600}

/* Section eyebrow — reads like a channel label on an instrument. */
.kicker{
  color:var(--cyan);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;font-family:var(--mono);margin-bottom:12px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--cyan));box-shadow:var(--glow)}
.kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent);max-width:160px}

/* Alien glyph strip — decorative only, hidden from screen readers in markup. */
.glyphs{font-family:var(--mono);color:var(--cyan-deep);font-size:11px;letter-spacing:.42em;
  user-select:none;opacity:.85;white-space:nowrap;overflow:hidden}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.narrow{max-width:700px}
.stack>*+*{margin-top:14px}
.sep{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin:18px 0}

/* -------------------------------------------------------------------- header */
header.top{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(3,7,10,.94),rgba(3,7,10,.72));
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
header.top::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:.5;animation:railpulse 6s ease-in-out infinite;
}
@keyframes railpulse{0%,100%{opacity:.18;transform:scaleX(.4)}50%{opacity:.6;transform:scaleX(1)}}
.top .row{display:flex;align-items:center;gap:18px;height:66px}

.brand{display:flex;align-items:center;gap:11px;font-weight:650;color:var(--ink);letter-spacing:.02em}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand .mark{
  position:relative;width:30px;height:30px;display:grid;place-items:center;color:var(--cyan);
  background:radial-gradient(circle at 50% 40%,rgba(63,232,208,.30),rgba(63,232,208,.05));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:var(--glow);
}
.brand .mark::after{
  content:"";position:absolute;inset:-3px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  border:1px solid var(--line-3);opacity:.5;animation:corepulse 3.4s ease-in-out infinite;
}
@keyframes corepulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.12);opacity:.75}}

.top nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.top nav a{
  position:relative;color:var(--dim);padding:8px 13px;font-size:13.5px;
  font-family:var(--mono);letter-spacing:.04em;
}
.top nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:1px;background:var(--cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;box-shadow:var(--glow);
}
.top nav a:hover{color:var(--ink);text-decoration:none}
.top nav a:hover::after,.top nav a.on::after{transform:scaleX(1)}
.top nav a.on{color:var(--cyan)}

/* --------------------------------------------------------------- the panel
   Cut corners + bracket marks. The bracket is drawn with two gradients so it
   costs nothing and survives any background behind it.                      */
.card{
  position:relative;background:linear-gradient(160deg,rgba(11,28,35,.80),rgba(5,12,17,.86));
  border:1px solid var(--line);padding:22px;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  backdrop-filter:blur(6px);
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:linear-gradient(120deg,transparent 40%,rgba(63,232,208,.07) 50%,transparent 60%);
}
.card:hover{border-color:var(--line-2);box-shadow:0 0 0 1px rgba(63,232,208,.06),0 18px 50px -24px rgba(63,232,208,.35)}
.card:hover::before{opacity:1}
.card.tight{padding:15px 17px}
.card.lit{border-color:var(--line-2);box-shadow:0 0 40px -18px rgba(63,232,208,.6)}

.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- readouts */
.stat{
  position:relative;background:linear-gradient(160deg,rgba(11,28,35,.75),rgba(5,12,17,.85));
  border:1px solid var(--line);padding:18px;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.stat::after{
  content:"";position:absolute;left:0;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--cyan),transparent);box-shadow:var(--glow);
}
.stat b{
  display:block;font-size:30px;letter-spacing:-.03em;font-weight:600;font-family:var(--mono);
  color:var(--cyan);text-shadow:0 0 18px rgba(63,232,208,.45);line-height:1.1;
}
.stat span{color:var(--dim);font-size:12px;font-family:var(--mono);letter-spacing:.09em;text-transform:uppercase}

/* ---------------------------------------------------------------- controls */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;overflow:hidden;
  border:1px solid var(--line-2);background:rgba(11,28,35,.7);color:var(--ink);
  padding:11px 18px;font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;
  letter-spacing:.03em;transition:color .2s,border-color .2s,box-shadow .25s,transform .12s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.btn::before{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(63,232,208,.20),rgba(63,232,208,.04));
  transform:translateX(-101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.btn:hover{border-color:var(--line-3);color:#EAFFFA;box-shadow:var(--glow);text-decoration:none}
.btn:hover::before{transform:translateX(0)}
.btn:active{transform:translateY(1px)}
.btn>*{position:relative;z-index:1}
.btn.primary{
  background:linear-gradient(120deg,var(--cyan),#2ED3BC);border-color:var(--cyan);color:var(--cyan-ink);
  font-weight:650;box-shadow:0 0 26px -6px rgba(63,232,208,.65);
}
.btn.primary::before{background:linear-gradient(90deg,rgba(255,255,255,.35),transparent)}
.btn.primary:hover{color:var(--cyan-ink);box-shadow:0 0 40px -6px rgba(63,232,208,.9)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.danger{color:var(--red);border-color:rgba(255,111,111,.35)}
.btn.danger::before{background:linear-gradient(90deg,rgba(255,111,111,.22),transparent)}
.btn.danger:hover{box-shadow:0 0 22px -6px rgba(255,111,111,.6);color:#FFBDBD}
.btn.sm{padding:7px 12px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* click ripple, injected by app.js */
.ripple{position:absolute;border-radius:50%;background:rgba(63,232,208,.35);
  transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

/* ------------------------------------------------------------------- forms */
/* Field captions read as instrument labels — but ONLY field captions. The
   consent rows are also <label> elements, and they must stay ordinary prose:
   a decision about your own email should not arrive in shouting monospace. */
label:not(.item):not(.plain){display:block;font-size:11.5px;color:var(--dim);margin:0 0 6px;
  font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase}
label.item,label.plain{font-family:var(--sans);letter-spacing:normal;text-transform:none;
  color:var(--ink);font-size:14.5px;margin:0}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=date],select,textarea{
  width:100%;background:rgba(3,10,13,.75);border:1px solid var(--line);color:var(--ink);
  padding:12px 14px;font:inherit;font-size:14px;border-radius:0;
  transition:border-color .2s,box-shadow .25s,background .2s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
input::placeholder,textarea::placeholder{color:var(--dimmer)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(8,22,28,.9);
  box-shadow:0 0 0 1px rgba(63,232,208,.25),0 0 26px -8px rgba(63,232,208,.8);
}
textarea{min-height:96px;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),
  linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.field+.field{margin-top:16px}
.hint{color:var(--dimmer);font-size:12.5px;margin-top:6px;font-family:var(--mono)}

.err{background:rgba(60,12,12,.6);border:1px solid rgba(255,111,111,.32);color:#FFC2C2;
  padding:13px 15px;margin-bottom:18px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.err ul{margin:0;padding-left:18px}

.flash{padding:12px 15px;margin:0 0 18px;font-size:14px;border:1px solid;position:relative;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  animation:flashin .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes flashin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.flash.ok{background:rgba(6,42,37,.7);border-color:var(--cyan-deep);color:#A9FFF0}
.flash.bad{background:rgba(60,12,12,.6);border-color:rgba(255,111,111,.32);color:#FFC2C2}
.wrap>.flash,.consent>.flash{margin-top:18px}

/* ----------------------------------------------------------------- capsules */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:4px 10px;
  border:1px solid var(--line);color:var(--dim);background:rgba(11,28,35,.75);
  font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.pill.ok{color:var(--cyan);border-color:var(--cyan-deep);background:rgba(6,42,37,.6);
  box-shadow:0 0 16px -6px rgba(63,232,208,.8)}
.pill.warn{color:var(--amber);border-color:rgba(255,200,107,.3);background:rgba(48,36,10,.5)}
.pill.bad{color:var(--red);border-color:rgba(255,111,111,.3);background:rgba(50,12,12,.5)}
.pill.relay{color:var(--violet);border-color:rgba(167,124,255,.35);background:var(--violet-deep);
  box-shadow:0 0 16px -6px rgba(167,124,255,.8)}
a.pill:hover{text-decoration:none;border-color:var(--line-3);color:var(--ink)}

/* ------------------------------------------------------------------ tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--cyan);font-weight:550;font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;font-family:var(--mono);padding:0 10px 10px;border-bottom:1px solid var(--line-2)}
td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr,table tr{transition:background .2s}
table tr:hover td{background:rgba(63,232,208,.035)}
.tw{overflow-x:auto}

/* ------------------------------------------------------- the consent screen
   The one screen that must read perfectly. Ornament is confined to the frame
   and the transit animation above it.                                       */
.consent{max-width:580px;margin:30px auto 60px;padding:0 18px;position:relative;z-index:2}
.consent .head{text-align:center;margin-bottom:24px}
.consent .who{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:18px}
.consent .who .dot{
  position:relative;width:52px;height:52px;display:grid;place-items:center;color:var(--cyan);
  background:radial-gradient(circle at 50% 45%,rgba(63,232,208,.22),rgba(5,12,17,.9));
  border:1px solid var(--line-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.consent .who .dot.node-b{color:var(--cyan);box-shadow:var(--glow-strong)}
/* the beam between the two nodes — particles ride it (app.js) */
.consent .who .beam{position:relative;width:92px;height:2px;margin:0 6px;
  background:linear-gradient(90deg,var(--line),var(--line-3),var(--line));overflow:visible}
.consent .who .beam i{position:absolute;top:-2px;width:5px;height:5px;background:var(--cyan);
  border-radius:50%;box-shadow:0 0 10px var(--cyan);animation:transit 2.6s linear infinite}
@keyframes transit{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}

.ask{border:1px solid var(--line);background:linear-gradient(170deg,rgba(11,28,35,.8),rgba(5,12,17,.9));
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.ask .item{display:flex;gap:14px;padding:17px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .22s}
.ask .item:last-child{border-bottom:0}
.ask .item:hover{background:rgba(63,232,208,.04)}
.ask .item.is-on{background:rgba(63,232,208,.055);box-shadow:inset 2px 0 0 var(--cyan)}
.ask .item input[type=checkbox]{margin-top:3px;width:18px;height:18px;accent-color:var(--cyan);flex:0 0 auto;cursor:pointer}
.ask .item .t{font-weight:600;letter-spacing:.01em}
.ask .item .why{color:var(--dim);font-size:13.5px;margin-top:5px;display:block;line-height:1.6}
.ask .item .why b{color:var(--ink);font-weight:550}

.note{border:1px solid var(--line);border-left:2px solid var(--cyan);background:rgba(6,20,26,.6);
  padding:14px 16px;color:var(--dim);font-size:13.5px}
.note.violet{border-left-color:var(--violet);background:rgba(28,20,52,.5);color:#CBBCFF}
.note b{color:var(--ink)}

/* ------------------------------------------------------------- ledger rows */
.ledger-row{display:grid;grid-template-columns:160px 1fr auto;gap:14px;padding:13px 0 13px 14px;
  border-bottom:1px solid var(--line);font-size:14px;position:relative}
.ledger-row::before{content:"";position:absolute;left:0;top:18px;width:5px;height:5px;
  background:var(--cyan-deep);transform:rotate(45deg);transition:background .25s,box-shadow .25s}
.ledger-row:hover::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ledger-row:last-child{border-bottom:0}
@media(max-width:720px){.ledger-row{grid-template-columns:1fr;gap:4px}}

/* --------------------------------------------------------------- code slab */
pre.code{
  position:relative;background:rgba(2,8,11,.85);border:1px solid var(--line);
  padding:17px 18px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.7;
  color:#A9E8DC;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
pre.code::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--cyan),transparent 70%);opacity:.8}
pre.code .c{color:var(--dimmer)}

/* ------------------------------------------------------------------- hero */
.hero{padding:76px 0 46px;position:relative}
.hero h1{position:relative}
.hero h1 .lit{
  background:linear-gradient(100deg,var(--cyan),#9BFFE8 40%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(63,232,208,.35));
}
.hero p.lead{font-size:17.5px;color:var(--dim);max-width:54ch}

/* ----------------------------------------------------------------- footer */
footer.foot{border-top:1px solid var(--line);margin-top:64px;padding:28px 0 48px;
  color:var(--dimmer);font-size:13px;font-family:var(--mono)}
footer.foot a{color:var(--dim)}

/* ------------------------------------------------------------------- misc */
.ic{vertical-align:-3px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.copy{display:flex;gap:8px;align-items:center}
.copy code{flex:1;background:rgba(2,8,11,.85);border:1px solid var(--line);padding:10px 12px;
  font-family:var(--mono);font-size:12.5px;overflow-x:auto;white-space:nowrap;color:var(--cyan)}
.copy .btn{flex:0 0 auto}

.side{display:grid;grid-template-columns:225px 1fr;gap:28px;align-items:start}
@media(max-width:860px){.side{grid-template-columns:1fr}}
.side nav a{display:flex;align-items:center;gap:10px;padding:10px 13px;color:var(--dim);font-size:13.5px;
  font-family:var(--mono);letter-spacing:.03em;border-left:2px solid transparent;transition:all .22s}
.side nav a:hover{text-decoration:none;color:var(--ink);background:rgba(63,232,208,.05);border-left-color:var(--line-3)}
.side nav a.on{background:linear-gradient(90deg,rgba(63,232,208,.12),transparent);
  color:var(--cyan);border-left-color:var(--cyan);box-shadow:-1px 0 16px -6px var(--cyan)}

/* progress rail shown during navigation (app.js) */
#rail{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:var(--glow-strong);
  transition:width .25s ease,opacity .4s}

/* toast (app.js) */
#toasts{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;flex-direction:column;gap:10px}
.toast{background:rgba(6,20,26,.95);border:1px solid var(--line-2);color:var(--ink);
  padding:11px 15px;font-size:13.5px;box-shadow:var(--glow);animation:toastin .35s ease both;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
@keyframes toastin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* reveal-on-scroll, applied by app.js; without JS everything is simply visible */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}

/* the boot line under the masthead */
.boot{font-family:var(--mono);font-size:11px;color:var(--cyan-deep);letter-spacing:.16em;
  text-transform:uppercase;padding:7px 0;border-bottom:1px solid var(--line);
  background:rgba(2,8,11,.6);overflow:hidden;white-space:nowrap}
.boot .cur{display:inline-block;width:7px;background:var(--cyan);animation:blink 1.1s steps(1) infinite;color:transparent}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ------------------------------------------------------------ keyboard use
   The interface is dark and low-contrast by design, which makes the default
   focus ring nearly invisible — so it is replaced rather than removed. Only
   :focus-visible, so a mouse click does not leave a ring behind. */
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:2px}
.ask .item:focus-within{background:rgba(63,232,208,.06);box-shadow:inset 2px 0 0 var(--cyan)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--cyan);color:var(--cyan-ink);
  padding:11px 18px;font-weight:600}
.skip:focus{left:12px;top:12px;text-decoration:none}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  #voidfield,.scan-veil{display:none}
  .js .reveal{opacity:1;transform:none}
}

/* ============================================================================
   /welcome — the Vault Core address
   The one screen that is allowed to be theatrical, because it is the only one
   where nothing is being decided. It still reads with the sound off, and it
   still reads with JavaScript off.
   ========================================================================= */
.core-stage{position:relative;min-height:calc(100vh - 140px);display:grid;place-items:start center;
  padding:40px 18px 70px}
.core-inner{position:relative;z-index:2;max-width:760px;width:100%;text-align:center}

/* Sized against viewport HEIGHT as well as width. The first version used width
   only, and on a 768px-tall laptop that pushed the Begin button — the one
   control that starts the whole thing — below the fold. The page looked like it
   simply did not work. */
.core-eye{position:relative;width:min(260px,52vw,30vh);height:min(260px,52vw,30vh);margin:0 auto 8px;
  display:grid;place-items:center}
.core-eye #corewave{position:absolute;inset:0;margin:auto}
.core-eye .ring{position:absolute;border:1px solid var(--line-2);border-radius:50%}
.core-eye .r1{inset:4%;border-style:dashed;animation:spin 26s linear infinite}
.core-eye .r2{inset:16%;border-color:var(--line);animation:spin 18s linear infinite reverse}
.core-eye .r3{inset:30%;border-color:var(--line-3);opacity:.5;animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.core-eye .pupil{position:absolute;width:15%;height:15%;background:var(--cyan);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 30px var(--cyan),0 0 70px rgba(63,232,208,.5);
  animation:corebreath 3.6s ease-in-out infinite}
@keyframes corebreath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.25);opacity:1}}
.core-stage.live .core-eye .pupil{animation-duration:1.5s}

.core-status{color:var(--cyan-deep);letter-spacing:.24em;text-transform:uppercase;font-size:11px;
  margin-bottom:18px}
.core-stage.live .core-status{color:var(--cyan);text-shadow:0 0 14px rgba(63,232,208,.6)}

.core-script{text-align:left;max-width:640px;margin:0 auto 10px;
  max-height:38vh;overflow-y:auto;padding:4px 6px;scrollbar-width:thin;
  mask-image:linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent)}
.core-script .line{margin:0 0 20px;opacity:.28;transition:opacity .5s,transform .5s;transform:translateY(4px)}
.core-script .line.spoken{opacity:.5}
.core-script .line.on{opacity:1;transform:none}
.core-script .hi{display:block;font-size:19px;line-height:1.75;color:var(--ink)}
.core-script .line.on .hi{text-shadow:0 0 22px rgba(63,232,208,.28)}
.core-script .en{display:block;font-size:13px;line-height:1.6;color:var(--dimmer);margin-top:6px;
  font-family:var(--mono)}
.core-script .line.on .en{color:var(--dim)}
@media(max-width:620px){.core-script .hi{font-size:17px}}

.core-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}

/* Until it is pressed once, the primary control breathes. It is the only thing
   on the page that does anything, so it should be the only thing moving. */
.btn.primary.pulse{animation:beckon 2.4s ease-in-out infinite}
@keyframes beckon{
  0%,100%{box-shadow:0 0 26px -6px rgba(63,232,208,.65)}
  50%    {box-shadow:0 0 44px 2px rgba(63,232,208,.85)}
}
.core-hint{color:var(--dim);font-size:13.5px;margin:0 0 20px;animation:hintfade 3s ease-in-out infinite}
.core-hint .en{display:block;font-family:var(--mono);font-size:11.5px;color:var(--dimmer);margin-top:3px}
@keyframes hintfade{0%,100%{opacity:.55}50%{opacity:1}}
.core-stage.live .core-hint,.core-stage.started .core-hint{display:none}
.core-foot{margin:22px 0 10px}
.core-note{max-width:46ch;margin:0 auto}
.core-note .en{color:var(--dimmer);font-family:var(--mono);font-size:12px}
.core-after{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:24px;
  animation:flashin .5s cubic-bezier(.2,.8,.2,1) both}

/* With JavaScript off there is no "on" line, so show the script plainly. */
html:not(.js) .core-script .line{opacity:1;transform:none}
html:not(.js) .core-controls #corestart,
html:not(.js) .core-controls #coremute{display:none}

@media (prefers-reduced-motion: reduce){
  .core-eye .ring,.core-eye .pupil,.btn.primary.pulse,.core-hint{animation:none}
}
@media(max-width:620px){
  .core-stage{padding-top:24px}
  .core-script{max-height:34vh}
}

/* the closing line of the address — a tagline, not another paragraph */
.core-script .line.closing .hi{font-size:21px;color:var(--cyan);letter-spacing:-.01em}
.core-script .line.closing .en{color:var(--dim)}
@media(max-width:620px){.core-script .line.closing .hi{font-size:18px}}