/* giong.run
   Layout: one left-aligned column of full-width bands; each band opens with a
   two-column header (claim on the left, context on the right). The only loud
   element is the segmented ring in the hero; everything else stays quiet.
   Brand values come from assets/README.md in the repository. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens: dark is the brand's home ground ---------- */
:root {
  color-scheme: dark;
  --ink: #0A0C10;          /* page */
  --ink-2: #10131A;        /* raised surface */
  --ink-3: #181C25;        /* inset, code */
  --line: #252B37;
  --line-2: #353D4C;
  --fg: #E9EDF2;
  --fg-2: #AEB6C3;
  --fg-3: #7F8898;
  --ember: #FF6A2B;        /* the lit segment */
  --ember-2: #D9572A;
  --ember-3: #B54A2A;
  --ember-4: #8C3D29;
  --ember-ink: #FF7A42;    /* ember when it is text */
  --on-ember: #0A0C10;
  --bar: #3B4455;          /* every server that is not giong */
  --seg-off: #1C212B;
  --code-str: #FFB592;
  --code-type: #A9C4EA;

  --display: "Inter", "Inter Display", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 72.5rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --band: clamp(4rem, 9vw, 7rem);
  --radius: 6px;
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ink: #F4F6F9;
    --ink-2: #FFFFFF;
    --ink-3: #E9EDF2;
    --line: #D6DBE4;
    --line-2: #BCC3CF;
    --fg: #0A0C10;
    --fg-2: #3C4452;
    --fg-3: #5E6776;
    --ember-ink: #BF4208;
    --bar: #AEB6C4;
    --seg-off: #DCE1E9;
    --code-str: #AD3F0A;
    --code-type: #24518F;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font: 400 1.0625rem/1.6 var(--body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: no-contextual;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--ember); }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ember); color: var(--on-ember); }
h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code, kbd, pre { font-family: var(--mono); font-size: 0.9em; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
p code, li code, dd code, td code {
  font-size: 0.86em; padding: 0.1em 0.35em; border-radius: 4px;
  background: var(--ink-3); color: var(--fg); overflow-wrap: anywhere;
}
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.08; letter-spacing: -0.028em; font-weight: 750; }
h3 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }

