:root{
  color-scheme:light;

  --paper:#f2efe7; --paper-2:#dfe2db; --white:#fbfaf6;
  --ink:#14202a; --ink-2:#4f5b63;
  --muted:#667078; --muted-2:#586168; --muted-3:#8b9398;
  --line:#cfd1ca; --line-2:#afb5af; --line-3:#c3c6c1;
  --block-shadow:#cad0c8;
  --signal:#dc4a20; --signal-wash:rgba(220,74,32,.07); --hover-wash:rgba(20,32,42,.05);
  --band:#111a22; --on-band:#aab1b6; --on-band-faint:#7f8991; --on-band-strong:#fbfaf6;
  --mark-filter:none;

  /* The terminal is dark in both themes. It is the one place where the product's own output is
     shown, and a second syntax palette would be a second thing to keep true. */
  --term-bg:#0b1116; --term-fg:#dce3e8; --term-line:#2a343c; --term-line-2:#273039;
  --term-dot:#5b646b; --term-label:#7d8991;
  --term-prompt:#f17650; --term-key:#9fc4d9; --term-str:#e8c487;

  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* The scale. Mono has two steps and marks labels and data; sans has four and carries prose.
     Every size in this sheet is one of these, so a block never mixes two neighbouring grades. */
  --t-label:11px;   /* mono, uppercase: overlines, captions, column heads, the footer */
  --t-data:13px;    /* mono: numbers, code, terminal, the ranked lists */
  --t-ui:14px;      /* sans: navigation, buttons, rows inside cards */
  --t-body:17px;    /* sans: running text */
  --t-lead:20px;    /* sans: the paragraph under a heading, h3, the wordmark */
  --t-mid:32px;     /* sans: the question and the smaller headings */
  --w-normal:400; --w-medium:600; --w-display:750;
}

/* Dark. Paper becomes ink and ink becomes paper; the signal stays the signal, one step brighter so
   it holds on a dark ground. The system preference decides, `data-theme` on <html> overrides it. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#11181d; --paper-2:#0c1216; --white:#161e24;
  --ink:#e9e6de; --ink-2:#97a2aa;
  --muted:#98a3ab; --muted-2:#8d979f; --muted-3:#78838b;
  --line:#2b353c; --line-2:#333d44; --line-3:#3a444b;
  --block-shadow:#080d10;
  --signal:#ff6a3d; --signal-wash:rgba(255,106,61,.10); --hover-wash:rgba(233,230,222,.06);
  --band:#080d11; --on-band:#9aa4ac; --on-band-faint:#78838b; --on-band-strong:#e9e6de;
  --mark-filter:invert(1);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#11181d; --paper-2:#0c1216; --white:#161e24;
  --ink:#e9e6de; --ink-2:#97a2aa;
  --muted:#98a3ab; --muted-2:#8d979f; --muted-3:#78838b;
  --line:#2b353c; --line-2:#333d44; --line-3:#3a444b;
  --block-shadow:#080d10;
  --signal:#ff6a3d; --signal-wash:rgba(255,106,61,.10); --hover-wash:rgba(233,230,222,.06);
  --band:#080d11; --on-band:#9aa4ac; --on-band-faint:#78838b; --on-band-strong:#e9e6de;
  --mark-filter:invert(1);
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.shell{width:min(1180px,calc(100% - 48px));margin:0 auto}
.site-header{height:82px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:var(--w-display);letter-spacing:-.03em;font-size:var(--t-lead)}.brand-mark{width:26px;height:26px;filter:var(--mark-filter)}.site-header nav{margin-left:auto;display:flex;gap:28px;font-size:var(--t-ui);color:var(--muted)}.site-header nav a:hover,.site-header nav a[aria-current]{color:var(--ink)}
/* A link in the navigation that leaves this site says so. The arrow is drawn rather than
   fetched, and it is marked as decoration so a reader who is listening hears the label and
   not the character. The rule reads the attribute, so a link is marked by the one thing that
   makes it external in the first place. */
