/* structure — round 2: Framework, refined. One design, two themes (html[data-theme]).
   Red is what you act on; cool is structure and links; a rule starts at a short 45° tick; a sheet has one cut corner. */
@font-face{font-family:"Figtree";src:url("/assets/fonts/structure-figtree-wght.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/structure-figtree-wght-italic.woff2") format("woff2");font-weight:300 900;font-style:italic;font-display:swap}
@font-face{font-family:"Reddit Mono";src:url("/assets/fonts/structure-reddit-mono-wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

/* ── tokens: every colour is a custom property, set once per theme ───── */
html{
  --sans:"Figtree",system-ui,sans-serif;--mono:"Reddit Mono",ui-monospace,monospace;
  /* the red: one value for every fill and mark, in both themes (white on it is 4.6:1) */
  --red:#e02a3d;--red-press:#c62136;--on-red:#fff;
  /* the terminal and the closing sheet are the same in both themes */
  --term-ink:#e8edf5;--term-ink-2:#aeb9cb;--term-line:rgba(150,180,222,.16);--ok:#5fd49b;--warn:#f4c651;
  --close-ink:#fff;--close-btn:#fff;--close-btn-ink:#0d1a30;
  --slash-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='380' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='w' gradientUnits='userSpaceOnUse' x1='150' y1='380' x2='440' y2='90'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.6'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' gradientUnits='userSpaceOnUse' x1='268' y1='380' x2='440' y2='208'%3E%3Cstop offset='0' stop-color='%23a5dcff' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23a5dcff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 380 420 0' stroke='%2314244a' stroke-opacity='.6'/%3E%3Cpath d='M150 380 440 90' stroke='url(%23w)'/%3E%3Cpath d='M196 300 357.4 138.6' stroke='%23ffd24a' stroke-width='1.7'/%3E%3Ccircle cx='360' cy='136' r='3.6' stroke='%23ffd24a' stroke-width='1.5'/%3E%3Cpath d='M268 380 440 208' stroke='url(%23s)' stroke-width='1.5'/%3E%3Cpath d='M330 318 404 244' stroke='%2314244a' stroke-width='2.6'/%3E%3Cpath d='M84 380 187.6 276.4' stroke='%23fff' stroke-opacity='.75'/%3E%3Ccircle cx='190' cy='274' r='3.4' stroke='%23fff' stroke-opacity='.85' stroke-width='1.3'/%3E%3C/svg%3E");
  /* the tick that starts a rule: a short 45° stroke in the structure colour */
  --tick:linear-gradient(-45deg,transparent calc(50% - .8px),var(--cool) calc(50% - .8px),var(--cool) calc(50% + .8px),transparent calc(50% + .8px));
  --m-ink:var(--ink);--m-red:var(--red);--m-sky:var(--cool);
}
html,html[data-theme=dark]{
  color-scheme:dark;
  --ground:#0a121f;--head:#070d18;--sheet:#101a2b;--card:#101a2b;--card-hover:#17243a;--panel:#070d18;--panel-2:#101a2b;
  --lift:#17243a;--field:#101a2b;--well:#070d18;--code:rgba(150,180,222,.1);--code-ground:#101a2b;--term:#050a13;
  --line:rgba(150,180,222,.14);--line-2:rgba(150,180,222,.28);--line-3:rgba(150,180,222,.5);--card-line:rgba(150,180,222,.14);--hover-wash:rgba(150,180,222,.06);
  --ink:#e8edf5;--ink-2:#aeb9cb;--ink-3:#8494ab;--doc-ink:#d9e0eb;
  --red-text:#ff6670;--red-line:rgba(255,102,112,.55);--red-wash:rgba(224,42,61,.14);
  --cool:#62b8f4;--cool-text:#62b8f4;--cool-line:rgba(98,184,244,.38);--cool-wash:rgba(98,184,244,.06);--sel:rgba(98,184,244,.32);
  --glow:rgba(224,42,61,.13);
  --tw0:#ffd24a;--tw1:#ffab2e;--tw2:#ee3346;--tw3:#b91c36;--tc0:#c4e8ff;--tc1:#6cc4f8;--tc2:#3a8fe0;--tc3:#2a5cb8;--tcn:#9fc0e8;--teg:#f4f8ff;
  --halo-o:.2;--glow-o:.55;--edge-w:1.7;
  --slash-reg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='96' y1='300' x2='396' y2='0'%3E%3Cstop offset='0' stop-color='%239fc0e8' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%239fc0e8' stop-opacity='0.36'/%3E%3Cstop offset='1' stop-color='%239fc0e8' stop-opacity='0.36'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='292' y1='300' x2='430' y2='162'%3E%3Cstop offset='0' stop-color='%2362b8f4' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%2362b8f4'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='214' y1='300' x2='440' y2='74'%3E%3Cstop offset='0' stop-color='%239fc0e8' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%239fc0e8' stop-opacity='0.26'/%3E%3Cstop offset='1' stop-color='%239fc0e8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M96 300 396 0' stroke='url(%23a)'/%3E%3Cpath d='M214 300 440 74' stroke='url(%23c)'/%3E%3Cpath d='M222 220 337.6 104.4' stroke='%23e02a3d' stroke-width='1.5'/%3E%3Ccircle cx='340' cy='102' r='3.4' stroke='%23e02a3d' stroke-width='1.4'/%3E%3Cpath d='M292 300 427.6 164.4' stroke='url(%23b)' stroke-width='1.3'/%3E%3Ccircle cx='430' cy='162' r='3.4' stroke='%2362b8f4' stroke-width='1.3'/%3E%3Cpath d='M372 262 424 210' stroke='%239fc0e8' stroke-opacity='0.30'/%3E%3C/svg%3E");
}
html[data-theme=light]{
  color-scheme:light;
  --ground:#eaeff5;--head:#eaeff5;--sheet:#fff;--card:#fff;--card-hover:#fff;--panel:#fff;--panel-2:#f4f7fb;
  --lift:#e2edf8;--field:#fff;--well:#eef3f9;--code:#eef3f9;--code-ground:#dde5ef;--term:#0b1526;
  --line:rgba(20,45,95,.15);--line-2:rgba(20,45,95,.3);--line-3:rgba(20,45,95,.6);--card-line:#c3cedd;--hover-wash:rgba(255,255,255,.6);
  --ink:#0d1a30;--ink-2:#36435a;--ink-3:#56637a;--doc-ink:#14213a;
  --red-text:#c41c32;--red-line:rgba(196,28,50,.6);--red-wash:rgba(224,42,61,.07);
  --cool:#3d9be3;--cool-text:#17609f;--cool-line:rgba(23,96,159,.4);--cool-wash:rgba(61,155,227,.08);--sel:#cfe4f8;
  --glow:rgba(61,155,227,.13);
  --tw0:#f8bc24;--tw1:#f29a1c;--tw2:#e62e40;--tw3:#bd1c34;--tc0:#8fcbf5;--tc1:#3d9be3;--tc2:#1f68b4;--tc3:#14305f;--tcn:#284a8a;--teg:#0d1a30;
  --halo-o:.04;--glow-o:0;--edge-w:1.9;
  --slash-reg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='96' y1='300' x2='396' y2='0'%3E%3Cstop offset='0' stop-color='%23284a8a' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23284a8a' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23284a8a' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='292' y1='300' x2='430' y2='162'%3E%3Cstop offset='0' stop-color='%233d9be3' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%233d9be3'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='214' y1='300' x2='440' y2='74'%3E%3Cstop offset='0' stop-color='%23284a8a' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23284a8a' stop-opacity='0.23'/%3E%3Cstop offset='1' stop-color='%23284a8a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M96 300 396 0' stroke='url(%23a)'/%3E%3Cpath d='M214 300 440 74' stroke='url(%23c)'/%3E%3Cpath d='M222 220 337.6 104.4' stroke='%23e02a3d' stroke-width='1.5'/%3E%3Ccircle cx='340' cy='102' r='3.4' stroke='%23e02a3d' stroke-width='1.4'/%3E%3Cpath d='M292 300 427.6 164.4' stroke='url(%23b)' stroke-width='1.3'/%3E%3Ccircle cx='430' cy='162' r='3.4' stroke='%233d9be3' stroke-width='1.3'/%3E%3Cpath d='M372 262 424 210' stroke='%23284a8a' stroke-opacity='0.27'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:light){
html:not([data-theme]){
  color-scheme:light;
  --ground:#eaeff5;--head:#eaeff5;--sheet:#fff;--card:#fff;--card-hover:#fff;--panel:#fff;--panel-2:#f4f7fb;
  --lift:#e2edf8;--field:#fff;--well:#eef3f9;--code:#eef3f9;--code-ground:#dde5ef;--term:#0b1526;
  --line:rgba(20,45,95,.15);--line-2:rgba(20,45,95,.3);--line-3:rgba(20,45,95,.6);--card-line:#c3cedd;--hover-wash:rgba(255,255,255,.6);
  --ink:#0d1a30;--ink-2:#36435a;--ink-3:#56637a;--doc-ink:#14213a;
  --red-text:#c41c32;--red-line:rgba(196,28,50,.6);--red-wash:rgba(224,42,61,.07);
  --cool:#3d9be3;--cool-text:#17609f;--cool-line:rgba(23,96,159,.4);--cool-wash:rgba(61,155,227,.08);--sel:#cfe4f8;
  --glow:rgba(61,155,227,.13);
  --tw0:#f8bc24;--tw1:#f29a1c;--tw2:#e62e40;--tw3:#bd1c34;--tc0:#8fcbf5;--tc1:#3d9be3;--tc2:#1f68b4;--tc3:#14305f;--tcn:#284a8a;--teg:#0d1a30;
  --halo-o:.04;--glow-o:0;--edge-w:1.9;
  --slash-reg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='300' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='96' y1='300' x2='396' y2='0'%3E%3Cstop offset='0' stop-color='%23284a8a' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%23284a8a' stop-opacity='0.32'/%3E%3Cstop offset='1' stop-color='%23284a8a' stop-opacity='0.32'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='292' y1='300' x2='430' y2='162'%3E%3Cstop offset='0' stop-color='%233d9be3' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%233d9be3'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='214' y1='300' x2='440' y2='74'%3E%3Cstop offset='0' stop-color='%23284a8a' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23284a8a' stop-opacity='0.23'/%3E%3Cstop offset='1' stop-color='%23284a8a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M96 300 396 0' stroke='url(%23a)'/%3E%3Cpath d='M214 300 440 74' stroke='url(%23c)'/%3E%3Cpath d='M222 220 337.6 104.4' stroke='%23e02a3d' stroke-width='1.5'/%3E%3Ccircle cx='340' cy='102' r='3.4' stroke='%23e02a3d' stroke-width='1.4'/%3E%3Cpath d='M292 300 427.6 164.4' stroke='url(%23b)' stroke-width='1.3'/%3E%3Ccircle cx='430' cy='162' r='3.4' stroke='%233d9be3' stroke-width='1.3'/%3E%3Cpath d='M372 262 424 210' stroke='%23284a8a' stroke-opacity='0.27'/%3E%3C/svg%3E");
}
}
html{background:var(--ground)}
body{background:var(--ground);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#page{overflow-x:clip}
::selection{background:var(--sel)}
/* a placeholder is text: the quiet ink, at full strength (Firefox would draw it at about half) */
::placeholder{color:var(--ink-3);opacity:1}
:focus-visible{outline:2px solid var(--cool-text);outline-offset:3px;border-radius:1px}
h1,h2,h3,h4,p{margin:0}
code{font-family:var(--mono);font-size:.9em}

/* ── header ─────────────────────────────────────────────────────────── */
.site-head{padding-inline:max(40px,calc((100% - 1200px)/2 + 40px));border-bottom:1px solid var(--line);background:var(--head);position:relative;z-index:3}
.wordmark{gap:10px}
.mark{display:block;width:24px;height:24px}
.st-mark{display:block;width:100%;height:100%}.mi{fill:var(--m-ink)}.mrs,.mis{fill:none;stroke-width:3.3;stroke-linejoin:miter;stroke:var(--m-red)}.mis{stroke:var(--m-ink)}.mr{fill:var(--m-red)}.ms{fill:var(--m-sky)}
.li,.lr,.ls{fill:none;stroke:var(--m-ink);stroke-linecap:butt;stroke-linejoin:miter}.lr{stroke:var(--m-red)}.ls{stroke:var(--m-sky)}
.wordmark-name{font-size:20px;font-weight:500;letter-spacing:-.01em}
.site-nav{align-self:stretch;margin-left:12px}
.site-nav a{display:flex;align-items:center;font-size:14.5px;color:var(--ink-2);position:relative}
.site-nav a:hover{color:var(--ink)}
.site-nav a.current{color:var(--ink)}
.site-nav a.current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red)}
.site-actions{margin-left:auto}
.link{color:var(--cool-text);font-size:14.5px;text-decoration:underline;text-decoration-color:var(--cool-line);text-underline-offset:4px;text-decoration-thickness:1px}
.link:hover{text-decoration-color:var(--cool-text)}
.site-actions .link{color:var(--ink-2);text-decoration:none}.site-actions .link:hover{color:var(--ink)}

.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border:1px solid var(--line-3);border-radius:2px;background:transparent;color:var(--ink);font-size:15px;font-weight:550;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}
.btn:hover{border-color:var(--ink);background:var(--hover-wash)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--on-red);font-weight:650}
.btn.primary:hover{background:var(--red-press);border-color:var(--red-press)}
.site-actions .btn{height:36px;padding:0 15px;font-size:14px}
/* one filled red button per view: on the home page the hero holds it, so the header's is drawn in outline */
[data-screen=home] .site-actions .btn.primary{background:transparent;color:var(--red-text);border-color:var(--red-line)}
[data-screen=home] .site-actions .btn.primary:hover{background:var(--red-wash);border-color:var(--red-text)}

