/* SNARC Labs — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f5f6f7;
  --surface-raised: #ffffff;
  --mist: #e2e5e9;
  --canvas: #f5f6f7;
  --surface-1: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #e2e5e9;
  --line: #e2e5e9;
  --line-subtle: #eceef1;
  --line-strong: #858c96;
  --ink: #16181b;
  --ink-muted: #69707a;
  --ink-faint: #69707a;
  --hover: #16181b0a;
  --press: #16181b14;
  --filament: #f25a2b;
  --on-filament: #16181b;
  --pearl-rose: #ffc4d8;
  --pearl-peach: #ffe0c2;
  --pearl-mint: #c6f0e0;
  --pearl-lilac: #d3c8ff;
  --on-pearl: #16181b;
  --overlay: #f5f6f7d1;
  --on-overlay: #16181b;
  --veil: #0f111366;
  --watermark: #f5f6f7e6;
  --shadow-raised: 0 1px 2px rgba(22, 24, 27, 0.06), 0 12px 32px -16px rgba(22, 24, 27, 0.28);
  --focus-ring: 0 0 0 2px #f5f6f7, 0 0 0 4px #16181b;
  --watermark-shadow: 0 1px 2px rgba(15, 17, 19, 0.5);
}
[data-theme="dark"] {
  --surface: #0a0a0a;
  --surface-raised: #171717;
  --mist: #1f1f1f;
  --canvas: #0a0a0a;
  --surface-1: #111111;
  --surface-2: #171717;
  --surface-3: #1f1f1f;
  --line: #262626;
  --line-subtle: #1c1c1c;
  --line-strong: #6e6e6e;
  --ink: #ededed;
  --ink-muted: #a1a1a1;
  --ink-faint: #8a8a8a;
  --hover: #ffffff0a;
  --press: #ffffff12;
  --filament: #ff7a50;
  --on-filament: #0a0a0a;
  --pearl-rose: #ffc4d8;
  --pearl-peach: #ffe0c2;
  --pearl-mint: #c6f0e0;
  --pearl-lilac: #d3c8ff;
  --on-pearl: #16181b;
  --overlay: #f5f6f7d1;
  --on-overlay: #16181b;
  --veil: #0f111366;
  --watermark: #f5f6f7e6;
  --shadow-raised: 0 0 0 1px #262626, inset 0 1px 0 #ffffff0a, 0 16px 40px -12px #000000b3;
  --focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ededed;
  --watermark-shadow: 0 1px 2px rgba(15, 17, 19, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --surface: #0a0a0a;
    --surface-raised: #171717;
    --mist: #1f1f1f;
    --canvas: #0a0a0a;
    --surface-1: #111111;
    --surface-2: #171717;
    --surface-3: #1f1f1f;
    --line: #262626;
    --line-subtle: #1c1c1c;
    --line-strong: #6e6e6e;
    --ink: #ededed;
    --ink-muted: #a1a1a1;
    --ink-faint: #8a8a8a;
    --hover: #ffffff0a;
    --press: #ffffff12;
    --filament: #ff7a50;
    --on-filament: #0a0a0a;
    --pearl-rose: #ffc4d8;
    --pearl-peach: #ffe0c2;
    --pearl-mint: #c6f0e0;
    --pearl-lilac: #d3c8ff;
    --on-pearl: #16181b;
    --overlay: #f5f6f7d1;
    --on-overlay: #16181b;
    --veil: #0f111366;
    --watermark: #f5f6f7e6;
    --shadow-raised: 0 0 0 1px #262626, inset 0 1px 0 #ffffff0a, 0 16px 40px -12px #000000b3;
    --focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ededed;
    --watermark-shadow: 0 1px 2px rgba(15, 17, 19, 0.5);
  }
}
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } }
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --pearl: linear-gradient(135deg, #ffc4d8, #ffe0c2 38%, #c6f0e0 68%, #d3c8ff);
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-reveal: 450ms;
  --duration-progress: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-progress: cubic-bezier(0.2, 0.7, 0.2, 1);
  --column-page: 480px;
  --sidebar: 240px;
  --tabbar: 64px;
  --topbar: 48px;
  --z-nav: 20;
  --z-menu: 30;
  --z-sheet: 40;
  --z-toast: 45;
}
.display { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.04em; }
.title { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.035em; }
.heading { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.data { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.12em; }

@font-face { font-family: "Geist"; src: url("/assets/geist.82ca9aff9e.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* The company site's layout, on the design system's tokens (design-system/tokens.css, prepended at build), both themes
   by the viewer's system setting. The landing is cinematic (spec 2026-11-04): a night hero stage with the chosen video
   behind its poster and the pearl aurora, sections that reveal as they scroll in, a gentle parallax. Every motion
   waits for the script (.js) and stops under reduced motion; without the script the page shows everything, still.
   The legal pages, the language choice and the 404 page stay quiet and readable. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
main:focus { outline: none; }

.skip {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: -100px;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-menu);
}
.skip:focus { inset-block-start: var(--space-4); }

.bar, main:not(.landing) {
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
/* On the landing the header lies over the hero's night stage, in light ink whatever the theme, on the hero's column. */
.site-header.on-hero {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 3;
  --ink: #ededed;
  --ink-muted: #a1a1a1;
  --line-strong: #f5f6f766;
  --hover: #ffffff1a;
  --focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ededed;
  color: var(--ink);
}
.site-header.on-hero .bar, .site-footer.wide .bar { max-width: 64rem; }
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.mark { display: inline-block; vertical-align: -0.2em; color: var(--ink); }
.mark .dot { fill: var(--filament); }
.lockup { font-size: 18px; letter-spacing: -0.045em; }
.lockup-a { font-weight: 600; }
.lockup-b { font-weight: 400; color: var(--ink-muted); }
.lang {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: 14px;
  text-decoration: none;
}
.lang:hover { background: var(--hover); }

