@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #07101d;
  --bg-2: #0a1628;
  --surface: #0d1b31;
  --line: #16284a;
  --text: #e6edf6;
  --text-2: #b8c4d6;
  --muted: #7d8ba3;
  --brand: #3ddc84;
  --brand-2: #22b86b;
  --brand-ink: #03140a;
  --off: #53627a;
  --b0: #c9f7dc; --b1: #7ff0b0; --b2: #3ddc84; --b3: #1c8f53;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: 20px;
  --max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.7 var(--mono); font-variant-ligatures: none; }
a { color: inherit; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
main, .nav, .foot { position: relative; z-index: 1; }

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top, 0px); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 56px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; }
.nav-links { display: flex; gap: 22px; margin-right: auto; }
.nav-links a { text-decoration: none; color: var(--text-2); font-size: 14px; }
.nav-links a:hover { color: var(--text); }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; margin: 0; background: transparent; color: var(--text); border: 1px solid var(--line); cursor: pointer; flex: none; }
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--brand-2); color: var(--text); }
.skip { position: fixed; left: 8px; top: 8px; z-index: 30; padding: 12px 16px; background: var(--brand); color: var(--brand-ink); font: 600 14px var(--mono); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
#content { scroll-margin-top: 64px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--mono); padding: 10px 18px; text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.langs { display: flex; border: 1px solid var(--line); }
.langs a { padding: 4px 8px; font: 500 12px var(--mono); color: var(--text-2); text-decoration: none; }
.langs a + a { border-left: 1px solid var(--line); }
.langs a:hover { color: var(--text); }
.langs a[aria-current] { color: var(--bg); background: var(--brand); }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--b1); }
.btn-secondary { border-color: var(--line); background: var(--bg-2); color: var(--text); }
.btn-secondary:hover { border-color: var(--brand-2); }