/* ── home: shared ───────────────────────────────────────────────────── */
main.home>section{position:relative;padding-block:96px}
/* a section opens with a ruled line, and the line starts at a tick */
main.home>section+section::after{content:"";position:absolute;left:40px;right:40px;top:-5px;height:11px;
  background:var(--tick) 0 0/11px 11px no-repeat,linear-gradient(var(--line-2),var(--line-2)) 5px 5px/calc(100% - 5px) 1px no-repeat}
h2{font-size:36px;line-height:1.12;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.005em}
.section-lede{margin-top:16px;font-size:18px;line-height:1.55;color:var(--ink-2);max-width:38em;text-wrap:pretty}
.chip{display:inline-block;align-self:flex-start;padding:2px 8px;border:1px solid var(--line-2);border-radius:2px;font-size:12px;line-height:1.5;font-weight:550;color:var(--ink-2);white-space:nowrap}

/* ── hero ───────────────────────────────────────────────────────────── */
main.home>section.hero{min-height:720px;padding-block:0;gap:24px;align-items:stretch}
.hero-copy{align-self:center;padding-block:72px;position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:550;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";flex:none;width:22px;height:2px;background:var(--red);transform:rotate(-45deg)}
.hero h1{margin-top:26px;font-size:clamp(46px,6.1vw,82px);line-height:.98;font-weight:600;letter-spacing:-.035em}
.lede{margin-top:26px;font-size:19px;line-height:1.55;color:var(--ink-2);max-width:33em;text-wrap:pretty}
.hero-actions{margin-top:36px}
.install{flex-basis:100%;margin-top:6px}
.install code{display:inline-block;font-size:13.5px;color:var(--ink-2);padding:9px 14px 9px 0;overflow-wrap:anywhere}
.install code::before{content:"$";color:var(--ink-3);margin-right:10px}
.hero-art{min-height:0;margin-right:-40px}
.st-tower{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
/* the drawing's colours come from the theme */
.s-w0{stroke:var(--tw0)}.s-w1{stroke:var(--tw1)}.s-w2{stroke:var(--tw2)}.s-w3{stroke:var(--tw3)}
.s-c0{stroke:var(--tc0)}.s-c1{stroke:var(--tc1)}.s-c2{stroke:var(--tc2)}.s-c3{stroke:var(--tc3)}.s-cn{stroke:var(--tcn)}.s-gd{stroke:var(--ground)}
.f-w0{fill:var(--tw0)}.f-w1{fill:var(--tw1)}.f-w2{fill:var(--tw2)}.f-w3{fill:var(--tw3)}
.f-c0{fill:var(--tc0)}.f-c1{fill:var(--tc1)}.f-c2{fill:var(--tc2)}.f-c3{fill:var(--tc3)}.f-cn{fill:var(--tcn)}.f-gd{fill:var(--ground)}.f-eg{fill:var(--teg)}
.st-stop{stop-color:var(--teg)}.st-edge{stroke-width:var(--edge-w)}
.st-halo polygon{opacity:var(--halo-o)}.st-glow{opacity:var(--glow-o)}
/* the one moment of motion: plumb lines, the edge, floors from the ground up, then the strokes */
.st-assemble .st-dr{stroke-dasharray:1;animation:st-draw var(--t,.7s) cubic-bezier(.3,.7,.2,1) var(--d,0s) both}
.st-assemble .st-fd{animation:st-fade .7s ease-out var(--d,0s) both}
@keyframes st-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes st-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.st-dr,.st-fd{animation:none!important}*{transition:none!important}}

/* ── triad: one rule, a tick where each column starts ───────────────── */
.triad h2{max-width:16em}
.triad-cols{margin-top:56px;gap:0;background:linear-gradient(var(--line-2),var(--line-2)) 5px 0/calc(100% - 5px) 1px no-repeat}
.triad-col{position:relative;padding:26px 32px 0 0}
.triad-col+.triad-col{padding-left:32px;border-left:1px solid var(--line)}
.triad-col::before{content:"";position:absolute;top:-5px;left:-6px;width:11px;height:11px;background:var(--tick)}
.triad-col:first-child::before{left:0}
.triad-col p{margin-top:10px;color:var(--ink-2);font-size:16px;line-height:1.6}

/* ── start: the conversation ────────────────────────────────────────── */
.start-demo{margin-top:48px;gap:0;border:1px solid var(--card-line);background:var(--panel)}
.chat{padding:32px;gap:20px}
.msg p{font-size:16px;line-height:1.55}
.msg.bot{padding-left:16px;border-left:1px solid var(--line-2)}
.who{display:block;margin-bottom:4px;font-size:12.5px;font-weight:600;color:var(--cool-text)}
.msg.me{padding:12px 16px;background:var(--lift);border-right:2px solid var(--red)}
.controls{margin-top:16px;display:flex;flex-direction:column;gap:12px;max-width:380px}
.controls label{font-size:13.5px;color:var(--ink-2)}
.controls input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;margin:0;cursor:pointer}
.controls input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line-3)}
.controls input[type=range]::-moz-range-track{height:1px;background:var(--line-3)}
.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-6px;border-radius:50%;background:var(--panel);border:2px solid var(--red)}
.controls input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--red)}
.files{padding:32px;border-left:1px solid var(--card-line);background:var(--panel-2)}
.files h4{font-size:15px;font-weight:600;margin-bottom:14px}
.file-row{padding:9px 0;border-top:1px solid var(--line)}
.file-path{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.file-row:last-child .file-path{color:var(--ink)}
.file-row:last-child .chip{color:var(--cool-text);border-color:var(--cool-line)}
.start-ways{margin-top:56px;gap:32px}
.way{position:relative;display:block;padding:22px 0 0;border-top:1px solid var(--line-2)}
.way::before{content:"";position:absolute;top:-2px;left:0;width:36px;height:2px;background:var(--red);transition:width .2s}
.way:hover::before{width:100%}
.way p{margin-top:8px;color:var(--ink-2);font-size:15.5px;line-height:1.55}
.way code{color:var(--ink);background:var(--code-ground);padding:1px 6px}

/* ── cascade: a plumb line with a tick per stage ────────────────────── */
.cascade-stages{position:relative;margin-top:6px;border-left:1px solid var(--line-2)}
.cascade-stages li{position:relative;padding:18px 0 18px 26px;border-bottom:1px solid var(--line)}
.cascade-stages li:first-child{border-top:1px solid var(--line)}
.cascade-stages li::before{content:"";position:absolute;left:-6px;top:24px;width:11px;height:11px;background:var(--tick)}
.stage-dept{font-size:17px;font-weight:600;text-transform:capitalize}
.stage-role{font-family:var(--mono);font-size:12.5px;color:var(--cool-text)}
.stage-out{color:var(--ink-2);font-size:15.5px}

/* ── shelf and part cards ───────────────────────────────────────────── */
.shelf-head .link{display:inline-block;margin-top:18px;font-size:16px}
.shelf-row{margin-top:44px;gap:16px}
.part-card{padding:20px 20px 18px;background:var(--card);border:1px solid var(--card-line);border-radius:2px;transition:background .15s,border-color .15s}
.part-card:hover{background:var(--card-hover);border-color:var(--line-3)}
.part-card h3{font-size:16.5px}
.part-card p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.shelf-row .part-card{gap:10px;min-height:170px}

/* ── check: the terminal (navy in both themes) ──────────────────────── */
.terminal{background:var(--term);border:1px solid var(--term-line);border-radius:2px}
.terminal-body{padding:24px 26px;font-family:var(--mono);font-size:13px;line-height:1.9}
.t-line{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--term-ink-2);padding-left:2ch;text-indent:-2ch}
.t-line.cmd{color:var(--term-ink)}.t-line.ok{color:var(--ok)}.t-line.warn{color:var(--warn)}
.t-line.out{margin-top:10px;padding-top:10px;border-top:1px solid var(--term-line);color:var(--term-ink-2)}