main:not(.landing) { padding-block: var(--space-8) var(--space-16); }
main.landing { padding: 0; }
.section { max-width: 64rem; margin-inline: auto; padding: var(--space-16) var(--space-4); }
h1, h2, h3, h4 { line-height: 1.25; text-wrap: balance; }
h1.display { font-size: clamp(32px, 7vw, 40px); line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; margin: 0 0 var(--space-4); }
h1.title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.035em; margin: 0 0 var(--space-6); }
h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: var(--space-10) 0 var(--space-3); }
h3 { font-size: 17px; font-weight: 600; margin: var(--space-8) 0 var(--space-2); }
p, ul, ol, dl, blockquote, .table-wrap { margin: 0 0 var(--space-4); }
ul, ol { padding-inline-start: var(--space-6); }
li + li { margin-block-start: var(--space-1); }
.lead { font-size: 19px; line-height: 1.5; }
.summary { color: var(--ink-muted); }

/* The hero: a fixed night stage in both themes (BRAND.md: media is content, like overlay and veil). The chosen scene is
   dark, its people centre-right, the sea open on the left for the type. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: end;
  min-height: min(100svh, 56rem);
  background-color: #0a0a0a;
  color: #f5f6f7;
}
.hero-media, .aurora { position: absolute; inset: 0; }
.hero-poster, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.js .hero-video { opacity: 0; transition: opacity 1.2s var(--ease-standard); }
.hero.is-playing .hero-video { opacity: 1; }
/* The type sits on the open left of the frame: a scrim from the left and the bottom. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0a0a0ae6, #0a0a0a99 38%, transparent 78%), linear-gradient(0deg, #0a0a0acc, transparent 45%), linear-gradient(180deg, #0a0a0a99, transparent 8rem); }
/* The pearl aurora (a marketing exception to BRAND.md, recorded in the spec): soft light that, with the script, drifts
   and follows the scroll; without it, it stays still. */