.site-header nav a[target="_blank"]::after{content:"\2197" / "";font-size:.78em;margin-left:4px;vertical-align:.08em;color:var(--muted);transition:color .1s}
.site-header nav a[target="_blank"]:hover::after{color:var(--signal)}
.hero{padding:96px 0 84px}.eyebrow,.overline,.route-label,.answer-kicker{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
h1{font-size:clamp(52px,7vw,104px);line-height:.94;letter-spacing:-.065em;max-width:1020px;margin:18px 0 30px;font-weight:var(--w-display)}h1 span{font-weight:var(--w-normal);color:var(--ink-2)}.intro,.prose .intro{max-width:760px;font-size:var(--t-lead);line-height:1.48;color:var(--muted);margin:0}.hero-actions{display:flex;gap:12px;margin-top:34px}.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border:1px solid var(--ink);font-size:var(--t-ui)}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:var(--signal);border-color:var(--signal)}.secondary:hover{background:var(--hover-wash)}
.route-stage{margin-top:88px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);position:relative}
.route-question{padding:34px 0 26px}.route-question .route-setup{font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted);line-height:1.7;max-width:820px;margin:20px 0 0}.route-question p{font-size:var(--t-mid);letter-spacing:-.03em;margin:9px 0 0}.route-question code,.route-answer code{font-family:var(--mono);font-size:.84em;background:none}.river-wrap{height:360px;position:relative;overflow:hidden}.river{position:absolute;inset:0;width:100%;height:100%}.river-base,.river-live{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}.river-base{stroke:var(--line-3)}.river-live{stroke:var(--signal);stroke-dasharray:1500;stroke-dashoffset:1500;animation:drawRiver 3.6s cubic-bezier(.65,0,.25,1) .2s forwards}@keyframes drawRiver{to{stroke-dashoffset:0}}
.node{position:absolute;background:var(--paper);border:1px solid var(--ink);padding:12px 14px;min-width:180px;opacity:0;transform:translateY(12px);animation:nodeIn .5s ease forwards}.node small,.node em{display:block;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.node b{display:block;font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:var(--w-medium);font-style:normal;margin:6px 0 9px}.node em{color:var(--signal);font-style:normal}.n1{left:5%;top:132px;animation-delay:.65s}.n2{left:28%;top:34px;animation-delay:1.35s}.n3{left:50%;top:194px;animation-delay:2.05s}.n4{left:70%;top:52px;animation-delay:2.55s}.n5{right:2%;top:180px;animation-delay:3.05s}@keyframes nodeIn{to{opacity:1;transform:none}}
/* Neither figure runs off screen. The fan-in draws itself on load, above the fold, but its dots
   repeat, so they stop when it scrolls away; the river plays once and waits until it is reached.
   `app.js` marks both with `in-view`. The `.js` class comes from the inline script in the head, so a
   page without JavaScript pauses nothing and plays both on load, as it did before. */
.js .route-stage .river-live,.js .route-stage .node{animation-play-state:paused}
.js .route-stage.in-view .river-live,.js .route-stage.in-view .node{animation-play-state:running}
.js #fanin:not(.in-view) .pulse{animation-play-state:paused}
.route-answer{display:grid;grid-template-columns:1fr 2fr;gap:40px;border-top:1px solid var(--line);padding:34px 0 38px}.route-answer h2{font-size:var(--t-mid);letter-spacing:-.035em;margin:7px 0 18px}.answer-grid{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.answer-grid span{padding:14px 12px;border-right:1px solid var(--line);font-weight:var(--w-medium)}.answer-grid span:last-child{border-right:0}.answer-grid small{display:block;color:var(--muted);font-weight:400;margin-top:5px}
.statement{background:var(--band);color:var(--on-band-strong);padding:110px 0}.statement-grid{display:grid;grid-template-columns:160px 1fr;gap:30px}.statement-label{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;letter-spacing:.12em;color:var(--on-band-faint)}.statement h2,.comparison h2,.scope-section h2,.developer h2,.final-cta h2{font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 26px}.statement p:last-child{max-width:760px;color:var(--on-band);font-size:var(--t-lead);line-height:1.55}
.comparison{padding:118px 0}.comparison-head{display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start}.comparison-head .overline{padding-top:12px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:54px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.comparison-grid article{padding:0 28px 28px}.comparison-grid article+article{border-left:1px solid var(--ink)}.comparison-grid header{height:58px;display:flex;align-items:center;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em}.rank-list{list-style:none;padding:0;margin:0}.rank-list li{display:grid;grid-template-columns:52px 1fr auto;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:normal;font-style:normal;align-items:center}.rank-list li span{color:var(--muted)}.rank-list li em{font-style:normal;color:var(--muted);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.06em}.muted-list li{color:var(--muted-3)}.missed{padding:20px 0;font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted)}.missed strong{color:var(--signal)}.signal{background:var(--signal-wash);padding-left:10px!important;padding-right:10px!important}.signal em{color:var(--signal)!important}.caption{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted);margin:22px 0 0}
.comparison+.comparison{padding-top:70px}
.rules{display:grid;grid-template-columns:1fr 2fr;gap:30px;align-items:start;margin-top:54px}
.rules .overline{padding-top:12px}
.rule-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.rule-list li{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:baseline;
  padding:14px 2px;border-bottom:1px solid var(--line)}
.rule-list code{font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:var(--w-medium);font-style:normal;color:var(--signal)}
.rule-list span{color:var(--muted);font-size:var(--t-ui)}
.scope-section{padding:110px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.body-copy{font-size:var(--t-body);line-height:1.6;color:var(--muted);max-width:590px}.scope-card{border:1px solid var(--ink);background:var(--white)}.scope-title{display:flex;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:normal;font-style:normal}.scope-title span{color:var(--muted)}.scope-card ul{list-style:none;margin:0;padding:0}.scope-card li{display:grid;grid-template-columns:18px 1fr auto;padding:15px 18px;border-bottom:1px solid var(--line);font-size:var(--t-ui)}.scope-card li b{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-style:normal;font-weight:400;text-transform:uppercase;color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--signal);margin-top:5px}.scope-card footer{padding:14px 18px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted)}
.developer{padding:118px 0;display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.developer-copy>p:not(.overline){font-size:var(--t-body);line-height:1.55;color:var(--muted)}.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.facts span{border:1px solid var(--line);padding:8px 10px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.05em}.terminal{background:var(--term-bg);color:var(--term-fg);border:1px solid var(--term-line);box-shadow:14px 14px 0 var(--block-shadow)}.term-head{height:42px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--term-line-2)}.term-head span{width:8px;height:8px;border-radius:50%;background:var(--term-dot)}.term-head b{margin-left:8px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-style:normal;font-weight:400;color:var(--term-label)}.terminal pre{margin:0;padding:24px;overflow:auto;font-family:var(--mono);font-size:var(--t-data);line-height:1.75;font-weight:normal;font-style:normal}.prompt{color:var(--term-prompt)}.cmt{color:var(--term-label)}.key{color:var(--term-key)}.str{color:var(--term-str)}
.principles{background:var(--paper-2);padding:100px 0}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);margin-top:28px}.principle-grid article{padding:22px 18px 0 0;border-right:1px solid var(--line-2);min-height:190px}.principle-grid article+article{padding-left:18px}.principle-grid article:last-child{border-right:0}.principle-grid span{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--signal)}.principle-grid h3{font-size:var(--t-lead);letter-spacing:-.025em;margin:18px 0 10px}.principle-grid p{color:var(--muted-2);line-height:1.5;font-size:var(--t-ui)}
.final-cta{text-align:center;padding:130px 0 120px}.cta-mark{width:62px;filter:var(--mark-filter);margin-bottom:18px}.final-cta h2{max-width:900px;margin:18px auto 0}.center{justify-content:center}.site-footer{height:90px;border-top:1px solid var(--line);display:flex;align-items:center;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted)}.site-footer div{margin-left:auto;display:flex;gap:22px}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto!important}.river-live,.node{animation:none!important;opacity:1;transform:none}.river-live{stroke-dashoffset:0}}
@media(max-width:900px){.site-header{height:auto;min-height:82px;padding-block:12px}.site-header nav{gap:18px}.hero{padding-top:64px}.river-wrap{height:520px}.n1{left:2%;top:80px}.n2{left:47%;top:30px}.n3{left:10%;top:250px}.n4{left:52%;top:210px}.n5{left:28%;top:390px;right:auto}.route-answer{grid-template-columns:1fr}.answer-grid{grid-column:1;grid-template-columns:1fr}.answer-grid span{border-right:0;border-bottom:1px solid var(--line)}.statement-grid,.comparison-head,.rules,.scope-grid,.developer{grid-template-columns:1fr}.statement-grid{gap:14px}.comparison-grid{grid-template-columns:1fr}.comparison-grid article+article{border-left:0;border-top:1px solid var(--ink)}.principle-grid{grid-template-columns:1fr 1fr}.principle-grid article:nth-child(2){border-right:0}.principle-grid article:nth-child(n+3){border-top:1px solid var(--line-2)}.developer{gap:40px}}
@media(max-width:620px){.shell{width:min(100% - 28px,1180px)}.site-header{height:auto;min-height:70px;padding-block:10px}.site-header nav{gap:14px;flex-wrap:wrap;justify-content:flex-end}.site-header nav a{font-size:12px}.brand{font-size:var(--t-ui)}.brand-mark{width:22px;height:22px}.hero{padding:52px 0 62px}h1{font-size:50px}.intro,.prose .intro{font-size:var(--t-lead)}.hero-actions{flex-direction:column}.route-stage{margin-top:58px}.route-question p{font-size:var(--t-lead)}.river-wrap{height:620px}.river{display:none}.node{left:0!important;right:auto!important;width:100%;min-width:0}.n1{top:20px}.n2{top:130px}.n3{top:240px}.n4{top:350px}.n5{top:460px}.statement,.comparison,.scope-section,.developer{padding:78px 0}.statement h2,.comparison h2,.scope-section h2,.developer h2,.final-cta h2{font-size:40px}.comparison-grid article{padding-left:0;padding-right:0}.rank-list li{grid-template-columns:42px 1fr}.rule-list li{grid-template-columns:1fr;gap:4px}.rank-list li em{display:none}.scope-grid{gap:40px}.terminal{box-shadow:8px 8px 0 var(--block-shadow);min-width:0}.terminal pre{padding:16px;font-size:11.5px;white-space:pre-wrap;overflow-wrap:anywhere}.principle-grid{grid-template-columns:1fr}.principle-grid article,.principle-grid article+article{border-right:0;border-top:1px solid var(--line-2);padding-left:0}.principle-grid article:first-child{border-top:0}.final-cta{padding:88px 0}.site-footer{height:auto;padding:26px 0;align-items:flex-start}.site-footer div{display:grid;gap:9px}}

