/* Overshoot site v3. Tokens and components from explore/v3/style-tile.html (SPEC-visual-system.md). */

/* ===== Tokens ===== */
:root{
  --paper:#f3eee5; --paper-2:#ebe4d8;
  --carbon:#22130b; --grey-1:#5f5047; --grey-2:#776357;
  --rule:#ddd1c0; --rule-strong:#22130b;
  --signal:#d1440c; --signal-text:#b5390a;
  --tint:#bfb1a2;
  --serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --mono:var(--serif); --code:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-h1:clamp(1.75rem,1.4rem + 1.1vw,2.25rem);  --lh-h1:1.15; --ls-h1:0;
  --fs-h2:1.375rem; --lh-h2:1.25; --ls-h2:0;
  --fs-h3:1.0625rem; --lh-h3:1.35;
  --fs-lede:1.0625rem; --lh-lede:1.55;
  --fs-body:1rem; --lh-body:1.6;
  --fs-small:.8125rem; --lh-small:1.55;
  --fs-label:.9375rem; --ls-label:0;
  --fs-nav:.9375rem; --ls-nav:0;
  --fs-num:.9375rem; --fs-code:.8125rem;
  --measure:36em;
  --page-max:1240px; --gutter:clamp(16px,4vw,40px); --margin-col:13.5rem; --col-gap:40px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;
  --hatch:repeating-linear-gradient(135deg,var(--signal) 0 1.2px,transparent 1.2px 5px);
  --hair:1px;
}
[data-theme="scope"]{
  --paper:#15100c; --paper-2:#1d1611;
  --carbon:#efe6da; --grey-1:#a89584; --grey-2:#9c8878;
  --rule:#3a2f27; --rule-strong:#efe6da;
  --signal:#ff6a1f; --signal-text:#ff7a33;
}
/* Blue (after georgewood.me), one hue throughout, with moving grain.
   data-theme="blue" follows the system: light = blue ink on our paper, dark = paper cream on an electric-blue field.
   blue-ink / blue-cream force one look (the footer colour bar sets them); blue-white is unused. Greys are the ink mixed into the field. */
[data-theme="blue"],[data-theme="blue-ink"]{
  --paper:#f3eee5; --paper-2:#ebe4d8;
  --carbon:#0038ff; --grey-1:#2454fb; --grey-2:#2454fb; /* AA on paper: one secondary tone */
  --rule:#c2c9ea; --rule-strong:#0038ff;
  --signal:#0038ff; --signal-text:#0038ff;
  --tint:#9fb1f5; --grain:.08;
  color-scheme:light;
}
[data-theme="blue-cream"]{
  --paper:#0038ff; --paper-2:#0a32e6;
  --carbon:#f3eee5; --grey-1:#ccd1e9; --grey-2:#ccd1e9; /* same as the system-dark block below */
  --rule:#315dfa; --rule-strong:#f3eee5;
  --signal:#f3eee5; --signal-text:#f3eee5;
  --tint:#7a93ff; --grain:.14;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  [data-theme="blue"]{
    --paper:#0038ff; --paper-2:#0a32e6;
    --carbon:#f3eee5; --grey-1:#ccd1e9; --grey-2:#ccd1e9; /* AA on #0038ff: one secondary tone */
    --rule:#315dfa; --rule-strong:#f3eee5;
    --signal:#f3eee5; --signal-text:#f3eee5;
    --tint:#7a93ff; --grain:.14;
    color-scheme:dark;
  }
}
[data-theme="blue-white"]{
  --paper:#0038ff; --paper-2:#0a32e6;
  --carbon:#fff; --grey-1:#c2ceff; --grey-2:#a3b5ff;
  --rule:#3360ff; --rule-strong:#fff;
  --signal:#fff; --signal-text:#fff;
  --tint:#7a93ff; --grain:.14;
  color-scheme:dark;
}
/* figure plates: a deeper blue in every variant */
[data-theme^="blue"] [data-theme="scope"]{
  --paper:#0026b8; --paper-2:#0030d6;
  --carbon:#f3eee5; --grey-1:#afbbec; --grey-2:#92a5ef;
  --rule:#2a52f0; --rule-strong:#f3eee5;
  --signal:#f3eee5; --signal-text:#f3eee5;
}
[data-theme^="blue"] .cmdk::backdrop{background:rgba(0,20,110,.45)}
[data-theme^="blue"] body::after{content:"";position:fixed;inset:-50%;z-index:100;pointer-events:none;opacity:var(--grain);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .5s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){[data-theme^="blue"] body::after{animation:none}}
/* Dark blue modes: raster and SVG images in posts were drawn for a light page (dark lines, transparent ground), so each
   sits on a paper plate; the caption stays outside. Multiply blending is switched off there, or the plate would turn blue. */
@media (prefers-color-scheme:dark){html[data-theme="blue"] .article :is(img,object,embed){background:#f3eee5;padding:14px;box-shadow:none;mix-blend-mode:normal;box-sizing:border-box}}
html[data-theme="blue-cream"] .article :is(img,object,embed){background:#f3eee5;padding:14px;box-shadow:none;mix-blend-mode:normal;box-sizing:border-box}
/* the light/dark switch: a printer's colour bar, current paper then current ink; hover previews the swap */
.fz .sw{display:inline-flex;align-items:center;vertical-align:middle;height:20px;gap:0}
.fz .sw i{display:block;width:9px;height:9px;border:1px solid var(--carbon);transition:transform .25s cubic-bezier(.65,0,.35,1)}
.fz .sw i:first-child{background:var(--paper)}
.fz .sw i:last-child{background:var(--carbon);margin-left:-1px}
.fz .sw:hover i:first-child,.fz .sw:focus-visible i:first-child{transform:translateX(8px)}
.fz .sw:hover i:last-child,.fz .sw:focus-visible i:last-child{transform:translateX(-8px)}
.fz .sw:focus-visible{outline:1px solid var(--carbon);outline-offset:4px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ===== Base ===== */
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);color:var(--carbon);font:400 var(--fs-body)/var(--lh-body) var(--serif);
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,dl,dd,ol,ul,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--signal);color:var(--paper)}
.wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--gutter)}
body>header,body>footer{width:100%}
body>main{width:100%;flex:1 0 auto}
.row{display:grid;grid-template-columns:var(--margin-col) minmax(0,1fr);column-gap:var(--col-gap)}
@media (max-width:900px){.row{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-4)}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type roles */
.h1{font:400 var(--fs-h1)/var(--lh-h1) var(--serif);letter-spacing:0;color:var(--carbon);text-wrap:balance;max-width:24em}
.h2{font:400 var(--fs-h2)/var(--lh-h2) var(--serif);letter-spacing:0;text-wrap:balance;max-width:24em}
.h3{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:0;text-wrap:balance}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);max-width:30em;text-wrap:pretty}
.body{max-width:var(--measure)}
.body p+p{margin-top:.9em}
.small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--grey-1)}
.label{font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1)}
.num{font:400 var(--fs-num)/1.4 var(--serif);font-variant-numeric:tabular-nums}
code,.code{font:400 var(--fs-code)/1.6 var(--code)}
pre.code{background:var(--paper-2);padding:var(--sp-4) var(--sp-5);overflow-x:auto;margin:0;border-left:2px solid var(--carbon)}

/* links */
.prose a,a.link{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1px;text-underline-offset:.2em}
.prose a:hover,a.link:hover{color:var(--signal-text);text-decoration-thickness:2px}
a.mlink,button.mlink{font:400 var(--fs-nav)/1.3 var(--serif);letter-spacing:0;text-transform:none;text-decoration:none;
  background:none;border:0;padding:0;cursor:pointer;color:inherit}
a.mlink:hover,button.mlink:hover{color:var(--signal-text);text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* the one button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;
  font:600 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;
  color:var(--paper);background:var(--carbon);border:1px solid var(--carbon);border-radius:0;cursor:pointer}
.btn:hover{background:var(--signal);border-color:var(--signal)}
.btn:active{transform:translateY(1px)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6)}

/* rules */
.rule-hatch{border:0;height:6px;background:var(--hatch);margin:0}

/* ===== Nav ===== */
.nav{border-bottom:var(--hair) solid var(--rule-strong);background:var(--paper)}
.nav-in{display:flex;align-items:center;gap:var(--sp-6);height:64px;position:relative}
.nav-logo{display:block;color:var(--carbon);line-height:0}
.nav-logo svg{height:18px;width:auto}
.nav-links{display:flex;gap:28px;margin-left:auto}
.nav-links a{font:400 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;text-decoration:none;
  padding:8px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--signal-text)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--signal)}
.nav-end{display:flex;align-items:center;gap:var(--sp-4)}
.kbd{font:400 12px/1 var(--code);letter-spacing:0;color:var(--grey-1);background:none;border:1px solid var(--rule);padding:7px 8px;cursor:pointer;white-space:nowrap}
.kbd:hover{border-color:var(--carbon);color:var(--carbon)}
.nav-menu{display:none;margin-left:auto}
.nav-menu summary{list-style:none;cursor:pointer;font:400 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;padding:12px 0}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu[open] summary::after{content:" ×"}
.nav-menu ul{position:absolute;left:0;right:0;top:64px;background:var(--paper);border-bottom:1px solid var(--carbon);padding:8px var(--gutter) 20px;z-index:20}
.nav-menu li a,.nav-menu li button{display:block;width:100%;text-align:left;padding:14px 0;border:0;border-top:1px solid var(--rule);background:none;
  font:400 22px/1 var(--serif);text-decoration:none;cursor:pointer}
.nav-menu li a[aria-current="page"]{color:var(--signal-text)}
.nav-menu li.m-book{display:none}
@media (max-width:820px){.nav-links,.nav-end .kbd{display:none}.nav-menu{display:block}.nav-in{gap:var(--sp-4)}.nav-end .btn{padding:0 12px}}
@media (max-width:420px){.nav-end{display:none}.nav-menu li.m-book{display:block}}

/* ===== Page head (inner pages) ===== */
.page-head{padding-block:var(--sp-7) var(--sp-7)}
.page-head .lede{margin-top:var(--sp-5)}
.page-head .lede+.lede{margin-top:var(--sp-3)}
.crumb{font:400 var(--fs-nav)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1);margin-bottom:var(--sp-5)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--signal-text)}
.crumb .sep{margin:0 8px;color:var(--grey-2)}

