/* site/build.py makes this file from site/site.css, src/systemap/theme.py and DESIGN.md. Do not edit it. */
@font-face{font-family:"systemap Inter";src:url(inter.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--bg:#0F0E0C;--surface:#161411;--raised:#211E1A;--map:#12110F;--card:#1C1A17;--card-line:#716C63;--line:#27241F;--line-2:#37332D;--ink:#F1EDE4;--ink-2:#BEB8AC;--ink-3:#989184;--accent:#FCB442;--on-accent:#1C1405;--hl:#FCB4422E;--hl-soft:#1C1A17;--brand:#F2B33D;--region:#6B665D;--change:#D4675B;--accent-soft:#FCB4421F;--grid:#1E1C18;--k-data:#2CB59A;--k-control:#B97874;--k-context:#D1EC9F;--k-tools:#8A8708;--k-custom-1:#8A8B22;--fs:"systemap Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,"SF Mono",SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;--radius-control:6px;--radius-menu:10px;--radius-guide:10px;--radius-tag:3px;--space-header:52px;--space-map-gutter:24px;--space-control-gap:8px;--space-phone-margin:16px;--t-body-size:13px;--t-body-lh:1.5;--t-project-name-size:15px;--t-project-name-weight:600;--t-project-name-lh:1;--t-project-name-ls:-0.02em;--t-layer-question-size:22px;--t-layer-question-weight:500;--t-layer-question-lh:28px;--t-layer-question-ls:-0.01em;--t-panel-title-size:19px;--t-panel-title-weight:600;--t-panel-title-lh:25px;--t-secondary-size:12px;--t-secondary-lh:18px;--t-kicker-size:11px;--t-kicker-weight:600;--t-kicker-lh:16px;--t-kicker-ls:0.08em;--t-mono-size:12px;--t-mono-lh:1.5;--code-bg:#161411;--code-line:#37332D;--code-ink:#F1EDE4;--code-ink-2:#BEB8AC;--code-ink-3:#989184;--code-k:#FCB442;--code-n:#D4675B;--code-s:#2CB59A;--code-f:#D1EC9F;--code-a:#B97874;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");}
:root[data-theme="light"]{color-scheme:light;--bg:#F1EFEC;--surface:#FCFAF7;--raised:#EDEAE6;--map:#F4F2EF;--card:#FFFEFC;--card-line:#8F8B85;--line:#E4E2DF;--line-2:#D4D1CD;--ink:#1D1B17;--ink-2:#524F4A;--ink-3:#6D6963;--accent:#1D1B17;--on-accent:#FCFAF7;--hl:#FFEBA0;--hl-soft:#FFF5D6;--brand:#F2B33D;--region:#8F8B85;--change:#AC312A;--accent-soft:#FFF5D6;--grid:#E6E3DF;--k-data:#014438;--k-control:#A05B5A;--k-context:#497B15;--k-tools:#544002;--k-custom-1:#493901;}
@media (prefers-color-scheme:light){:root:not([data-theme]){color-scheme:light;--bg:#F1EFEC;--surface:#FCFAF7;--raised:#EDEAE6;--map:#F4F2EF;--card:#FFFEFC;--card-line:#8F8B85;--line:#E4E2DF;--line-2:#D4D1CD;--ink:#1D1B17;--ink-2:#524F4A;--ink-3:#6D6963;--accent:#1D1B17;--on-accent:#FCFAF7;--hl:#FFEBA0;--hl-soft:#FFF5D6;--brand:#F2B33D;--region:#8F8B85;--change:#AC312A;--accent-soft:#FFF5D6;--grid:#E6E3DF;--k-data:#014438;--k-control:#A05B5A;--k-context:#497B15;--k-tools:#544002;--k-custom-1:#493901;}}
/* The styles of the systemap website.
   site/build.py puts the color tokens of src/systemap/theme.py and the radii, spacing
   and type sizes of DESIGN.md before this text. The names are the names of the map page.
   The map page sets text at 13px. A page of documentation sets text at 15px and 17px,
   which are also sizes of the map page type scale. Only the page titles are larger. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);
color:var(--ink);font:400 15px/1.6 var(--fs);-webkit-font-smoothing:antialiased;
font-kerning:normal}
::selection{background:var(--hl);color:var(--ink)}
a{color:var(--ink);text-decoration-line:underline;text-decoration-thickness:1px;
text-underline-offset:3px;text-decoration-color:var(--ink-3)}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
code,kbd,pre,samp{font-family:var(--fm)}
img,svg{display:block}
h1,h2,h3,h4{color:var(--ink);text-wrap:balance}
p,li{text-wrap:pretty}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);
white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:40;padding:10px 14px;border:1px solid var(--line-2);
border-radius:var(--radius-control);background:var(--surface);color:var(--ink)}
.skip:focus{top:12px}

/* A small label in capital letters: the kicker of the map page. */
.kicker{margin:0;font:var(--t-kicker-weight) var(--t-kicker-size)/var(--t-kicker-lh) var(--fm);
letter-spacing:var(--t-kicker-ls);text-transform:uppercase;color:var(--ink-3)}

/* ---- the header: one row, as on the map page --------------------------------- */
.bar{position:sticky;top:0;z-index:20;height:var(--space-header);display:flex;align-items:center;
gap:18px;padding:0 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
flex:none;border-radius:var(--radius-control)}
.mark{width:22px;height:22px}
.mark__path{fill:none;stroke:var(--ink);stroke-width:44;stroke-linecap:round;stroke-linejoin:round}
.mark__dot{fill:var(--brand)}
.brand__name{font:var(--t-project-name-weight) var(--t-project-name-size)/var(--t-project-name-lh)
var(--fs);letter-spacing:var(--t-project-name-ls)}
.nav{display:flex;align-items:center;gap:2px;margin-left:6px;min-width:0}
.nav__a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid transparent;
border-radius:var(--radius-control);font-size:13px;color:var(--ink-2);text-decoration:none;
white-space:nowrap;transition:background-color .16s ease-out,color .16s ease-out}
.nav__a:hover{background:var(--raised);color:var(--ink)}
.nav__a[aria-current="page"]{background:var(--raised);border-color:var(--line-2);color:var(--ink);
font-weight:500}
.bar__space{flex:1}
.tool{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;
flex:none;border:1px solid transparent;border-radius:var(--radius-control);background:transparent;
color:var(--ink-2);transition:background-color .16s ease-out,color .16s ease-out}
.tool:hover{background:var(--raised);color:var(--ink)}
svg.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
:root[data-theme="light"] .tool__to-paper,:root[data-theme="dark"] .tool__to-ink{display:none}

/* ---- buttons and the install line ---------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;
border:1px solid var(--line-2);border-radius:var(--radius-control);background:transparent;
color:var(--ink);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;
transition:background-color .16s ease-out,border-color .16s ease-out}
.btn:hover{background:var(--raised)}
.btn--primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.install{display:flex;align-items:center;gap:8px;height:36px;padding:0 4px 0 14px;
border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--card);
min-width:0}
.install code{flex:1;padding:0;background:none;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.install__p{color:var(--ink-3);user-select:none}
.copy{height:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:4px;
background:transparent;color:var(--ink-2);font-size:12px;transition:background-color .16s ease-out}
.copy:hover{background:var(--raised);color:var(--ink)}

/* ---- prose: docs pages and the text of the landing page ----------------------- */
.doc p{margin:0 0 16px;color:var(--ink-2)}
.doc strong{color:var(--ink);font-weight:600}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
.doc li{margin:6px 0}
.doc li>p{margin:0 0 8px}
.doc li::marker{color:var(--ink-3)}
.doc ol>li::marker{font:600 13px var(--fm)}
:not(pre)>code{padding:1px 5px;border-radius:4px;background:var(--raised);color:var(--ink);
font-size:.86em;overflow-wrap:anywhere}
.doc a code{text-decoration:inherit}
/* A code block has the Ink colors in both themes (site/build.py, CODE_TOKENS).
   site/highlight.py gives the classes of the parts. */
pre{margin:0 0 20px;padding:16px 18px;overflow-x:auto;border:1px solid var(--code-line);
border-radius:8px;background:var(--code-bg);color:var(--code-ink);color-scheme:dark;
font-size:13px;line-height:1.65;tab-size:4}
pre code{font-size:inherit;color:inherit}
pre .k{color:var(--code-k)}
pre .s{color:var(--code-s)}
pre .f{color:var(--code-f)}
pre .a{color:var(--code-a)}
pre .n{color:var(--code-n)}
pre .c{color:var(--code-ink-3);font-style:italic}
pre .p{color:var(--code-ink-2)}
pre .pr{color:var(--code-ink-3);user-select:none}
pre.out{color:var(--code-ink-2)}
pre .l{color:var(--code-ink);font-weight:600}
pre .bad{color:var(--code-n);font-weight:600}
pre .ok{color:var(--code-s);font-weight:600}
pre.wrap-lines{white-space:normal}
pre.wrap-lines .ln{display:block;white-space:pre-wrap;overflow-wrap:anywhere;
padding-left:calc((var(--i) + 2) * 1ch);text-indent:calc((var(--i) + 2) * -1ch)}
pre ::selection{background:color-mix(in srgb,var(--code-k) 30%,transparent);color:var(--code-ink)}
blockquote{margin:0 0 16px;padding:2px 0 2px 16px;border-left:2px solid var(--line-2)}
blockquote p{margin:0}
hr{margin:32px 0;border:0;border-top:1px solid var(--line)}
.table{margin:0 0 24px;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-control);
background:var(--surface)}
.table table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.table th{padding:10px 14px;text-align:left;vertical-align:bottom;border-bottom:1px solid var(--line-2);
font:var(--t-kicker-weight) var(--t-kicker-size)/var(--t-kicker-lh) var(--fm);
letter-spacing:var(--t-kicker-ls);text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.table td{padding:10px 14px;vertical-align:top;border-top:1px solid var(--line);color:var(--ink-2);
min-width:7em}
.table tr:first-child td{border-top:0}
.table td:first-child{color:var(--ink)}
.table--wide td{min-width:0;white-space:nowrap}

/* ---- the docs layout: navigation, page, and the list of sections ------------- */
/* The navigation column has the surface color and a line at its right, for the full page height. */
.layout{--side:264px;flex:1;display:grid;grid-template-columns:var(--side) minmax(0,1fr) 248px;
align-items:start;background:linear-gradient(to right,var(--surface) 0 calc(var(--side) - 1px),
var(--line) calc(var(--side) - 1px) var(--side),transparent var(--side))}
.side{position:sticky;top:var(--space-header);height:calc(100svh - var(--space-header));
overflow-y:auto;padding:24px 16px 40px}
.side .kicker{margin:24px 10px 8px}
.side__home{display:block;padding:7px 10px;border:1px solid transparent;border-radius:var(--radius-control);
font-size:14px;color:var(--ink-2);text-decoration:none}
.side__list{list-style:none;margin:0;padding:0}
.side__list a{display:flex;align-items:flex-start;gap:10px;padding:7px 10px;border:1px solid transparent;
border-radius:var(--radius-control);font-size:14px;line-height:20px;color:var(--ink-2);
text-decoration:none;transition:background-color .16s ease-out,color .16s ease-out}
.side__home:hover,.side__list a:hover{background:var(--raised);color:var(--ink)}
.side__home[aria-current="page"],.side__list a[aria-current="page"]{background:var(--raised);
border-color:var(--line-2);color:var(--ink);font-weight:500}
.ring{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;
border:1px solid var(--region);border-radius:50%;font:600 11px/1 var(--fm);color:var(--ink-2)}
/* The current page is the current step: the selection color, as in the map guide list. */
[aria-current="page"]>.ring{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}

.doc{min-width:0;max-width:820px;padding:44px 56px 64px}
.doc__k{margin-bottom:10px}
.doc h1{margin:0 0 16px;font-size:30px;line-height:38px;font-weight:600;letter-spacing:-.02em}
.doc .lead{margin-bottom:28px;font-size:17px;line-height:27px;color:var(--ink-2)}
.doc h2{margin:48px 0 16px;padding-top:28px;border-top:1px solid var(--line);
font-size:var(--t-layer-question-size);line-height:var(--t-layer-question-lh);
font-weight:var(--t-layer-question-weight);letter-spacing:var(--t-layer-question-ls)}
.doc h3{margin:36px 0 12px;font-size:17px;line-height:24px;font-weight:600}
.doc h4{margin:28px 0 10px;font-size:15px;font-weight:600}
.doc h1+.lead+h2,.doc .lead+h2{margin-top:36px}
.doc h3 code,.doc h2 code{font-size:.9em}
.doc h3 code{padding:0;background:none}

.toc{position:sticky;top:var(--space-header);max-height:calc(100svh - var(--space-header));
overflow-y:auto;padding:48px 24px 40px 8px}
.toc .kicker{margin:0 0 10px}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.toc a{display:block;margin-left:-1px;padding:4px 0 4px 13px;border-left:1px solid transparent;
font-size:13px;line-height:18px;color:var(--ink-3);text-decoration:none}
.toc .toc__l3 a{padding-left:25px}
.toc code{padding:0;background:none;color:inherit;font-size:12px;line-height:18px}
.toc a:hover{color:var(--ink)}
.toc a[aria-current="true"]{border-left-color:var(--ink);color:var(--ink)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:56px}
.pager__a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line-2);
border-radius:8px;color:var(--ink);text-decoration:none;font-weight:500;
transition:background-color .16s ease-out,border-color .16s ease-out}
.pager__a:hover{background:var(--raised);border-color:var(--ink-3)}
.pager__next{grid-column:2;text-align:right}

.doc .rows{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--line)}
.doc .rows li{margin:0}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 14px;padding:16px 4px;
border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.row--n{grid-template-columns:20px minmax(0,1fr)}
.row .ring{grid-row:1/3;margin-top:2px}
.row__t{font-size:17px;line-height:24px;font-weight:600}
.row__s{font-size:14px;line-height:21px;color:var(--ink-2)}
.row--n .row__t,.row--n .row__s{grid-column:2}
.row:hover .row__t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

.docbar{display:none}

/* ---- the footer -------------------------------------------------------------- */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;max-width:1184px;
margin:0 auto;padding:24px 32px;font-size:13px;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 20px}
.foot__font{flex-basis:100%}
.brand--small .mark{width:18px;height:18px}
.brand--small .brand__name{font-size:14px}
.docs-page .foot__in{max-width:none;padding-left:32px}