/* ── rendered documents: docs/, spec/, and the two legal pages ───────────────────────── */
.page{padding:62px 0 30px}
.prose{max-width:760px;min-width:0}
.prose h1{font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.05em;margin:0 0 22px;font-weight:var(--w-display)}
.prose h2{font-size:var(--t-mid);letter-spacing:-.035em;margin:52px 0 14px}
.prose h3{font-size:var(--t-lead);margin:34px 0 10px}
.prose h4{font-size:var(--t-body);margin:26px 0 8px;color:var(--muted)}
.prose p,.prose li{font-size:var(--t-body);line-height:1.6}
.prose p{margin:0 0 18px}
.prose a{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 18px}
.prose li{margin:6px 0}
.prose li>ul,.prose li>ol{margin:6px 0}
.prose code{font-family:var(--mono);font-size:.86em}
.prose pre{background:var(--term-bg);color:var(--term-fg);border:1px solid var(--term-line);
  padding:20px;overflow:auto;margin:0 0 20px;font-family:var(--mono);font-size:var(--t-data);line-height:1.75;font-weight:normal;font-style:normal}
.prose pre code{font-size:inherit;color:inherit}
/* Tabs over one code block, from `--- Label` lines. Radios and :checked, because the site's one
   runtime is the theme switch and a second one is not worth a widget. The inputs stay focusable, so
   the panels are reachable from the keyboard the way any radio group is. */
.prose .tabs{margin:0 0 20px}
.prose .tabs>input{position:absolute;width:1px;height:1px;opacity:0}
.prose .tablist{display:flex;border:1px solid var(--term-line);border-bottom:0;background:var(--term-bg)}
.prose .tablist label{padding:9px 16px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);cursor:pointer;border-right:1px solid var(--term-line)}
.prose .tablist label:last-child{border-right:0}
.prose .tabs .panel{display:none}
.prose .tabs .panel pre{margin:0}
.prose .tabs>input:nth-of-type(1):checked~.panels>.panel:nth-child(1),.prose .tabs>input:nth-of-type(2):checked~.panels>.panel:nth-child(2),.prose .tabs>input:nth-of-type(3):checked~.panels>.panel:nth-child(3){display:block}
.prose .tabs>input:nth-of-type(1):checked~.tablist>label:nth-child(1),.prose .tabs>input:nth-of-type(2):checked~.tablist>label:nth-child(2),.prose .tabs>input:nth-of-type(3):checked~.tablist>label:nth-child(3){color:var(--term-fg);background:var(--term-line)}
.prose .tabs>input:nth-of-type(1):focus-visible~.tablist>label:nth-child(1),.prose .tabs>input:nth-of-type(2):focus-visible~.tablist>label:nth-child(2),.prose .tabs>input:nth-of-type(3):focus-visible~.tablist>label:nth-child(3){outline:2px solid var(--signal);outline-offset:-2px}
.prose blockquote{margin:20px 0;padding-left:16px;border-left:2px solid var(--signal)}
.prose hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:var(--t-ui)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.prose thead th{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);border-bottom:1px solid var(--ink)}
.prose img{max-width:100%}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  border-top:1px solid var(--ink);margin:36px 0 0}
.doc-card{display:block;padding:22px 20px 26px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.prose .doc-card{color:var(--ink);text-decoration:none}
.doc-card:hover{background:var(--hover-wash)}
.doc-card:hover .doc-title{color:var(--signal)}
.doc-title{display:block;font-weight:var(--w-medium);font-size:var(--t-lead);letter-spacing:-.025em;margin-bottom:8px}
.doc-blurb{display:block;color:var(--muted);font-size:var(--t-ui);line-height:1.5}
/* Where the reader goes after this page. Set apart from the prose because it is not another thing
   on the page — the sidebar says where you are, this says what follows. */
.next{margin:52px 0 0;padding:22px 0 0;border-top:1px solid var(--ink)}
.next p{margin:0;color:var(--ink-2)}
.next-label,.prose .next-label{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-3);margin:0 0 8px!important}
/* The guide. One list on every page of a set, with the page you are on marked — without it each
   page is a loose sheet that gives no sign of what it is part of or what comes next. */
.docs-layout{padding:62px 0 30px;display:grid;grid-template-columns:232px minmax(0,1fr);gap:56px;align-items:start}
.docs-side{position:sticky;top:26px;font-size:var(--t-ui);border-right:1px solid var(--line);padding-right:22px;min-width:0}
.docs-side ul{list-style:none;margin:0 0 22px;padding:0}
.docs-side li{margin:0 0 7px;line-height:1.35}
.docs-side a{color:var(--muted-2);text-decoration:none;border-bottom:1px solid transparent}
.docs-side a:hover{color:var(--signal)}
.docs-side .here span{color:var(--ink);font-weight:var(--w-medium);
  box-shadow:-11px 0 0 0 var(--signal);background:var(--signal-wash);display:block;margin-left:-11px;padding-left:11px}
.side-heading{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-3);margin:0 0 9px}
.side-index{display:block;margin:0 0 26px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em}
.side-index.here{color:var(--ink);font-weight:var(--w-medium)}
.doc-group{margin:48px 0 4px;font-size:26px;letter-spacing:-.02em}
.doc-lead,.prose .doc-lead{color:var(--muted);font-size:var(--t-ui);margin:0}
.doc-group+.doc-lead+.doc-grid{margin-top:20px}
@media(max-width:900px){.docs-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .docs-side{position:static;border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px;margin:0 0 34px;
    columns:2;column-gap:32px}
  .docs-side ul{break-inside:avoid}}