/* sections */
.sec{border-top:var(--hair) solid var(--rule-strong);padding-block:var(--sp-7) var(--sp-8)}
.sec.tight{padding-bottom:var(--sp-7)}
.side-h{font:400 var(--fs-h3)/var(--lh-h3) var(--serif);letter-spacing:0;text-wrap:balance}
.side-n{display:block;font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-2);margin-bottom:10px}
.sec-gloss{margin-top:var(--sp-3);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--grey-1);max-width:20em}

/* closing line */
.closing{border-top:var(--hair) solid var(--rule-strong);padding-block:var(--sp-7) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-5) var(--sp-7)}
.closing{margin-top:var(--sp-7)}
.sec+.closing,.terms+.closing{margin-top:0}
.closing p{font:400 22px/1.2 var(--serif);letter-spacing:0;max-width:22em;text-wrap:balance}
.closing .acts{flex:0 1 auto}

/* ===== Masthead (home) ===== */
.mast{padding-top:var(--sp-7)}
.mast-eyebrow{margin-bottom:var(--sp-4)}
.mast-word{color:var(--signal);line-height:0;margin:0;font-size:1rem}
.mast-word svg{width:100%;height:auto;display:block}
.mast-trace{display:block;width:100%;height:clamp(28px,3vw,40px);margin-top:var(--sp-6);overflow:visible}
.mast-trace .tr{fill:none;stroke:var(--signal);stroke-width:2;vector-effect:non-scaling-stroke}
.mast-trace .tg{stroke:var(--carbon);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.anim .mast-trace .reveal{transform-box:fill-box;transform-origin:0 50%;animation:reveal 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes reveal{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.mast-trace .reveal{animation:none}}
.mast-copy{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--col-gap);margin-top:0;align-items:end}
.stmt{max-width:22em}
.stmt-2{margin-top:var(--sp-4);font-size:var(--fs-lede);line-height:var(--lh-lede);max-width:31em;color:var(--grey-1)}
.mast-side .acts{margin-top:var(--sp-5)}
.mast-copy{align-items:end}
.proof{border-top:1px solid var(--carbon);font:400 15px/1.4 var(--serif);color:var(--carbon);font-variant-numeric:tabular-nums}
.proof li{padding:8px 0 7px;border-bottom:1px solid var(--rule)}
@media (max-width:760px){.mast-copy{grid-template-columns:1fr;gap:var(--sp-5)}}

/* entry points */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--col-gap);margin-top:var(--sp-7)}
.tile{position:relative;display:flex;flex-direction:column;padding-top:14px;border-top:1px solid var(--carbon)}
.tile .label{color:var(--grey-1)}
.tile p{margin-top:10px;font-size:16px;line-height:1.42;flex:1}
.tile .mlink{margin-top:14px;align-self:flex-start}
.tile .mlink::after{content:"";position:absolute;inset:0}
.tile:hover .mlink{color:var(--signal-text);text-decoration:underline;text-underline-offset:4px}
@media (max-width:980px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6) var(--col-gap)}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;gap:var(--sp-5)}}

/* home feed: one line per entry */
.feed-sec{margin-top:var(--sp-7)}
.feed-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--carbon)}
.feed li{position:relative;display:grid;grid-template-columns:6.5rem 5.5rem minmax(0,1fr);column-gap:var(--sp-5);align-items:baseline;padding:8px 0 9px;border-bottom:1px solid var(--rule)}
.feed time{font:400 14px/1.4 var(--serif);color:var(--grey-1);font-variant-numeric:tabular-nums}
.feed .k{font:400 14px/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-2)}
.feed a{font:400 16px/1.3 var(--serif);text-decoration:none;letter-spacing:0;text-wrap:pretty}
.feed a::after{content:"";position:absolute;inset:0}
.feed li:hover a{color:var(--signal-text)}
.feed li:hover a span::after{content:" →";font:400 15px var(--serif)}
@media (max-width:640px){.feed li{grid-template-columns:auto minmax(0,1fr);row-gap:4px}.feed time{grid-column:1}.feed .k{grid-column:2;justify-self:end}.feed a{grid-column:1/-1}}

/* ===== Dated feed (/log) ===== */
.filters{display:flex;flex-wrap:wrap;gap:4px 24px;padding-bottom:14px}
.filters button{font:400 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;background:none;border:0;
  padding:8px 0;border-bottom:2px solid transparent;cursor:pointer;color:var(--grey-1)}
.filters button:hover{color:var(--signal-text)}
.filters button[aria-pressed="true"]{color:var(--carbon);border-bottom-color:var(--signal)}
.filters .count{color:var(--grey-2);margin-left:4px}
.log{border-top:1px solid var(--carbon)}
.log li{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 6.5rem;column-gap:var(--sp-5);padding:18px 0 20px;border-bottom:1px solid var(--rule);align-items:baseline}
.log li[hidden]{display:none}
.log li:target{background:var(--paper-2);box-shadow:-12px 0 0 var(--paper-2),12px 0 0 var(--paper-2)}
.log .when{font:400 14px/1.4 var(--serif);color:var(--grey-1);font-variant-numeric:tabular-nums;text-decoration:none}
.log a.when:hover{color:var(--signal-text)}
.log a.t{display:block;max-width:38em;font:400 22px/1.25 var(--serif);text-decoration:none;letter-spacing:0;text-wrap:pretty;hyphens:manual}
.log a.t:hover{color:var(--signal-text)}
.log a.t:hover::after{content:" →";font-family:var(--serif);font-weight:400}
.log p{margin-top:6px;font-size:16px;line-height:1.45;color:var(--grey-1);max-width:44em}
.log p.tagline{margin-top:8px;font:400 14px/1.5 var(--serif);color:var(--grey-2);letter-spacing:0}
.log .tag{font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1);text-align:right}
@media (max-width:640px){.log li{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}.log li>div{grid-column:1/-1;grid-row:2}}

/* ===== Figures ===== */
.fig-head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:baseline;padding-bottom:var(--sp-4);border-bottom:1px solid var(--carbon)}
.fig-n{font:600 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--signal-text);white-space:nowrap}
.fig-t{font:400 var(--fs-h3)/1.25 var(--serif);text-wrap:balance}
.fig-u{grid-column:2;font:400 14px/1.45 var(--serif);color:var(--grey-1)}
.fig-src{margin-top:var(--sp-4);font:400 14px/1.55 var(--serif);color:var(--grey-2);max-width:60em}
.fig-cap{margin-top:var(--sp-3);font:italic 400 var(--fs-small)/var(--lh-small) var(--serif);color:var(--grey-1);max-width:var(--measure)}
.legend{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:14px;font:400 14px/1.4 var(--serif);color:var(--grey-1)}
.legend i{display:inline-block;width:24px;height:10px;vertical-align:-1px;margin-right:8px}
.lg-solid{background:var(--carbon)}
.lg-hatch{background:var(--hatch);box-shadow:inset 0 0 0 1px var(--signal)}
.lg-change{box-shadow:inset 0 0 0 1px var(--carbon)}
.lg-limit{width:2px!important;height:18px!important;vertical-align:-5px!important;background:var(--signal)}

/* roofline readout */
.ro{--max:10}
.ro-axis,.ro-row{display:grid;grid-template-columns:var(--ro-name,12.5rem) minmax(0,1fr) 7.25rem 5.25rem;column-gap:20px;align-items:center}
.ro-axis{padding:12px 0 6px}
.ro-ticks{position:relative;height:16px;border-bottom:1px solid var(--rule)}
.ro-ticks span{position:absolute;bottom:4px;left:calc(var(--v) / var(--max) * 100%);transform:translateX(-50%);font:400 14px/1 var(--serif);color:var(--grey-2);white-space:nowrap}
.ro-ticks span::after{content:"";position:absolute;left:50%;bottom:-5px;height:4px;border-left:1px solid var(--grey-2)}
.ro-ticks span:first-child{transform:none}.ro-ticks span:first-child::after{left:0}
.ro-ticks span:last-child{transform:translateX(-100%)}.ro-ticks span:last-child::after{left:auto;right:0}
.ro-axis .label{text-align:right}
.ro-axis .label:first-child{text-align:left}
.ro-row{padding:11px 0;border-top:1px solid var(--rule)}
.ro-row:first-of-type{border-top:0}
.ro-name{font:400 16px/1.3 var(--serif)}
.ro-track{position:relative;height:14px}
.ro-work,.ro-head,.ro-limit{position:absolute;top:0;bottom:0}
.ro-work{left:0;width:calc(var(--l) / var(--max) * 100%);background:var(--carbon)}
.ro-head{left:calc(var(--l) / var(--max) * 100%);width:calc((var(--m) - var(--l)) / var(--max) * 100%);background:var(--hatch);box-shadow:inset 0 0 0 1px var(--signal)}
.ro-limit{top:-6px;bottom:-6px;left:calc(var(--l) / var(--max) * 100%);width:2px;margin-left:-1px;background:var(--signal)}
.ro-row.nolim .ro-limit{display:none}
.ro-val{font:400 var(--fs-num)/1.3 var(--serif);text-align:right;white-space:nowrap}
.ro-val em{font-style:normal;color:var(--grey-2)}
.ro-gap{font:600 var(--fs-num)/1.3 var(--serif);text-align:right;color:var(--signal-text);white-space:nowrap}
.ro-row.total{border-top:1px solid var(--carbon);border-bottom:1px solid var(--carbon);margin-top:6px}
.ro-row.total .ro-name{font-weight:600}
.ro-row.total .ro-track{height:18px}
@media (max-width:640px){
  .ro-axis,.ro-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;column-gap:12px}
  .ro-axis .ro-ticks{grid-column:1/-1}
  .ro-axis>.label{display:none}
  .ro-name{grid-column:1/-1}
  .ro-track{grid-column:1/-1}
  .ro-val{text-align:left}
}

/* simple bars (before/after, same grammar) */
.bars{--max:10}
.bars .ro-axis,.bars .ro-row{grid-template-columns:var(--ro-name,11rem) minmax(0,1fr) 6rem}
.bar-seg{position:absolute;top:0;bottom:0;left:calc(var(--a) / var(--max) * 100%);width:calc(var(--w) / var(--max) * 100%)}
.bar-seg.solid{background:var(--carbon)}
.bar-seg.change{box-shadow:inset 0 0 0 1px var(--carbon)}
.bar-seg+.bar-seg.solid{border-left:2px solid var(--paper)}
@media (max-width:640px){.bars .ro-axis,.bars .ro-row{grid-template-columns:minmax(0,1fr) auto}}

