/*
 * pullboard.dev: one stylesheet, system fonts, nothing loaded from anywhere else. Every colour is a
 * token; the dark block redefines them all, so a page follows the reader's system theme. Type keeps
 * to one scale and space to one rhythm; boxes stay few, borders hairline, and green marks only what
 * matters.
 */
:root {
  --bg: #fbfcfb; --surface: #ffffff; --surface-2: #f3f6f4; --line: #e3e8e5; --line-strong: #c9d1cc;
  --ink: #101714; --muted: #4f5b55; --faint: #84918a;
  --accent: #08915f; --accent-strong: #067049; --accent-soft: #e1f2ea;
  --reject: #b3392c;
  --header: rgba(251, 252, 251, .82);
  --shadow: 0 1px 2px rgba(16, 23, 20, .04), 0 12px 32px -20px rgba(16, 23, 20, .22);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --section: clamp(72px, 10vw, 128px);
  --measure: 60ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f0d; --surface: #111714; --surface-2: #161d19; --line: #222b26; --line-strong: #34403a;
    --ink: #e9eeeb; --muted: #a1aea7; --faint: #6d7a73;
    --accent: #34d89e; --accent-strong: #4ee3ac; --accent-soft: #10241c;
    --reject: #f0776b;
    --header: rgba(11, 15, 13, .78);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -20px rgba(0, 0, 0, .8);
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 76px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: var(--accent-strong); }
code { font: .9em var(--mono); }
/* A command inside a sentence sits in a light chip, so it reads apart from the words around it. */
:is(p, li, dd, figcaption, td) > code, :is(p, li, dd) > span > code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* No hanging lines. Short text, in lists, cards, steps and captions, balances its lines so the
   last is never a stub, in Firefox, Chrome and Safari. Longer prose keeps pretty, which avoids a
   lone last word where the browser runs it and wraps as usual where it doesn't. */