.src-note,.prose .src-note{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 0 22px}
.theme-toggle{border:1px solid var(--line);background:none;color:var(--muted);cursor:pointer;
  padding:7px 11px;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}
.site-footer .theme-toggle{margin-left:22px}
@media(max-width:620px){.page{padding:40px 0 20px}.prose h2{font-size:26px;margin-top:40px}
  .doc-grid{grid-template-columns:1fr}.doc-card{border-right:0}}

/* ── where it comes from, and what leaves ────────────────────────────────── */
.fanin{margin-top:66px}
/* A case page is one figure and prose, so the figure sits in the column rather than across the page,
   and the drawing is the front page's — same classes, same stagger, same reduced-motion fallback. */
.case-fan{margin:30px 0 4px}
/* `.prose p` sets the reading size and, with two parts, outranks any single class however late it
   comes. So every paragraph in prose that is not reading text carries a second selector from inside
   `.prose`: one declaration block, two ways in. Without it the paragraph silently renders at body
   size and no amount of changing the number in the class helps.

   Who com is. Not uppercased like `.src-note`, because it is a sentence somebody has to read
   rather than a provenance line they glance at — and below the smallest step of the scale, on a
   measure of its own, because it is apparatus: it has to be there and it is not the page.
   Selected inside `.prose`, because `.prose p` sets a size of its own and outranks a single class
   however late it comes. A one-class rule here was ignored for three deploys and the paragraph kept
   rendering at body size, which is the one size it must not be. */