/* tabs (tools, figures) */
.tabs{display:flex;flex-wrap:wrap;gap:4px 28px;border-bottom:1px solid var(--carbon)}
.tabs [role=tab]{font:400 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;background:none;border:0;
  padding:14px 0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;color:var(--grey-1)}
.tabs [role=tab]:hover{color:var(--signal-text)}
.tabs [role=tab][aria-selected="true"]{color:var(--carbon);border-bottom-color:var(--signal)}
.tabs.big [role=tab]{font:400 22px/1 var(--serif);letter-spacing:0;text-transform:none;padding:16px 0 14px}
.fig-tabs{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.fig-tabs .tabs{border-bottom:0}
.fig-tabs .tabs [role=tab]{padding:6px 0 8px}
[role=tabpanel][hidden]{display:none}

/* results table */
.results{width:100%;border-collapse:collapse}
.results th{font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1);text-align:left;padding:0 20px 12px 0;border-bottom:1px solid var(--carbon);vertical-align:bottom;font-weight:400}
.results td{padding:18px 20px 20px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.results th:last-child,.results td:last-child{padding-right:0}
.results tbody tr{position:relative}
.results tbody tr:hover .r-post a{color:var(--signal-text)}
.r-dep b{display:block;font:400 17px/1.25 var(--serif)}
.r-dep span{display:block;font:400 14px/1.5 var(--serif);color:var(--grey-1);margin-top:4px}
.r-obj{font-size:16px;line-height:1.35;white-space:nowrap}
.r-lev{font-size:16px;line-height:1.4;color:var(--grey-1);max-width:13em}
.r-ba{min-width:15rem}
.r-ba .num{display:block;white-space:nowrap}
.r-ba .num em{font-style:normal;color:var(--grey-2)}
.r-ba .num+.mb+.num{margin-top:12px}
.r-post a{font:400 16px/1.3 var(--serif);text-decoration:none;display:block;max-width:14em}
.r-post a::after{content:"";position:absolute;inset:0}
.r-post a span{font:400 var(--fs-nav)/1 var(--serif);white-space:nowrap}
.mb{position:relative;display:block;height:10px;margin-top:8px;max-width:16rem}
.mb i,.mb b{position:absolute;top:0;bottom:0}
.mb-solid{left:0;background:var(--carbon)}
.mb-hatch{background:var(--hatch);box-shadow:inset 0 0 0 1px var(--signal)}
.mb-change{box-shadow:inset 0 0 0 1px var(--carbon)}
.mb-limit{top:-4px!important;bottom:-4px!important;width:2px;margin-left:-1px;background:var(--signal)}
@media (max-width:860px){
  .results thead{display:none}
  .results tbody{border-top:1px solid var(--carbon)}
  .results,.results tbody,.results tr,.results td{display:block;width:100%}
  .results tr{border-bottom:1px solid var(--rule);padding:18px 0}
  .results td{border:0;padding:4px 0;text-align:left!important}
  .results td[data-k]::before{content:attr(data-k);display:block;font:400 14px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-2);margin:12px 0 4px}
  .r-obj{white-space:normal}.r-lev{max-width:none}.r-post a{max-width:none}
  .r-ba{min-width:0}.r-ba .num{white-space:normal}
}

/* case entry (results) */
.case-row .body{margin-bottom:var(--sp-4)}
.case-row figure{margin-top:var(--sp-6)}
.case-row .mlink{display:inline-block}
.trace-fig{margin-top:var(--sp-5);display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:var(--col-gap);align-items:end}
.trace-plot{position:relative;aspect-ratio:640/180}
.trace-plot svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.tl{position:absolute;transform:translateY(-135%);font:400 14px/1 var(--serif);letter-spacing:0;color:var(--grey-1);white-space:nowrap;background:var(--paper);padding:0 4px 0 0}
.tl.r{padding:0 0 0 4px}
.tl.lim-t{transform:translateY(40%);color:var(--signal-text);text-transform:none;letter-spacing:0}
.trace-fig .tr{fill:none;stroke:var(--carbon);stroke-width:1.75;vector-effect:non-scaling-stroke}
.trace-fig .lim{stroke:var(--signal);stroke-width:2;vector-effect:non-scaling-stroke}
.trace-fig .axis{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.readout{border-top:1px solid var(--carbon)}
.readout div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.readout dt{font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1)}
.readout dd{font:400 17px/1.2 var(--serif);white-space:nowrap}
.readout .hl dd{color:var(--signal-text);font-weight:600}
@media (max-width:760px){.trace-fig{grid-template-columns:1fr}}

/* plate (scope) */
.plate{background:var(--paper);color:var(--carbon);padding:var(--sp-6)}
.plate svg{width:100%;height:auto;display:block}
.pl-faint{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:2 4}
.pl-line{fill:none;stroke:var(--signal);stroke-width:1}
.pl-line[fill]{fill:url(#hatch-scope)}
.pl-fine{stroke:var(--signal);stroke-width:.6;opacity:.7}
.pl-strong{fill:none;stroke:var(--signal);stroke-width:1.75}
.pl-off{fill:none;stroke:var(--grey-2);stroke-width:1;stroke-dasharray:3 3}
.pl-t{font:400 14px var(--serif);letter-spacing:0;fill:var(--grey-1)}
.plate .fig-head{border-bottom-color:var(--rule)}
.plate-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--col-gap);align-items:start;margin-top:var(--sp-5)}
@media (max-width:900px){.plate-grid{grid-template-columns:1fr}.plate{padding:var(--sp-5) var(--sp-4)}}

/* ===== Method ===== */
.quote{margin-top:var(--sp-7);padding-left:var(--sp-5);border-left:2px solid var(--carbon);max-width:34em}
.quote p{font:italic 400 22px/1.35 var(--serif);text-wrap:balance}
.quote footer{margin-top:var(--sp-3);font:400 var(--fs-label)/1.4 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1)}
.quote footer a{text-decoration:none}.quote footer a:hover{color:var(--signal-text)}
.dims{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-5)}
.dims>div{border-top:1px solid var(--carbon)}
.dims dt{padding:12px 0 10px}
.dims dd{padding:10px 0;border-top:1px solid var(--rule);font-size:16px;line-height:1.35}
.dims-note{margin-top:var(--sp-6);max-width:var(--measure)}
@media (max-width:760px){.dims{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-5)}}
.levers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--carbon)}
.levers li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);padding:16px 0 18px;border-bottom:1px solid var(--rule)}
.levers .n{font:400 14px/1.9 var(--serif);color:var(--grey-2)}
.levers b{font-weight:600}
.levers p{font-size:16px;line-height:1.45}
@media (max-width:760px){.levers{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-5);counter-reset:s}
.steps li{border-top:1px solid var(--carbon);padding-top:12px}
.steps .label{display:block;margin-bottom:10px}
.steps h3{font:400 var(--fs-h3)/1.2 var(--serif)}
.steps p{margin-top:8px;font-size:16px;line-height:1.45}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--sp-6)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.sec .plate{margin-top:var(--sp-7)}

/* ===== Tools ===== */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--carbon)}
.stats div{padding:16px 0 4px}
.stats b{display:block;font:600 22px/1 var(--serif);letter-spacing:0;font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:10px;font-size:16px;line-height:1.4;color:var(--grey-1);max-width:16em}
@media (max-width:640px){.stats{grid-template-columns:1fr}.stats div{padding:14px 0;border-bottom:1px solid var(--rule)}}
.tool-panel{padding-top:var(--sp-6)}
.tool-panel>.body{margin-bottom:var(--sp-6)}
.codebox{position:relative;max-width:44rem;margin-top:var(--sp-5)}
.codebox button{position:absolute;top:10px;right:12px}
.tool-panel figure{margin-top:var(--sp-7)}

/* ===== Terms (engagement, company) ===== */
.terms .row{padding-block:var(--sp-5) var(--sp-6);border-top:1px solid var(--rule)}
.terms .row:first-child{border-top:1px solid var(--carbon)}
.terms:not(.numbered) .row{align-items:baseline}
.terms.numbered .row>.body{padding-top:25px}
@media (max-width:900px){.terms.numbered .row>.body{padding-top:0}}
.backers{font:400 22px/1.1 var(--serif);letter-spacing:0}

/* ===== Post ===== */
.post-head{padding-block:var(--sp-7) var(--sp-6)}
.post-head .h1{font-size:var(--fs-h1);max-width:17em}
.post-head .lede{margin-top:var(--sp-5);max-width:32em}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:var(--sp-6);padding-top:12px;border-top:1px solid var(--carbon);font:400 14px/1.5 var(--serif);color:var(--grey-1)}
.post-meta span+span{margin-left:24px}
@media (max-width:640px){.post-meta{display:block}.post-meta span{display:block}.post-meta span+span::before{content:none}}
.post-body{padding-top:var(--sp-6)}
.toc{position:sticky;top:24px;align-self:start}
.toc ol{margin-top:10px;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:block;padding:8px 0;font-size:13px;line-height:1.3;text-decoration:none;color:var(--grey-1)}
.toc a:hover{color:var(--signal-text)}
@media (max-width:900px){.toc{display:none}}
.article{min-width:0}
.article>*{max-width:var(--measure)}
.article p{margin:0 0 1em}
.article h2{font:400 22px/1.15 var(--serif);letter-spacing:0;margin:2.1em 0 .55em;text-wrap:balance;scroll-margin-top:24px}
.article h3{font:400 var(--fs-h3)/1.25 var(--serif);margin:1.6em 0 .4em}
.article>h2:first-child,.article>section:first-child>h2:first-child{margin-top:0}
.article ul,.article ol{margin:0 0 1.1em;padding-left:1.4em}
.article ul{list-style:none}
.article ul>li{position:relative}
.article ul>li::before{content:"";position:absolute;left:-1.1em;top:.72em;width:.5em;border-top:1px solid var(--carbon)}
.article ol{list-style:decimal}
.article ol>li::marker{font:400 .8em var(--serif);color:var(--grey-1)}
.article li{margin:.35em 0;text-wrap:pretty}
.article strong{font-weight:600}
.article code{font-size:.8em;background:var(--paper-2);padding:.1em .3em;overflow-wrap:anywhere}
.article pre{background:var(--paper-2);padding:var(--sp-4) var(--sp-5);overflow-x:auto;border-left:2px solid var(--carbon);margin:0 0 1.2em}
.article pre code{background:none;padding:0;font-size:var(--fs-code)}
.article a{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:1px;text-underline-offset:.2em}
.article a:hover{color:var(--signal-text);text-decoration-thickness:2px}
.article blockquote{margin:1.6em 0;padding-left:var(--sp-5);border-left:2px solid var(--carbon)}
.article blockquote p{font-style:italic}
.article blockquote footer{font:400 var(--fs-label)/1.5 var(--serif);letter-spacing:0;color:var(--grey-1)}
.article blockquote footer a{text-decoration:none}
.article blockquote footer cite{font-style:normal}
.article .tbl{overflow-x:auto;margin:1.6em 0 1.8em;max-width:44rem}
.article table{border-collapse:collapse;min-width:100%;font-size:16px;line-height:1.35}
.article th{font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1);text-align:left;
  padding:0 16px 10px 0;border-bottom:1px solid var(--carbon);vertical-align:bottom}
