@font-face {
font-family: "Geist Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica");
ascent-override: 95.94%;
descent-override: 28.16%;
line-gap-override: 0%;
size-adjust: 104.76%;
}
@font-face {
font-family: "Geist Mono Fallback";
src: local("Menlo"), local("Menlo-Regular"), local("DejaVu Sans Mono"), local("DejaVuSansMono"),
local("Courier New"), local("CourierNewPSMT");
ascent-override: 100.85%;
descent-override: 29.6%;
line-gap-override: 0%;
size-adjust: 99.65%;
}
:root {
color-scheme: dark;
--bg: #0A0B10;
--panel: #0F1117;
--raised: #131621;
--line: #232633;
--ink: #F2F0EB;
--text-2: #BDB9B1;
--muted: #8C909C;
--faint: #5D6171;
--accent: #FFB23F;
--hot: #FFF0D2;
--accent-ink: #FFB23F;
--on-accent: #0A0B10;
--ink-rgb: 242 240 235;
--bg-rgb: 10 11 16;
--win: #0B0D12;
--win-bar: #0E1016;
--win-bar-top: #12141B;
--win-line: #1B1E28;
--win-edge: #262A36;
--win-raised: #1A1D27;
--dim: #3A3E4B;
--dim-2: #4A4E5C;
--accent-deep: #1A140A;
--tk-p: #6E7383;
--tk-num-add: #6B5A3A;
--tk-kw: #8FA1C7;
--tk-str: #C9B892;
--shadow-deep: 0 40px 100px -40px rgba(0, 0, 0, .9);
--font-sans: "Geist", "Noto Sans", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "Geist Mono", "Noto Sans Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
--ac-sans: var(--font-sans);
--font-display: "Schibsted Grotesk", var(--font-sans);
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-96: 96px;
--space-128: 128px;
--space-160: 160px;
--radius-tag: 2px;
--radius-control: 4px;
--radius-panel: 6px;
--radius-cell: 13%;
--content-max: 1200px;
--gutter: 16px;
--nav-height: 64px;
--section-pad: 104px;
--body-to-visual: 32px;
--measure-body: 64ch;
--measure-sub: 52ch;
--measure-h2: 20em;
--ease-out: cubic-bezier(.2, .8, .2, 1);
--ease-absorb: cubic-bezier(.6, 0, .9, .4);
--ease-charge: cubic-bezier(.3, 1.5, .6, 1);
--dur-ui: 150ms;
--dur-pulse: .3s;
--dur-charge: .45s;
--dur-hero: 2.35s;
}
@media (min-width: 768px) {
:root {
--gutter: 32px;
--section-pad: 144px;
--body-to-visual: 48px;
}
}
@media (min-width: 1024px) {
:root { --section-pad: 176px; }
}
@media (min-width: 1280px) {
:root { --gutter: 40px; }
}
*, *::before, *::after { box-sizing: border-box; }
html {
background: var(--bg);
color: var(--ink);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none;
}
::selection { background: var(--ink); color: var(--bg); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, pre { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; font-size: inherit; }
:where(ul[class], ol[class]) { margin: 0; padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
svg.ac-mark { max-width: none; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
code, pre, kbd, samp { font-family: var(--font-mono); font-size: inherit; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--nav-height) + 16px); }
#root { position: relative; }
.site-header { position: sticky; top: 0; z-index: 10; }
main, .site-footer { position: relative; z-index: 1; }
#main:focus { outline: none; }
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 2px;
}
#main:focus-visible { outline: none; }
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 100;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 16px;
border-radius: var(--radius-control);
background: var(--raised);
color: var(--ink);
font-size: 15px;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1;
}
.skip-link:not(:focus):not(:focus-visible) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.t-h1 {
font-size: 38px;
line-height: 1.02;
letter-spacing: -.045em;
font-weight: 400;
color: var(--text-2);
}
.t-h1 .t-h1-strong { font-weight: 600; color: var(--ink); }
.t-h1-line { display: block; white-space: nowrap; }
.t-category {
font-size: 30px;
line-height: 1.08;
letter-spacing: -.04em;
font-weight: 600;
color: var(--muted);
}
.t-h2 {
font-size: 28px;
line-height: 1.1;
letter-spacing: -.035em;
font-weight: 600;
color: var(--ink);
max-width: var(--measure-h2);
text-wrap: balance;
}
.t-numeral {
font-size: 48px;
line-height: 1;
letter-spacing: -.04em;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.t-h3 {
font-size: 20px;
line-height: 1.3;
letter-spacing: -.015em;
font-weight: 500;
color: var(--ink);
}
.t-sub {
font-size: 17px;
line-height: 1.55;
letter-spacing: -.005em;
color: var(--text-2);
max-width: var(--measure-sub);
}
.t-lead {
font-size: 20px;
line-height: 1.4;
letter-spacing: -.01em;
color: var(--ink);
}
.t-body {
font-size: 16px;
line-height: 1.6;
color: var(--text-2);
max-width: var(--measure-body);
}
.t-chat {
font-size: 15px;
line-height: 1.5;
}
.t-eyebrow {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.4;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.t-label {
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.3;
font-weight: 400;
letter-spacing: 0;
}
.t-code {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.7;
font-weight: 400;
}
.t-email {
font-family: var(--font-mono);
font-size: 18px;
line-height: 1.3;
color: var(--ink);
}
.t-mono { font-family: var(--font-mono); }
@media (max-width: 359.98px) {
.t-h1 { font-size: 32px; }
}
@media (min-width: 768px) {
.t-h1 { font-size: 64px; }
.t-category { font-size: 48px; }
.t-h2 { font-size: 36px; }
.t-numeral { font-size: 80px; }
.t-h3 { font-size: 22px; }
.t-sub { font-size: 18px; }
.t-lead { font-size: 22px; }
.t-body { font-size: 17px; }
.t-label { font-size: 12px; }
.t-code { font-size: 13px; }
.t-email { font-size: 20px; }
}
@media (min-width: 1024px) {
.t-h1 { font-size: 72px; }
.t-h2 { font-size: 40px; }
.t-sub { font-size: 19px; }
.t-email { font-size: 22px; }
}
@media (min-width: 1280px) {
.t-h1 { font-size: 88px; }
.t-category { font-size: 56px; }
.t-h2 { font-size: 44px; }
.t-numeral { font-size: 96px; }
}
.c-ink { color: var(--ink); }
.c-text-2 { color: var(--text-2); }
.c-accent { color: var(--accent-ink); }
.container {
width: 100%;
max-width: calc(var(--content-max) + 2 * var(--gutter));
margin-inline: auto;
padding-inline: var(--gutter);
}
.grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
}
.grid > .cs-1 { grid-column-start: 1; }
.grid > .cs-2 { grid-column-start: 2; }
.grid > .cs-3 { grid-column-start: 3; }
.grid > .cs-4 { grid-column-start: 4; }
.grid > .cs-5 { grid-column-start: 5; }
.grid > .cs-6 { grid-column-start: 6; }
.grid > .cs-7 { grid-column-start: 7; }
.grid > .cs-8 { grid-column-start: 8; }
.grid > .cs-9 { grid-column-start: 9; }
.grid > .cs-10 { grid-column-start: 10; }
.grid > .cs-11 { grid-column-start: 11; }
.grid > .cs-12 { grid-column-start: 12; }
.grid > .ce-1 { grid-column-end: 2; }
.grid > .ce-2 { grid-column-end: 3; }
.grid > .ce-3 { grid-column-end: 4; }
.grid > .ce-4 { grid-column-end: 5; }
.grid > .ce-5 { grid-column-end: 6; }
.grid > .ce-6 { grid-column-end: 7; }
.grid > .ce-7 { grid-column-end: 8; }
.grid > .ce-8 { grid-column-end: 9; }
.grid > .ce-9 { grid-column-end: 10; }
.grid > .ce-10 { grid-column-end: 11; }
.grid > .ce-11 { grid-column-end: 12; }
.grid > .ce-12 { grid-column-end: 13; }
}
.section { padding-block: var(--section-pad); }
.section-head > .t-eyebrow + .t-h2 { margin-top: 16px; }
.section-head > .t-h2 + .t-body { margin-top: 24px; }
.body-to-visual { margin-top: var(--body-to-visual); }
.row-rule { border-top: 1px solid var(--line); padding-top: 40px; }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; height: 0; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.d-block { display: block; }
.u-panel {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
}
.u-raised {
background: var(--raised);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
}
.btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 20px;
border-radius: var(--radius-control);
font-size: 15px;
line-height: 1;
font-weight: 500;
letter-spacing: -.01em;
white-space: nowrap;
transition: background-color var(--dur-ui) linear, border-color var(--dur-ui) linear, color var(--dur-ui) linear;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--hot); }
.btn-ghost {
height: 44px;
padding: 0 16px;
border: 1px solid var(--faint);
color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-compact { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-compact::before { content: ""; position: absolute; inset: -4px 0; }
.text-link {
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--faint);
text-underline-offset: .28em;
transition: text-decoration-color var(--dur-ui) linear;
}
.text-link:hover { text-decoration-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
.section-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.section-head > * { grid-column: 1 / -1 !important; margin-inline: auto; max-width: 22em; text-wrap: balance; }
.reveal-on [data-reveal] {
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal-on [data-reveal="in"] { opacity: 1; transform: none; }
.stmt { width: 100%; }
.t-h1, .t-category, .stmt-title, .stmt.is-inline, .rfig-title { font-family: var(--font-display); }
.stmt-title {
display: block;
margin: 0;
max-width: 15em;
font-size: 30px;
line-height: 1.08;
letter-spacing: -.035em;
font-weight: 500;
color: var(--ink);
text-wrap: balance;
}
.stmt-lead {
display: block;
margin: 16px 0 0;
max-width: 34em;
font-size: 18px;
line-height: 1.5;
letter-spacing: -.01em;
font-weight: 400;
color: var(--text-2);
text-wrap: pretty;
}
@media (min-width: 768px) {
.stmt-title { font-size: 40px; }
.stmt-lead { margin-top: 20px; font-size: 20px; }
}
@media (min-width: 1024px) {
.stmt-title { font-size: 46px; }
.stmt.is-split {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: 24px;
align-items: start;
}
.stmt.is-split .stmt-title { grid-column: 1 / 6; }
.stmt.is-split .stmt-title:only-child { grid-column: 1 / -1; }
.stmt.is-split .stmt-lead { grid-column: 7 / 13; margin-top: 0; padding-top: 8px; font-size: 22px; }
}
@media (min-width: 1280px) { .stmt-title { font-size: 52px; } }
.stmt.is-inline {
max-width: 20em;
font-size: 30px;
line-height: 1.08;
letter-spacing: -.035em;
font-weight: 500;
color: var(--muted);
text-wrap: balance;
}
.stmt.is-inline .stmt-title, .stmt.is-inline .stmt-lead {
display: inline;
margin: 0;
padding: 0;
max-width: none;
font: inherit;
letter-spacing: inherit;
color: inherit;
}
.stmt.is-inline .stmt-title { color: var(--ink); }
@media (min-width: 768px) { .stmt.is-inline { font-size: 40px; } }
@media (min-width: 1024px) { .stmt.is-inline { font-size: 46px; } }
@media (min-width: 1280px) { .stmt.is-inline { font-size: 52px; } }
.section-head.is-statement { text-align: left; align-items: stretch; }
.section-head.is-statement > * { margin-inline: 0; max-width: none; text-wrap: pretty; }
.section-head > .t-eyebrow + .stmt { margin-top: 20px; }
.section-head { width: 100%; max-width: none !important; margin-inline: auto; }
.section-lead {
margin: 24px auto 0;
max-width: 62ch;
text-align: center;
text-wrap: pretty;
}
.section { position: relative; }
.section::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(calc(100% - 2 * var(--gutter)), var(--content-max));
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
pointer-events: none;
}
@property --light-a {
syntax: "<number>";
inherits: false;
initial-value: 0;
}
.cursor-light { position: relative; isolation: isolate; --light-a: 0; transition: --light-a .35s ease-out; }
.cursor-light.is-lit { --light-a: 1; }
.cursor-light::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 178, 63, calc(.09 * var(--light-a))), transparent 65%);
pointer-events: none;
}
@media (forced-colors: active) {
.evidence-grid > .m, .evidence-swatch.is-matched, .prove-grid > .is-matched, .prove-legend .is-matched,
.stage-poster-block, .scene-dot, .jobv-dot, .failo-node, .hero-eyebrow::before {
forced-color-adjust: none;
background: CanvasText;
}
.evidence-grid > .a, .evidence-swatch.is-left, .prove-grid > .is-left, .prove-legend .is-left,
.prove-legend .is-different, .evidence-swatch.is-different, .failo-step.is-problem .failo-node {
border: 1px solid CanvasText;
}
.run-chip, .learn-chip, .prove-job, .jobv-chip, .results-strip li { border: 1px solid CanvasText; }
.integration-tab[aria-selected="true"] { border-bottom: 2px solid Highlight; }
.view-toggle-button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
.faq-icon::before, .faq-icon::after { forced-color-adjust: none; background: CanvasText; }
}
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
:root[data-theme="light"] {
color-scheme: light;
--bg: #FFFFFF;
--panel: #F9FBFD;
--raised: #F1F3F4;
--line: #E0E3E7;
--ink: #1F1F1F;
--text-2: #1F1F1F;
--muted: #1F1F1F;
--faint: #A6A8AF;
--accent: #F29A1A;
--accent-ink: #A35F00;
--hot: #FFB23F;
--ink-rgb: 31 31 31;
--bg-rgb: 255 255 255;
--win: #F9FBFD;
--win-bar: #F0F4F9;
--win-bar-top: #F9FBFD;
--win-line: #E3E7EC;
--win-edge: #DADCE0;
--win-raised: #EDF2FA;
--dim: #C4C7C5;
--dim-2: #A8ACB0;
--accent-deep: #FFF1DB;
--tk-p: #15161B;
--tk-num-add: #C08A3A;
--tk-kw: #3D5A99;
--tk-str: #8A6A1F;
--shadow-deep: 0 30px 80px -40px rgba(40, 32, 20, .25);
}
:root[data-theme="light"] .ac-logo { --ac-ink: var(--ink); --ac-hot: #FFB23F; }
:root[data-theme="light"] .contact-glow { opacity: .35; }
:root[data-theme="light"] .contact-mark { filter: none; }
:root[data-theme="light"] .unlock { background: var(--panel); }
.fx-shine { position: relative; overflow: hidden; isolation: isolate; }
.fx-shine::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
transform: translateX(-110%);
animation: fx-sweep 3.6s ease-in-out infinite 1.2s;
pointer-events: none;
}
@keyframes fx-sweep { 55%, 100% { transform: translateX(110%); } }
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fx-orbit { position: relative; isolation: isolate; }
.fx-orbit::before {
content: "";
position: absolute;
inset: -1px;
padding: 1.5px;
border-radius: inherit;
background: conic-gradient(from var(--fx-a), transparent 0 62%, rgba(255, 178, 63, .25) 74%, #FFB23F 86%, transparent 96%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: fx-orbit 3.2s linear infinite;
pointer-events: none;
}
@keyframes fx-orbit { to { --fx-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
.fx-shine::after, .fx-orbit::before { animation: none; }
.fx-shine::after { display: none; }
}
.stmt.is-inline, .stmt.is-inline .stmt-title, .stmt.is-inline .stmt-lead { color: var(--ink); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
transform: translateX(-110%);
animation: fx-sweep 4.2s ease-in-out infinite 1.6s;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } }
main { position: relative; }
.page-dots {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 720px;
z-index: 0;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
mask-image: linear-gradient(to bottom, #000 30%, transparent);
}
.page-dots + * , .page-dots ~ * { position: relative; z-index: 1; }
.pd-flow { margin: 64px 0 0; }
.view-toggle {
display: inline-flex;
align-items: center;
gap: 12px;
}
.view-toggle.is-pending { visibility: hidden; }
.view-toggle-label {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1;
color: var(--muted);
}
.view-toggle-buttons {
display: inline-flex;
padding: 2px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
}
.view-toggle-button {
position: relative;
height: 28px;
padding: 0 12px;
border-radius: 2px;
font-size: 13px;
line-height: 1;
font-weight: 500;
letter-spacing: -.01em;
color: var(--muted);
transition: color var(--dur-ui) linear, background-color var(--dur-ui) linear;
}
.view-toggle-button::before { content: ""; position: absolute; inset: -8px 0; }
.view-toggle-button:hover { color: var(--ink); }
.view-toggle-button[aria-pressed="true"] {
background: var(--raised);
color: var(--ink);
box-shadow: inset 0 0 0 1px rgb(var(--ink-rgb) / .55);
}
.hero-view-row {
display: flex;
align-items: center;
min-height: 44px;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.hero-view-row { display: none; }
}
.site-header {
background: var(--bg);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-ui) linear;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-nav {
display: flex;
align-items: center;
height: var(--nav-height);
}
.site-nav-logo {
display: inline-flex;
align-items: center;
min-height: 44px;
flex: none;
}
.site-nav-links { display: none; }
@media (min-width: 1024px) {
.site-nav-links {
display: flex;
align-items: center;
margin-left: auto;
gap: 4px;
}
.site-nav-links + .site-nav-actions { margin-left: 28px; }
}
.site-nav-link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 10px;
font-size: 14px;
line-height: 1;
font-weight: 500;
letter-spacing: -.01em;
color: var(--text-2);
transition: color var(--dur-ui) linear;
}
.site-nav-link:hover { color: var(--ink); }
.site-nav-actions {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
}
.site-nav-view { display: none; }
@media (min-width: 768px) {
.site-nav-view { display: inline-flex; }
}
.site-nav-cta-long { display: none; }
@media (min-width: 1280px) {
.site-nav-cta-long { display: inline; }
.site-nav-cta-short { display: none; }
}
@media (max-width: 399.98px) {
.site-nav-logo .ac-logo { font-size: 20px !important; }
.site-nav-cta.btn-compact { padding: 0 12px; font-size: 13.5px; }
.site-nav-actions { gap: 12px; }
}
@media (max-width: 339.98px) {
.site-nav-logo .ac-logo { font-size: 17px !important; }
.site-nav-cta.btn-compact { padding: 0 10px; font-size: 13px; }
}
.site-nav-cta.btn-compact { height: auto; min-height: 36px; padding-block: 6px; white-space: normal; text-align: center; line-height: 1.15; }
@media (min-width: 1024px) {
:root { --nav-height: 72px; }
.site-nav-link { font-size: 15px; padding: 0 12px; }
.site-nav-cta.btn-compact { min-height: 40px; padding-inline: 16px; font-size: 14.5px; }
}
@media (min-width: 400px) and (max-width: 1023.98px) {
.site-nav-logo .ac-logo { font-size: 25px !important; }
}
.theme-switch {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
color: var(--text-2);
transition: color var(--dur-ui) linear, border-color var(--dur-ui) linear;
}
.theme-switch:hover { color: var(--ink); border-color: var(--muted); }
.theme-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-switch svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch[hidden] { display: none; }
.menu-toggle { display: none; }
@media (max-width: 1023.98px) {
.site-nav-actions .theme-switch,
.site-nav-actions .site-nav-view { display: none; }
.site-nav-actions { gap: 8px; }
.menu-toggle:not([hidden]) {
display: inline-grid;
place-content: center;
gap: 6px;
width: 44px;
height: 44px;
margin-right: -10px;
color: var(--ink);
}
}
.menu-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: var(--radius-control); }
.menu-toggle-bar {
display: block;
width: 20px;
height: 1.5px;
border-radius: 1px;
background: currentColor;
transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.site-menu {
position: fixed;
inset: var(--nav-height) 0 0;
z-index: 9;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg);
visibility: hidden;
opacity: 0;
transition: opacity .22s ease, visibility 0s linear .22s;
}
.site-menu.is-open {
visibility: visible;
opacity: 1;
transition: opacity .22s ease, visibility 0s;
}
@media (min-width: 1024px) { .site-menu { display: none; } }
:root.menu-open { overflow: hidden; }
.site-menu-inner {
display: flex;
flex-direction: column;
min-height: 100%;
padding-top: 8px;
padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.site-menu-links { margin: 0; padding: 0; list-style: none; }
.site-menu-links li { border-bottom: 1px solid var(--line); }
.site-menu-link {
display: flex;
align-items: center;
min-height: 64px;
font-family: var(--font-display);
font-size: 30px;
line-height: 1.1;
font-weight: 500;
letter-spacing: -.03em;
color: var(--ink);
transition: color var(--dur-ui) linear;
}
.site-menu-link:hover { color: var(--accent); }
@media (min-width: 640px) { .site-menu-link { min-height: 76px; font-size: 38px; } }
.site-menu-links li,
.site-menu-foot {
opacity: 0;
transform: translateY(10px);
transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.site-menu.is-open .site-menu-links li,
.site-menu.is-open .site-menu-foot { opacity: 1; transform: none; }
.site-menu.is-open .site-menu-links li:nth-child(2) { transition-delay: 30ms; }
.site-menu.is-open .site-menu-links li:nth-child(3) { transition-delay: 60ms; }
.site-menu.is-open .site-menu-links li:nth-child(4) { transition-delay: 90ms; }
.site-menu.is-open .site-menu-links li:nth-child(5) { transition-delay: 120ms; }
.site-menu.is-open .site-menu-links li:nth-child(6) { transition-delay: 150ms; }
.site-menu.is-open .site-menu-foot { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
.site-menu, .site-menu.is-open, .site-menu-links li, .site-menu-foot, .menu-toggle-bar { transition: none; }
.site-menu-links li, .site-menu-foot { transform: none; }
}
.site-menu-foot {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
padding-top: 40px;
}
.site-menu-row {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 52px;
}
@media (min-width: 640px) { .site-menu-foot { margin-top: 72px; } }
.site-menu-label { font-size: 15px; color: var(--text-2); }
.site-menu .view-toggle.site-menu-view { display: inline-flex; }
.site-menu-files {
display: flex;
gap: 20px;
margin: 8px 0 20px;
padding: 0;
list-style: none;
font-family: var(--font-mono);
font-size: 13px;
}
.site-menu-files a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--text-2);
}
.site-menu-files a:hover { color: var(--ink); }
.site-menu-cta.btn { width: 100%; min-height: 52px; font-size: 16px; justify-content: center; }
@media (max-width: 479.98px) {
.site-nav-actions .site-nav-cta { display: none; }
}
@media (max-width: 1023.98px) and (max-height: 700px) {
.site-menu-link { min-height: 52px; font-size: 26px; }
.site-menu-foot { padding-top: 24px; }
}
@media (min-width: 1024px) { .site-nav-cta.btn-compact { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
.site-nav-link { padding: 0 7px; font-size: 14px; }
.site-nav-logo .ac-logo { font-size: 23px !important; }
.site-nav-cta.btn-compact { padding-inline: 12px; font-size: 14px; }
}
.cb-page { padding: 24px 0 160px; }
@media (min-width: 1024px) { .cb-page { padding-top: 40px; } }
.cb-shell {
display: grid;
grid-template-columns: minmax(0, 1fr);
max-width: 1400px;
margin: 0 auto;
padding-inline: var(--gutter);
}
@media (min-width: 1024px) {
.cb-shell { grid-template-columns: 220px minmax(0, 1fr); column-gap: 56px; }
}
@media (min-width: 1280px) {
.cb-shell { grid-template-columns: 236px minmax(0, 760px) 196px; column-gap: 64px; justify-content: center; }
}
.cb-side, .cb-toc { display: none; }
@media (min-width: 1024px) {
.cb-side { display: block; }
.cb-side-inner {
position: sticky;
top: calc(var(--nav-height) + 32px);
max-height: calc(100vh - var(--nav-height) - 56px);
overflow-y: auto;
padding: 8px 4px 24px 0;
scrollbar-width: thin;
}
}
@media (min-width: 1280px) {
.cb-toc { display: block; }
.cb-toc-inner { position: sticky; top: calc(var(--nav-height) + 40px); padding-top: 8px; }
}
.cb-nav-group + .cb-nav-group { margin-top: 28px; }
.cb-nav-title {
margin: 0 0 8px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.cb-nav-list, .cb-toc-list { margin: 0; padding: 0; list-style: none; }
.cb-nav-link {
position: relative;
display: flex;
align-items: center;
min-height: 34px;
padding: 6px 12px;
border-radius: 8px;
font-size: 14px;
line-height: 1.3;
color: var(--text-2);
transition: color .15s linear, background-color .15s linear;
}
.cb-nav-link:hover { color: var(--ink); background: rgb(var(--ink-rgb) / .04); }
.cb-nav-link.is-active { color: var(--ink); background: rgb(var(--ink-rgb) / .06); }
.cb-nav-link.is-active::before {
content: "";
position: absolute;
left: 0;
top: 9px;
bottom: 9px;
width: 2px;
border-radius: 1px;
background: var(--accent);
}
.cb-toc-group { margin: 14px 0 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.cb-toc-list { border-left: 1px solid var(--line); }
.cb-toc-link {
display: block;
margin-left: -1px;
padding: 5px 0 5px 14px;
border-left: 1px solid transparent;
font-size: 13px;
line-height: 1.4;
color: var(--muted);
transition: color .15s linear, border-color .15s linear;
}
.cb-toc-link:hover { color: var(--ink); }
.cb-toc-link.is-active { color: var(--ink); border-left-color: var(--accent); }
.cb-contents {
margin-bottom: 32px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--win);
}
.cb-contents summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 0 16px;
font-size: 14px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.cb-contents summary::-webkit-details-marker { display: none; }
.cb-contents summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); }
.cb-contents[open] summary::after { content: "−"; }
.cb-contents nav { padding: 4px 8px 16px; border-top: 1px solid var(--line); }
.cb-contents .cb-nav-group { margin-top: 16px; }
@media (min-width: 1024px) { .cb-contents { display: none; } }
.cb-article { min-width: 0; }
.cb-head { padding-bottom: 8px; }
.cb-eyebrow {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.cb-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 14px; }
.cb-h1 {
margin: 0;
font-family: var(--font-display);
font-size: 40px;
font-weight: 500;
line-height: 1.04;
letter-spacing: -.04em;
color: var(--ink);
text-wrap: balance;
}
@media (min-width: 768px) { .cb-h1 { font-size: 56px; } }
.cb-lead { margin: 18px 0 0; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--text-2); }
@media (min-width: 768px) { .cb-lead { font-size: 20px; } }
.cb-copy-page {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
margin-top: 8px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: 9px;
font-size: 13.5px;
color: var(--text-2);
transition: color .15s linear, border-color .15s linear;
}
.cb-copy-page:hover { color: var(--ink); border-color: var(--dim); }
.cb-copy-page[hidden] { display: none; }
.cb-copy-page svg, .cb-copy svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cb-copy-page:focus-visible, .cb-copy:focus-visible, .cb-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cb-sec { padding-top: 72px; scroll-margin-top: calc(var(--nav-height) + 8px); }
.cb-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cb-h2 {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.025em;
color: var(--ink);
}
.cb-group-title { margin-top: 120px; padding-top: 28px; border-top: 1px solid var(--line); }
.cb-group-title + .cb-sec { padding-top: 40px; }
.cb-h3 {
display: flex;
align-items: baseline;
gap: 12px;
margin: 0;
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.02em;
color: var(--ink);
}
.cb-recipe-num { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--accent-ink); }
.cb-p { margin: 10px 0 0; max-width: 64ch; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.cb-note {
margin: 16px 0 0;
padding-left: 14px;
border-left: 2px solid var(--win-edge);
max-width: 64ch;
font-size: 14px;
line-height: 1.6;
color: var(--muted);
}
.cb-langs { display: inline-flex; gap: 2px; }
.cb-lang {
position: relative;
min-height: 32px;
padding: 0 12px;
border-radius: 7px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
transition: color .15s linear, background-color .15s linear;
}
.cb-lang:hover { color: var(--ink); }
.cb-lang[aria-pressed="true"] { color: var(--ink); background: rgb(var(--ink-rgb) / .06); }
.cb-langs.is-switch { padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--win); }
.cb-langs.is-switch .cb-lang[aria-pressed="true"] { background: var(--win-raised); box-shadow: inset 0 0 0 1px var(--win-edge); }
.cb-steps { position: relative; margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.cb-steps::before {
content: "";
position: absolute;
left: 15px;
top: 30px;
bottom: 30px;
width: 1px;
background: linear-gradient(var(--accent), rgb(var(--ink-rgb) / .14));
}
.cb-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 18px; row-gap: 10px; }
.cb-step-num {
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 1px solid var(--win-edge);
border-radius: 8px;
background: var(--bg);
font-family: var(--font-mono);
font-size: 12px;
color: var(--accent-ink);
}
.cb-step-label { margin: 5px 0 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.cb-step-code {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 6px 6px 6px 16px;
border: 1px solid var(--win-line);
border-radius: 10px;
background: var(--win);
}
.cb-step-code code {
flex: 1 1 auto;
min-width: 0;
overflow-x: auto;
scrollbar-width: none;
white-space: pre;
font-family: var(--font-mono);
font-size: 13.5px;
line-height: 2;
color: var(--ink);
}
.cb-step-code code::-webkit-scrollbar { display: none; }
.cb-step-code code[hidden] { display: none; }
.cb-prompt { color: var(--accent-ink); }
.cb-callout {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 32px;
padding: 14px 16px;
border: 1px solid rgba(255, 178, 63, .3);
border-radius: 10px;
background: rgba(255, 178, 63, .06);
}
.cb-callout-mark { flex: none; width: 8px; height: 10px; margin-top: 6px; border-radius: 1.5px; background: var(--accent); }
.cb-callout p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.cb-callout a { color: var(--accent-ink); font-weight: 500; white-space: nowrap; }
.cb-callout a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cb-block {
margin-top: 22px;
border: 1px solid var(--win-line);
border-radius: 12px;
background: var(--win);
box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / .03);
overflow: hidden;
}
.cb-block-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 44px;
padding: 6px 6px 6px 8px;
border-bottom: 1px solid var(--win-line);
background: var(--win-bar);
}
.cb-block-lang { padding-left: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cb-block-note { margin: 0; padding: 10px 16px 12px; border-top: 1px dashed var(--win-line); font-size: 13px; color: var(--muted); }
.cb-copy {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 34px;
min-height: 34px;
padding: 0 9px;
border: 1px solid transparent;
border-radius: 8px;
font-size: 12.5px;
color: var(--muted);
transition: color .15s linear, border-color .15s linear;
}
.cb-copy:hover { color: var(--ink); border-color: var(--win-line); }
.cb-copy[hidden] { display: none; }
.cb-pre {
margin: 0;
padding: 14px 0 16px;
overflow-x: auto;
overscroll-behavior-x: contain;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.75;
}
.cb-pre[hidden] { display: none; }
@media (min-width: 768px) { .cb-pre { font-size: 13px; } }
.cb-pre code { display: grid; min-width: max-content; }
.cb-line { display: grid; grid-template-columns: 44px max-content; padding-right: 24px; }
.cb-num { padding-right: 16px; text-align: right; color: var(--dim); user-select: none; -webkit-user-select: none; }
.cb-text { white-space: pre; color: var(--text-2); }
.cb-line.is-ours { background: linear-gradient(90deg, rgba(255, 178, 63, .1), rgba(255, 178, 63, 0) 75%); box-shadow: inset 2px 0 0 var(--accent); }
.cb-line.is-ours .cb-num { color: var(--tk-num-add); }
.cb-line.is-ours .cb-text { color: var(--ink); }
.cb-article .tk-com { color: var(--muted); }
.cb-article .tk-num { color: var(--tk-str); }
.cb-table, .cb-qas { margin: 20px 0 0; border-top: 1px solid var(--line); }
.cb-row { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .cb-row { grid-template-columns: 168px minmax(0, 1fr); } }
.cb-row dt { font-size: 14px; font-weight: 500; color: var(--ink); }
.cb-row dt code { font-family: var(--font-mono); font-size: 13px; font-weight: 400; }
.cb-row.is-compiled dt code { color: var(--accent-ink); }
.cb-row dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.cb-qa { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cb-qa dt { font-size: 16px; font-weight: 500; color: var(--ink); }
.cb-qa dd { margin: 6px 0 0; max-width: 64ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
.cb-nav-link, .cb-toc-link, .cb-lang { transition: none; }
}
@media (max-width: 767.98px) {
.cb-title-row { flex-direction: column; gap: 18px; }
.cb-copy-page { order: 3; margin-top: 0; }
.cb-h1 { font-size: 42px; }
}
.blog-page { padding: 40px 0 112px; }
@media (min-width: 1024px) { .blog-page { padding-top: 72px; } }
.blog-eyebrow {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--accent-ink);
}
.blog-h1 {
margin: 14px 0 0;
font-family: var(--font-display);
font-size: 44px;
font-weight: 500;
line-height: 1.02;
letter-spacing: -.045em;
color: var(--ink);
text-wrap: balance;
}
@media (min-width: 768px) { .blog-h1 { font-size: 72px; } }
.blog-lead { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: var(--text-2); }
@media (min-width: 768px) { .blog-lead { font-size: 21px; } }
.blog-cover {
overflow: hidden;
aspect-ratio: 16 / 10;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--bg);
transition: border-color .25s linear;
}
.blog-cover { position: relative; }
.blog-cover svg { display: block; width: 100%; height: 100%; }
.blog-cover .bc-art { position: relative; }
.bc-bg {
position: absolute;
inset: 0;
-webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
mask-image: radial-gradient(ellipse 70% 75% at 50% 50%, #000 30%, transparent 100%);
}
.bc-bg line, .bc-bg circle, .bc-bg path, .bc-bg rect { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bc-bg .bc-dot { fill: var(--dim-2); stroke: none; }
.bc-label {
position: absolute;
inset: 14px 16px auto;
z-index: 1;
display: flex;
justify-content: space-between;
gap: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
pointer-events: none;
}
.bc-label span:first-child { color: var(--accent-ink); }
.blog-cover svg { overflow: visible; }
.bi-face { fill: var(--bg); stroke: var(--text-2); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bi-top { fill: var(--win-bar); }
.bi-box.is-muted .bi-face { stroke: var(--dim-2); }
.bi-box.is-dashed .bi-face { stroke: var(--dim-2); stroke-dasharray: 4 4; }
.bi-box.is-dashed .bi-top { fill: var(--bg); }
.bi-box.is-accent .bi-face { stroke: var(--accent); }
.bi-box.is-accent .bi-top { fill: var(--accent-deep); }
.bi-box.is-ink .bi-face { stroke: var(--ink); }
.bi-inset { fill: var(--accent); }
.bi-trail { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.blog-featured {
display: grid;
gap: 28px;
margin-top: 64px;
color: inherit;
}
@media (min-width: 1024px) {
.blog-featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; margin-top: 88px; }
}
.blog-featured:hover .blog-cover, .blog-card:hover .blog-cover { border-color: rgba(255, 178, 63, .45); }
.blog-featured-title {
margin: 14px 0 0;
font-family: var(--font-display);
font-size: 30px;
font-weight: 500;
line-height: 1.1;
letter-spacing: -.03em;
color: var(--ink);
}
@media (min-width: 1024px) { .blog-featured-title { font-size: 40px; } }
.blog-featured-excerpt { margin: 14px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.blog-read { display: inline-flex; margin-top: 22px; font-weight: 500; color: var(--accent-ink); }
.blog-featured:hover .blog-read { text-decoration: underline; text-underline-offset: 4px; }
.blog-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
color: var(--muted);
}
.blog-tag { color: var(--accent-ink); }
.blog-grid {
display: grid;
gap: 48px 32px;
margin-top: 88px;
padding-top: 48px;
border-top: 1px solid var(--line);
}
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-card { display: flex; flex-direction: column; color: inherit; }
.blog-card .blog-meta { margin-top: 18px; }
.blog-card-title {
margin: 10px 0 0;
font-family: var(--font-display);
font-size: 21px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.02em;
color: var(--ink);
}
.blog-card:hover .blog-card-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.blog-card-excerpt { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.blog-featured:focus-visible, .blog-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 14px; }
.post-page { padding: 40px 0 120px; }
@media (min-width: 1024px) { .post-page { padding-top: 64px; } }
.post-head, .post-body { width: min(720px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.post-back {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-bottom: 20px;
font-size: 14px;
color: var(--muted);
}
.post-back:hover { color: var(--ink); }
.post-h1 {
margin: 16px 0 0;
font-family: var(--font-display);
font-size: 38px;
font-weight: 500;
line-height: 1.06;
letter-spacing: -.04em;
color: var(--ink);
text-wrap: balance;
}
@media (min-width: 768px) { .post-h1 { font-size: 54px; } }
.post-lead { margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: var(--text-2); }
.post-author { margin: 20px 0 0; font-size: 14px; color: var(--muted); }
.post-cover-wrap { width: min(960px, 100% - 2 * var(--gutter)); margin: 48px auto 0; }
.post-body { margin-top: 56px; }
.post-p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: var(--text-2); }
.post-h2 {
margin: 56px 0 16px;
font-family: var(--font-display);
font-size: 27px;
font-weight: 500;
line-height: 1.2;
letter-spacing: -.025em;
color: var(--ink);
}
.post-list { margin: 0 0 22px; padding: 0; list-style: none; }
.post-list li { position: relative; padding: 6px 0 6px 24px; font-size: 18px; line-height: 1.65; color: var(--text-2); }
.post-list li::before {
content: "";
position: absolute;
left: 2px;
top: 17px;
width: 7px;
height: 8px;
border-radius: 1px;
background: var(--accent);
}
.post-link-line a { color: var(--accent-ink); font-weight: 500; white-space: nowrap; }
.post-link-line a:hover { text-decoration: underline; text-underline-offset: 4px; }
.post-code {
margin: 8px 0 28px;
padding: 16px 0 18px;
border: 1px solid var(--win-line);
border-radius: 12px;
background: var(--win);
overflow-x: auto;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.75;
}
.post-code code { display: grid; min-width: max-content; }
.post-code-line { display: grid; grid-template-columns: 44px max-content; padding-right: 24px; color: var(--text-2); }
.post-code-num { padding-right: 16px; text-align: right; color: var(--dim); user-select: none; -webkit-user-select: none; }
.post-code-line.is-ours { background: linear-gradient(90deg, rgba(255, 178, 63, .1), rgba(255, 178, 63, 0) 75%); box-shadow: inset 2px 0 0 var(--accent); color: var(--ink); }
.post-code .tk-com { color: var(--muted); }
.post-code .tk-num { color: var(--tk-str); }
.post-results { margin: 12px 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.post-result { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .post-result { grid-template-columns: 120px minmax(0, 1fr); column-gap: 24px; } }
.post-result-value {
grid-row: span 2;
font-family: var(--font-display);
font-size: 40px;
font-weight: 600;
line-height: 1;
letter-spacing: -.045em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.post-result-text { font-size: 17px; line-height: 1.45; color: var(--ink); }
.post-result-scope { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.post-routes { margin: 8px 0 28px; border-top: 1px solid var(--line); }
.post-route { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .post-route { grid-template-columns: 168px minmax(0, 1fr); } }
.post-route dt code { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.post-route.is-compiled dt code { color: var(--accent-ink); }
.post-route dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.post-more { margin-top: 120px; }
.post-more-title {
margin: 0;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
.post-more .blog-grid { margin-top: 24px; padding-top: 32px; }
.post-quote { display: flex; gap: 18px; margin: 48px 0; padding: 0; }
.post-quote-mark { flex: none; width: 10px; height: 12px; margin-top: 14px; border-radius: 2px; background: var(--accent); }
.post-quote p {
margin: 0;
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
line-height: 1.25;
letter-spacing: -.025em;
color: var(--ink);
text-wrap: balance;
}
@media (min-width: 768px) { .post-quote p { font-size: 34px; } }
.post-steps { margin: 8px 0 28px; padding: 0; list-style: none; counter-reset: none; border-top: 1px solid var(--line); }
.post-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 1.6; color: var(--text-2); }
.post-step-num { font-family: var(--font-mono); font-size: 13px; line-height: 1.9; color: var(--accent-ink); }
.post-compare { display: grid; gap: 16px; margin: 12px 0 32px; }
@media (min-width: 640px) { .post-compare { grid-template-columns: 1fr 1fr; } }
.post-compare-col { padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.post-compare-col.is-with { border-color: rgba(255, 178, 63, .45); box-shadow: inset 0 2px 0 var(--accent); }
.post-compare-head { margin: 0 0 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-compare-col.is-with .post-compare-head { color: var(--accent-ink); }
.post-compare ul { margin: 0; padding: 0; list-style: none; }
.post-compare li { padding: 7px 0; font-size: 15.5px; line-height: 1.55; color: var(--text-2); border-top: 1px solid var(--line); }
.post-compare li:first-child { border-top: 0; }
.post-faq { margin: 8px 0 28px; border-top: 1px solid var(--line); }
.post-faq div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.post-faq dt { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.post-faq dd { margin: 8px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--text-2); }
.rf { display: none; }
@media (min-width: 1024px) {
.routing-diagram .rd { display: none; }
.rf {
position: relative;
display: block;
padding: 48px 40px 40px;
border: 1px solid var(--line);
border-radius: 4px;
background:
radial-gradient(circle, rgb(var(--ink-rgb) / .14) 1px, transparent 1.4px) 0 0 / 22px 22px,
var(--bg);
}
}
.rf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rf-frame { fill: rgb(var(--bg-rgb) / .6); stroke: rgb(var(--ink-rgb) / .28); stroke-width: 1; }
.rf-frame-gap { fill: var(--bg); }
.rf-cap { font: 500 13px var(--font-mono); letter-spacing: .12em; fill: var(--ink); }
.rf-line { fill: none; stroke: rgb(var(--ink-rgb) / .4); stroke-width: 1.2; stroke-dasharray: 4 5; }
.rf-line-low { stroke: rgb(var(--ink-rgb) / .22); }
.rf-flow { animation: rf-flow 1.2s linear infinite; }
@keyframes rf-flow { to { stroke-dashoffset: -18; } }
.rf-arc { fill: none; stroke: rgba(255, 178, 63, .35); stroke-width: 1.4; }
.rf-arc-run { fill: none; stroke: #FFB23F; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 60 900; animation: rf-run 3.4s linear infinite; filter: drop-shadow(0 0 6px rgba(255, 178, 63, .7)); }
@keyframes rf-run { 0%, 36% { stroke-dashoffset: 60; opacity: 0; } 37% { opacity: 1; } 100% { stroke-dashoffset: -560; opacity: 1; } }
.rf-tip { fill: none; stroke: rgb(var(--ink-rgb) / .55); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rf-tip-arc { stroke: #FFB23F; }
.rf-tip-low { stroke: rgb(var(--ink-rgb) / .3); }
.rf-packet { fill: #8A8C93; }
.rf-tile rect { fill: var(--panel); stroke: rgb(var(--ink-rgb) / .22); stroke-width: 1; }
.rf-tile.is-ac rect { fill: #FFB23F; stroke: #FFB23F; filter: drop-shadow(0 0 22px rgba(255, 178, 63, .45)); animation: rf-pulse 3.4s ease-in-out infinite; }
@keyframes rf-pulse { 0%, 30%, 60%, 100% { filter: drop-shadow(0 0 18px rgba(255, 178, 63, .35)); } 36% { filter: drop-shadow(0 0 36px rgba(255, 178, 63, .8)); } }
.rf-ico rect, .rf-ico path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.rf-ico .rf-dot { fill: var(--ink); stroke: none; }
.rf-name { font: 13px var(--font-mono); letter-spacing: .12em; fill: var(--ink); }
.rf-say { font: 13px var(--font-mono); fill: var(--ink); }
.rf-tile.is-ac .rf-mark path, .rf-tile.is-ac .rf-mark rect { fill: #0A0B10; stroke: none; filter: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
.rf-packet, .rf-arc-run { display: none; }
.rf-flow, .rf-tile.is-ac rect { animation: none; }
}
.rf-chip rect { fill: var(--panel); stroke: rgb(var(--ink-rgb) / .22); stroke-width: 1; }
.rf-chip { color: var(--ink); }
.rf-bot-head { fill: none; stroke: var(--ink); stroke-width: 2; }
.rf-bot-face { fill: rgb(var(--ink-rgb) / .08); stroke: none; }
.rf-bot-eye { fill: #FFB23F; animation: rf-blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rf-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.rf-bot-line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.rf-bot-spark { fill: #FFB23F; filter: drop-shadow(0 0 4px rgba(255, 178, 63, .9)); }
@media (prefers-reduced-motion: reduce) { .rf-bot-eye { animation: none; } }
.tag {
display: inline-flex;
align-items: center;
padding: 2px 6px;
border: 1px solid var(--line);
border-radius: var(--radius-tag);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.section-stage { position: relative; padding-block: 72px 128px; }
.stage-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.stage-label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.promise-title {
max-width: 24ch;
margin: 24px 0 0;
font-family: var(--font-display);
font-size: 34px;
font-weight: 400;
line-height: 1.14;
letter-spacing: -.035em;
color: var(--ink);
text-wrap: balance;
}
.promise-title strong { font-weight: 600; color: var(--ink); }
@media (min-width: 768px) { .promise-title { font-size: 48px; } }
@media (min-width: 1280px) { .promise-title { font-size: 58px; } }
.promise-grid { display: grid; gap: 16px; margin-top: 56px; }
.promise-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 1024px) {
.promise-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 20px; margin-top: 72px; }
.promise-col { gap: 20px; }
.promise-col:last-child { align-content: stretch; }
}
.pc {
position: relative;
min-width: 0;
padding: 26px 24px 26px;
border: 1px solid var(--line);
border-radius: 4px;
background: var(--panel);
overflow: hidden;
}
@media (min-width: 768px) { .pc { padding: 32px 36px; } }
.pc-title { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.pc-sub { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pc-big {
display: inline-block;
font-family: var(--font-display);
font-size: 60px;
font-weight: 500;
line-height: 1;
letter-spacing: -.05em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.pc-big.is-muted { color: var(--muted); }
.pc-big.is-accent, .pc-k.is-accent { color: var(--accent-ink); }
.pc-big-xl { display: block; margin-top: 18px; font-size: 44px; font-weight: 500; }
@media (min-width: 768px) { .pc-big { font-size: 64px; } .pc-big-xl { font-size: 52px; } }
.pc-note { margin: 18px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted); }
.pc-foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.pc-foot strong { color: var(--accent-ink); font-weight: 600; }
.pc-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 26px 0 0; }
.pc-hero-text { max-width: 24ch; font-size: 15.5px; line-height: 1.45; color: var(--text-2); }
.pc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.pc-pair > div { display: grid; gap: 10px; }
.pc-k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-bars { display: grid; gap: 8px; margin-top: 22px; }
.pc-bar { position: relative; display: block; height: 26px; border-radius: 3px; background: rgb(var(--ink-rgb) / .05); }
.pc-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: rgb(var(--ink-rgb) / .22); transform-origin: left; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.pc-bar.is-with i { background: var(--accent); box-shadow: 0 0 24px rgba(255, 178, 63, .35); transition-delay: .3s; }
.pc-bar b { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.pc-bar.is-with b { color: var(--accent-ink); }
.pc-squares { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; margin-top: 24px; }
.pc-squares i { aspect-ratio: 1; border-radius: 1px; background: rgb(var(--ink-rgb) / .3); transition: opacity .3s linear, transform .3s ease; }
.pc-squares i.is-m { background: var(--accent); }
.pc-legend { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pc-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 1px; vertical-align: 0; }
.pc-legend .is-m::before { background: var(--accent); }
.pc-legend .is-l::before { background: rgb(var(--ink-rgb) / .3); }
.pc-tall { display: flex; flex-direction: column; }
.pc-quote { margin: 26px 0 0; max-width: 34ch; font-size: 23px; line-height: 1.45; letter-spacing: -.01em; color: var(--ink); }
.pc-mark { padding: 0 6px; border-radius: 3px; background: rgba(255, 178, 63, .16); color: var(--accent-ink); font-weight: 600; }
.pc-quote-scope { color: var(--text-2); }
.pc-rule { width: 100%; margin: 36px 0; border: 0; border-top: 1px solid var(--line); }
.pc-chart { margin: 26px 0 0; }
.pc-chart + .pc-chart { margin-top: 18px; padding-top: 22px; border-top: 1px dashed var(--line); }
.pc-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 10px; }
.pc-chart-key { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.pc-chart-key::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: rgb(var(--ink-rgb) / .6); border-radius: 50%; }
.pc-chart-key.is-m::before { background: var(--accent); border-radius: 1px; }
.pc-chart-head b { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.pc-chart.is-best .pc-chart-head b { color: var(--accent-ink); }
.pc-chart-head em { font-style: normal; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.pc-area { fill: rgb(var(--ink-rgb) / .04); }
.pc-chart.is-best .pc-area { fill: rgba(255, 178, 63, .07); }
.pc-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pc-grid { stroke: rgb(var(--ink-rgb) / .08); stroke-width: 1; }
.pc-guide { stroke: rgb(var(--ink-rgb) / .14); stroke-width: 1; stroke-dasharray: 2 4; }
.pc-axis { font: 10.5px var(--font-mono); letter-spacing: .08em; fill: var(--muted); }
.pc-line path { fill: none; stroke: rgb(var(--ink-rgb) / .55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.pc-line circle { fill: var(--panel); stroke: rgb(var(--ink-rgb) / .7); stroke-width: 1.6; }
.pc-line.is-best path { stroke: var(--accent); stroke-width: 2; }
.pc-line.is-best rect { fill: var(--accent); }
.pc-end { font: 11px var(--font-mono); fill: var(--text-2); }
.pc-line.is-best .pc-end { fill: var(--accent-ink); }
.pc-start { fill: var(--ink); }
.pc-line circle, .pc-line rect, .pc-end { transition: opacity .3s linear calc(var(--d, 0ms) + 1s); }
.promise-grid.is-waiting .pc-line path { stroke-dashoffset: 1; }
.promise-grid.is-waiting .pc-line circle, .promise-grid.is-waiting .pc-line rect, .promise-grid.is-waiting .pc-end { opacity: 0; }
.pc-tall .pc-note { margin-top: auto; padding-top: 28px; }
.pc-link { align-self: flex-start; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--ink); }
.pc-link:hover { color: var(--accent-ink); }
.promise-grid.is-waiting .pc-bar i { transform: scaleX(0); }
.promise-grid.is-waiting .pc-squares i { opacity: 0; transform: scale(.4); }
@media (prefers-reduced-motion: reduce) { .pc-bar i, .pc-line path, .pc-squares i { transition: none; } }
.pd-page { width: min(960px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 40px 0 120px; }
@media (min-width: 1024px) { .pd-page { padding-top: 72px; } }
.pd-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.pd-h1 {
margin: 14px 0 0;
font-family: var(--font-display);
font-size: 44px;
font-weight: 500;
line-height: 1.02;
letter-spacing: -.045em;
color: var(--ink);
}
@media (min-width: 768px) { .pd-h1 { font-size: 72px; } }
.pd-lead { margin: 20px 0 0; max-width: 52ch; font-size: 18px; line-height: 1.6; color: var(--text-2); }
@media (min-width: 768px) { .pd-lead { font-size: 20px; } }
.pd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.pd-figure { margin: 56px 0 0; }
.pd-figure-frame {
position: relative;
overflow: hidden;
padding: 24px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background:
radial-gradient(60% 80% at 50% 50%, rgba(255, 178, 63, .07), transparent 70%),
var(--panel);
}
.pd-figure-frame .sf { display: block; width: 100%; height: auto; overflow: visible; }
.pd-caption { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.pd-sec { margin-top: 96px; scroll-margin-top: 32px; }
@media (min-width: 1024px) { .pd-sec { margin-top: 120px; } }
.pd-h2 { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
@media (min-width: 768px) { .pd-h2 { font-size: 40px; } }
.pd-h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -.015em; color: var(--ink); }
.pd-sub { margin: 14px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--text-2); }
.pd-text { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.pd-steps { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .pd-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-step { padding: 0 0 4px; }
.pd-step-cover { aspect-ratio: 16 / 11; }
.pd-step-n { margin: 18px 0 6px; font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.pd-features { display: grid; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .pd-features { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.pd-feature { position: relative; padding: 24px 0 24px 22px; border-bottom: 1px solid var(--line); }
.pd-mark { position: absolute; left: 0; top: 31px; width: 8px; height: 9px; border-radius: 1.5px; background: var(--accent); }
.pd-routes, .pd-works { margin: 28px 0 0; border-top: 1px solid var(--line); }
.pd-routes div, .pd-works div { display: grid; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .pd-routes div, .pd-works div { grid-template-columns: 180px minmax(0, 1fr); } }
.pd-routes dt code { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); }
.pd-routes .is-compiled dt code { color: var(--accent-ink); }
.pd-works dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.pd-routes dd, .pd-works dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.pd-works dd { color: var(--ink); }
.pd-results { display: grid; gap: 0; margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .pd-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pd-results li { display: flex; flex-direction: column; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
.pd-results li { padding: 32px 28px; border-bottom: 0; }
.pd-results li:first-child { padding-left: 0; }
.pd-results li + li { border-left: 1px solid var(--line); }
}
.pd-result-value { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.pd-results li:first-child .pd-result-value { color: var(--accent-ink); }
.pd-result-text { font-size: 16px; line-height: 1.45; color: var(--ink); }
.pd-result-scope { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.pd-more { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pd-more a { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--accent-ink); }
.pd-fit-link { display: inline-flex; margin-top: 20px; }
.pd-cta {
margin-top: 120px;
padding: 40px 24px;
border: 1px solid rgba(255, 178, 63, .35);
border-radius: 16px;
background: radial-gradient(70% 120% at 0% 0%, rgba(255, 178, 63, .1), transparent 60%), var(--panel);
}
@media (min-width: 768px) { .pd-cta { padding: 56px; } }
.pd-cta-title { margin: 0; font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.pd-cta .pd-text { max-width: 52ch; font-size: 17px; }
.pd-cta .btn { margin-top: 28px; }
.pd-cta-note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pd-compare { display: grid; gap: 28px; padding: 28px 24px; }
@media (min-width: 768px) { .pd-compare { grid-template-columns: 1fr 1fr; gap: 40px; padding: 36px 40px; } }
.pd-compare-item + .pd-compare-item { padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .pd-compare-item + .pd-compare-item { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--line); } }
.pd-compare-value { margin: 0; font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--accent-ink); }
.pd-compare-text { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink); }
.pd-compare-bars { display: grid; gap: 8px; margin-top: 20px; }
.pd-cbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
@media (max-width: 479.98px) { .pd-cbar { grid-template-columns: 1fr 40px; } .pd-cbar-label { grid-column: 1 / -1; } }
.pd-cbar-track { position: relative; display: block; height: 12px; }
.pd-cbar-track i { position: absolute; inset: 0 auto 0 0; border: 1px solid var(--dim-2); border-radius: 3px; transform-origin: left center; }
.pd-cbar.is-with .pd-cbar-track i { border-color: var(--accent); background: var(--accent); }
.pd-cbar.is-with { color: var(--accent-ink); }
.pd-cbar-value { text-align: right; font-variant-numeric: tabular-nums; }
.pd-compare-scope { margin: 16px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.pd-figure .pd-cbar-track i { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.pd-figure .pd-cbar.is-with .pd-cbar-track i { transition-delay: .3s; }
.pd-figure.is-seen .pd-cbar-track i { transform: none; }
}
.pr-page { width: min(960px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 40px 0 120px; }
@media (min-width: 1024px) { .pr-page { padding-top: 72px; } }
.pr-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.pr-h1 { margin: 14px 0 0; font-family: var(--font-display); font-size: 44px; font-weight: 500; line-height: 1.02; letter-spacing: -.045em; color: var(--ink); }
@media (min-width: 768px) { .pr-h1 { font-size: 72px; } }
.pr-lead { margin: 18px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.6; color: var(--text-2); }
@media (min-width: 768px) { .pr-lead { font-size: 20px; } }
.pr-plan {
display: grid;
margin-top: 48px;
border: 1px solid rgba(255, 178, 63, .45);
border-radius: 18px;
overflow: hidden;
background: radial-gradient(80% 120% at 0% 0%, rgba(255, 178, 63, .1), transparent 60%), var(--panel);
scroll-margin-top: 32px;
}
@media (min-width: 900px) { .pr-plan { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pr-plan-main { padding: 32px 24px; }
.pr-plan-side { padding: 32px 24px; border-top: 1px solid var(--line); background: rgb(var(--bg-rgb) / .35); }
@media (min-width: 900px) {
.pr-plan-main { padding: 44px 40px; }
.pr-plan-side { padding: 44px 40px; border-top: 0; border-left: 1px solid var(--line); }
}
.pr-plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.pr-plan-name { font-size: 17px; font-weight: 500; color: var(--ink); }
.pr-plan-note {
padding: 3px 10px;
border: 1px solid rgba(255, 178, 63, .45);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--accent-ink);
}
.pr-price { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 0; }
.pr-price-value { font-family: var(--font-display); font-size: 84px; font-weight: 600; line-height: .9; letter-spacing: -.055em; color: var(--ink); }
.pr-price-period { font-size: 18px; color: var(--text-2); }
.pr-locked { margin: 12px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent-ink); }
.pr-terms { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pr-terms li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--text-2); }
.pr-cta { width: 100%; min-height: 50px; margin-top: 28px; font-size: 16px; }
.pr-cta-note { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.pr-side-title { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pr-includes { margin: 20px 0 0; padding: 0; list-style: none; }
.pr-includes li { position: relative; padding: 10px 0 10px 30px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.pr-check { position: absolute; left: 0; top: 14px; width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 178, 63, .16); }
.pr-check::after { content: ""; position: absolute; left: 5px; top: 2.5px; width: 4px; height: 8px; border: solid var(--accent-ink); border-width: 0 1.75px 1.75px 0; transform: rotate(40deg); }
.pr-two { display: grid; gap: 40px; margin-top: 88px; scroll-margin-top: 32px; }
@media (min-width: 768px) { .pr-two { grid-template-columns: 1fr 1fr; gap: 56px; } }
.pr-h2 { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; color: var(--ink); }
@media (min-width: 768px) { .pr-h2 { font-size: 34px; } }
.pr-text { margin: 12px 0 0; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.pr-sec { margin-top: 96px; scroll-margin-top: 32px; }
.pr-results { display: grid; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
@media (min-width: 768px) { .pr-results { grid-template-columns: 1fr 1fr; } }
.pr-results li { display: flex; flex-direction: column; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) {
.pr-results li { padding: 32px 32px 32px 0; border-bottom: 0; }
.pr-results li + li { padding-left: 32px; border-left: 1px solid var(--line); }
}
.pr-result-value { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.05em; color: var(--accent-ink); }
.pr-result-text { font-size: 16px; line-height: 1.45; color: var(--ink); }
.pr-result-scope { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--muted); }
.pr-note { margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.pr-faq { margin: 24px 0 0; border-top: 1px solid var(--line); }
.pr-faq div { padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .pr-faq div { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; } }
.pr-faq dt { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--ink); }
.pr-faq dd { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
@media (min-width: 768px) { .pr-faq dd { margin: 0; } }
.site-side { display: none; }
@media (min-width: 1024px) {
:root { --side-w: 272px; --nav-height: 0px; }
html .site-header { display: none; }
main, .site-footer { margin-left: var(--side-w); }
.site-side {
display: block;
position: fixed;
inset: 0 auto 0 0;
z-index: 10;
width: var(--side-w);
border-right: 1px solid var(--line);
background: var(--bg);
}
.site-side-inner {
height: 100%;
overflow-y: auto;
padding: 40px 28px 32px 32px;
scrollbar-width: none;
}
.site-side-inner::-webkit-scrollbar { display: none; }
}
@media (min-width: 1440px) {
:root { --side-w: 312px; }
.site-side-inner { padding: 48px 36px 36px 48px; }
}
.site-side-logo { display: inline-flex; color: var(--ink); }
.site-side-controls { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.site-side-pages { margin: 36px 0 0; padding: 0; list-style: none; }
.site-side-page {
position: relative;
display: flex;
align-items: center;
min-height: 38px;
padding-left: 20px;
font-size: 16px;
color: var(--text-2);
transition: color var(--dur-ui) linear;
}
.site-side-page:hover { color: var(--ink); }
.site-side-page.is-current { color: var(--ink); font-weight: 500; }
.site-side-page.is-current::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 8px;
margin-top: -4px;
border-radius: 1.5px;
background: var(--accent);
}
.site-side-toc { margin-top: 32px; padding-top: 28px; border-top: 1px dashed var(--line); }
.site-side-title {
margin: 0 0 14px;
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--muted);
}
.site-side-group + .site-side-group { margin-top: 18px; }
.site-side-group-title { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink); }
.site-side-toc ul { margin: 0; padding: 0; list-style: none; }
.site-side-ruler li { display: flex; flex-direction: column; }
.site-side-link {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
min-height: 24px;
font-size: 14.5px;
line-height: 1.3;
color: var(--muted);
transition: color .2s linear;
}
.site-side-link:hover { color: var(--ink); }
.site-side-tick {
width: 12px;
height: 1.5px;
border-radius: 1px;
background: var(--dim-2);
transition: width .3s cubic-bezier(.2, .8, .2, 1), background-color .3s linear;
}
.site-side-link.is-active { color: var(--ink); }
.site-side-link.is-active .site-side-tick { width: 26px; background: var(--accent); }
.site-side-minor { display: flex; flex-direction: column; gap: 4px; padding: 5px 0; }
.site-side-minor i {
display: block;
height: 1px;
max-width: 20px;
background: rgb(var(--ink-rgb) / .14);
transition: width .18s ease-out, background-color .18s linear;
}
@media (prefers-reduced-motion: reduce) { .site-side-tick, .site-side-minor i { transition: none; } }
@media (min-width: 1024px) {
html .hero .t-h1 { font-size: 54px; }
.cb-side { display: none !important; }
.cb-shell { grid-template-columns: minmax(0, 760px) !important; justify-content: center; }
}
@media (min-width: 1280px) { html .hero .t-h1 { font-size: 64px; } }
@media (min-width: 1440px) { html .hero .t-h1 { font-size: 72px; } }
@media (min-width: 1280px) and (max-width: 1599.98px) { .cb-toc { display: none !important; } }
@media (min-width: 1600px) { .cb-shell { grid-template-columns: minmax(0, 760px) 196px !important; } }
@media (min-width: 1024px) {
main { overflow-x: clip; }
html .site-footer-mark {
width: calc(100vw - var(--side-w) - 24px);
margin-left: calc(50% - (100vw - var(--side-w)) / 2 + 12px);
}
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
html .cw-tab { padding-inline: 10px; }
}
.scene-canvas {
position: fixed;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero { padding-block: 40px 96px; }
@media (min-width: 768px) {
.hero { padding-block: 64px 128px; }
}
@media (min-width: 1024px) {
.hero { padding-block: 80px 128px; }
}
.hero-center {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.hero-center .hero-sub { max-width: 46ch; margin-top: 32px; }
@media (min-width: 1024px) { .hero { padding-block: 112px 144px; } }
.hero-eyebrow { display: inline-block; }
.hero-title { margin-top: 28px; }
.hero-actions {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 32px;
}
.hero-cta { width: 100%; }
.hero-link {
display: inline-flex;
align-items: center;
min-height: 48px;
margin-top: 8px;
font-size: 15px;
line-height: 1;
font-weight: 500;
letter-spacing: -.01em;
}
@media (min-width: 768px) {
.hero-actions {
flex-direction: row;
align-items: center;
gap: 24px;
}
.hero-cta { width: auto; }
.hero-link { margin-top: 0; }
}
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero > .container { position: relative; z-index: 1; }
.hero-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-floor {
position: absolute;
left: -20%;
right: -20%;
bottom: -2%;
height: 46%;
background-image:
linear-gradient(to right, rgb(var(--ink-rgb) / .07) 1px, transparent 1px),
linear-gradient(to bottom, rgb(var(--ink-rgb) / .07) 1px, transparent 1px);
background-size: 64px 64px;
transform: perspective(520px) rotateX(62deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.hero .t-h1-first, .hero .t-h1-strong { display: block; }
.hero .t-h1-first { color: var(--muted); font-weight: 500; }
.hero .t-h1-strong { color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) { .hero { min-height: calc(100vh - var(--nav-height)); display: grid; align-items: center; } }
.hero .t-h1-line { display: inline; white-space: normal; }
.hero .t-h1 { font-size: 38px; }
@media (min-width: 768px) {
.hero .t-h1 { font-size: 40px; }
}
@media (min-width: 1024px) { .hero .t-h1 { font-size: 64px; } }
@media (min-width: 1280px) { .hero .t-h1 { font-size: 84px; } }
@media (max-width: 479.98px) {
.hero-eyebrow { font-size: 10.5px; letter-spacing: .04em; white-space: nowrap; }
}
@media (max-width: 359.98px) {
.hero-eyebrow { font-size: 9.5px; letter-spacing: .02em; }
}
.hero-view-row { justify-content: flex-start; }
@media (min-width: 768px) and (max-width: 1023.98px) {
.hero .t-h1 { font-size: 58px; }
}
@media (min-width: 1024px) {
.hero .t-h1-first, .hero .t-h1-strong { white-space: nowrap; }
.fonts-ready .hero .t-h1-first, .fonts-ready .hero .t-h1-strong { white-space: normal; }
}
@media (min-width: 1280px) { .hero .t-h1 { font-size: 82px; } }
.hero-backdrop::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 160px;
background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0), var(--bg));
pointer-events: none;
}
:root[data-theme="light"] .hero-backdrop::after {
content: "";
position: absolute;
inset: auto -10% 0;
height: 75%;
background:
radial-gradient(60% 70% at 30% 70%, rgba(255, 196, 61, .42), rgba(255, 196, 61, 0) 70%),
radial-gradient(55% 65% at 80% 72%, rgba(255, 221, 120, .38), rgba(255, 221, 120, 0) 70%),
linear-gradient(to top, rgba(255, 214, 102, .22), rgba(255, 214, 102, 0) 85%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
pointer-events: none;
}
:root[data-theme="light"] .hero-floor { display: none; }
:root[data-theme="light"] .hero + .section::before { display: none; }
.hero-founder { display: flex; align-items: center; gap: 12px; margin: 28px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); }
.hero-founder-photo { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.hero-founder-photo.is-initials {
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
color: var(--on-accent);
background: var(--accent);
border-color: transparent;
}
.hero-announce {
display: inline-flex;
align-items: stretch;
margin: 0;
border: 1px solid var(--line);
border-radius: 8px;
background: var(--panel);
font-size: 14px;
overflow: hidden;
}
.hero-announce-label { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--text-2); }
.hero-announce-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 178, 63, .16); }
.hero-announce-link { display: inline-flex; align-items: center; gap: 2px; padding: 8px 14px; border-left: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.hero-announce-link:hover { background: var(--raised); }
.hero-announce + .hero-title { margin-top: 28px; }
.hero-build { gap: 12px; padding-left: 6px; }
.hero-build-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: #0A0B10; }
.hero-talk {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
color: var(--ink);
font-weight: 500;
background: transparent;
}
.hero-talk:hover { border-color: var(--dim-2); background: var(--panel); }
@media (max-width: 767.98px) {
.hero-actions { gap: 12px; align-items: stretch; }
.hero-talk { width: 100%; }
}
@media (max-width: 479.98px) {
.hero-announce { font-size: 13px; white-space: nowrap; max-width: 100%; }
.hero-announce-label { gap: 8px; padding: 8px 10px; }
.hero-announce-link { padding: 8px 10px; }
}
@media (max-width: 767.98px) {
html .hero-actions { align-self: stretch; }
html .hero-actions .hero-build, html .hero-actions .hero-talk { width: 100%; justify-content: center; }
}
.hero .t-h1-first { color: var(--ink); }
.hero-dots {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
-webkit-mask-image: radial-gradient(120% 95% at 85% 85%, #000 25%, rgba(0, 0, 0, .45) 60%, transparent 95%);
mask-image: radial-gradient(120% 95% at 85% 85%, #000 25%, rgba(0, 0, 0, .45) 60%, transparent 95%);
}
@media (max-width: 767.98px) { .hero-dots { opacity: .7; } }
.hero-setup { width: 100%; max-width: 640px; margin-top: 40px; }
.hero-prompt {
position: relative;
display: flex;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 10px;
background:
repeating-linear-gradient(135deg, rgb(var(--ink-rgb) / .045) 0 1px, transparent 1px 9px),
rgb(var(--bg-rgb) / .72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.hero-prompt-text {
flex: 1;
min-width: 0;
margin: 0;
padding: 14px 16px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.55;
color: var(--text-2);
overflow-wrap: anywhere;
user-select: all;
-webkit-user-select: all;
}
.hero-prompt-btn {
flex: none;
display: grid;
place-items: center;
width: 52px;
border: 0;
border-left: 1px solid var(--line);
background: transparent;
color: var(--ink);
cursor: pointer;
transition: background .15s linear, color .15s linear;
}
.hero-prompt-btn:hover { background: rgb(var(--ink-rgb) / .06); color: var(--accent-ink); }
.hero-prompt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hero-prompt-btn.is-menu { border-radius: 0 9px 9px 0; }
.hero-prompt-btn.is-menu[aria-expanded="true"] svg { transform: rotate(180deg); }
.hero-prompt-btn svg { transition: transform .2s ease; }
.hero-prompt-menu {
position: absolute;
z-index: 5;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
padding: 8px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--panel);
box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
animation: hero-menu .16s ease-out;
}
@keyframes hero-menu { from { opacity: 0; transform: translateY(-4px); } }
.hero-prompt-menu-head { margin: 4px 10px 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-prompt-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: 15px; }
.hero-prompt-menu a:hover, .hero-prompt-menu a:focus-visible { background: var(--raised); outline: none; }
.hero-works { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; }
.hero-works-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hero-works ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.hero-works a { display: grid; place-items: center; color: var(--ink); opacity: .9; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .2s linear; }
.hero-works a:hover { opacity: 1; transform: translateY(-2px) scale(1.08); }
.hero-works a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 6px; }
@media (max-width: 767.98px) {
.hero-setup { margin-top: 28px; }
.hero-prompt-text { font-size: 12px; padding: 12px; }
.hero-prompt-btn { width: 44px; }
}
.deck-pager { display: none; }
@media (max-width: 639.98px) {
.deck[class] {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
width: auto;
gap: 12px;
margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border-top: 0;
}
.deck[class]::-webkit-scrollbar { display: none; }
.deck[class] > * {
flex: 0 0 84%;
display: flex;
flex-direction: column;
min-width: 0;
margin: 0;
padding: 22px 20px 22px;
border: 1px solid var(--line);
border-radius: var(--radius-panel);
background: var(--win);
scroll-snap-align: start;
scroll-snap-stop: always;
transition: opacity .35s ease, border-color .35s ease;
}
.deck[class] > :not(.is-front) { opacity: .45; }
.deck[class] > .is-front { border-color: var(--win-edge); }
.deck-pager {
display: flex;
gap: 6px;
margin-top: 14px;
}
.deck-pager-item {
flex: 1 1 0;
min-width: 0;
min-height: 44px;
padding: 10px 0 0;
border-top: 2px solid var(--line);
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.2;
letter-spacing: .02em;
text-align: left;
white-space: nowrap;
color: var(--muted);
transition: color .25s linear, border-color .25s linear;
}
.deck-pager-item.is-active { color: var(--ink); border-top-color: var(--accent); }
}
@media (max-width: 639.98px) and (prefers-reduced-motion: reduce) {
.deck[class] > *, .deck-pager-item { transition: none; }
}
@media (max-width: 639.98px) {
.deck[class].is-armed:not(.is-dealt) > * { opacity: 0; transform: translateX(56px); }
.deck[class].is-dealt > * {
animation:
deck-deal .7s cubic-bezier(.2, .8, .2, 1) backwards,
deck-hint 1.1s cubic-bezier(.45, 0, .2, 1) 1.15s;
}
.deck[class].is-dealt > :nth-child(2) { animation-delay: 80ms, 1.15s; }
.deck[class].is-dealt > :nth-child(3) { animation-delay: 160ms, 1.15s; }
.deck[class].is-dealt > :nth-child(4) { animation-delay: 240ms, 1.15s; }
.deck[class].is-dealt > :nth-child(5) { animation-delay: 320ms, 1.15s; }
.deck[class].is-dealt > :nth-child(n + 6) { animation-delay: 400ms, 1.15s; }
.deck-pager-item { position: relative; border-top-color: var(--line); }
.deck-pager-item.is-active { border-top-color: var(--line); }
.deck-pager-item::before {
content: "";
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.deck-pager-item.is-active::before { transform: none; }
}
@keyframes deck-deal { from { opacity: 0; transform: translateX(56px); } }
@keyframes deck-hint { 0%, 100% { transform: none; } 40% { transform: translateX(-32px); } }
@media (max-width: 639.98px) and (prefers-reduced-motion: reduce) {
.deck[class] > * { animation: none !important; opacity: 1; transform: none; }
.deck-pager-item::before { transition: none; }
}
.figure { position: relative; min-width: 0; }
.figure-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 24px;
}
.figure-tagline {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
min-width: 0;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.3;
color: var(--text-2);
}
.figure-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.figure-visual { margin-top: 16px; min-width: 0; }
.figure-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 12px;
}
.figure-caption {
font-size: 14px;
line-height: 1.5;
color: var(--muted);
}
.figure-caption.is-mono {
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.3;
}
.rd {
position: relative;
display: grid;
grid-template-columns: 40px 36px 24px 16px minmax(0, 1fr);
grid-template-rows:
minmax(48px, auto)
minmax(88px, auto)
minmax(48px, auto)
minmax(160px, auto)
minmax(48px, auto);
}
.rd .t-label { line-height: 15px; }
.rd-node {
grid-column: 2 / -1;
justify-self: start;
display: flex;
align-items: center;
justify-content: center;
width: 176px;
max-width: 100%;
min-width: 0;
padding-inline: 16px;
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--radius-panel);
color: var(--ink);
text-align: center;
}
.rd-node-agent { grid-row: 1; }
.rd-node-ac { grid-row: 3; }
.rd-node-provider { grid-row: 5; }
.rd-link {
position: relative;
display: block;
min-width: 0;
}
.rd-stroke {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
fill: currentColor;
}
.rd-arrow {
position: absolute;
display: block;
width: 8px;
height: 8px;
max-width: none;
overflow: visible;
}
.rd-arrow path {
fill: none;
stroke: currentColor;
stroke-width: 1;
stroke-linecap: round;
stroke-linejoin: round;
}
.rd-link { width: 1px; }
.rd-link-arrow {
left: 50%;
bottom: -2.5px;
margin-left: -4px;
transform: rotate(90deg);
}
.rd-link-in { grid-row: 2; grid-column: 3; justify-self: center; color: var(--text-2); }
.rd-path { grid-row: 4; grid-column: 3; }
.rd-path-upper { justify-self: start; color: var(--text-2); }
.rd-path-lower { justify-self: end; color: var(--muted); }
.rd-arc {
position: relative;
grid-column: 1;
grid-row: 1 / 4;
margin: 24px 0 24px 12px;
border: 1px solid currentColor;
border-right: 0;
border-radius: 8px 0 0 8px;
color: var(--accent-ink);
}
.rd-arc-curve { display: none; }
.rd-arc-curve path {
fill: none;
stroke: currentColor;
stroke-width: 1;
}
.rd-arc-arrow {
top: -4.5px;
right: -2.5px;
}
.rd-label {
grid-column: 5;
max-width: 200px;
min-width: 0;
text-wrap: balance;
}
.rd-label-compiled { grid-row: 2; align-self: center; color: var(--accent-ink); }
.rd-label-upper { grid-row: 4; align-self: start; margin-top: 24px; color: var(--text-2); }
.rd-label-lower { grid-row: 4; align-self: end; margin-bottom: 24px; color: var(--muted); }
@media (min-width: 768px) {
.rd {
grid-template-columns:
minmax(0, 8fr) minmax(0, 8fr)
minmax(0, 12fr)
minmax(0, 10fr) minmax(0, 10fr)
minmax(0, 30fr)
minmax(0, 22fr);
grid-template-rows:
auto
64px
minmax(56px, auto)
auto;
}
.rd .t-label { line-height: 16px; }
.rd-node {
grid-row: 3;
justify-self: stretch;
width: auto;
padding-inline: 8px;
}
.rd-node-agent { grid-column: 1 / 3; }
.rd-node-ac { grid-column: 4 / 6; }
.rd-node-provider { grid-column: 7 / 8; }
.rd-link { width: auto; height: 1px; }
.rd-link-arrow {
left: auto;
right: -2.5px;
top: 50%;
bottom: auto;
margin: -4px 0 0;
transform: none;
}
.rd-link-in { grid-row: 3; grid-column: 3; justify-self: stretch; align-self: center; }
.rd-path { grid-row: 3; grid-column: 6; justify-self: stretch; align-self: start; }
.rd-path-upper { margin-top: 16px; }
.rd-path-lower { margin-top: 40px; }
.rd-arc {
grid-row: 2;
grid-column: 2 / 5;
margin: 0;
border: 0;
border-radius: 0;
}
.rd-arc-curve { display: block; width: 100%; height: 100%; }
.rd-arc-arrow {
top: auto;
right: auto;
left: -4px;
bottom: -2.5px;
transform: rotate(90deg);
}
.rd-label { max-width: none; text-align: center; }
.rd-label-compiled {
grid-row: 1;
grid-column: 2 / 5;
justify-self: center;
align-self: end;
margin-bottom: 8px;
}
.rd-label-upper {
grid-row: 1 / 3;
grid-column: 6;
align-self: end;
margin: 0 0 -10px;
padding-inline: 8px;
}
.rd-label-lower {
grid-row: 3 / 5;
grid-column: 6;
align-self: start;
margin: 46px 0 0;
padding-inline: 8px;
}
}
@media (min-width: 1024px) {
.rd {
--rd-u: calc((100% - 264px) / 12);
grid-template-columns:
calc(var(--rd-u) * 1.5 + 24px) calc(var(--rd-u) * 1.5 + 24px)
calc(var(--rd-u) * 2 + 72px)
calc(var(--rd-u) + 12px) calc(var(--rd-u) + 12px)
calc(var(--rd-u) * 2 + 72px)
calc(var(--rd-u) * 3 + 48px);
}
}
@media (max-width: 767.98px) {
.rd { grid-template-columns: minmax(0, 150px) 36px minmax(0, 1fr); }
.rd-node { grid-column: 1; width: 100%; padding-inline: 10px; }
.rd-link-in { grid-column: 1; justify-self: center; }
.rd-path { grid-column: 1; }
.rd-path-upper { justify-self: end; margin-right: 34px; }
.rd-path-lower { justify-self: end; margin-right: 18px; }
.rd-arc {
grid-column: 2;
margin: 24px 12px 24px 0;
border: 1px solid currentColor;
border-left: 0;
border-radius: 0 8px 8px 0;
}
.rd-arc-arrow { right: auto; left: -2.5px; transform: rotate(180deg); }
.rd-label { grid-column: 3; max-width: none; }
.rd-label-compiled { grid-row: 1 / 4; align-self: center; }
.rd-label-upper, .rd-label-lower { grid-column: 2 / 4; padding-left: 12px; }
}
.rd-packet, .rd-arc-run { display: none; }
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
.rd-packet {
display: block;
position: absolute;
top: -3.5px;
left: 0;
width: 8px;
height: 8px;
border-radius: 2px;
opacity: 0;
animation: rd-ride 5.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
.rd-packet.is-in { background: var(--ink); animation-name: rd-ride-in; }
.rd-packet.is-out { background: var(--dim-2); animation-name: rd-ride-out; }
.rd-arc-curve .rd-arc-run {
display: block;
fill: none;
stroke: var(--accent);
stroke-width: 3;
stroke-linecap: round;
stroke-dasharray: 16px calc(var(--arc-len, 600px) + 16px);
stroke-dashoffset: 16px;
opacity: 0;
animation: rd-arc-run 5.6s cubic-bezier(.45, 0, .25, 1) infinite;
}
}
@keyframes rd-ride-in {
0% { left: 0; opacity: 0; }
3% { opacity: 1; }
20% { opacity: 1; }
22%, 100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes rd-arc-run {
0%, 25% { stroke-dashoffset: 16px; opacity: 0; }
27% { opacity: 1; }
54% { opacity: 1; }
56%, 100% { stroke-dashoffset: calc(var(--arc-len, 600px) * -1); opacity: 0; }
}
@keyframes rd-ride-out {
0%, 59% { left: 0; opacity: 0; }
62% { opacity: 1; }
82% { opacity: 1; }
84%, 100% { left: calc(100% - 8px); opacity: 0; }
}
.routing .routing-diagram { margin-top: 72px; }
@media (min-width: 1024px) { .routing .routing-diagram { margin-top: 112px; } }
.rfigs-lead { margin-top: 120px; }
@media (min-width: 1024px) { .rfigs-lead { margin-top: 176px; } }
.rfigs {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: 48px;
border-top: 1px solid var(--line);
}
.rfig {
display: flex;
flex-direction: column;
min-width: 0;
padding: 24px 0 44px;
border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) {
.rfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rfig { padding: 28px 40px 56px; }
.rfig:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
.rfig:nth-child(even) { padding-right: 0; }
}
@media (min-width: 1024px) {
.rfigs { margin-top: 72px; }
.rfig { padding: 32px 56px 64px; }
}
.rfig-label {
margin: 0;
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.4;
letter-spacing: .12em;
color: var(--muted);
}
.rfig-art { width: 100%; max-width: 380px; margin: 20px auto 28px; }
.rfig-art .figure-visual { margin-top: 0; }
@media (min-width: 768px) {
.rfig:nth-child(odd) .rfig-art { translate: 20px 0; }
.rfig:nth-child(even) .rfig-art { translate: -20px 0; }
}
@media (min-width: 1024px) {
.rfig-art { margin-block: 28px 40px; }
.rfig:nth-child(odd) .rfig-art { translate: 28px 0; }
.rfig:nth-child(even) .rfig-art { translate: -28px 0; }
}
.rfig-title {
margin: 0;
font-size: 18px;
line-height: 1.3;
font-weight: 500;
letter-spacing: -.015em;
color: var(--ink);
}
.rfig-body { margin-top: 10px; max-width: 46ch; color: var(--muted); }
@media (min-width: 1024px) { .rfig-title { font-size: 20px; } }
.iso { display: block; width: 100%; height: auto; overflow: visible; }
.iso-face,
.iso-inset,
.iso-trail {
vector-effect: non-scaling-stroke;
stroke-width: 1;
stroke-linejoin: round;
stroke-linecap: round;
transition: stroke .45s ease, fill .45s ease, stroke-dasharray .2s linear;
}
.iso-face { fill: var(--bg); stroke: var(--dim-2); }
.iso-top { fill: var(--win-bar); }
.tone-faint .iso-face { stroke: var(--dim); }
.tone-ink .iso-face { stroke: var(--text-2); }
.tone-accent .iso-face { stroke: var(--accent); }
.tone-accent .iso-top { fill: var(--accent-deep); }
.iso-solid[data-state="on"] .iso-face { stroke: var(--ink); }
.iso-solid[data-state="on"] .iso-top { fill: var(--win-raised); }
.iso-inset { fill: rgba(255, 178, 63, .12); stroke: var(--accent); }
.iso-solid[data-state="on"] .iso-inset { fill: var(--accent); }
.iso-solid[data-state="fault"] .iso-face { stroke: var(--dim); stroke-dasharray: 4 4; }
.iso-solid[data-state="fault"] .iso-inset { fill: none; stroke: var(--dim-2); stroke-dasharray: 3 3; }
.iso-trail { fill: none; stroke: var(--dim); stroke-dasharray: 1 5; }
.iso-trail[data-state="on"] { stroke: var(--ink); stroke-dasharray: 1 3; }
.iso-check {
fill: none;
stroke: var(--ink);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
@media (forced-colors: active) {
.iso-face, .iso-top, .tone-accent .iso-top { fill: Canvas; stroke: CanvasText; }
.iso-inset, .iso-solid[data-state="on"] .iso-inset { fill: Highlight; stroke: CanvasText; }
.iso-trail, .iso-check { stroke: CanvasText; }
}
@media (max-width: 639.98px) {
.rfigs-lead { margin-top: 96px; }
.rfigs { margin-top: 32px; }
.rfig[class] { padding: 18px 18px 22px; }
.rfig-art { max-width: 200px; margin: 8px auto 18px; }
.rfig-title { font-size: 17px; }
.rfig-body { margin-top: 8px; font-size: 14.5px; line-height: 1.5; }
}
@media (min-width: 640px) {
html .rfigs { grid-template-columns: minmax(0, 1fr); max-width: 920px; border-top: 0; }
html .rfig, html .rfig:nth-child(n) {
display: grid;
grid-template-columns: 168px minmax(0, 1fr);
gap: 36px;
align-items: center;
padding: 28px 0;
border: 0;
border-bottom: 1px solid var(--line);
}
html .rfig:last-child { border-bottom: 0; }
html .rfig .rfig-art, html .rfig:nth-child(n) .rfig-art {
width: 168px;
max-width: none;
margin: 0;
padding: 10px;
translate: none;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--panel);
aspect-ratio: 1;
display: grid;
place-items: center;
}
html .rfig-label { margin: 0 0 10px; }
html .rfig-title { margin-top: 0; font-size: 21px; }
html .rfig-body { max-width: 58ch; color: var(--text-2); }
}
@media (min-width: 1024px) {
html .rfig, html .rfig:nth-child(n) { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding: 32px 0; }
html .rfig .rfig-art, html .rfig:nth-child(n) .rfig-art { width: 200px; }
}
.evidence-ledger-row { width: 100%; }
.evidence-ledger-label { color: var(--text-2); }
.section-evidence .evidence-numerals {
display: grid;
row-gap: 12px;
}
.evidence-numeral {
display: grid;
grid-template-columns: 96px minmax(0, 1fr);
align-items: center;
}
.evidence-numeral-value { display: block; font-variant-numeric: tabular-nums; }
.evidence-numeral-caption {
display: block;
font-size: 14px;
line-height: 1.5;
color: var(--text-2);
}
.evidence-sum {
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
color: var(--text-2);
}
.evidence-grid {
display: grid;
grid-template-columns: repeat(22, 1fr);
gap: 3px;
margin-top: 32px;
}
.evidence-grid > i {
display: block;
aspect-ratio: 12 / 14;
border-radius: var(--radius-cell);
}
.evidence-grid > .m { background: var(--accent); }
.evidence-grid > .a {
background: transparent;
box-shadow: inset 0 0 0 1px var(--muted);
}
.evidence-grid.is-scene-owned {
opacity: 0;
transition: none;
}
.section-evidence .evidence-legend {
display: grid;
row-gap: 8px;
margin-top: 16px;
}
.evidence-legend-item {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.evidence-legend-text { color: var(--text-2); }
.evidence-swatch {
flex: none;
display: block;
width: 12px;
height: 14px;
border-radius: var(--radius-cell);
}
.evidence-swatch.is-matched { background: var(--accent); }
.evidence-swatch.is-left { box-shadow: inset 0 0 0 1px var(--muted); }
.evidence-swatch.is-different {
width: 32px;
border: 1px solid var(--muted);
border-radius: 0;
}
@media (min-width: 768px) {
.evidence-ledger .figure-foot { min-height: 32px; }
}
@media (max-width: 767.98px) {
.evidence-ledger .figure-foot {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
@media (min-width: 768px) {
.section-evidence .evidence-numerals {
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 24px;
}
.evidence-numeral { display: block; }
.evidence-numeral-caption { margin-top: 12px; }
.evidence-grid {
grid-template-columns: repeat(40, 1fr);
gap: 4px;
}
.section-evidence .evidence-legend {
display: flex;
flex-wrap: wrap;
column-gap: 16px;
row-gap: 8px;
}
}
@media (min-width: 1024px) {
.evidence-grid { grid-template-columns: repeat(60, 1fr); }
}
.results-tagrow {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 12px;
margin-top: 56px;
}
.results-label { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.section-evidence .results-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: 24px;
border-top: 1px solid var(--line);
border-radius: 2px;
}
.result-cell {
display: grid;
align-content: start;
justify-items: center;
gap: 12px;
padding: 36px 16px;
text-align: center;
border-bottom: 1px solid var(--line);
}
.result-num {
font-size: 56px;
font-weight: 600;
line-height: 1;
letter-spacing: -.045em;
font-variant-numeric: tabular-nums;
color: var(--ink);
transition: color .3s ease-out, text-shadow .3s ease-out;
}
.result-cell:hover .result-num { color: #fff; text-shadow: 0 0 32px rgba(255, 178, 63, .35); }
.result-text { font-size: 17px; line-height: 1.45; color: var(--text-2); max-width: 30ch; text-wrap: balance; }
.result-scope { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--muted); max-width: 44ch; text-wrap: pretty; }
@media (min-width: 768px) {
.section-evidence .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-cell { padding: 44px 28px; }
.result-cell:nth-child(2n) { border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) {
.section-evidence .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.result-cell:nth-child(2n) { border-left: 0; }
.result-cell:not(:nth-child(3n + 1)) { border-left: 1px solid var(--line); }
.result-num { font-size: 64px; }
}
.section-evidence .results-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 12px;
margin-top: 32px;
}
.results-strip li { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.results-strip li + li::before { content: "·"; margin-right: 12px; color: var(--faint); }
.results-replay-stmt { margin-top: 160px; }
.results-replay-stmt .stmt-title { max-width: 18em; font-size: 26px; }
@media (max-width: 767.98px) { .results-replay-stmt { margin-top: 112px; } }
@media (min-width: 768px) { .results-replay-stmt .stmt-title { font-size: 32px; } }
@media (min-width: 1024px) {
.results-replay-stmt .stmt-title { grid-column: 1 / 8; font-size: 36px; }
.results-replay-stmt .stmt-lead { grid-column: 8 / 13; padding-top: 4px; }
}
@media (min-width: 1280px) { .results-replay-stmt .stmt-title { font-size: 40px; } }
@media (max-width: 639.98px) {
.evidence-grid { grid-template-columns: repeat(30, 1fr); gap: 2px; margin-top: 24px; }
.evidence-numeral { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); column-gap: 16px; }
}
.results-compare-stmt { margin-top: 136px; }
@media (min-width: 1024px) { .results-compare-stmt { margin-top: 184px; } }
.compare { margin: 48px 0 0; }
.compare-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.compare-tagrow { display: flex; align-items: center; gap: 12px; }
.compare-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); }
.compare-key { display: inline-flex; align-items: center; gap: 8px; }
.compare-key::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.compare-key.is-without::before { background: var(--dim-2); }
.compare-key.is-with::before { background: var(--accent); }
.compare-groups {
display: grid;
gap: 48px;
margin-top: 28px;
padding-top: 32px;
border-top: 1px solid var(--line);
}
@media (min-width: 1024px) {
.compare-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.compare-group { padding: 0 32px; }
.compare-group:first-child { padding-left: 0; }
.compare-group:last-child { padding-right: 0; }
.compare-group + .compare-group { border-left: 1px solid var(--line); }
}
.compare-title { margin: 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.compare-unit { margin: 4px 0 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.compare-plot { position: relative; margin-top: 18px; padding-top: 22px; }
.compare-axis { position: absolute; inset: 0 8px 0 8px; pointer-events: none; }
.compare-tick { position: absolute; top: 0; bottom: 0; left: var(--x); width: 0; border-left: 1px dashed rgb(var(--ink-rgb) / .07); }
.compare-tick-label {
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1;
color: var(--dim);
}
.compare-rows { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.compare-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.compare-model { font-size: 14.5px; color: var(--ink); }
.compare-value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--accent-ink); white-space: nowrap; }
.compare-track { position: relative; height: 18px; margin: 10px 8px 0; }
.compare-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(var(--ink-rgb) / .1); }
.compare-link {
position: absolute;
top: 50%;
height: 2px;
margin-top: -1px;
left: min(var(--from), var(--to));
width: calc(max(var(--from), var(--to)) - min(var(--from), var(--to)));
background: linear-gradient(90deg, var(--accent), rgb(var(--ink-rgb) / .25));
border-radius: 1px;
}
.compare-dot {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
}
.compare-dot.is-without { left: var(--from); background: var(--dim-2); box-shadow: 0 0 0 3px var(--bg); }
.compare-dot.is-with { left: var(--to); background: var(--accent); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px rgba(255, 178, 63, .35); }
.compare-dot-label {
position: absolute;
top: -18px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
white-space: nowrap;
}
.compare-scope { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--muted); }
.compare-key.is-estimate::before { background: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.compare-row.is-estimate .compare-value { font-weight: 400; color: var(--text-2); }
.compare-row.is-estimate .compare-dot.is-without { background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--dim-2), 0 0 0 3px var(--bg); }
.compare-row.is-estimate .compare-dot.is-with { background: var(--bg); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 3px var(--bg); }
.compare-row.is-estimate .compare-link { background: repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px); opacity: .7; }
.reveal-on .compare-group:not(.is-seen) .compare-dot.is-with { left: var(--from); opacity: 0; }
.reveal-on .compare-group:not(.is-seen) .compare-link { width: 0; left: max(var(--from), var(--to)); }
.reveal-on .compare .compare-dot.is-with { transition: left 1.1s cubic-bezier(.2, .8, .2, 1), opacity .3s linear; transition-delay: calc(var(--k) * 140ms + 200ms); }
.reveal-on .compare .compare-link { transition: left 1.1s cubic-bezier(.2, .8, .2, 1), width 1.1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k) * 140ms + 200ms); }
@media (prefers-reduced-motion: reduce) {
.compare .compare-dot, .compare .compare-link { transition: none !important; }
}
.compare-tick:first-child .compare-tick-label { transform: none; }
.compare-tick:last-child .compare-tick-label { transform: translateX(-100%); }
.compare-group { min-width: 0; padding-right: 8px; }
@media (max-width: 639.98px) {
.compare-legend { gap: 6px 16px; }
.compare-groups.deck[class] { margin-top: 20px; padding-top: 0; border-top: 0; }
.compare-groups.deck[class] > .compare-group { flex-basis: 86%; padding: 22px 18px 24px; }
.compare-title { font-size: 19px; }
.compare-unit { font-size: 11px; }
.compare-plot { margin-top: 22px; padding-top: 26px; }
.compare-rows { gap: 30px; }
.compare-model { font-size: 15.5px; }
.compare-value { font-size: 15px; }
.compare-track { height: 22px; margin-top: 12px; }
.compare-dot { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.compare-link { height: 3px; margin-top: -1.5px; }
.compare-tick-label { font-size: 10.5px; }
.compare-pager { margin-top: 16px; }
}
.integration-any-title { margin-top: 40px; }
.integration-panel-col { margin-top: var(--body-to-visual); }
@media (min-width: 768px) and (max-width: 1023.98px) {
.integration-panel-col { max-width: 640px; }
}
@media (min-width: 1024px) {
.section-integration > .container {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: auto auto auto auto;
column-gap: 24px;
}
.section-integration > .container > .unlock {
grid-column: 1 / -1;
grid-row: 2;
margin-bottom: 48px;
}
.section-integration > .container > * { min-width: 0; }
.section-integration > .container > .section-head {
grid-column: 1 / -1;
grid-row: 1;
margin-bottom: 48px;
}
.integration-text {
grid-column: 1 / 6;
grid-row: 3;
align-self: start;
}
.integration-panel-col {
grid-column: 7 / 13;
grid-row: 3;
align-self: start;
margin-top: 0;
}
}
.code-window {
overflow: hidden;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--win);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .04),
var(--shadow-deep);
}
.code-window .figure-visual { margin-top: 0; }
.cw-bar {
display: flex;
align-items: center;
gap: 14px;
min-height: 48px;
padding: 8px 10px 8px 16px;
border-bottom: 1px solid var(--win-line);
background: linear-gradient(var(--win-bar-top), var(--win-bar));
}
.cw-dots { display: inline-flex; gap: 6px; flex: none; }
.cw-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--win-edge); }
.cw-tabs { display: flex; gap: 2px; min-width: 0; }
.cw-tab {
height: 30px;
padding: 0 12px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
line-height: 1;
letter-spacing: -.01em;
white-space: nowrap;
color: var(--muted);
transition: color var(--dur-ui) linear, background-color var(--dur-ui) linear;
}
.cw-tab:hover { color: var(--text-2); }
.cw-tab[aria-selected="true"] {
color: var(--ink);
background: var(--win-raised);
box-shadow: inset 0 0 0 1px var(--win-edge);
}
.cw-tab:focus-visible, .cw-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cw-copy {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
height: 30px;
margin-left: auto;
padding: 0 10px;
border: 1px solid var(--win-edge);
border-radius: 8px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1;
color: var(--muted);
transition: color var(--dur-ui) linear, border-color var(--dur-ui) linear;
}
.cw-copy:hover { color: var(--ink); border-color: var(--dim); }
.cw-copy svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.cw-body { padding: 16px 0 18px; }
.cw-code { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.8; }
.cw-code code { display: block; }
.cw-line {
display: grid;
grid-template-columns: 30px 18px minmax(0, 1fr);
padding-right: 16px;
color: var(--text-2);
}
.cw-num, .cw-mark { user-select: none; -webkit-user-select: none; }
.cw-num { text-align: right; color: var(--dim); }
.cw-mark { text-align: center; }
.cw-text { min-height: 1.8em; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-add {
background: linear-gradient(90deg, rgba(255, 178, 63, .11), rgba(255, 178, 63, .035) 55%, rgba(255, 178, 63, 0));
box-shadow: inset 2px 0 0 var(--accent);
color: var(--ink);
}
.cw-add .cw-num { color: var(--tk-num-add); }
.cw-add .cw-mark { color: var(--accent-ink); }
.cw-del { color: var(--muted); }
.tk-kw { color: var(--tk-kw); }
.tk-str { color: var(--tk-str); }
.tk-fn { color: var(--ink); }
.tk-p { color: var(--tk-p); }
.cw-add .tk-fn { color: var(--hot); }
.cw-also { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--win-line); }
.cw-comment {
margin: 0 0 4px;
padding-left: 48px;
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.8;
color: var(--faint);
}
.cw-comment::before { content: "# "; }
.cw-block + .cw-block { margin-top: 18px; }
.cw-block-label {
margin: 0 0 6px;
padding-left: 48px;
font-size: 13px;
font-weight: 500;
color: var(--text-2);
}
.cw-panels { display: grid; }
.cw-panel {
grid-area: 1 / 1;
min-width: 0;
opacity: 1;
visibility: visible;
transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear 0s;
}
.cw-panel.is-inactive {
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}
.cw-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.code-window .figure-foot {
margin-top: 0;
padding: 12px 16px;
border-top: 1px solid var(--win-line);
background: var(--win-bar);
}
.code-window .figure-caption {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 4px 16px;
font-size: 12px;
}
.cw-summary { font-family: var(--font-mono); color: var(--muted); }
.cw-note { color: var(--faint); }
@media (max-width: 559.98px) {
.cw-dots { display: none; }
.cw-bar { gap: 8px; padding-left: 8px; }
.cw-tab { padding: 0 9px; font-size: 12px; }
}
@media (max-width: 359.98px) {
.cw-copy-text { display: none; }
.cw-copy { padding: 0 8px; }
.cw-line { grid-template-columns: 24px 14px minmax(0, 1fr); padding-right: 10px; }
.cw-comment, .cw-block-label { padding-left: 38px; }
}
@media (min-width: 768px) {
.cw-code, .cw-comment { font-size: 13px; }
.cw-line { grid-template-columns: 40px 22px minmax(0, 1fr); padding-right: 20px; }
.cw-comment, .cw-block-label { padding-left: 62px; }
.cw-body { padding: 20px 0 22px; }
}
@media (max-width: 1023.98px) {
.integration-text { text-align: center; }
.integration-text .t-body { margin-inline: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
.integration-panel-col { margin-inline: auto; }
}
.integration-cookbook {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-top: 12px;
font-weight: 500;
color: var(--accent-ink);
}
.integration-cookbook:hover { text-decoration: underline; text-underline-offset: 4px; }
.integration-steps { margin: 0 0 40px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.integration-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.integration-step-n { font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: var(--accent-ink); }
.integration-step-label { font-size: 16px; font-weight: 500; color: var(--ink); }
.integration-step-cmds { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.integration-step-cmds code {
padding: 6px 12px;
border: 1px solid var(--win-line);
border-radius: 6px;
background: var(--win);
font-family: var(--font-mono);
font-size: 13px;
color: var(--ink);
}
.integration-step-cmds code span { color: var(--muted); }
html .integration-text { text-align: left; }
html .integration-text .integration-cookbook { justify-content: flex-start; }
.connectors {
--cn-cycle: 4.2s;
--cn-step: calc(var(--cn-cycle) / var(--count, 6));
--cn-glow: drop-shadow(0 0 12px rgb(var(--ink-rgb) / .24));
--cn-flare: drop-shadow(0 0 20px rgba(255, 178, 63, .9)) brightness(1.2);
position: relative;
margin: 88px 0 0;
}
.cn-diagram { position: relative; display: flex; flex-direction: column; align-items: center; }
.cn-fan { display: none; }
.cn-hub { position: relative; z-index: 1; display: grid; place-items: center; line-height: 0; }
.section-connectors .cn-logos {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 34px 12px;
width: 100%;
max-width: 520px;
margin: 64px 0 0;
padding: 0;
list-style: none;
}
.cn-logos > .cn-provider { flex: 0 0 calc((100% - 12px) / 2); }
@media (min-width: 600px) {
.section-connectors .cn-logos { max-width: 760px; gap: 40px 20px; }
.cn-logos > .cn-provider { flex-basis: calc((100% - 40px) / 3); }
}
.cn-logos::before {
content: "";
position: absolute;
left: 50%;
top: -52px;
width: 1px;
height: 40px;
background: linear-gradient(var(--accent), var(--accent)) 0 -14px / 1px 14px no-repeat, rgb(var(--ink-rgb) / .2);
}
.cn-provider { display: grid; place-items: center; min-height: 44px; }
.cn-logo {
display: block;
height: 26px;
width: auto;
max-width: 100%;
color: var(--ink);
filter: var(--cn-glow);
}
.cn-logo-anthropic { height: 17px; }
.cn-logo-azure, .cn-logo-bedrock { height: 22px; }
@media (min-width: 1024px) {
.connectors { margin-top: 136px; }
.cn-diagram {
display: grid;
grid-template-columns: minmax(0, 1fr) 150px minmax(240px, 380px) minmax(0, 290px) minmax(0, 1fr);
grid-template-rows: repeat(var(--count, 6), 78px);
align-items: center;
}
.cn-hub { grid-column: 2; grid-row: 1 / -1; justify-self: end; margin-right: 14px; }
.cn-fan { display: block; grid-column: 3; grid-row: 1 / -1; align-self: stretch; width: 100%; height: 100%; overflow: visible; }
.section-connectors .cn-logos { display: contents; }
.cn-logos::before { display: none; }
.cn-provider { grid-column: 4; grid-row: var(--row); justify-self: start; min-height: 0; padding-left: 22px; }
.cn-logo { height: 34px; }
.cn-logo-anthropic { height: 22px; }
.cn-logo-azure, .cn-logo-bedrock { height: 28px; }
}
.cn-line { fill: none; stroke: url(#cn-line-fade); stroke-width: .7; }
.cn-tail, .cn-head { fill: none; stroke-linecap: round; opacity: 0; }
.cn-tail { stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.6; stroke-dasharray: .22 2; stroke-dashoffset: .22; }
.cn-head {
stroke: var(--hot);
stroke-width: 2.4;
stroke-dasharray: .03 2;
stroke-dashoffset: .03;
filter: drop-shadow(0 0 3px rgba(255, 178, 63, .95)) drop-shadow(0 0 8px rgba(255, 178, 63, .7));
}
.connectors.is-armed:not(.is-on) .cn-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.connectors.is-armed:not(.is-on) .cn-provider { opacity: 0; transform: translateX(-8px); }
.connectors.is-armed:not(.is-on) .cn-hub { opacity: 0; transform: scale(.85); }
.connectors.is-on .cn-hub { animation: cn-hub-in .7s var(--ease-charge) both; }
.connectors.is-on .cn-line {
stroke-dasharray: 1;
animation: cn-draw 1s var(--ease-out) both;
animation-delay: calc(.3s + var(--i) * 70ms);
}
.connectors.is-on .cn-provider {
animation: cn-arrive .6s var(--ease-out) both;
animation-delay: calc(.8s + var(--i) * 70ms);
}
.connectors.is-on .cn-tail { animation: cn-tail-run var(--cn-cycle) linear infinite; animation-delay: calc(1.6s + var(--i) * var(--cn-step)); }
.connectors.is-on .cn-head { animation: cn-head-run var(--cn-cycle) linear infinite; animation-delay: calc(1.6s + var(--i) * var(--cn-step)); }
.connectors.is-on .cn-logo { animation: cn-flare var(--cn-cycle) ease-out infinite; animation-delay: calc(1.6s + var(--i) * var(--cn-step)); }
.connectors.is-on .cn-logos::before { animation: cn-drop 1.4s linear 1s infinite; }
@keyframes cn-hub-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes cn-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cn-arrive { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes cn-tail-run {
0% { stroke-dashoffset: .22; opacity: 1; }
26% { stroke-dashoffset: -1; opacity: 1; }
26.01%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes cn-head-run {
0% { stroke-dashoffset: .03; opacity: 1; }
26% { stroke-dashoffset: -1.19; opacity: 1; }
26.01%, 100% { stroke-dashoffset: -1.19; opacity: 0; }
}
@keyframes cn-flare {
0%, 19% { filter: var(--cn-glow); }
23% { filter: var(--cn-flare); }
42%, 100% { filter: var(--cn-glow); }
}
@keyframes cn-drop { from { background-position: 0 -14px, 0 0; } to { background-position: 0 40px, 0 0; } }
@media (prefers-reduced-motion: reduce) {
.connectors .cn-hub, .connectors .cn-line, .connectors .cn-provider, .connectors .cn-tail,
.connectors .cn-head, .connectors .cn-logo, .connectors .cn-logos::before { animation: none !important; }
}
@media (max-width: 767.98px) {
.connectors {
--cn-x: 61px;
--cn-run: 2.2s;
--cn-glow: drop-shadow(0 0 10px rgb(var(--ink-rgb) / .14));
margin-top: 64px;
}
.cn-diagram { align-items: flex-start; }
.cn-hub .ac-logo { font-size: 56px !important; }
.section-connectors .cn-logos {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
max-width: none;
margin: 16px 0 0;
padding-left: calc(var(--cn-x) + 40px);
}
.cn-logos > .cn-provider { flex: 0 0 64px; position: relative; justify-items: start; }
.cn-logos::before {
left: var(--cn-x);
top: -25px;
bottom: 32px;
height: auto;
background: rgb(var(--ink-rgb) / .18);
transform-origin: top;
}
.cn-logos::after {
content: "";
position: absolute;
left: calc(var(--cn-x) - 1px);
top: -25px;
width: 3px;
height: 22px;
margin-top: -22px;
border-radius: 2px;
background: linear-gradient(rgba(255, 178, 63, 0), var(--accent) 70%, var(--hot));
filter: drop-shadow(0 0 4px rgba(255, 178, 63, .9));
opacity: 0;
}
.cn-provider::before,
.cn-provider::after {
content: "";
position: absolute;
top: 50%;
left: -40px;
height: 1px;
}
.cn-provider::before { width: 28px; background: rgb(var(--ink-rgb) / .18); transform-origin: left; }
.cn-provider::after {
width: 10px;
height: 3px;
margin-top: -1px;
border-radius: 2px;
background: linear-gradient(90deg, rgba(255, 178, 63, 0), var(--accent) 60%, var(--hot));
filter: drop-shadow(0 0 4px rgba(255, 178, 63, .9));
opacity: 0;
}
.cn-logo { height: 24px; }
.cn-logo-anthropic { height: 15px; }
.cn-logo-azure, .cn-logo-bedrock { height: 21px; }
.connectors.is-armed:not(.is-on) .cn-logos::before { transform: scaleY(0); }
.connectors.is-armed:not(.is-on) .cn-provider::before { transform: scaleX(0); }
.connectors.is-on .cn-logos::before { animation: cn-spine .8s var(--ease-out) .25s both; }
.connectors.is-on .cn-provider::before { animation: cn-branch .4s var(--ease-out) both; animation-delay: calc(.45s + var(--i) * 90ms); }
.connectors.is-on .cn-provider { animation-delay: calc(.55s + var(--i) * 90ms); }
.connectors.is-on .cn-logos::after { animation: cn-spine-run var(--cn-cycle) linear 1.6s infinite; }
.connectors.is-on .cn-provider::after,
.connectors.is-on .cn-logo {
animation-duration: var(--cn-cycle);
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-delay: calc(1.6s + var(--cn-run) * (57 + 64 * var(--i)) / (64 * var(--count) - 7));
}
.connectors.is-on .cn-provider::after { animation-name: cn-branch-run; animation-timing-function: ease-in; }
.connectors.is-on .cn-logo { animation-name: cn-flare-rail; animation-timing-function: ease-out; }
}
@keyframes cn-spine { from { transform: scaleY(0); } to { transform: none; } }
@keyframes cn-branch { from { transform: scaleX(0); } to { transform: none; } }
@keyframes cn-spine-run {
0% { opacity: 1; transform: translateY(0); }
52% { opacity: 1; transform: translateY(calc(64px * var(--count) - 7px)); }
52.01%, 100% { opacity: 0; transform: translateY(calc(64px * var(--count) - 7px)); }
}
@keyframes cn-branch-run {
0% { opacity: 1; transform: translateX(0); }
6% { opacity: 1; transform: translateX(22px); }
6.01%, 100% { opacity: 0; transform: translateX(22px); }
}
@keyframes cn-flare-rail {
0%, 5% { filter: var(--cn-glow); transform: none; }
9% { filter: var(--cn-flare); transform: scale(1.05); }
28%, 100% { filter: var(--cn-glow); transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.connectors .cn-logos::after, .connectors .cn-provider::before, .connectors .cn-provider::after { animation: none !important; }
}
:root[data-theme="light"] .connectors {
--cn-glow: drop-shadow(0 0 0 transparent);
--cn-flare: drop-shadow(0 0 5px rgba(242, 160, 30, .55));
}
@media (max-width: 767.98px) {
.connectors.is-on .cn-logos::after,
.connectors.is-on .cn-provider::after,
.connectors.is-on .cn-logo { animation: none; }
}
@media (min-width: 1024px) {
html .section-connectors > .container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 56px;
align-items: center;
}
html .section-connectors .section-head { margin: 0; }
html .section-connectors .stmt-title { font-size: 44px; }
html .section-connectors .stmt-lead { max-width: 44ch; margin-top: 20px; font-size: 18px; color: var(--text-2); }
html .connectors { margin-top: 0; }
html .cn-diagram { grid-template-columns: 64px minmax(80px, 150px) max-content; grid-template-rows: repeat(var(--count, 6), 52px); justify-content: end; }
html .cn-hub { grid-column: 1; margin-right: 6px; }
html .cn-fan { grid-column: 2; }
html .cn-provider { grid-column: 3; padding-left: 16px; }
html .cn-logo { height: 24px; }
html .cn-logo-anthropic { height: 15px; }
html .cn-logo-azure, html .cn-logo-bedrock { height: 20px; }
}
.pilot-track { position: relative; margin-top: 56px; }
.pilot-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.section-pilot .pilot-steps { margin: 0; }
.pilot-step { position: relative; }
.pilot-beat {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--accent-ink);
}
.pilot-index { color: var(--muted); }
.pilot-step-title { margin-top: 12px; font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.pilot-step-body { margin-top: 10px; max-width: 40ch; }
.pilot-inline-scene { margin-top: 24px; }
.pilot-stage { display: none; }
@media (min-width: 1024px) {
.pilot-track.is-pinned { height: 450vh; margin-top: 32px; }
.pilot-track.is-pinned .pilot-sticky {
position: sticky;
top: var(--nav-height);
height: calc(100vh - var(--nav-height));
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
column-gap: 64px;
align-items: center;
}
.pilot-track.is-pinned .pilot-steps {
position: relative;
gap: 36px;
padding-left: 32px;
}
.pilot-track.is-pinned .pilot-steps::before,
.pilot-track.is-pinned .pilot-steps::after {
content: "";
position: absolute;
left: 0;
top: 6px;
bottom: 6px;
width: 1px;
background: var(--line);
}
.pilot-track.is-pinned .pilot-steps::after {
bottom: auto;
height: calc((100% - 12px) * var(--p, 0));
background: linear-gradient(var(--accent), rgba(255, 178, 63, .6));
box-shadow: 0 0 12px rgba(255, 178, 63, .6);
}
.pilot-track.is-pinned .pilot-step {
cursor: pointer;
opacity: .38;
transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.pilot-track.is-pinned .pilot-step.is-done { opacity: .55; }
.pilot-track.is-pinned .pilot-step.is-active { opacity: 1; transform: translateX(6px); }
.pilot-track.is-pinned .pilot-step:hover { opacity: .85; }
.pilot-track.is-pinned .pilot-step.is-active:hover { opacity: 1; }
.pilot-track.is-pinned .pilot-step-title { font-size: 30px; }
.pilot-track.is-pinned .pilot-inline-scene { display: none; }
.pilot-track.is-pinned .pilot-stage { display: grid; position: relative; }
.pilot-stage-slot {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(24px) scale(.98);
transition: opacity .8s var(--ease-out), transform .9s var(--ease-out);
pointer-events: none;
}
.pilot-stage-slot.is-current { opacity: 1; transform: none; }
}
.scene {
position: relative;
padding: 22px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--panel);
overflow: hidden;
}
.scene-head {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-2);
}
.scene-dot { width: 7px; height: 8px; border-radius: 1px; background: var(--accent); box-shadow: 0 0 10px rgba(255, 178, 63, .7); }
.scene-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
@media (min-width: 1024px) {
.scene { padding: 28px; min-height: 440px; display: flex; flex-direction: column; }
.scene-foot { margin-top: auto; }
}
.learn-rows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.section-pilot .learn-rows { margin-top: 18px; }
.learn-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
background: var(--raised);
box-shadow: inset 2px 0 0 var(--line);
font-size: 14px;
color: var(--text-2);
}
.learn-row.is-job { box-shadow: inset 2px 0 0 var(--accent); }
.learn-msg { min-width: 0; }
.learn-chip {
flex: none;
padding: 3px 8px;
border: 1px solid rgba(255, 178, 63, .55);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--accent-ink);
white-space: nowrap;
}
.prove-job {
margin-left: auto;
padding: 3px 9px;
border: 1px solid rgba(255, 178, 63, .55);
border-radius: 999px;
color: var(--accent-ink);
}
.prove-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 4px;
margin-top: 22px;
}
@media (min-width: 640px) { .prove-grid { grid-template-columns: repeat(16, 1fr); gap: 5px; } }
.prove-grid > i, .prove-legend i {
display: block;
aspect-ratio: 12 / 14;
border-radius: 13%;
}
.prove-grid > .is-matched, .prove-legend .is-matched { background: var(--accent); }
.prove-grid > .is-left, .prove-legend .is-left { box-shadow: inset 0 0 0 1px var(--muted); }
.prove-legend {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-2);
}
.section-pilot .prove-legend { margin-top: 18px; }
.prove-legend li { display: inline-flex; align-items: center; gap: 8px; }
.prove-legend i { width: 10px; }
.prove-legend .is-different { width: 22px; aspect-ratio: auto; height: 12px; border-radius: 0; box-shadow: inset 0 0 0 1px var(--line); }
.prove-foot { display: flex; align-items: center; gap: 10px; }
.prove-check {
display: inline-grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--accent);
color: var(--on-accent);
font-size: 12px;
font-weight: 700;
}
.run-sdk {
display: grid;
margin-bottom: 18px;
padding: 8px 0;
border: 1px solid var(--win-line);
border-radius: 10px;
background: var(--win);
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.9;
}
.run-sdk-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding-right: 12px; color: var(--muted); }
.run-sdk-line code { font: inherit; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.run-sdk-mark { text-align: center; user-select: none; }
.run-sdk-line.is-add {
color: var(--ink);
background: linear-gradient(90deg, rgba(255, 178, 63, .12), rgba(255, 178, 63, .03) 60%, rgba(255, 178, 63, 0));
box-shadow: inset 2px 0 0 var(--accent);
}
.run-sdk-line.is-add .run-sdk-mark { color: var(--accent-ink); }
.run-rows { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.section-pilot .run-rows { margin-top: 18px; }
.run-row {
display: grid;
gap: 8px;
padding: 11px 12px;
border-radius: 8px;
background: var(--raised);
font-size: 14px;
color: var(--text-2);
}
.run-route { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-chip {
padding: 3px 8px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 11px;
white-space: nowrap;
}
.run-row.is-compiled .run-chip { background: var(--accent); color: var(--on-accent); font-weight: 500; }
.run-row.is-agent .run-chip { border: 1px solid var(--faint); color: var(--ink); }
.run-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
@media (min-width: 640px) {
.run-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.run-route { justify-content: flex-end; }
}
.pilot-track.is-armed .scene:not(.is-active) .learn-row,
.pilot-track.is-armed .scene:not(.is-active) .run-row { opacity: 0; transform: translateY(10px); }
.pilot-track.is-armed .scene:not(.is-active) .learn-chip { opacity: 0; transform: scale(.8); }
.pilot-track.is-armed .scene:not(.is-active) .prove-grid > i { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.pilot-track.is-armed .scene:not(.is-active) .prove-foot { opacity: 0; }
.pilot-track.is-armed .scene:not(.is-active) .run-sdk-line.is-add { opacity: 0; }
.pilot-track.is-armed .scene:not(.is-active) .run-sdk-type { clip-path: inset(0 100% 0 0); }
.scene-learn.is-active .learn-row { animation: pilot-rise .5s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.scene-learn.is-active .learn-chip { animation: pilot-pop .4s var(--ease-charge) both; animation-delay: calc(700ms + var(--i) * 110ms); }
.scene-learn.is-active .learn-row.is-job { animation: pilot-rise .5s var(--ease-out) both, pilot-edge .6s ease-out both; animation-delay: calc(var(--i) * 90ms), calc(700ms + var(--i) * 110ms); }
.scene-prove.is-active .prove-grid > .is-matched { animation: pilot-fill .35s var(--ease-charge) both; animation-delay: calc(var(--i) * 14ms); }
.scene-prove.is-active .prove-grid > .is-left { animation: pilot-outline .35s ease-out both; animation-delay: calc(var(--i) * 14ms); }
.scene-prove.is-active .prove-foot { animation: pilot-fade .5s ease-out 1.5s both; }
.scene-run.is-active .run-sdk-line.is-add { animation: pilot-fade .25s ease-out .15s both; }
.scene-run.is-active .run-sdk-type { animation: pilot-type .9s steps(34, end) .3s both; }
.scene-run.is-active .run-row { animation: pilot-rise .5s var(--ease-out) both; animation-delay: calc(1.5s + var(--i) * 420ms); }
.scene-run.is-active .run-row.is-compiled .run-chip { animation: pilot-flash .8s ease-out both; animation-delay: calc(1.5s + var(--i) * 420ms + 250ms); }
@keyframes pilot-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pilot-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pilot-pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes pilot-edge { from { box-shadow: inset 2px 0 0 var(--line); } to { box-shadow: inset 2px 0 0 var(--accent); } }
@keyframes pilot-fill {
0% { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
50% { background: var(--hot); box-shadow: 0 0 10px rgba(255, 178, 63, .7); }
100% { background: var(--accent); box-shadow: none; }
}
@keyframes pilot-outline { from { box-shadow: inset 0 0 0 1px var(--line); } to { box-shadow: inset 0 0 0 1px var(--muted); } }
@keyframes pilot-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pilot-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 63, .8); } 100% { box-shadow: 0 0 0 10px rgba(255, 178, 63, 0); } }
@media (prefers-reduced-motion: reduce) {
.scene *, .pilot-stage-slot, .pilot-step { animation: none !important; transition: none !important; }
}
.pilot-step-title { font-family: var(--font-display); font-weight: 500; }
.scene {
padding: 0;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--win);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--shadow-deep);
}
.scene-head {
padding: 14px 20px;
border-bottom: 1px solid var(--win-line);
background: linear-gradient(var(--win-bar-top), var(--win-bar));
color: var(--muted);
}
.scene-dot { box-shadow: none; }
.scene > :not(.scene-head):not(.scene-foot) { margin-inline: 20px; }
.scene > .scene-head + * { margin-top: 18px; }
.scene-foot {
margin-top: 20px;
padding: 12px 20px;
border-top: 1px solid var(--win-line);
background: var(--win-bar);
font-size: 13px;
color: var(--muted);
}
@media (min-width: 1024px) {
.scene { padding: 0; }
.scene-foot { margin-top: auto; }
.scene > :last-child:not(.scene-foot) { margin-bottom: 20px; }
}
.learn-rows, .run-rows { gap: 0; }
.learn-row, .run-row {
padding: 11px 0 11px 12px;
border-radius: 0;
background: none;
border-bottom: 1px solid var(--win-line);
font-size: 14px;
}
.learn-row:last-child, .run-row:last-child { border-bottom: 0; }
.learn-row { box-shadow: inset 1px 0 0 var(--line); }
.learn-row.is-job { box-shadow: inset 2px 0 0 var(--accent); color: var(--ink); }
.learn-chip, .prove-job, .run-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 500;
white-space: nowrap;
}
.learn-chip::before, .prove-job::before, .run-chip::before {
content: "";
width: 7px;
height: 8px;
border-radius: 1px;
background: var(--accent);
}
.learn-chip, .prove-job, .run-row.is-compiled .run-chip { color: var(--accent-ink); background: none; }
.run-row.is-agent .run-chip { color: var(--ink); border: 0; }
.run-row.is-agent .run-chip::before { background: none; box-shadow: inset 0 0 0 1px var(--text-2); }
.run-row.is-agent .run-msg { color: var(--ink); }
.run-note { font-size: 11.5px; }
@keyframes pilot-flash { 0% { color: var(--hot); text-shadow: 0 0 12px rgba(255, 178, 63, .8); } 100% { text-shadow: none; } }
.run-sdk { border-radius: 8px; background: var(--win-bar); }
@media (max-width: 639.98px) {
.section-pilot .pilot-steps.deck { gap: 16px; }
.pilot-steps.deck[class] > .pilot-step { padding: 0; border: 0; background: none; flex-basis: 88%; }
.pilot-step-title { font-size: 23px; }
.pilot-step-body { font-size: 15px; }
.pilot-pager { margin-top: 20px; }
.scene-head { padding: 11px 16px; }
.scene > :not(.scene-head):not(.scene-foot) { margin-inline: 16px; }
.scene > .scene-head + * { margin-top: 12px; }
.scene-foot { margin-top: 14px; padding: 10px 16px; font-size: 12px; }
.learn-row, .run-row { padding: 8px 0 8px 12px; font-size: 13.5px; line-height: 1.35; }
.learn-row { flex-direction: column-reverse; align-items: flex-start; gap: 3px; }
.learn-chip, .prove-job, .run-chip, .run-note { font-size: 10.5px; }
.learn-chip::before, .prove-job::before, .run-chip::before { width: 6px; height: 7px; }
.run-row { gap: 3px; }
.prove-grid { grid-template-columns: repeat(16, 1fr); gap: 3px; margin-top: 14px; }
}
@media (max-width: 639.98px) {
.pilot-step-title { margin-top: 8px; font-size: 21px; }
.pilot-step-body { margin-top: 6px; font-size: 14.5px; line-height: 1.45; }
.pilot-inline-scene { margin-top: 14px; }
.learn-row, .run-row { padding-block: 6px; }
.pilot-pager { margin-top: 12px; }
}
@media (max-width: 767.98px) {
.scene-run.is-active .run-row.is-compiled .run-chip { animation: none; }
.prove-grid > i { animation-name: pilot-fill-calm !important; }
.prove-grid > i.is-left { animation-name: pilot-outline !important; }
.scene-dot { box-shadow: none; }
}
@keyframes pilot-fill-calm {
from { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
to { background: var(--accent); box-shadow: none; }
}
.learn { display: grid; gap: 40px; margin-top: 120px; padding-top: 56px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
@media (min-width: 1024px) { .learn { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; } }
.learn-title { margin: 0; font-family: var(--font-display); font-size: 32px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
@media (min-width: 768px) { .learn-title { font-size: 40px; } }
.learn-lead { margin: 14px 0 0; max-width: 52ch; color: var(--text-2); }
.learn-points { display: grid; gap: 4px; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.learn-points li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.learn-n { grid-row: span 2; font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: var(--accent-ink); }
.learn-point-title { margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }
.learn-point-text { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.learn-figure { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
@media (min-width: 1024px) { .learn-figure { position: sticky; top: 40px; } }
.learn-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.learn-legend span { display: inline-flex; align-items: center; gap: 8px; }
.learn-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 2px; }
.learn-legend .is-compiled::before { background: var(--accent); }
.learn-legend .is-agent::before { border: 1px dashed var(--dim-2); }
.learn-chart { display: block; width: 100%; height: 240px; overflow: visible; }
.learn-agent { fill: none; stroke: var(--dim-2); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.learn-area { fill: rgba(255, 178, 63, .22); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.learn-job { fill: var(--accent); }
.learn-axis { margin: 10px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.learn-caption { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
.learn-figure .learn-area { clip-path: inset(0 100% 0 0); }
.learn-figure .learn-job { opacity: 0; }
.learn-figure.is-seen .learn-area { animation: learn-wipe 1.8s cubic-bezier(.45, 0, .25, 1) .2s forwards; }
.learn-figure.is-seen .learn-job { animation: learn-pop .4s ease-out forwards; }
}
@keyframes learn-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes learn-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rs-list { margin: 72px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rs-list.is-more { margin-top: 24px; }
.rs-row {
display: grid;
gap: 24px;
padding: 40px 0;
border-bottom: 1px solid var(--line);
color: inherit;
}
@media (min-width: 768px) { .rs-row { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 40px; align-items: center; } }
@media (min-width: 1024px) { .rs-row { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; } }
.rs-row:hover .rs-thumb { border-color: rgba(255, 178, 63, .45); }
.rs-row:hover .rs-row-title { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.rs-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 14px; }
.rs-row-title {
margin: 12px 0 0;
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.025em;
color: var(--ink);
text-wrap: balance;
}
@media (min-width: 1024px) { .rs-row-title { font-size: 30px; } }
.rs-row-excerpt { margin: 12px 0 0; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.rs-row .blog-read { margin-top: 18px; }
.rs-thumb {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
aspect-ratio: 16 / 10;
padding: 22px 22px 20px;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--bg);
transition: border-color .25s linear;
}
.rs-thumb .bc-bg { width: 100%; height: 100%; }
.rs-thumb-value {
position: relative;
font-family: var(--font-display);
font-size: clamp(56px, 16vw, 92px);
font-weight: 600;
line-height: .9;
letter-spacing: -.045em;
color: var(--accent-ink);
}
.rs-thumb-text { position: relative; margin-top: 10px; max-width: 30ch; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.rs-thumb-scope { position: relative; margin-top: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
.rs-thumb.is-large { padding: 32px; }
@media (max-width: 639px) { .rs-thumb.is-large { aspect-ratio: auto; min-height: 280px; padding: 22px; } .rs-thumb.is-large .rs-thumb-scope { display: none; } }
.rs-thumb.is-large .rs-thumb-value { font-size: clamp(72px, 20vw, 168px); }
.rs-thumb.is-large .rs-thumb-text { font-size: 17px; max-width: 36ch; }
.rs-figure { margin: 0 0 8px; padding: 24px 0 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rs-figure p { margin: 0; }
.rs-figure-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rs-figure-value {
margin-top: 12px !important;
font-family: var(--font-display);
font-size: 64px;
font-weight: 600;
line-height: 1;
letter-spacing: -.05em;
color: var(--ink);
}
.rs-figure-text strong { font-weight: 600; color: var(--accent-ink); }
.rs-figure-text { margin-top: 10px !important; font-size: 19px; line-height: 1.45; color: var(--ink); }
.rs-figure-scope { margin-top: 8px !important; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.rs-setup { margin: 0 0 12px; border-top: 1px solid var(--line); }
.rs-setup div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .rs-setup div { grid-template-columns: 150px minmax(0, 1fr); } }
.rs-setup dt { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.rs-setup dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.cl-list { margin: 72px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cl-entry { position: relative; display: grid; gap: 14px; padding: 48px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
@media (min-width: 1024px) {
.cl-entry { grid-template-columns: 240px minmax(0, 720px); gap: 64px; padding: 64px 0; }
.cl-date { position: sticky; top: 112px; align-self: start; }
}
.cl-date {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: 13px;
color: var(--muted);
}
.cl-date::before { content: ""; flex: none; width: 9px; height: 10px; border-radius: 2px; background: var(--accent); }
.cl-entry.is-next .cl-date { color: var(--accent-ink); }
.cl-entry.is-next .cl-date::before { background: transparent; border: 1px dashed var(--accent); }
.cl-versions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.cl-version {
padding: 4px 10px;
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
}
.cl-entry.is-next .cl-version { border-style: dashed; border-color: var(--accent); color: var(--accent-ink); }
.cl-title {
margin: 16px 0 0;
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
line-height: 1.15;
letter-spacing: -.03em;
color: var(--ink);
}
@media (min-width: 768px) { .cl-title { font-size: 34px; } }
.cl-title a { color: inherit; }
.cl-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.cl-text { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.cl-items { margin: 14px 0 0; }
.cl-items li { font-size: 16px; }
.cl-code {
margin: 20px 0 0;
padding: 14px 18px;
overflow-x: auto;
border: 1px solid var(--win-line);
border-radius: 10px;
background: var(--win);
font-family: var(--font-mono);
font-size: 13.5px;
color: var(--ink);
}
.cl-prompt { color: var(--muted); user-select: none; -webkit-user-select: none; }
.fd-page { width: min(760px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: 40px 0 140px; }
@media (min-width: 1024px) { .fd-page { padding-top: 96px; } }
.fd-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.fd-card { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 28px; }
.fd-photo { flex: none; width: 128px; height: 128px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
@media (min-width: 768px) { .fd-photo { width: 160px; height: 160px; } }
.fd-photo.is-initials {
display: grid;
place-items: center;
font-family: var(--font-display);
font-size: 44px;
font-weight: 600;
letter-spacing: -.02em;
color: var(--on-accent);
background: var(--accent);
border-color: transparent;
}
.fd-name { margin: 0; font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -.035em; color: var(--ink); }
@media (min-width: 768px) { .fd-name { font-size: 56px; } }
.fd-role { margin: 8px 0 0; font-size: 17px; color: var(--text-2); }
.fd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.fd-facts li { padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.fd-intro { margin: 40px 0 0; max-width: 56ch; font-size: 20px; line-height: 1.6; color: var(--text-2); }
.fd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.fd-talk { min-height: 48px; }
.fd-note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.fd-links { display: flex; gap: 16px; margin: 14px 0 0; font-size: 14.5px; }
.fd-links a { color: var(--accent-ink); font-weight: 500; }
.fd-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.fd-photo-ring { flex: none; display: inline-block; padding: 6px; border-radius: 50%; box-shadow: 0 0 60px rgba(255, 178, 63, .18); }
.fd-photo-ring.fx-orbit::before { padding: 2px; }
.fd-photo-ring .fd-photo { display: block; }
.faq-list { margin-top: var(--body-to-visual); border-bottom: 1px solid var(--line); }
.faq-item { border-top: 1px solid var(--line); }
.faq-q { margin: 0; }
.faq-toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
padding: 24px 0;
border: 0;
background: none;
color: var(--ink);
font: inherit;
font-size: 20px;
line-height: 1.3;
letter-spacing: -.015em;
font-weight: 500;
text-align: left;
cursor: pointer;
}
.faq-toggle:hover { color: #fff; }
.faq-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-icon { position: relative; flex: none; width: 16px; height: 16px; }
.faq-icon::before, .faq-icon::after {
content: "";
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 2px;
border-radius: 1px;
background: var(--accent);
transition: transform .35s var(--ease-out);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-list:not(.is-live) .faq-icon::after, .faq-item.is-open .faq-icon::after { transform: rotate(0deg); }
.faq-panel { display: grid; transition: grid-template-rows .4s var(--ease-out), opacity .3s ease; }
.faq-list.is-live .faq-panel { grid-template-rows: 0fr; opacity: 0; }
.faq-list.is-live .faq-item.is-open .faq-panel { grid-template-rows: 1fr; opacity: 1; }
.faq-panel-inner { overflow: hidden; }
.faq-a { padding-bottom: 24px; max-width: 64ch; color: var(--text-2); }
@media (min-width: 1024px) {
.faq-toggle { padding-block: 28px; }
}
@media (prefers-reduced-motion: reduce) {
.faq-panel, .faq-icon::before, .faq-icon::after { transition: none; }
}
.faq-more {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 22px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: none;
font: inherit;
font-size: 15px;
font-weight: 500;
color: var(--text-2);
cursor: pointer;
}
.faq-more:hover { color: var(--ink); }
.faq-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq-more-count { font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink); }
.faq-more {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 20px;
padding: 40px 0 8px;
border-bottom: 0;
cursor: pointer;
}
.faq-more-line { height: 1px; background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line)); }
.faq-more-line:last-child { background: linear-gradient(90deg, var(--line), var(--line) 70%, transparent); }
.faq-more-label { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.faq-more-count { padding: 0; }
.faq-more-arrow {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--accent-ink);
transition: border-color .25s linear, background-color .25s linear, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.faq-more-arrow svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.faq-more:hover .faq-more-arrow { border-color: rgba(255, 178, 63, .55); background: rgba(255, 178, 63, .08); }
.faq-more:hover .faq-more-arrow svg { transform: translateY(2px); }
.faq-more[aria-expanded="true"] .faq-more-arrow { transform: rotate(180deg); }
.faq-more[aria-expanded="true"]:hover .faq-more-arrow svg { transform: translateY(2px); }
.faq-more:focus-visible { outline: none; }
.faq-more:focus-visible .faq-more-arrow { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.faq-more-arrow, .faq-more-arrow svg { transition: none; }
}
.section-contact { overflow: hidden; isolation: isolate; padding-bottom: var(--section-pad); }
.section-contact > .container { position: relative; z-index: 1; }
.contact-backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.contact-glow {
position: absolute;
left: 34%;
top: 44%;
width: min(1100px, 140%);
height: 70%;
transform: translate(-50%, -50%);
background: radial-gradient(50% 50% at 50% 50%, rgba(255, 178, 63, .16), rgba(255, 178, 63, .04) 50%, transparent 72%);
filter: blur(6px);
}
.contact-floor {
position: absolute;
left: -20%;
right: -20%;
bottom: -4%;
height: 42%;
background-image:
linear-gradient(to right, rgb(var(--ink-rgb) / .06) 1px, transparent 1px),
linear-gradient(to bottom, rgb(var(--ink-rgb) / .06) 1px, transparent 1px);
background-size: 64px 64px;
transform: perspective(520px) rotateX(62deg);
transform-origin: 50% 100%;
-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.contact-card {
display: grid;
gap: 40px;
padding: 40px 20px;
border-radius: 24px;
}
.contact-mark { display: inline-flex; filter: drop-shadow(0 0 24px rgba(255, 178, 63, .45)); }
.contact-stmt { margin-top: 24px; }
.contact-action { display: flex; flex-direction: column; align-items: flex-start; }
.contact-note {
margin-top: 14px;
font-size: 15px;
line-height: 1.5;
color: var(--text-2);
}
@media (min-width: 1024px) {
.contact-card {
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
column-gap: 64px;
padding: 64px 56px;
}
.contact-action { align-items: flex-end; text-align: right; }
.contact-action .contact-email { flex-wrap: nowrap; justify-content: flex-end; }
}
.contact-email.copy-email-lg { align-items: center; }
.contact-email .copy-email-address {
white-space: nowrap;
overflow-wrap: normal;
font-size: clamp(12px, calc((100vw - 72px) / 17), 22px);
}
.contact-book { min-height: 52px; padding-inline: 26px; font-size: 16px; }
.contact-book-url { margin: 12px 0 0; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
@media (min-width: 1024px) { .contact-book-url { text-align: right; } }
.contact-aurora {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 78%, transparent 100%);
}
.contact-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .32; will-change: transform; }
.contact-blob.is-a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -6%; bottom: -55%; background: #FFB23F; animation: contact-drift 16s ease-in-out infinite alternate; }
.contact-blob.is-b { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -4%; bottom: -50%; background: #FF8A3D; animation: contact-drift 21s ease-in-out infinite alternate-reverse; }
.contact-blob.is-c { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; left: 38%; bottom: -45%; background: #FFD27A; animation: contact-drift 13s ease-in-out infinite alternate; }
@keyframes contact-drift { to { transform: translate(6vw, -4vw) scale(1.15); } }
:root[data-theme="light"] .contact-blob { opacity: .5; }
.contact-grain {
position: absolute;
inset: -50%;
opacity: .09;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: contact-grain 1s steps(4) infinite;
}
@keyframes contact-grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
@media (prefers-reduced-motion: reduce) { .contact-blob, .contact-grain { animation: none; } }
.agent-view-wrap { padding-block: 40px 96px; }
@media (min-width: 768px) {
.agent-view-wrap { padding-block: 64px 128px; }
}
@media (min-width: 1024px) {
.agent-view-wrap { padding-block: 80px 128px; }
}
.agent-view {
max-width: 80ch;
margin-inline: auto;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.7;
font-weight: 400;
color: var(--ink);
overflow-wrap: anywhere;
}
@media (min-width: 768px) {
.agent-view { font-size: 14px; }
}
.agent-view-header {
padding-bottom: 24px;
border-bottom: 1px solid var(--line);
}
.agent-view-title {
font-weight: 500;
color: var(--ink);
}
.agent-view-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 24px;
margin-top: 16px;
}
.agent-view-copy { min-width: 12ch; }
.agent-view-links {
display: flex;
flex-wrap: wrap;
gap: 0 24px;
}
.agent-view-links li {
display: flex;
align-items: center;
min-height: 44px;
}
.agent-view-link { position: relative; }
.agent-view-link::before {
content: "";
position: absolute;
inset: -12px -4px;
}
.agent-view-body { margin-top: 32px; }
.agent-view .agent-view-body > * + * { margin-top: 24px; }
.agent-view-h {
font-weight: 500;
color: var(--ink);
}
.agent-view-mark,
.agent-view-tag { color: var(--muted); }
.agent-view-list li {
padding-left: 2ch;
text-indent: -2ch;
}
.agent-view-list.is-ordered li {
padding-left: 4ch;
text-indent: -4ch;
}
.agent-view-code {
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: inherit;
}
.agent-view-toc { display: none; }
@media (min-width: 1280px) {
.agent-view-wrap {
display: grid;
grid-template-columns: 220px minmax(0, 80ch);
justify-content: center;
column-gap: 64px;
align-items: start;
}
.agent-view-wrap > div:first-child { grid-column: 1 / -1; }
.agent-view { margin-inline: 0; }
.agent-view-toc {
display: block;
position: sticky;
top: calc(var(--nav-height) + 32px);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.5;
}
.agent-view-toc-label { color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.agent-view-toc ol { margin: 14px 0 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.agent-view-toc a {
display: block;
padding: 6px 0 6px 14px;
margin-left: -1px;
border-left: 1px solid transparent;
color: var(--text-2);
}
.agent-view-toc a:hover { color: var(--ink); border-left-color: var(--muted); }
.agent-view-toc a.is-brief { color: var(--accent-ink); }
}
#brief::before {
content: "";
display: inline-block;
width: 8px;
height: 9px;
margin-right: 10px;
border-radius: 1px;
background: var(--accent);
vertical-align: 1px;
}
.site-footer {
overflow: hidden;
border-top: 1px solid var(--line);
padding-top: 56px;
padding-bottom: 28px;
}
.site-footer-top { display: flex; flex-direction: column; gap: 40px; }
.site-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer-line { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.site-footer-right { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.site-footer-links {
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: 32px;
}
.site-footer-link {
display: inline-flex;
align-items: center;
min-height: 40px;
min-width: 44px;
font-size: 14px;
line-height: 1;
color: var(--text-2);
transition: color var(--dur-ui) linear;
}
.site-footer-link:hover { color: var(--ink); }
.site-footer-mark {
container-type: inline-size;
display: flex;
justify-content: center;
width: calc(100vw - 2 * 12px);
margin: 40px 0 0 calc(50% - 50vw + 12px);
line-height: 0;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, #000 12%, rgba(0, 0, 0, .45) 55%, transparent 97%);
mask-image: linear-gradient(to bottom, #000 12%, rgba(0, 0, 0, .45) 55%, transparent 97%);
}
.site-footer-mark.is-waiting .ac-mark { opacity: 0; }
.site-footer-mark .ac-logo { font-size: calc(100cqw / 8.3) !important; }
@media (forced-colors: active) { .site-footer-mark { display: none; } }
.site-footer-bottom {
display: flex;
flex-direction: column;
gap: 32px;
margin-top: 0;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.site-footer-meta { display: flex; flex-direction: column; gap: 14px; }
.site-footer-copyright { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (min-width: 768px) {
.site-footer-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
.site-footer-right { align-items: flex-end; }
.site-footer-links { grid-template-columns: repeat(3, max-content); column-gap: 40px; }
.site-footer-bottom { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
.walker {
position: fixed;
left: 0;
top: 0;
z-index: -1;
width: 43px;
height: 32px;
opacity: 0;
pointer-events: none;
transform-origin: 50% 50%;
will-change: transform, opacity;
}
.walker svg { display: block; overflow: visible; }
.walker-leg {
fill: var(--ink);
transform-box: view-box;
transform-origin: 26px 24px;
transition: transform .2s ease-out;
}
.walker-head { fill: var(--accent); }
.walker-bob { transform-box: view-box; transform-origin: 26px 24px; }
.walker.is-walking .walker-leg-a { animation: walker-a .5s ease-in-out infinite; }
.walker.is-walking .walker-leg-b { animation: walker-b .5s ease-in-out infinite; }
.walker.is-walking .walker-bob { animation: walker-bob .25s ease-in-out infinite alternate; }
@keyframes walker-a { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-20deg); } }
@keyframes walker-b { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(20deg); } }
@keyframes walker-bob { from { transform: none; } to { transform: translateX(1.4px); } }
.walker-trail {
position: fixed;
left: 0;
top: 0;
z-index: -1;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
transform-origin: 0 0;
background: linear-gradient(90deg, rgba(255, 178, 63, 0), rgba(255, 178, 63, .55));
}
@media (prefers-reduced-motion: reduce) {
.walker, .walker-trail { display: none; }
}