.aurora {
  z-index: 1;
  inset: -20%;
  background:
    radial-gradient(40% 35% at 72% 28%, var(--pearl-rose), transparent 70%),
    radial-gradient(35% 30% at 58% 12%, var(--pearl-lilac), transparent 70%),
    radial-gradient(35% 30% at 88% 70%, var(--pearl-peach), transparent 70%),
    radial-gradient(30% 25% at 52% 88%, var(--pearl-mint), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.32;
  filter: blur(60px);
}
.js .aurora {
  translate: 0 calc(var(--scroll, 0) * 0.12px);
  animation: aurora 30s var(--ease-standard) infinite alternate;
}
@keyframes aurora { from { transform: rotate(0deg) scale(1); } to { transform: rotate(8deg) scale(1.12); } }
.hero.is-paused .aurora, .is-hidden .aurora { animation-play-state: paused; }
/* The AI disclosure (EU AI Act art. 50): the app's own label (src/styles/app.css .app-ai-label), its dark chip and
   light type, in the hero's bottom end corner, clear of the copy and of the header. #f5f6f7 on the chip reads at
   8.8:1 or more over any frame (8.84:1 over pure white, 18:1 over black). */
.ai-label { position: absolute; z-index: 3; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); margin: 0; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(15, 17, 19, 0.78); color: #f5f6f7; font: 600 12px/18px var(--font-sans); letter-spacing: 0.01em; pointer-events: none; white-space: nowrap; }
/* The top padding keeps the copy clear of the header that lies over the hero (64px tall). */
.hero-copy { position: relative; z-index: 2; width: 100%; max-width: 64rem; margin-inline: auto; padding: calc(64px + var(--space-8)) var(--space-4) var(--space-12); }
.hero h1.display { font-size: clamp(40px, 8vw, 88px); line-height: 1.02; letter-spacing: -0.045em; max-width: 12ch; margin: 0 0 var(--space-4); }
.hero .line { display: block; }
.hero .lead { max-width: 34rem; font-size: clamp(17px, 2vw, 21px); color: #f5f6f7cc; }
.cta { display: inline-block; margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-5); border: 1px solid #f5f6f766; border-radius: var(--radius-pill); font-weight: 600; text-decoration: none; }

/* The landing's sections (founder, 2026-11-04: a complete product page): bands of their own background (light on the
   theme, night like the hero's stage, a soft pearl tint), a larger type scale and more space. Each section shows its
   approved copy beside a live mockup in HTML and CSS of the app's own UI (create.css, app.css): decorative, hidden from
   assistive tech, its words the app's labels. */
:root { --wash: 38%; }
@media (prefers-color-scheme: dark) { :root { --wash: 14%; } }
.band { position: relative; isolation: isolate; overflow: clip; }
.light { background: var(--surface); }
/* Night: the hero's stage, light ink whatever the theme (the tokens' dark values). */
.night {
  --surface: #0a0a0a; --surface-1: #121212; --surface-2: #171717; --surface-raised: #171717; --mist: #1f1f1f;
  --line: #262626; --line-strong: #6e6e6e; --ink: #ededed; --ink-muted: #a1a1a1; --ink-faint: #8a8a8a; --hover: #ffffff0f;
  --focus-ring: 0 0 0 2px #0a0a0a, 0 0 0 4px #ededed; --shadow-raised: 0 0 0 1px #262626, inset 0 1px 0 #ffffff0a, 0 16px 40px -12px #000000b3;
  --wash: 14%;
  color-scheme: dark;
  background: var(--surface);
  color: var(--ink);
}
/* The pearl tint: a soft wash of the pearl over the theme's surface; secondary text a little darker to keep its contrast. */
.tint {
  --ink-muted: color-mix(in srgb, var(--ink) 80%, var(--surface));
  background: linear-gradient(180deg, color-mix(in srgb, var(--pearl-lilac) 13%, var(--surface)), color-mix(in srgb, var(--pearl-peach) 13%, var(--surface)));
}
@media (min-width: 48rem) { .landing .section { padding-block: 128px; } }
.landing .section-title { max-width: 18ch; margin: 0 0 clamp(32px, 5vw, 64px); font-size: clamp(34px, 5.4vw, 60px); line-height: 1.04; letter-spacing: -0.045em; }
.landing h3 { margin: 0 0 var(--space-2); font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; }
.landing h3 + p { margin: 0; color: var(--ink-muted); font-size: 16px; }

/* The mockups' parts: the app's frames, chips, buttons and posts at a small scale. A frame is abstract, like the app's
   empty media frame (BRAND.md: placeholders are never people): a pearl field, a low sun and a horizon. */
.mock { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; }
.frame { display: block; aspect-ratio: 4 / 5; border-radius: 12px; background: radial-gradient(circle at 70% 30%, #ffffffa6 0 11%, transparent 12%), linear-gradient(180deg, transparent 63%, #16181b24 63%), linear-gradient(160deg, var(--a, var(--pearl-rose)), var(--b, var(--pearl-lilac))); }
.frame-b { --a: var(--pearl-peach); --b: var(--pearl-mint); }
.frame-c { --a: var(--pearl-lilac); --b: var(--pearl-mint); }
.frame-d { --a: var(--pearl-rose); --b: var(--pearl-peach); }
.frame-e { --a: var(--pearl-mint); --b: var(--pearl-lilac); }
.icon { flex: none; display: block; }
.mock-box { display: grid; align-content: start; gap: 6px; min-height: 108px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); text-align: start; }
.mock-box-small { min-height: 0; }
.mock-label { color: var(--ink); font: 600 13px/18px var(--font-sans); }
.mock-text { min-height: 26px; color: var(--ink); font: 400 17px/26px var(--font-sans); letter-spacing: -0.008em; }
.js [data-type]::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.18em; background: currentColor; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { background-color: transparent; } }
.mock-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 13px/16px var(--font-sans); white-space: nowrap; }
.chip-key { color: var(--ink-muted); }
.chip-value { color: var(--ink); font-weight: 600; }
.chip-faces { display: inline-flex; padding-inline-start: 6px; }
.face { width: 18px; height: 18px; margin-inline-start: -6px; border-radius: 50%; background: var(--pearl); box-shadow: 0 0 0 2px var(--surface-raised); }
.face-b { background: linear-gradient(135deg, var(--pearl-mint), var(--pearl-lilac)); }
.mock-foot { display: flex; justify-content: flex-end; }
.btn-create { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); background: var(--pearl); background-size: 200% 100%; color: var(--on-pearl); font: 600 15px/20px var(--font-sans); }
.js .btn-create { animation: pearl-shift 6s var(--ease-standard) infinite alternate; }
@keyframes pearl-shift { to { background-position: 100% 0; } }
.post { display: grid; align-content: start; gap: var(--space-2); min-width: 0; padding: 10px; border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-raised); text-align: start; }
.post-author { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--pearl); }
.avatar-b, .avatar-d { background: linear-gradient(135deg, var(--pearl-peach), var(--pearl-mint)); }
.handle { flex: 1; min-width: 0; overflow: hidden; color: var(--ink); font: 600 12px/16px var(--font-sans); text-overflow: ellipsis; white-space: nowrap; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); }
.pill-version { margin-inline-start: auto; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font: 600 11px/14px var(--font-sans); }
.lineage { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--ink-muted); font: 500 11px/14px var(--font-mono); }
.lineage-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-follow { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--surface); font: 600 11px/16px var(--font-sans); }
.btn-quiet, .btn-solid { flex: 1; display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; font: 600 13px/16px var(--font-sans); }
.btn-quiet { box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); }
.btn-solid { background: var(--ink); color: var(--surface); }

