/* pantheonsim.com: the landing page, docs, CI guide and 404.

   Dark first with the playground's petrol accent, so the site and the tool
   read as one product. Three faces, served from this origin because the
   content policy allows no font CDN: Bricolage Grotesque for display, IBM Plex
   Sans for reading, JetBrains Mono for anything a terminal would print. The
   one ornament is the hero: a blueprint grid and a rack of eight GPUs. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque.woff2") format("woff2");
  font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --bg: #07090c; --bg-2: #0a0e13; --panel: #0e1318; --raised: #141b22;
  --line: #1d262f; --line-2: #2a3540;
  --ink: #e9eff3; --ink-dim: #a1aeb8; --ink-faint: #8894a0;
  --accent: #3cc3d6; --accent-2: #1f8b9b; --on-accent: #021417; --accent-wash: rgb(60 195 214 / .1);
  --ok: #62d39a; --warn: #eab064;
  --grid: rgb(140 190 205 / .06); --glow: rgb(60 195 214 / .18);
  --shadow: 0 30px 80px rgb(0 0 0 / .5);
  --term-bg: #06080b; --term-bar: #0d1217; --term-line: #1b232b; --term-ink: #d7dfe5; --term-dim: #7d8a95;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --radius: 14px;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f8f9; --bg-2: #eef2f4; --panel: #ffffff; --raised: #eef3f5;
    --line: #dce4e9; --line-2: #c7d2d9;
    --ink: #0d161c; --ink-dim: #46545f; --ink-faint: #5d6974;
    --accent: #0a6d7b; --accent-2: #08525d; --on-accent: #ffffff; --accent-wash: rgb(10 109 123 / .08);
    --ok: #157a3c; --warn: #955708;
    --grid: rgb(10 60 75 / .07); --glow: rgb(10 109 123 / .12);
    --shadow: 0 30px 70px rgb(15 35 45 / .2);
  }
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--mono); }
code { font-size: .88em; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; line-height: 1.08; letter-spacing: -.025em; margin: 0; }
p { text-wrap: pretty; }
/* Wide screens get the width: the column runs nearly edge to edge, and only
   running text keeps a reading measure of its own. */
