/* K53 / DEFECTS #128 (SITE3, 2026-11-02): the static pages follow the reader's dark mode, like the app.
 *
 * `html[data-theme="dark"]` is set before paint by the app's own boot script (src/lib/theme/public-theme.ts,
 * PUBLIC_THEME_BOOT_SCRIPT: the reader's explicit Light/Dark on this device wins, else the system), injected by
 * `npm run home:sync`; these pages are then listed in PUBLIC_DARK_ROUTES. The palette is the app's dark tokens
 * (globals.css [data-theme="dark"]): warm ink on near-black, the brand indigo lifted, glass as smoked glass, and the
 * paper a person reads as the dark paper (#1E1D1B), never pure white. This file is shared by "/" , "/he" and
 * "/product" (the film's chrome, chapters and sections); the homepage's own pieces are in the lab's dark.css. */
html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #A09AF8; --primary-2: #BCB7FA; --secondary: #8DB2F8;
  --ink: #EDEBE6; --ink-2: #CBC7BE; --mute: #ABA69B; --bg: #121211;
  --action: #6A58F2; --action-hover: #6E5DF3; --action-ink: #FFFFFF;
  --glass: rgba(30, 29, 27, .78); --rim: rgba(255, 255, 255, .08); --rim-side: rgba(255, 255, 255, .08);
  --lift: 0 10px 30px -14px rgba(0, 0, 0, .6);
  background: #121211;
}
html[data-theme="dark"] body { color: var(--ink); background: radial-gradient(1200px 700px at 10% -10%, rgba(99, 102, 241, .16), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(219, 39, 119, .10), transparent 60%), #121211 fixed; }

/* the one nav: smoked glass */
html[data-theme="dark"] .nav::before { background: linear-gradient(180deg, rgba(30, 29, 27, .9), rgba(24, 23, 30, .86)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 30px -18px rgba(0, 0, 0, .7) !important; }
html[data-theme="dark"] .nav.solid::before { background: rgba(26, 25, 24, .96) !important; }
html[data-theme="dark"] .nav nav a { color: var(--ink-2); }
html[data-theme="dark"] .nav nav a:hover, html[data-theme="dark"] .nav nav a[aria-current="page"] { background: rgba(255, 255, 255, .06); color: var(--ink); }
html[data-theme="dark"] .nav .btn.btn-outline { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-theme="dark"] .nav .brand, html[data-theme="dark"] .nav .lang-chip { color: var(--ink); }
html[data-theme="dark"] .skip { background: #EDEBE6; color: #121211; }

/* the sections after the hero (#after: the film's shared sections) — the variables, then the literal whites */
html[data-theme="dark"] #after {
  --ink: #EDEBE6; --ink-2: #CBC7BE; --muted: #ABA69B; --soft: #8F8A80;
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .07);
  --paper: #121211; --paper-0: rgba(18, 18, 17, 0); --white: #1E1D1B;
  --indigo: #A09AF8; --indigo-2: #BCB7FA; --indigo-ink: #BCB7FA; --indigo-tint: rgba(160, 154, 248, .14);
  --copper-ink: #E8B482; --copper-tint: #2C2219;
  --glass: rgba(30, 29, 27, .8); --glass-2: rgba(30, 29, 27, .88); --rim-top: rgba(255, 255, 255, .07); --rim-side: rgba(255, 255, 255, .08);
  --lift: 0 10px 30px -14px rgba(0, 0, 0, .6); --lift-2: 0 24px 60px -28px rgba(0, 0, 0, .7);
  --focus: 0 0 0 3px rgba(160, 154, 248, .45), 0 0 0 1px #A09AF8;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(18, 18, 17, 0) 0, rgba(18, 18, 17, .6) 12vh, rgba(18, 18, 17, .92) 26vh, #121211 40vh);
}
html[data-theme="dark"] #after .x-h2 span { background-image: linear-gradient(95deg, #A5B4FC 0%, #C4B5FD 50%, #F0ABFC 100%); }
html[data-theme="dark"] #after .x-acc, html[data-theme="dark"] #after .x-faq-her, html[data-theme="dark"] #after .x-faq-her-in,
html[data-theme="dark"] #after .s-plan, html[data-theme="dark"] #after .s-toggle, html[data-theme="dark"] #after .s-trustl li,
html[data-theme="dark"] #after .s-buildrow, html[data-theme="dark"] #after .x-card, html[data-theme="dark"] #after .x-tile,
html[data-theme="dark"] #after .r5-art, html[data-theme="dark"] #after .r5-board, html[data-theme="dark"] #after .r5-chat,
html[data-theme="dark"] #after .x-feat, html[data-theme="dark"] #after .x-seg, html[data-theme="dark"] #after .v-card {
  background: rgba(30, 29, 27, .84) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 46px -32px rgba(0, 0, 0, .8) !important; color: var(--ink);
}
html[data-theme="dark"] #after .s-plan[data-featured] { box-shadow: 0 0 0 1.5px rgba(160, 154, 248, .7), 0 22px 46px -32px rgba(0, 0, 0, .8) !important; }
html[data-theme="dark"] #after .s-plan a, html[data-theme="dark"] #after .x-btn-ghost { background: rgba(255, 255, 255, .04); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
html[data-theme="dark"] #after .s-plan[data-featured] a, html[data-theme="dark"] #after .x-btn-ink { background: #6A58F2; color: #fff; box-shadow: none; }
html[data-theme="dark"] #after .s-toggle button.is-on { background: #2A2833; color: var(--ink); }
html[data-theme="dark"] #after details summary, html[data-theme="dark"] #after .x-acc-body p { color: var(--ink); }
html[data-theme="dark"] #after .x-acc-body p { color: var(--ink-2); }
html[data-theme="dark"] #after .x-acc details + details { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] #after input { background: #1E1D1B; color: var(--ink); }
html[data-theme="dark"] #after input::placeholder { color: #8F8A80; }
html[data-theme="dark"] #after .x-foot { color: var(--ink-2); }
html[data-theme="dark"] #after .x-foot a { color: var(--ink-2); }
html[data-theme="dark"] #after .x-foot a:hover { color: var(--ink); }
html[data-theme="dark"] #after img.v-face, html[data-theme="dark"] #after .s-faces img { box-shadow: 0 0 0 2px #121211, 0 0 0 4px var(--c, #6366F1); }

