/* beta.deepinfinite.app — VARIANT B "the black hole" (design/signup-blackhole), note 11: the void's sheet
   (docs/proto/void/styles.css — Space Grotesk, A's funnel tokens, the quiet line, cursor-only field, pill) plus the
   canvas / scrim rules at the end. The Worker-rendered confirm / unsubscribe pages reuse this sheet with no canvas:
   body keeps its opaque var(--bg) ground. Space Grotesk: self-hosted OFL faces (fonts/OFL-SpaceGrotesk.txt),
   @font-face blocks verbatim from the product's 00000-head-fonts-tokens.css.part. */
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-grotesk-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/space-grotesk-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/space-grotesk-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/space-grotesk-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Courier Prime — the accent face, selectable per element from the panel (note 16); same OFL files as variant A */
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/courier-prime-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/courier-prime-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/courier-prime-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:#0e0e12; --panel:#16161c; --text:#e8e8ee; --text-dim:#9a9aa6; --text-faint:#82828f;
  --border:#2a2a34; --border-hi:#3a3a48; --accent:#215de2; --accent-hi:#4a82ff; --accent-hover:#3a6ef0;
  --accent-dim:rgba(33,93,226,.16); --on-accent:#fff; --ok:#3fb27f; --err:#e2554b;
  --font-primary:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent:"Courier Prime", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { background:var(--bg); color:var(--text); font-family:var(--font-primary); font-size:15px; line-height:1.5;
       -webkit-font-smoothing:antialiased; display:flex; align-items:center; justify-content:center; padding:32px 20px; position:relative; }
main { width:100%; max-width:var(--lo-form-width, 400px); position:relative; z-index:1; transform:translate(var(--lo-offset-x, 0px), var(--lo-offset-y, 0px)) scale(calc(var(--lo-block-scale, 1) * var(--fit-scale, 1))); transform-origin:50% 50%; }


.mark { display:block; width:var(--lo-mark-width, 184px); height:auto; margin:0 auto var(--lo-mark-gap, 44px); position:relative; }
/* the galaxy loop, masked to the parentheses (note 7). Sits over the raster masters; the mask is the option-07
   parens geometry, so only the two arcs show the moving texture. Vars come from the panel. */
.galaxy { position:absolute; inset:0; overflow:hidden; opacity:var(--gx-opacity, 1); mix-blend-mode:var(--gx-blend, normal);
  -webkit-mask:url("/brand/wordmark-option-07-parens-mask.svg") center / 100% 100% no-repeat; mask:url("/brand/wordmark-option-07-parens-mask.svg") center / 100% 100% no-repeat; }
.galaxy-video { display:block; width:100%; height:100%; object-fit:cover; transform:scale(var(--gx-scale, 1)); filter:brightness(var(--gx-bright, 1)) saturate(var(--gx-sat, 1)); }
body[data-galaxy="off"] .galaxy { display:none; }
.mark img { display:block; width:100%; height:auto; }
.mark .light { display:none; }

/* the line — understated (note 4): small, quiet, no weight */
.line { text-align:center; font-family:var(--lo-line-font, var(--font-primary)); font-size:var(--lo-line-size, 13px); line-height:1.5; font-weight:var(--lo-line-weight, 400); letter-spacing:var(--lo-line-tracking, .02em); color:var(--lo-line-color, var(--text-faint)); margin-bottom:var(--lo-line-gap, 18px); }

form { display:flex; flex-direction:column; gap:var(--lo-field-gap, 14px); }
.field { display:flex; flex-direction:column; gap:var(--lo-field-gap, 14px); }
input[type=email] { width:100%; min-width:0; height:var(--lo-field-height, 44px); background:transparent; border:0; border-bottom:1px solid var(--lo-underline-color, var(--border-hi));
        border-radius:0; color:var(--text); font:inherit; font-family:var(--lo-field-font, var(--font-primary)); font-size:var(--lo-field-size, 15px); text-align:center;
        padding:max(0px, calc(-2 * var(--lo-field-text-y, 0px))) 2px max(0px, calc(2 * var(--lo-field-text-y, 0px))); }
