/* A shared document: paper, ink, and the colours of other people's cursors. */
@font-face { font-family: "Geist"; src: url(/fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/geist-mono.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: light-dark(oklch(98.8% 0.006 85), oklch(17% 0.008 260));
  --desk: light-dark(oklch(95.6% 0.01 85), oklch(13.5% 0.008 260));
  --ink: light-dark(oklch(22% 0.015 260), oklch(94% 0.006 85));
  --dim: light-dark(oklch(47% 0.015 260), oklch(72% 0.01 85));
  --faint: light-dark(oklch(63% 0.012 260), oklch(55% 0.01 260));
  --line: light-dark(oklch(89% 0.01 85), oklch(27% 0.01 260));
  --tint: light-dark(oklch(93.5% 0.012 85), oklch(21% 0.01 260));
  --you: light-dark(oklch(60% 0.19 40), oklch(74% 0.16 45));
  --them: light-dark(oklch(52% 0.19 290), oklch(74% 0.14 290));
  --link: light-dark(oklch(48% 0.15 255), oklch(76% 0.12 250));
  --ok: light-dark(oklch(52% 0.14 155), oklch(78% 0.15 155));
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --wrap: min(70rem, 100% - 32px);
  --read: 40rem;
}

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ol, ul, figure, pre, table { margin: 0; }
html { scroll-padding-top: 72px; }
body {
  background: var(--desk); color: var(--ink);
  font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--you); outline-offset: 3px; border-radius: 3px; }
::selection { background: color-mix(in oklch, var(--them) 28%, transparent); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; font-weight: 640; text-wrap: balance; }
p, li { text-wrap: pretty; }
code { font-family: var(--mono); font-size: .86em; background: var(--tint); padding: .1em .35em; border-radius: 4px; }
small { font-size: .82em; color: var(--dim); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: var(--paper); padding: .4rem .8rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* The bar */
.bar { position: sticky; top: 0; z-index: 5; background: color-mix(in oklch, var(--desk) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.bar-inner { width: var(--wrap); margin: auto; display: flex; align-items: center; gap: 20px; height: 56px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 650; letter-spacing: -.01em; }
.brand svg { width: 24px; height: 24px; }
.links { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.links a { color: var(--dim); text-decoration: none; font-size: 15px; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.links a:hover { color: var(--ink); background: var(--tint); }
.links a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--you); border-radius: 0; }
.md { font: 500 13px var(--mono); color: var(--faint); text-decoration: none; }

/* A page is a sheet of paper on the desk */
.page, .home { width: var(--wrap); margin: 28px auto 56px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: clamp(24px, 5vw, 64px); }
.page-head, .hero { max-width: var(--read); margin-bottom: 36px; }
h1 { font-size: clamp(32px, 5vw, 46px); margin-bottom: 14px; }
.lede { font-size: 19px; color: var(--dim); }
.page-body { display: grid; grid-template-columns: minmax(0, var(--read)) minmax(0, 1fr); gap: 56px; }
.prose > section { margin-top: 44px; }
.prose > section:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin-top: 12px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 6px; }
h2 { font-size: 26px; margin-bottom: 4px; }
h3 { font-size: 18px; margin-top: 30px; }
.anchor { float: left; margin-left: -1.1em; width: 1.1em; color: var(--faint); text-decoration: none; opacity: 0; }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor { opacity: 1; }

/* A promise, its status and its proof */
h4 { font-size: 17px; margin-top: 26px; line-height: 1.25; }
.promise { font-size: 17px; font-weight: 620; letter-spacing: -.01em; }
h3 + h4 { margin-top: 12px; }
.st { display: inline-block; vertical-align: 2px; margin-left: 6px; font: 600 11px/1 var(--sans); letter-spacing: .03em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px; border: 1px solid var(--line); color: var(--faint); }
.st-built { color: var(--them); border-color: color-mix(in oklch, var(--them) 40%, transparent); }
.st-proven { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 40%, transparent); }
.st-failing, .sc-fail { color: var(--you); border-color: color-mix(in oklch, var(--you) 50%, transparent); }
.proof { font-size: 15px; color: var(--dim); border-left: 2px solid var(--line); padding-left: 12px; }
.proof b { color: var(--ink); font-weight: 600; margin-right: 4px; }

.toc { position: sticky; top: 80px; align-self: start; font-size: 14px; }
.toc p { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.toc ol { list-style: none; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 3px 0 3px 14px; color: var(--dim); text-decoration: none; }
.toc a:hover { color: var(--ink); box-shadow: inset 2px 0 0 var(--you); }
.next { display: inline-flex; flex-direction: column; margin-top: 56px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); font-weight: 600; }
.next small { font-weight: 400; }

/* Home */
.hero h1 { font-size: clamp(38px, 7vw, 64px); position: relative; }
.hero h1::after { content: ""; display: inline-block; width: 3px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--you); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero h1::after { animation: none; } }
.home > section { max-width: var(--read); margin-top: 40px; }
.home > section p, .home > section ul { margin-top: 10px; }
.home ul { list-style: none; padding: 0; }
.home li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.home li a { white-space: nowrap; font-size: 15px; }