.article td{padding:9px 16px 9px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.article th:last-child,.article td:last-child{padding-right:0}
.article th[align=right]{text-align:right}
.article td[align=right]{text-align:right;white-space:nowrap;font:400 var(--fs-num)/1.5 var(--serif);font-variant-numeric:tabular-nums}
.article .fig{margin:2.2em 0 2.4em;max-width:none}
.article .fig-scroll svg{max-width:44rem}
.fig-scroll{overflow-x:auto}
@media (max-width:640px){.article .fig-scroll svg{min-width:560px}}
.article .fig .fig-head{margin-bottom:var(--sp-5)}
.article .fig svg{display:block;width:100%;height:auto}
.article .fig .fig-src{margin-top:var(--sp-3)}
.article .settings{margin-top:2.4em;padding-top:var(--sp-5);border-top:1px solid var(--carbon)}
.article .settings h2{margin:0 0 .7em;font-size:var(--fs-h3)}
.article .settings li,.article .settings p{font-size:16px;line-height:1.5}
.article .settings code{font-size:.82em}

/* post figures (SVG), recolored to the one ink */
.fig .t{fill:var(--carbon);font-family:var(--serif);font-variant-numeric:tabular-nums}
.fig .m{fill:var(--grey-1)}
.fig .a{fill:var(--carbon)}
.fig text.a{fill:var(--carbon)}
.fig .n{fill:var(--tint)}
.fig .g{fill:var(--paper-2);stroke:var(--rule)}
.fig .on-a{fill:var(--paper)}
.fig .ax{stroke:var(--grey-2)}
.fig .sa{stroke:var(--carbon)}
.fig .sn{stroke:var(--tint)}

/* essay figures (case-for-inference-optimization) */
.essay{--ink:var(--carbon);--muted:var(--grey-1);--faint:var(--grey-2);--accent:var(--carbon)}
.essay .figure{margin:2.2em 0 2.4em;max-width:44rem;padding-top:var(--sp-4);border-top:1px solid var(--carbon)}
.essay .f1-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 3rem}
.essay .f1-label{margin:0 0 .9rem;font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1)}
.essay .f1-rows{display:grid;gap:9px}
.essay .f1-row{display:flex;height:11px}
.essay .f1-row span{display:block;height:100%}
.essay .f1-c{background:var(--tint)}
.essay .f1-n{background:var(--carbon)}
.essay .f1-o{background:none;box-shadow:inset 0 0 0 1px var(--carbon);margin-left:3px}
.essay .figure .legend{margin:1.4rem 0 .5rem;display:flex}
.essay .legend span{display:inline-flex;align-items:center;gap:8px}
.essay .legend i{width:24px;height:10px;margin:0}
.essay .legend .sw-new{background:var(--carbon)}
.essay .legend .sw-cached{background:var(--tint)}
.essay .legend .sw-out{box-shadow:inset 0 0 0 1px var(--carbon)}
.essay .source-line{display:block;font:400 14px/1.55 var(--serif);color:var(--grey-2)}
.essay .f2{display:block;width:100%;max-width:36rem;height:auto}
.essay .f2 text{font-family:var(--serif)}
.essay .f2-axis{stroke:var(--grey-2);stroke-width:1}
.essay .f2-label,.essay .f2-tag{fill:var(--grey-1);font-size:12px}
.essay .f2-note{fill:var(--carbon);font-size:12px}
.essay .f2-before{fill:none;stroke:var(--tint);stroke-width:2.5}
.essay .f2-after{fill:none;stroke:var(--carbon);stroke-width:2.5}
.essay .f2-shift{stroke:var(--carbon);stroke-width:1.3}
.essay .f2-along{fill:none;stroke:var(--carbon);stroke-width:1.4;stroke-dasharray:4 3}
.essay .f2-ink-fill,.essay .f2-gold-fill{fill:var(--carbon)}
.essay .points{width:100%;border-collapse:collapse}
.essay .points tbody th{font:400 16px/1.35 var(--serif);letter-spacing:0;text-transform:none;color:var(--carbon);border-bottom:1px solid var(--rule);padding:9px 16px 9px 0;vertical-align:top}
.essay .points tbody td{white-space:nowrap}
.essay .points tbody tr:last-child th,.essay .points tbody tr:last-child td{border-bottom:1px solid var(--carbon)}
.essay .tbl{max-width:var(--measure)}
@media (max-width:640px){.essay .f1-cols{grid-template-columns:1fr}.essay #figure-2{overflow-x:auto}.essay .f2{min-width:520px}}

/* post end */
.post-end{margin-top:var(--sp-8)}
.post-end .closing{border-top:0;padding-top:var(--sp-6)}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);margin-top:var(--sp-7);border-top:1px solid var(--rule)}
.pn a{display:block;padding-top:14px;text-decoration:none;font:400 17px/1.3 var(--serif)}
.pn a:hover{color:var(--signal-text)}
.pn a .label{display:block;margin-bottom:6px}
.pn .next{text-align:right;grid-column:2}
@media (max-width:640px){.pn{grid-template-columns:1fr;gap:var(--sp-4)}.pn .next{grid-column:1;text-align:left}}

/* ===== Footer ===== */
.foot{border-top:1px solid var(--rule-strong);margin-top:var(--sp-8)}
.is-home .foot{margin-top:var(--sp-6)}
.is-home .closing{margin-top:var(--sp-6);padding-top:var(--sp-6)}
.is-home .feed-sec{margin-top:40px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:var(--sp-5)}
.foot ul{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font:400 14px/1.4 var(--serif);color:var(--grey-1);letter-spacing:0}
.foot li+li{margin-left:20px}
.foot a,.foot button{font:inherit;letter-spacing:0;text-transform:none;color:inherit;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.foot a:hover,.foot button:hover{color:var(--signal-text);text-decoration:underline;text-underline-offset:3px}
.foot .trace-glyph{flex:none;width:64px;height:20px;overflow:visible}
.foot .trace-glyph path{fill:none;stroke:var(--signal);stroke-width:1.5}

/* ===== ⌘K index ===== */
.cmdk{width:calc(100% - 32px);max-width:34rem;margin:12vh auto auto;padding:0;border:1px solid var(--carbon);background:var(--paper);color:var(--carbon)}
.cmdk::backdrop{background:rgba(34,19,11,.32)}
.cmdk-in{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--carbon);font:400 16px/1 var(--serif)}
.cmdk-in>span:first-child{color:var(--signal-text)}
.cmdk-in input{all:unset;flex:1;min-width:0;font:400 16px/1.2 var(--serif);color:var(--carbon)}
.cmdk-in input::placeholder{color:var(--grey-2)}
.cmdk ol{max-height:min(56vh,26rem);overflow-y:auto}
.cmdk li{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 1rem;gap:12px;padding:10px 16px;border-bottom:1px solid var(--rule);font:400 15px/1.35 var(--serif);align-items:baseline;cursor:pointer}
.cmdk li:last-child{border-bottom:0}
.cmdk li .k{font-size:12px;letter-spacing:0;text-transform:none;color:var(--grey-2)}
.cmdk li .s{display:block;color:var(--grey-2);font-size:12px;margin-top:2px}
.cmdk li .e{visibility:hidden}
.cmdk li[aria-selected="true"]{background:var(--carbon);color:var(--paper)}
.cmdk li[aria-selected="true"] .k,.cmdk li[aria-selected="true"] .s{color:var(--paper);opacity:.7}
.cmdk li[aria-selected="true"] .e{visibility:visible}
.cmdk .none{padding:14px 16px;font:400 15px/1.4 var(--serif);color:var(--grey-1)}
.cmdk-foot{display:flex;justify-content:space-between;padding:8px 16px;border-top:1px solid var(--rule);font:400 14px/1.3 var(--serif);color:var(--grey-2);letter-spacing:0}

/* ===== Cookie banner (consent.js) ===== */
.cookie-banner{position:fixed;right:16px;bottom:16px;z-index:50;width:calc(100% - 32px);max-width:26rem;background:var(--paper);border:1px solid var(--carbon);padding:20px}
.cookie-banner::before{content:"Cookies";display:block;font:400 var(--fs-label)/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--grey-1)}
.cookie-banner-text{margin-top:8px;font:400 16px/1.45 var(--serif);color:var(--carbon)}
.cookie-banner-text a{text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:.2em}
.cookie-banner-text a:hover{color:var(--signal-text)}
.cookie-banner-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.cookie-banner-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 18px;
  font:600 var(--fs-nav)/1 var(--serif);letter-spacing:0;text-transform:none;
  color:var(--paper);background:var(--carbon);border:1px solid var(--carbon);border-radius:0;cursor:pointer}
.cookie-banner-btn:hover{background:var(--signal);border-color:var(--signal)}
.cookie-banner-btn:active{transform:translateY(1px)}

/* headings use the sturdier text cut, not the hairline display cut */
h1,h2,h3,.h1,.h2,.h3,.side-h{font-variation-settings:"opsz" 18}
.label{color:var(--carbon)}