/* the film's chapters (/product): the words over the world stay readable on the night ground */
html[data-theme="dark"] .chapter h1, html[data-theme="dark"] .chapter h2 { color: #F5F3EE; }
html[data-theme="dark"] .chapter p, html[data-theme="dark"] .chapter .sub { color: #CBC7BE; }
html[data-theme="dark"] .chapter .eyebrow { color: #BCB7FA; }
html[data-theme="dark"] .ask { background: rgba(30, 29, 27, .9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px -24px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .ask textarea { color: var(--ink); background: transparent; }
html[data-theme="dark"] .traits li, html[data-theme="dark"] .hero-row li { background: rgba(30, 29, 27, .8); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .ghost { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-theme="dark"] #world { filter: brightness(.6) saturate(.9) contrast(1.05); }
html[data-theme="dark"] .scrim, html[data-theme="dark"] .stage::after { background: linear-gradient(180deg, rgba(18, 18, 17, .1), rgba(18, 18, 17, .55)); }
html[data-theme="dark"] .ui, html[data-theme="dark"] .ui .panel, html[data-theme="dark"] .g-card, html[data-theme="dark"] .room, html[data-theme="dark"] .offer, html[data-theme="dark"] .delivered {
  --ab-text: #EDEBE6; --ab-text-2: #CBC7BE; --ab-muted: #ABA69B; color: var(--ink);
}

/* the chapter cards over the world: smoked glass at night (their text is the warm ink above) */
html[data-theme="dark"] .chapter, html[data-theme="dark"] .chapter.hero, html[data-theme="dark"] .chapter.final {
  background: linear-gradient(160deg, rgba(30, 29, 27, .9) 0%, rgba(26, 25, 32, .86) 55%, rgba(24, 23, 34, .82) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(255, 255, 255, .08), 0 22px 60px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .chapter.hero .traits li { background: rgba(42, 40, 51, .8); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .chapter .fine { color: #ABA69B; }
html[data-theme="dark"] .chapter a:not(.btn) { color: #BCB7FA; }
/* the world itself: dimmed into dusk (the GL world, and the poster when there is no GL) */
html[data-theme="dark"] body.nogl #film .stage { background: linear-gradient(180deg, rgba(18, 18, 17, .42) 0, rgba(18, 18, 17, .5) 560px, #121211 900px), url(img/poster.webp) center top / 100% auto no-repeat; }
@media (max-width: 760px) { html[data-theme="dark"] body.nogl #film .stage { background-image: linear-gradient(180deg, rgba(18, 18, 17, .42) 0, rgba(18, 18, 17, .5) 300px, #121211 520px), url(img/poster-m.webp); background-size: auto, 200% auto; } }