/* HareBox public website. Hand-edited. Colours come from tokens.css, which tools/build_website.py generates from
   brand/tokens.json: --bg, --text, --accent… follow the theme, --brand-* are the logo's colours, and --night-* are
   for surfaces that stay dark in both themes (heroes, code, the calculator's result, the drawings).
   No inline styles anywhere: the content security policy allows only this file, tokens.css and docs.css.

   Contents
     1  Fonts and site tokens          8  Sections: stats, bento, lifecycle, use cases
     2  Base                           9  Steps, tabs and code
     3  Layout                        10  Features, legends, tables and tallies
     4  Banner, header and menu       11  Calculator, status, callouts, cards, band, FAQ
     5  Buttons, pills and icons      12  Footer and 404
     6  Home hero                     13  Drawings (website_art.py)
     7  Page heroes                   14  Motion, reveal, preferences and print            */

/* ── 1 Fonts and site tokens ─────────────────────────────────────────────── */
@font-face { font-family: "Inter"; src: url(../fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../fonts/jetbrains.woff2) format("woff2"); font-weight: 100 800; font-display: swap; }
/* Local fallbacks sized to Inter's metrics, so the swap to the web font barely moves the page. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 107%; ascent-override: 90%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", "Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Surfaces */
  --tint: color-mix(in srgb, var(--accent) 9%, var(--bg));
  --line: color-mix(in srgb, var(--border) 80%, transparent);
  --line-strong: var(--border);
  /* Type scale: fluid between 360 px and 1280 px wide */
  --step--1: clamp(.82rem, .8rem + .1vw, .875rem);
  --step-0: 1rem;
  --step-1: clamp(1.06rem, 1rem + .3vw, 1.22rem);
  --step-2: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  --step-3: clamp(1.7rem, 1.3rem + 1.7vw, 2.55rem);
  --step-4: clamp(2.15rem, 1.5rem + 2.9vw, 3.35rem);
  --step-5: clamp(2.45rem, 1.5rem + 4.3vw, 4.4rem);
  /* Space, on a 4 px grid */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --section: clamp(64px, 9vw, 120px);
  /* Shape and depth */
  --r-sm: 10px; --radius: 14px; --radius-lg: 22px; --r-pill: 999px;
  --wrap: 1200px; --gutter: clamp(16px, 4vw, 32px); --header-h: 66px;
  --shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 24px -12px rgb(4 22 28 / .18);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .04), 0 24px 60px -24px rgb(4 22 28 / .35);
  /* Motion: 120 ms for feedback, 200 ms for panels (design spec 08). Decorative motion is slower and optional. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-feedback: 120ms; --dur-panel: 200ms;
}
:root[data-theme="dark"] { --shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 30px -14px rgb(0 0 0 / .6); --shadow-lg: 0 1px 0 rgb(255 255 255 / .04) inset, 0 30px 60px -24px rgb(0 0 0 / .75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 10px 30px -14px rgb(0 0 0 / .6); --shadow-lg: 0 1px 0 rgb(255 255 255 / .04) inset, 0 30px 60px -24px rgb(0 0 0 / .75); }
}

/* ── 2 Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--step-0)/1.65 var(--sans); font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-feedback), text-decoration-thickness var(--dur-feedback); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-5); font-weight: 780; letter-spacing: -0.042em; }
h2 { font-size: var(--step-3); font-weight: 740; letter-spacing: -0.032em; }
h3 { font-size: 1.12rem; font-weight: 680; letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
code, kbd, pre { font-family: var(--mono); font-size: .92em; }
:not(pre) > code { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: .08em .38em; overflow-wrap: anywhere; }
kbd { display: inline-block; min-width: 1.6em; padding: .05em .4em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--raised); font-size: .78em; text-align: center; line-height: 1.5; }
table, .stats dd, .tally b, .cost-big, .calc-total, .calc-lines dd { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); } .small { font-size: .875rem; } .strong { font-weight: 650; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--r-sm); font-weight: 650; }
.skip:focus { top: 12px; }

/* ── 3 Layout ────────────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.block { padding: var(--section) 0; }
.block-tight { padding: clamp(40px, 6vw, 72px) 0; }
.block.alt { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .kicker { display: inline-flex; align-items: center; gap: 8px; font: 680 .78rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.section-head .kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--brand-ear-pink)); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.075rem; }
.section-head .uc-icon { margin-bottom: 16px; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .cols2, .cols3 { grid-template-columns: 1fr; } }
/* Scroll containers are positioned (above and below), so a visually hidden child can't escape the scroll and widen the page.
   Grid items default to their content's minimum width, so a long code line would widen the page.
   Let every grid column shrink, and let code scroll inside its own box instead. */
.hero-grid > *, .cols2 > *, .cols3 > *, .uc-layout > *, .bento > *, .steps > li, .tab-panel, .diagrams > *, .faq-wrap > * { min-width: 0; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 1.55rem; margin-top: 52px; }
.prose h2:first-child { margin-top: 0; }
.prose ul:not([class]) { padding-left: 1.2em; } .prose ul:not([class]) > li + li { margin-top: 6px; }
.prose ul:not([class]) > li::marker { color: var(--accent); }
.more { margin-top: 28px; }