/* What it is: three large feature cards, each its mockup over its copy; Create runs the full width beside its copy. */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.features > li { margin: 0; }
.feature { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 28px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.feature .mock {
  min-height: 300px;
  padding: clamp(20px, 4vw, 44px);
  background:
    radial-gradient(90% 80% at 0% 0%, color-mix(in srgb, var(--pearl-lilac) var(--wash), transparent), transparent 70%),
    radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--pearl-peach) var(--wash), transparent), transparent 70%);
}
.feature-copy { padding: 4px clamp(24px, 4vw, 40px) clamp(28px, 4vw, 40px); }
.feature-copy h3 { font-size: clamp(22px, 2.4vw, 28px); }
.feature-copy p { font-size: 17px; }
.mock-window { display: grid; gap: 14px; width: min(100%, 31rem); padding: 18px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-raised); }
/* The original, behind its Veil, takes the room its card needs (one-line title and pill); its version the rest. */
.post-pair { display: grid; grid-template-columns: minmax(0, 1.75fr) auto minmax(0, 1fr); align-items: start; gap: 10px; width: min(100%, 27rem); }
/* The original behind the app's Veil (design-system .sn-veil): a gallery still blurred here (scaled so the blur keeps
   no soft edge, clipped by its frame), the dim layer, the Veil's card with the lock, "Adults only" and the pill. Still:
   nothing on it moves. */