/* home: engineering writing, two lines per entry */
.feed-w li{grid-template-columns:7.5rem 7.5rem minmax(0,1fr);padding:14px 0 15px}
.feed-w .w a{display:inline;font:400 17px/1.35 var(--serif);color:var(--carbon)}
.feed-w .w p{margin-top:4px;font:400 15px/1.55 var(--serif);color:var(--grey-1);max-width:62em}
.feed-w .ext{font:400 15px var(--serif);color:var(--grey-2)}
.feed-w li:hover a span::after{content:none}
.feed-w li:hover .w a{color:var(--signal-text)}
@media (max-width:640px){.feed-w li{grid-template-columns:auto minmax(0,1fr)}.feed-w .w{grid-column:1/-1}}
.feed-w .new{font:400 14px/1.4 var(--serif);color:var(--signal-text)}
.feed li[hidden]{display:none}
.feed li:target{background:var(--paper-2);box-shadow:-12px 0 0 var(--paper-2),12px 0 0 var(--paper-2)}

/* ===== Header E: index first (explore/v3/header/e.html) ===== */

.ix .logo{display:block;height:var(--logo-h,24px);width:auto;color:var(--carbon)}
/* the one link style: ink underline, thicker on hover and for the current page (no orange, no box) */
.ul{font:inherit;color:var(--carbon);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-skip-ink:auto}
.ul:hover,.ul[aria-current]{text-decoration-thickness:2px}
.mono{font:400 15px/1.45 var(--serif)}
.k{color:var(--grey-2)}
.num{font-variant-numeric:tabular-nums}
.m-only{display:none}
@media (max-width:760px){.d-only{display:none!important}.m-only{display:revert}}

.ix-g{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:28px;row-gap:10px;align-items:center;padding-top:26px}
.ix-logo{--logo-h:24px}
.ix-field{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 14px;border:1px solid var(--carbon);background:var(--paper);
  font:400 15px/1.3 var(--serif);color:var(--grey-2);text-align:left;cursor:text}
.ix-field:hover{background:var(--paper-2)}
.ix-field .loc{color:var(--carbon)}
.ix-field .ph{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ix-field .key{margin-left:auto;padding-left:12px;color:var(--grey-1);white-space:nowrap}
.ix-book{font:400 15px/1.3 var(--serif);white-space:nowrap}
.ix-nav{grid-column:2;display:flex;gap:24px;padding-left:15px;font:400 15px/1.3 var(--serif)}
.ix-nav .k{margin-right:-12px}
@media (max-width:760px){
  .ix-g{grid-template-columns:minmax(0,1fr) auto;padding-top:18px;row-gap:12px}
  .ix-field{grid-column:1/-1;grid-row:2;min-height:44px}
  .ix-nav{grid-column:1/-1;padding-left:0;gap:20px}
  .ix-book{grid-row:1;grid-column:2}
}

/* ===== Home hero B: the latest finding as the headline (explore/v3/hero/b.html) ===== */
.hx{padding-top:56px}
.hx .eyebrow{font:400 15px/1.4 var(--serif);color:var(--grey-1);margin-bottom:16px}
.hx .eyebrow a{color:inherit}
.hx h1{max-width:21em}
.hx .two{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--col-gap);align-items:start;margin-top:28px}
.hx-lede{font:400 var(--fs-lede)/1.55 var(--serif);color:var(--grey-1);max-width:34em;text-wrap:pretty}
.hx .term{margin-top:20px;font:400 15px/1.55 var(--serif);color:var(--carbon);max-width:50em}
.hx .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px}
.cta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--carbon);color:var(--paper);font:400 15px/1 var(--serif);text-decoration:none}
.cta:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:760px){.hx .two{grid-template-columns:1fr;gap:28px}.hx{padding-top:36px}}
.ul{font:inherit;color:var(--carbon);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-skip-ink:auto}
.ul:hover,.ul[aria-current]{text-decoration-thickness:2px}
.ul.mono{font:400 15px/1.45 var(--serif)}
/* blog rows: orange stays with hardware limits */
.feed-w .new{color:var(--grey-1)}
.feed li:hover a,.feed-w li:hover .w a{color:var(--carbon);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.is-home .feed-sec{margin-top:48px}
/* gap bar */
.gb{font:400 15px/1.35 var(--serif);font-variant-numeric:tabular-nums}
.gb-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr) 5rem;column-gap:16px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.gb-row:first-child{border-top:1px solid var(--carbon)}
.gb-n{color:var(--carbon)}
.gb-v{text-align:right;white-space:nowrap}
.gb-t{position:relative;height:14px}
.gb-t i{position:absolute;top:0;bottom:0;display:block}
.gb-t .w{left:0;width:calc(min(var(--m),var(--l)) / var(--max) * 100%);background:var(--carbon)}
.gb-t .h{left:calc(var(--l) / var(--max) * 100%);width:calc((var(--m) - var(--l)) / var(--max) * 100%);box-shadow:inset 0 0 0 1px var(--carbon)}
.gb-t .lim{top:-6px;bottom:-6px;left:calc(var(--l) / var(--max) * 100%);width:2px;margin-left:-1px;background:var(--signal)}
.gb-axis{border-top:0;padding-top:0}
.gb-axis .gb-t{height:auto}
.gb-l{position:absolute;top:0;left:calc(var(--l) / var(--max) * 100%);transform:translateX(-50%);white-space:nowrap;font:400 14px/1.3 var(--serif);color:var(--signal-text)}
.b-fig{margin:0}.b-fig .fh{font:400 14px/1.4 var(--serif);color:var(--grey-1);margin-bottom:10px}
@media (max-width:640px){.gb-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}.gb-t{grid-column:1/-1}.gb-n{grid-row:1;grid-column:1}.gb-v{grid-row:1;grid-column:2}.gb-axis>span{display:none}.gb-l{transform:translateX(-30%)}}

/* ===== Ported engineering posts (first published on www.overshoot.ai/blogs) ===== */
.toc li.sub a{padding-left:12px}
.article h4{font:italic 400 var(--fs-body)/1.4 var(--serif);margin:1.4em 0 .4em}
.article .pfig img,.article .pfig video{display:block;width:100%;max-width:44rem;height:auto}
.article .pfig img{mix-blend-mode:multiply}
.article .pfig video{background:var(--carbon)}
.article .pfig .bars,.article .pfig .fig-src{max-width:44rem}
.article .pfig .fig-src .mlink{color:var(--carbon)}
.article .pfig .fig-src a{color:inherit}
.article .pfig .fig-cap{margin-top:var(--sp-3)}
.article blockquote.callout{padding:var(--sp-4) var(--sp-5);background:var(--paper-2);border-left:2px solid var(--carbon)}
.article blockquote.callout p{font-style:normal}
.article blockquote.callout p:last-child,.article blockquote.note p:last-child{margin-bottom:0}
.article blockquote.note{padding-left:var(--sp-4);border-left:1px solid var(--rule)}
.article blockquote.note p{font:400 var(--fs-small)/var(--lh-small) var(--serif);color:var(--grey-1)}
.article blockquote.note em{font-style:normal;color:var(--carbon)}
.article details.tangent{max-width:44rem;margin:1.6em 0 1.8em;border-top:1px solid var(--carbon);border-bottom:1px solid var(--carbon)}
.article details.tangent summary{display:grid;grid-template-columns:1.5rem minmax(0,1fr);padding:12px 0 13px;list-style:none;cursor:pointer;color:var(--grey-1)}
.article details.tangent summary::-webkit-details-marker{display:none}
.article details.tangent summary::before{content:"+";font:400 15px/1.85 var(--serif);color:var(--carbon)}
.article details.tangent[open] summary::before{content:"−"}
.article details.tangent summary:hover{color:var(--carbon)}
.article details.tangent[open] summary{border-bottom:1px solid var(--rule)}
.article .tangent-in{padding:var(--sp-4) 0 var(--sp-5) 1.5rem}
.article .tangent-in>*{max-width:var(--measure)}
.article .tangent-in>.fig,.article .tangent-in>.pcode{max-width:none}
.article .tangent-in>h3:first-child{margin-top:.4em}
.article .pcode{max-width:44rem;margin:0 0 1.2em}
.article .pcode pre{margin:0}
.pcode-bar{display:flex;justify-content:space-between;align-items:baseline;padding:0 0 6px;font:400 12px/1.4 var(--code);color:var(--grey-2)}
.pcode-bar .mlink{font-size:12px}
.article ol.psteps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:44rem;margin:0;padding:0;list-style:none}
.article ol.psteps li{margin:0;padding:10px 12px 12px 0;border-bottom:1px solid var(--rule);font:400 15px/1.4 var(--serif)}
.psteps .n{display:block;margin-bottom:4px;color:var(--grey-2)}
.psteps .out{color:var(--grey-1)}
@media (max-width:640px){.article ol.psteps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.post-meta span+span{margin-left:0}} /* the stacked meta lines (date, author, tags) start flush */
.article .pfig.wide img{max-width:60rem} /* two-panel charts need the full column to stay legible */

/* footer logo + Y Combinator mark */
.foot .foot-logo{flex:none;display:block;height:18px;width:auto;color:var(--carbon)}
.yc-mark{display:inline-flex;align-items:center;gap:6px;vertical-align:middle;font:500 13px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--carbon)}
.yc-mark svg{display:block;width:16px;height:16px}
.foot .yc-li{display:inline-flex;align-items:center;gap:8px}
.yc-row{display:flex;align-items:center;gap:10px;margin-top:40px;padding-top:16px;border-top:1px solid var(--rule);font:400 15px/1 var(--serif);color:var(--grey-1)}
.yc-row .yc-mark{font-size:15px}.yc-row .yc-mark svg{width:20px;height:20px}
.is-home .yc-row+.feed-sec{margin-top:40px}

/* YC line sits above the hero headline, in the same mono grey as its label */
.yc-mark{font:inherit;color:inherit}
.yc-row{margin:0 0 20px;padding-top:0;border-top:0;gap:8px;font:400 15px/1 var(--serif);color:var(--grey-1)}
.yc-row .yc-mark{font:inherit}.yc-row .yc-mark svg{width:16px;height:16px}
.foot .yc-mark{font:inherit}