p, blockquote, td { text-wrap: pretty; }
li, dd, dt, figcaption, th, h3, h4, label, .sub, .steps p, .grid p, .side p { text-wrap: balance; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The bar: the brand, links to the main pages, and the way in, floating clear of the page. Where
   scroll-driven animation runs and motion is welcome, it lies flat across the top of a page and
   settles into this shape as the page scrolls; elsewhere bar.js marks the top of the page .flat
   to the same end, and with no script it keeps this shape throughout. */
.top { position: sticky; top: 0; z-index: 10; padding: 10px 16px 0; pointer-events: none; }
.top .bar { pointer-events: auto; max-width: 880px; margin: 0 auto; padding: 8px 8px 8px 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; background: var(--header); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
@keyframes settle { from { max-width: 1120px; padding: 14px 24px; background-color: transparent; border-color: transparent; border-radius: 0; box-shadow: none; } }
.top.flat .bar { max-width: 1120px; padding: 14px 24px; background-color: transparent; border-color: transparent; border-radius: 0; box-shadow: none; }
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand svg { width: 26px; height: 26px; }
.brand .ink { fill: var(--ink); }
.brand .accent { fill: var(--accent); }
.links { display: flex; gap: 2px; }
.links a { padding: 7px 14px; border-radius: 9px; color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.links a:hover { color: var(--ink); background: var(--surface-2); }
.end { justify-self: end; display: flex; align-items: center; gap: 6px; }
.gh { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: var(--muted); }
.gh:hover { color: var(--ink); background: var(--surface-2); }
.gh svg { width: 20px; height: 20px; }
.pill { padding: 8px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap; }
.pill:hover { background: var(--accent-strong); color: var(--bg); }

/* Type and rhythm: centred heads, one measure for prose. */
main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1 { margin: 0 auto; max-width: 13em; font-size: clamp(44px, 7.4vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -.045em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--accent); }
h2 { margin: 0 auto; max-width: 18em; font-size: clamp(32px, 4.6vw, 48px); font-weight: 750; line-height: 1.08; letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.sub { margin: 18px auto 0; max-width: var(--measure); text-align: center; font-size: 19px; line-height: 1.55; color: var(--muted); }
.coord, .why { padding: var(--section) 0 0; }

/* The first screen: one line on what it is, one on who it's for, and two to start. */
.hero { padding: clamp(64px, 11vw, 136px) 0 0; text-align: center; }
.lede { margin: 28px auto 0; max-width: 34em; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5; color: var(--ink); text-wrap: balance; }
.who { margin: 12px auto 0; max-width: 40em; color: var(--muted); text-wrap: balance; }
.cmd { display: inline-block; margin: 36px 0 0; padding: 16px 24px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font: 15.5px/1.8 var(--mono); max-width: 100%; overflow-x: auto; }
.cmd code { font: inherit; -webkit-user-select: all; user-select: all; }
.cmd code > span::before { content: "$ "; color: var(--faint); }
.note { margin: 14px auto 0; font-size: 14px; color: var(--faint); }

/* The coordinator: three boards side by side, divided by hairlines, never boxed twice. */
.map { margin: 48px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.project { min-width: 0; padding: 26px 26px 24px; }
.project + .project { border-left: 1px solid var(--line); }
.project h3 { margin: 0; font: 600 15px/1.4 var(--mono); }
.items { list-style: none; margin: 16px 0 0; padding: 0; }
.item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.4; }
.item::before { content: ""; width: 12px; height: 12px; border-radius: 50%; }
.item.ready::before { background: var(--accent); }
.item.claimed::before { border: 1.6px solid var(--accent); background: linear-gradient(90deg, transparent 50%, var(--accent) 50%); }
.item.verified::before { content: "\2713"; color: var(--surface); background: var(--accent-strong); font: 700 8.5px/12px var(--sans); text-align: center; }
.item.blocked::before { border: 1.6px dashed var(--faint); }
.item .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .st { font-size: 13px; color: var(--muted); }
.item.blocked .t, .item.blocked .st { color: var(--faint); }
.flow { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; font: 12.5px/1.4 var(--mono); color: var(--faint); }
.flow span + span::before { content: "\2192"; margin-right: 10px; color: var(--line-strong); }
.agents { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.agent { display: grid; justify-items: center; gap: 2px; text-align: center; min-width: 0; }
.agent svg { width: 36px; height: 36px; margin-bottom: 4px; padding: 8px; border-radius: 50%; color: var(--accent-strong); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--line); }
.agent b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.agent small { font-size: 12px; color: var(--faint); }

/* The coordinator in motion: in each board one item goes from claimed to submitted to verified, the
   step it is on lights up, and the verifier answers. The boards run out of step, so something is
   always moving; with reduced motion the figure holds still on its first frame. */
.item.live .st { display: grid; justify-items: end; }
.item.live .st i { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.item.live .st i:first-child { opacity: 1; }
.item.live::before { content: "\2713"; font: 700 8.5px/9px var(--sans); text-align: center; color: transparent; }
.project:nth-child(2) { --lag: -3s; }
.project:nth-child(3) { --lag: -6s; }
@media (prefers-reduced-motion: no-preference) {
  .item.live::before { animation: live-dot 9s var(--lag, 0s) infinite; }
  .item.live .st i:nth-child(1) { animation: live-1 9s var(--lag, 0s) infinite; }
  .item.live .st i:nth-child(2) { animation: live-2 9s var(--lag, 0s) infinite; }
  .item.live .st i:nth-child(3) { animation: live-3 9s var(--lag, 0s) infinite; }
  .flow span:nth-child(1) { animation: step-1 9s var(--lag, 0s) infinite; }
  .flow span:nth-child(2) { animation: step-2 9s var(--lag, 0s) infinite; }
  .flow span:nth-child(3) { animation: step-3 9s var(--lag, 0s) infinite; }
  .agent.verifier svg { animation: live-ping 9s var(--lag, 0s) infinite; }
  .top.eased .bar { transition: max-width .3s, padding .3s, background-color .3s, border-color .3s, border-radius .3s, box-shadow .3s; }
  @supports (animation-timeline: scroll()) {
    .top .bar { animation: settle linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
  }
}
@keyframes live-dot {
  0%, 31% { background: linear-gradient(90deg, transparent 50%, var(--accent) 50%); border-color: var(--accent); color: transparent; }
  33.3%, 64% { background: var(--accent-soft); border-color: var(--accent); color: transparent; }
  66.6%, 98% { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--surface); }
}
@keyframes live-1 { 0%, 31% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes live-2 { 0%, 31% { opacity: 0; } 33.3%, 64% { opacity: 1; } 66.6%, 100% { opacity: 0; } }
@keyframes live-3 { 0%, 64% { opacity: 0; } 66.6%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes step-1 { 0%, 31% { color: var(--accent-strong); } 33.3%, 100% { color: var(--faint); } }
@keyframes step-2 { 0%, 31% { color: var(--faint); } 33.3%, 64% { color: var(--accent-strong); } 66.6%, 100% { color: var(--faint); } }
@keyframes step-3 { 0%, 64% { color: var(--faint); } 66.6%, 98% { color: var(--accent-strong); } 100% { color: var(--faint); } }
@keyframes live-ping { 0%, 64% { box-shadow: inset 0 0 0 1px var(--line); } 72% { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 6px var(--accent-soft); } 90%, 100% { box-shadow: inset 0 0 0 1px var(--line); } }

/* Why: four short answers, an icon each, no boxes. */
.problems { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.problems li { display: grid; align-content: start; gap: 8px; }
.problems svg { width: 26px; height: 26px; margin-bottom: 6px; color: var(--accent-strong); }
.problems b { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.problems span { color: var(--muted); font-size: 16px; line-height: 1.55; }

/* Other pages: a centred head, then their sections; a closing way in. */
.page-hero { padding: clamp(64px, 10vw, 120px) 0 0; text-align: center; }
.grid { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; }
.grid li { scroll-margin-top: 76px; }
.grid svg { width: 26px; height: 26px; color: var(--accent-strong); }
.grid h2 { margin: 12px 0 6px; max-width: none; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; text-align: left; }
.grid p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.cta { padding: var(--section) 0 0; text-align: center; }
.back { margin: 36px 0 0; }
.back .pill { display: inline-block; padding: 12px 22px; font-size: 15px; }

/* Start: four numbered steps down one column, each a title, a line and its command. */
.steps { list-style: none; counter-reset: step; max-width: 680px; margin: 72px auto 0; padding: 0; display: grid; gap: 52px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 22px; scroll-margin-top: 76px; }
.steps li > * { grid-column: 2; }
.steps li::before { content: counter(step); grid-column: 1; grid-row: 1 / span 3; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font: 600 17px var(--mono); }
.steps h2 { margin: 7px 0 0; max-width: none; font-size: 24px; letter-spacing: -.02em; text-align: left; }
.steps p { margin: 8px 0 0; color: var(--muted); }
.steps .cmd { justify-self: start; margin: 18px 0 0; font-size: 15px; }

/* The loop: a builder and a verifier side by side, each in its own panel. */
.loop { padding: var(--section) 0 0; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 960px; margin: 48px auto 0; }
.side { padding: 28px 30px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.side h3 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.side h3 svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; color: var(--accent-strong); background: var(--accent-soft); }
.side ol { display: grid; gap: 12px; margin: 20px 0 0; padding-left: 22px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.side li::marker { color: var(--faint); font: 13px var(--mono); }
.side code, .steps code { color: var(--ink); }
.loop .note { margin-top: 36px; text-align: center; font-size: 15px; }

/* Docs: the CLI's help, a section per heading, each command its usage over what it does. */
.toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 36px auto 0; }
.toc a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; text-decoration: none; }
.toc a:hover { color: var(--ink); border-color: var(--line-strong); }
.docs { max-width: 1040px; margin: 72px auto 0; }
.cmds + .cmds { margin-top: 64px; }
.cmds h2 { margin: 0; max-width: none; font-size: 24px; letter-spacing: -.02em; text-align: left; }
.cmds dl { margin: 20px 0 0; display: grid; gap: 10px; }
.cmds dl > div { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 32px; align-items: start; scroll-margin-top: 84px; }
.cmds dt { grid-row: span 9; position: relative; padding: 9px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; }
.cmds dt:has(> b) { background: none; border-color: transparent; padding-left: 0; }
.cmds dd { grid-column: 2; margin: 0; padding-top: 9px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.cmds dd + dd { padding-top: 6px; }
.cmds dd.flag { font-size: 14.5px; }
.cmds dt code { display: block; color: var(--faint); font-size: 14.5px; line-height: 1.7; overflow-wrap: break-word; }
.cmds dt code + code { padding-left: 2ch; }
.cmds dt b { color: var(--ink); font-weight: 700; }
.cmds code .pb { color: var(--muted); }
.cmds code var { font-style: normal; color: var(--accent-strong); }
.cmds code .fl { color: var(--ink); }
.cmds code .str { color: var(--muted); }
.cmds code .p { color: var(--faint); }
.cmds code .fl, .cmds code var, .cmds code b { white-space: nowrap; }
.cmds dd code { color: var(--muted); font-size: 13.5px; }
.cmds dd > .fl { color: var(--ink); font: 13.5px var(--mono); }
.cmds .here { position: absolute; top: 9px; left: -1.6em; padding: 0 .3em; color: var(--faint); font: 14.5px/1.7 var(--mono); text-decoration: none; opacity: 0; }
.cmds dl > div:hover .here, .cmds .here:focus-visible, .cmds dl > div:target .here { opacity: 1; }
.cmds dl > div:target dt { border-color: var(--accent); }
.cmds p { margin: 0 0 8px; color: var(--muted); }

/* How it works: each of the CLI's figures under its heading and a line, at the width it was drawn for. */
.figure { padding: var(--section) 0 0; text-align: center; }
.page-hero + .figure { padding-top: 72px; }
.figure > img { display: block; width: 100%; max-width: 860px; height: auto; margin: 40px auto 0; }
.figure > img[src$='.png'] { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.figure > img.phone { max-width: 360px; }
/* How it works shows its pictures one at a time: radio buttons as tabs, so it needs no script.
   Where :has() can't run, the picker hides and every picture shows, one under another. */
.picker { display: none; }
@supports selector(:has(*)) {
  .picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: 48px auto 0; padding: 0; border: 0; }
  .picker legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .picker input { position: absolute; opacity: 0; pointer-events: none; }
  .picker label { padding: 7px 15px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14.5px; cursor: pointer; }
  .picker label:hover { color: var(--ink); border-color: var(--line-strong); }
  .picker input:checked + label { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
  .pictures > .figure { display: none; padding-top: 40px; }
  .pictures:has(#show-loop:checked) #loop, .pictures:has(#show-start:checked) #start, .pictures:has(#show-life:checked) #life,
  .pictures:has(#show-where:checked) #where, .pictures:has(#show-board:checked) #board, .pictures:has(#show-phone:checked) #phone { display: block; }
}
.pays { padding: var(--section) 0 0; text-align: center; }
.grid:where(.two) { max-width: 860px; margin: 56px auto 0; grid-template-columns: repeat(2, minmax(0, 1fr)); text-align: left; }
.grid h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; }

/* The fit test: each case, its verdict and why, one row each; then work moving across three days. */
.verdicts { list-style: none; max-width: 880px; margin: 72px auto 0; padding: 0; }
.verdicts li { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
.verdicts li:last-child { border-bottom: 1px solid var(--line); }
.verdicts b { justify-self: start; padding: 2px 10px; border-radius: 999px; font: 600 12px/1.6 var(--mono); letter-spacing: .04em; color: var(--muted); background: var(--surface-2); }
.verdicts .board b { color: var(--accent-strong); background: var(--accent-soft); }
.verdicts span { font-weight: 600; }
.verdicts small { color: var(--muted); font-size: 16px; }
.sessions { padding: var(--section) 0 0; }
.days { max-width: 880px; margin: 48px auto 0; }
.days ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.days li { display: grid; gap: 6px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.days small { font: 12px var(--mono); color: var(--faint); }
.days b { font-size: 16px; font-weight: 600; }
.days .chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 12px 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); }
.days .chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.days .claimed::before { border: 1.5px solid var(--accent); background: transparent; }
.days .verified { color: var(--accent-strong); }
.days .verified::before { background: var(--accent-strong); }
.days figcaption { margin-top: 16px; padding: 10px; border-radius: 12px; background: var(--surface-2); text-align: center; font: 12.5px var(--mono); color: var(--muted); }

/* The FAQ: one question and its answer to a row, in one column. */
.faq { max-width: 760px; margin: 72px auto 0; }
.faq section { padding: 24px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.faq section:last-child { border-bottom: 1px solid var(--line); }
.faq h2 { margin: 0; max-width: none; font-size: 20px; font-weight: 650; letter-spacing: -.01em; line-height: 1.35; text-align: left; }
.faq p { margin: 8px 0 0; color: var(--muted); }

/* For agents: short lists a reader goes down in order, a name and a line to a row. */
.ladder { padding: var(--section) 0 0; }
.page-hero + .ladder { padding-top: 72px; }
.ladder ol, .ladder ul { list-style: none; counter-reset: rung; max-width: 820px; margin: 40px auto 0; padding: 0; }
.ladder li { counter-increment: rung; display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 28px; padding: 18px 0; border-top: 1px solid var(--line); }
.ladder li:last-child { border-bottom: 1px solid var(--line); }
.ladder ol b::before { content: counter(rung) "  "; color: var(--faint); font: 13px var(--mono); }
.ladder b { font-weight: 600; }
.ladder b code { font-size: .88em; }
.ladder span { color: var(--muted); }
.refusals li { grid-template-columns: minmax(0, 15em) minmax(0, 13em) minmax(0, 1fr); align-items: baseline; }
.refusals code { justify-self: start; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font-size: 13px; }

/* The footer: the brand and a line, columns of links that reach every page, then the base line. */
.foot { max-width: 1120px; margin: var(--section) auto 0; padding: 72px 24px 40px; border-top: 1px solid var(--line); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.foot .brand { font-size: 21px; }
.foot .about p { margin: 16px 0 0; max-width: 30ch; color: var(--muted); font-size: 16px; line-height: 1.55; }
.foot .install { display: inline-block; margin-top: 22px; padding: 7px 15px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: 13.5px/1.5 var(--mono); -webkit-user-select: all; user-select: all; }
.foot h2 { margin: 6px 0 16px; max-width: none; font: 600 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: var(--faint); }
.foot a:not(.brand) { display: block; padding: 5px 0; color: var(--muted); font-size: 15.5px; text-decoration: none; }
.foot a:not(.brand):hover { color: var(--ink); }
.foot .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); font: 12.5px/1.6 var(--mono); color: var(--faint); }
.foot .base p { margin: 0; }
.foot .base a { display: inline; padding: 0; font: inherit; color: var(--faint); }
.foot .base a:hover { color: var(--ink); }
.foot .built { margin: 18px 0 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--faint); }

@media (max-width: 960px) {
  .problems, .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot .about { grid-column: 1 / -1; }
}
.apart { padding: 72px 0 0; text-align: center; }
.apart .points { margin-top: 0; }
.points { list-style: none; max-width: 980px; margin: 56px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; text-align: left; counter-reset: point; }
.points li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; counter-increment: point; }
.points li::before { content: counter(point); grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent-strong); font: 600 13px/1 var(--mono); }
.points b { font-size: 18px; font-weight: 650; line-height: 1.4; }
.points span { color: var(--muted); font-size: 16px; line-height: 1.55; }
.points a { color: var(--accent-strong); white-space: nowrap; }
.chain { max-width: 840px; margin: 56px auto 0; scroll-margin-top: 84px; }
.chain img { display: block; width: 100%; height: auto; }
.chain figcaption { margin-top: 12px; color: var(--muted); font-size: 15px; }
.apart .more { margin: 32px 0 0; }
.apart .more a { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .projects, .problems, .grid, .pair, .days ol { grid-template-columns: minmax(0, 1fr); }
  .verdicts li, .ladder li, .refusals li { grid-template-columns: minmax(0, 1fr); }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project + .project { border-left: 0; border-top: 1px solid var(--line); }
  .links { display: none; }
  .top { padding: 8px 10px 0; }
  .top .bar { grid-template-columns: 1fr auto; }
  main, .foot { padding-left: 20px; padding-right: 20px; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 16px; }
  .steps li::before { width: 36px; height: 36px; font-size: 15px; }
  .steps h2 { margin-top: 3px; font-size: 21px; }
  .points { grid-template-columns: minmax(0, 1fr); }
  .cmds dl > div { grid-template-columns: minmax(0, 1fr); }
  .cmds dt { grid-row: auto; }
  .cmds dd:first-of-type { padding-top: 8px; }
  .cmds dl > div + div { margin-top: 10px; }
  .cmds dd { grid-column: 1; }
  .cmds .here { display: none; }
}