.frame-veiled { position: relative; overflow: hidden; background: var(--mist); }
.veiled-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.1); transform: scale(1.15); }
.veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; background: var(--veil); }
.veil-card { display: grid; justify-items: center; gap: 6px; max-width: 100%; padding: 10px 8px; border-radius: var(--radius-md); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow-raised); text-align: center; }
.veil-title { font: 600 12px/16px var(--font-sans); }
/* The AI label of the veiled post: below its frame, outside the frame's clip, the app's chip. */
.mock-ai { justify-self: start; max-width: 100%; padding: 0 6px; border-radius: var(--radius-pill); background: rgba(15, 17, 19, 0.78); color: #f5f6f7; font: 600 10px/16px var(--font-sans); white-space: nowrap; }
.veil-card .icon { width: 14px; height: 14px; }
.veil-card .pill-version { margin: 0; white-space: nowrap; }
/* Phones: a little less padding round the pair, a smaller arrow and Veil. */
@media (max-width: 40rem) {
  .feature .mock { padding: 14px 12px; }
  .post-pair { gap: 6px; }
  .post { padding: 8px; }
  .post-arrow { width: 24px; height: 24px; }
  .post-arrow .icon { width: 14px; height: 14px; }
  .veil { padding: 6px; }
  .veil-card { gap: 4px; padding: 8px 6px; border-radius: var(--radius-sm); }
  .veil-title { font-size: 11px; line-height: 14px; }
  .veil-card .pill-version { padding: 3px 8px; font-size: 10px; line-height: 14px; }
}
.post-arrow { align-self: center; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-raised); color: var(--ink); }
.post-version { margin-block-start: 40px; }
.feed { width: min(100%, 16rem); height: 300px; padding: 10px; overflow: hidden; border-radius: 22px; background: var(--surface-raised); box-shadow: var(--shadow-raised); -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.feed-track { display: grid; gap: 14px; }
.feed .post { padding: 0; background: none; box-shadow: none; }
.js .feed-track { animation: feed-scroll 22s var(--ease-standard) infinite alternate; }
@keyframes feed-scroll { to { transform: translateY(calc(-100% + 280px)); } }
@media (min-width: 56rem) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-1 { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
  .feature-1 .mock { min-height: 380px; }
  .feature-1 .feature-copy { padding: clamp(28px, 4vw, 48px); }
  .feature-1 .feature-copy h3 { font-size: clamp(28px, 3vw, 36px); }
}

/* Principles and safety: the guarantees, each a large pearl icon over its approved title and line. */
.glow { position: absolute; z-index: -1; inset: -20% -10% auto; height: 80%; background: radial-gradient(40% 45% at 25% 40%, var(--pearl-lilac), transparent 70%), radial-gradient(35% 40% at 80% 30%, var(--pearl-rose), transparent 70%); opacity: 0.16; filter: blur(60px); pointer-events: none; }
.guarantees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); }
.guarantees > li { margin: 0; }
.guarantee { padding: 32px 28px; border-radius: 24px; background: linear-gradient(180deg, #ffffff0d, #ffffff03); box-shadow: inset 0 0 0 1px var(--line); transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); }
.guarantee:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), 0 24px 48px -24px #000000; }
.guarantee-art { display: grid; place-items: center; width: 72px; height: 72px; margin-block-end: 28px; border-radius: 20px; background: var(--pearl); color: var(--on-pearl); box-shadow: 0 0 48px -6px color-mix(in srgb, var(--pearl-lilac) 55%, transparent); transition: transform var(--duration-slow) var(--ease-out); }
.guarantee:hover .guarantee-art { transform: rotate(-6deg) scale(1.06); }
@media (min-width: 64rem) { .guarantees { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* How it works: three big steps, each the member's own screen at that step. */
.step { counter-increment: step; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 20px 20px 28px; border-radius: 24px; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.step::before { content: counter(step, decimal-leading-zero); color: var(--ink-muted); font: 500 13px/1 var(--font-mono); letter-spacing: 0.12em; }
.step-mock { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 248px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); place-items: stretch; }
.step-mock .mock-text { font-size: 15px; line-height: 22px; }
.step-title { margin: 0; font-size: 21px; }
.wait-pill { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.wait-count { grid-row: span 2; color: var(--ink); font: 500 26px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.wait-bar { display: block; height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--mist); }
.wait-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--pearl); transform: scaleX(0.62); transform-origin: left center; }
.js .wait-fill { animation: wait-fill 7s var(--ease-progress) infinite; }
@keyframes wait-fill { from { transform: scaleX(0.12); } to { transform: scaleX(0.96); } }
.wait-eta { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.option { position: relative; }
.option.is-chosen { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.option-use { position: absolute; inset-inline: 6px; inset-block-end: 6px; padding: 3px 4px; border-radius: var(--radius-pill); background: var(--overlay); color: var(--on-overlay); font: 600 10px/14px var(--font-sans); text-align: center; }
.gm-title { color: var(--ink); font: 600 14px/18px var(--font-sans); }
.gm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gm-tile { position: relative; border-radius: 8px; }
.gm-badge { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--overlay); color: var(--on-overlay); font: 600 10px/16px var(--font-sans); }
.gm-actions { display: flex; gap: 8px; }

/* The gallery band: the founder's SFW stills, each with the app's AI label and its style. Without the script (or under
   reduced motion) a still grid; with it, one row drifting gently from end to end, paused off screen and on hover. */
.gallery .section-head { padding-block-end: clamp(32px, 5vw, 56px); }
.gallery-viewport { padding: 0 var(--space-4) clamp(64px, 10vw, 128px); }
.gallery-track { list-style: none; max-width: 64rem; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery-track > li { margin: 0; }
.tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.tile-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.tile:hover .tile-img { transform: scale(1.04); }
/* The app's AI label (app.css .app-tile .app-ai-label) and the style's name, both on its dark chip. */
.tile-label, .tile-style { position: absolute; z-index: 2; margin: 0; padding: 0 8px; border-radius: var(--radius-pill); background: rgba(15, 17, 19, 0.78); color: #f5f6f7; font: 600 11px/18px var(--font-sans); white-space: nowrap; pointer-events: none; }
.tile-label { inset-block-start: 10px; inset-inline-start: 10px; }
.tile-style { inset-block-end: 10px; inset-inline-start: 10px; font-size: 12px; line-height: 22px; padding: 0 10px; }
.tile-art { position: absolute; inset: 0; background: var(--pearl); }
@media (min-width: 48rem) { .gallery-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.js .gallery-track { display: flex; width: max-content; max-width: none; margin: 0; animation: gallery-drift 60s var(--ease-standard) infinite alternate; }
.js .gallery-track > li { flex: none; width: clamp(180px, 46vw, 280px); }
.js .gallery-track:hover, .js .gallery-track.is-held { animation-play-state: paused; }
/* The drift's pause and play control (WCAG 2.2.2), added by the script: its label names what a press does. */
.gallery .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.gallery .section-head .section-title { margin-block-end: 0; }
.drift-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: 600 14px/20px var(--font-sans); cursor: pointer; }
.drift-toggle:hover { background: var(--hover); }
.drift-toggle::before { content: ""; width: 10px; height: 12px; border-inline: 3px solid currentColor; box-sizing: border-box; }
.drift-toggle.is-held::before { border: 0; border-inline-start: 10px solid currentColor; border-block: 6px solid transparent; }
.js .drift-toggle .drift-play, .js .drift-toggle.is-held .drift-pause { display: none; }
.js .drift-toggle.is-held .drift-play { display: inline; }
@keyframes gallery-drift { to { transform: translateX(min(0px, calc(100vw - 100% - 2 * var(--space-4)))); } }

/* The FAQ: an accordion of <details>, open and closed by the browser alone (no script). */
.faq-layout { display: grid; gap: var(--space-4); }
.faq { border-block-start: 1px solid var(--line); }
.faq-item { border-block-end: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 22px 4px; list-style: none; cursor: pointer; font: 600 clamp(17px, 2vw, 20px)/1.35 var(--font-sans); letter-spacing: -0.015em; }
.faq-item summary::-webkit-details-marker { font-size: 0; }
.faq-item summary:hover .faq-mark { background: var(--hover); }
.faq-mark { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--duration-fast) var(--ease-standard); }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; width: 12px; height: 2px; margin-block-start: -1px; margin-inline-start: -6px; border-radius: 2px; background: currentColor; transition: transform var(--duration-base) var(--ease-out); }
.faq-mark::after { transform: rotate(90deg); }
.faq-item[open] .faq-mark { background: var(--ink); color: var(--surface); }
.faq-item[open] .faq-mark::after { transform: rotate(0deg); }
.faq-a { max-width: 40rem; padding: 0 4px 24px; color: var(--ink-muted); font-size: 17px; }
.faq-a p { margin: 0; }
@media (min-width: 56rem) { .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); align-items: start; gap: var(--space-12); } }

/* The closing band: the aurora again, a big line, the call to action. */
.closing { text-align: center; }
.closing-aurora { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.closing-light {
  position: absolute;
  inset: -30% -10%;
  background:
    radial-gradient(35% 40% at 30% 60%, var(--pearl-rose), transparent 70%),
    radial-gradient(30% 35% at 55% 35%, var(--pearl-lilac), transparent 70%),
    radial-gradient(30% 35% at 75% 65%, var(--pearl-mint), transparent 70%),
    radial-gradient(25% 30% at 45% 85%, var(--pearl-peach), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.3;
  filter: blur(70px);
}
.js .closing-light { animation: aurora 30s var(--ease-standard) infinite alternate; }
.landing .closing-copy { display: grid; justify-items: center; gap: var(--space-8); padding-block: clamp(112px, 16vw, 192px); }
.closing-line { max-width: 15ch; margin: 0; font-size: clamp(36px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -0.045em; }
.closing .cta { margin: 0; }

/* Parallax: a band's light drifts a little by its own place in the viewport (site.js --shift, -1 to 1). Loops pause
   off screen and in a hidden tab. */
.js [data-parallax] { translate: 0 calc(var(--shift, 0) * 48px); }
.is-off, .is-off *, .is-hidden [data-loop], .is-hidden [data-loop] * { animation-play-state: paused; }
/* Reveals in sequence: a row's items follow one another. */
.js .features > [data-reveal]:nth-child(2), .js .steps > [data-reveal]:nth-child(2), .js .faq > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.js .features > [data-reveal]:nth-child(3), .js .steps > [data-reveal]:nth-child(3), .js .faq > [data-reveal]:nth-child(3) { transition-delay: 180ms; }

/* The landing's footer: the mark and the description, the columns, then the copyright. */
.site-footer .bar.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-8) var(--space-6); padding-block: var(--space-16) var(--space-8); }
.footer-brand { grid-column: 1 / -1; }
.footer-blurb { max-width: 22rem; margin: var(--space-3) 0 0; color: var(--ink-muted); font-size: 15px; }
.footer-heading { margin: 0 0 var(--space-3); color: var(--ink); font: 600 14px/20px var(--font-sans); letter-spacing: 0; }
.footer-list, .footer-col .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: 15px; }
.footer-list li { margin: 0; }
.footer-list a, .footer-col .footer-links a { color: var(--ink-muted); text-decoration: none; }
.footer-list a:hover, .footer-col .footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-list a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.footer-list .lang { padding: 0; border: 0; border-radius: 0; font-size: inherit; }
.footer-list .lang:hover { background: none; }
.site-footer .bar.footer-base { padding-block: var(--space-5); border-block-start: 1px solid var(--line); }
@media (min-width: 48rem) {
  .site-footer .bar.footer-grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: auto; }
}