/* ---- the landing page ---------------------------------------------------------- */
/* Each section has one flow kind color of the map page (--hue). In Ink, a label has
   that color. In Paper, the rose kind color has less than 4.5:1 on the page, so the
   labels are ink and the color is on the rings and the edges only. Text on a filled
   ring: the Ink page color (5.41:1 or more) or white in Paper (5.07:1 or more). */
:root{--on-hue:var(--bg);--kick:var(--accent);--kick-bg:transparent;--kick-pad:0}
:root[data-theme="light"]{--on-hue:#fff;--kick:var(--ink);--kick-bg:var(--hl);--kick-pad:1px 6px;
--step-label:var(--ink-2)}
@media (prefers-color-scheme:light){:root:not([data-theme]){--on-hue:#fff;--kick:var(--ink);
--kick-bg:var(--hl);--kick-pad:1px 6px;--step-label:var(--ink-2)}}

.home main{flex:1}
.wrap{max-width:1184px;margin:0 auto;padding:0 32px}
.kicker--k{display:inline-block;color:var(--kick);background:var(--kick-bg);padding:var(--kick-pad);
border-radius:4px}
.hl{color:var(--kick);background:var(--kick-bg);border-radius:6px;padding:0 .06em;
-webkit-box-decoration-break:clone;box-decoration-break:clone}