/* hero */
.hero { padding-block: 88px 96px; }
.hero-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.wordmark { width: min(620px, 92%); height: auto; }
.wordmark .b0 { fill: var(--b0); } .wordmark .b1 { fill: var(--b1); } .wordmark .b2 { fill: var(--b2); } .wordmark .b3 { fill: var(--b3); }
h1 { font: 600 clamp(24px, 3.6vw, 36px)/1.25 var(--sans); letter-spacing: -0.01em; margin: 12px 0 0; text-wrap: balance; }
.lead { max-width: 62ch; margin: 0; color: var(--text-2); text-wrap: pretty; }
.gains { list-style: none; margin: 12px 0 0; padding: 0; width: min(640px, 100%); display: grid; gap: 2px; text-align: left; }
.gains a { display: grid; grid-template-columns: 5.2ch 1fr; gap: 18px; align-items: baseline; padding: 11px 16px; text-decoration: none; background: color-mix(in srgb, var(--surface) 80%, transparent); border-left: 2px solid transparent; }
.gains a:hover { border-left-color: var(--brand); background: var(--surface); }
.gains b { font: 600 22px var(--sans); color: var(--brand); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gains span { color: var(--text); }
.runs-on { max-width: 60ch; margin: 8px 0 0; color: var(--text-2); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* sections */
.band { padding-block: 88px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
h2 { font: 600 clamp(22px, 2.8vw, 30px)/1.25 var(--sans); margin: 0 0 10px; text-wrap: balance; }
.sub { color: var(--text-2); margin: 0 0 36px; max-width: 64ch; }

/* comparisons */
.cmps { display: grid; gap: 16px; }
.cmp { background: var(--surface); border: 1px solid var(--line); padding: 24px 26px; display: grid; gap: 16px; scroll-margin-top: 80px; }
.cmp:target { border-color: var(--brand-2); }
.cmp header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.cmp-pct { font: 600 26px var(--sans); color: var(--brand); font-variant-numeric: tabular-nums; }
.cmp-prompt { margin: 0; font: 500 clamp(17px, 2vw, 21px)/1.45 var(--sans); color: var(--text); }
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 12ch 1fr 16ch; gap: 14px; align-items: center; }
.bar-name { font-size: 13px; color: var(--text-2); }
.bar { height: 14px; background: var(--bg); }
.bar i { display: block; height: 100%; }
.bar i.off { background: var(--off); }
.bar i.on { background: var(--brand); }
.bar-num { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; font-size: 13px; }
.facts div { display: flex; gap: 10px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* real examples */
.exs { display: grid; gap: 10px; }
.ex { background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 80px; }
.ex summary { list-style: none; cursor: pointer; padding: 20px 24px; display: grid; grid-template-columns: 1fr auto auto; gap: 12px 20px; align-items: center; }
.ex summary::-webkit-details-marker { display: none; }
.ex-gain { margin: 0; display: grid; gap: 2px; justify-items: end; text-align: right; }
.ex-gain span { font-size: 14px; color: var(--text-2); }
.ex-gain b { font: 600 18px var(--sans); color: var(--brand); font-variant-numeric: tabular-nums; margin-right: 6px; }
.ex summary::after { content: '+'; grid-column: 3; font: 600 22px var(--mono); color: var(--brand); }
.ex[open] summary::after { content: '−'; }
.ex summary:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.ex-head { display: grid; gap: 4px; min-width: 0; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chip { font-size: 12px; color: var(--text-2); background: var(--bg); border: 1px solid var(--line); padding: 3px 8px; white-space: nowrap; }
.chip b { color: var(--brand); font-weight: 600; }
.ex-body { padding: 4px 24px 26px; display: grid; gap: 24px; }
.ex:target { border-color: var(--brand-2); }
.ex-prompt { font: 500 clamp(16px, 1.8vw, 19px)/1.4 var(--sans); }
.ex-table { overflow-x: auto; }
.ex-table table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ex-table th, .ex-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.ex-table thead th { font: 600 13px var(--mono); color: var(--text-2); }
.ex-table tbody th { font-weight: 400; color: var(--text-2); white-space: nowrap; }
.ex-table td { min-width: 150px; }
.ex-table .num { display: block; white-space: nowrap; }
.ex-table tr.res .num { font-weight: 600; }
.ex-table tr.res td:nth-child(3) .num { color: var(--brand); }
.ex-table .mbar { display: block; height: 6px; margin-top: 5px; background: var(--bg); }
.ex-table .mbar i { display: block; height: 100%; }
.ex-table .mbar i.off { background: var(--off); }
.ex-table .mbar i.on { background: var(--brand); }
.ex-table td.d { min-width: 0; color: var(--brand); font-weight: 600; white-space: nowrap; }
.ex-table td.d.up { color: var(--muted); font-weight: 400; }
.ex-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ex-steps h4 { margin: 0 0 10px; font: 600 14px var(--mono); color: var(--text-2); }
.ex-steps ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; }
.ex-steps li { padding-left: 4px; }
.ex-steps li span { color: var(--text); }
.ex-steps li small { display: block; color: var(--muted); font-size: 12px; }
.ex-why { margin: 0; display: grid; gap: 12px; }
.ex-why div { display: grid; gap: 2px; }
.ex-why dt { font: 600 15px var(--sans); color: var(--brand); }
.ex-why dd { margin: 0; color: var(--text-2); max-width: 70ch; }
.ex-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
@media (max-width: 560px) {
  .ex-table { overflow-x: visible; }
  .ex-table table, .ex-table thead, .ex-table tbody { display: block; width: 100%; }
  .ex-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; border-bottom: 1px solid var(--line); padding: 8px 0; }
  .ex-table th, .ex-table td { border: 0; padding: 2px 0; min-width: 0; }
  .ex-table thead th:first-child { display: none; }
  .ex-table thead th { white-space: normal; }
  .ex-table tbody th { grid-column: 1 / -1; white-space: normal; }
  .ex-table .num { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 720px) {
  .ex summary { grid-template-columns: 1fr auto; padding: 16px 14px; }
  .ex summary::after { grid-column: 2; grid-row: 1; }
  .ex-gain { grid-column: 1 / -1; grid-row: 2; justify-items: start; text-align: left; }
  .ex-chips { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .ex-body { padding: 4px 14px 20px; }
  .ex-steps { grid-template-columns: 1fr; }
  .ex-table td { min-width: 110px; }
}

/* video */
.band-video { padding-block: 56px; }
.video { margin: 0; display: grid; gap: 12px; justify-items: center; }
.video img { width: 100%; max-width: 900px; height: auto; border: 1px solid var(--line); }
.video figcaption { font-size: 13px; color: var(--muted); text-align: center; }

/* two ways */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.way { background: var(--surface); border: 1px solid var(--line); padding: 24px; display: grid; gap: 12px; align-content: start; }
.way h3 { margin: 0; font: 600 18px var(--sans); }
.way p { margin: 0; color: var(--text-2); }
.way a { color: var(--brand); }
.snip { display: block; background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; font: 400 13px var(--mono); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }

/* features */
.feats { display: grid; border-top: 1px solid var(--line); }
.feat { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 12px 40px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.feat-h { display: grid; gap: 6px; align-content: start; }
.feat h3 { margin: 0; font: 600 20px/1.3 var(--sans); text-wrap: balance; }
.feat-b { display: grid; gap: 10px; align-content: start; }
.feat-b p { margin: 0; max-width: 68ch; }
.feat-b > p:first-child { color: var(--text); }

/* paper */
.paper { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 36px; align-items: center; }
.paper-nums { margin: 0 0 24px; display: grid; gap: 14px; }
.paper-nums div { display: grid; gap: 2px; }
.paper-nums dt { font: 600 26px var(--sans); color: var(--brand); }
.paper-nums dd { margin: 0; color: var(--text-2); }
.paper-fig { margin: 0; display: grid; gap: 8px; }
.paper-fig img { width: 100%; height: auto; background: #fff; border: 1px solid var(--line); }
.paper-fig figcaption { font-size: 12px; color: var(--muted); }
.plat a { color: var(--text-2); }
@media (max-width: 900px) { .paper { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ways, .feat { grid-template-columns: 1fr; } }

/* docs */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; padding-block: 48px 96px; }
.docs-side { position: sticky; top: 76px; align-self: start; max-height: calc(100vh - 96px); overflow-y: auto; font-size: 13px; display: grid; gap: 18px; scrollbar-width: thin; }
.side-top { color: var(--text); text-decoration: none; font-weight: 600; }
.side-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-group a, .side-top { display: block; padding: 3px 8px; margin-left: -8px; text-decoration: none; color: var(--text-2); border-left: 2px solid transparent; }
.side-group a:hover, .side-top:hover { color: var(--text); }
.docs-side a[aria-current="page"] { color: var(--brand); border-left-color: var(--brand); }
.docs-main { min-width: 0; max-width: 78ch; }
.docs-main h1 { font: 600 clamp(26px, 3vw, 34px)/1.2 var(--sans); margin: 0 0 12px; }
.docs-lead { color: var(--text-2); font-size: 16px; margin: 0 0 28px; }
.prose { font-size: 15px; }
.prose h2 { font: 600 22px/1.3 var(--sans); margin: 40px 0 12px; }
.prose h3 { font: 600 17px/1.3 var(--sans); margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; color: var(--text-2); }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--brand); }
.prose code { font: 400 0.92em var(--mono); background: var(--surface); border: 1px solid var(--line); padding: 1px 5px; }
.prose pre { background: var(--bg-2); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto; margin: 0 0 18px; font-size: 13px; line-height: 1.6; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.prose th { color: var(--text-2); font: 600 13px var(--mono); }
.prose blockquote { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--brand-2); background: var(--surface); }
.prose blockquote p { margin: 0; color: var(--text); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; border-top: 1px solid var(--line); padding-top: 20px; }
.pager a { text-decoration: none; color: var(--text); }
.pager a:hover { color: var(--brand); }
.pager a.next { text-align: right; margin-left: auto; }
.nav-links a[aria-current="page"] { color: var(--brand); }
.cl { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 28px; scroll-margin-top: 80px; }
.cl header { display: flex; align-items: baseline; gap: 14px; }
.cl h2 { margin: 0; font: 600 26px var(--sans); color: var(--brand); }
.cl-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cl h3 { font: 600 18px/1.35 var(--sans); margin: 8px 0 10px; }
.side-fold { display: none; }
.side-fold summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 600 14px var(--mono); }
.side-fold summary::-webkit-details-marker { display: none; }
.side-fold summary::after { content: '+'; color: var(--brand); font: 600 18px var(--mono); }
.side-fold[open] summary::after { content: '−'; }
.side-fold .docs-side { margin-top: 8px; }
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; gap: 24px; padding-block: 28px 64px; }
  .docs-side { position: static; max-height: none; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 720px) {
  .docs-side-desk { display: none; }
  .side-fold { display: block; }
  .side-fold .docs-side { position: static; max-height: none; display: grid; grid-template-columns: 1fr; }
}

/* install */
.oneliner { display: flex; align-items: center; gap: 14px; background: var(--bg); border: 1px solid var(--line); padding: 14px 16px; max-width: 640px; }
.oneliner .ps { color: var(--brand); }
.oneliner code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: normal; font: 400 15px var(--mono); }
.copy { font: 600 12px var(--mono); background: var(--bg-2); color: var(--text); border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; }
.copy:hover { border-color: var(--brand-2); }
@media (max-width: 520px) {
  .oneliner { flex-wrap: wrap; align-items: flex-start; }
  .oneliner .copy { flex: 1 0 100%; min-height: 44px; }
}
.plat { color: var(--muted); font-size: 13px; margin: 18px 0 0; }

/* footer */
.foot { border-top: 1px solid var(--line); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--bg); font-size: 13px; color: var(--muted); }
.foot-in { display: block; }
.foot-map { display: flex; flex-wrap: wrap; align-items: center; }
.foot-dot { padding: 0 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }

/* legal pages */
.legal { max-width: 72ch; padding-block: 64px 96px; }
.legal h1 { font-size: 30px; margin-bottom: 24px; }
.legal h2 { font-size: 18px; margin: 32px 0 8px; }
.legal p { color: var(--text-2); margin: 0 0 12px; }

@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 14px; }
  .nav-in { justify-content: space-between; gap: 8px; height: auto; min-height: 56px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; flex-direction: column; gap: 0; margin: 0; padding: 6px var(--gutter) 10px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { min-height: 44px; display: flex; align-items: center; }
  .langs { margin-left: auto; flex: none; }
  .langs a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 14px; }
  .foot a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-in .btn, .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .hero { padding-block: 56px 64px; }
  .gains a { grid-template-columns: 4.6ch 1fr; gap: 12px; padding: 10px 12px; }
  .gains b { font-size: 18px; }
  .band { padding-block: 64px; }
  .cmp { padding: 18px 16px; }
  .bar-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* cross-harness comparison */
.hx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.hx-legend i, .hx-bar i { display: inline-block; height: 10px; }
.hx-legend i { width: 10px; margin-right: 6px; vertical-align: -1px; }
.hx { display: grid; gap: 6px; }
.hx-row { display: grid; grid-template-columns: minmax(0, 13ch) minmax(0, 1fr) minmax(0, 24ch); gap: 14px; align-items: center; padding: 6px 10px; border-left: 2px solid transparent; }
.hx-row.on { border-left-color: var(--brand); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.hx-name { font-size: 14px; color: var(--text); }
.hx-bar { display: flex; height: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hx-bar i { height: 100%; }
.hx-in { background: var(--brand); } .hx-cr { background: var(--off); } .hx-out { background: var(--b0); }
.hx-num { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hx-num b { color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .hx-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.gains span small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.ex-body > * { min-width: 0; }
.ex-steps > div { min-width: 0; }
.ex-steps li span { overflow-wrap: anywhere; }
.ex summary { grid-template-columns: minmax(0, 1fr) auto auto; }
.ex-steps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 700px) { .ex-steps { grid-template-columns: minmax(0, 1fr); } }

/* docs callouts (> [!NOTE]) */
.callout { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand); background: var(--bg); }
.callout p { margin: 0; }
.callout-warning, .callout-caution { border-left-color: #e5a53b; }

/* feature pages */
.docs-main > .kicker { display: block; margin-bottom: 6px; }
.feat-more { font-size: 14px; }
.feats-page { margin-top: 22px; }
.feats-page .feat { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 20px; }

/* results page: no sidebar, wide tables scroll inside their own box */
.docs-wide { display: block; }
.docs-wide .docs-main { max-width: 1040px; margin-inline: auto; }
.prose .table-scroll { overflow-x: auto; }

/* results chart: per project, solved runs as dots and spend per solved task as bars */
.rchart { display: grid; gap: 10px; margin: 18px 0 8px; }
.rrow { display: grid; grid-template-columns: minmax(84px, 120px) minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.rrow > b { font-weight: 600; font-size: 14px; }
.rbars { display: grid; gap: 4px; }
.rbar { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 7.5em; gap: 8px; align-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.rbar small { color: var(--muted); }
.rbar .track { height: 10px; background: var(--bg); }
.rbar .track i { display: block; height: 100%; background: var(--off); }
.rbar.on .track i { background: var(--brand); }
.rbar .lbl { white-space: nowrap; }
.rbar .dots { letter-spacing: 1px; color: var(--muted); }
.rbar.on .dots { color: var(--brand); }
.rlegend { font-size: 13px; color: var(--muted); }
@media (max-width: 520px) { .rrow { grid-template-columns: minmax(0, 1fr); } .rbar { grid-template-columns: 9.5em minmax(0, 1fr) 6.5em; } }
.wp-0{width:0%}.wp-1{width:1%}.wp-2{width:2%}.wp-3{width:3%}.wp-4{width:4%}.wp-5{width:5%}.wp-6{width:6%}.wp-7{width:7%}.wp-8{width:8%}.wp-9{width:9%}.wp-10{width:10%}.wp-11{width:11%}.wp-12{width:12%}.wp-13{width:13%}.wp-14{width:14%}.wp-15{width:15%}.wp-16{width:16%}.wp-17{width:17%}.wp-18{width:18%}.wp-19{width:19%}.wp-20{width:20%}.wp-21{width:21%}.wp-22{width:22%}.wp-23{width:23%}.wp-24{width:24%}.wp-25{width:25%}.wp-26{width:26%}.wp-27{width:27%}.wp-28{width:28%}.wp-29{width:29%}.wp-30{width:30%}.wp-31{width:31%}.wp-32{width:32%}.wp-33{width:33%}.wp-34{width:34%}.wp-35{width:35%}.wp-36{width:36%}.wp-37{width:37%}.wp-38{width:38%}.wp-39{width:39%}.wp-40{width:40%}.wp-41{width:41%}.wp-42{width:42%}.wp-43{width:43%}.wp-44{width:44%}.wp-45{width:45%}.wp-46{width:46%}.wp-47{width:47%}.wp-48{width:48%}.wp-49{width:49%}.wp-50{width:50%}.wp-51{width:51%}.wp-52{width:52%}.wp-53{width:53%}.wp-54{width:54%}.wp-55{width:55%}.wp-56{width:56%}.wp-57{width:57%}.wp-58{width:58%}.wp-59{width:59%}.wp-60{width:60%}.wp-61{width:61%}.wp-62{width:62%}.wp-63{width:63%}.wp-64{width:64%}.wp-65{width:65%}.wp-66{width:66%}.wp-67{width:67%}.wp-68{width:68%}.wp-69{width:69%}.wp-70{width:70%}.wp-71{width:71%}.wp-72{width:72%}.wp-73{width:73%}.wp-74{width:74%}.wp-75{width:75%}.wp-76{width:76%}.wp-77{width:77%}.wp-78{width:78%}.wp-79{width:79%}.wp-80{width:80%}.wp-81{width:81%}.wp-82{width:82%}.wp-83{width:83%}.wp-84{width:84%}.wp-85{width:85%}.wp-86{width:86%}.wp-87{width:87%}.wp-88{width:88%}.wp-89{width:89%}.wp-90{width:90%}.wp-91{width:91%}.wp-92{width:92%}.wp-93{width:93%}.wp-94{width:94%}.wp-95{width:95%}.wp-96{width:96%}.wp-97{width:97%}.wp-98{width:98%}.wp-99{width:99%}.wp-100{width:100%}
/* long symbol paths in running text (e.g. crate/src/file.rs::Type::method) wrap instead of widening the page */
.prose :not(pre) > code { overflow-wrap: anywhere; }
.prose img { max-width: 100%; height: auto; }

/* example cards: a title, then prose, then the numbers (owner 08.10.: no labels, chips or notes) */
.ex summary h3 { display: inline; margin: 0; font-size: 18px; line-height: 1.35; }
.ex-story { display: grid; gap: 10px; max-width: 72ch; margin-bottom: 18px; }
.ex-story p { margin: 0; }

/* harness comparison table */
.hx-table { overflow-x: auto; margin-top: 18px; }
.hx-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hx-table th, .hx-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.hx-table thead th { font: 600 13px var(--mono); color: var(--text-2); text-align: center; }
.hx-table tbody th { text-align: left; font-weight: 600; color: var(--text); }
.hx-table td.on { color: var(--brand); font-weight: 600; }