/* ── closing: the one place the red is the ground — a red sheet with the cut corner, the same in both themes ── */
main.home>section.closing{padding:92px 104px 100px;margin-bottom:96px;z-index:0}
main.home>section.closing::after{display:none}
.closing::before{content:"";position:absolute;inset:0 40px;z-index:-1;pointer-events:none;
  background:var(--slash-close) right 0 bottom 0 no-repeat,var(--red);
  clip-path:polygon(0 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%)}
.closing h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.03em;max-width:11em;color:var(--close-ink)}
.closing .btn{border-color:var(--close-ink);color:var(--close-ink)}
/* under the pointer the red deepens: a white wash would take white text on it under 4.5:1 */
.closing .btn:hover{background:rgba(13,26,48,.2);border-color:var(--close-ink)}
.closing .btn.primary{background:var(--close-btn);border-color:var(--close-btn);color:var(--close-btn-ink)}
.closing .btn.primary:hover{background:#e9eef6;border-color:#e9eef6}
.closing :focus-visible{outline-color:#fff}

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot{position:relative;padding-block:56px 72px;color:var(--ink-2);font-size:14.5px}
.site-foot::before{content:"";position:absolute;left:40px;right:40px;top:0;height:1px;background:var(--line)}
.foot-brand .wordmark-name{color:var(--ink)}
.foot-brand p{margin-top:8px;color:var(--ink-3);max-width:22em}
.foot-cols h4{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:4px}
.foot-cols a:hover{color:var(--ink)}

/* ── registry ───────────────────────────────────────────────────────── */
main.registry>section,main.marks>section,main.demo-page>section{position:relative}
.reg-head,.marks-head,.demo-head{padding-block:72px 0}
.reg-head h1,.part-head h1,.marks-head h1,.demo-head h1,.lost-head h1{font-size:clamp(38px,4.6vw,56px);line-height:1.02;font-weight:600;letter-spacing:-.03em}
.reg-head .lede,.marks-head .lede,.demo-head .lede{margin-top:18px;max-width:36em}
/* a few long strokes in the head's empty right side: unequal, some fading, two ending in an open point */
.reg-head::before,.marks-head::before,.demo-head::before{content:"";position:absolute;right:40px;top:0;width:460px;height:300px;pointer-events:none;background:var(--slash-reg) no-repeat}
/* and a very soft glow in the corner behind them, running off the edge of the page */
.reg-head::after,.marks-head::after,.demo-head::after{content:"";position:absolute;top:0;right:calc((min(100vw,1200px) - 100vw)/2);width:620px;height:340px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 100% 0,var(--glow),transparent 68%)}
.reg-head>*,.marks-head>*,.demo-head>*{position:relative}
.reg-tools{margin-top:40px;gap:0}
.find{width:100%;max-width:520px;height:46px;padding:0 16px;background:var(--field);border:1px solid var(--line-2);border-radius:2px;font-size:15.5px;color:var(--ink)}
.find:focus-visible{outline-offset:1px}
.reg-kinds{margin-top:36px;gap:32px;border-bottom:1px solid var(--line-2)}
.reg-kinds a,.tabs a,.tabs button{position:relative;padding:12px 0;font-size:15px;font-weight:550;color:var(--ink-2)}
.tabs button{border:0;background:none;cursor:pointer;font-family:inherit;line-height:inherit}
.reg-kinds a:hover,.tabs a:hover,.tabs button:hover{color:var(--ink)}
.reg-kinds a.current,.tabs a.current,.tabs button.current{color:var(--ink)}
.reg-kinds a.current::after,.tabs a.current::after,.tabs button.current::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red)}
.reg-kinds .count{font-size:13px;font-weight:450;color:var(--ink-3);font-variant-numeric:tabular-nums}
.reg-group{padding-block:56px 0}
.reg-group:last-child{padding-bottom:104px}
.group-head{padding-bottom:14px;margin-bottom:20px;position:relative;flex-wrap:wrap;gap:4px 16px;
  background:linear-gradient(var(--line-2),var(--line-2)) 5px 100%/calc(100% - 5px) 1px no-repeat}