.hero{padding:96px 0 0;overflow:hidden}
.hero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.hero h1{max-width:13ch;margin:18px 0 0;font-size:60px;line-height:64px;font-weight:650;
letter-spacing:-.035em}
.hero .lead{max-width:50ch;margin:24px 0 0;font-size:19px;line-height:30px;color:var(--ink-2)}
.hero__do{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:36px}
.hero__do .install{width:max-content;max-width:100%;height:44px}
.hero__do .install code{overflow:visible}
.hero__do .btn{height:44px;padding:0 18px;font-size:15px}
.btn--primary{background:var(--kick-bg);border-color:var(--kick);color:var(--ink)}
:root:not([data-theme="light"]) .btn--primary{background:var(--accent);border-color:var(--accent);
color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.06)}

/* A part of the self-map, with the surface and the motion of the map page
   (src/systemap/page_motion.py). Ink: a film grain under the dot grid and a soft dark
   edge. Paper: the dot grid only. */
.mini{position:relative;width:100%;max-width:480px;margin:0;justify-self:end}
.mini svg{position:relative;width:100%;height:auto;overflow:hidden;border:1px solid var(--line-2);
border-radius:12px;background-color:var(--map);background-image:var(--grain),
radial-gradient(var(--grid) 1px,transparent 1px);background-size:160px 160px,24px 24px}
.mini::after{content:"";position:absolute;inset:0 0 auto;aspect-ratio:480/400;border-radius:12px;
pointer-events:none;background:radial-gradient(130% 110% at 50% 42%,transparent 62%,
color-mix(in srgb,#000 24%,transparent))}
:root[data-theme="light"] .mini svg{background-image:radial-gradient(var(--grid) 1px,transparent 1px);
background-size:24px 24px}
:root[data-theme="light"] .mini::after{display:none}
@media (prefers-color-scheme:light){
:root:not([data-theme]) .mini svg{background-image:radial-gradient(var(--grid) 1px,transparent 1px);
background-size:24px 24px}
:root:not([data-theme]) .mini::after{display:none}
}
.mini figcaption{margin:10px 2px 0;font-size:13px;line-height:20px;color:var(--ink-3)}
.nd__box{fill:var(--card);stroke:var(--card-line);stroke-width:1.25}
.nd__box--actor{stroke-dasharray:4 3}
.nd__shade{fill:#000;fill-opacity:.42;stroke:none;transform:translateY(1.6px);
transition:transform .16s ease-out,fill-opacity .16s ease-out}
.nd:hover .nd__shade{transform:translateY(3.2px);fill-opacity:.5}
:root[data-theme="light"] .nd__shade{fill:#1d1b17;fill-opacity:.08}
:root[data-theme="light"] .nd:hover .nd__shade{fill-opacity:.12}
.nd__id{font:600 12px var(--fm);fill:var(--ink)}
.nd__t{font:400 11px var(--fs);fill:var(--ink-2)}
.fl path{fill:none;stroke:var(--fl);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fl .ah{fill:var(--fl)}
.fl .lb rect{fill:var(--map)}
.fl .lb text{font:500 11px var(--fs);fill:var(--ink-2);text-anchor:middle}
.fl--data{--fl:var(--k-data)}
.fl--control{--fl:var(--k-control)}
.fl--judge{--fl:var(--k-custom-1)}
.fl,.nd{transition:opacity .14s ease-out}
.fl path{transition:stroke-width .14s ease-out}
/* A card under the pointer shows its lines and the cards at their ends (site.js). */
.mini.peek .fl:not(.lit){opacity:.18}
.mini.peek .fl.lit path{stroke-width:2.6}
.mini.peek .nd:not(.lit){opacity:.6}

/* The three views of the map page, in one window with tabs. Without the script,
   the window shows the Sequences view and no tabs. */
.window{margin-top:72px;overflow:hidden;border:1px solid var(--line-2);border-radius:12px;
background:var(--surface)}
html:not(.js) .window__bar{display:none}
.window__bar{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}
.tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;
border:1px solid transparent;border-radius:var(--radius-control);background:transparent;
color:var(--ink-2);font-size:14px;font-weight:500;transition:background-color .16s ease-out,color .16s ease-out}
.tab::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tab)}
.tab--data{--tab:var(--k-data)}
.tab--k{--tab:var(--brand)}
.tab--change{--tab:var(--change)}
.tab:hover{background:var(--raised);color:var(--ink)}
.tab[aria-selected="true"]{background:var(--raised);border-color:var(--line-2);color:var(--ink);
box-shadow:inset 0 -2px 0 var(--tab)}
.view{margin:0}
.view a{display:block}
.view img{width:100%;height:auto}
.view figcaption{display:flex;flex-wrap:wrap;gap:2px 10px;padding:14px 18px;border-top:1px solid var(--line);
font-size:14px;line-height:22px;color:var(--ink-3)}
.view .q{color:var(--ink);font-weight:500}

.sec{padding-top:128px}
.sec__h{max-width:22ch;margin:0;font-size:40px;line-height:46px;font-weight:650;letter-spacing:-.03em}

.compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.cmp{padding:24px 24px 26px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.cmp p{margin:14px 0 0;font-size:17px;line-height:27px;color:var(--ink-2)}
.cmp .kicker{margin:0}
.cmp--us{border-color:var(--brand);background:var(--accent-soft)}
.cmp--us .kicker{display:inline-block;color:var(--kick);background:var(--kick-bg);padding:var(--kick-pad);
border-radius:4px}
.cmp--us p{color:var(--ink)}

.steps{list-style:none;display:grid;gap:88px;margin:56px 0 0;padding:0}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.step--data{--hue:var(--k-data)}
.step--control{--hue:var(--k-control)}
.step--change{--hue:var(--change)}
.step__n{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:600 12px/1 var(--fm);
letter-spacing:.08em;text-transform:uppercase;color:var(--step-label,var(--hue))}
.step .ring{width:28px;height:28px;border:0;background:var(--hue);color:var(--on-hue);font-size:13px}
.step h3{margin:0;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em}
.step__text p:not(.step__n){max-width:42ch;margin:14px 0 0;font-size:17px;line-height:28px;color:var(--ink-2)}
.step__show{min-width:0}
.step__show pre{margin:0;border-top:3px solid var(--hue)}
.cap{margin:10px 0 0;font-size:13px;line-height:20px;color:var(--ink-3)}

.sec--band{margin-top:128px;padding:96px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--surface)}
.sec--band+.sec{padding-top:112px}
.live{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.live__text .sec__h{margin-top:14px}
.live__text p:not(.kicker){max-width:46ch;margin:18px 0 22px;font-size:17px;line-height:28px;color:var(--ink-2)}
.live__text pre{margin:0}
.live__text .note{margin:18px 0 0;font-size:14px;line-height:22px;color:var(--ink-3)}
.term{padding:20px;border:1px solid var(--code-line);border-radius:12px;background:var(--code-bg);
color:var(--code-ink-2);color-scheme:dark;font:13px/1.6 var(--fm)}
.term__band{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 12px;border-radius:8px;
background:color-mix(in srgb,var(--code-k) 9%,transparent);color:var(--code-ink)}
.term__band b{color:var(--code-k);font-weight:600}
.term__band u{text-decoration-color:var(--code-ink-3);text-underline-offset:3px}
.term__dot{width:8px;height:8px;margin-right:4px;border-radius:50%;background:var(--code-s);
box-shadow:0 0 0 3px color-mix(in srgb,var(--code-s) 25%,transparent)}
.term__prompt{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;
border:1px solid var(--code-line);border-radius:8px;color:var(--code-ink-3)}
.term__cursor{width:8px;height:17px;background:var(--code-ink-2)}

.start{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.start p{max-width:40ch;margin:18px 0 0;font-size:17px;line-height:28px;color:var(--ink-2)}
.start pre{margin:0}

.limits{max-width:760px;margin:32px 0 0;padding:0;list-style:none}
.limits>li{position:relative;padding:16px 0 16px 24px;border-top:1px solid var(--line);
font-size:17px;line-height:27px;color:var(--ink-2)}
.limits>li:first-child{border-top:0}
.limits>li::before{content:"";position:absolute;left:2px;top:calc(16px + .8em - 4px);width:8px;height:8px;
border-radius:50%;background:var(--ink-3)}
.limits strong{color:var(--ink);font-weight:600}
.more{margin:20px 0 0;font-size:14px;line-height:22px;color:var(--ink-3)}
.home .foot{margin-top:128px}

@media (prefers-reduced-motion:no-preference){
@keyframes route-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes blink{50%{opacity:0}}
/* As on the map page: the cards come in one time, in reading order. Then each
   line draws from its source to its target in 300 ms, and its arrow and label show. */
@keyframes card-in{from{opacity:0;transform:translateY(5px)}}
@keyframes fade-in{from{opacity:0}}
.mini .nd{animation:card-in .32s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--in,0ms)}
.mini .fl path{stroke-dasharray:1 1;animation:route-draw .3s cubic-bezier(.45,0,.25,1) backwards;
animation-delay:var(--d,0ms)}
.mini .fl :is(.ah,.lb){animation:fade-in .16s ease-out backwards;animation-delay:calc(var(--d,0ms) + .3s)}
.term__cursor{animation:blink 1.2s steps(1) infinite}
}

@media (max-width:1099px){
.hero__in{grid-template-columns:minmax(0,1fr)}
.mini{justify-self:start}
.step,.live,.start{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:820px){
.compare{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
.wrap{padding:0 var(--space-phone-margin)}
.mini{display:none}
.hero{padding-top:48px}
.hero h1{font-size:40px;line-height:44px}
.hero .lead{font-size:17px;line-height:27px}
.hero__do{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero__do .install{grid-column:1/-1;width:auto}
.hero__do .btn{padding:0 10px;font-size:14px}
.window{margin-top:48px;border-radius:10px}
.window__bar{overflow-x:auto}
.tab{height:40px;padding:0 12px}
.sec{padding-top:88px}
.sec__h{font-size:30px;line-height:36px}
.steps{gap:64px;margin-top:40px}
.step h3{font-size:24px;line-height:30px}
.sec--band{margin-top:88px;padding:64px 0}
.sec--band+.sec{padding-top:88px}
.home .foot{margin-top:88px}
}

/* ---- motion: one time, and only when the reader permits motion ------------- */
@media (prefers-reduced-motion:no-preference){
@keyframes mark-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mark-dot{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.home .bar .mark__path{stroke-dasharray:1 1;animation:mark-draw .6s cubic-bezier(.45,0,.25,1) both}
.home .bar .mark__dot{transform-box:fill-box;transform-origin:center;
animation:mark-dot .16s ease-out .6s both}
html.theming,html.theming *{transition:background-color .24s ease-out,border-color .24s ease-out,
color .24s ease-out!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- narrower windows ------------------------------------------------------ */
@media (max-width:1199px){
.layout{--side:248px;grid-template-columns:var(--side) minmax(0,1fr)}
.toc{display:none}
.doc{padding:40px 48px 56px}
}
@media (max-width:820px){
.layout{display:block;background:none}
.docbar{display:block;position:sticky;top:var(--space-header);z-index:15;padding:8px 16px;
background:var(--bg);border-bottom:1px solid var(--line)}
html:not(.js) .docbar{display:none}
.docbar__btn{width:100%;height:44px;display:flex;align-items:center;gap:10px;padding:0 12px;
border:1px solid var(--line-2);border-radius:var(--radius-control);background:var(--card);
color:var(--ink);text-align:left}
.docbar__t{flex:1;min-width:0;font-size:15px;font-weight:500;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.docbar__btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.side{background:var(--surface)}
.js .side{display:none}
.js .side[data-open]{display:block;position:fixed;left:0;right:0;top:calc(var(--space-header) + 61px);
bottom:0;z-index:14;height:auto;border-right:0;border-top:1px solid var(--line);
box-shadow:0 14px 40px color-mix(in srgb,#000 40%,transparent)}
html:not(.js) .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
.side__home,.side__list a{min-height:44px;align-items:center;font-size:15px}
.side__home{display:flex}
.doc{max-width:none;padding:28px var(--space-phone-margin) 48px}
.doc h1{font-size:26px;line-height:32px}
.foot__in,.docs-page .foot__in{padding:24px 16px}
}
@media (max-width:640px){
.bar{gap:4px;padding:0 8px 0 16px}
.nav{margin-left:auto;gap:0}
.nav__a{height:40px;padding:0 8px;font-size:14px}
.nav__a[aria-current="page"]{border-color:transparent;background:transparent;text-decoration:underline;
text-decoration-thickness:1px;text-underline-offset:5px}
.bar__space{display:none}
.tool{width:40px;height:40px}
.pager{grid-template-columns:1fr}
.pager__next{grid-column:1}
.copy{height:34px}
}