/* How it works: a numbered row that, with the script, drifts up to 16px by its own place in the viewport (site.js
   --steps-shift), within the section's 16px padding: nothing is cut, and the clip keeps the page from scrolling sideways. */
.how { overflow-x: clip; }
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
}
.steps > li { margin: 0; }
.js .steps { translate: clamp(-16px, calc(var(--steps-shift, 0) * 1px), 16px) 0; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reveals, under .js only: without the script nothing is hidden. */
.js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity var(--duration-reveal) var(--ease-out), translate var(--duration-reveal) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; translate: none; }
.js .guarantee[data-reveal] { transition: opacity var(--duration-reveal) var(--ease-out), translate var(--duration-reveal) var(--ease-out), transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out); }

.pages { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.pages li { display: grid; gap: 2px; margin: 0; }
.pages a { font-weight: 600; }

.translation { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--mist); }

.toc { margin: var(--space-6) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.toc-title { font-size: 14px; margin: 0 0 var(--space-2); letter-spacing: 0; }
.toc ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }

.legal { font-size: 16px; }
.legal blockquote {
  margin-inline: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--line-strong);
  background: var(--surface-1);
  border-radius: var(--radius-xs);
}
.legal blockquote > :last-child { margin-block-end: 0; }
.draft-title { font-size: 20px; font-weight: 600; }
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0 0.25em;
  border-radius: 4px;
  background: var(--mist);
}
.note, .blank {
  padding: 0 0.3em;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.note { background: var(--mist); color: var(--ink); }
.blank { border: 1px dashed var(--filament); font-weight: 600; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: start; vertical-align: top; padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--line); }
thead th { border-block-end-color: var(--line-strong); }
tbody th { font-weight: 600; width: 14rem; }