.status-card { display: block; max-width: var(--read); margin-top: 24px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--desk); }
.sc-num { display: block; font-size: 15px; }
.sc-num b { font-size: 22px; margin-right: 4px; }
.sc-bar { display: block; width: 100%; height: 6px; margin: 10px 0 6px; border-radius: 3px; overflow: hidden; }
.b-planned { fill: var(--line); } .b-built { fill: var(--them); } .b-proven { fill: var(--ok); }
.sc-note { font-size: 13px; color: var(--dim); }

/* Status */
.promises { list-style: none; padding: 0 !important; }
.promises li { display: grid; grid-template-columns: 6.5em 1fr; gap: 2px 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.promises .st { margin: 0; justify-self: start; }
.promises small { grid-column: 2; font-family: var(--mono); font-size: 12px; }

/* Compare */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; font-size: 15px; }
.ways-h { font-weight: 600; margin: 0 0 4px !important; }
.matrix-wrap { position: relative; overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); border-radius: 8px; }
.matrix { border-collapse: collapse; font-size: 14px; width: 100%; }
.matrix th, .matrix td { padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix tbody th { text-align: left; white-space: nowrap; font-weight: 500; }
.matrix thead th { vertical-align: bottom; height: 9.5em; font-weight: 500; color: var(--dim); }
.matrix thead th span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.matrix thead th:first-child { text-align: left; vertical-align: bottom; }
.matrix tr:last-child > * { border-bottom: 0; }
.matrix .ours { background: var(--tint); }
.v-yes { color: var(--ok); } .v-partly { color: var(--you); } .v-no { color: var(--faint); } .v-plan { color: var(--them); }
.legend { font-size: 13px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid currentColor; vertical-align: -1px; }
.v-yes .dot { background: currentColor; }
.v-partly .dot { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.v-plan .dot { border-style: dashed; }
.tool, .need { margin-top: 30px; }
.tool h3, .need h3 { margin-top: 0; }
.kind { color: var(--dim); font-size: 15px; margin-top: 2px !important; }
.lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-right: 6px; }
.has { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 4px 16px; font-size: 14px; }
.has li { margin: 0 !important; color: var(--ink); }
.has li span { margin-right: 4px; }
.has li.v-yes span { color: var(--ok); } .has li.v-partly span { color: var(--you); } .has li.v-no { color: var(--faint); }
.has small { display: block; margin-left: 1.3em; }
.src { font-size: 13px; color: var(--faint); }

.foot { border-top: 1px solid var(--line); }
.foot-inner { width: var(--wrap); margin: auto; padding: 28px 0 48px; font-size: 14px; color: var(--dim); }
.foot-inner p { max-width: 48rem; }
.foot-inner p + p { margin-top: 8px; }
.small { font-size: 13px; color: var(--faint); }

@media (max-width: 900px) {
  .page-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 640px) {
  .page, .home { margin: 0; border: 0; border-radius: 0; width: 100%; padding: 24px 16px 40px; }
  .bar-inner { gap: 10px; }
  .links a { padding: 6px 4px; font-size: 13px; }
  .links { gap: 0; }
  .md, .brand span { display: none; }
  .ways { grid-template-columns: 1fr; }
  .anchor { display: none; }
}