/* ── 4 Banner, header and menu ───────────────────────────────────────────── */
.prerelease { background: var(--night-bg); color: var(--night-muted); font-size: .8125rem; line-height: 1.45; border-bottom: 1px solid rgb(39 250 253 / .12); }
.prerelease .wrap { display: flex; gap: 10px; align-items: baseline; padding-block: 8px; }
.prerelease p { margin: 0; }
.prerelease a { color: var(--night-text); text-decoration-color: rgb(165 216 226 / .5); font-weight: 600; }
.dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-ear-pink); box-shadow: 0 0 0 3px rgb(254 147 143 / .2); transform: translateY(-1px); }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color var(--dur-panel), box-shadow var(--dur-panel), background var(--dur-panel); view-transition-name: site-header; }
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -18px rgb(4 22 28 / .35); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.nav { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.logo { display: inline-flex; flex: none; border-radius: 8px; }
.logo img { height: 34px; width: auto; }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: inline; } }
.navlinks { display: flex; gap: 2px; margin-left: 8px; }
.navlinks a { position: relative; color: var(--muted); text-decoration: none; font-weight: 560; font-size: .9375rem; padding: 8px 12px; border-radius: var(--r-sm); transition: color var(--dur-feedback), background var(--dur-feedback); }
.navlinks a:hover { color: var(--text); background: var(--surface); }
.navlinks a[aria-current] { color: var(--text); }
.navlinks a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--brand-ear-pink)); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-dash { color: var(--muted); text-decoration: none; font-weight: 560; font-size: .9375rem; padding: 8px 10px; border-radius: var(--r-sm); }
.nav-dash:hover { color: var(--text); background: var(--surface); }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; transition: color var(--dur-feedback), border-color var(--dur-feedback), transform var(--dur-panel) var(--ease); }
.theme-toggle:hover { color: var(--text); border-color: var(--control); }
.theme-toggle:active { transform: rotate(-20deg) scale(.94); }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .moon { display: inline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .moon { display: inline; } }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--dur-panel) var(--ease), opacity var(--dur-panel); }
.menu[open] summary span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[open] summary span:nth-child(2) { opacity: 0; }
.menu[open] summary span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(300px, calc(100vw - 32px)); background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: grid;
  transform-origin: top right; transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out); }
@starting-style { .menu[open] .menu-panel { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu-panel a { padding: 11px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 560; }
.menu-panel a:hover, .menu-panel a[aria-current] { background: var(--surface); }
@media (max-width: 1060px) { .nav-dash { display: none; } }
@media (max-width: 960px) { .navlinks { display: none; } .menu { display: block; } }
@media (max-width: 420px) { .nav-actions .btn-sm { display: none; } }

/* ── 5 Buttons, pills and icons ──────────────────────────────────────────── */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 12px; font: 640 .97rem/1 var(--sans);
  text-decoration: none; color: var(--text); background: var(--raised); border: 1px solid var(--control); cursor: pointer;
  transition: transform var(--dur-panel) var(--ease), box-shadow var(--dur-panel), background var(--dur-panel), border-color var(--dur-panel); }
.btn:hover { transform: translateY(-1px); text-decoration: none; box-shadow: var(--shadow); }
.btn:active { transform: translateY(0) scale(.98); }
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur-panel) var(--ease); }
.btn:hover .icon { transform: translateX(2px); }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .875rem; border-radius: var(--r-sm); }
.btn-quiet { border-color: var(--line); background: transparent; }
.btn-glow { background: linear-gradient(180deg, var(--brand-cyan-300), var(--brand-cyan-400)); color: var(--night-bg); border: 0;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .25) inset, 0 10px 34px -8px rgb(39 250 253 / .6); }
.btn-glow:hover { box-shadow: 0 0 0 1px rgb(255 255 255 / .35) inset, 0 14px 40px -6px rgb(39 250 253 / .75); }
/* A sheen that crosses the glowing buttons on hover. */
.btn-glow::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); }
.btn-glow:hover::after { transform: translateX(120%); transition: transform .7s var(--ease); }
.btn-ghost-dark { background: rgb(255 255 255 / .04); color: var(--night-text); border: 1px solid rgb(165 216 226 / .28); }
.btn-ghost-dark:hover { background: rgb(255 255 255 / .08); border-color: rgb(165 216 226 / .5); }
.icon { width: 22px; height: 22px; flex: none; } .icon-sm { width: 16px; height: 16px; }

.pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: 620 .72rem/1 var(--sans); letter-spacing: .01em; padding: 5px 9px 5px 8px; border-radius: var(--r-pill); border: 1px solid; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-working { color: color-mix(in srgb, var(--ok) 82%, var(--text)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.pill-local-vm { color: color-mix(in srgb, var(--accent) 82%, var(--text)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.pill-simulated { color: color-mix(in srgb, var(--warn) 82%, var(--text)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.pill-planned { color: var(--muted); border-color: var(--line); background: var(--surface); }
.pill-working::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.dot-working { background: var(--ok); box-shadow: none; } .dot-local-vm { background: var(--accent); box-shadow: none; }
.dot-simulated { background: var(--warn); box-shadow: none; } .dot-planned { background: var(--muted); box-shadow: none; }

/* ── 6 Home hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--night-bg); color: var(--night-text); padding: clamp(56px, 9vw, 116px) 0 clamp(64px, 9vw, 124px); }
.hero a:not(.btn) { color: var(--brand-cyan-400); }
.hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora { position: absolute; border-radius: 50%; will-change: transform; }
.aurora-1 { width: 70vmax; height: 52vmax; left: 38%; top: -26%; background: radial-gradient(closest-side, rgb(34 211 238 / .30), rgb(34 211 238 / .08) 55%, transparent); animation: drift-a 26s var(--ease) infinite alternate; }
.aurora-2 { width: 46vmax; height: 40vmax; left: -14%; top: -30%; background: radial-gradient(closest-side, rgb(254 147 143 / .16), transparent); animation: drift-b 32s var(--ease) infinite alternate; }
.aurora-3 { width: 80vmax; height: 46vmax; left: 4%; bottom: -36%; background: radial-gradient(closest-side, rgb(1 131 154 / .45), transparent); animation: drift-c 30s var(--ease) infinite alternate; }
.stars { position: absolute; inset: 0; background: url(../img/stars.svg) 0 0 / 480px repeat; opacity: .55;
  mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 30%, transparent 85%); }
.stars-far { background-size: 300px; background-position: 140px 90px; opacity: .3; animation: twinkle 7s ease-in-out infinite alternate; }
.floor { position: absolute; left: -40%; right: -40%; bottom: -2%; height: 46%; overflow: hidden; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 78%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%); }
.floor::before { content: ""; position: absolute; inset: -48px 0 0; background-image: linear-gradient(rgb(39 250 253 / .22) 1px, transparent 1px), linear-gradient(90deg, rgb(39 250 253 / .16) 1px, transparent 1px);
  background-size: 48px 48px; animation: floor 5s linear infinite; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 .8125rem/1.2 var(--sans); letter-spacing: .02em; color: var(--night-muted); padding: 7px 12px 7px 8px; border-radius: var(--r-pill);
  border: 1px solid rgb(165 216 226 / .22); background: rgb(255 255 255 / .04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.eyebrow b { color: var(--night-bg); background: var(--brand-cyan-400); padding: 4px 8px; border-radius: var(--r-pill); font-weight: 720; font-size: .72rem; }
.hero h1 { margin-top: 22px; }
.hero h1 .glow { background: linear-gradient(92deg, var(--night-text) 0%, var(--brand-cyan-300) 34%, var(--brand-glow) 58%, var(--brand-ear-pink) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 9s ease-in-out infinite alternate; }
.hero .lede { margin-top: 22px; font-size: var(--step-1); color: var(--night-muted); max-width: 37em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: .875rem; color: var(--night-muted); }
.hero-note b { color: var(--night-text); font-weight: 650; }
.hero-art { position: relative; display: grid; justify-items: center; align-content: center; min-height: 460px; }
.halo { position: absolute; top: 4%; width: 74%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(39 250 253 / .34), rgb(34 211 238 / .08) 46%, transparent 70%); animation: breathe 6s ease-in-out infinite; }
.art-orbit { position: absolute; top: -6%; width: min(470px, 104%); aspect-ratio: 1; }
.bunny { position: relative; width: min(300px, 64vw); animation: float 7s ease-in-out infinite; filter: drop-shadow(0 26px 40px rgb(0 0 0 / .45)) drop-shadow(0 0 36px rgb(39 250 253 / .18)); }
.term { position: relative; margin-top: -44px; width: min(100%, 480px); background: rgb(3 15 19 / .86); border: 1px solid rgb(165 216 226 / .2); border-radius: 16px;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .9), 0 0 0 1px rgb(39 250 253 / .05) inset, 0 0 60px -20px rgb(39 250 253 / .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
.term-bar { display: flex; gap: 7px; align-items: center; padding: 11px 14px; border-bottom: 1px solid rgb(165 216 226 / .12); background: rgb(255 255 255 / .02); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(165 216 226 / .25); }
.term-bar i:first-child { background: var(--brand-ear-pink); }
.term-bar span { margin-left: 8px; font: 500 .75rem var(--mono); color: var(--night-muted); }
.term pre { margin: 0; padding: 14px 16px 16px; font-size: .8rem; line-height: 1.75; color: var(--night-code-text); white-space: pre-wrap; word-break: break-word; }
/* Each line types in: commands character by character, results at once. clip-path, not opacity, so the text is
   at full contrast whenever it shows, and the box keeps its final height from the start. */
.term .l { display: block; clip-path: inset(0 100% 0 0); animation: type .75s steps(30, end) both; }
.term .l:not(.c) { animation-timing-function: steps(1, end); animation-duration: .1s; }
.term .c::before { content: "$ "; color: var(--brand-cyan-400); }
.term .ok { color: var(--night-ok); } .term .z { color: var(--night-warn); } .term .d { color: var(--night-muted); }
.term .l:nth-child(1) { animation-delay: .4s } .term .l:nth-child(2) { animation-delay: 1.3s } .term .l:nth-child(3) { animation-delay: 1.7s }
.term .l:nth-child(4) { animation-delay: 2.65s } .term .l:nth-child(5) { animation-delay: 3.5s } .term .l:nth-child(6) { animation-delay: 4.1s }
.term .l:nth-child(7) { animation-delay: 4.7s } .term .l:nth-child(8) { animation-delay: 5.6s } .term .l:nth-child(9) { animation-delay: 6s }
.term .l:nth-child(10) { animation-delay: 6.95s }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 4px; vertical-align: -.15em; background: var(--brand-glow); animation: blink 1.1s steps(1, end) infinite; }
.term-label { margin-top: 12px; text-align: center; font-size: .75rem; color: var(--night-muted); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-art { min-height: 0; margin-top: 12px; } .art-orbit { top: -10%; } }

/* ── 7 Page heroes ───────────────────────────────────────────────────────── */
.page-hero { position: relative; overflow: hidden; background: var(--night-bg); color: var(--night-text); padding: clamp(52px, 8vw, 100px) 0 clamp(44px, 7vw, 84px); isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 70% at 85% 10%, rgb(34 211 238 / .24), transparent 70%), radial-gradient(30% 50% at 0% 100%, rgb(254 147 143 / .12), transparent 70%), url(../img/stars.svg) 0 0 / 420px repeat;
  mask-image: linear-gradient(to bottom, #000 60%, rgb(0 0 0 / .5)); -webkit-mask-image: linear-gradient(to bottom, #000 60%, rgb(0 0 0 / .5)); }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(39 250 253 / .45), rgb(254 147 143 / .35), transparent); }
.page-hero h1 { font-size: var(--step-4); max-width: 18em; }
.page-hero .lede { margin-top: 18px; color: var(--night-muted); font-size: var(--step-1); max-width: 44em; }
.page-hero a { color: var(--brand-cyan-400); }
.page-hero .audience { margin-top: 18px; font-size: .9375rem; color: var(--night-muted); }
.page-hero .audience b { color: var(--night-text); margin-right: 6px; }
.status-now { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px; color: var(--night-muted); font-size: .9375rem; }
.page-hero .pill-planned { color: var(--night-text); background: rgb(255 255 255 / .06); border-color: rgb(165 216 226 / .3); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .875rem; color: var(--night-muted); margin-bottom: 26px; }
.crumbs a { color: var(--night-muted); }

/* ── 8 Sections: stats, bento, lifecycle, use cases ──────────────────────── */
.stats-band { border-bottom: 1px solid var(--line); background: var(--surface); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; }
.stats div { padding: 24px 18px; border-left: 1px solid var(--line); }
.stats div:first-child { border-left: 0; }
.stats dt { font-size: .8125rem; color: var(--muted); }
.stats dd { margin: 4px 0 0; font: 760 1.6rem/1.15 var(--sans); letter-spacing: -0.03em; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats div { border-left: 0; border-top: 1px solid var(--line); } .stats div:nth-child(-n+2) { border-top: 0; } .stats div:nth-child(odd) { border-right: 1px solid var(--line); }
  /* An odd last figure takes the whole row rather than leaving an empty cell beside it. */
  .stats div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; } }

.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(var(--raised), var(--raised)) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--accent) 30%, var(--line)), var(--line) 40%, var(--line)) border-box;
  border: 1px solid transparent; box-shadow: var(--shadow); transition: transform var(--dur-panel) var(--ease), box-shadow var(--dur-panel); }
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.tile.wide { grid-column: span 3; } .tile.xl { grid-column: span 4; }
.tile.xl { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 24px; }
.tile.xl .tile-body { display: flex; flex-direction: column; gap: 12px; }
.tile h3 { font-size: 1.2rem; }
.tile p { color: var(--muted); }
.tile .pill { align-self: flex-start; margin-top: auto; }
.tile-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.tile-media { margin: -8px -8px 4px; border-radius: 16px; background: radial-gradient(120% 90% at 50% 0%, rgb(34 211 238 / .14), transparent 60%), var(--night-bg); border: 1px solid rgb(39 250 253 / .12); padding: 10px; }
.tile.xl .tile-media { margin: -8px 0 -8px -8px; height: calc(100% + 16px); display: grid; place-items: center; }
.tile-media .art { width: 100%; }
.tile.feature { background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--raised)), var(--raised) 55%) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--accent) 45%, var(--line)), var(--line) 50%) border-box; }
@media (max-width: 960px) { .tile, .tile.wide { grid-column: span 3; } .tile.xl { grid-column: span 6; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile, .tile.wide, .tile.xl { grid-column: auto; } .tile.xl { grid-template-columns: 1fr; } .tile.xl .tile-media { margin: -8px -8px 4px; height: auto; } }
/* A soft light that follows the pointer (site.js sets --mx and --my). */
.spot { --mx: 50%; --my: -200px; }
.spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-panel);
  background: radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%); }