.group-head::before{content:"";position:absolute;left:0;bottom:-5px;width:11px;height:11px;background:var(--tick)}
.group-head h2{font-size:24px;letter-spacing:-.015em}
.group-head p{color:var(--ink-3);font-size:15px}
.part-grid{gap:14px}
.part-grid .part-card{min-height:156px}
.part-meta{padding-top:10px;gap:6px 6px;align-items:center}
.tag{display:inline-block;padding:1px 7px;border:1px solid var(--line);border-radius:2px;font-size:12px;line-height:1.55;color:var(--ink-2)}
.posture{font-size:12.5px;color:var(--ink-3);flex-basis:100%}
.flow{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--ink-3)}
.used{font-size:12.5px;color:var(--ink-3)}

/* ── part page ──────────────────────────────────────────────────────── */
main.part{padding-block:28px 104px}
.crumbs{font-size:14px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2)}.crumbs a:hover{color:var(--cool-text)}
.crumbs a::after{content:"/";margin-left:10px;color:var(--ink-3)}
.part-layout{margin-top:40px;gap:64px}
.part-head h1{margin-top:16px}
.part-head .lede{margin-top:14px}
.get{margin-top:32px;padding:6px 6px 6px 18px;background:var(--field);border:1px solid var(--line-2);border-radius:2px}
.get code{font-size:14px;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.get code::before{content:"$";color:var(--ink-3);margin-right:10px}
.get .btn{height:34px;padding:0 14px;font-size:13.5px}
.tabs{margin-top:40px;gap:28px;border-bottom:1px solid var(--line-2)}
.part-side{gap:0;padding-top:6px;font-size:14.5px}
.part-side section{padding:20px 0 22px;border-top:1px solid var(--line)}
.part-side section:first-child{border-top-color:var(--line-2)}
.part-side h4,.guide-toc h4{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:10px}
.part-side .posture{font-size:15px;line-height:1.5;color:var(--ink)}
.part-side .tags{margin-top:0}
.part-side .tag{font-family:var(--mono);font-size:12px}
.rel{padding:8px 0}
.rel strong{font-weight:600;color:var(--cool-text)}
.rel:hover strong{text-decoration:underline;text-underline-offset:3px}
.rel span{font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.facts dt{color:var(--ink-3)}
.facts dd{color:var(--ink-2);overflow-wrap:anywhere}
.facts dd a{color:var(--cool-text);text-decoration:underline;text-decoration-color:var(--cool-line);text-underline-offset:3px}

/* ── the sheet: what you read lies on a sheet one step off the ground, with one corner cut at 45° ── */
.document{position:relative;max-width:none;padding:44px 52px 52px;background:var(--sheet);border:1px solid var(--card-line);
  clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
.document::after{content:"";position:absolute;top:-1px;right:-1px;width:30px;height:30px;pointer-events:none;
  background:linear-gradient(to top right,transparent calc(50% - 2px),var(--cool) calc(50% - 2px),var(--cool) calc(50% + .5px),transparent calc(50% + .5px))}
.part .document{margin-top:28px}
.document>*{max-width:68ch}

/* ── the document: calm, for long reading ───────────────────────────── */
.document{font-size:17px;line-height:1.7;color:var(--doc-ink)}
.document>*+*{margin-top:1.05em}
.document h1{font-size:34px;line-height:1.15;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.document h2{margin-top:2.1em;font-size:23px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.document h3{margin-top:1.8em;font-size:17.5px;font-weight:650;color:var(--ink)}
.document h1+*,.document h2+*,.document h3+*{margin-top:.7em}
.document p{text-wrap:pretty}
.document strong{font-weight:650;color:var(--ink)}
.document em{color:var(--ink)}
.document a{color:var(--cool-text);text-decoration:underline;text-decoration-color:var(--cool-line);text-underline-offset:3px;text-decoration-thickness:1px}
.document a:hover{text-decoration-color:var(--cool-text)}
.document ul{padding-left:1.25em;list-style:none}
.document li{position:relative}
.document li+li{margin-top:.5em}
.document li::before{content:"";position:absolute;left:-1.2em;top:.82em;width:7px;height:1px;background:var(--ink-3)}
.document code{padding:1px 5px;background:var(--code);border-radius:2px;font-size:.86em;color:var(--ink)}
.document pre{padding:16px 20px;background:var(--well);border:1px solid var(--line);border-radius:2px;overflow-x:auto;line-height:1.6}
.document pre code{padding:0;background:none;font-size:13.5px;color:var(--ink-2)}

/* ── guide ──────────────────────────────────────────────────────────── */
.guide-layout{padding-block:56px 112px;gap:52px;max-width:1280px}
@media (min-width:901px){.guide-layout{grid-template-columns:212px minmax(0,1fr) 188px}}
.guide-nav{gap:1px;font-size:14.5px}
.guide-nav h4{margin:26px 0 8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.guide-links h4:first-child{margin-top:4px}
.guide-nav a{position:relative;padding:5px 0 5px 16px;color:var(--ink-2);border-left:1px solid var(--line-2)}
.guide-nav a:hover{color:var(--ink)}
.guide-nav a.current{color:var(--ink);font-weight:600}
/* where you are: one short red 45° stroke */
.guide-nav a.current::before{content:"";position:absolute;left:-7px;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--red);transform:rotate(-45deg)}
.guide-doc{justify-self:center;width:100%}
.guide-toc{gap:2px;padding-left:18px;border-left:1px solid var(--line);font-size:13.5px}
.guide-toc h4{margin-bottom:8px}
.guide-toc a{padding:4px 0;color:var(--ink-2);line-height:1.4}
.guide-toc a:hover{color:var(--cool-text)}
.guide-next{display:flex;justify-content:flex-end;max-width:none!important;margin-top:64px!important;padding-top:28px;border-top:1px solid var(--line)}
.document .guide-next a{display:flex;flex-direction:column;gap:2px;min-width:240px;padding:14px 18px;border:1px solid var(--line-2);border-radius:2px;text-decoration:none;color:var(--ink)}
.document .guide-next a:hover{border-color:var(--cool-text);background:var(--cool-wash)}
.guide-next span{font-size:13px;color:var(--ink-3)}
.guide-next strong{font-size:16.5px;font-weight:600;color:var(--cool-text)}

/* ── the mark study ─────────────────────────────────────────────────── */
.marks-sheet{padding-block:56px 104px}
.st-marks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.st-cand{margin:0}
.st-sws{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2)}
.st-chosen .st-sws{border-color:var(--red)}
.st-sw{display:flex;flex-direction:column;align-items:center;gap:30px;padding:40px 24px 26px}
.st-sw-dark{background:#0a121f;color:#e8edf5;--m-ink:#f4f8ff;--m-sky:#62b8f4}
.st-sw-light{background:#eaeff5;color:#0d1a30;--m-ink:#0d1a30;--m-sky:#3d9be3}
.st-m-lg{display:block;width:160px;height:160px}.st-m-24{display:block;width:24px;height:24px}.st-m-16{display:block;width:16px;height:16px}
.st-m-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:190px}
.st-lock{display:flex;align-items:center;gap:10px}
.st-cand figcaption{margin-top:14px}
.st-cand figcaption strong{font-size:17px;font-weight:600}
.st-pick{margin-left:12px;font-size:13px;font-weight:600;color:var(--red-text)}
.st-cand figcaption p{margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:34em}

/* ── narrow ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .site-head{padding-inline:20px}
  main.home>section{padding-block:64px}
  main.home>section+section::after{left:20px;right:20px}
  main.home>section.hero{min-height:0;gap:0}
  .hero-copy{padding-block:56px 8px}
  .hero-art{min-height:440px;margin-right:0}
  .lede{font-size:18px}
  h2{font-size:29px}
  .section-lede{font-size:17px}
  .triad-cols{margin-top:36px;background:none}
  .triad-col,.triad-col+.triad-col{padding:22px 0 26px;border-left:0;background:linear-gradient(var(--line-2),var(--line-2)) 5px 0/calc(100% - 5px) 1px no-repeat}
  .triad-col::before,.triad-col:first-child::before{left:0}
  .start-demo{margin-top:36px}
  .chat,.files{padding:22px 18px}
  .files{border-left:0;border-top:1px solid var(--card-line)}
  .start-ways{margin-top:40px;gap:28px}
  .cascade,.check{gap:36px}
  .cascade-stages li{gap:3px;padding-block:16px}
  .cascade-stages li::before{top:22px}
  .shelf-row .part-card,.part-grid .part-card{min-height:0}
  main.home>section.closing{padding:60px 44px 64px;margin-bottom:64px}
  .closing::before{inset:0 20px;background-position:right -190px bottom 0,0 0;clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,0 100%)}
  .reg-head::before,.marks-head::before,.demo-head::before{display:none}
  .reg-head::after,.marks-head::after,.demo-head::after{right:0;width:100%}
  .terminal-body{padding:18px 16px;font-size:12px}
  .reg-head,.marks-head,.demo-head{padding-top:48px}
  .reg-kinds{gap:6px 22px}
  .reg-group{padding-top:44px}
  .part-layout{gap:48px;margin-top:28px}
  .document{padding:28px 20px 32px;font-size:16.5px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
  .document::after{width:22px;height:22px}
  .part .document{margin-inline:-8px}
  .document h1{font-size:29px}
  .guide-layout{padding-block:28px 72px;gap:20px}
  /* one column that cannot be stretched by a wide code block */
  .guide-layout,.part-layout{grid-template-columns:minmax(0,1fr)}
  .guide-nav{padding-bottom:24px;border-bottom:1px solid var(--line)}
  .guide-next{justify-content:stretch}.document .guide-next a{flex:1}
  .site-foot{padding-block:44px 56px}
  .site-foot::before{left:20px;right:20px}
  .marks-sheet{padding-block:40px 72px}
  .st-marks{grid-template-columns:1fr;gap:40px}
}
@media (max-width:520px){
  .site-actions .btn{padding:0 12px;font-size:13.5px}
  .hero-actions .btn{flex:1 1 auto}
  .closing::before{background:var(--red)}
  main.home>section.closing{padding-inline:40px}
  .get{flex-wrap:wrap;padding:12px 14px}
  .st-sw{padding:28px 12px 20px;gap:22px}
  .st-m-lg{width:120px;height:120px}
  .st-m-row{flex-direction:column;gap:14px}
}

/* ── the genesis portal (create · create-voice · create-done) ─────────── */
.portal-head{display:flex;align-items:center;gap:20px;height:56px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--head);position:relative;z-index:3}
.portal-where{font-size:14.5px;color:var(--ink-2);padding-left:20px;border-left:1px solid var(--line-2)}
.portal-where:empty{display:none}
.portal-states{display:flex;gap:4px;margin-left:auto;padding:3px;border:1px dashed var(--line-2);border-radius:2px}
.portal-states a{padding:4px 10px;font-size:12.5px;color:var(--ink-3)}
.portal-states a.current{color:var(--ink);background:var(--lift)}
.portal-actions .link{color:var(--ink-2);text-decoration:none;font-size:14px}
.portal>section{max-width:none;margin:0;padding:0}

/* the opening: the invitation is the form */
.portal-open{padding:0 24px 96px}
.portal-open .open-hero{position:relative;max-width:760px;margin:0 auto;padding:88px 0 0}
.portal-open .open-hero::before{content:"";position:absolute;right:-380px;top:10px;width:460px;height:300px;background:var(--slash-reg) no-repeat right top;pointer-events:none}
.open-hero h1{margin-top:22px;font-size:clamp(40px,5.6vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.open-hero .lede{max-width:36em}
.open-composer{margin-top:40px;padding:24px 24px 20px;background:var(--sheet);border:1px solid var(--card-line);position:relative}
.open-composer::after{content:"";position:absolute;top:-1px;right:-1px;width:26px;height:26px;background:linear-gradient(225deg,var(--ground) calc(50% - 1px),var(--cool) calc(50% - 1px),var(--cool) calc(50% + .6px),transparent calc(50% + .6px));pointer-events:none}
.open-composer label{display:block;font-size:17px;line-height:1.5;color:var(--ink);max-width:34em}
.open-composer textarea{display:block;width:100%;margin-top:16px;padding:14px 16px;background:var(--well);border:1px solid var(--line-2);border-radius:2px;font:inherit;font-size:17px;line-height:1.55;color:var(--ink);resize:vertical}
.open-composer textarea:focus-visible,.composer input:focus-visible,.take-mail input:focus-visible{outline:2px solid var(--cool-text);outline-offset:1px}
.open-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.open-note{font-size:14px;color:var(--ink-3)}
.open-doors{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:28px;border-top:1px solid var(--line)}
.door{padding:18px 20px 4px 0}.door+.door{padding-left:20px;border-left:1px solid var(--line)}
.door h3{font-size:15.5px;font-weight:600}.door p{margin-top:4px;font-size:14.5px;color:var(--ink-2)}
.door:hover h3{color:var(--red-text)}
.portal-open .open-get{max-width:1040px;margin:96px auto 0;padding-top:36px;border-top:1px solid var(--line);position:relative}
.portal-open .open-get::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;background:var(--tick)}
.open-get h2{font-size:26px;font-weight:600;letter-spacing:-.015em}
.get-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:24px}
.get-cols h3{font-size:16.5px;font-weight:600}.get-cols p{margin-top:6px;font-size:15.5px;color:var(--ink-2);text-wrap:pretty}

/* the working surface: the rail, the conversation, the document, the log */
.portal-work{display:grid;grid-template-columns:232px minmax(380px,1fr) minmax(360px,.92fr);grid-template-rows:minmax(0,1fr) auto;height:calc(100vh - 57px);min-height:620px}
.portal-rail{grid-row:1;overflow:auto;padding:20px 0 24px;border-right:1px solid var(--line);background:var(--head)}
.rail-head{display:flex;flex-direction:column;padding:0 20px 16px}
.rail-head strong{font-size:16px;font-weight:600}.rail-head span{font-size:12.5px;color:var(--ink-3)}
.rail-sec{padding:6px 0 10px;border-top:1px solid var(--line)}
.rail-sec h4{display:flex;justify-content:space-between;padding:8px 20px 6px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rail-sec h4 .count{letter-spacing:0;font-weight:500}
.rail-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 16px 5px 20px;font-size:14.5px;color:var(--ink-2);position:relative}.rail-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rail-row .chip{flex:none}
.rail-row:hover{background:var(--hover-wash);color:var(--ink)}
.rail-row .chip{font-size:10.5px;padding:0 6px;color:var(--ink-3);border-color:var(--line)}
.rail-row.current{color:var(--ink);background:var(--lift)}
.rail-row.current::before{content:"";position:absolute;left:7px;top:50%;width:9px;height:2px;background:var(--red);transform:translateY(-50%) rotate(-45deg)}
.rail-row.fresh .rail-name::after{content:"";display:inline-block;width:5px;height:5px;margin-left:8px;border-radius:50%;background:var(--cool);vertical-align:middle}
.rail-note{padding:14px 20px 0;font-size:13px;line-height:1.5;color:var(--ink-3);border-top:1px solid var(--line)}
.portal-chat{grid-row:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.portal .portal-chat{padding:0}
.chat-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:22px;padding:28px 36px 20px}
.portal-chat .msg.bot{max-width:none}
.ctl-card{margin-top:18px;padding:18px 22px 18px;background:var(--panel);border:1px solid var(--card-line);display:flex;flex-direction:column;gap:8px}
.ctl{display:grid;gap:2px}
.ctl-head{display:flex;align-items:baseline;gap:10px;font-size:14px}
.ctl-head strong{font-weight:600;min-width:86px}.ctl-stop{color:var(--ink-2)}
.ctl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;margin:0;cursor:pointer}
.ctl input[type=range]::-webkit-slider-runnable-track{height:1px;background:var(--line-3)}
.ctl input[type=range]::-moz-range-track{height:1px;background:var(--line-3)}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;margin-top:-7px;border-radius:50%;background:var(--panel);border:2px solid var(--red)}
.ctl input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--panel);border:2px solid var(--red)}
.ctl input[type=range]:focus-visible{outline:2px solid var(--cool-text);outline-offset:2px}
.ctl-row{display:grid;grid-template-columns:64px 1fr 76px;align-items:center;gap:12px;font-size:12px;color:var(--ink-3)}.ctl-row span:last-child{text-align:right}
.ctl-toggles{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.ctl-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.ctl-toggle input{width:15px;height:15px;accent-color:var(--red)}
.ctl-preview{padding-top:14px;border-top:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.ctl-preview small{display:block;margin-bottom:4px;font-size:12px;color:var(--ink-3)}
.composer{display:flex;gap:10px;align-items:center;margin:0 36px 22px;padding:8px;border:1px solid var(--line-2);background:var(--field)}
.composer input{flex:1;min-width:0;height:40px;padding:0 10px;border:0;background:transparent;font:inherit;color:var(--ink)}
.composer .btn{height:40px}.composer .send{border-color:var(--line-2);color:var(--ink-2);font-weight:500}
.portal-doc{grid-row:1;min-width:0;overflow:auto;padding:20px 28px 28px;border-left:1px solid var(--line);background:var(--ground)}
.doc-head{display:flex;align-items:center;gap:12px;padding-bottom:14px}
.doc-path{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.chip.compiled{color:var(--cool-text);border-color:var(--cool-line)}
.portal-doc .document{padding:32px 36px 36px;font-size:16px}
.portal-doc .document h1{font-size:28px}.portal-doc .document h2{font-size:19px;margin-top:1.6em}
.portal-doc .document ul{margin-top:.9em;padding-left:1.1em}.portal-doc .document li{margin-top:.3em}
.portal-doc .document p{margin-top:.8em}
.portal-log{grid-column:1/-1;display:flex;align-items:center;gap:20px;min-height:36px;padding:6px 24px;border-top:1px solid var(--line);background:var(--head);font-family:var(--mono);font-size:12px;color:var(--ink-3);overflow:hidden}
.log-state{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.log-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cool)}
.log-lines{display:flex;gap:22px;white-space:nowrap}.log-sign{display:inline-block;width:1.2em;color:var(--cool-text)}
.log-line:last-child{color:var(--ink)}
/* the company stands: take it */
.take-card{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding:22px;background:var(--panel);border:1px solid var(--card-line);position:relative}
.take-note{flex-basis:100%;font-size:14px;color:var(--ink-2)}
.take-mail{flex-basis:100%;padding-top:16px;margin-top:6px;border-top:1px solid var(--line)}
.take-mail label{display:block;font-size:14px;color:var(--ink-2)}
.take-mail div{display:flex;gap:10px;margin-top:8px;max-width:440px}
.take-mail input{flex:1;min-width:0;height:44px;padding:0 12px;background:var(--well);border:1px solid var(--line-2);border-radius:2px;font:inherit;color:var(--ink)}
.take-next{margin:22px 0 0;padding:0;list-style:none;counter-reset:n;display:grid;gap:10px}
.take-next li{counter-increment:n;display:grid;grid-template-columns:22px 1fr;font-size:15px;color:var(--ink-2)}
.take-next li::before{content:counter(n);font-family:var(--mono);font-size:12.5px;color:var(--ink-3);padding-top:2px}
.take-next strong{color:var(--ink);font-weight:600}
@media (max-width:1100px){.portal-work{grid-template-columns:200px minmax(0,1fr);height:auto}.portal-doc{display:none}.portal-states{display:none}}
@media (max-width:760px){.portal-work{grid-template-columns:1fr}.portal-rail{display:none}.chat-scroll{padding:20px 20px 16px}.composer{margin:0 20px 18px}.portal-open .open-hero{padding-top:48px}.portal-open .open-hero::before{display:none}.get-cols,.open-doors{grid-template-columns:1fr}.door+.door{padding-left:0;border-left:0;border-top:1px solid var(--line)}.open-row{flex-direction:column;align-items:stretch}.portal-head{padding:0 16px}.portal-where{display:none}}
@media (prefers-reduced-motion:no-preference){.rail-row.fresh .rail-name::after{animation:st-pulse 2.4s ease-in-out infinite}}
@keyframes st-pulse{50%{opacity:.35}}

/* ── small controls: copy, the theme switch ─────────────────────────── */
.copy,.theme-switch{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:2px;background:transparent;font-size:12.5px;font-weight:550;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.copy:hover,.theme-switch:hover{border-color:var(--ink);color:var(--ink)}
.copy.copied{color:var(--cool-text);border-color:var(--cool-line)}
.install{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
/* the switch is the last thing in the header's nav: at the right of the links, and the last row of the menu's panel */
.site-nav .theme-switch{align-self:center;margin-left:auto}

/* ── the header menu: a button below 900px; the nav opens as a panel under the bar ── */
.menu{display:none;position:relative;flex:none;width:36px;height:36px;padding:0;border:1px solid var(--line-3);border-radius:2px;background:transparent;cursor:pointer}
.menu:hover{border-color:var(--ink);background:var(--hover-wash)}
.menu span,.menu span::before,.menu span::after{content:"";position:absolute;left:9px;width:16px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu span{top:50%;margin-top:-1px}
.menu span::before{left:0;top:-5px}.menu span::after{left:0;top:5px}
.site-head.open .menu span{background:transparent}
.site-head.open .menu span::before{transform:translateY(5px) rotate(45deg)}
.site-head.open .menu span::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:900px){
  .menu{display:block}
  .site-actions{gap:12px}
  .site-head.open .site-nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px 20px 14px;gap:0;background:var(--head);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -12px rgba(0,0,0,.35)}
  .site-head.open .site-nav a{padding:13px 0 13px 20px;font-size:16px;border-top:1px solid var(--line)}
  .site-head.open .site-nav a:first-child{border-top:0}
  .site-head.open .site-nav a.current::after{display:none}
  .site-head.open .site-nav a.current::before{content:"";position:absolute;left:0;top:50%;width:13px;height:2px;margin-top:-1px;background:var(--red);transform:rotate(-45deg)}
  .site-head.open .site-nav .theme-switch{align-self:flex-start;height:36px;margin:10px 0 0 20px;font-size:14px}
}
@media (max-width:520px){.site-actions{gap:8px}.site-actions .btn{padding:0 10px}}

/* ── the guide menu: plain on a desktop, a disclosure on a phone ───────── */
.guide-menu summary{display:none}
.guide-links{display:flex;flex-direction:column;gap:1px}
@media (max-width:900px){
  .guide-nav{padding-bottom:0;border-bottom:0}
  .guide-menu summary{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--sheet);font-size:15px;line-height:1.4;list-style:none;cursor:pointer}
  .guide-menu summary::-webkit-details-marker{display:none}
  .guide-menu summary::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  .guide-menu[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .guide-menu-where,.guide-menu-sep{color:var(--ink-3)}
  .guide-menu summary strong{font-weight:600;color:var(--ink)}
  .guide-menu[open] summary{border-bottom-color:var(--line)}
  .guide-menu[open] .guide-links{padding:10px 14px 16px;border:1px solid var(--line-2);border-top:0;background:var(--sheet)}
}

/* ── the part page: Source, and the other files in the folder ─────────── */
.source{margin:28px 0 0;padding:28px 32px;background:var(--well);border:1px solid var(--card-line);border-radius:2px;overflow:auto;font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.source code{font-size:inherit}
.more-files{margin-top:44px}
.more-files h4{font-size:13px;font-weight:600;color:var(--ink-3);padding-bottom:10px;margin-bottom:0;position:relative;background:linear-gradient(var(--line-2),var(--line-2)) 5px 100%/calc(100% - 5px) 1px no-repeat}
.more-files h4::before{content:"";position:absolute;left:0;bottom:-5px;width:11px;height:11px;background:var(--tick)}
.more-file+.more-file{border-top:1px solid var(--line)}
.more-file summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;padding:14px 0;list-style:none;cursor:pointer;font-size:15.5px;font-weight:600;color:var(--ink)}
.more-file summary::-webkit-details-marker{display:none}
.more-file summary::before{content:"";flex:none;align-self:center;width:7px;height:7px;margin-right:-4px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s}
.more-file[open] summary::before{transform:rotate(45deg)}
.more-file summary:hover{color:var(--cool-text)}
.more-file summary code{font-size:12.5px;font-weight:400;color:var(--ink-3)}
.part .more-file .document{margin:4px 0 24px}

/* ── the registry's kinds row: a link scrolls to its group, and the row stays in sight ───────────────────────
   The row is the foot of the head, so the head sticks with everything above the row off the top of the window
   (site.js measures how much, and the row's height). The row has the page's ground; groups scroll under it. */
.reg-group{scroll-margin-top:calc(var(--reg-row,0px) + 20px)}
main.registry>.reg-head{position:sticky;top:var(--reg-stick,auto);z-index:2}
main.registry>.reg-head::after{display:none}
.reg-kinds{background:var(--ground)}
@media (max-width:900px){
  .reg-kinds{flex-wrap:nowrap;gap:22px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
  .reg-kinds::-webkit-scrollbar{display:none}
  .reg-kinds a{flex:none;white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ── the recorded demo: the portal's frames in a stage, a caption, the scrubber ── */
.demo{margin-top:48px}
.demo-stage{position:relative;border:1px solid var(--card-line);background:var(--ground);overflow:hidden}
.demo-stage .portal-head{height:52px;padding:0 20px}
.portal-count{display:none;font-size:13px;color:var(--ink-3);padding-left:16px;border-left:1px solid var(--line-2);white-space:nowrap}
/* one height for every frame, and tall enough that the tallest thing a frame shows — the voice card — is whole */
.demo-stage .portal-work,.demo-stage .portal-open{height:720px;min-height:0}
.demo-stage .ctl-card{padding:14px 20px;gap:4px}
.demo-stage .ctl-toggles{margin-top:4px;padding-top:10px;gap:6px 20px}
.demo-stage .ctl-preview{padding-top:10px}
.sheet-close{display:none}
.demo-stage .portal-open{overflow:auto;padding:0 24px 32px}
.demo-stage .portal-open .open-hero{max-width:680px;padding-top:40px}
.demo-stage .open-hero::before{display:none}
.demo-stage .open-hero h1{margin-top:16px;font-size:clamp(28px,3.2vw,40px)}
.demo-stage .open-hero .lede{margin-top:14px;font-size:16px}
.demo-stage .open-composer{margin-top:24px;padding:18px 18px 16px}
.demo-stage .open-composer label{font-size:15.5px}
.demo-stage .open-composer textarea{margin-top:12px;font-size:15.5px;resize:none}
.demo-stage .btn.pressed{background:var(--red-press);border-color:var(--red-press)}
.demo-stage .doc-head:only-child .doc-path{color:var(--ink-3)}
.choice{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;max-width:560px}
.choice li{display:grid;gap:2px;padding:10px 14px;border:1px solid var(--line-2);border-radius:2px;background:var(--panel)}
.choice strong{font-weight:600;color:var(--ink)}
.choice span{font-size:14px;line-height:1.45;color:var(--ink-2)}
.demo-caption{margin-top:16px;min-height:3em;font-size:16.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.demo-bar{display:flex;align-items:flex-start;gap:20px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
/* hidden until the player takes it: without scripts there is no bar, only the first frame */
.demo-bar[hidden]{display:none}
.demo-play{height:36px;min-width:78px;padding:0 14px;font-size:14px;flex:none}
.demo-steps{list-style:none;margin:0;padding:0;display:flex;flex:1;gap:12px;min-width:0}
.demo-steps li{flex:1 1 0;min-width:0}
.demo-steps button{position:relative;display:block;width:100%;padding:4px 0 10px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink-3);font-family:inherit;line-height:1.3}
.demo-steps .n{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.demo-steps .t{display:block;margin-top:2px;font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-steps button:hover .t{color:var(--ink)}
.demo-steps button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)}
.demo-steps .fill{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);z-index:1}
.demo-steps button.done .fill{width:100%;background:var(--line-3)}
.demo-steps button[aria-current] .n{color:var(--red-text)}
.demo-steps button[aria-current] .t{color:var(--ink);font-weight:600}
.demo:not(.playing) .demo-steps button[aria-current] .fill{width:100%}
.demo-head h1{max-width:12em}
.demo-body{padding-block:40px 0}
.demo-body .demo{margin-top:0}
.demo-foot{padding-block:64px 104px}
/* narrower than three columns (§6.8): the rail folds into a count in the bar, and the frame where a file lands shows
   the document as a sheet over the conversation, as /create does */
@media (max-width:1240px){
  .portal-count{display:inline}
  .demo-stage .portal-work{grid-template-columns:200px minmax(0,1fr)}
  .demo-stage .portal-chat{grid-area:1/2}
  .demo-stage .portal-doc{display:none}
  .demo-stage .sheet .portal-doc{display:block;grid-area:1/2;z-index:1;padding:0 20px 28px;border-left:0}
  .demo-stage .sheet .doc-head{margin:0 -20px;padding:12px 20px;border-bottom:1px solid var(--line)}
  .demo-stage .sheet .doc-path{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .demo-stage .sheet .sheet-close{display:inline-flex;align-items:center;margin-left:auto;height:34px;padding:0 14px;border:1px solid var(--line-3);border-radius:2px;font-size:14px;font-weight:550;color:var(--ink)}
  .demo-stage .sheet .document{margin-top:16px;padding:24px 20px 28px;font-size:16px}
}
@media (max-width:1240px) and (prefers-reduced-motion:no-preference){.demo-stage .sheet .portal-doc{animation:demo-sheet .3s cubic-bezier(.3,.7,.2,1) .3s both}}
@keyframes demo-sheet{from{opacity:0;transform:translateY(28px)}}
@media (max-width:900px){
  .demo{margin-top:36px}
  .demo-stage .portal-head{padding:0 16px}
  .demo-stage .portal-open{padding:0 16px 24px}
  .demo-stage .portal-open .open-hero{padding-top:28px}
  .demo-caption{font-size:15.5px}
  .demo-bar{flex-wrap:wrap;gap:12px 16px}
  .demo-steps{flex-basis:100%;gap:8px}
  .demo-foot{padding-block:48px 72px}
}
/* a phone: one column, the frame about as tall as a phone's screen; the card is set tighter so it is seen whole */
@media (max-width:760px){
  .demo-stage .portal-work,.demo-stage .portal-open{height:700px}
  .demo-stage .portal-work{grid-template-columns:minmax(0,1fr)}
  .demo-stage .portal-chat,.demo-stage .sheet .portal-doc{grid-area:1/1}
  .demo-stage .sheet .portal-doc{padding-inline:16px}
  .demo-stage .sheet .doc-head{margin-inline:-16px;padding-inline:16px}
  .demo-stage .chat-scroll{padding:18px 16px 14px;gap:18px}
  .demo-stage .composer{margin:0 16px 14px}
  .demo-stage .msg.bot{padding-left:12px}
  .demo-stage .log-lines{display:none}
  .demo-stage .ctl-card{margin-top:14px;padding:12px 14px;gap:2px}
  .demo-stage .ctl-head{display:block;font-size:13.5px}
  .demo-stage .ctl-head strong{display:inline;min-width:0;margin-right:8px}
  .demo-stage .ctl-row{grid-template-columns:auto 1fr auto;gap:10px}
  .demo-stage .ctl-toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
  .demo-stage .ctl-toggle{font-size:13.5px;align-items:flex-start}
  .demo-stage .ctl-preview{font-size:15.5px;line-height:1.45}
  .demo-stage .open-composer textarea{height:178px}
}
@media (max-width:520px){.demo-steps .t{display:none}.demo-steps button{padding-bottom:8px}.demo-stage .portal-actions{display:none}}

/* ── the page an address with nothing behind it gets ────────────────── */
main.lost>section{position:relative}
.lost-head{padding-block:104px 136px}
.lost-head h1{margin-top:24px;max-width:14em}
.lost-head .lede{max-width:34em}
@media (max-width:900px){.lost-head{padding-block:64px 88px}}

/* ── states: what the pointer and the keyboard see ──────────────────── */
.foot-cols a,.site-nav a,.site-actions .link,.crumbs a,.guide-nav a,.guide-toc a{transition:color .12s}
.part-card:focus-visible,.way:focus-visible,.rel:focus-visible,.door:focus-visible{outline-offset:2px}
.way:focus-visible::before{width:100%}
.btn:active{transform:translateY(1px)}
.btn.primary:focus-visible{outline-offset:3px}
.guide-menu summary:focus-visible,.more-file summary:focus-visible{outline-offset:2px}
/* the stage of the demo is a picture of the product, not the product: nothing in it takes the pointer */
.demo-stage [class]{cursor:default}
.demo-stage .chat-scroll,.demo-stage .portal-rail,.demo-stage .portal-doc,.demo-stage .portal-open{scrollbar-width:none}
.demo-stage ::-webkit-scrollbar{display:none}

/* ── without scripts (<html class="no-js">, set by the build and taken off by the first script) ───────────────
   The theme is the system's (the build repeats the light tokens under prefers-color-scheme). The nav is a second
   row of the bar below 900px, since nothing can open a panel. Controls that only a script answers are not shown;
   a part's three panels are all open, each under its tab's name. */
.no-js .menu,.no-js .copy,.no-js [data-copy],.no-js .find,.no-js .tabs{display:none}
.no-js .part [role=tabpanel][hidden]{display:block}
.no-js .part pre[role=tabpanel]::before{display:block;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:15px;font-weight:550;color:var(--ink)}
.no-js #part-source::before{content:"Source"}
.no-js #part-manifest::before{content:"Manifest"}
@media (max-width:900px){
  .no-js .site-head{height:auto;flex-wrap:wrap;row-gap:0;padding-top:14px}
  .no-js .site-nav{display:flex;order:3;flex:0 0 100%;gap:24px;margin:12px 0 0;height:44px;overflow-x:auto}
}
/* a drawing the build put in the page waits, hidden, for the script that draws it — so the tower assembles from nothing */
.js .hero-art:not(.drawn)>svg{visibility:hidden}

/* ── the header's GitHub mark; the theme choice in the footer; the install line while the tap is not live ── */
.icon{display:block}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:36px;color:var(--ink-2);margin-right:-8px}
.icon-link:hover{color:var(--ink)}
.icon-link:focus-visible{outline:2px solid var(--cool-text);outline-offset:2px}
.theme-choice{display:inline-flex;margin-top:18px;border:1px solid var(--line-2);border-radius:2px}
.theme-choice .theme-switch{height:28px;padding:0 12px;border:0;border-radius:0;margin:0;font-size:12.5px;color:var(--ink-2);background:transparent}
.theme-choice .theme-switch+.theme-switch{border-left:1px solid var(--line-2)}
.theme-choice .theme-switch:hover{color:var(--ink);border-color:var(--line-2)}
.theme-choice .theme-switch[aria-pressed=true]{color:var(--ink);background:var(--lift)}
.portal-actions .theme-choice{margin-top:0}
.install.soon code{color:var(--ink-3)}
.soon-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px dashed var(--line-2);border-radius:2px;font-size:12px;font-weight:550;color:var(--ink-2);white-space:nowrap}
@media (max-width:520px){.site-actions .icon-link{display:none}}