/* rotating hero: headline, figure and link change together */
.gb.nolim .lim,.gb.nolim .h{display:none}
.hx-right{display:flex;flex-direction:column;min-height:100%}
.hx-fig[hidden]{display:none}
.hx [data-hero-t],.hx-fig{transition:opacity .28s ease}
.hx.fading [data-hero-t],.hx.fading .hx-fig{opacity:0}
.hx-pager{display:flex;gap:20px;margin-top:22px;padding-top:12px;border-top:1px solid var(--rule)}
.hx-pager button{position:relative;font:400 15px/1.4 var(--serif);color:var(--grey-1);background:none;border:0;padding:0 0 4px;cursor:pointer}
.hx-pager button[aria-pressed=true]{color:var(--carbon)}
.hx-pager button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--carbon);transform:scaleX(0);transform-origin:left}
.hx-pager button[aria-pressed=true]::after{transform:scaleX(1)}
.hx.playing .hx-pager button[aria-pressed=true]::after{animation:hxbar var(--hx-ms,4s) linear both}
@keyframes hxbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hx h1{min-height:calc(var(--fs-h1) * 1.15 * 3)}
@media (max-width:760px){.hx h1{min-height:calc(var(--fs-h1) * 1.15 * 5)}.hx-pager{gap:16px;flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.hx [data-hero-t],.hx-fig{transition:none}}
.hx-fig{min-height:132px}
.hx-fig .fh{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.hx-fig .fh{white-space:normal}}

/* ===== Play: games against a vision model (site/play/, code in site/play/assets/) ===== */
/* one page: plain mono tabs over a single board */
.pg-head{padding-bottom:var(--sp-5)}
.pg-tabs{display:flex;flex-wrap:wrap;gap:8px 24px;font:400 15px/1.45 var(--serif);margin-bottom:var(--sp-5)}

/* the board: a thin ruled frame, 3:2, that grows when a form needs the room */
.pg{max-width:min(880px,calc((100svh - 150px) * 1.5))}
.pg-mode{font:400 14px/1.5 var(--serif);color:var(--grey-1);margin-bottom:10px;min-height:1.5em}
.pg-stage{position:relative;aspect-ratio:3/2;border:1px solid var(--carbon);background:var(--paper);-webkit-user-select:none;user-select:none}
/* overflow stays visible so a form or end card taller than 3:2 grows the frame */
.pg-stage.is-form{display:flex;align-items:center}
.pg-stage.is-center{display:flex;align-items:center;justify-content:center;text-align:center}
.pg-stage.is-tap{cursor:pointer;touch-action:manipulation}
.pg-stage.is-ink{background:var(--carbon);color:var(--paper)}
.pg-stage.is-ink .pg-sub{color:var(--tint)}
.pg-stage:focus{outline:none}
.pg-stage:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.pg-mid{width:100%;padding:24px;max-width:34em}
.pg-huge{font:400 clamp(3rem,2rem + 6vw,6rem)/1 var(--serif);font-variant-numeric:tabular-nums}
.pg-big{font:400 22px/1.25 var(--serif);text-wrap:balance}
.pg-sub{margin-top:12px;font:400 15px/1.5 var(--serif);color:var(--grey-1)}
.hot{color:var(--signal-text)}
.pg-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:inherit;gap:12px 28px;margin-top:20px}
.pg-stage.is-center .pg-acts{justify-content:center}

/* intro form and end card */
.pg-form,.pg-end{width:100%;padding:clamp(20px,4vw,40px)}
.pg-q{font:400 var(--fs-h2)/var(--lh-h2) var(--serif);text-wrap:balance;max-width:22em}
.pg-rows{margin-top:24px;border-top:1px solid var(--rule)}
.pg-row{display:grid;grid-template-columns:7rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.pg-k{font:400 14px/1.4 var(--serif);color:var(--grey-1)}
.pg-choices{display:flex;flex-wrap:wrap;gap:8px 24px}
.pg-choice{font:400 15px/1.45 var(--serif);color:var(--grey-1);background:none;border:0;padding:4px 0;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--rule)}
.pg-choice:hover{color:var(--carbon);text-decoration-color:currentColor}
.pg-choice[aria-pressed=true]{color:var(--carbon);text-decoration-color:var(--carbon);text-decoration-thickness:2px}
.pg-choice:disabled{color:var(--tint);cursor:not-allowed;text-decoration:line-through}
.pg-note{color:var(--grey-2)}
.pg-go{margin-top:24px}
.pg-go .cta,.pg-acts .cta{border:0;cursor:pointer}
.pg-fine{margin-top:16px;font:400 14px/1.5 var(--serif);color:var(--grey-1);max-width:46em}
@media (max-width:640px){.pg-row{grid-template-columns:minmax(0,1fr);row-gap:6px}}
.pg-t{width:100%;max-width:34rem;margin-top:20px;border-collapse:collapse;font:400 15px/1.4 var(--serif);font-variant-numeric:tabular-nums}
.pg-t th,.pg-t td{padding:7px 0;border-bottom:1px solid var(--rule);text-align:right;font-weight:400}
.pg-t thead th{color:var(--grey-1);border-bottom-color:var(--carbon)}
.pg-t th[scope=row]{text-align:left;color:var(--grey-1);font-family:var(--serif);font-size:15px}
.pg-t td{padding-left:16px}
.pg-t td{color:var(--grey-1)}
.pg-t td.win{color:var(--carbon)}

/* score row: your time and the model's, side by side */
.pg-score{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;column-gap:var(--col-gap);border-bottom:1px solid var(--rule)}
.pg-cell{padding:12px 0 14px;min-width:0}
.pg-cell.end{text-align:right}
.pg-cell b{display:block;margin-top:4px;font:400 22px/1.15 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-cell b.hot{color:var(--signal-text)}
.pg-s{display:block;margin-top:4px;font:400 14px/1.4 var(--serif);color:var(--grey-2)}
@media (max-width:640px){.pg-score{column-gap:16px}.pg-cell b{font-size:17px}}

/* Quick Math answers */
.pg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(16px,3vw,32px);border-top:1px solid var(--rule);border-left:1px solid var(--rule);width:min(30rem,100%);margin-inline:auto}
.pg-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 22px;background:none;border:0;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:pointer;color:var(--carbon)}
.pg-card b{font:400 clamp(1.25rem,1rem + 1.4vw,1.75rem)/1.2 var(--serif);font-variant-numeric:tabular-nums}
.pg-card .pg-i{font:400 13px/1 var(--serif);color:var(--grey-2)}
.pg-card .pg-tag{position:absolute;left:0;right:0;bottom:6px;font:400 13px/1 var(--serif);color:var(--grey-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-card:hover:not(:disabled){background:var(--paper-2)}
.pg-card:disabled{cursor:default}
.pg-card.is-wrong b{color:var(--tint);text-decoration:line-through}
.pg-card.is-mine{background:var(--carbon);color:var(--paper)}
.pg-card.is-mine .pg-i,.pg-card.is-mine .pg-tag{color:var(--tint)}
.pg-card.is-theirs{outline:1px solid var(--carbon);outline-offset:-1px}

/* arenas: Aim Trainer targets and Quick Draw sketch */
.pg-stage.is-arena{touch-action:none;cursor:crosshair;overflow:hidden}
.pg-layer{position:absolute;inset:0}
.pg-target{position:absolute;left:0;top:0;border-radius:50%;border:2px solid var(--carbon);transform-origin:50% 50%;pointer-events:none}
.pg-target::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--carbon)}
.pg-mark{position:absolute;left:0;top:0;font:400 13px/1 var(--serif);color:var(--grey-1);margin:6px 0 0 6px;pointer-events:none}
.pg-cursor{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.pg-cursor i::before,.pg-cursor i::after{content:"";position:absolute;background:var(--grey-1)}
.pg-cursor i::before{left:-9px;top:0;width:19px;height:1px}
.pg-cursor i::after{left:0;top:-9px;width:1px;height:19px}
.pg-cursor i{position:absolute;left:0;top:0}
.pg-cursor span{position:absolute;left:12px;top:10px;font:400 13px/1 var(--serif);color:var(--grey-1);white-space:nowrap}
.pg-sketch{position:absolute;inset:0;width:100%;height:100%;display:block}
.pg-guesses{position:absolute;left:14px;bottom:12px;max-width:calc(100% - 150px);pointer-events:none;font:400 15px/1.5 var(--serif);color:var(--grey-2)}
.pg-guesses .is-last{color:var(--grey-1)}
.pg-guesses .is-right{color:var(--carbon)}
.pg-guesses span{color:var(--grey-2)}
.pg-tools{position:absolute;right:14px;bottom:12px;display:flex;gap:20px}
.pg-tools .ul:disabled{color:var(--tint);cursor:default}
.pg-veil{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:color-mix(in srgb,var(--paper) 92%,transparent)}
.pg-veil[hidden]{display:none}

/* ===== Blog design E (explore/v3/blog-design/e.html) ===== */

li[hidden]{display:none!important}
.bh{padding:48px 0 36px}
.bh .lede{margin-top:16px;max-width:34em;color:var(--carbon)}
.bh .by{margin-top:14px;font:400 15px/1.5 var(--serif);color:var(--grey-1)}
.bh .by a{color:inherit}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 24px;border-bottom:1px solid var(--carbon)}
.top .filters{padding-bottom:0}
.top .filters button{padding:10px 0 9px;margin-bottom:-1px}
.top .note{font:400 14px/1.4 var(--serif);color:var(--grey-1);padding:10px 0}
.lim{color:var(--signal-text)}
.g{color:var(--grey-1)}
a.row-a{position:absolute;inset:0;z-index:1}
li:hover .tt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.home-list{margin-top:48px}
.home-top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:1px solid var(--carbon)}
.home-top h2{font:400 15px/1.3 var(--serif);color:var(--carbon)}
.home-top .ul{font:400 15px/1.45 var(--serif)}
@media (max-width:640px){.bh{padding:32px 0 28px}.top .note{display:none}}