/* no placeholder — an empty field shows a blinking cursor at its centre until it is focused or filled (note 4) */
.field-wrap { position:relative; display:block; width:var(--lo-underline-width, 100%); margin:0 auto; }
.caret { position:absolute; left:50%; top:calc((var(--lo-field-height, 44px) - var(--lo-caret-height, 20px)) / 2); width:1px; height:var(--lo-caret-height, 20px); background:var(--lo-caret-color, var(--text)); animation:caret 1.1s steps(1,end) infinite; pointer-events:none; }
.field-wrap:focus-within .caret, input[type=email]:not(:placeholder-shown) ~ .caret { display:none; }
@keyframes caret { 0%, 55% { opacity:1; } 56%, 100% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation:none; opacity:.7; } }
/* Chrome paints an autofilled field with its own pale-blue fill (note 17: "awkward blue overlay"). The transition
   trick defers that paint indefinitely and the fill-color keeps the text ours — the field stays transparent. */
input[type=email]:-webkit-autofill, input[type=email]:-webkit-autofill:hover, input[type=email]:-webkit-autofill:focus {
  -webkit-text-fill-color:var(--text); caret-color:var(--text); transition:background-color 2147483647s ease-in-out 0s; box-shadow:none; }
input[type=email]::selection { background:rgba(33,93,226,.35); }
input[type=email]:focus { outline:none; border-bottom-color:var(--lo-underline-focus, var(--accent)); }
/* the pill — the parentheses' curve, carried into the one control on the page */
main button { height:var(--lo-button-height, 44px); width:auto; align-self:center; min-width:var(--lo-button-min-width, 160px); background:rgba(14,14,18,var(--lo-button-bg, .35)); color:var(--lo-button-text, var(--text)); border:1px solid var(--lo-button-border, var(--border-hi)); border-radius:var(--lo-button-radius, 999px);
         font:inherit; font-family:var(--lo-button-font, var(--font-primary)); font-size:var(--lo-button-size, 15px); font-weight:var(--lo-button-weight, 500); padding:0 var(--lo-button-pad-x, 32px); cursor:pointer; white-space:nowrap; transition:border-color .15s, color .15s; }
button:hover { border-color:var(--lo-button-hover, var(--accent)); color:var(--lo-button-hover, var(--accent-hi)); }
button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button[disabled] { cursor:not-allowed; color:var(--text-faint); border-color:var(--border); }
button[disabled]:hover { border-color:var(--border); color:var(--text-faint); }
input[disabled] { color:var(--text-faint); }
body[data-button="full"] button { width:100%; }

/* the consent line: text byte-identical to the Worker's CONSENT_TEXT; the break is a display:block span.
   HIDDEN at note 7 (Mark: remove it). The DOM stays so the consent guard still passes; whether the page may
   ship WITHOUT the consent text visible is a lane-A / counsel ruling, not a taste call — see the notes. */
.privacy { display:none; }
.privacy-x { font-size:12px; color:var(--text-faint); text-align:center; margin-top:22px; line-height:1.6; }
.privacy .nl { display:block; }

/* after submit (note 18): the form fades but KEEPS its box, and the done line is laid over it — the wordmark and the
   line never move. */
.stage { position:relative; }
.done { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text-dim);
        font-family:var(--lo-done-font, var(--font-accent)); font-size:var(--lo-done-size, 16px); opacity:0; visibility:hidden; pointer-events:none;
        transition:opacity .45s ease .2s, visibility 0s .2s; }
.done b { color:var(--text); font-weight:500; }
body.submitted form { opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s .25s; }
body.submitted .privacy, body.submitted .turnstile { display:none; }
body.submitted .done { opacity:1; visibility:visible; }

/* THE WORKER-RENDERED PAGES (confirm / unsubscribe / dead link) reuse this sheet, and they carry
   <p class="done static"> with NO body.submitted class to reveal it. Without this block the line
   inherits .done's overlay state — opacity:0, visibility:hidden, position:absolute over a .stage
   that is not there — so someone who clicked the confirmation link in their email would get the
   wordmark above nothing at all. Variant A's sheet has carried .done.static since it shipped; this
   sheet was written from the sign-up page alone and did not. Pinned in test/variant.test.mjs. */
.done.static { position:static; display:block; opacity:1; visibility:visible; pointer-events:auto;
               transition:none; }
.done.static p { margin-top:10px; }
.done.static a { color:var(--accent-hi); }

.hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.turnstile { display:flex; justify-content:center; }
.turnstile:empty { display:none; }
/* the notice ("Enter your email.", errors) is laid OVER the space below the block — it never takes layout room,
   so nothing above it moves (note 28) */