.wrap {
  max-width: var(--wrap); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.mono, .eyebrow { font-family: var(--mono); }

.eyebrow {
  font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ember-ink); font-weight: 500;
}
.skip { position: absolute; left: -999px; top: 0; background: var(--ember); color: var(--on-ember); padding: 0.5rem 1rem; z-index: 50; }
.skip:focus { left: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 1.5rem; min-height: 3.75rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; margin-right: auto; }
.brand img { width: 2rem; height: 2rem; }
.brand span { font: 800 1.375rem/1 var(--display); letter-spacing: -0.035em; }
.nav-links { display: flex; gap: 1.5rem; font-size: 0.9375rem; color: var(--fg-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--fg); }
.nav-side { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; }
@media (max-width: 1080px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 600 0.9375rem/1 var(--body); text-decoration: none;
  padding: 0.8rem 1.15rem; border-radius: var(--radius); border: 1px solid var(--line-2);
  color: var(--fg); background: transparent; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.btn:hover { border-color: var(--fg-3); }
.btn-main { background: var(--ember); border-color: var(--ember); color: var(--on-ember); }
.btn-main:hover { background: #FF7D45; border-color: #FF7D45; }
.btn-sm { padding: 0.5rem 0.8rem; font-size: 0.875rem; }
.btn svg { width: 1.05em; height: 1.05em; fill: currentColor; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; min-width: 0; }
.status { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font: 500 0.8125rem/1.4 var(--mono); color: var(--fg-2); }
.status b { color: var(--ember-ink); font-weight: 600; }
.status span + span::before { content: "/"; color: var(--line-2); margin-right: 0.9rem; }
h1 {
  font-size: clamp(2.6rem, 6.6vw, 5rem); line-height: 1; letter-spacing: -0.042em; font-weight: 800;
}
h1 em { font-style: normal; color: var(--ember); }
.lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--fg-2); max-width: 36em; }
.lede strong { color: var(--fg); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cmd {
  display: flex; align-items: center; gap: 0.75rem; width: max-content; max-width: 100%;
  font: 0.8125rem/1.5 var(--mono); color: var(--fg-2);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.55rem 0.55rem 0.55rem 0.9rem;
}
.cmd code { font-size: 1em; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; min-width: 0; scrollbar-width: none; color: var(--fg); }
.cmd code::-webkit-scrollbar { display: none; }
.cmd code::before { content: "$ "; color: var(--fg-3); }
.copy {
  flex: none; font: 500 0.75rem/1 var(--mono); color: var(--fg-2); cursor: pointer;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0.45rem 0.6rem;
}
.copy:hover { color: var(--fg); border-color: var(--line-2); }
.copy.done { color: var(--ember-ink); border-color: var(--ember-ink); }

/* the tick: one turn of the event loop */
.tick { display: grid; gap: 1.25rem; justify-items: center; min-width: 0; }
.tick-ring { position: relative; width: min(100%, 23rem); aspect-ratio: 1; }
.tick-ring svg { width: 100%; height: 100%; }
.seg { fill: var(--seg-off); transition: fill 0.28s ease; }
.seg.on { fill: var(--ember); transition-duration: 0.08s; }
.seg.on.a1 { fill: var(--ember-4); }
.seg.on.a2 { fill: var(--ember-3); }
.seg.on.a3 { fill: var(--ember-2); }
.seg.done { fill: var(--fg); transition-duration: 0.12s; }
.tick-core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.15rem; }
.tick-ops { font: 500 0.8125rem/1.3 var(--mono); color: var(--fg-3); }
.tick-ops b { color: var(--fg); font-weight: 600; }
.tick-num { font: 800 clamp(4.5rem, 11vw, 7rem)/0.9 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--fg); }
.tick.enter .tick-num { color: var(--ember); }
.tick-unit { font: 500 0.8125rem/1.3 var(--mono); color: var(--fg-2); }
.vs { width: min(100%, 23rem); display: grid; gap: 0.5rem; font: 0.8125rem/1.3 var(--mono); }
.vs-row { display: grid; grid-template-columns: 8.75rem minmax(0, 1fr) 1.6rem; gap: 0.75rem; align-items: center; color: var(--fg-2); }
.vs-row b { font-weight: 600; color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; }
.vs-marks { display: flex; gap: 2px; height: 0.75rem; min-width: 0; }
.vs-marks i { flex: 1 1 0; max-width: 0.5rem; border-radius: 1px; background: var(--seg-off); transition: background 0.12s; }
.vs-marks i.on { background: var(--bar); }
.vs-row.is-giong .vs-marks i.on { background: var(--ember); }
.tick figcaption { width: min(100%, 23rem); font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); }
.tick figcaption a { color: var(--fg-2); }

/* the legend strip */
.legend { border-block: 1px solid var(--line); background: var(--ink-2); }
.legend-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 5vw, 4.5rem); padding-block: clamp(2rem, 4vw, 3rem); align-items: center; }
.legend p { font-size: clamp(1.0625rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.legend p strong { color: var(--fg); font-weight: 600; }
.idle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.idle div { display: grid; gap: 0.3rem; }
.idle dt { font: 800 clamp(1.8rem, 3.2vw, 2.5rem)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.idle dt small { font: 500 0.45em/1 var(--mono); letter-spacing: 0; color: var(--fg-2); margin-left: 0.2em; }
.idle dd { font-size: 0.875rem; line-height: 1.45; color: var(--fg-3); }

/* ---------- bands ---------- */
.sec { padding-block: var(--band); }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem clamp(1.5rem, 5vw, 4.5rem); align-items: end; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.sec-head .eyebrow { grid-column: 1 / -1; }
.sec-lede { color: var(--fg-2); font-size: 1rem; line-height: 1.6; }
.sec-lede a { color: var(--fg); }

/* why */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem clamp(1.5rem, 4vw, 3rem); }
.pillar { display: grid; gap: 0.6rem; align-content: start; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.pillar .tag { font: 500 0.75rem/1.4 var(--mono); color: var(--fg-3); overflow-wrap: anywhere; }
.pillar p { color: var(--fg-2); font-size: 0.9688rem; line-height: 1.6; }
.pillar p strong { color: var(--fg); font-weight: 600; }

/* numbers */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem); }
.chart { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.chart-head { display: grid; gap: 0.2rem; }
.chart-sub { font-size: 0.875rem; color: var(--fg-3); }
.bars { display: grid; gap: 0.5rem; }
.bar { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 4.25rem; gap: 0.75rem; align-items: center; font-size: 0.875rem; line-height: 1.25; }
.bar-name { color: var(--fg-2); }
.bar-track { position: relative; height: 0.875rem; }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); min-width: 3px; background: var(--bar); border-radius: 0 3px 3px 0; }
.bar-range { position: absolute; left: calc(var(--lo) * 1%); width: calc((var(--hi) - var(--lo)) * 1%); top: 100%; margin-top: 2px; height: 2px; background: var(--fg-3); }
.bar-val { font: 500 0.8125rem/1.2 var(--mono); font-variant-numeric: tabular-nums; color: var(--fg); text-align: right; white-space: nowrap; }
.bar.is-giong .bar-name { color: var(--fg); font-weight: 650; }
.bar.is-giong .bar-fill { background: var(--ember); }
.bar.is-alt .bar-fill { background: var(--ember-3); }
.bar.is-alt .bar-name { color: var(--fg); }
.bar-group { font: 500 0.75rem/1.4 var(--mono); color: var(--fg-3); margin-top: 0.5rem; }
.bar-group:first-child { margin-top: 0; }
.chart-note { font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.chart-src { font: 0.75rem/1.5 var(--mono); color: var(--fg-3); }
.chart-src a { color: var(--fg-2); }
.caveats { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(1.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); padding-top: 2rem; }
.caveats h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.caveats ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
.caveats li { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); padding-left: 1.1rem; position: relative; }
.caveats li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.375rem; background: var(--ember-3); border-radius: 1px; }
.caveats li strong { color: var(--fg); font-weight: 600; }