.prose .made-up{font-family:var(--mono);font-size:9px;line-height:1.45;color:var(--muted);max-width:520px;
  margin:30px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.fan{display:block;width:100%;height:auto;--t0:3.2s}
.fan .frame{fill:none;stroke:var(--line-2);stroke-dasharray:5 6}
.fan .wire,.fan .trunk,.fan .bus,.fan .core,.fan .caller{fill:none;stroke:var(--line-2)}
.fan .core{stroke:var(--ink)}
.fan .frame-label,.fan .sub,.fan .core-sub,.fan .lane-label,.fan .caller-sub{
  font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;fill:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.fan .src,.fan .caller-name{font-family:var(--sans);font-size:15px;line-height:normal;font-weight:var(--w-medium);font-style:normal;fill:var(--ink)}
.fan .group{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;fill:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.fan .group.pub{fill:var(--signal)}
.fan .frame-label{text-anchor:end}
.fan .core-name,.fan .core-sub,.fan .lane-label,.fan .caller-name,.fan .caller-sub{text-anchor:middle}
.fan .core-brand{font-family:var(--mono);font-size:17px;line-height:normal;font-weight:var(--w-display);font-style:normal;fill:var(--ink);letter-spacing:.2em}
.fan .core-mark{filter:var(--mark-filter)}
.fan .lane,.fan .stub,.fan .bus-r{fill:none;stroke:var(--signal);stroke-width:1.5}
.fan .head{fill:var(--signal)}
/* Three roles, three weights. The sources and the trunks stay quiet lines, a scope is a solid
   block, and everything the caller touches carries the signal. Last in the block, because these
   override the shared text rules above. */
.fan .core{fill:var(--ink)}
.fan .core-name{font-family:var(--mono);font-size:13px;line-height:normal;font-weight:var(--w-display);font-style:normal;fill:var(--paper);letter-spacing:.08em}
.fan .core-sub{fill:var(--paper);opacity:.6}
/* Last of the fills. `pub` says which colour a label is, and it has to win over the ones above that
   say which colour a *place* paints its text — a label marked `pub` outside a solid block came out
   paper-white on paper. */
.fan .pub{fill:var(--signal)}
.fan .caller{stroke:var(--signal)}
.fan .caller-name{fill:var(--signal)}
/* The dot that runs a line is a second path over it, hidden here. A path carries one stroke and the
   line is already using it, so the moving dash needs its own — and a path with no stroke rule at all
   renders as a filled shape, which is what this rule is preventing where motion is not wanted. */
.fan .pulse{display:none}
.fan-list,.fan-note,.fan-flow{display:none}
/* The order the picture is read in: the boundary, then what is inside it, then what leaves. A group
   carries the delay and the paths in it inherit it, so one number moves a whole line of the figure.
   The scope boxes have text with a deliberate opacity of its own and are faded by `.core-g`, which
   leaves that value alone.

   All of it is behind `no-preference`: a reader who asked for less motion gets the finished drawing
   and no rule here applies to it. */
@media (prefers-reduced-motion: no-preference){
  .fan .frame-g,.fan .brand-g,.fan .group,.fan .row,.fan .trunks,.fan .core-g,.fan .stubs,
  .fan .head,.fan .lane-label,.fan .caller-g{
    opacity:0;animation:fanIn .5s ease var(--d,0s) forwards}
  .fan .wire,.fan .bus,.fan .trunk,.fan .stub,.fan .lane{stroke-dasharray:1;stroke-dashoffset:1;
    animation:fanDraw .6s ease var(--d,0s) forwards}
  .fan .frame-g{--d:.1s}
  .fan .brand-g{--d:.22s}
  .fan .group{--d:.3s}
  .fan .r1{--d:.42s;--p:2.25s}.fan .r2{--d:.54s;--p:2.39s}
  .fan .r3{--d:.66s;--p:2.53s}.fan .r4{--d:.78s;--p:2.67s}
  .fan .group.pub{--d:.92s}
  .fan .r5{--d:1.04s;--p:2.81s}.fan .r6{--d:1.16s;--p:2.95s}
  .fan .r7{--d:1.28s;--p:3.09s}
  .fan .bus-l{--d:1.42s}
  .fan .trunks{--d:1.56s}
  .fan .core-g{--d:1.72s}
  .fan .stubs{--d:1.88s}
  .fan .bus-r{--d:2s}
  .fan .lane{--d:2.15s}
  .fan .head,.fan .lane-label,.fan .caller-g{--d:2.6s}

  /* Then one pass per scope, sixteen seconds for the two. A pass is a query arriving from the
     caller, the corpora that scope holds firing in turn, and the answer going back — and the two
     lanes either side of the caller are the same path, the same duration and the same label both
     times. What differs is which of the seven light up between them.

     Pass A starts the loop, pass B starts at half of it, which is what the `2` keyframes are: the
     same burst at 0% and at 50%, for the two lanes and for the three corpora both scopes hold.
     `--t0` holds the whole thing back until the drawing above has finished. The travel times are
     picked so a dot moves at about the same speed on every line, which is why a lane, at three
     times the length of a wire, is not three times as fast.

     `stroke-dasharray:.001 .999` against `pathLength="1"` is a single dash of almost no length,
     which a round cap draws as a dot; the offset running 1 to 0 walks it from the start of the path
     to its end, and 0 to 1 walks it back. Every line is drawn in the direction its data moves, so
     only the request into a scope runs backwards. */
  .fan .pulse{display:inline;fill:none;stroke:var(--signal);stroke-width:5;stroke-linecap:round;
    stroke-dasharray:.001 .999;
    animation:fanRun 16s linear calc(var(--t0) + var(--p,0s)) infinite backwards}
  .fan .p2{animation-name:fanRun2}
  .fan .p-req,.fan .p-res{animation-name:fanLane2}
  .fan .p-trunk-a,.fan .p-trunk-b,.fan .p-stub-a-out,.fan .p-stub-b-out{animation-name:fanHop}
  .fan .p-stub-a-in,.fan .p-stub-b-in{animation-name:fanHopBack}
  .fan .p-req{--p:0s}
  .fan .p-stub-a-in{--p:1.55s}
  .fan .p-trunk-a{--p:4.05s}
  .fan .p-stub-a-out{--p:4.55s}
  .fan .p-res{--p:5.05s}
  .fan .p-stub-b-in{--p:9.55s}
  .fan .p-trunk-b{--p:12.05s}
  .fan .p-stub-b-out{--p:12.55s}
  @keyframes fanRun{0%{stroke-dashoffset:1;opacity:0}1.5%{opacity:1}
    6%{stroke-dashoffset:0;opacity:1}7.5%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes fanRun2{0%{stroke-dashoffset:1;opacity:0}1.5%{opacity:1}
    6%{stroke-dashoffset:0;opacity:1}7.5%{stroke-dashoffset:0;opacity:0}
    49.9%,50%{stroke-dashoffset:1;opacity:0}51.5%{opacity:1}
    56%{stroke-dashoffset:0;opacity:1}57.5%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes fanLane2{0%{stroke-dashoffset:1;opacity:0}2%{opacity:1}
    10%{stroke-dashoffset:0;opacity:1}11.5%{stroke-dashoffset:0;opacity:0}
    49.9%,50%{stroke-dashoffset:1;opacity:0}52%{opacity:1}
    60%{stroke-dashoffset:0;opacity:1}61.5%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes fanHop{0%{stroke-dashoffset:1;opacity:0}1%{opacity:1}
    3.4%{stroke-dashoffset:0;opacity:1}4.6%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes fanHopBack{0%{stroke-dashoffset:0;opacity:0}1%{opacity:1}
    3.4%{stroke-dashoffset:1;opacity:1}4.6%,100%{stroke-dashoffset:1;opacity:0}}
  @keyframes fanIn{to{opacity:1}}
  @keyframes fanDraw{to{stroke-dashoffset:0}}
}
.answer-rows{list-style:none;grid-column:2;margin:24px 0 0;padding:0;border-top:1px solid var(--line)}
.answer-rows li{display:grid;grid-template-columns:26px 1fr auto auto;gap:16px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--t-data);line-height:normal;font-weight:normal;font-style:normal}
.answer-rows li>span{color:var(--muted)}
.answer-rows code{font-size:inherit}
.answer-rows em{font-style:normal;color:var(--signal);font-size:var(--t-label);
  text-transform:uppercase;letter-spacing:.08em}
.answer-rows small{color:var(--muted);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em}
.route-answer .caption{grid-column:2;margin-top:16px}
@media(max-width:620px){
  .fan{display:none}
  .fan-list{display:block;list-style:none;margin:0;padding:0}
  .fan-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:12px 0;
    border-bottom:1px solid var(--line);font-size:var(--t-ui)}
  .fan-list li > *{min-width:0;overflow-wrap:anywhere}
  .prose table{display:block;max-width:100%;overflow-x:auto}
  .prose pre{max-width:100%}
  .prose code{overflow-wrap:anywhere}
  .fan-list span{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
  .fan-list .pub{color:var(--signal)}
  .fan-list .head{border-bottom:1px solid var(--ink);padding-top:18px}
  .fan-list .head b{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  .fan-list li:first-child{padding-top:0}
  .fan-flow{display:block;margin-top:26px}
  .fan-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px}
  .fan-brand img{width:26px;height:26px;filter:var(--mark-filter)}
  .fan-brand b{font-family:var(--mono);font-size:15px;line-height:normal;font-weight:var(--w-display);font-style:normal;letter-spacing:.2em}
  .fan-scopes{display:grid;gap:10px}
  .fan-core,.fan-caller{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 14px;text-align:center}
  .fan-core{background:var(--ink)}
  .fan-core b{font-family:var(--mono);font-size:13px;line-height:normal;font-weight:var(--w-display);font-style:normal;letter-spacing:.08em;color:var(--paper)}
  .fan-core span{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--paper);opacity:.6}
  .fan-arrow{display:block;width:1.5px;height:30px;margin:0 auto;background:var(--signal);position:relative}
  .fan-arrow::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
    border:7px solid transparent;border-bottom:0;border-top:9px solid var(--signal)}
  .fan-caller{border:1px solid var(--signal)}
  .fan-caller b{font-family:var(--sans);font-size:var(--t-ui);line-height:normal;font-weight:var(--w-medium);font-style:normal;color:var(--signal)}
  .fan-caller span{font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  .fan-note,.prose .fan-note{display:block;font-family:var(--mono);font-size:var(--t-label);line-height:normal;font-weight:normal;font-style:normal;color:var(--muted);margin:14px 0 0;line-height:1.6}
  .answer-rows{grid-column:1}
  .answer-rows li{grid-template-columns:22px 1fr;gap:8px}
  .answer-rows em,.answer-rows small{grid-column:2}
  .route-answer .caption{grid-column:1}
}


/* The front page, from the top: what it is and the picture of it, then how, then why. */
a:focus-visible,button:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-top:80px}
.hero-title{font-size:clamp(40px,4.6vw,66px);line-height:1;letter-spacing:-.055em;margin:18px 0 26px}
.hero-title span{display:block}
.hero-copy .intro{font-size:var(--t-body);line-height:1.6;max-width:600px}

/* Several sources, one thing: drawn with borders, so it is text all the way down. */
.thing-figure{margin:0;min-width:0}
.tf-grid{display:grid;grid-template-columns:88px 132px minmax(0,1fr);align-items:stretch}
.tf-sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tf-sources li{flex:1;display:flex;align-items:center;justify-content:flex-end;padding-right:12px;font-family:var(--mono);font-size:var(--t-data);font-weight:var(--w-medium)}
.tf-join{position:relative}
.tf-join::before{content:"";position:absolute;left:0;width:50%;top:16.66%;bottom:16.66%;border:1px solid var(--ink);border-left:0}
.tf-mid{position:absolute;left:0;right:6px;top:50%;border-top:1px solid var(--ink)}
.tf-mid::after{content:"";position:absolute;right:-6px;top:-5px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}
.tf-join small{position:absolute;left:calc(50% + 8px);right:12px;bottom:calc(50% + 7px);font-family:var(--mono);font-size:10px;line-height:1.3;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tf-thing{border:1px solid var(--ink);background:var(--white);box-shadow:10px 10px 0 var(--block-shadow)}
.tf-id{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--t-data)}
.tf-id span{color:var(--muted);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em}
.tf-thing dl{margin:0}
.tf-row{padding:12px 16px;border-bottom:1px solid var(--line)}
.tf-row dt{font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tf-row dt em{font-style:normal;color:var(--signal)}
.tf-row dd{margin:2px 0;font-size:var(--t-ui);font-weight:var(--w-medium)}
.tf-row dd b{display:inline-block;min-width:68px;font-family:var(--mono);font-size:var(--t-label);font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tf-row s{color:var(--muted);font-weight:400}
.tf-conflict{background:var(--signal-wash);box-shadow:inset 3px 0 0 var(--signal)}
.tf-foot{margin:0;padding:11px 16px;font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.thing-figure figcaption{margin-top:26px}

/* Three steps, and the four reasons: the principle grid, each with a line of what it looks like. */
.principle-grid.three{grid-template-columns:repeat(3,1fr)}
.principle-grid .mini{margin:16px 0 22px;padding:10px 12px;border-left:2px solid var(--signal);background:var(--white);font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.why-grid{margin-top:48px}
.comparison-head .body-copy{margin:0}
.depths-lede{font-size:var(--t-lead);line-height:1.45;color:var(--muted-2);max-width:760px;margin:14px 0 0}

/* The same pattern for other topics, on the dark band. */
.statement .pattern{max-width:760px;color:var(--on-band);font-size:var(--t-lead);line-height:1.55}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid var(--on-band-faint)}
.topic-grid article{padding:20px 18px 6px 0;border-right:1px solid var(--line-2)}
.topic-grid article+article{padding-left:18px}
.topic-grid article:last-child{border-right:0}
.topic-grid h3{font-size:var(--t-body);margin:0 0 8px;color:var(--on-band-strong)}
.statement .topic-grid p{font-size:var(--t-ui);line-height:1.5;color:var(--on-band);margin:0 0 12px}
.topic-grid code{font-family:var(--mono);font-size:var(--t-label);color:var(--term-str);letter-spacing:.04em}
.topic-grid a{text-decoration:underline;text-underline-offset:3px}

@media(max-width:1100px){.hero-split{grid-template-columns:1fr;gap:56px}.thing-figure{max-width:640px}}
@media(max-width:900px){.principle-grid.three{grid-template-columns:1fr}.principle-grid.three article{border-right:0;border-top:1px solid var(--line-2);padding-left:0}.principle-grid.three article:first-child{border-top:0}.topic-grid{grid-template-columns:1fr 1fr}.topic-grid article{border-right:0;padding-left:0!important;border-bottom:1px solid var(--line-2)}}
/* On a phone the sources sit above the thing, and the bracket becomes a line down to it. */
@media(max-width:620px){
  .hero-split{padding-top:44px}
  .hero-title{font-size:38px}
  .tf-grid{grid-template-columns:1fr}
  .tf-sources{flex-direction:row;flex-wrap:wrap;gap:8px}
  .tf-sources li{flex:0 0 auto;justify-content:flex-start;padding:6px 10px;border:1px solid var(--ink);background:var(--white)}
  .tf-join{height:44px}
  .tf-join::before{display:none}
  .tf-mid{left:24px;right:auto;top:0;bottom:6px;border-top:0;border-left:1px solid var(--ink)}
  .tf-mid::after{right:auto;left:-6px;top:auto;bottom:-6px;border:5px solid transparent;border-top:7px solid var(--ink);border-bottom:0}
  .tf-join small{left:36px;top:14px;padding:0}
  .tf-thing{box-shadow:6px 6px 0 var(--block-shadow)}
  .topic-grid{grid-template-columns:1fr}
}
.nowrap{white-space:nowrap}
h2.overline{font-weight:400;margin:1em 0;line-height:normal}
/* Two sources: the bracket joins the middle of each half. */
.tf-two{grid-template-columns:104px 116px minmax(0,1fr)}
.tf-two .tf-join::before{top:25%;bottom:25%}
/* One thing, the sources that speak of it, and the name they share. */
.pattern-list{margin-top:44px;border-top:1px solid var(--ink)}
.pattern-list li{grid-template-columns:120px 1fr auto;font-family:var(--sans);font-size:var(--t-ui)}
.pattern-list li span{font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em}
.pattern-list li em{color:var(--signal)!important;font-family:var(--mono)}
@media(max-width:620px){
  .tf-two{grid-template-columns:1fr}
  .pattern-list li{grid-template-columns:1fr;gap:4px}
  .pattern-list li em{display:block!important}
}

/* How it works, as it happens: two price lists, one book, a change, a disagreement.
   One clock of 14s for every part (`--d`), each part's keyframes in its share of it. The
   styles without animation are the last step, so with less motion, or paused before it began,
   the figure still says everything. */
.flow{--d:18s;margin:0;min-width:0}
.flow-stage{position:relative;height:380px}
.flow-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1}
.flow-label{position:absolute;left:42%;top:178px;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);background:var(--paper);padding:2px 4px}
.src{position:absolute;left:0;width:35.7%;border:1px solid var(--ink);background:var(--white);font-family:var(--mono);font-size:var(--t-label)}
.src-a{top:20px}.src-b{top:200px}
.src-head{height:30px;display:flex;align-items:center;padding:0 10px;border-bottom:1px solid var(--ink);text-transform:uppercase;letter-spacing:.08em;font-weight:var(--w-medium)}
.src-row{height:30px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border-bottom:1px solid var(--line)}
.src-row:last-child{border-bottom:0}
.src-row b{font-weight:var(--w-medium);color:var(--ink)}
.src-row.hit{background:var(--signal-wash)}
.swap{display:inline-grid}
.swap i{grid-area:1/1;font-style:normal}
.swap .was{opacity:0}
.one{position:absolute;left:58.9%;right:0;top:70px;border:1px solid var(--ink);background:var(--white);box-shadow:8px 8px 0 var(--block-shadow)}
.one-head{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--t-data)}
.one-head span{color:var(--muted);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em}
.one-row{padding:11px 14px;border-bottom:1px solid var(--line)}
.one-row:last-child{border-bottom:0}
.one-dt{font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.one-flag{font-style:normal;color:var(--signal)}
.one-dd{font-size:var(--t-ui);font-weight:var(--w-medium);margin:2px 0}
.one-dd b{display:inline-block;min-width:84px;font-family:var(--mono);font-size:var(--t-label);font-weight:400;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.one-dd s{color:var(--muted);font-weight:400}
.one-price{background:var(--signal-wash);box-shadow:inset 3px 0 0 var(--signal)}
.flow-steps{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line);font-size:var(--t-ui)}
.flow-steps li{display:grid;grid-template-columns:28px 1fr;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.flow-steps li span{font-family:var(--mono);font-size:var(--t-label);color:var(--signal);padding-top:2px}
.flow-foot{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:14px}
.flow-foot .caption{margin:0}
.flow-toggle{font:inherit;font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--line-2);color:var(--ink);padding:5px 10px;cursor:pointer}
.flow-toggle:hover{border-color:var(--ink)}

@media (prefers-reduced-motion: no-preference){
  .flow .src-row.hit{animation:fl-hit var(--d) infinite}
  .flow .fl{animation:fl-draw var(--d) infinite}
  .flow .flow-label{animation:fl-label var(--d) infinite}
  .flow .one{animation:fl-one var(--d) infinite}
  .flow .v-a{animation:fl-va var(--d) infinite}
  .flow .v-b{animation:fl-vb var(--d) infinite}
  .flow .src-b .swap .was{animation:fl-was-src var(--d) infinite}
  .flow .src-b .swap .now{animation:fl-now-src var(--d) infinite}
  .flow .src-b .hit{animation:fl-hit var(--d) infinite,fl-flash var(--d) infinite}
  .flow .one .swap .was{animation:fl-was-one var(--d) infinite}
  .flow .one .swap .now{animation:fl-now-one var(--d) infinite}
  .flow .one-change{animation:fl-change var(--d) infinite}
  .flow .one-price{animation:fl-conflict var(--d) infinite}
  .flow .one-flag{animation:fl-flag var(--d) infinite}
  .flow .st1{animation:fl-st1 var(--d) infinite}
  .flow .st2{animation:fl-st2 var(--d) infinite}
  .flow .st3{animation:fl-st3 var(--d) infinite}
  .flow .st4{animation:fl-st4 var(--d) infinite}
  .flow .st5{animation:fl-st5 var(--d) infinite}
  /* Only while it can be seen, and not when somebody paused it. */
  .js .flow:not(.in-view) *,.flow.paused *{animation-play-state:paused!important}
}

/* A phone: the two lists side by side, a line down, the book below. */
@media(max-width:620px){
  .flow-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .flow-lines{display:none}
  .src{position:static;width:auto}
  .src-row{padding:0 8px}
  .src{order:1}
  .flow-label{order:2;position:static;grid-column:1/-1;justify-self:start;margin-left:12px;padding:16px 0 14px 18px;border-left:1px solid var(--ink)}
  .one{order:3;position:static;grid-column:1/-1}
}

/* Not only books: the hero's picture, small, for seven kinds of thing. */
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;margin-top:44px}
.pc{border:1px solid var(--line-2);background:var(--white);padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px}
.pc-kind{margin:0;font-family:var(--mono);font-size:var(--t-label);font-weight:400;text-transform:uppercase;letter-spacing:.1em;color:var(--signal)}
.pc-flow{display:grid;grid-template-columns:minmax(0,78px) 28px minmax(0,1fr);align-items:stretch;min-height:96px}
.pc-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;justify-content:space-around}
.pc-src li{font-family:var(--mono);font-size:10.5px;line-height:1.2;padding:4px 6px;border:1px solid var(--ink);background:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-join{position:relative}
.pc-join::before{content:"";position:absolute;left:0;width:50%;top:16.66%;bottom:16.66%;border:1px solid var(--ink);border-left:0}
.pc-flow.n2 .pc-join::before{top:25%;bottom:25%}
.pc-join span{position:absolute;left:50%;right:5px;top:50%;border-top:1px solid var(--ink)}
.pc-join span::after{content:"";position:absolute;right:-5px;top:-4px;border:4px solid transparent;border-left:6px solid var(--ink);border-right:0}
.pc-thing{align-self:center;border:1px solid var(--ink);padding:9px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.pc-id{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pc-thing strong{font-family:var(--mono);font-size:11px;font-weight:var(--w-medium);white-space:nowrap}
.pc-yours{border-style:dashed}
.pc-yours .pc-src li{border-style:dashed}
.pc-thing em{font-style:normal;font-size:var(--t-ui);color:var(--ink-2)}
.pc-live{font-family:var(--mono);font-size:var(--t-label);color:var(--signal);text-decoration:underline;text-underline-offset:3px;margin-top:auto}

/* Drawn once when the section comes into view: the sources, the lines, then the thing. */
@media (prefers-reduced-motion: no-preference){
  .js .pcs[data-reveal]:not(.seen) .pc-src li,.js .pcs[data-reveal]:not(.seen) .pc-join,.js .pcs[data-reveal]:not(.seen) .pc-thing{opacity:0}
  .pcs.seen .pc-src li{animation:pc-in .45s ease both}
  .pcs.seen .pc-src li:nth-child(2){animation-delay:.12s}
  .pcs.seen .pc-src li:nth-child(3){animation-delay:.24s}
  .pcs.seen .pc-join{animation:pc-fade .4s ease .45s both}
  .pcs.seen .pc-thing{animation:pc-in .45s ease .75s both}
}
@keyframes pc-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes pc-fade{from{opacity:0}to{opacity:1}}
.principle-grid article>h3:first-child{margin-top:0}
/* The clock of the figure above: steps 1 to 5 in the first four fifths, the watch telling you
   in the last, and everything gone at the end so it can begin again. */
@keyframes fl-hit{0%,7.2%{background:transparent}11.2%,94%{background:var(--signal-wash)}100%{background:transparent}}
@keyframes fl-draw{0%,12.8%{stroke-dashoffset:1;opacity:1}21.6%,94%{stroke-dashoffset:0;opacity:1}98%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes fl-label{0%,17.6%{opacity:0}22.4%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes fl-one{0%,20.8%{opacity:0;transform:translateY(8px)}25.6%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes fl-va{0%,28.8%{opacity:0;transform:translateX(-12px)}32.8%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes fl-vb{0%,32%{opacity:0;transform:translateX(-12px)}36%,94%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes fl-was-src{0%,44.8%{opacity:1}47.2%,96%{opacity:0}100%{opacity:1}}
@keyframes fl-now-src{0%,44.8%{opacity:0}47.2%,96%{opacity:1}100%{opacity:0}}
@keyframes fl-flash{0%,44.8%{box-shadow:inset 0 0 0 0 var(--signal)}46.4%{box-shadow:inset 0 0 0 2px var(--signal)}52.8%,100%{box-shadow:inset 0 0 0 0 var(--signal)}}
@keyframes fl-was-one{0%,49.6%{opacity:1}52%,96%{opacity:0}100%{opacity:1}}
@keyframes fl-now-one{0%,49.6%{opacity:0}52%,96%{opacity:1}100%{opacity:0}}
@keyframes fl-change{0%,51.2%{opacity:0}56%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes fl-conflict{0%,57.6%{background:transparent;box-shadow:inset 0 0 0 var(--signal)}61.6%,94%{background:var(--signal-wash);box-shadow:inset 3px 0 0 var(--signal)}98%,100%{background:transparent;box-shadow:inset 0 0 0 var(--signal)}}
@keyframes fl-flag{0%,57.6%{opacity:0}61.6%,94%{opacity:1}98%,100%{opacity:0}}
@keyframes fl-told{0%,74%{opacity:0;transform:translateY(12px)}78%,94%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes fl-st1{0%,13.6%{color:var(--ink)}15.2%,100%{color:var(--muted-3)}}
@keyframes fl-st2{0%,13.6%{color:var(--muted-3)}15.2%,28%{color:var(--ink)}29.6%,100%{color:var(--muted-3)}}
@keyframes fl-st3{0%,28%{color:var(--muted-3)}29.6%,44%{color:var(--ink)}45.6%,100%{color:var(--muted-3)}}
@keyframes fl-st4{0%,44%{color:var(--muted-3)}45.6%,56.8%{color:var(--ink)}58.4%,100%{color:var(--muted-3)}}
@keyframes fl-st5{0%,56.8%{color:var(--muted-3)}58.4%,72%{color:var(--ink)}73.6%,100%{color:var(--muted-3)}}
@keyframes fl-st6{0%,72%{color:var(--muted-3)}73.6%,96%{color:var(--ink)}98%,100%{color:var(--muted-3)}}

/* The watch telling you: a message in the corner of the figure, in the words a watch uses. */
.told{position:absolute;right:0;top:300px;width:56%;border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:10px 12px;box-shadow:6px 6px 0 var(--block-shadow);z-index:2}
.told-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--on-band);margin-bottom:5px}
.told p{margin:0;font-size:var(--t-ui);line-height:1.35;color:var(--on-band-strong)}
@media (prefers-reduced-motion: no-preference){
  .flow .told{animation:fl-told var(--d) infinite}
  .flow .st6{animation:fl-st6 var(--d) infinite}
}
@media(max-width:620px){.told{order:4;position:static;grid-column:1/-1;width:auto;margin-top:6px}}

/* Simple underneath: the three layers, each a sentence and what it looks like in a terminal. */
.underneath{padding:118px 0}
.underneath-head{max-width:760px}
.underneath-head .body-copy{max-width:640px}
.layer{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.underneath-head+.layer{margin-top:64px}
.layer-copy h3{font-size:var(--t-mid);letter-spacing:-.035em;line-height:1.1;margin:0 0 14px}
.layer-copy p{font-size:var(--t-body);line-height:1.6;color:var(--muted);margin:0;max-width:440px}
.layer .terminal{min-width:0}
@media(max-width:900px){.layer{grid-template-columns:1fr;gap:28px}}
@media(max-width:620px){.underneath{padding:78px 0}.layer{padding:40px 0}.layer-copy h3{font-size:26px}}
.underneath-head h2{font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 26px}
@media(max-width:620px){.underneath-head h2{font-size:40px}}
/* Two sources side by side: what each calls its fields, marked where the tracker joins them. */
.layer-wide{grid-template-columns:1fr;gap:32px}
.layer-wide .layer-copy p{max-width:760px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;min-width:0}
.pair .terminal{min-width:0}
.terminal .hl{box-shadow:inset 0 -2px 0 var(--term-prompt);padding-bottom:1px}
@media(max-width:900px){.pair{grid-template-columns:1fr}}
/* A long path in a terminal's head wraps rather than widening the page. */
.term-head{height:auto;min-height:42px;padding-block:10px}
.term-head b{min-width:0;overflow-wrap:anywhere;line-height:1.4}
/* The hub's one line about itself, above the footer it shares with the website. */
.hub-note{font-family:var(--mono);font-size:var(--t-label);color:var(--muted);margin:48px auto 18px}
/* The page the reader is on, marked where the header meets its line, as the tabs of a tracker are. */
.site-header nav{align-self:stretch}
.site-header nav a{display:flex;align-items:center;border-bottom:2px solid transparent;margin-bottom:-1px}
.site-header nav a[aria-current]{color:var(--ink);border-bottom-color:var(--signal)}
@media(max-width:900px){.site-header nav{align-self:center}.site-header nav a{border-bottom:0;margin-bottom:0}
  .site-header nav a[aria-current]{text-decoration:underline 2px var(--signal);text-underline-offset:7px}}

/* The hub: what anyone can take, first. */
.hub-stats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hub-stats span{border:1px solid var(--line);padding:8px 10px;font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em}
.hub-list{padding:0 0 88px}
.hub-list h2{font-size:var(--t-mid);letter-spacing:-.035em;margin:0 0 8px}
.hub-list>p.caption{margin:0 0 22px}
.hub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.hub-card{border:1px solid var(--ink);background:var(--white);padding:20px 20px 18px;display:flex;flex-direction:column;gap:12px}
.hub-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hub-card h3{font-size:var(--t-lead);letter-spacing:-.025em;margin:0}
.hub-card h3 a:hover{color:var(--signal)}
.badge{font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.1em;color:var(--signal);border:1px solid var(--signal);padding:3px 7px;white-space:nowrap}
.hub-card p{margin:0;color:var(--muted);line-height:1.5;font-size:var(--t-ui)}
.hub-card .hub-meta{font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.hub-actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:auto;padding-top:6px}
.hub-actions .primary,.hub-actions .secondary{padding:9px 14px}
.hub-actions code{font-family:var(--mono);font-size:var(--t-label);color:var(--muted)}
.hub-scroll{overflow-x:auto}
.hub-table{width:100%;border-collapse:collapse;font-size:var(--t-ui)}
.hub-table th{text-align:left;font-family:var(--mono);font-size:var(--t-label);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:400;padding:10px 14px 10px 0;border-bottom:1px solid var(--ink)}
.hub-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.hub-table td small{display:block;font-family:var(--mono);font-size:var(--t-label);color:var(--muted);margin-top:4px}
.hub-table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* A page about one thing on the hub. */
.hub-detail h1{max-width:1020px}
.hub-crumbs a:hover{color:var(--ink)}
.hub-table td a,.hub-links a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.hub-table td a:hover,.hub-links a:hover{text-decoration-color:var(--signal)}
.hub-table.kv td:first-child{white-space:nowrap;color:var(--muted);width:1%;padding-right:28px}
.hub-links{margin:0;padding:0 0 0 18px;line-height:1.9}
.hub-list .terminal+.caption{margin-top:28px}
.hub-statement{font-family:var(--mono);font-size:var(--t-data);line-height:1.6;background:var(--white);border:1px solid var(--line);padding:16px;overflow:auto;max-height:520px}