.spot:hover::after { opacity: 1; }

.lifecycle-figure { margin: 0; border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 32px); background: radial-gradient(90% 120% at 50% 0%, rgb(34 211 238 / .12), transparent 60%), var(--night-bg); color: var(--night-text);
  border: 1px solid rgb(39 250 253 / .14); box-shadow: var(--shadow-lg); }
.lifecycle-figure figcaption { margin-top: 18px; font-size: .9rem; }
.lifecycle-figure figcaption a { color: var(--brand-cyan-400); }
.lifecycle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 22px 0 0; padding: 0; }
.lifecycle li { list-style: none; position: relative; padding: 14px 12px 0 0; }
.lifecycle li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: rgb(165 216 226 / .2); margin-bottom: 12px; }
.lifecycle li.billed::before { background: linear-gradient(90deg, var(--brand-cyan-400), color-mix(in srgb, var(--brand-cyan-400) 60%, var(--brand-ear-pink))); }
.lifecycle b { display: block; font: 650 .9rem var(--mono); color: var(--night-text); }
.lifecycle span { display: block; font-size: .8125rem; color: var(--night-muted); margin-top: 2px; }
@media (max-width: 640px) { .lifecycle { grid-template-columns: 1fr 1fr; row-gap: 8px; } .lifecycle-figure .art-lifecycle { display: none; } .lifecycle { margin-top: 0; } }

.uc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.uc-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.uc-card a { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-lg); color: var(--text); text-decoration: none; box-shadow: var(--shadow);
  background: linear-gradient(var(--raised), var(--raised)) padding-box, linear-gradient(160deg, var(--line), var(--line)) border-box; border: 1px solid transparent;
  transition: transform var(--dur-panel) var(--ease), box-shadow var(--dur-panel); }
.uc-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: linear-gradient(var(--raised), var(--raised)) padding-box, linear-gradient(160deg, color-mix(in srgb, var(--accent) 55%, var(--line)), var(--line) 60%) border-box; }
.uc-card p { color: var(--muted); font-size: .9375rem; flex: 1; }
.uc-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.uc-icon-lg { width: 58px; height: 58px; border-radius: 16px; color: var(--brand-cyan-400); background: rgb(34 211 238 / .1); border-color: rgb(34 211 238 / .3); margin-bottom: 20px; box-shadow: 0 0 40px -10px rgb(39 250 253 / .5); }
.uc-icon-lg .icon { width: 28px; height: 28px; }
.uc-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 640; font-size: .9rem; color: var(--accent); }
.uc-more .icon { transition: transform var(--dur-panel) var(--ease); }
.uc-card a:hover .uc-more .icon { transform: translateX(3px); }

/* Use-case pages */
.uc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.uc-aside { display: grid; gap: 16px; }
.uc-aside .card:first-child { position: sticky; top: calc(var(--header-h) + 20px); }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; list-style: none; padding: 0; }
.why li { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-top: 2px solid color-mix(in srgb, var(--accent) 60%, var(--line)); }
.why b { display: block; margin-bottom: 4px; }
@media (max-width: 960px) { .uc-layout { grid-template-columns: 1fr; } .uc-aside .card:first-child { position: static; } }

/* ── 9 Steps, tabs and code ──────────────────────────────────────────────── */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 26px; }
.steps > li { position: relative; padding-left: 54px; counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 720 .95rem var(--sans);
  color: var(--accent); background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.steps > li::after { content: ""; position: absolute; left: 16px; top: 40px; bottom: -22px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), var(--line)); opacity: .5; transform-origin: top; }
.steps > li:last-child::after { display: none; }
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--muted); }
.steps .tabs, .steps pre { margin-top: 12px; }
.prose .steps { margin-top: 26px; }

pre.code { position: relative; margin: 0; background: var(--night-code-bg); color: var(--night-code-text); border: 1px solid var(--night-line); border-radius: var(--radius);
  padding: 16px 76px 16px 18px; overflow-x: auto; font-size: .82rem; line-height: 1.7; tab-size: 2; box-shadow: 0 1px 0 rgb(255 255 255 / .03) inset; scrollbar-width: thin; scrollbar-color: var(--night-line) transparent; }