/* code */
.code-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.tabs { display: grid; gap: 0.25rem; }
.tab {
  text-align: left; background: none; border: 0; border-left: 2px solid var(--line); cursor: pointer;
  padding: 0.7rem 0 0.7rem 1rem; color: var(--fg-3); font: inherit; display: grid; gap: 0.15rem;
}
.tab b { font: 600 1rem/1.3 var(--body); color: var(--fg-2); }
.tab span { font: 0.75rem/1.4 var(--mono); }
.tab:hover b { color: var(--fg); }
.tab[aria-selected="true"] { border-left-color: var(--ember); }
.tab[aria-selected="true"] b { color: var(--fg); }
.panels { display: grid; gap: 1.5rem; min-width: 0; }
.panel { min-width: 0; }
.panel-title { font: 500 0.75rem/1.4 var(--mono); color: var(--fg-3); margin-bottom: 0.5rem; }
.js .panel-title { display: none; }
.js .panel[hidden] { display: none; }
pre.code {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem 1.35rem; overflow-x: auto; font-size: 0.8438rem; line-height: 1.65; color: var(--fg);
  tab-size: 4;
}
pre.code .c { color: var(--fg-3); }
pre.code .s { color: var(--code-str); }
pre.code .k { color: var(--ember-ink); }
pre.code .t { color: var(--code-type); }
.panel-foot { margin-top: 0.75rem; font-size: 0.875rem; color: var(--fg-3); }
.panel-foot a { color: var(--fg-2); }

/* design */
.loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.75rem; align-items: stretch; margin-bottom: 2.5rem; }
.loop-step { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: 0.3rem; align-content: start; position: relative; }
.loop-step b { font: 600 0.9375rem/1.3 var(--mono); }
.loop-step span { font-size: 0.875rem; color: var(--fg-2); line-height: 1.5; }
.loop-step.is-enter { border-color: var(--ember); }
.loop-step.is-enter b { color: var(--ember-ink); }
.loop-back { display: grid; place-items: center; font: 500 0.75rem/1.3 var(--mono); color: var(--fg-3); writing-mode: vertical-rl; padding-inline: 0.25rem; }
.workers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.worker { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; font: 0.8125rem/1.7 var(--mono); color: var(--fg-2); }
.worker b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 0.35rem; }
.worker li:last-child { color: var(--ember-ink); }
.worker.is-n { color: var(--fg-3); display: grid; place-content: center; text-align: center; border-style: dashed; }
.bus { grid-column: 1 / -1; border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 0.6rem 1.1rem; font: 0.8125rem/1.5 var(--mono); color: var(--fg-3); text-align: center; }
.decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 5vw, 4.5rem); }
.decisions div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.decisions dt { font: 600 0.9375rem/1.45 var(--body); }
.decisions dd { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }

