@font-face {
font-family: Instrument Serif;
font-style: normal;
font-display: swap;
font-weight: 400;
src:
url(../fonts/instrument-serif-latin-ext-400-normal.C2je3j2s.woff2)
format("woff2"),
url(../fonts/instrument-serif-latin-ext-400-normal.CFCUzsTy.woff)
format("woff");
unicode-range:
U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Instrument Serif;
font-style: normal;
font-display: swap;
font-weight: 400;
src:
url(../fonts/instrument-serif-latin-400-normal.DnYpCC2O.woff2)
format("woff2"),
url(../fonts/instrument-serif-latin-400-normal.BVbkICAY.woff) format("woff");
unicode-range:
U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Instrument Serif;
font-style: italic;
font-display: swap;
font-weight: 400;
src:
url(../fonts/instrument-serif-latin-ext-400-italic.C9HzH3YL.woff2)
format("woff2"),
url(../fonts/instrument-serif-latin-ext-400-italic.D7-lnxEk.woff)
format("woff");
unicode-range:
U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Instrument Serif;
font-style: italic;
font-display: swap;
font-weight: 400;
src:
url(../fonts/instrument-serif-latin-400-italic.DKMiL14s.woff2)
format("woff2"),
url(../fonts/instrument-serif-latin-400-italic.u__WvvIK.woff) format("woff");
unicode-range:
U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: Archivo Variable;
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62% 125%;
src: url(../fonts/archivo-vietnamese-wdth-normal.rJmnGBSt.woff2)
format("woff2-variations");
unicode-range:
U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304,
U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: Archivo Variable;
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62% 125%;
src: url(../fonts/archivo-latin-ext-wdth-normal.7khWdh9v.woff2)
format("woff2-variations");
unicode-range:
U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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: Archivo Variable;
font-style: normal;
font-display: swap;
font-weight: 100 900;
font-stretch: 62% 125%;
src: url(../fonts/archivo-latin-wdth-normal.DY7AcnAa.woff2)
format("woff2-variations");
unicode-range:
U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--font-sans:
"Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--font-editorial: "Instrument Serif", "Times New Roman", serif;
--font-geo: "Archivo Variable", "Archivo", "Arial Black", sans-serif;
--fs-hero-editorial: 5rem;
--fs-hero-geo: 3.625rem;
--fs-h2: 2.5rem;
--fs-h2-editorial: 3.375rem;
--fs-display-editorial-xl: 4.5rem;
--fs-h3: 1.75rem;
--fs-body: 1rem;
--fs-lede: 1rem;
--fs-small: 0.875rem;
--fs-label: 0.75rem;
--fs-micro: 0.6875rem;
--track-mono: 0.09em;
--max: 1280px;
--band-narrow: 760px;
--band: 1000px;
--band-wide: 1140px;
--lede-max: 650px;
--gutter: 24px;
--frame-inset: 24px;
--space-section: 96px;
--space-block: 56px;
--space-hero-top: 64px;
--gap-command: 64px;
--gap-commands: 128px;
--r-1: 2px;
--r-2: 4px;
--r-pill: 999px;
--control-h: 50px;
--control-h-nav: 38px;
--header-h: 96px;
--header-h-stuck: 62px;
--ticker-h: 28px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (width <= 980px) {
:root {
--gutter: 20px;
}
}
@media (width <= 879px) {
:root {
--fs-hero-editorial: 2.6875rem;
--fs-hero-geo: 2.5rem;
--fs-h2: 1.75rem;
--fs-h2-editorial: 2.5rem;
--fs-display-editorial-xl: 2.625rem;
--fs-h3: 1.375rem;
--space-section: 64px;
--space-block: 40px;
--space-hero-top: 44px;
--gap-command: 24px;
--gap-commands: 72px;
--header-h: 56px;
--header-h-stuck: 56px;
--ticker-h: 32px;
}
}
:root,
[data-theme="paper"] {
--canvas: #0c0808;
--canvas-deep: #0e0909;
--panel: #1a1210b8;
--panel-soft: #1a121080;
--ink: #f6efea;
--ink-soft: #e8ded6;
--muted: #b8aca6;
--dim: #8a7f79;
--accent: #36ffab;
--accent-bright: #36ffab;
--accent-ink: #01231e;
--execution: #ff8a3d;
--heat: #ff4d5e;
--warning: #ffc44d;
--rule: #f6efea1f;
--rule-strong: #f6efea42;
--rule-warm: #d2865447;
--rule-warm-soft: #d286541a;
--btn-primary-bg: #36ffab;
--btn-primary-ink: #01231e;
--btn-tick: #36ffab;
--checker-color: #f6efea0b;
--header-veil: #0c0808d1;
}
[data-theme="terminal"] {
--canvas: #0c0808;
--canvas-deep: #0e0909;
--panel: #1a1210b8;
--panel-soft: #1a121080;
--ink: #f6efea;
--ink-soft: #e8ded6;
--muted: #b8aca6;
--dim: #8a7f79;
--accent: #36ffab;
--accent-bright: #36ffab;
--accent-ink: #01231e;
--execution: #ff8a3d;
--heat: #ff4d5e;
--warning: #ffc44d;
--rule: #f6efea1f;
--rule-strong: #f6efea42;
--rule-warm: #d2865447;
--rule-warm-soft: #d286541a;
--btn-primary-bg: #36ffab;
--btn-primary-ink: #01231e;
--btn-tick: #36ffab;
--checker-color: #f6efea0b;
--header-veil: #0c0808d1;
}
@font-face {
font-family: Geist;
src: url(../fonts/Geist-Variable.woff2) format("woff2");
font-weight: 100 900;
font-display: swap;
}
@font-face {
font-family: Geist Mono;
src: url(../fonts/GeistMono-Variable.woff2) format("woff2");
font-weight: 100 900;
font-display: swap;
}
*,
:before,
:after {
box-sizing: border-box;
}
html {
/* The framed area is the only scroll container: body is fixed to the
page-frame inset below, so nothing can render or scroll outside the
frame hairlines. */
height: 100%;
overflow: hidden;
background: var(--canvas);
scroll-behavior: smooth;
}
.page-grid {
/* Page-wide seamless hairline grid (Figma 1553:219): 54px pitch
(halved from the source tile's 108 after feedback the cells read too
large), one 1px line per cell edge, 8% ink — subliminal texture under
the content, never graph paper. Carrier and paint technique are both
load-bearing decisions earned the hard way in this Chromium build:
- A REAL DIV (.page-grid, first child of body), not a pseudo-element:
pseudo carriers proved unreliable here (body::before rendered zero
pixels; a main::before rule lost its inset and silently collapsed to a
0×0 box — computed-style readbacks kept looking "correct" while
nothing painted). Real fixed elements rasterize reliably everywhere.
- An SVG data-URI tile, not CSS gradients: body's own background
dropped the middle vertical lines of a 54px repeating-linear-gradient
(and again with explicit background-size tiles) through the scroller
rasterization path. SVG image tiling never drops a line — the
.page-gutter dither has painted on every page since launch.
- z-index:-1 + body's isolation:isolate keeps the grid above body's
canvas fill but below all in-flow content, so opaque clean zones
(footer, [data-theme] regions, home FAQ/platform bands) paint over it
by normal flow order.
- inset matches the page-frame border so the lattice origin sits on the
frame hairline (24px desktop / 8px ≤768px) and nothing paints in the
outer gutters.
- Tile color note: the ink alpha is baked into the URI (data URIs
cannot reference vars); keep in sync with --ink if it ever changes. */
position: fixed;
inset: 24px;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: 54px 54px;
}
/* Hex-inspired background hierarchy for pages that opt into .texture-mix.
The existing .page-grid remains untouched everywhere else. On Home and
Enterprise it becomes the always-on, lowest paper-grain layer; the dot
field and Cartesian grid are separate real elements so either can end
without also removing the paper texture beneath it. */
body.texture-mix {
--site-grain-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
--site-dot-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='.52' fill='%23e8dde3' fill-opacity='.3'/%3E%3C/svg%3E");
--site-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='1' height='48' fill='%23f6efea' fill-opacity='.045'/%3E%3Crect width='48' height='1' fill='%23f6efea' fill-opacity='.045'/%3E%3C/svg%3E");
--dot-focus-mask: radial-gradient(
ellipse 46% 42% at 50% 48%,
transparent 0%,
rgba(0, 0, 0, 0.12) 38%,
rgba(0, 0, 0, 0.55) 62%,
#000 88%
);
}
html[data-theme="daylight"] body.texture-mix {
--site-dot-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='3' cy='3' r='.5' fill='%237b7084' fill-opacity='.48'/%3E%3C/svg%3E");
--site-grid-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Crect width='1' height='48' fill='%2317120e' fill-opacity='.075'/%3E%3Crect width='48' height='1' fill='%2317120e' fill-opacity='.075'/%3E%3C/svg%3E");
}
.texture-mix .page-grid {
z-index: -3;
background-image: var(--site-grain-tile);
background-size: 180px 180px;
opacity: 1;
}
.page-dots,
.page-grid-region {
display: none;
}
.texture-mix .page-dots,
.texture-mix .page-grid-region {
display: block;
position: absolute;
pointer-events: none;
background-repeat: repeat;
}
.texture-mix .page-dots {
inset: 0 0 auto;
z-index: -1;
height: 760px;
background-image: var(--site-dot-tile);
background-size: 6px 6px;
opacity: 0.46;
-webkit-mask-image:
linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.72) 48%,
rgba(0, 0, 0, 0.28) 64%,
transparent 78%
),
var(--dot-focus-mask);
-webkit-mask-composite: source-in;
mask-image:
linear-gradient(
to bottom,
#000 0%,
#000 34%,
rgba(0, 0, 0, 0.72) 48%,
rgba(0, 0, 0, 0.28) 64%,
transparent 78%
),
var(--dot-focus-mask);
mask-composite: intersect;
}
.texture-mix .page-grid-region {
top: clamp(430px, 52vh, 560px);
left: 0;
right: 0;
z-index: -2;
width: auto;
height: 900px;
background-image: var(--site-grid-tile);
background-size: 48px 48px;
opacity: 0.34;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.22) 16%,
rgba(0, 0, 0, 0.65) 32%,
#000 48%,
#000 72%,
rgba(0, 0, 0, 0.45) 86%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.22) 16%,
rgba(0, 0, 0, 0.65) 32%,
#000 48%,
#000 72%,
rgba(0, 0, 0, 0.45) 86%,
transparent 100%
);
}
.texture-mix--enterprise .page-dots,
.texture-mix--left .page-dots {
--dot-focus-mask: radial-gradient(
ellipse 56% 44% at 40% 46%,
transparent 0%,
rgba(0, 0, 0, 0.12) 38%,
rgba(0, 0, 0, 0.55) 62%,
#000 88%
);
height: 720px;
opacity: 0.52;
}
.texture-mix--enterprise .page-grid-region,
.texture-mix--left .page-grid-region {
top: 420px;
height: 840px;
opacity: 0.5;
}
body {
background-color: var(--canvas);
/* Contain the z-index:-1 grid layer (.page-grid) within body's stacking
context: without an explicit context (this Chrome build doesn't give
position:fixed an implicit one under software compositing), the -1 layer
escapes behind body's own opaque canvas fill and vanishes. */
isolation: isolate;
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
margin: 0;
line-height: 1.6;
overflow-x: hidden;
/* Body IS the framed scroll pane: clipped to the page-frame inset so
scrolling happens inside the border and no content leaks past it. */
position: fixed;
inset: var(--frame-inset);
overflow-y: auto;
overscroll-behavior-y: contain;
scroll-behavior: smooth;
scrollbar-gutter: stable;
scrollbar-width: thin;
scrollbar-color: var(--rule-strong) transparent;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-thumb {
background: var(--rule-strong);
border: 4px solid transparent;
background-clip: content-box;
}
body::-webkit-scrollbar-thumb:hover {
background-color: var(--muted);
}
@media print {
html {
overflow: visible;
}
body {
position: static;
inset: auto;
overflow: visible;
}
}
img,
svg,
video {
max-width: 100%;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
cursor: pointer;
background: 0 0;
border: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
p {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
::selection {
background: var(--accent);
color: var(--accent-ink);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
body {
scroll-behavior: auto;
}
*,
:before,
:after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
[data-theme] {
background: var(--canvas);
color: var(--ink);
}
/* Full-width terminal bands are the page canvas already — the fill above
would only blank the body's page-wide grid across them. Drop the fill,
keep the token swap, so the grid runs through the band like everywhere
else. Component-level themed panels keep their opaque fill on purpose:
they read as objects sitting on the grid, not holes in it. */
.terminal-band {
position: relative;
background: transparent;
}
.container {
width: 100%;
max-width: var(--max);
/* Inset the content column from the viewport edges so bands read centered
rather than running edge-to-edge; never below the page gutter. */
padding-inline: clamp(var(--gutter), 7vw, 110px);
margin-inline: auto;
}
.band-narrow {
max-width: var(--band-narrow);
margin-inline: auto;
}
.band {
max-width: var(--band);
margin-inline: auto;
}
.band-wide {
max-width: var(--band-wide);
margin-inline: auto;
}
.section {
padding-block: var(--space-section);
position: relative;
}
[id] {
scroll-margin-top: 96px;
}
.section-tight {
padding-block: var(--space-block);
position: relative;
}
.page-frame {
inset: var(--frame-inset);
border: 1px solid var(--rule);
pointer-events: none;
z-index: 90;
position: fixed;
}
.page-frame:before {
content: "";
background:
linear-gradient(var(--rule-strong), var(--rule-strong)) left 0 top 0 / 7px
1px,
linear-gradient(var(--rule-strong), var(--rule-strong)) left 0 top 0 / 1px
7px,
linear-gradient(var(--rule-strong), var(--rule-strong)) right 0 top 0 / 7px
1px,
linear-gradient(var(--rule-strong), var(--rule-strong)) right 0 top 0 / 1px
7px,
linear-gradient(var(--rule-strong), var(--rule-strong)) left 0 bottom 0 /
7px 1px,
linear-gradient(var(--rule-strong), var(--rule-strong)) left 0 bottom 0 /
1px 7px,
linear-gradient(var(--rule-strong), var(--rule-strong)) right 0 bottom 0 /
7px 1px,
linear-gradient(var(--rule-strong), var(--rule-strong)) right 0 bottom 0 /
1px 7px;
background-repeat: no-repeat;
position: absolute;
inset: -1px;
}
.page-gutter {
mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
mask-position:
0 0,
var(--frame-inset) var(--frame-inset);
mask-size:
100% 100%,
calc(100% - 2 * var(--frame-inset)) calc(100% - 2 * var(--frame-inset));
-webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
mask-repeat: no-repeat;
mask-composite: exclude;
-webkit-mask-position:
0 0,
var(--frame-inset) var(--frame-inset);
-webkit-mask-size:
100% 100%,
calc(100% - 2 * var(--frame-inset)) calc(100% - 2 * var(--frame-inset));
-webkit-mask-composite: xor;
pointer-events: none;
z-index: 89;
background-image: url("data:image/svg+xml;utf8,");
background-size: 4px 4px;
position: fixed;
inset: 0;
-webkit-mask-repeat: no-repeat;
}
@media (width <= 768px) {
.page-frame,
body,
.page-grid {
inset: 8px;
}
.page-gutter {
display: none;
}
.texture-mix .page-dots {
height: 640px;
opacity: 0.38;
--dot-focus-mask: radial-gradient(
ellipse 84% 46% at 50% 44%,
transparent 0%,
rgba(0, 0, 0, 0.12) 38%,
rgba(0, 0, 0, 0.55) 62%,
#000 92%
);
}
.texture-mix .page-grid-region,
.texture-mix--enterprise .page-grid-region,
.texture-mix--left .page-grid-region {
top: 520px;
width: 100%;
height: 760px;
opacity: 0.32;
}
.texture-mix--enterprise .page-dots,
.texture-mix--left .page-dots {
opacity: 0.48;
}
.texture-mix--enterprise .page-grid-region,
.texture-mix--left .page-grid-region {
opacity: 0.46;
}
}
.tex {
position: relative;
}
.tex > * {
z-index: 1;
position: relative;
}
/* All texture layers (grid, checker, glow, film-grain noise) removed by
design decision — .tex sections now sit on the flat canvas, so the top
band and the stuck header match the page tone exactly. */
[data-theme="terminal"] .h-editorial,
[data-theme="terminal"] .h-editorial-xl {
background: linear-gradient(55deg, #f6efea 30%, #36ffab9e 130%);
color: #0000;
background-clip: text;
}
.copy-wash {
position: relative;
}
.copy-wash:before {
content: "";
z-index: -1;
pointer-events: none;
background: radial-gradient(
58% 62% at 50% 42%,
var(--canvas) 12%,
color-mix(in srgb, var(--canvas) 62%, transparent) 58%,
transparent 80%
);
position: absolute;
inset: -80px -140px;
}
.texture-mix .copy-wash:before {
display: none;
}
.display-editorial {
font-family: var(--font-editorial);
font-style: italic;
font-weight: 400;
font-size: var(--fs-hero-editorial);
letter-spacing: normal;
line-height: 1.15;
}
.display-geo {
font-family: var(--font-geo);
font-weight: 640;
font-stretch: 125%;
font-size: var(--fs-hero-geo);
letter-spacing: -0.031em;
line-height: 1.1;
}
.h-editorial {
font-family: var(--font-editorial);
font-style: italic;
font-weight: 400;
font-size: var(--fs-h2-editorial);
letter-spacing: normal;
line-height: 1.12;
}
.h-editorial-xl {
font-family: var(--font-editorial);
font-style: italic;
font-weight: 400;
font-size: var(--fs-display-editorial-xl);
letter-spacing: normal;
line-height: 1.15;
}
.h-section {
font-family: var(--font-geo);
font-weight: 600;
font-stretch: 118%;
font-size: var(--fs-h2);
letter-spacing: -0.025em;
line-height: 1.3;
}
.h-card {
font-family: var(--font-geo);
font-weight: 600;
font-stretch: 112%;
font-size: var(--fs-h3);
letter-spacing: -0.015em;
line-height: 1.3;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--muted);
font-weight: 400;
}
/* Eyebrow label icons — a small Material Symbols Sharp glyph per label's
meaning (inline