.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:56px;border:1px solid var(--carbon);padding:28px 32px 30px}
.feat .k{font:400 14px/1.4 var(--serif);color:var(--grey-1)}
.feat h2{margin-top:10px;font:400 22px/1.25 var(--serif);text-wrap:balance}
.feat h2 a{text-decoration:none}
.feat h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.feat .s{margin-top:12px;font:400 16px/1.5 var(--serif);color:var(--grey-1);max-width:30em}
.feat .go{margin-top:16px;font:400 15px/1.45 var(--serif)}
.feat figure{margin:0}
.feat .fh{font:400 14px/1.4 var(--serif);color:var(--grey-1);margin-bottom:10px}
.feat .readout{margin-top:22px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;border-top:1px solid var(--carbon)}
.feat .readout div{display:block;padding:8px 0 0;border-bottom:0}
.feat .readout dd{margin-top:4px;font-size:15px}
.tx{margin-top:44px}
.tx>ol:first-child{border-top:1px solid var(--carbon)}
.tx ol li{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr) 15rem;column-gap:24px;align-items:baseline;padding:8px 0 9px;border-bottom:1px solid var(--rule)}
.tx .d{font:400 14px/1.4 var(--serif);color:var(--grey-1);white-space:nowrap}
.tx .tt{font:400 16px/1.35 var(--serif)}
.tx .x{margin-left:10px;font:400 14px/1 var(--serif);color:var(--grey-1);white-space:nowrap}
.tx .v{font:400 15px/1.4 var(--serif);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx .v .lim{margin-left:10px;font-size:12px}
.tx .v .g{font-size:12px}
@media (max-width:900px){.feat{grid-template-columns:minmax(0,1fr);row-gap:28px}}
@media (max-width:640px){
  .feat{padding:18px 16px 20px;margin-inline:-1px}
  .feat .readout{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:4px}
  .tx ol li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:10px 0 11px}
  .tx .w{grid-column:1/-1;grid-row:1}
  .tx .d{grid-row:2;grid-column:1}
  .tx .v{grid-row:2;grid-column:2;text-align:right}
}
.feat dl.readout{margin-bottom:0}.feat .readout dt{font:400 14px/1.4 var(--serif);color:var(--grey-1)}.feat .readout dd{margin:4px 0 0;font:400 15px/1.3 var(--serif);color:var(--carbon)}.feat .readout .hl dd{color:var(--signal-text)}
.tx ol,.tx-home{list-style:none;margin:0;padding:0}
.tx-home li{position:relative;display:grid;grid-template-columns:6.5rem minmax(0,1fr) 15rem;column-gap:24px;align-items:baseline;padding:8px 0 9px;border-bottom:1px solid var(--rule)}
.tx-home .d{font:400 14px/1.4 var(--serif);color:var(--grey-1);white-space:nowrap}
.tx-home .tt{font:400 16px/1.35 var(--serif)}
.tx-home .v{font:400 15px/1.4 var(--serif);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tx-home .v .lim{margin-left:10px;font-size:12px}
@media (max-width:640px){.tx-home li{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:10px 0 11px}.tx-home .w{grid-column:1/-1;grid-row:1}.tx-home .d{grid-row:2;grid-column:1}.tx-home .v{grid-row:2;grid-column:2}}
.tx-home .x{margin-left:10px;font:400 14px/1 var(--serif);color:var(--grey-1);white-space:nowrap}
.tx-more{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-top:12px;font:400 15px/1.45 var(--serif);color:var(--grey-1)}
.tx-h{font:400 var(--fs-h2)/1.25 var(--serif);padding-bottom:12px;border-bottom:1px solid var(--carbon)}
.tx-h a{color:inherit;text-decoration:none}.tx-h a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.tx-more{justify-content:flex-end}
.pg-cards:empty{border-color:transparent;min-height:72px}

/* ===== Footer A: contact ledger (explore/v3/footer-design/a.html) ===== */
/* footer concepts: shared */
.ft{margin-top:112px}
@media (max-width:760px){.ft{margin-top:72px}}
:is(.ft,.co-ct) a,:is(.ft,.co-ct) button.lk,:is(.ft,.co-ct) .legal button{color:var(--carbon);background:none;border:0;padding:0;font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:currentColor}
:is(.ft,.co-ct) a:hover,:is(.ft,.co-ct) button:hover{text-decoration-thickness:2px}
:is(.ft,.co-ct) .m{font:400 15px/1.5 var(--serif)}
:is(.ft,.co-ct) .lbl{font:400 14px/1.4 var(--serif);color:var(--grey-1);letter-spacing:0;text-transform:none}
:is(.ft,.co-ct) .say p{font:400 17px/1.55 var(--serif);max-width:28em;text-wrap:pretty}
:is(.ft,.co-ct) .say p+p{margin-top:.7em}
:is(.ft,.co-ct) .say .hw{color:var(--grey-1)}
:is(.ft,.co-ct) .legal{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:4px;font:400 14px/1.4 var(--serif);color:var(--grey-1)}
:is(.ft,.co-ct) .legal li{display:flex;align-items:center;min-height:24px}
:is(.ft,.co-ct) .legal a,:is(.ft,.co-ct) .legal button{color:var(--grey-1)}
:is(.ft,.co-ct) .legal a:hover,:is(.ft,.co-ct) .legal button:hover{color:var(--carbon)}
:is(.ft,.co-ct) .legal .yc{gap:8px}
:is(.ft,.co-ct) .legal .yc-mark svg{width:14px;height:14px}
:is(.ft,.co-ct) .flogo{display:block;height:18px;width:auto;color:var(--carbon)}
:is(.ft,.co-ct) .g p{font:400 16px/1.5 var(--serif)}
:is(.ft,.co-ct) .g .lbl{margin-bottom:6px}
:is(.ft,.co-ct) .rows>div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);column-gap:16px;align-items:baseline;padding:11px 0 12px;border-top:1px solid var(--rule)}
:is(.ft,.co-ct) .rows>div:first-child{border-top:0;padding-top:0}
:is(.ft,.co-ct) .rows dd{margin:0;font:400 16px/1.6 var(--serif)}