/* crates */
.crates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.crate { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: 0.9rem; align-content: start; }
.crate h3 { font: 600 1.125rem/1.3 var(--mono); letter-spacing: -0.01em; }
.crate > p { font-size: 0.9375rem; color: var(--fg-2); line-height: 1.55; }
.crate ul { display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--fg-2); line-height: 1.5; }
.crate li { padding-left: 1rem; position: relative; }
.crate li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.3rem; background: var(--line-2); border-radius: 1px; }
.crate .fact { font: 0.75rem/1.55 var(--mono); color: var(--fg-3); border-top: 1px solid var(--line); padding-top: 0.9rem; margin-top: auto; }
.crate .fact b { color: var(--fg); font-weight: 600; }

/* verified */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(1.5rem, 5vw, 4.5rem); }
.proof-col { display: grid; gap: 0; align-content: start; }
.proof-col h3 { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding-bottom: 0.9rem; }
.proof-col li { border-top: 1px solid var(--line); padding-block: 0.9rem; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.proof-col li strong { color: var(--fg); font-weight: 600; }

/* limits */
.limits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.limit { display: grid; gap: 0.4rem; align-content: start; }
.limit p { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.else { margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(1.5rem, 5vw, 4.5rem); }
.else p { font-size: 0.9688rem; line-height: 1.6; color: var(--fg-2); }
.else p + p { margin-top: 0.6rem; }
.else p strong { color: var(--fg); font-weight: 600; }

/* start */
.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.reqs { display: grid; gap: 0; }
.reqs div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--line); }
.reqs dt { font: 500 0.8125rem/1.7 var(--mono); color: var(--fg-3); }
.reqs dd { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.reqs dd strong { color: var(--fg); font-weight: 600; }
.start-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 2.5rem 3rem; font-size: 0.875rem; color: var(--fg-3); }
.foot-in { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; }
.foot .brand { margin-right: 0; }
.foot .brand img { width: 1.5rem; height: 1.5rem; }
.foot .brand span { font-size: 1.0625rem; color: var(--fg); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-right: auto; }
.foot-links a { color: var(--fg-2); text-decoration: none; }
.foot-links a:hover { color: var(--fg); }
.ramp { display: flex; gap: 3px; }
.ramp i { width: 1.1rem; height: 0.4rem; border-radius: 1px; background: var(--ember); }
.ramp i:nth-child(1) { background: var(--ember-4); }
.ramp i:nth-child(2) { background: var(--ember-3); }
.ramp i:nth-child(3) { background: var(--ember-2); }

/* nav version pill and hero status links */
.ver { font: 500 0.8125rem/1 var(--mono); color: var(--ember-ink); text-decoration: none; border: 1px solid var(--line-2); border-radius: 999px; padding: 0.4rem 0.65rem; }
.ver:hover { border-color: var(--ember); }
.status a { text-decoration: none; }
.status a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--ember); }
.crate-links { font: 0.75rem/1.5 var(--mono); color: var(--fg-3); }
.crate-links a { color: var(--fg-2); }

