@font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4-Variable-latin.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4-Variable-latin-ext.woff2") format("woff2");font-weight:300 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4-VariableItalic-latin.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";src:url("assets/fonts/SourceSerif4-VariableItalic-latin-ext.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("assets/fonts/GeistMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ink:#191712;--ink-soft:#3A342A;--paper:#F6F5F1;--paper-2:#EEEBE2;
  --rule:#CFC8B8;--rule-2:#B9B0A0;--muted:#6E675A;
  --signal:#00F800;--signal-hover:#00D000;--denied:#B3261E;
  --term-bg:#0A0A0A;--term-fg:#F6F5F1;--term-dim:#8F887A;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --h1-size:clamp(40px,6.6vw,92px);--h1-lh:1.0;
  --hero-size:clamp(46px,10.4vw,130px);--hero-lh:1.32;
  --h2-size:clamp(30px,4.4vw,60px);--h2-lh:1.04;
  --lead-size:clamp(19px,1.6vw,23px);--lead-lh:1.52;
  --body-size:19px;--body-lh:1.55;
  --section-gap:clamp(56px,8vw,132px);
  --gutter:clamp(20px,5vw,64px);
  --measure:70ch;
  --measure-prose:66ch;
  color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-padding-top:24px;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:400;font-size:var(--body-size);line-height:var(--body-lh);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
img,video,svg{max-width:100%}
::selection{background:var(--signal);color:#111110}
input::placeholder,textarea::placeholder{color:var(--muted)}

/* ---------- side nav ---------- */
.page-shell{display:flex;align-items:stretch}
.page-nav{flex:0 0 auto;display:flex;flex-direction:column;position:sticky;top:0;align-self:flex-start}
.nav-toggle{display:none}
.page-body{flex:1 1 auto;min-width:0}
.side-nav{height:100vh;overflow-y:auto;width:170px;background:var(--paper);border-right:1px solid var(--rule);padding:28px 16px 28px 22px;z-index:80;display:block}
.side-logo{display:flex;align-items:center;flex:none;margin-bottom:28px}
.side-logo img{height:18px;width:auto;display:block}
.side-logo:hover{text-decoration:none}
.side-link,.side-group-label{position:relative;display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:13px;line-height:1.35;letter-spacing:.01em;color:var(--ink);padding:4px 0}
.side-group-label{font-weight:500;cursor:pointer}
.side-link{font-weight:500}
.side-group{margin-top:10px}
.side-link+.side-group,.side-group+.side-group,.side-group+.side-link{margin-top:10px}
.side-n{color:var(--muted);font-size:10px;flex:none;display:inline-block;min-width:18px}
.side-sub{margin-top:2px;padding-left:24px;border-left:1px solid var(--rule);display:flex;flex-direction:column}
.side-sub a{position:relative;display:block;font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--muted);padding:4px 0}
.side-sub a:hover{color:var(--ink);text-decoration:none}
.side-sub a[aria-current="page"]{color:var(--ink)}
.side-link[aria-current="page"] .side-n,.side-group-label.side-active .side-n{display:none}
.side-link[aria-current="page"]::before,.side-group-label.side-active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--signal)}
.side-sub a[aria-current="page"]::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:6px;height:6px;background:var(--signal)}
.side-link:hover{text-decoration:none;color:var(--ink)}
.side-group-label:hover{text-decoration:none}

/* ---------- buttons ---------- */
.btn{display:inline-block;border-radius:0;padding:14px 20px;font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background 120ms;border:1px solid var(--ink)}
.btn:hover{text-decoration:none}
.btn-fill{background:var(--signal);color:#111110;border-color:var(--signal)}
.btn-fill:hover{background:var(--signal-hover);border-color:var(--signal-hover)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--signal)}
.btn-sm{padding:8px 12px}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- page shell (the frame is retired) ---------- */
.shell{max-width:1560px;margin:0 auto;padding:0 clamp(16px,4vw,72px)}
.frame{position:relative;border:0;padding:0;margin:0}
.frame-label{display:none}