pre.code code { font-size: inherit; }
pre.code .cm { color: var(--night-code-comment); font-style: italic; } pre.code .s { color: var(--night-code-string); } pre.code .k { color: var(--night-code-keyword); }
pre.code .nu { color: var(--night-code-number); } pre.code .fl { color: var(--night-code-flag); } pre.code .v { color: var(--night-code-var); }
pre.code .fn { color: var(--night-code-fn); } pre.code .p { color: var(--night-muted); }
.copy { position: absolute; top: 8px; right: 8px; font: 600 .72rem var(--sans); color: var(--night-muted); background: rgb(255 255 255 / .06); border: 1px solid rgb(165 216 226 / .22); border-radius: 8px; padding: 6px 9px; cursor: pointer; opacity: .85;
  transition: opacity var(--dur-feedback), color var(--dur-feedback), background var(--dur-feedback); }
.copy:hover, .copy:focus-visible { opacity: 1; color: var(--night-text); background: rgb(255 255 255 / .1); }
.code-figure { margin: 0; }
.code-figure figcaption { margin-top: 10px; font-size: .84rem; color: var(--muted); }
.tabs { border-radius: var(--radius); }
.tablist { position: relative; display: flex; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tablist button { position: relative; z-index: 1; font: 600 .8125rem var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: color var(--dur-feedback); }
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { color: var(--text); }
.tab-ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0)); border-radius: 9px; background: var(--raised); box-shadow: var(--shadow);
  transition: transform var(--dur-panel) var(--ease), width var(--dur-panel) var(--ease); }
.tab-panel > .tab-label { display: inline-block; font: 650 .72rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 10px 0 8px; padding: 5px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); }
.tabs.js .tab-label { display: none; }
.tabs.js .tab-panel[hidden] { display: none; }

/* ── 10 Features, legends, tables and tallies ────────────────────────────── */
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.feat-list li { padding: 18px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); transition: border-color var(--dur-panel); }
.feat-list li:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.feat-list li[hidden] { display: none; }
.feat-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.feat-top b { font-weight: 660; line-height: 1.35; }
.feat-list p { color: var(--muted); font-size: .9375rem; }
.feat-groups > section[hidden] { display: none; }
.feat-groups > section:nth-child(even) { background: var(--surface); border-block: 1px solid var(--line); }
.feat-groups .section-head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
.feat-groups .section-head .uc-icon { margin: 0; grid-row: span 2; }
.feat-groups .section-head p { margin-top: 4px; }
.uc-aside .feat-list { grid-template-columns: 1fr; gap: 0; }
.uc-aside .feat-list li { padding: 12px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.uc-aside .feat-list li:first-child { border-top: 0; padding-top: 0; }
.uc-aside .feat-list p { font-size: .84rem; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.legend div { display: flex; gap: 10px; align-items: center; }
.legend dd { margin: 0; font-size: .84rem; color: var(--muted); max-width: 32ch; }

/* Features page: sticky group links and the status filter */
.feature-nav { position: sticky; top: var(--header-h); z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-block: 1px solid var(--line); }
.fn-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 10px; }
.fn-groups { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.fn-groups::-webkit-scrollbar { display: none; }
.fn-groups a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 7px 10px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 580; font-size: .875rem; transition: color var(--dur-feedback), background var(--dur-feedback); }
.fn-groups a:hover { color: var(--text); background: var(--surface); }
.fn-groups a .icon { color: var(--accent); }
.fn-groups a.empty { opacity: .45; }
.fn-count { font: 600 .72rem/1 var(--sans); padding: 3px 6px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.fn-filter { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.fn-filter button { display: inline-flex; align-items: center; gap: 6px; font: 600 .78rem var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 9px; padding: 6px 10px; cursor: pointer; transition: color var(--dur-feedback), background var(--dur-feedback); }
.fn-filter button:hover { color: var(--text); }
.fn-filter button[aria-pressed="true"] { color: var(--text); background: var(--raised); box-shadow: var(--shadow); }
.fn-filter .fn-n { color: var(--muted); font-weight: 500; }
html:not(.js) .fn-filter { display: none; }
@media (max-width: 760px) { .fn-filter { width: 100%; } .feature-nav { position: static; } }

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow); scrollbar-width: thin; }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table thead th { font-size: .78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; background: var(--surface); white-space: nowrap; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody th { font-weight: 640; }
.table tbody tr { transition: background var(--dur-feedback); }
.table tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.table .n { text-align: right; white-space: nowrap; }
.table .mid { text-align: center; }
.table tr.on { background: var(--tint); }
.table tr.on > th:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.table-wrap + p, .table-wrap + .small { margin-top: 12px; }
.tally { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.tally-3 { grid-template-columns: repeat(4, 1fr); }
.tally div { position: relative; padding: 16px 16px 16px 18px; border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); overflow: hidden; }
.tally div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.tally b { display: block; font: 760 1.8rem/1 var(--sans); letter-spacing: -0.03em; }
.tally span { font-size: .84rem; color: var(--muted); }
/* The status colours match the pills: works locally, real VMs locally, simulated, in development. */
.tally .tally-working::before { background: var(--ok); }
.tally .tally-local-vm::before { background: var(--accent); }
.tally .tally-simulated::before { background: var(--warn); }
.tally .tally-planned::before { background: var(--muted); }
.tally .tally-all::before { background: linear-gradient(var(--accent), var(--brand-ear-pink)); }
@media (max-width: 760px) { .tally, .tally-3 { grid-template-columns: repeat(2, 1fr); } }
.status-bar { width: 100%; height: 12px; margin: 0 0 28px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.status-bar .seg-working { fill: var(--ok); }
.status-bar .seg-local-vm { fill: var(--accent); }
.status-bar .seg-simulated { fill: var(--warn); }
.status-bar .seg-planned { fill: color-mix(in srgb, var(--muted) 55%, var(--surface)); }

/* ── 11 Calculator, status, callouts, cards, band, FAQ ───────────────────── */
.calc { display: grid; grid-template-columns: 1.05fr .95fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--raised); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.calc-inputs { padding: clamp(20px, 3vw, 30px); display: grid; gap: 20px; align-content: center; }
.calc label { display: grid; gap: 8px; font-weight: 600; font-size: .9rem; }
.calc select, .calc input[type="number"] { font: 500 1rem var(--sans); color: var(--text); background: var(--bg); border: 1px solid var(--control); border-radius: var(--r-sm); padding: 11px 12px; min-height: 46px; width: 100%;
  transition: border-color var(--dur-feedback), box-shadow var(--dur-feedback); }
.calc select:focus-visible, .calc input[type="number"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.range-row { display: flex; align-items: center; gap: 14px; }
.calc input[type="range"] { --fill: 12%; flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--accent); background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.calc input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--fill), color-mix(in srgb, var(--control) 45%, transparent) var(--fill)); }
.calc input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--control) 45%, transparent); }
.calc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--raised); border: 2px solid var(--accent); box-shadow: var(--shadow); }
.calc input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--raised); border: 2px solid var(--accent); }
.calc input[type="range"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.calc output { min-width: 4.5ch; text-align: right; font: 600 .9rem var(--mono); color: var(--muted); }
.calc-result { position: relative; isolation: isolate; padding: clamp(22px, 3vw, 32px); background: var(--night-bg); color: var(--night-text); display: flex; flex-direction: column; justify-content: center; gap: 16px; overflow: hidden; }
.calc-result::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, rgb(34 211 238 / .25), transparent 70%), radial-gradient(50% 50% at 0% 100%, rgb(254 147 143 / .12), transparent 70%); }
.calc-k { display: block; font-size: .84rem; color: var(--night-muted); font-weight: 600; letter-spacing: .02em; }
.calc-total [data-out="total"] { display: block; margin-top: 4px; font: 780 clamp(2.2rem, 5vw, 3.1rem)/1 var(--sans); letter-spacing: -0.04em; color: var(--night-text); }
.calc-total small { display: block; margin-top: 6px; color: var(--night-muted); font-size: .9rem; }
.calc-lines { margin: 0; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid rgb(165 216 226 / .16); }
.calc-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; }
.calc-lines dt { color: var(--night-muted); }
.calc-lines dd { margin: 0; font-weight: 650; color: var(--night-text); text-align: right; white-space: nowrap; }
.calc-note { color: var(--night-muted); font-size: .84rem; }
@media (max-width: 760px) { .calc { grid-template-columns: 1fr; } }