/* compare */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); }
.cmp { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
.cmp thead th { border-top: 0; font: 600 0.8125rem/1.4 var(--mono); color: var(--fg-2); }
.cmp tbody th { font-weight: 600; color: var(--fg); width: 11rem; }
.cmp td { color: var(--fg-2); }
.cmp .is-giong { color: var(--fg); background: color-mix(in srgb, var(--ember) 7%, transparent); }
.cmp thead .is-giong { color: var(--ember-ink); box-shadow: inset 0 2px 0 var(--ember); }

/* roadmap */
.milestones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.ms { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.6rem; align-content: start; }
.ms-v { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ms-v b { font: 800 1.5rem/1 var(--display); letter-spacing: -0.03em; }
.ms-v span { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ms ul { display: grid; gap: 0.35rem; font-size: 0.875rem; color: var(--fg-2); line-height: 1.5; }
.ms li { padding-left: 1rem; position: relative; }
.ms li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.3rem; background: var(--line-2); border-radius: 1px; }
.ms-exit { font-size: 0.8125rem; line-height: 1.5; color: var(--fg-3); border-top: 1px solid var(--line); padding-top: 0.6rem; }
.ms-exit b { color: var(--fg-2); font-weight: 600; }
.ms.is-done { background: var(--ink-2); }
.ms.is-done li::before { background: var(--ember-3); }
.ms.is-current { border-color: var(--ember); background: var(--ink-2); }
.ms.is-current .ms-v span, .ms.is-next .ms-v span { color: var(--ember-ink); }
.ms.is-current li::before { background: var(--ember); }
.ms.is-planned { border-style: dashed; }
.nongoals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 2rem; }
.nongoals li { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
#roadmap .else { margin-top: 1.5rem; }

/* get started */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; min-width: 0; }
.step h3 { font: 600 0.875rem/1.4 var(--mono); color: var(--fg-2); }
.step p { font-size: 0.9375rem; color: var(--fg-2); }
.step p a { color: var(--fg); }
.code-copy { position: relative; }
.code-copy pre.code { padding-right: 4.5rem; }
.code-copy .copy { position: absolute; top: 0.6rem; right: 0.6rem; }
pre.code.sm { font-size: 0.78rem; padding: 0.8rem 1rem; }
.examples-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.examples-head h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.examples-head p { font-size: 0.9375rem; color: var(--fg-3); }
.examples-head a { color: var(--fg-2); font-family: var(--mono); font-size: 0.875rem; }
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ex { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.6rem; align-content: start; min-width: 0; }
.ex h3 { font: 600 0.9375rem/1.3 var(--mono); }
.ex h3 a { text-decoration: none; }
.ex h3 a:hover { color: var(--ember-ink); }
.ex p { font-size: 0.9063rem; line-height: 1.55; color: var(--fg-2); }

/* docs & community */
.res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.res { display: grid; gap: 0.35rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); text-decoration: none; transition: border-color 0.15s; }
.res:hover { border-color: var(--ember); }
.res b { font-weight: 650; font-size: 1rem; }
.res b::after { content: " →"; color: var(--fg-3); }
.res:hover b::after { color: var(--ember-ink); }
.res span { font-size: 0.875rem; line-height: 1.5; color: var(--fg-3); }
.author { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; border-top: 1px solid var(--line); padding-top: 1.75rem; }
.author p { font-size: 1.0625rem; color: var(--fg-2); }
.author p a { color: var(--fg); }
.author .start-cta { margin-top: 0; }

/* faq */
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 5vw, 4.5rem); align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.95rem; font: 500 1.1rem/1 var(--mono); color: var(--fg-3); }
.qa[open] summary::after { content: "−"; color: var(--ember-ink); }
.qa p { padding-bottom: 1.1rem; font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.qa p a { color: var(--fg); }

/* footer columns */
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 2rem; }
.foot-brand { display: grid; gap: 0.75rem; align-content: start; }
.foot-brand p { max-width: 26rem; line-height: 1.55; }
.foot-brand a:not(.brand) { color: var(--fg-2); }
.foot-col { display: grid; gap: 0.5rem; align-content: start; }
.foot-col h2 { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 0.25rem; }
.foot-col a { color: var(--fg-2); text-decoration: none; }
.foot-col a:hover { color: var(--fg); }
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* 404 */
.lost { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }

/* ---------- narrower screens ---------- */
@media (max-width: 960px) {
  .hero-grid, .legend-in, .sec-head, .start, .caveats, .else, .code-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-head { align-items: start; }
  .pillars, .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crates { grid-template-columns: minmax(0, 1fr); }
  .tabs { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .tab { border-left: 0; border-bottom: 2px solid var(--line); padding: 0.6rem 0.75rem 0.7rem 0; }
  .tab[aria-selected="true"] { border-bottom-color: var(--ember); }
  .tab span { display: none; }
  .tick { justify-items: start; }
  .milestones, .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .charts, .proof, .decisions, .caveats ul { grid-template-columns: minmax(0, 1fr); }
  .examples, .faq, .nongoals { grid-template-columns: minmax(0, 1fr); }
  .loop { grid-template-columns: minmax(0, 1fr); }
  .loop-back { writing-mode: horizontal-tb; padding: 0.25rem 0; }
  .workers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pillars, .limits { grid-template-columns: minmax(0, 1fr); }
  .bar { grid-template-columns: 7.25rem minmax(0, 1fr) 3.9rem; gap: 0.6rem; font-size: 0.8125rem; }
  .decisions div, .reqs div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .idle { gap: 1rem; }
  .nav-side .btn span { display: none; }
  .milestones, .res-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tick { justify-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}