.wrap { max-width: 2200px; margin: 0 auto; padding: 0 clamp(20px, 3.5vw, 56px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* In-page links land below the sticky header rather than under it. */
section[id], [id].band { scroll-margin-top: 70px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.skip:focus { left: 8px; }

/* The UA rule for [hidden] loses to any author display (.btn, .signin-choices),
   which left both sign-in buttons on screen once signed in. */
[hidden] { display: none !important; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); }
.nav-row { display: flex; align-items: center; gap: 20px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 700 18px/1 var(--display); letter-spacing: -.02em; }
.mark { width: 13px; height: 13px; border-radius: 3.5px; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px var(--glow); }
.nav nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav nav a { color: var(--ink-dim); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.nav nav a:hover, .nav nav a[aria-current] { color: var(--ink); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 9px; background: var(--accent); color: var(--on-accent) !important;
  font: 600 15.5px/1 var(--sans); text-decoration: none; padding: 14px 22px; border-radius: 10px;
  border: 1px solid var(--accent); transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 8px 26px -10px var(--accent); }
.btn:hover { background: color-mix(in srgb, var(--accent) 86%, #fff); transform: translateY(-1px); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn.sm { padding: 8px 14px; font-size: 14px; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--ink) !important; border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--accent-2); background: var(--raised); }

/* ---------- hero ---------- */
.hero { position: relative; padding: 84px 0 72px; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 36px 36px; background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 35%, #000 30%, transparent 78%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 720px; height: 520px; right: -120px; top: -60px;
  background: radial-gradient(closest-side, var(--glow), transparent); filter: blur(10px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--line-2); border-radius: 999px; background: color-mix(in srgb, var(--panel) 70%, transparent);
  font: 500 12.5px/1 var(--mono); letter-spacing: .02em; color: var(--ink-dim); }
.eyebrow .led { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.hero h1 { font-size: clamp(42px, 5.6vw, 74px); font-weight: 780; letter-spacing: -.028em; line-height: 1; margin-bottom: 24px; word-spacing: .04em; }
.hero h1 em { font-style: normal; color: var(--accent);
  background: linear-gradient(transparent 78%, var(--accent-wash) 78%); }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-dim); margin: 0 0 30px; max-width: 54ch; }
.lede code { color: var(--ink); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.proof { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 28px 0 0;
  font: 500 13px/1.3 var(--mono); color: var(--ink-faint); }
.proof li { display: flex; align-items: center; gap: 8px; }
.proof li::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--accent-2); }

.hero-visual { display: grid; gap: 12px; min-width: 0; }

/* ---------- terminals ---------- */
.term { margin: 0; background: var(--term-bg); color: var(--term-ink); border: 1px solid var(--term-line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); container-type: inline-size; min-width: 0; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: var(--term-bar); border-bottom: 1px solid var(--term-line); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #262f38; }
.term-bar span { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--term-dim); }
.term pre { margin: 0; padding: 16px 18px; overflow-x: auto; line-height: 1.5; }
/* nvidia-smi's frame is 91 columns and has to be read whole, so the type is
   sized from the terminal's own width (a JetBrains Mono cell is 0.6em) rather
   than the window's. Below 640px a narrower query replaces it. */
.hero-term .smi-wide { font-size: clamp(6px, calc((100cqi - 38px) / 55), 13.5px); }
.hero-term .smi-narrow { display: none; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term figcaption { padding: 10px 18px; font-size: 13px; color: var(--term-dim); border-top: 1px solid var(--term-line); }
.prompt { color: #3cc3d6; }
.term-out, .snippet { margin: 0; overflow-x: auto; background: var(--term-bg); color: var(--term-ink);
  border: 1px solid var(--term-line); border-radius: 12px; padding: 16px 18px; font-size: 13px; line-height: 1.55; }
.snippet .c { color: #6d7a85; }
.snippet .k { color: #8fd3de; }
.snippet .s { color: #e8c07d; }

/* The rack: eight simulated cards, their activity lights running in turn. */
.rack { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rack li { display: grid; gap: 6px; padding: 10px 10px 9px; border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 85%, transparent); font: 500 11px/1 var(--mono); color: var(--ink-faint); }
.rack b { display: flex; justify-content: space-between; align-items: center; color: var(--ink-dim); font-weight: 600; }
.rack i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok);
  animation: activity 3.2s ease-in-out infinite; }
.rack li:nth-child(2) i { animation-delay: .4s; } .rack li:nth-child(3) i { animation-delay: .8s; }
.rack li:nth-child(4) i { animation-delay: 1.2s; } .rack li:nth-child(5) i { animation-delay: 1.6s; }
.rack li:nth-child(6) i { animation-delay: 2s; } .rack li:nth-child(7) i { animation-delay: 2.4s; }
.rack li:nth-child(8) i { animation-delay: 2.8s; }
.rack .bar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rack .bar::after { content: ""; display: block; height: 100%; width: 100%; background: var(--accent-2);
  transform-origin: left; animation: load 3.2s ease-in-out infinite; animation-delay: inherit; }
@keyframes activity { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 40% { opacity: .5; } }
@keyframes load { 0%, 100% { transform: scaleX(.08); } 15% { transform: scaleX(.92); } 45% { transform: scaleX(.3); } }
.rack li:nth-child(2) .bar::after { animation-delay: .4s; } .rack li:nth-child(3) .bar::after { animation-delay: .8s; }
.rack li:nth-child(4) .bar::after { animation-delay: 1.2s; } .rack li:nth-child(5) .bar::after { animation-delay: 1.6s; }
.rack li:nth-child(6) .bar::after { animation-delay: 2s; } .rack li:nth-child(7) .bar::after { animation-delay: 2.4s; }
.rack li:nth-child(8) .bar::after { animation-delay: 2.8s; }

/* ---------- what runs ---------- */
.runs { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.runs-row { display: flex; align-items: center; gap: 28px; padding-top: 20px; padding-bottom: 20px; }
.runs-row p { margin: 0; flex: none; font: 600 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.runs ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.runs li { font: 500 13px/1 var(--mono); color: var(--ink-dim); padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }

/* ---------- sections ---------- */
.band { padding: 96px 0; }
.band + .band { border-top: 1px solid var(--line); }
.band.alt { background: var(--bg-2); }
.kicker { margin: 0 0 14px; font: 600 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.band h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 750; margin-bottom: 16px; }
.section-lede { margin: 0 0 44px; color: var(--ink-dim); max-width: 62ch; font-size: 18px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-rows: auto auto 1fr; gap: 10px; padding: 26px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.steps li::before { content: counter(step, decimal-leading-zero); font: 600 13px/1 var(--mono); color: var(--accent); }
.steps h3 { font-size: 21px; font-weight: 700; }
.steps p { margin: 0 0 6px; color: var(--ink-dim); font-size: 15.5px; }
.steps .snippet { align-self: end; font-size: 12.5px; white-space: pre; }

.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.feature { background: var(--panel); padding: 28px 24px; display: grid; align-content: start; gap: 10px; }
.feature .glyph { font: 600 13px/1 var(--mono); color: var(--accent); }
.feature h3 { font-size: 19px; font-weight: 700; text-wrap: pretty; }
.feature p { margin: 0; color: var(--ink-dim); font-size: 15px; }

.demos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.demo { margin: 0; display: grid; grid-template-rows: auto 1fr; gap: 16px; padding: 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); min-width: 0; }
.demo h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.demo p { margin: 0; color: var(--ink-dim); font-size: 15px; }
.demo .term-out { font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; align-self: stretch; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; }
.split p { color: var(--ink-dim); }
.checks { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 12px; color: var(--ink-dim); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.checks li::before { content: "✓"; font: 700 14px/1.65 var(--mono); color: var(--ok); }
.checks b { color: var(--ink); font-weight: 600; }
.shot { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow);
  transition: transform .2s; }
.shot:hover { transform: translateY(-3px); }
.shot img { display: block; width: 100%; height: auto; }

/* ---------- GPU table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  background:
    linear-gradient(to right, var(--panel) 40%, transparent) left / 48px 100% no-repeat local,
    linear-gradient(to left, var(--panel) 40%, transparent) right / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .22), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .22), transparent) right / 14px 100% no-repeat scroll,
    var(--panel); }
table.gpus { min-width: 640px; }
table.gpus td:first-child { white-space: nowrap; color: var(--ink); font-weight: 500; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-dim); }
th { font: 600 11.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); background: var(--raised); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--accent-wash); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--mono); font-size: 14px; }
.ok, .pending { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.4 var(--mono); }
.ok { color: var(--ok); } .pending { color: var(--warn); }
.ok::before, .pending::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- FAQ ---------- */
.faq { columns: 2 420px; column-gap: 10px; }
.faq details { break-inside: avoid; margin-bottom: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; font: 650 17.5px/1.35 var(--display); letter-spacing: -.01em;
  display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 20px/1 var(--mono); color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--ink-dim); max-width: 70ch; }

/* ---------- closing call ---------- */
.closer { position: relative; overflow: hidden; isolation: isolate; text-align: center; }
.closer::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 50% 80% at 50% 100%, var(--glow), transparent 70%); }
.closer h2 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -.028em; }
.closer .section-lede { margin: 0 auto 32px; }
.closer .cta { justify-content: center; }
.closer .snippet { display: inline-block; text-align: left; margin-top: 40px; max-width: 100%; }

/* ---------- docs and guides ---------- */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); padding-top: 52px; padding-bottom: 96px; }
.toc { position: sticky; top: 90px; align-self: start; display: grid; gap: 2px; font-size: 14.5px; }
.toc-title { margin: 0 0 10px; font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.toc a { color: var(--ink-dim); text-decoration: none; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--ink); border-left-color: var(--accent); }
.prose { max-width: 76ch; min-width: 0; }
.prose h1 { font-size: clamp(36px, 4.4vw, 52px); font-weight: 780; letter-spacing: -.025em; margin: 0 0 16px; }
.prose > h1 + p { font-size: 18.5px; }
.prose h2 { font-size: 27px; font-weight: 720; margin: 56px 0 14px; scroll-margin-top: 90px; }
.prose h3 { font-size: 19px; font-weight: 700; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--ink-dim); }
.prose b, .prose strong, .prose code { color: var(--ink); }
.prose :not(pre) > code { background: var(--raised); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.prose pre { margin: 18px 0; }
.prose .term-out { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12.5px; }
.prose .table-wrap { margin: 18px 0; }
.prose table { min-width: 560px; }
.prose td:first-child code { white-space: nowrap; }
.crumbs { margin: 0 0 18px; font: 500 13px/1 var(--mono); color: var(--ink-faint); }
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.note { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--panel); padding: 14px 18px; margin: 22px 0; }
.note p { margin: 0; }

/* ---------- 404 ---------- */
.lost { min-height: calc(100vh - 62px - 220px); display: grid; place-items: center; padding: 72px 0; }
.lost .term { width: min(640px, 100%); }
.lost h1 { font-size: clamp(34px, 5vw, 54px); margin: 34px 0 12px; letter-spacing: -.028em; }
.lost p { color: var(--ink-dim); margin: 0 0 26px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 0 44px; color: var(--ink-faint); font-size: 14px; background: var(--bg-2); }
.foot-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot p { margin: 0; }
.foot .brand { margin-bottom: 12px; }
.foot-col h2 { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 14px; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--ink-dim); text-decoration: none; }
.foot a:hover { color: var(--ink); }
/* A link inside a sentence needs more than a colour to be seen as one. */
.foot p a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- account ---------- */
.account { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* A name is whatever the provider holds: long, or right-to-left. It stays one
   line, isolated from the words around it, and never widens the header. */
.account-name { color: var(--ink); font-size: 14.5px; font-weight: 600; max-width: 18ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
/* Padding for a finger-sized target, cancelled by margin so the text sits where it did. */
.account-out { background: none; border: 0; padding: 8px 6px; margin: -8px -6px; border-radius: 6px; white-space: nowrap;
  font: 500 14.5px/1 var(--sans); color: var(--ink-dim); cursor: pointer; }
.account-out:hover { color: var(--ink); }
.signin { max-width: 440px; margin: 0 auto; padding: 72px 0 96px; display: grid; gap: 16px; }
.signin h1 { font-size: clamp(34px, 5vw, 48px); letter-spacing: -.028em; }
.signin-lede { margin: 0; color: var(--ink-dim); font-size: 17px; }
.signin-choices { display: grid; gap: 10px; margin-top: 8px; }
.signin-choices .provider { justify-content: center; }
.signin-error { margin: 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 10px; color: var(--ink); }
.signin-done p { margin: 0 0 14px; }
.signin-fine { margin: 12px 0 0; color: var(--ink-faint); font-size: 13.5px; }
.foot .fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 12px; font-size: 12.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .hero-grid, .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demos, .steps { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
/* One row of links still, but a long name pushed it 3px past the edge at 768. */
@media (max-width: 900px) {
  .nav .account-name { max-width: 9ch; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { position: static; }
  /* Two rows: the brand and the playground button, then the section links.
     nav becomes display: contents so its links and button can be ordered
     around a line break that the row's ::after supplies. */
  .nav-row { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; row-gap: 8px; column-gap: 18px; }
  .nav nav { display: contents; }
  .nav .brand { order: 0; }
  .nav nav .btn { order: 1; margin-left: auto; white-space: nowrap; }
  .nav-row::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .nav nav a:not(.btn), .nav nav .account { order: 3; }
  /* The second row has room for the links and Sign out, not a name as well:
     with one it wrapped to a third row. The sign-in page still says who. */
  .nav .account-name { display: none; }
  section[id], [id].band { scroll-margin-top: 12px; }
  .hero .cta .btn, .closer .cta .btn { flex: 1 1 100%; justify-content: center; }
  /* Terminal output keeps its columns and scrolls, instead of wrapping a table into nonsense. */
  .demo .term-out { white-space: pre; overflow-wrap: normal; }
  .hero { padding: 48px 0 44px; }
  .lede { font-size: 17.5px; }
  .band { padding: 64px 0; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .rack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .runs-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .docs { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .toc { display: none; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hero-term .smi-wide { display: none; }
  .hero-term .smi-narrow { display: block; }
}
@media (pointer: coarse) {
  .nav nav a:not(.btn) { padding: 8px 6px; margin: 0 -6px; }
  .foot-col a, .toc a, .crumbs a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }
  .brand { padding: 6px 0; }
}
/* Paper is white whatever the theme: browsers drop backgrounds when printing,
   which left the dark theme's near-white text on white. */
@media print {
  :root { color-scheme: light; --bg: #fff; --panel: #fff; --ink: #111; --ink-dim: #333; --ink-faint: #555;
    --line: #ccc; --line-2: #ccc; }
  body { background: #fff; color: #111; }
  .nav, .skip, .foot { display: none !important; }
  *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
  pre, pre *, code { color: #111 !important; background: transparent !important; }
  a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}