.status-panel { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.status-panel picture img { width: 100%; max-width: 220px; filter: drop-shadow(0 18px 30px rgb(4 22 28 / .25)); }
.status-rows { display: grid; gap: 12px; margin-top: 18px; }
.status-rows p { display: flex; gap: 12px; align-items: baseline; }
.status-rows .pill { flex: none; min-width: 136px; }
@media (max-width: 760px) { .status-panel { grid-template-columns: 1fr; } .status-panel picture img { max-width: 140px; } .status-rows p { flex-direction: column; gap: 6px; } }

.callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.callout .icon { flex: none; color: var(--accent); margin-top: 2px; }
.callout p + p { margin-top: 6px; }
.callout-warn { background: color-mix(in srgb, var(--warn) 8%, var(--bg)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.callout-warn .icon { color: var(--warn); }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
/* The box and tick sit in the item's left padding, so the text, inline code included, flows as one line box
   (a flex row would split it at every <code>). The tick is a mask over the accent colour, so it matches either theme. */
.check-list li { position: relative; padding-left: 28px; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 6px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.check-list li::after { content: ""; position: absolute; left: 3px; top: 7px; width: 12px; height: 12px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }

.card { position: relative; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); }
.card h2, .card h3 { font-size: 1rem; margin-bottom: 10px; }
.card p + p { margin-top: 8px; }
.card-status { margin-bottom: 8px; }
.cols3 > .card { transition: transform var(--dur-panel) var(--ease), border-color var(--dur-panel); }
.cols3 > .card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.cost-big { font: 760 1.9rem/1.1 var(--sans); letter-spacing: -0.03em; }
.uc-aside .card:first-child { background: radial-gradient(90% 80% at 100% 0%, rgb(34 211 238 / .2), transparent 70%), var(--night-bg); color: var(--night-text); border-color: rgb(39 250 253 / .16); }
.uc-aside .card:first-child .muted { color: var(--night-muted); }
.uc-aside .card:first-child code { background: rgb(255 255 255 / .06); border-color: rgb(165 216 226 / .2); color: var(--night-text); }
.uc-aside .card:first-child a { color: var(--brand-cyan-400); }

.diagrams { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.diagram { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: radial-gradient(100% 80% at 50% 0%, rgb(34 211 238 / .12), transparent 60%), var(--night-bg); color: var(--night-text); border: 1px solid rgb(39 250 253 / .14); }
.diagram .art { width: 100%; align-self: center; }
.diagram figcaption { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 10px; align-items: center; font-size: .9rem; color: var(--night-muted); }
.diagram figcaption b { color: var(--night-text); }
.diagram figcaption > span:last-child { grid-column: 1 / -1; }
.diagram .pill-planned { color: var(--night-text); background: rgb(255 255 255 / .06); border-color: rgb(165 216 226 / .3); }
.diagram .pill-working { color: var(--night-ok); border-color: rgb(134 239 172 / .4); background: rgb(134 239 172 / .08); }
.diagram .pill-simulated { color: var(--night-warn); border-color: rgb(252 211 77 / .4); background: rgb(252 211 77 / .08); }
.diagram .pill-local-vm { color: var(--brand-cyan-300); border-color: rgb(103 232 249 / .4); background: rgb(103 232 249 / .08); }
@media (max-width: 860px) { .diagrams { grid-template-columns: 1fr; } }

.band { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--night-bg); color: var(--night-text); padding: clamp(36px, 6vw, 68px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  border: 1px solid rgb(39 250 253 / .14); }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 120% at 100% 0%, rgb(34 211 238 / .3), transparent 70%), radial-gradient(40% 80% at 0% 100%, rgb(254 147 143 / .14), transparent 70%); }
.band-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band-sky .stars { opacity: .4; }
.band p { color: var(--night-muted); margin-top: 10px; max-width: 40em; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

.faq-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.faq-wrap .section-head { position: sticky; top: calc(var(--header-h) + 24px); }
.faq { display: grid; gap: 10px; }
.faq-item { border-radius: var(--radius); background: var(--raised); border: 1px solid var(--line); transition: border-color var(--dur-panel), box-shadow var(--dur-panel); }
.faq-item[open] { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: var(--shadow); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; font-weight: 640; border-radius: var(--radius); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-panel) var(--ease); }
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-a { padding: 0 18px 18px; color: var(--muted); }
.faq-a p + p { margin-top: 8px; }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; } .faq-wrap .section-head { position: static; } }