/* ---------- sections and type ---------- */
.sec{border-top:1px solid var(--rule);margin-top:var(--section-gap);padding:clamp(24px,3vw,44px) 0 0}
.sec--open{border-top:0;margin-top:0;padding-top:clamp(44px,8vw,120px)}
.sec--open-tight{padding-top:clamp(44px,6vw,88px)}
.sec--last{padding-bottom:var(--section-gap)}
main h1{font-family:var(--serif);font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:-.03em;font-weight:300;max-width:20ch}
main h1.hero{font-size:var(--hero-size);line-height:var(--hero-lh);letter-spacing:-.035em;max-width:16ch}
@media (min-width:1200px){main h1.hero{max-width:20ch}}
main h1.mono{font-family:var(--mono);font-size:clamp(26px,3vw,40px);line-height:1.2;letter-spacing:-.01em;font-weight:400;word-break:break-word;max-width:none}
main h2{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);font-family:var(--serif);font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:-.025em;font-weight:400}
main h2::before{content:"";width:14px;height:14px;background:var(--signal);flex:none}
main h2.sm{font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.015em;flex-wrap:wrap}
main h2.plain::before{display:none}
main h3{font-family:var(--serif);font-size:clamp(22px,2.2vw,27px);line-height:1.18;letter-spacing:-.02em;font-weight:400}
.col{max-width:var(--measure)}
.lead{font-size:var(--lead-size);line-height:var(--lead-lh);letter-spacing:-.005em}
.small{font-size:17px;line-height:1.5}
.muted{color:var(--muted)}
.u{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:3px}
.u:hover{text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.mt8{margin-top:8px}.mt12{margin-top:14px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}.mt40{margin-top:clamp(32px,4vw,48px)}.mt48{margin-top:clamp(36px,5vw,64px)}
.label{display:block;font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.11em;background:transparent;color:var(--ink);border:0;box-shadow:inset 0 0 0 1px var(--ink);border-radius:0;padding:6px 9px}
.status::before{content:"";width:6px;height:6px;background:var(--signal);flex:none}
.status--dev::before{background:var(--rule-2)}
.status--dev{background:transparent;color:var(--muted)}
.mono{font-family:var(--mono)}
.mono-line{font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.09em;text-transform:uppercase}
code{font-family:var(--mono);font-size:.82em;background:rgba(25,23,18,.07);border-radius:0;padding:1px 4px}
.eyebrow{font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

/* ---------- figures ---------- */
.fig{margin:28px 0;max-width:none}
.fig+.mono-line{margin-top:28px}
.fig svg{display:block;width:100%;height:auto}
.fig text{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;fill:var(--muted)}
.fig .fig-hd{fill:var(--ink)}
@media (max-width:640px){.fig{overflow-x:auto}.fig svg{min-width:560px}}

/* ---------- dimension lines ---------- */
.dim{margin:32px 0;max-width:640px}
.dim.wide{max-width:960px}
.dim figcaption,.dim .dim-cap{display:block;font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;text-align:center;color:var(--muted);margin-bottom:8px}
.dim-line{position:relative;height:6px;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.dim-line::before{content:"";position:absolute;left:0;right:0;top:2px;border-top:1px solid var(--ink)}

/* ---------- lists / rows ---------- */
.rows{border-top:1px solid var(--ink)}
.rows>li,.rows>.row{border-bottom:1px solid var(--rule);padding:20px 0}
.rows.pad>li{padding:24px 0}
.row-2{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:8px clamp(24px,4vw,56px)}
.row-2.narrow{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.row-2.wide{grid-template-columns:minmax(0,330px) minmax(0,1fr)}
.row-2.num{grid-template-columns:minmax(0,48px) minmax(0,1fr)}
.row-3{display:grid;grid-template-columns:minmax(0,104px) minmax(0,300px) minmax(0,1fr);gap:6px clamp(20px,3vw,32px);align-items:baseline}
@media (max-width:900px){.row-3{grid-template-columns:minmax(0,104px) minmax(0,1fr)}.row-3>:last-child{grid-column:2}}
@media (max-width:640px){.row-2,.row-2.narrow,.row-2.wide{grid-template-columns:minmax(0,1fr)}.row-3{grid-template-columns:minmax(0,1fr)}.row-3>:last-child{grid-column:1}}
.row-key{font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.06em}
.row-key.up{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,3vw,44px)}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(28px,3vw,44px)}
.grid-3>div>.label,.grid-2>div>.label{padding-top:16px;border-top:1px solid var(--ink)}
.commit{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.commit--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.commit--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.commit li{border-bottom:1px solid var(--rule);padding:16px 0;font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.04em;padding-right:24px}

/* ---------- terminal / code ---------- */
.term{background:var(--term-bg);border-radius:0;padding:24px;font-family:var(--mono);font-size:14px;line-height:1.6;color:var(--term-fg);overflow-x:auto;display:grid;gap:4px}
.term .p{color:var(--signal)}
.term .ok{color:var(--term-fg)}
.term .cm{color:#8F887A}
.term .kw{color:#F2938C}
.term .st{color:#8FD69C}
.term .fn{color:#8AB4F8}
.term .mt{color:#C9A2E8}
.term .pr{color:#A7CFEA}
.term .nu{color:#F0B37E}
.term-copy{position:relative;padding-right:96px;display:block}
.copy{position:absolute;top:16px;right:16px;background:transparent;border:1px solid var(--term-dim);border-radius:0;color:var(--term-fg);font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.11em;padding:5px 8px;cursor:pointer;transition:background 120ms,color 120ms}
.copy:hover{background:var(--signal);color:#0A0A0A;border-color:var(--signal)}
pre.term{display:block;margin:0;white-space:pre}

/* ---------- agent file ---------- */
.agentfile{border:1px solid var(--rule);border-radius:0;padding:clamp(20px,3vw,32px);font-family:var(--mono);max-width:820px}
.agentfile .fence{font-size:12px;line-height:1.8;color:var(--muted)}
.agentfile .desc{font-size:13px;line-height:1.8;max-width:72ch}
.agentfile p{font-size:13px;line-height:1.8;max-width:72ch;margin-bottom:20px}
.agentfile p:last-child{margin-bottom:0}

/* ---------- cards, tables, forms ---------- */
.card{border:0;border-top:1px solid var(--ink);border-radius:0;padding:24px 0 0;max-width:820px;display:grid;gap:14px}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{vertical-align:top}
thead th{border-bottom:1px solid var(--ink);padding:12px 24px 12px 0;font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.13em;font-weight:400;color:var(--muted)}
tbody th{border-bottom:1px solid var(--rule);padding:16px 24px 16px 0;font-family:var(--mono);font-size:12px;line-height:1.7;font-weight:400;letter-spacing:.04em;text-align:left}
tbody td{border-bottom:1px solid var(--rule);padding:16px 24px 16px 0;font-size:17px;line-height:1.5}
.scroll-x{overflow-x:auto}
form.apply{max-width:640px;display:grid;gap:26px}
.field{display:grid;gap:8px}
.field label,.field>span{font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.13em;font-weight:400}
input[type=text],input[type=email]{height:46px;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 2px;font-family:var(--serif);font-size:19px}
textarea{background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:0;padding:12px;font-family:var(--serif);font-size:19px;line-height:1.5;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--signal);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.11em;text-transform:uppercase;border:1px solid var(--rule-2);background:transparent;color:var(--ink);border-radius:0;padding:9px 12px;cursor:pointer}
.chip[aria-pressed="true"],.chip[aria-current="true"]{border-color:var(--ink);background:var(--signal);color:#0A0A0A}
.filter{height:46px;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:0 2px;font-family:var(--mono);font-size:13px;line-height:1.6;flex:1 1 auto}
.tab{font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.11em;border:1px solid var(--rule-2);border-radius:0;padding:9px 12px;cursor:pointer;background:transparent;color:var(--ink)}
.tab[aria-selected="true"]{border-color:var(--ink);background:var(--signal);color:#0A0A0A}
.note{border:0;border-left:1px solid var(--ink);border-radius:0;padding:2px 0 2px 18px;font-size:17px;line-height:1.5}
.note.mono-note{font-family:var(--mono);font-size:11px;line-height:1.8;text-transform:uppercase;letter-spacing:.11em}

/* ---------- prose (blog) ---------- */
.prose{max-width:var(--measure-prose)}
.prose p{margin-top:26px;font-size:20px;line-height:1.62}
.prose p:first-child{margin-top:0}
.prose a{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--signal)}

/* ---------- diagrams ---------- */
.diagram{display:block;width:100%;height:auto;font-family:var(--mono)}

/* ---------- colophon ---------- */
.footer{background:var(--term-bg);color:var(--term-fg)}
.footer-in{max-width:1560px;margin:0 auto;padding:clamp(44px,6vw,88px) clamp(16px,4vw,72px) 36px;container-type:inline-size;border-top:1px solid var(--ink)}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:32px clamp(14px,1.5vw,24px);padding-top:24px;max-width:840px}
.footer-col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.footer-col a,.footer-col span.line{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em}
.footer-col a{white-space:nowrap}
.footer-col .label{margin-bottom:4px}
.footer-col .st{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.footer-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:baseline}
.footer-head{order:-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin:0 0 clamp(36px,5vw,72px)}
.footer-tag{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.2vw,44px);line-height:0.94;letter-spacing:-.035em}
.footer-cta{display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.footer-cta .eyebrow{color:var(--signal)}
.footer-cta a{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em;text-decoration:underline;text-decoration-color:var(--term-dim);text-decoration-thickness:1px;text-underline-offset:4px}.footer-cta a:hover{color:var(--signal);text-decoration-color:var(--signal);text-decoration-thickness:2px}
.footer-wordmark{display:block;width:100%;height:auto;margin:clamp(48px,6vw,96px) 0 0;color:var(--term-fg);overflow:visible}
.footer-bottom{margin-top:clamp(22px,2.6vw,36px);padding-top:16px;border-top:1px solid var(--rule-2);display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.footer-bottom>span:first-child{flex:1 1 auto}
.footer-bottom a{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.11em;color:var(--muted)}
.footer-in{display:flex;flex-direction:column}

.chip:has(input:checked){border-color:var(--ink);background:var(--signal);color:#0A0A0A}
.chip{user-select:none}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:8px;top:8px;background:var(--signal);color:#0A0A0A;border:1px solid var(--ink);border-radius:0;padding:10px 14px;font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}

/* ---------- mobile navigation (no JavaScript) ---------- */
@media (max-width:720px){
  .page-shell{flex-direction:column}
  .page-nav{position:static}
  .side-nav{display:none}
  .nav-toggle{display:block;background:none;border:none;padding:14px 20px;font-family:var(--mono);font-size:20px;line-height:1;color:var(--ink);cursor:pointer}
  .nav-toggle::after{content:"+"}
  .nav-toggle-input:checked~.nav-toggle::after{content:"\00AB"}
  .nav-toggle-input:checked~.side-nav{display:block;position:static;height:auto;width:auto;border-right:0;border-bottom:1px solid var(--rule)}
}

/* ---------- demo fallback (no JavaScript / reduced motion) ---------- */
.demo-fallback{display:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:16px}
html:not(.js) .demo-video{display:none}
html:not(.js) .demo-fallback{display:grid}
@media (prefers-reduced-motion:reduce){.demo-video{display:none}.demo-fallback{display:grid}}

/* ---------- layout utilities ---------- */
.lh24{line-height:1.6}
.lh27{line-height:1.6}
.fi{font-family:inherit}
.fi-sm{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.di{display:inline}
.db{display:block}
.m0{margin:0}
.mb8{margin-bottom:8px}
.mb12{margin-bottom:12px}
.mb20{margin-bottom:20px}
.mb24{margin-bottom:24px}
.bt{border-top:1px solid var(--rule)}
.pt48{padding-top:48px}
.ink{color:var(--ink)}
.nw{white-space:nowrap}
.t13{font-size:13px}
.t14{font-size:17px;line-height:1.5}
.t14b{font-size:12px;line-height:1.6;font-family:var(--mono);letter-spacing:.04em}
.t14w{font-size:13px;line-height:1.8;max-width:72ch}
.t22{font-size:clamp(20px,2vw,24px);line-height:1.3}
.code-lg{font-size:18px;padding:2px 5px}
.label-inline{font-family:var(--mono);font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:.13em}
.label-xs{font-family:var(--mono);font-size:10px;line-height:1.4;text-transform:uppercase;letter-spacing:.14em}
.up-ls{text-transform:uppercase;letter-spacing:.11em}
.mw640{max-width:640px}
.mw680{max-width:680px}
.mw800{max-width:800px}
.mw820{max-width:820px}
.mw860{max-width:860px}
.mw1000{max-width:1000px}
.mw1072{max-width:1072px}
.mw34ch{max-width:34ch}
.mw68ch{max-width:var(--measure)}
.img-full{display:block;width:100%;height:auto;border-radius:0}
.video-full{display:block;width:100%;height:auto;border-radius:0;margin-top:16px}
.grid-img{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.grid-260{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-280{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,44px) 24px}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.grid-4{grid-template-columns:minmax(0,1fr)}}
.stack32{display:grid;gap:clamp(28px,3vw,40px);max-width:820px}
.stack56{display:grid;gap:clamp(40px,5vw,64px);margin-top:clamp(40px,5vw,64px)}
.pad-stack{padding:clamp(24px,3vw,36px) 0;display:grid;gap:14px}
.mb20-stack{margin-bottom:20px;display:grid;gap:8px}
.row-between{display:flex;flex-wrap:wrap;gap:24px clamp(24px,4vw,56px);align-items:baseline;justify-content:space-between}
.row-wrap{display:flex;flex-wrap:wrap;gap:24px}
.row-center-16{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.row-baseline-24{display:flex;flex-wrap:wrap;gap:24px;align-items:baseline;margin-top:24px}
.row-baseline-32{display:flex;flex-wrap:wrap;gap:24px;align-items:baseline;justify-content:space-between;margin-top:32px}
.inline-wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.split{display:flex;justify-content:space-between;gap:16px}
.split-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:baseline}
.kv{display:flex;justify-content:space-between;gap:16px;padding-right:24px}
.gap8{display:flex;gap:8px}
.filter-wrap{display:flex;align-items:center;gap:12px;flex:1 1 260px;max-width:420px}
.meta-row{border-bottom:1px solid var(--rule);padding:24px 0;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px clamp(24px,4vw,56px);align-items:baseline}
@media (max-width:640px){.meta-row{grid-template-columns:minmax(0,1fr)}}
.icon-inline{flex:none;display:inline-flex;align-items:center;color:var(--muted)}
.panel{margin-top:40px;max-width:720px;padding:24px 0 0;border:0;border-top:1px solid var(--ink);border-radius:0}
.postnav{padding:clamp(36px,5vw,64px) 0;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:baseline;border-top:1px solid var(--rule)}
.postnav-a{display:flex;flex-direction:column;gap:6px;max-width:44%}
.postnav-b{display:flex;flex-direction:column;gap:6px;max-width:44%;text-align:right}
.h28{display:block;height:24px;width:auto}
.btn-submit{font-family:var(--mono);cursor:pointer}
.term--copy{position:relative;padding-right:96px}
.hidden{display:none}
#received{display:none}
#received:target{display:block}
@media (max-width:560px){.cap-mid{display:none}}

/* Grid and flex items default to min-width:auto, so a nowrap terminal line
   sizes its track instead of scrolling inside the .term. Two places did that
   at phone widths: the framework command blocks and the homepage install
   column. Keep the copy button clear of the text by moving it below the
   command rather than reserving padding for it. */
@media (max-width:640px){
  .stack32>*,.band .hero-meta,.hero-split>.hero-meta{min-width:0}
  .band .hero-meta{flex-basis:100%;max-width:100%}
  .band .kv,.kv{padding-right:0}
  .term--copy,.band .term--copy{padding-right:0;padding-bottom:44px}
  /* .term is a grid, so an abspos child stretches unless it is told not to */
  .copy,.band .copy{top:auto;bottom:8px;left:0;right:auto;width:max-content;justify-self:start;padding:9px 14px}
}

/* ---------- print ---------- */
@media print{
  .side-nav,.page-nav,.footer-cols,.skip{display:none}
  .page-shell{display:block}
  html,body{background:#fff}
}

/* ---------- homepage: numbered sections, spot ink, index ---------- */
.sec-head{display:flex;flex-direction:column;gap:12px}
.secnum{flex:0 0 auto;display:block;font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.16em;color:var(--muted)}
.spot-wrap{white-space:nowrap}
.spot{position:relative;padding:0 .1em}
.spot::before{content:"";position:absolute;top:.2em;bottom:.04em;left:0;right:0;z-index:-1;background:var(--signal)}
.spot::selection{background:var(--signal)}
.hero{isolation:isolate}
.hero-meta{flex:0 1 300px;display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.09em;text-transform:uppercase}
.hero-meta .kv{border-bottom:1px solid var(--rule);padding:0 0 10px}
.hero-split{border-top:1px solid var(--ink);padding-top:26px;display:flex;flex-wrap:wrap;gap:36px clamp(32px,5vw,80px)}
.hero-split>.lead{flex:1 1 380px;max-width:60ch}
.hero-split--muted-rule{border-top-color:#4A453A}
.sec--open .hero-split>.hero-meta{margin-left:auto;flex:1 1 340px}
.band{background:var(--term-bg);color:var(--term-fg);margin-top:var(--section-gap)}
.band-in{max-width:1560px;margin:0 auto;padding:clamp(48px,7vw,112px) clamp(16px,4vw,72px)}
main .band h2{color:var(--term-fg)}
.band p{color:var(--term-fg)}
.band .label,.band .figcap{color:var(--term-dim)}
.band .secnum{color:var(--term-dim)}
.band .kv{border-bottom:1px solid #4A453A;padding-bottom:12px}
.band .term{padding:18px 0;border-top:1px solid #4A453A;border-bottom:1px solid #4A453A}
.band img{border:1px solid #4A453A}
.figcap{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px 24px;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.11em;text-transform:uppercase}
.index{border-top:1px solid var(--ink)}
.index-row{border-bottom:1px solid var(--rule);padding:20px 0;display:grid;grid-template-columns:clamp(300px,44%,560px) minmax(24px,44px) minmax(0,1fr);gap:6px clamp(20px,2.6vw,40px);align-items:baseline}
@media (max-width:760px){.index-row{grid-template-columns:minmax(0,1fr)}.index-row .leader{display:none}}
.index-row>a{display:block;min-width:0}
.index-name{display:inline;font-size:clamp(24px,2.6vw,34px);line-height:1.15;letter-spacing:-.02em}
.index-count{display:inline;white-space:nowrap;padding-left:12px}
.index-count{font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.leader{flex:none;height:1px;border-bottom:1px dotted var(--rule-2);transform:translateY(-7px)}
.index-row>p{max-width:52ch;margin:0;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px clamp(32px,4vw,64px)}
.two-col>p{margin:0}
.rule-both{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:26px 0}

.band .term--copy{padding-right:104px}
.band .copy{top:12px;right:0}
.band .hero-meta .kv a:hover{text-decoration-color:var(--signal)}

/* install column: the command must never break inside the path */
.band .hero-meta{flex:1 1 420px;max-width:520px}
.band .term--copy{padding-right:88px}
.band .term>span{white-space:nowrap}
.band .term,.band .term>span{text-transform:none;letter-spacing:0}
.band .term{overflow-x:auto}

/* colophon on black */
.footer a{color:var(--term-fg)}
.footer a:hover{text-decoration-color:var(--signal)}
.footer-cols{border-top-color:#4A453A}
.footer-col .label{color:var(--term-dim)}
.footer-col .st{color:var(--term-dim)}
.footer-bottom{border-top-color:#4A453A;color:var(--term-dim)}
.footer-bottom a{color:var(--term-dim)}
.footer-tag{color:var(--term-fg)}

/* ---------- long-form post: headings, footnotes, references ---------- */
.prose h2{margin-top:clamp(44px,5vw,64px)}
.prose h3{margin-top:clamp(30px,3.4vw,42px)}
.prose h2+p,.prose h3+p{margin-top:20px}
.prose pre.term{margin:30px 0;font-size:13px;line-height:1.7}
.prose figure+p{margin-top:26px}
.fnr{font-family:var(--mono);font-size:10px;line-height:0;letter-spacing:.02em;vertical-align:super;color:var(--muted)}
.fnr a{text-decoration:none}
.fnr+.fnr{margin-left:2px}
.fnr a:hover{color:var(--ink);text-decoration:none}
.refs{max-width:var(--measure-prose);margin-top:24px;padding:0;list-style:none;border-top:1px solid var(--ink);counter-reset:ref}
.refs li{counter-increment:ref;position:relative;border-bottom:1px solid var(--rule);padding:14px 0 14px 38px;font-size:15px;line-height:1.6}
.refs li::before{content:counter(ref);position:absolute;left:0;top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}
.refs li:target::before{color:var(--ink)}
.refs li:target{box-shadow:inset 3px 0 0 var(--signal)}
.refs a{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:3px}
.refs a:hover{text-decoration-color:var(--signal)}
.refs code{font-size:.78em;word-break:break-all}

/* ---------- action gate diagram ---------- */
.gate-fig{margin:36px 0;max-width:none}
.gate-fig figcaption{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.gate-fig p.gate-edge{font-family:var(--mono);font-size:12px;line-height:1.6;letter-spacing:.05em;margin:0;padding:0 0 10px}
.gate-fig p.gate-edge.out{margin:0;padding:10px 0 0}
.gate{border:1px solid var(--ink);padding:14px clamp(14px,2vw,24px) 2px}
.gate>.label-xs{display:block;color:var(--muted)}
.gate .rows{border-top:0;margin-top:4px}
.gate .rows>li{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,230px);gap:6px 20px;align-items:baseline;padding:14px 0}
.gate .rows>li:last-child{border-bottom:0}
.gate .step{font-size:17px;line-height:1.45}
.gate .row-key.up{color:var(--muted)}
@media (max-width:680px){.gate .rows>li{grid-template-columns:32px minmax(0,1fr)}.gate .rows>li>:last-child{grid-column:2}}

/* ---------- scroll reveal ---------- */
/* Visible by default; only html.js sets the hidden start state, so the page
   renders fully with JavaScript off. One pass, added then unobserved. */
@media (prefers-reduced-motion:no-preference){
  html.pre main .sec:not([data-hero])>*,html.pre main .band-in>*{opacity:0}
}
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out,transform .5s ease-out}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1;transform:none;transition:none}}

/* ---------- canary (butterfly.js's successor, canary.js) ---------- */
/* One fixed 280px box, scaled by transform: the frame never changes size, so
   swapping poses cannot reflow or flicker. */
.cn{position:fixed;left:0;top:0;width:280px;height:280px;margin:-140px 0 0 -140px;z-index:70;pointer-events:none;opacity:0;will-change:transform,opacity}
/* The global img{max-width:100%} would collapse these inside a zero-size box */
.cn img{position:absolute;left:0;top:0;display:block;width:280px;height:280px;max-width:none;min-width:0;border:0}
/* The washes are translucent, so on the dark band and footer they need lifting. */
.cn--on-dark img{filter:brightness(1.5) saturate(1.1) drop-shadow(0 0 1px rgba(0,0,0,.3))}
.cn--rest img{animation:cn-settle 7s ease-in-out infinite;transform-origin:65% 82%}
@keyframes cn-settle{0%,72%,100%{transform:none}80%{transform:rotate(-2deg)}88%{transform:rotate(.8deg)}}
@media (prefers-reduced-motion:reduce){.cn{display:none}}
}