.ft-a .ct{border-top:1px solid var(--carbon);padding-top:24px}
.ft-a .ct h2{font:400 22px/1.25 var(--serif)}
.ft-a .body2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--col-gap)}
.ft-a .rows{border-left:1px solid var(--rule);padding-left:var(--col-gap)}
.ft-a .base{margin-top:72px;border-top:1px solid var(--rule);padding-block:20px 32px;align-items:center}
.ft-a .legal .c{margin-left:auto}
@media (max-width:900px){
  .ft-a .body2{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .ft-a .rows{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:16px}
  .ft-a .base{margin-top:48px;row-gap:16px}
  .ft-a .legal .c{margin-left:0}
}
.ft .soc{display:flex;gap:16px;align-items:center}
.ft .soc a{display:inline-flex;text-decoration:none}
.ft .soc svg{width:18px;height:18px;display:block;color:var(--carbon)}
.ft .soc a:hover svg{opacity:.7}
.ft-a .base{display:flex;flex-wrap:wrap;gap:16px 40px}
.flogo-a{text-decoration:none!important}

/* footer A: one statement, set larger to balance the contact rows */
.ft-a .say{display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.ft-a .say .lead-in{font:400 var(--fs-h2)/1.3 var(--serif);max-width:20em;text-wrap:balance}
.ft-a .say .hw{font:400 15px/1.5 var(--serif);color:var(--grey-1);margin-top:0}
.ft-a .rows>div{padding:9px 0 10px}

/* ===== Footer: one ruled band, the essentials only ===== */
.ft-b{margin-top:96px;border-top:1px solid var(--carbon)}
.fb{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;row-gap:10px;align-items:center;padding-block:22px 36px}
.fb .flogo-a{grid-row:1/3;align-self:start;padding-top:2px}
.fb .flogo{display:block;height:18px;width:auto;color:var(--carbon)}
.fl{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:6px;font:400 15px/1.45 var(--serif);color:var(--carbon)}
.fl-2{font-size:12px;color:var(--grey-1)}
.fl a,.fl button{color:inherit;background:none;border:0;padding:0;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.fl a:hover,.fl button:hover{text-decoration-thickness:2px;color:var(--carbon)}
.fl .soc{display:flex;gap:14px}
.fl .soc a{display:inline-flex;text-decoration:none}
.fl .soc svg{width:16px;height:16px;display:block;color:var(--carbon)}
.fl .yc{display:inline-flex;align-items:center;gap:8px}
.fl .yc-mark svg{width:14px;height:14px}
@media (max-width:640px){.ft-b{margin-top:64px}.fb{grid-template-columns:minmax(0,1fr);row-gap:14px}.fb .flogo-a{grid-row:auto}}

/* ===== Hero v3: what we do on the left, rotating proof on the right ===== */
.hx h1{min-height:0;max-width:14em}
.hx .two{margin-top:0;align-items:stretch;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hx-left{display:flex;flex-direction:column}
.hx-left .hx-lede{margin-top:24px;color:var(--carbon);max-width:28em}
.hx-left .term{margin-top:20px}
.hx-left .cta-row{margin-top:28px}
.hx-right{border-left:1px solid var(--rule);padding-left:var(--col-gap)}
.hx-ex{font:400 var(--fs-lede)/1.45 var(--serif);color:var(--carbon);min-height:calc(var(--fs-lede) * 1.45 * 3);margin-bottom:18px;text-wrap:pretty;transition:opacity .28s ease}
.hx.fading .hx-ex{opacity:0}
.hx-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:auto;padding-top:12px;border-top:1px solid var(--rule)}
.hx-foot .hx-pager{margin-top:0;padding-top:0;border-top:0}
.hx-right .hx-fig{margin-bottom:20px}
@media (max-width:760px){.hx-right{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:20px}.hx-ex{min-height:calc(var(--fs-lede) * 1.45 * 4)}.hx-foot{flex-wrap:wrap}}
@media (max-width:760px){.hx .two{grid-template-columns:minmax(0,1fr);row-gap:28px}}

/* ===== Footer A, rail (explore/v3/footer-design/round2/a.html) ===== */
/* round 2 footers: one size, ink = clickable, grey = not, underline only on hover and focus */
.fz{margin-top:96px;font:400 15px/20px var(--serif);color:var(--grey-1)}
.fz ul{list-style:none;margin:0;padding:0}
.fz a,.fz button{color:var(--carbon);text-decoration:none;background:none;border:0;padding:0;font:inherit;line-height:inherit;cursor:pointer;letter-spacing:0;text-transform:none}
.fz a:hover,.fz button:hover,.fz a:focus-visible,.fz button:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;outline:0}
.fz .lg{display:block;width:max-content}
.fz .flogo{display:block;height:18px;width:auto;color:var(--carbon)}
.fz .yc,.fz .ycm{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fz .ycm svg{width:12px;height:12px;display:block;color:var(--grey-2)}
.fz .soc{display:inline-flex;gap:14px}
.fz li{white-space:nowrap}
@media (max-width:640px){.fz{margin-top:72px}.fz li{min-height:28px;display:flex;align-items:center}}

.fz-a .in{display:grid;grid-template-columns:auto auto minmax(0,1fr);column-gap:40px;align-items:start;border-top:1px solid var(--carbon);padding:24px 0 24px}
.fz-a ul,.fz-a .g2{display:flex;column-gap:24px}
.fz-a .g2{justify-self:end}
@media (max-width:1199px){.fz-a .g2{grid-column:2/-1;justify-self:start;margin-top:8px}}
@media (max-width:640px){
  .fz-a .in{grid-template-columns:auto minmax(0,1fr);column-gap:24px;row-gap:12px}
  .fz-a .lg{grid-column:1/-1;margin-bottom:4px}
  .fz-a ul{flex-direction:column}
  .fz-a .g1{grid-column:1;grid-row:2}
  .fz-a .g2{display:contents}
  .fz-a .g2l{grid-column:2;grid-row:2}
  .fz-a .g2>.yc{grid-column:1/-1;grid-row:3;margin-top:4px;min-height:28px}
}
/* ===== No monospace (direction A): one serif everywhere, its own tabular lining figures for data; code keeps --code ===== */
body{font-variant-numeric:lining-nums}
.gb,.tx,.tx-home,.readout,table,.num,.fig,.ro,.stats,.res,.hx-pager,.post-meta,time,.d,.v,.gb-v,.gb-l{font-variant-numeric:lining-nums tabular-nums}
.b-fig .fh,.fig-head .fig-u,.fig-src,.fh{font-style:italic}
.tx .x,.tx-home .x{font-style:italic}
.uiw-none{}
.hx-foot{flex-wrap:wrap;row-gap:8px}
.hx .term{font:600 17px/1.45 var(--serif);color:var(--carbon)}

/* ===== Charts and diagrams from figures/*.chart.json and figures/*.html (Younes's tools/roofline.css on main, 6192814,
   scoped to .yfig). Colours map onto the site's tokens; his mono labels use the serif with tabular figures (no monospace on
   the site). Plain series (ink) draw in a lighter mix of the ink so the accent series, in full ink, stays distinct. ===== */
.yfig .rf{--ink:var(--carbon);--muted:var(--grey-1);--accent:var(--carbon);--bg:var(--paper);--soft:var(--paper-2);--base:color-mix(in oklab,var(--carbon) 55%,var(--paper));
  font-family:var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--carbon);max-width:44rem;margin-top:12px}
.yfig .rf{margin:0;border-radius:14px;background:var(--bg);border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);min-width:0;overflow:hidden}
.yfig .rview{flex:0 0 100%;min-width:0;padding:22px 26px 20px}
.yfig .rleg{display:flex;align-items:center;gap:22px;margin-top:18px;padding-bottom:16px;font-size:12px;color:var(--muted);
  border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
.yfig .rleg span{display:flex;align-items:center;gap:8px}
.yfig .sbar{display:block;width:16px;height:8px;border-radius:2px;background:var(--ink)}
.yfig .stk{display:block;width:2px;height:14px;background:var(--accent)}
.yfig .rrows{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.yfig .rrow{display:flex;flex-direction:column;gap:7px}
.yfig .rk{font-size:13.5px;font-weight:500}
.yfig .rtrack{position:relative;height:30px;margin-right:44px}
.yfig .rbar{position:absolute;left:0;top:0;height:12px;border-radius:2px;background:var(--ink);transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.yfig .rhatch{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 55%,transparent) 0 2px,transparent 2px 5px);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 40%,transparent)}
.yfig .rx{position:absolute;top:-2px;margin-left:8px;font:600 12px/16px var(--serif);font-variant-numeric:tabular-nums;
  transition:opacity .4s .6s}
.yfig .rl{position:absolute;top:17px;transform:translateX(-50%);font:500 10.5px/12px var(--serif);color:var(--muted);
  transition:opacity .4s .6s}
.yfig .rfoot{margin-top:18px!important;font:500 11px/1.3 var(--serif);color:var(--muted)}
.yfig .rview{padding:18px 18px 16px}
.yfig .rleg{gap:14px}
.yfig .rl.rl0{transform:none}
.yfig .rchart .rview{padding-top:20px}
.yfig .rchart .rleg{margin-top:0}
.yfig .rgt{margin:22px 0 0;font-size:14px;font-weight:600}
.yfig .rgt+.rrows{margin-top:12px}
.yfig .rtrack.tight{height:18px}
.yfig .rrow .rtrack.tight+.rtrack.tight{margin-top:-2px}
.yfig .rbar.ra,.yfig .sbar.ra{background:var(--accent)}
.yfig .rbar.rlight,.yfig .sbar.rlight{background:color-mix(in oklab,var(--ink) 22%,transparent)}
.yfig .sbar.rhatch{background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 55%,transparent) 0 2px,transparent 2px 5px)}
.yfig .rx.rxa{color:var(--accent)}
.yfig .rzero{position:absolute;top:-8px;bottom:-8px;width:1px;background:color-mix(in oklab,var(--ink) 35%,transparent)}
.yfig .rdot{position:absolute;top:2px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 1.5px var(--bg)}
.yfig .rdot{transition:opacity .4s .6s}
.yfig .rdiag{display:grid;grid-template-columns:auto 1fr 22px 1fr;gap:10px 8px;align-items:center;font-size:13.5px}
.yfig .rdiag .tile{grid-column:2/5;padding:10px;border:1px solid color-mix(in oklab,var(--ink) 18%,transparent);background:var(--soft);border-radius:3px;text-align:center}
.yfig .rdiag .dim{font:500 11px/1.3 var(--serif);color:var(--muted);text-align:center}
.yfig .rdiag .rlab{font:500 11px/1.3 var(--serif);color:var(--muted);text-align:right;white-space:nowrap}
.yfig .rdiag .w{padding:8px 0;text-align:center;border-radius:3px;border:1px solid color-mix(in oklab,var(--ink) 18%,transparent)}
.yfig .rdiag .w.ra{background:var(--accent);border-color:var(--accent);color:#0c0a09;font-weight:500}
.yfig .rdiag .x{text-align:center;color:var(--muted);font-size:13px}
.yfig .rx.rxl{transform:translateX(-100%);margin-left:-8px}
.yfig .rx{white-space:nowrap}
.yfig .rchart .rtrack{margin-right:118px}
.yfig .rf{border:0;border-radius:0;background:transparent;overflow:visible}
.yfig .rf .rview{padding:16px 0 0}
.yfig .rchart .rleg{border-bottom:0;padding-bottom:0}
.yfig .rf .rview{padding:14px 0 0}
.yfig .rchart .rview{padding-top:4px}
.yfig .lplot{position:relative;height:220px;margin-top:22px;border-bottom:1px solid color-mix(in oklab,var(--ink) 30%,transparent)}
.yfig .lplot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.yfig .lplot polyline{fill:none;stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.yfig .lplot polyline.ra{stroke:var(--accent)}
.yfig .ldot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--bg)}
.yfig .ldot.ra{background:var(--accent)}
.yfig .lv{position:absolute;transform:translate(-50%,-150%);font:600 12px/16px var(--serif);white-space:nowrap}
.yfig .lv.end{transform:translate(-100%,-150%);margin-left:4px}
.yfig .lv.below{transform:translate(-100%,40%)}
.yfig .lv.ra{color:var(--accent)}
.yfig .lxt{position:relative;height:18px;margin-top:8px;font:500 11px/1 var(--serif);color:var(--muted)}
.yfig .lxt span{position:absolute;transform:translateX(-50%)}
.yfig .lxl{margin:6px 0 0;text-align:center;font:500 11px/1.3 var(--serif);color:var(--muted)}
.yfig .lsw{display:block;width:16px;height:2px;background:var(--ink)}
.yfig .lsw.ra{background:var(--accent)}
.yfig .lplot polyline{transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)}
.yfig .ldot,.yfig .lv{transition:opacity .4s .7s}
.yfig .lv.start{transform:translate(-30%,-150%)}
.yfig .lv.mid{transform:translate(calc(-100% - 6px),-115%)}
.yfig .lv.end{transform:translate(calc(-100% - 6px),-115%);margin-left:0}
.yfig .lgrid{position:absolute;left:0;right:0;height:0;border-top:1px dashed color-mix(in oklab,var(--ink) 14%,transparent)}
.yfig .lgrid span{position:absolute;left:0;bottom:3px;font:500 10.5px/1 var(--serif);color:var(--muted)}
.yfig .ldot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px}
.yfig .lv.right{transform:translate(10px,-50%)}
.yfig .lplot,.yfig .lxt{margin-left:48px}
.yfig .lgrid span{left:-48px;bottom:auto;top:0;width:42px;text-align:right;transform:translateY(-50%)}
.yfig .lxl{margin-left:48px}
.yfig .lgrid span{left:-44px;width:38px}
.yfig .rleg.lkey{display:none}
.yfig .lname{display:none}
.yfig .rf,.yfig .rf *{transition:none!important;animation:none!important}
.yfig .rbar.rmuted,.yfig .sbar.rmuted{background:var(--muted)}
.yfig .rbar.rthin{top:4px;height:3px}
.yfig .sbar.rthin{height:3px;align-self:center}
.yfig .rtrack.tight:has(.rthin){height:14px}

.yfig .rbar:not(.ra):not(.rhatch):not(.rlight):not(.rmuted),.yfig .sbar:not(.ra):not(.rhatch):not(.rlight):not(.rmuted){background:var(--base)}
.yfig .lplot polyline:not(.ra){stroke:var(--base)}
.yfig .ldot:not(.ra),.yfig .lsw:not(.ra){background:var(--base)}
.yfig .rdiag .w.ra{color:var(--paper)}
.yfig .rx,.yfig .lv{font-weight:600}
@media (max-width:640px){.yfig .rf .rview{padding:14px 0 0}.yfig .rleg{gap:14px}.yfig .rchart .rtrack{margin-right:96px}.yfig .lplot{height:180px}
  .yfig .lplot,.yfig .lxt,.yfig .lxl{margin-left:44px}.yfig .lgrid span{left:-44px;width:38px}.yfig .rleg.lkey{display:flex}.yfig .lname{display:none}}