/* ── 12 Footer and 404 ───────────────────────────────────────────────────── */
.site-footer { position: relative; border-top: 1px solid var(--line); padding: 64px 0 40px; margin-top: clamp(48px, 7vw, 96px); font-size: .9rem; background: linear-gradient(var(--bg), var(--surface)); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--brand-ear-pink) 50%, transparent), transparent); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-brand p { margin-top: 14px; color: var(--muted); max-width: 30em; }
.foot-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 6px 12px 6px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .84rem; font-weight: 560; background: var(--raised); }
.foot-status:hover { border-color: var(--accent); }
.site-footer h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 12px; font-weight: 650; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer nav a { color: var(--text); text-decoration: none; }
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.foot-note { color: var(--muted); font-size: .8125rem; max-width: 60em; }
.to-top { font-size: .8125rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

.notfound { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: 64px 0; }
.notfound img { margin: 0 auto 22px; width: 160px; animation: peek 6s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 16px 26px rgb(4 22 28 / .25)); }
.notfound h1 { font-size: var(--step-4); }
.notfound p { color: var(--muted); margin: 12px auto 24px; max-width: 34em; }
.notfound .cta { justify-content: center; }

/* ── 13 Drawings (tools/website_art.py) ──────────────────────────────────── */
/* Every drawing sits on a night surface, so one palette serves both themes. */
.art { overflow: visible; }
.art .a-frame, .lc-node rect { fill: rgb(255 255 255 / .03); stroke: rgb(165 216 226 / .34); stroke-width: 1.5; }
.art .a-line, .art .a-branch, .lc-edge { stroke: rgb(165 216 226 / .4); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.art .a-dot { fill: rgb(165 216 226 / .35); }
.art .a-bar { fill: rgb(165 216 226 / .2); }
.art .a-bar-on { fill: var(--brand-cyan-400); }
.art .a-chip, .art .a-cell { fill: color-mix(in srgb, var(--brand-cyan-400) 75%, transparent); }
.art .a-moon { fill: var(--night-warn); }
.art .a-z { stroke: var(--night-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.art .a-src { stroke: var(--brand-cyan-400); }
.art .a-copy-frame { stroke: rgb(254 147 143 / .55); }
.art .a-copy { fill: var(--brand-ear-pink); }
.art .a-ph { fill: rgb(255 255 255 / .06); stroke: rgb(165 216 226 / .4); stroke-dasharray: 3 3; }
.art .a-ph-dot { fill: var(--night-muted); }
.art .a-shield { fill: rgb(34 211 238 / .14); stroke: var(--brand-cyan-400); stroke-width: 1.6; }
.art .a-key { stroke: var(--brand-cyan-300); stroke-width: 1.8; stroke-linecap: round; fill: none; }
.art .a-key-ok { stroke: var(--night-ok); }
.art .a-ok { stroke: rgb(134 239 172 / .6); }
.art .a-blocked { stroke: rgb(254 147 143 / .5); }
.art .a-x { stroke: var(--brand-ear-pink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.art .a-boundary { stroke: rgb(165 216 226 / .45); stroke-width: 1.5; fill: rgb(255 255 255 / .015); }
.art .a-brick { fill: rgb(254 147 143 / .22); stroke: rgb(254 147 143 / .55); }
.art .a-rules { stroke: var(--brand-cyan-400); }
.art .a-prompt { stroke: var(--brand-cyan-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.art text { font: 500 13px var(--mono); fill: var(--night-muted); }
.art .a-label { font-size: 12px; fill: var(--night-text); }
.art .a-label-soft { fill: var(--night-muted); }
/* A pulse is one short dash travelling along its path: it starts just before the path and ends just past it. */
.art .a-pulse, .lc-pulse { fill: none; stroke: var(--brand-glow); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 200; stroke-dashoffset: 10; animation: travel 2.8s linear infinite; }
.art .a-pulse2 { animation-delay: .25s; } .art .a-pulse3 { animation-delay: .5s; }
.art .a-pulse-in { stroke: var(--night-muted); animation: travel-in 3.6s linear infinite; }
.art .a-pulse-ok { animation: travel-out 3.6s linear infinite; }
.art .a-pulse-bad { stroke: var(--brand-ear-pink); animation: travel-out 3.6s linear infinite; }
.art-firewall .a-pulse-ok, .art-firewall .a-pulse-bad { animation-name: travel; animation-duration: 3s; }
.art-firewall .a-pulse-bad { animation-delay: 1.4s; }
.art .a-copy { animation: copy 2.8s ease-out infinite; }
.art .a-copy2 { animation-delay: .25s; } .art .a-copy3 { animation-delay: .5s; }
.art .a-z { animation: snooze 3.6s ease-in-out infinite; }
.art .a-z2 { animation-delay: 1.2s; } .art .a-z3 { animation-delay: 2.4s; }
.art .a-moon { animation: glow 4s ease-in-out infinite; }
.art-lifecycle { width: 100%; }
.lc-node text { font: 600 15px var(--mono); fill: var(--night-text); }
.lc-on rect { stroke: var(--brand-cyan-400); fill: rgb(34 211 238 / .1); }
.lc-billed { fill: rgb(34 211 238 / .06); stroke: rgb(39 250 253 / .28); stroke-dasharray: 4 5; }
.lc-note { font-size: 12.5px; }
.art .lc-note-billed { fill: var(--brand-cyan-300); }
.lc-edge-soft { stroke-dasharray: 4 4; }
.art .lc-pulse { animation-duration: 6s; }
.art .lc-pulse-loop { stroke: var(--brand-ear-pink); animation-duration: 3s; }
.art-orbit .orbit-ring { stroke: rgb(165 216 226 / .22); stroke-width: 1.2; }
.art-orbit .orbit-ring-2 { stroke: rgb(39 250 253 / .1); }
.art-orbit .orbit-dot { fill: var(--brand-glow); opacity: .6; }
.orbit-spin, .orbit-spin-2 { transform-box: view-box; transform-origin: 50% 50%; animation: spin 90s linear infinite; }
.orbit-spin-2 { animation-duration: 140s; animation-direction: reverse; }
.orbit-item { transform-box: fill-box; transform-origin: center; animation: spin 90s linear infinite reverse; }
.cube .cube-t { fill: color-mix(in srgb, var(--cube) 55%, white); } .cube .cube-l { fill: var(--cube); } .cube .cube-r { fill: color-mix(in srgb, var(--cube) 65%, black); }
.cube path { stroke: rgb(255 255 255 / .25); stroke-width: .8; }
.cube-ready { --cube: var(--brand-cyan-400); filter: drop-shadow(0 0 6px rgb(39 250 253 / .6)); }
.cube-sleep { --cube: color-mix(in srgb, var(--night-muted) 55%, var(--night-bg)); }
.cube-fork { --cube: var(--brand-ear-pink); filter: drop-shadow(0 0 6px rgb(254 147 143 / .5)); }
.cube-twin { opacity: .75; }
.orbit-moon { fill: var(--night-warn); }
/* Off screen, drawings pause (site.js marks the visible ones). */
.art-managed .art:not(.is-on), .art-managed .art:not(.is-on) * { animation-play-state: paused; }

/* ── 14 Motion, reveal, preferences and print ────────────────────────────── */
@keyframes type { to { clip-path: inset(0 0 0 0); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift-a { to { transform: translate(-8%, 10%) scale(1.12); } }
@keyframes drift-b { to { transform: translate(14%, 8%) scale(.9); } }
@keyframes drift-c { to { transform: translate(10%, -6%) scale(1.08); } }
@keyframes twinkle { from { opacity: .18; } to { opacity: .42; } }
@keyframes floor { to { transform: translateY(48px); } }
@keyframes shimmer { to { background-position: 100% 0; } }
@keyframes travel { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -100; } }
@keyframes travel-in { 0% { stroke-dashoffset: 10; } 30%, 100% { stroke-dashoffset: -100; } }
@keyframes travel-out { 0%, 30% { stroke-dashoffset: 10; } 70%, 100% { stroke-dashoffset: -100; } }
@keyframes copy { 0%, 25% { opacity: .2; } 45%, 85% { opacity: 1; } 100% { opacity: .2; } }
@keyframes snooze { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -16px); } }
@keyframes glow { 50% { opacity: .7; } }
@keyframes peek { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(0); } }

/* Reveal on scroll (added by site.js; without JS everything is visible). It must finish within 0.8 s:
   tests/ui/ui.spec.ts adds .in and checks colours after 800 ms. */
.js-reveal .reveal.pending { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.js-reveal .reveal.pending.in { opacity: 1; transform: none; }

/* Cross-page transitions where the browser supports them: a short crossfade, with the header holding still. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-panel); }
  /* The use-case steps' connector draws itself as the steps scroll by. */
  @supports (animation-timeline: view()) {
    .steps > li::after { animation: grow linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
  }
}
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .term .l { clip-path: none; animation: none; }
  .caret, .aurora, .stars-far, .floor::before, .halo, .bunny, .hero h1 .glow, .notfound img { animation: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .art * { animation: none !important; }
  .art .a-pulse, .lc-pulse { display: none; }
  .art .a-copy, .art .a-z { opacity: 1; }
  .btn-glow::after { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header, .feature-nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .term { background: var(--night-code-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --line: var(--border); }
  .muted, .section-head p, .tile p, .uc-card p, .feat-list p, .legend dd { color: var(--text); }
  .table-wrap, .tile, .card, .faq-item, .feat-list li { border-color: var(--control); }
  .hero .lede, .page-hero .lede, .hero-note { color: var(--night-text); }
}
@media (forced-colors: active) {
  .pill, .btn, .tile, .card, .faq-item, .feat-list li, .uc-card a, .calc, .tablist button[aria-selected="true"] { border: 1px solid CanvasText; }
  .hero h1 .glow { color: CanvasText; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
  .hero-sky, .halo, .spot::after, .btn-glow::after, .art-orbit { display: none; }
  .check-list li::after { forced-color-adjust: none; background: CanvasText; }
  .status-bar { forced-color-adjust: none; }
}
@media print {
  .site-header, .prerelease, .site-footer, .copy, .hero-art, .hero-sky, .feature-nav, .band, .art, .tile-media, .tablist { display: none !important; }
  .hero, .page-hero, .calc-result, .lifecycle-figure, .diagram, .uc-aside .card:first-child { background: none !important; color: #000 !important; border: 1px solid #999; }
  .hero .lede, .hero-note, .page-hero .lede, .page-hero .audience, .calc-lines dt, .calc-lines dd, .calc-note, .calc-k, .calc-total small, .lifecycle b, .lifecycle span, .crumbs, .crumbs a, .eyebrow { color: #000 !important; }
  .calc-total [data-out="total"], .hero h1 .glow { color: #000 !important; background: none !important; -webkit-background-clip: border-box; background-clip: border-box; }
  .page-hero::before, .page-hero::after, .calc-result::before { display: none; }
  .tabs.js .tab-panel[hidden] { display: block !important; } .tabs.js .tab-label { display: inline-block; }
  pre.code { background: #fff !important; color: #000 !important; border: 1px solid #999; white-space: pre-wrap; }
  pre.code span { color: #000 !important; }
  .js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  a { color: #000; }
}