.site-footer { border-block-start: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; }
.site-footer .bar { padding-block: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.copyright { margin: 0; color: var(--ink-muted); font-size: 14px; }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-links li { margin: 0; }
.footer-links a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.root { padding-block-start: var(--space-16); }

@media (forced-colors: active) {
  .blank { border-color: CanvasText; }
}
@media print {
  .skip, .site-header nav, .toc { display: none; }
  body { background: #fff; color: #000; }
  .js [data-reveal] { opacity: 1; translate: none; }
  /* Paper is white: the colour tokens take their light values, whatever the theme. */
  :root, :root:not([data-theme]), [data-theme] {
    --surface: #ffffff; --surface-raised: #ffffff; --mist: #e2e5e9; --canvas: #ffffff; --surface-1: #ffffff; --surface-2: #ffffff;
    --surface-3: #e2e5e9; --line: #e2e5e9; --line-subtle: #eceef1; --line-strong: #858c96; --ink: #16181b; --ink-muted: #69707a;
    --ink-faint: #69707a; --hover: #16181b0a; --press: #16181b14; --filament: #f25a2b; --on-filament: #16181b;
    --overlay: #f5f6f7d1; --on-overlay: #16181b; --focus-ring: 0 0 0 2px #f5f6f7, 0 0 0 4px #16181b;
  }
  .ai-label { position: static; display: inline-block; margin: var(--space-2) var(--space-4); background: none; color: #000; border: 1px solid #000; }
  /* The landing's header and hero print in black, without the stage. */
  .site-header.on-hero { position: static; --ink: #000; --ink-muted: #000; }
  .hero { min-height: 0; background: none; color: #000; }
  .hero-media, .aurora, .hero::after { display: none; }
  .hero .lead { color: #000; }
  /* The bands print on paper: no night, no tint, no mockup, no drift. */
  .night, .tint { --surface: #ffffff; --surface-1: #ffffff; --ink: #000; --ink-muted: #000; --line: #e2e5e9; background: none; color: #000; }
  .mock, .glow, .closing-aurora, .gallery-viewport, .guarantee-art { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .aurora, .js .steps, .js [data-parallax] { translate: none; }
}