.msg { position:absolute; left:0; right:0; top:100%; margin-top:14px; font-size:12px; text-align:center; line-height:1.6; color:var(--err); }
.msg.quiet { color:var(--text-faint); }


/* ══ the black hole ════════════════════════════════════════════════════════════════════════════ */
body.blackhole { position:relative; }
.blackhole-canvas { position:fixed; inset:0; width:100% !important; height:100% !important; z-index:0; }
body.blackhole main { position:relative; z-index:2; }
/* the dark pool behind the text, in front of the hole — every value rides a CSS var set from CONFIG (blackhole.js) */
body.blackhole .scrim { position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse var(--sc-w, 34%) var(--sc-h, 42%) at 50% 50%, rgba(8,8,12,var(--scrim, .7)) var(--sc-in, 0%), rgba(8,8,12,0) var(--sc-out, 100%)); }
body.blackhole.no-webgl .scrim { display:none; }

/* ── the white-out outro (note 38): blackhole.js makes .flash and stamps body.outro-white on Notify ──────── */
.flash { position:fixed; inset:0; z-index:1; background:#fff; opacity:0; pointer-events:none; transition:opacity var(--outro-flash, 1.6s) var(--outro-ease, cubic-bezier(.55,0,1,.45)); }
body.outro-white .flash { opacity:1; }
body.outro-white .scrim, body.outro-white .mark, body.outro-white .line { opacity:0; transition:opacity var(--outro-fade, .7s) ease; }
body.outro-white .stage { position:static; }
body.outro-white main { transform:none; } /* dead centre: drop the block offset/scale for the end state */
body.outro-white form { transition:opacity var(--outro-fade, .7s) ease, visibility 0s var(--outro-fade, .7s); }
/* the text: plain, black, dead centre of the screen; comes up only once the white is complete */
body.outro-white .done { position:absolute; left:0; right:0; top:50%; bottom:auto; transform:translateY(-50%); color:#0e0e12;
  font-family:var(--font-primary); font-weight:400; font-size:var(--lo-done-size, 16px); letter-spacing:.01em;
  transition:opacity var(--outro-text, .9s) ease calc(var(--outro-flash, 1.6s) + var(--outro-hold, .3s)), visibility 0s calc(var(--outro-flash, 1.6s) + var(--outro-hold, .3s)); }
body.outro-white .done b { color:inherit; font-weight:400; }
body.outro-white .tune, body.outro-white .tune-diag { z-index:10; }

/* ── the tune panel (dev tools; ?tune or the review server) — top-right on wide screens, a bottom sheet on a phone ── */
.tune { position:fixed; z-index:10; font-size:12px; color:var(--text-dim); background:rgba(14,14,18,.94); border:1px solid var(--border);
  backdrop-filter:blur(8px); font-family:var(--font-primary, inherit); }
@media (min-width:720px) { .tune { top:12px; right:12px; width:380px; max-height:calc(100vh - 24px); border-radius:8px; display:flex; flex-direction:column; } }
@media (max-width:719px) { .tune { left:0; right:0; bottom:0; border-width:1px 0 0; } }
.tune-head { display:flex; align-items:center; gap:8px; padding:6px 8px; border-bottom:1px solid var(--border); }
.tune.collapsed .tune-head { border-bottom:0; }
.tune-head button, .tune-copy { width:auto; height:auto; padding:4px 10px; font-size:12px; border-radius:999px; background:transparent; color:var(--text-dim);
  border:1px solid var(--border-hi); cursor:pointer; font-family:inherit; }
.tune-head button:hover, .tune-copy:hover { color:var(--accent-hi); border-color:var(--accent); }
.tune-stat { flex:1; text-align:center; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.tune-diag { padding:4px 10px 6px; font-size:11px; color:var(--text-faint); border-bottom:1px solid var(--border); white-space:normal; line-height:1.5; font-variant-numeric:tabular-nums; }
.tune.collapsed .tune-diag { display:none; }
.tune-body { overflow-y:auto; padding:0 8px 10px; }
@media (max-width:719px) { .tune-body { max-height:55vh; } }
.tune-group { border-bottom:1px solid var(--border); padding-bottom:4px; }
.tune-group summary { cursor:pointer; list-style:none; font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi); padding:8px 0 4px; }
.tune-group summary::-webkit-details-marker { display:none; }
.tune-group summary::before { content:'▾ '; color:var(--text-faint); }
.tune-group:not([open]) summary::before { content:'▸ '; }
.tune-row { display:grid; grid-template-columns:1fr 130px 56px; align-items:center; gap:8px; padding:2px 0; }
.tune-row.changed .tune-name { color:var(--text); }
.tune-row.changed .tune-name::before { content:'• '; color:var(--accent-hi); }
.tune-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tune-row input[type=range] { width:100%; margin:0; accent-color:var(--accent); }
.tune-row input[type=color] { width:44px; height:22px; padding:0; border:1px solid var(--border-hi); background:transparent; border-radius:4px; }
.tune-row input[type=checkbox] { accent-color:var(--accent); justify-self:start; }
.tune-row select { font:inherit; font-size:12px; background:var(--panel); color:var(--text); border:1px solid var(--border-hi); border-radius:4px; padding:2px 4px; max-width:118px; }
.tune-val { text-align:right; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.tune-out h3 { font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-hi); margin:10px 0 6px; }
.tune-hint { text-transform:none; letter-spacing:0; color:var(--text-faint); font-weight:400; }
.tune-json { display:block; width:100%; min-height:72px; resize:vertical; background:var(--panel); color:var(--text); border:1px solid var(--border-hi); border-radius:6px;
  font:11px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; padding:6px 8px; margin-bottom:6px; }

/* animate group (tune panel) */
.tune-anim-add { display:grid; grid-template-columns:1fr 54px 54px 46px 74px auto; gap:4px; align-items:center; margin-bottom:6px; }
.tune-anim-add input, .tune-anim-add select { font:inherit; font-size:11px; background:var(--panel); color:var(--text); border:1px solid var(--border-hi); border-radius:4px; padding:3px 4px; min-width:0; width:100%; }
.tune-anim-add button, .tune-anim-row button { width:auto; height:auto; padding:3px 8px; font-size:11px; border-radius:999px; background:transparent; color:var(--text-dim); border:1px solid var(--border-hi); cursor:pointer; font-family:inherit; }
.tune-anim-row { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:2px 0; }
.tune-anim-row .tune-name { color:var(--text); }

/* outro section (tune panel) */
.tune-outro-how { font-size:11px; color:var(--text-faint); margin:0 0 6px; line-height:1.5; }
.tune-outro-add { grid-template-columns:52px 84px 46px auto auto auto; }
.tune-outro-cam { display:flex; gap:6px; align-items:center; font-size:11px; color:var(--text-faint); margin:2px 0 8px; }
.tune-outro-cam input { accent-color:var(--accent); }

/* ── the Worker-rendered /privacy notice (WEB-HYGIENE, 2026-09-04) ─────────────────────────────
   BOTH variant sheets carry this block, because worker/pages.js serves /privacy in whichever
   variant BETA_VARIANT selected — the same contract that forced `.done.static` into both sheets
   after the black-hole confirmation page rendered blank. test/privacy.test.mjs pins that every
   class the notice uses is styled in every allowed variant.
   The sign-up pages centre a 400px column in a flex body; a legal page is neither short nor
   centred, so `body.legal-page` (stamped by shell()) relaxes exactly those two things. */
body.legal-page { align-items:flex-start; padding:56px 20px 72px; }
body.legal-page main { max-width:660px; transform:none; }
body.legal-page .mark { margin-bottom:40px; }

.legal { text-align:left; color:var(--text-dim); font-size:14px; line-height:1.75; }
.legal h1 { font-size:20px; font-weight:400; color:var(--text); margin:0 0 6px; letter-spacing:-.01em; }
.legal h2 { font-size:13px; font-weight:400; color:var(--text); margin:30px 0 8px;
            letter-spacing:.06em; text-transform:uppercase; }
.legal p { margin:0 0 12px; }
.legal ul { margin:0 0 12px; padding-left:20px; }
.legal li { margin:0 0 6px; }
.legal a { color:var(--accent-hi); }
.legal-lede { color:var(--text-faint); margin-bottom:4px; }
.legal-contact { color:var(--text); overflow-wrap:anywhere; }
.legal-back { margin-top:34px; padding-top:18px; border-top:1px solid var(--border); font-size:13px; }