/* Theme model: the visitor chooses between two complete palettes. :root carries the night palette, whose accent family is measured from the brand asset (violet #5A43FA to blue #4471FA, pale #9BBAF6); it is also the default while has no data-theme attribute. :root[data-theme="light"] swaps in the light palette. The choice is persisted and applied before first paint by /site/theme-init.js. prefers-color-scheme is deliberately NOT consulted: the operating system must never silently override an explicit visitor choice, and a first visit always starts on the night palette. */ /* Scriptless fallback only. theme-init.js always writes data-theme before the first paint, so the rules below own the reached palette; this block can only influence a visitor who has not been given a choice yet, and it never carries palette tokens. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } :root { color-scheme: light dark; --bg: #111820; --surface: #18232c; --surface-soft: #202d37; --surface-raised: #1c2832; --text-1: #eef3f5; --text-2: #a6b4bd; --action: #96baf6; --action-strong: #aecbff; --action-ink: #111820; --live: #67a9a1; --border: #34434e; --border-strong: #53636e; --focus: #aecbff; --danger: #ff9aa6; --warning: #e0c37a; /* Ambient layer: the logo violet rises behind the Hero on the night canvas. Atmosphere only, never an interactive accent. */ --ambient-layer: radial-gradient(62% 50% at 74% 17%, color-mix(in srgb, #5a43fa 12%, transparent), transparent 72%), radial-gradient(52% 44% at 12% 6%, color-mix(in srgb, #4471fa 8%, transparent), transparent 70%); /* The copy scrim keeps its own vertical envelope. The veil is a canvas gradient that crosses the screenshot, so it needs a soft top and bottom edge even though the screenshot itself does not. This is the scrim's mask, never the screenshot's. */ --copy-scrim-mask-y: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .05) 1.5%, rgb(0 0 0 / .16) 4%, rgb(0 0 0 / .34) 8%, rgb(0 0 0 / .56) 13%, rgb(0 0 0 / .78) 19%, #000 28%, #000 66%, rgb(0 0 0 / .78) 76%, rgb(0 0 0 / .56) 84%, rgb(0 0 0 / .34) 90%, rgb(0 0 0 / .16) 95%, rgb(0 0 0 / .05) 98%, transparent 100%); --glass-edge: color-mix(in srgb, #fff 14%, transparent); --panel-shadow: 0 30px 80px color-mix(in srgb, #000 52%, transparent); --max: 1180px; --page-gutter: 32px; --section-y: 86px; --section-y-compact: 58px; --surface-pad: 28px 30px; --content-editorial: 980px; --touch-min: 44px; --touch-gap: 8px; --radius-control: 14px; --radius-surface: 20px; --radius-media: 28px; --radius-sheet: 32px; /* Type scale. One source for the public site: headings, body and the editorial lead all read from these tokens instead of repeating clamps. Display weight is 600, tracking never tighter than -0.025em, and public body copy never drops below 16px. */ --type-display: clamp(2.4rem, 5vw, 3.9rem); --type-title: clamp(2.5rem, 5.2vw, 4.4rem); --type-statement: clamp(1.9rem, 3.4vw, 3.1rem); --type-h2: clamp(1.6rem, 2.7vw, 2.2rem); --type-h3: 1.08rem; --type-lead: clamp(1.06rem, 1.6vw, 1.22rem); --type-body: 1rem; --type-sm: 0.88rem; --type-xs: 0.8rem; --leading-display: 1.12; --leading-heading: 1.24; --leading-snug: 1.35; --leading-body: 1.66; --leading-relaxed: 1.75; /* Tonal band: sections are separated by a surface tone, not by a rule. */ --band-surface: color-mix(in srgb, var(--surface-soft) 66%, var(--bg)); /* Control boundaries: on the light palette a quiet separator is too faint to read as a control, so the light branch uses the secondary ink instead. */ --control-border: var(--border-strong); --duration-press: 160ms; --duration-ui: 190ms; --duration-drawer: 260ms; --motion-reveal-duration: 500ms; --motion-reveal-distance: 16px; --motion-reveal-stagger: 64ms; --motion-sheen-duration: 820ms; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-emphasized-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Home cover: the aurora veil fills the first viewport and the page-turn hands the visitor to the homepage. The veil palette is measured from the brand asset alone (blue #4472FB 225, pale #9BBFFA 218, violet #655BFA 244). The violet end stays atmosphere; every control keeps the blue side. */ --nav-height: 66px; --motion-cover-turn: 640ms; --cover-canvas: #0a1017; --cover-canvas-top: #131f3a; --cover-veil-cyan: #38bdf8; --cover-veil-blue: #4472fb; --cover-veil-pale: #9bbffa; --cover-veil-violet: #655bfa; /* The navigation band of the cover is painted in the plain canvas colour and the aurora is masked to rise from under it, so navigation plus cover can never show a shade step at the header edge on either palette. */ --cover-top-band: linear-gradient(180deg, var(--bg) 0, var(--bg) var(--nav-height), transparent calc(var(--nav-height) + 168px)); --cover-top-mask: linear-gradient(180deg, transparent 0, transparent var(--nav-height), #000 calc(var(--nav-height) + 168px)); --cover-control-bg: color-mix(in srgb, var(--surface) 86%, transparent); --cover-control-border: color-mix(in srgb, var(--text-2) 82%, transparent); --cover-scrim: radial-gradient(58% 44% at 50% 44%, color-mix(in srgb, var(--bg) 74%, transparent) 0%, color-mix(in srgb, var(--bg) 44%, transparent) 46%, transparent 74%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 46%, transparent) 0%, transparent 22%, transparent 68%, color-mix(in srgb, var(--bg) 42%, transparent) 100%); --cover-text-shadow: 0 1px 20px color-mix(in srgb, var(--bg) 78%, transparent), 0 0 40px color-mix(in srgb, var(--bg) 48%, transparent); --cover-mark-glow: drop-shadow(0 0 18px color-mix(in srgb, var(--cover-veil-blue) 40%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--cover-veil-violet) 28%, transparent)); --font-display: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-body: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font: var(--font-body); --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; /* Atmosphere: the acoustic field, the measured authority-approved source. These values are the ones tuned for that bright asset on the night canvas. */ --atmosphere-image: url("/site/art/generated/lumina-acoustic-field-v2-1672.jpg"); --atmosphere-filter: brightness(.3) saturate(.66); --atmosphere-opacity: .58; --page-atmosphere-opacity: .34; --page-atmosphere-filter: none; } /* The light palette is only reachable through the visitor's explicit choice, persisted by /site/theme-init.js. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f7f8; --surface: #ffffff; --surface-soft: #eaf0f2; --surface-raised: #f9fbfc; --text-1: #16324a; --text-2: #5b6d7a; --action: #2f647f; --action-strong: #27546b; --action-ink: #ffffff; --live: #2d746c; --border: #d8e1e6; --border-strong: #b8c7cf; --focus: #2f647f; --danger: #a53c49; --warning: #7a5a16; --ambient-layer: none; --band-surface: color-mix(in srgb, var(--surface-soft) 84%, var(--bg)); --control-border: color-mix(in srgb, var(--text-2) 78%, transparent); --cover-canvas: #eef3f9; --cover-canvas-top: #dbe6f6; --cover-veil-cyan: #6cc4f2; --cover-veil-blue: #7d9bfb; --cover-veil-pale: #b9cdfe; --cover-veil-violet: #9a92fc; --cover-control-bg: color-mix(in srgb, var(--surface) 92%, transparent); --cover-control-border: color-mix(in srgb, var(--text-2) 82%, transparent); /* The light veil keeps the same composition, so its scrim is a tighter envelope around the lockup: the night scrim's wide radial washed the whole middle of the bright canvas toward white. */ --cover-scrim: radial-gradient(36% 26% at 50% 45%, color-mix(in srgb, var(--bg) 70%, transparent) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 48%, transparent 76%), linear-gradient(180deg, color-mix(in srgb, var(--bg) 34%, transparent) 0%, transparent 20%, transparent 70%, color-mix(in srgb, var(--bg) 30%, transparent) 100%); --cover-mark-glow: drop-shadow(0 12px 26px color-mix(in srgb, var(--cover-veil-violet) 30%, transparent)); --glass-edge: color-mix(in srgb, #fff 74%, transparent); --panel-shadow: 0 30px 80px color-mix(in srgb, var(--text-1) 13%, transparent); --atmosphere-filter: contrast(1.2) saturate(.92); --atmosphere-opacity: .68; --page-atmosphere-opacity: .24; --page-atmosphere-filter: none; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-width: 0; min-height: 100dvh; overflow-x: clip; background-color: var(--bg); background-image: var(--ambient-layer); background-repeat: no-repeat; background-position: center top; background-size: 100% 150vh; color: var(--text-1); font-family: var(--font); font-size: 16px; line-height: 1.66; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body, button, input, select, textarea { font-family: var(--font-body); } img, svg, video { max-width: 100%; } img { height: auto; } a { color: var(--action); text-underline-offset: 0.18em; } button, a { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--action) 18%, transparent); } button { color: inherit; } p, h1, h2, h3, ul, ol, dl, figure { margin-top: 0; } h1, h2, h3 { color: var(--text-1); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--type-display); line-height: var(--leading-display); margin-bottom: 22px; } h2 { font-size: var(--type-h2); line-height: var(--leading-heading); margin-bottom: 14px; } h3 { font-size: var(--type-h3); line-height: var(--leading-snug); margin-bottom: 8px; letter-spacing: -0.018em; } p { color: var(--text-2); text-wrap: pretty; } ::selection { background: var(--action); color: var(--surface); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } [hidden] { display: none !important; } .mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; } code { overflow-wrap: anywhere; } .skip-link { position: fixed; left: 16px; top: 10px; z-index: 1000; transform: translateY(-160%); background: var(--surface); color: var(--text-1); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 9px 12px; transition: transform var(--duration-ui) var(--ease-out); } .skip-link:focus { transform: translateY(0); } .site-nav { position: sticky; top: 0; z-index: 100; height: 66px; /* One nav surface for the whole site: the home's 92% alpha, no blur. Alpha compositing is cheap; backdrop-filter recomputes every frame. */ background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); } /* Home pulls the cover under the sticky header, so the shared --border hairline would draw a bright one-pixel line across that seam (measured adjacent step +41 night / -23 light). Home drops the line and ends the header in a short gradient fade instead: invisible over the cover's own canvas band, a soft edge once the page scrolls under the header. Other routes keep the separator. */ /* One shell measure for the whole public site: the container keeps the home's max-width and owns the gutter as inline padding, so content edges sit at 162/1278 (1116 content) at 1440 like the landing page does. */ .page, .nav-inner, .footer-inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--page-gutter); } .nav-inner { height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-1); font-size: 1.06rem; font-weight: 600; font-family: var(--font-display); text-decoration: none; letter-spacing: -0.02em; } .brand img { width: 30px; height: 30px; border-radius: 0; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; overscroll-behavior: contain; } .nav-links > a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: var(--radius-control); color: var(--text-2); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nav-links > a[aria-current="page"] { color: var(--text-1); background: var(--surface-soft); } /* The navigation download entry is an outlined control: the page keeps exactly one solid primary per screen, and the navigation never supplies one. */ .nav-links .nav-cta { margin-left: 8px; padding: 0 15px; background: var(--surface); color: var(--text-1); border: 1px solid var(--control-border); } /* Login sits at the far right, a hairline sibling of the CTA. */ .nav-login { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-1); font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out); } .menu-button, .menu-backdrop { display: none; } /* Palette switcher. The markup and its ARIA live in every page; theme-init.js adds the "js" class before first paint, so a scriptless visitor never sees a control that cannot change anything. */ .theme-switch { flex: 0 0 auto; display: none; align-items: center; gap: 9px; min-height: var(--touch-min); min-width: var(--touch-min); padding: 0 11px 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.84rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out); } html.js .theme-switch { display: inline-flex; } /* One identical switch on both palettes: a 36x20 track and a 16px thumb that only changes position, plus the visible state word, so the control can never read as a hollow pill in one palette and a filled pill in the other. */ .theme-switch-track { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border: 1px solid var(--border-strong); border-radius: 999px; background: color-mix(in srgb, var(--text-2) 46%, var(--surface-soft)); transition: background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out); } .theme-switch-thumb { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-1); transition: transform var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out); } .theme-switch-track { border-color: var(--control-border); } .theme-switch[aria-checked="true"] .theme-switch-track { border-color: var(--action); background: var(--action); } .theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(16px); background: var(--action-ink); } .theme-switch[aria-checked="true"] .theme-switch-label { color: var(--text-1); } .page { margin: 0 auto; } .section { padding-block: var(--section-y); } .section.compact { padding-block: var(--section-y-compact); } .section-head { max-width: 760px; margin-bottom: 34px; } .section-head p { margin-bottom: 0; max-width: 66ch; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .button, .share-actions button, .compat-check > button { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-control); padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 0.98rem; /* 24px line box at 0.98rem: reproduces the home button's `normal` leading so anchors and