/* Layout: the concept sits in the margin, the story in the main column, one chapter per section.
   Graphite and paper, with one blue for whatever is active: wires, the context meter, the cursor's attention. */
/* Colour guide. Five colours, each with one meaning everywhere, like tag colours in Notion but fixed:
     blue   the agent and the model; whatever is active or in flight: selection, links, wires, requests, work in progress
     green  code and rules; anything that passed: allowed, served from cache, shipped, live, healthy
     amber  a person; anything waiting on one or worth a look: held for approval, throttled, partial, uncached, you
     red    blocked or failed: an attack, a denial, an error, untrusted input
     gray   neutral: fallback, sample data, built but not in production, metadata
   Tokens: text --blue-ink / --allow / --hold / --deny / --ink-2, tints --blue-soft / --allow-bg / --hold-bg / --deny-bg /
   --sunk, and on graphite --g-blue(-ink) / --g-allow(-ink) / --g-hold / --g-deny / --graphite-dim. A colour-coded row
   (a rule, a policy line) shows its colour as a 3px inset left edge and in its mono key. Charts and the embedding map
   use the same hues (marks may be a lighter tone, text never is). Before adding a colour, find its meaning here. */
:root{
  --paper:#EEEFF1; --surface:#F8F9FA; --sunk:#E3E5E8; --ink:#1A1B1E; --ink-2:#474A51; --ink-3:#62666D; --rule:#D3D6DB;
  --brand:#2B59FF; --brand-2:#5C7FFF; --g-brand:#6F94FF;
  --blue:#2B59FF; --blue-2:#5C7FFF; --blue-soft:#DCE4FF; --blue-ink:#1F46D6; --on-blue:#fff;
  --graphite:#18191C; --graphite-2:#212226; --graphite-rule:#2C2E33; --graphite-ink:#E9EAEC; --graphite-dim:#9DA1A8;
  --allow:#17693F; --hold:#8A5106; --deny:#A92A27; --allow-bg:#DBEEE3; --hold-bg:#F5E7D0; --deny-bg:#F7DEDD;
  /* Text on a solid colour fill (blue, red), the same in both themes; the footer's maple leaf. */
  --on-solid:#fff; --leaf:#E0312B;
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Three voices: mono is the agent, sans is the interface, the serif is Rishabh speaking for himself. */
  --voice:"Newsreader",ui-serif,Georgia,"Times New Roman",serif;
  /* Type scale: seven steps, 14px the floor (labels, captions, terminal meta), 18px body. Every size on the
     page is one of these; the hero name is the only display size. */
  --t-14:.875rem; --t-16:1rem; --t-18:1.125rem; --t-20:1.25rem; --t-24:1.5rem; --t-32:2rem; --t-48:3rem;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --maxw:1280px;
  /* One page edge for everything (2026-10-29): the fluid gutter the nav and hero log use (2.4% of the width, 16-40px),
     or the centred column's own edge once sections stop growing. Phones stay at 16px. */
  --gut-w:clamp(var(--gut),2.4vw,40px);
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  /* Two elevations: raised (a node or chip lifted off its surface) and floating (panels over the page). */
  --shadow-1:0 4px 14px -10px rgba(10,12,20,.45); --shadow-2:0 24px 60px -20px rgba(10,12,20,.45),0 4px 14px rgba(10,12,20,.12);
  /* Embedding-map topics on the guide's hues. Product's dots use a lighter amber, so red and amber stay apart for
     colour-blind readers (OKLab distance 0.063 under deuteranopia); its label text uses --hold. */
  --c-agents:var(--blue); --c-security:var(--deny); --c-infra:var(--allow); --c-product:#C58520; --c-data:var(--ink-3);
  /* On graphite (chapters 2, 4 and 9, terminals and dark cards stay dark in both themes): one set of named
     colours instead of ~90 hard-coded near-duplicates. */
  --g-ink-2:#C6C9CE; --g-dim-2:#5A5E66; --g-rule-2:#3A3D44; --graphite-3:#26282D;
  /* Blue tints on dark surfaces lean azure (about 212°), as Radix's and GitHub Primer's dark scales do: the same-hue
     tints of #2B59FF read lavender and indigo on graphite, a common AI-template look (2026-10-29). */
  --g-blue:#4493F8; --g-blue-ink:#6CB0FF; --g-sel:#1B2433; --g-sel-hover:#1F2D42; --g-sel-rule:#254676;
  --g-allow:#5BCB8B; --g-allow-ink:#8FE3B0; --g-hold:#EFAF45; --g-deny:#F06C66;
  /* Garm chart's two series, checked for colour-blind separation and lightness on each theme's surface. */
  --gch-a:#2B59FF; --gch-b:#8A5106;
  --thumb:#FFFFFF;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --c-product:var(--hold);
  --paper:#141518; --surface:#1A1B1F; --sunk:#202125; --ink:#ECEDEF; --ink-2:#B0B3B9; --ink-3:#8E929A; --rule:#2A2C31;
  --brand:#6F94FF; --brand-2:#93AFFF;
  --blue:#4493F8; --blue-2:#6CB0FF; --blue-soft:#1B2433; --blue-ink:#6CB0FF; --on-blue:#0B0F1F;
  --graphite:#0A0B0D; --graphite-2:#16171A; --graphite-rule:#25272C;
  --allow:#5BCB8B; --hold:#EFAF45; --deny:#F06C66; --allow-bg:#10291C; --hold-bg:#2D210B; --deny-bg:#2E1312;
  --gch-a:#6386F0; --gch-b:#C58520;
  --thumb:#3A3C43;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* touch-action: manipulation ends double-tap zoom, which magnified the page when someone tapped a button twice;
   pinch zoom still works for anyone who needs it. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;touch-action:manipulation}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-18)/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
/* Controls and code inherit the site's faces (several fell back to Arial and the browser monospace). */
button,input,select,textarea{font:inherit;color:inherit}
code,kbd,samp,pre{font-family:var(--mono)}
[hidden]{display:none!important}
a{color:inherit}
.mono{font-family:var(--mono)}
.small{font-size:var(--t-14)}
.dim{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--blue);color:var(--on-blue);padding:8px 12px;border-radius:var(--r-xs)}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:var(--r-xs)}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p,li,dd,small,figcaption,summary b,h4,h5{text-wrap:pretty}
p{margin:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:500 var(--t-16)/1 var(--sans);padding:12px 16px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn:disabled{opacity:.5;cursor:default}
.btn.small{padding:7px 14px;font-size:var(--t-14)}
/* Two button sizes, used everywhere: 44px and 36px tall. */
.btn{min-height:44px;justify-content:center}.btn.small{min-height:36px}
.btn.blue{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn.blue:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn.line{background:transparent;color:var(--graphite-ink);border-color:var(--graphite-rule)}
.btn.line:hover{border-color:var(--graphite-ink)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut-w);transition:background .25s,border-color .25s,color .25s;border-bottom:1px solid transparent}
.nav.solid{background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--rule)}
.nav.on-dark{color:var(--graphite-ink);background:color-mix(in srgb,var(--graphite) 88%,transparent);border-bottom-color:var(--graphite-rule)}
.brand{display:flex;align-items:center;gap:8px;font:600 var(--t-16)/1 var(--sans);text-decoration:none;letter-spacing:-.01em}
/* The RS tile (#rs-mark in index.html): the tile takes currentColor; the letters and the always-on node take
   --mark-ink and --mark-node, which each context sets. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mark{--mark-ink:var(--paper);--mark-node:var(--brand)}
.brand .mark{height:26px;width:26px;flex:none}
.nav.on-dark .mark{--mark-ink:var(--graphite)}
.brand-dim{color:var(--ink-3)}
.nav.on-dark .brand-dim{color:var(--graphite-dim)}
.nav nav{display:flex;gap:2px}
.nav nav a{position:relative;z-index:1;flex:none;white-space:nowrap;font-size:var(--t-14);text-decoration:none;padding:6px 10px;border-radius:999px;color:inherit;opacity:.68;transition:opacity .15s,background .15s,color .25s}
/* One shape for both states: hover shows a faint pill, the current chapter a solid one that slides between links. */
.nav nav a:hover{opacity:1;background:color-mix(in srgb,currentColor 9%,transparent)}
.nav nav a.active{opacity:1;color:var(--paper)}
.nav nav a.active:hover{background:transparent}
.nav-ind{position:absolute;z-index:0;top:50%;left:0;height:30px;width:0;border-radius:999px;background:var(--ink);opacity:0;transform:translateY(-50%);pointer-events:none;transition:left .35s cubic-bezier(.3,.7,.2,1),width .35s cubic-bezier(.3,.7,.2,1),opacity .2s,background-color .25s}
.nav.on-dark nav a.active{color:var(--graphite)}
.nav.on-dark .nav-ind{background:var(--graphite-ink)}
.nav-right{display:flex;align-items:center;gap:14px}
.ctx{display:flex;align-items:center;gap:8px;font-size:var(--t-14);opacity:.8;white-space:nowrap}
.ctx-bar{width:70px;height:4px;border-radius:2px;background:color-mix(in srgb,currentColor 16%,transparent);overflow:hidden}
.ctx-bar i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:var(--blue);transition:transform .2s linear}
.theme{width:36px;height:36px;border-radius:50%;border:1px solid color-mix(in srgb,currentColor 22%,transparent);background:transparent;cursor:pointer;display:grid;place-items:center;color:inherit}
/* Theme icon in the logo's language: the moon's stars and the sun's rays are dots. */
.theme svg{width:19px;height:19px;overflow:visible}
.theme .core{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.theme .cut{transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.theme .rays{fill:currentColor;transform-box:view-box;transform-origin:12px 12px;transform:scale(.4) rotate(-45deg);opacity:0;transition:transform .5s cubic-bezier(.3,.7,.2,1),opacity .3s}
.theme .stars{fill:var(--blue);transition:opacity .3s,transform .5s;transform-box:view-box;transform-origin:12px 12px}
:root[data-theme="dark"] .theme .core{transform:scale(.6)}
:root[data-theme="dark"] .theme .cut{transform:translate(9px,-9px)}
:root[data-theme="dark"] .theme .rays{transform:none;opacity:1}
:root[data-theme="dark"] .theme .stars{opacity:0;transform:scale(.6)}
.theme{transition:transform .25s cubic-bezier(.3,.7,.2,1),border-color .2s,background-color .2s}
.theme:hover{transform:rotate(-12deg);border-color:color-mix(in srgb,currentColor 45%,transparent)}
.theme:active{transform:scale(.88)}
.theme.spin svg{animation:themeSpin .6s cubic-bezier(.3,.7,.2,1)}
@keyframes themeSpin{from{transform:rotate(-180deg) scale(.6)}to{transform:none}}
.theme::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--blue);opacity:0;pointer-events:none}
.theme{position:relative}
.theme.spin::after{animation:themeRing .6s ease-out}
@keyframes themeRing{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
:root[data-theme="dark"] .theme:hover .rays{transform:rotate(22.5deg)}
:root[data-theme="light"] .theme:hover .stars{transform:translate(-1px,-1px)}
/* Agentic header: a chat bubble that thinks, widens, then streams the links in like tokens. */
.nav nav{position:relative;align-items:center;border:1px solid transparent;border-radius:999px;max-width:1000px;transition:max-width .75s cubic-bezier(.3,.7,.2,1),background-color .5s,border-color .5s,box-shadow .5s}
.nav nav.stream a{transition:opacity .35s,transform .35s,background .15s;transition-delay:calc(var(--i,0) * 55ms)}
.brand,.nav-right{transition:opacity .6s}
.nav-think{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:4px;opacity:0;transition:opacity .25s;pointer-events:none}
.nav-think i{width:5px;height:5px;border-radius:50%;background:var(--ink-3);animation:think 1s infinite ease-in-out}
.nav-think i:nth-child(2){animation-delay:.15s}.nav-think i:nth-child(3){animation-delay:.3s}
@keyframes think{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-3px);opacity:1}}
html.boot .nav nav{max-width:58px;overflow:hidden;background:var(--surface);border-color:var(--rule);box-shadow:var(--shadow-1)}
html.boot.grow .nav nav{max-width:var(--navw,1000px)}
html.boot .nav nav a{opacity:0!important;transform:translateY(6px)}
html.boot .brand,html.boot .nav-right{opacity:0}
html.boot:not(.grow) .nav-think{opacity:1}
/* Wide screens: logo at the left edge, controls at the right, chapter links centred on the page. */
@media (min-width:1241px){.nav{display:grid;grid-template-columns:1fr auto 1fr}.brand{justify-self:start}.nav-right{justify-self:end}}
/* Below 1240px the chapter links move to their own scrolling row under the logo. */
@media (max-width:1240px){
  .nav{flex-wrap:wrap;row-gap:8px;padding-bottom:10px}
  .nav nav{order:3;flex:1 0 100%;max-width:none!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .nav nav::-webkit-scrollbar{display:none}
  .nav nav a{padding:7px 12px}
  /* Centred under the centred hero; auto margins fall back to left-aligned when the row has to scroll. */
  .nav nav a:first-child{margin-left:auto}.nav nav a:last-of-type{margin-right:auto}
  html.boot .nav nav{max-width:none;overflow-x:auto;background:none;border-color:transparent;box-shadow:none}
  html.boot .nav nav a{opacity:.68!important;transform:none}
}
@media (max-width:540px){.ctx{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
#face{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.face-fallback{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:62%;width:auto;filter:grayscale(1) contrast(1.1);border-radius:var(--r-md) var(--r-md) 0 0}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4;opacity:0;animation:wireIn .6s 2.1s forwards}
/* The leaders arrive with the chips they lead to (2.1 s on), so no line ever points at nothing. */
@keyframes wireIn{to{opacity:.3}}
.wires circle{fill:var(--blue);stroke:var(--paper);stroke-width:1.5}
.hero-copy{position:absolute;top:clamp(76px,11vh,120px);left:0;right:0;text-align:center;pointer-events:none;padding:0 var(--gut)}
.hero h1{font-size:clamp(2.8rem,min(7.4vw,11vh),7rem);line-height:.9;letter-spacing:-.05em;font-weight:700}
/* The name opens three ways to get in touch, in the chips' style. */
.hero h1 .name{all:unset;cursor:pointer;pointer-events:auto;border-radius:var(--r-sm)}
.hero h1 .name{text-decoration:underline .045em transparent;text-decoration-skip-ink:none;text-underline-offset:.14em;transition:text-decoration-color .2s}
.hero h1 .name:hover,.hero h1 .name[aria-expanded="true"]{text-decoration-color:var(--blue)}
.hero h1 .name:focus-visible{outline:2px solid var(--blue);outline-offset:6px}
.reach{position:absolute;left:0;right:0;z-index:6;display:flex;gap:4px;width:max-content;margin:12px auto 0;padding:5px;border-radius:999px;background:var(--surface);border:1px solid var(--rule);
  box-shadow:0 6px 20px color-mix(in srgb,var(--ink) 10%,transparent);pointer-events:auto;opacity:0;transform:translateY(-6px) scale(.96);transition:opacity .18s,transform .18s}
.reach.on{opacity:1;transform:none}
.reach-i{all:unset;box-sizing:border-box;position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink-2);cursor:pointer;transition:background .15s,color .15s}
.reach-i svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.reach-i svg.fill{fill:currentColor;stroke:none}
.reach-i:hover,.reach-i:focus-visible{background:var(--blue);color:var(--on-blue)}
.reach-i:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* The label under each icon, on hover or keyboard focus ("Copied" after the email one is pressed). */
.reach-i::after{content:attr(data-label);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-3px);padding:4px 9px;border-radius:var(--r-xs);background:var(--ink);color:var(--paper);font:500 var(--t-14)/1.3 var(--sans);letter-spacing:0;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.reach-i:focus-visible::after,.reach-i.said::after{opacity:1;transform:translate(-50%,0)}
@media (hover:hover){.reach-i:hover::after{opacity:1;transform:translate(-50%,0)}}
@media (hover:none){.reach-i:hover:not(:focus-visible){background:none;color:var(--ink-2)}.reach-i:active{background:var(--blue);color:var(--on-blue)}}
@media (prefers-reduced-motion:reduce){.reach{transition:none}.pill-slot{transition:none}}
/* The message form: a native dialog, so focus stays inside it and Escape closes it. A bottom sheet on phones. */
.mdlg{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2)}
.mdlg[open]{animation:msgIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.mdlg::backdrop{background:color-mix(in srgb,var(--graphite) 55%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.mdlg form{display:grid;gap:14px;padding:20px 22px 22px}
.msg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msg-x{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:var(--t-20);color:var(--ink-2)}
.msg-x:hover{background:var(--sunk)}.msg-x:focus-visible{outline:2px solid var(--blue)}
.msg-sub{margin:-6px 0 0;font-size:var(--t-14);color:var(--ink-2)}
.msg-fields{display:grid;gap:12px}
.mdlg label{display:grid;gap:6px;font-size:var(--t-14);font-weight:500;color:var(--ink-2)}
.mdlg :is(input,textarea){font:400 var(--t-16)/1.4 var(--sans);color:var(--ink);background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 20%,var(--rule));border-radius:var(--r-sm);padding:11px 12px;resize:vertical;transition:border-color .15s,background .15s}
.mdlg :is(input,textarea):hover{border-color:color-mix(in srgb,var(--ink) 40%,var(--rule))}
.mdlg :is(input,textarea):focus{outline:none;background:var(--surface);border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.msg-body{position:relative}
.msg-count{position:absolute;right:10px;bottom:8px;font-size:var(--t-14);color:var(--ink-3);pointer-events:none}
.mdlg .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.msg-status{margin:0;font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
.msg-status.bad{color:var(--deny)}
.mdlg .btn{background:var(--ink);color:var(--paper);border-color:var(--ink);flex:none}
.mdlg .btn[aria-disabled="true"]{opacity:.6;cursor:progress}
.msg-stop{display:grid;gap:4px;padding:12px 14px;border-radius:var(--r-sm);background:var(--deny-bg);font-size:var(--t-14);line-height:1.5;color:var(--ink)}
.msg-stop b{color:var(--deny);font-weight:600}.msg-stop p{margin:0;max-height:9.5em;overflow:auto}
/* Sending, step by step: a pulsing dot while a step runs, a tick when it's done, a cross when it stopped. */
.msg-trace{list-style:none;margin:0;padding:12px 14px;display:grid;gap:8px;border-radius:var(--r-sm);background:var(--sunk);font:var(--t-14)/1.4 var(--mono);color:var(--ink-2)}
.msg-trace li{display:flex;align-items:center;gap:10px;animation:chipIn .25s both}
.msg-trace li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.msg-trace li.run::before{animation:msgPulse 1s ease-in-out infinite}
.msg-trace li.done{color:var(--ink)}.msg-trace li.done::before{background:var(--allow)}
.msg-trace li.deny{color:var(--deny)}.msg-trace li.deny::before{background:var(--deny)}
@keyframes msgPulse{50%{opacity:.3;transform:scale(.7)}}
.msg-done{display:grid;justify-items:center;gap:8px;padding:34px 26px 26px;text-align:center}
.msg-done p{margin:0 0 10px;color:var(--ink-2);font-size:var(--t-16);max-width:30ch}
.msg-tick{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--allow-bg);color:var(--allow);margin-bottom:4px;animation:tickIn .4s cubic-bezier(.2,.9,.3,1.3) both}
.msg-tick svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tickDraw .35s .15s forwards}
@keyframes tickIn{from{transform:scale(.6);opacity:0}}
@keyframes tickDraw{to{stroke-dashoffset:0}}
@media (max-width:640px){
  .mdlg{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .mdlg[open]{animation:msgUp .26s cubic-bezier(.2,.8,.2,1)}
  @keyframes msgUp{from{transform:translateY(40px);opacity:0}}
  .mdlg textarea{min-height:120px}
}
@media (prefers-reduced-motion:reduce){.mdlg[open],.msg-trace li,.msg-tick,.msg-tick svg{animation:none}.msg-tick svg{stroke-dashoffset:0}.msg-trace li.run::before{animation:none}}
.hero-copy p{margin-top:12px;font-size:clamp(var(--t-18),1.8vw,var(--t-24));color:var(--ink-2);letter-spacing:-.01em}
/* Rotating property pill, after Notion's headline: each phrase is something a well-built agent does,
   coloured like the site's permission decisions (act, neutral, allow, hold, deny). */
.hero-copy p.hero-status{margin-top:14px;font-family:var(--mono);font-size:var(--t-14);letter-spacing:0;color:var(--ink-3);display:flex;flex-wrap:wrap;justify-content:center;gap:2px 1.4em}
/* The dots sit in the gaps and take no space, so hiding the one that would start a wrapped line can't reflow it. */
.hero-status span{position:relative}
.hero-status span+span::before{content:"·";position:absolute;left:-1em}
.hero-status span.ls::before{visibility:hidden}
.pill-slot{position:relative;display:block;width:max-content;max-width:100%;margin:10px auto 0;text-align:center;pointer-events:auto;transition:width .5s cubic-bezier(.3,.7,.2,1)}
/* Hover the pill to see the technique behind the claim. */
.pill-slot[data-how]::after{content:attr(data-how);position:absolute;left:50%;top:calc(100% + 10px);z-index:5;width:max-content;max-width:min(340px,calc(100vw - 32px));padding:8px 11px;border-radius:var(--r-sm);background:var(--ink);color:var(--paper);font:400 var(--t-14)/1.4 var(--sans);letter-spacing:0;text-align:left;opacity:0;transform:translate(-50%,-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.pill-slot:hover::after{opacity:1;transform:translate(-50%,0)}
/* Wide enough for the words and the longest phrase: the pill stays on the same line. */
.tagline.inline .pill-slot{display:inline-block;margin:0;vertical-align:baseline}
.pill{cursor:help}
.pill{--tone:var(--blue);--tone-bg:var(--blue-soft);display:inline-flex;align-items:center;gap:.4em;vertical-align:baseline;line-height:1.3;padding:.12em .62em .14em .5em;border-radius:999px;background:var(--tone-bg);color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;transition:width .5s cubic-bezier(.3,.7,.2,1),background-color .5s}
.pill i{flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--tone);transition:background-color .5s}
.pill-word{display:inline-block;transition:opacity .22s,transform .22s}
.pill-word.out{opacity:0;transform:translateY(-40%)}
.pill-word.in{opacity:0;transform:translateY(40%);transition:none}
.pill[data-tone="tool"]{--tone:var(--ink);--tone-bg:var(--sunk)}
.pill[data-tone="allow"]{--tone:var(--allow);--tone-bg:var(--allow-bg)}
.pill[data-tone="hold"]{--tone:var(--hold);--tone-bg:var(--hold-bg)}
.pill[data-tone="deny"]{--tone:var(--deny);--tone-bg:var(--deny-bg)}
.chips{position:absolute;inset:0;pointer-events:none}
.chip{position:absolute;pointer-events:auto;display:flex;flex-direction:column;gap:2px;padding:9px 13px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--rule);text-decoration:none;transition:transform .2s,border-color .2s,background .2s,color .2s;opacity:0;animation:chipIn .6s forwards}
.chip .mono{font-size:var(--t-14);font-weight:500}
.chip small{font-size:var(--t-14);color:var(--ink-3)}
.chip:hover{border-color:var(--blue);background:var(--blue);color:var(--on-blue);transform:translateY(-2px)}
.chip:hover small{color:inherit;opacity:.8}
.chip.l1{left:7%;top:34%;animation-delay:2.1s}.chip.l2{left:4%;top:51%;animation-delay:2.3s}
.chip.r1{right:7%;top:31%;animation-delay:2.15s}.chip.r2{right:4%;top:47%;animation-delay:2.25s}.chip.r3{right:5%;top:65%;animation-delay:2.4s}
@keyframes chipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Scoped to the hero: "run" is also the in-progress state of the chat trail and the contact trace, and an unscoped
   .run once pulled their spinners out of place (absolutely positioned at the bottom of the agent panel). */
.hero .run{position:absolute;left:calc(var(--gut-w) - 10px);bottom:14px;font-size:var(--t-14);width:min(33rem,38vw);color:var(--ink-2);pointer-events:none;padding:10px 32px 10px 10px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
.run-cmd{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.hero .run li .k{color:var(--ink-3)}
.hero .run li .ok{color:var(--allow)}
.hero .run li .dim{color:var(--ink-3)}
.hero .run .prompt{color:var(--blue)}
.hero .run ol{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.hero .run li{display:grid;grid-template-columns:15ch minmax(0,1fr);column-gap:1ch;line-height:1.5}
.hero .run li b{font-weight:500;color:var(--ink)}
.hero .run.short li:not(:nth-last-child(-n+2)){display:none}
.hero .run.gone{visibility:hidden}
.caret{display:inline-block;width:7px;height:14px;background:var(--ink);vertical-align:-2px;margin-left:2px;animation:blink 1s steps(2) 8}
@keyframes blink{50%{opacity:0}}
@media (max-width:980px){
  .chips{inset:auto 0 142px 0;display:flex;gap:8px;overflow-x:auto;padding:0 var(--gut) 8px}
  .chip{position:static;flex:none;animation-delay:1.6s!important}
  .chip small{display:none}
  /* The face part stays in the label on phones, where the wires and descriptions don't fit. */
  .chip{flex-direction:row;align-items:baseline;gap:6px}
  .chip[data-part]::before{content:attr(data-part) " ·";font:400 var(--t-14)/1.2 var(--mono);color:var(--ink-3)}
  .chip:hover::before{color:inherit}
  .wires{display:none}
  /* Phones keep a compact MCP terminal under the chips: the command and the live result, in a fixed 122px band. */
  .hero .run{left:var(--gut);right:var(--gut);bottom:10px;width:auto;max-height:122px;overflow:hidden;padding:9px 12px}
  .run-cmd{white-space:pre-wrap;overflow-wrap:anywhere}
  .hero .run li{grid-template-columns:10ch minmax(0,1fr)}
  .hero .run li:not(:last-child){display:none}
}
/* Tablets: the log's text starts on the sections' edge (the strip sits out by its own 12px padding). */
@media (min-width:601px) and (max-width:980px){.hero .run{left:calc(var(--gut-w) - 12px);right:calc(var(--gut-w) - 12px)}}
/* On a tall, narrow screen the portrait is sized by the width, so a full-height hero left empty bands above and below
   the chips. The hero ends where the portrait does: the headline (about 250px) plus the bust (about 1.18 widths). */
@media (max-width:980px) and (orientation:portrait){.hero{height:min(100svh,calc(250px + 118vw + 132px));min-height:0}}
/* Phones: the portrait alone, with nothing over the face. The chapter chips and the MCP log step aside (the nav reaches
   every chapter, and chapter 2's inspector plays the same MCP traffic), and the hero ends where the portrait does. */
@media (max-width:760px){.hero .chips,.hero .run{display:none}}
@media (max-width:760px) and (orientation:portrait){.hero{height:min(100svh,calc(250px + 104vw))}}

/* ---------- chapters ---------- */
main{position:relative;z-index:1;background:var(--paper)}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;max-width:calc(var(--maxw) + 2 * (var(--gut-w) - var(--gut)));margin:0 auto;padding:clamp(48px,3vw + 32px,84px) var(--gut-w)}
/* Inner layouts switch on the chapter column's width, not the viewport's: from 980px the concept aside takes ~300px,
   so a viewport query put two- and three-column grids into a 614px column (2026-10-25 tablet audit). */
.sec>.main{container:main/inline-size}
.concept.inline{margin-top:20px;max-width:none}
@media (max-width:1240px){html{scroll-padding-top:104px}}
@media (min-width:980px){.sec{grid-template-columns:230px minmax(0,1fr);gap:72px}}
.concept{align-self:start;display:grid;gap:10px;font-size:var(--t-16);color:var(--ink-2);padding-top:14px;border-top:1px solid var(--ink);max-width:36em}
@media (min-width:980px){.concept{position:sticky;top:100px}}
.concept b{font-weight:600;color:var(--ink);font-size:var(--t-16);display:flex;align-items:center;gap:8px}
.concept b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue)}
.main{min-width:0}
.chapter{font-size:var(--t-14);color:var(--ink-3);margin-bottom:14px}
.main>h2{font-size:clamp(var(--t-32),3.6vw,var(--t-48));line-height:1.06;letter-spacing:-.035em;max-width:18em}
.lead{margin-top:18px;font-size:var(--t-18);color:var(--ink-2);max-width:38em;text-wrap:pretty}
h3{font-size:var(--t-20);letter-spacing:-.02em}

/* ---------- 1. prompt ---------- */
.editor{margin-top:36px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.editor-head{display:flex;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule);font-size:var(--t-14);color:var(--ink-2)}
#sysprompt{padding:18px 20px 22px;font-size:var(--t-14);line-height:1.7;max-height:560px;overflow:auto}
#sysprompt .xtag{color:var(--ink-3)}
.sp-line{white-space:pre}
.sp-body{margin:0;white-space:pre-wrap;word-break:break-word;font:inherit}
.sp-doc{margin:2px 0 2px 2ch;border-radius:var(--r-sm)}
.sp-doc summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:4px 8px;margin-left:-8px;border-radius:var(--r-sm)}
.sp-doc summary::-webkit-details-marker{display:none}
.sp-doc summary::before{content:"▸";color:var(--ink-3);transition:transform .2s}
.sp-doc[open] summary::before{transform:rotate(90deg)}
.sp-doc summary:hover{background:var(--sunk)}
.sp-meta{font-size:var(--t-14);color:var(--ink-3)}
.sp-doc pre{margin:6px 0 10px 2ch;padding:12px 14px;background:var(--sunk);border-radius:var(--r-sm);white-space:pre-wrap;word-break:break-word;font:inherit;color:var(--ink-2);max-height:320px;overflow:auto}
.sp-break{margin:14px 0;padding:6px 10px;border-top:1px dashed var(--blue);color:var(--blue);font-size:var(--t-14)}
.sp-break span{color:var(--ink-3)}
/* context window */
.ctxwin{margin-top:28px;display:grid;gap:10px}
.cw-head{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:var(--t-14)}
.cw-head .mono{color:var(--ink-2);font-size:var(--t-14)}
.cw-bar{position:relative;display:flex;height:16px;border-radius:var(--r-sm);background:var(--sunk);overflow:hidden}
.cw-bar i,.cw-zoom i{display:block;height:100%;min-width:0;cursor:pointer;outline:none;transition:width .6s cubic-bezier(.3,.7,.2,1),opacity .2s,transform .2s}
.cw-used{display:flex;height:100%;min-width:24px;cursor:pointer;outline:none}
.cw-used i{height:100%;min-width:0}
.cw-bar .cw-used.on i{filter:brightness(1.08)}
.cw-bar.focus .cw-used:not(.on){opacity:.35}
.cw-used:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}
.cw-bar i.free{flex:1;background:transparent}
.cw-zoom{display:flex;gap:2px;height:22px}
.cw-zoom i{min-width:26px;border-radius:var(--r-xs)}
.cw-bar.focus i:not(.on):not(.free),.cw-zoom.focus i:not(.on){opacity:.35}
.cw-zoom i.on{transform:scaleY(1.25)}
.cw-bar i:focus-visible,.cw-zoom i:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}
.ctxwin{position:relative}
.ctxwin i.tools{background:var(--ink-3)}
.ctxwin i.docs{background:color-mix(in srgb,var(--blue) 45%,var(--surface))}
.ctxwin i.about{background:var(--blue)}
.ctxwin i.rules{background:color-mix(in srgb,var(--blue) 70%,var(--ink))}
.ctxwin i.dyn{background:color-mix(in srgb,var(--ink-3) 55%,var(--surface))}
.ctxwin i.conv{background:var(--hold)}
.ctxwin i.free{background:var(--sunk)}
.cw-hint{font:400 var(--t-14) var(--sans);color:var(--ink-3);margin-left:8px}
@media (hover:none){.cw-hint{font-size:0}.cw-hint::after{content:"tap the bars";font-size:var(--t-14)}}
/* the breakdown card */
.cw-card{position:absolute;z-index:6;width:min(300px,100%);padding:12px 14px;border-radius:var(--r-sm);background:var(--graphite);color:var(--graphite-ink);border:1px solid var(--graphite-rule);box-shadow:var(--shadow-2);pointer-events:none;display:grid;gap:4px;animation:cardIn .16s ease-out}
@keyframes cardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cw-card-head{display:flex;align-items:center;gap:8px;font-size:var(--t-14)}
.cw-card-head i{width:10px;height:10px;border-radius:3px;flex:none}
.cw-card-n{font-size:var(--t-14);opacity:.75}
.cw-card-note{font-size:var(--t-14);line-height:1.45;opacity:.9;overflow-wrap:anywhere}
.cw-tag{margin-left:auto;font:500 var(--t-14)/1 var(--mono);padding:4px 6px;border-radius:999px;background:rgba(255,255,255,.08)}
.cw-tag.cached{color:var(--g-allow-ink)}.cw-tag.not-cached{color:var(--g-hold)}.cw-tag.live{color:var(--g-allow-ink)}
/* prompt view */
.sp-group{margin:2px 0}
.sp-group>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:4px 8px;margin-left:-8px;border-radius:var(--r-sm)}
.sp-group>summary::-webkit-details-marker{display:none}
.sp-group>summary::before{content:"▸";color:var(--ink-3);transition:transform .2s}
.sp-group[open]>summary::before{transform:rotate(90deg)}
.sp-group>summary:hover{background:var(--sunk)}
.sp-about{margin:10px 0 12px;color:var(--ink)}
/* "Expand all" reads the same here as in chapter 2: plain text, not a pill. */
.sp-toggle{font:500 var(--t-14)/1 var(--sans);padding:6px 0;border:0;background:none;color:var(--ink-2);cursor:pointer}
.sp-toggle:hover{color:var(--ink)}
.editor-head{flex-wrap:wrap;align-items:center}
/* prompt caching */
.cache{margin-top:28px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:18px 20px;display:grid;gap:14px}
.cache-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center}
.cache-ttl{font-size:var(--t-14);padding:5px 9px;border-radius:999px;background:var(--sunk);color:var(--ink-2)}
.cache-ttl.warm{background:var(--allow-bg);color:var(--allow)}
.cache-actions{display:flex;gap:8px;flex-wrap:wrap}
.cache-hint{margin:10px 0 0;padding:10px 14px;border-radius:var(--r-sm);background:var(--hold-bg);color:var(--ink);font-size:var(--t-14);line-height:1.5;max-width:70ch}
.cache-scroll{overflow-x:auto;position:relative}
.cache-table{width:100%;border-collapse:collapse;font-size:var(--t-14);min-width:640px}
.cache-table th{text-align:left;font-weight:500;font-size:var(--t-14);color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--rule)}
.cache-table td{padding:8px;border-bottom:1px solid var(--rule)}
.cache-table tr.empty td{color:var(--ink-3);padding:14px 8px}
.cache-table tr.fresh{animation:rowIn .5s}
@keyframes rowIn{from{background:var(--blue-soft)}to{background:transparent}}
.cache-table tr.gap td{color:var(--ink-3);font-size:var(--t-14);text-align:center}
.cpill{font:500 var(--t-14)/1 var(--mono);padding:4px 7px;border-radius:999px;white-space:nowrap;display:inline-block}
.cold .cpill{background:var(--hold-bg);color:var(--hold)}
.warm .cpill{background:var(--allow-bg);color:var(--allow)}
.cache-note{font-size:var(--t-14);color:var(--ink-3);max-width:70ch}
/* Phones: the four columns that tell the story (request, cache state, tokens read back, cost). */
@media (max-width:640px){.cache-table{min-width:0}.cache-table .cpill{white-space:normal;line-height:1.3}.cache-table tr.gap td{white-space:normal}.cache-table td:last-child,.cache-table th:last-child{text-align:right;white-space:nowrap}.cache-table :is(th,td):is(:nth-child(3),:nth-child(5),:nth-child(6)):not([colspan]){display:none}.cache-table .th-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.th-s{display:none}@media (max-width:640px){.th-s{display:inline}.th-l-note{display:none}}

/* ---------- 2. experience: MCP inspector (graphite) ---------- */
.inspector{margin-top:36px;border:1px solid var(--graphite-rule);border-radius:var(--r-lg);background:var(--graphite-2);overflow:hidden;color:var(--graphite-ink);min-height:1500px}
/* Its booted height at each width (measured), so booting doesn't push the chapter down. */
@media (min-width:481px) and (max-width:1279px){.inspector{min-height:1850px}}
@media (min-width:1280px){.inspector{min-height:1520px}}
.insp-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--graphite-rule);font-size:var(--t-14);color:var(--graphite-dim)}
/* The pane mark is the logo's dot trail, small to large, ending on the blue node, not macOS window chrome. */
.insp-dots{display:flex;gap:4px;align-items:center}.insp-dots i{width:4px;height:4px;border-radius:50%;background:var(--graphite-dim)}.insp-dots i:nth-child(2){width:5px;height:5px}.insp-dots i:nth-child(3){width:7px;height:7px;background:var(--g-blue)}
.insp-status{margin-left:auto;white-space:nowrap}.insp-status.ok{color:var(--g-allow)}
.insp-status.ok::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--g-allow);margin-right:6px;vertical-align:1px}
.insp-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Phones: the bar wraps instead of truncating the title to "m…", and the repeated "tools/call" keeps only its tick. */
@media (max-width:560px){.insp-bar{flex-wrap:wrap;row-gap:2px}.insp-title{white-space:normal;flex:1}.insp-status{flex-basis:100%;margin-left:0;padding-left:calc(7px + 4px + 5px + 4px + 4px + 12px)}.tstat-m{display:none}}
.insp-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 14px;border-bottom:1px solid var(--graphite-rule)}
.insp-filter>span{font-size:var(--t-14);color:var(--graphite-dim);margin-right:4px}
.hf{position:relative}
.hf-btn{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:1px;min-width:min(340px,100%);padding:10px 14px 10px 16px;border-radius:var(--r-sm);border:1px solid var(--graphite-rule);background:var(--graphite);color:var(--graphite-ink);cursor:pointer;text-align:left;font:inherit;transition:border-color .15s,background .15s}
.hf-btn:hover,.hf-btn[aria-expanded="true"]{border-color:var(--graphite-dim)}
.hf-btn.set{border-color:var(--g-sel-rule);background:var(--g-sel)}
.hf-cap{grid-column:1;font:400 var(--t-14)/1.2 var(--sans);color:var(--graphite-dim)}
.hf-val{grid-column:1;display:flex;align-items:baseline;gap:10px;min-width:0}
.hf-val #hfLabel{font-size:var(--t-16);font-weight:500}
.hf-cnt{font-size:var(--t-14);color:var(--blue-2)}
.hf-btn svg{grid-column:2;grid-row:1 / 3;width:14px;height:14px;color:var(--graphite-dim);transition:transform .15s}
.hf-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hf-btn:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.hf-list{position:absolute;z-index:30;top:calc(100% + 8px);left:0;width:min(640px,calc(100vw - 48px));margin:0;padding:8px;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-radius:var(--r-md);border:1px solid var(--graphite-rule);background:var(--graphite-2);box-shadow:var(--shadow-2);outline:none;animation:hfIn .14s ease-out}
@media (max-width:640px){.hf-list{grid-template-columns:minmax(0,1fr);max-height:min(62vh,440px);overflow-y:auto;overscroll-behavior:contain}}
@keyframes hfIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.hf-list li:first-child{grid-column:1 / -1}
.hf-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-content:start;padding:12px 14px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:background .12s,border-color .12s}
.hf-list li.on{background:var(--graphite-3)}
.hf-list li[aria-pressed="true"]{border-color:var(--g-sel-rule);background:var(--g-sel)}
.hf-t{font-size:var(--t-16);color:var(--graphite-ink);font-weight:500}
.hf-n{font-size:var(--t-14);color:var(--graphite-dim);align-self:center;padding:3px 7px;border-radius:999px;background:var(--graphite-3)}
.hf-list li[aria-pressed="true"] .hf-n{color:var(--blue-2);background:var(--g-sel-hover)}
.hf-d{grid-column:1/-1;font-size:var(--t-14);line-height:1.45;color:var(--graphite-dim)}
.hf-sum{font-size:var(--t-14);color:var(--graphite-dim);margin-left:auto}.hf-sum:empty{display:none}
@media (max-width:560px){.hf,.hf-btn{width:100%}.hf-sum{flex-basis:100%;margin-left:0}}
.insp-body{display:grid;grid-template-columns:minmax(0,1fr)}
@container main (min-width:740px){.insp-body{grid-template-columns:240px minmax(0,1fr)}}
.insp-rail{padding:10px 8px;display:grid;align-content:start;gap:2px;border-bottom:1px solid var(--graphite-rule)}
@container main (min-width:740px){.insp-rail{border-bottom:0;border-right:1px solid var(--graphite-rule)}}
@container main (max-width:739px){.insp-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.srv{padding:9px 8px;column-gap:8px}.srv-role{display:none}.srv-org{font-size:var(--t-14)}}
.srv{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:2px;width:100%;padding:10px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--graphite-ink);cursor:pointer;text-align:left;font:inherit}
.srv:hover{background:var(--graphite-3)}
.srv.sel{background:var(--g-sel-hover)}
.srv.none{opacity:.45}
/* A two-line name ("IBM QRadar on Cloud") keeps its dot and year on the first line, beside the name they belong to. */
.srv{align-items:start}.srv .led{align-self:start;margin-top:calc(.7em - 3.5px)}.srv-when{line-height:1.4}
.srv-org{font-weight:500;font-size:var(--t-16);min-width:0}
.srv-short{display:none}
.srv-when{font-size:var(--t-14);color:var(--graphite-dim)}
.srv-role,.srv-n{grid-column:2 / 4;font-size:var(--t-14);color:var(--graphite-dim)}
.srv-n{font-size:var(--t-14);color:var(--graphite-dim)}
.srv.sel .srv-n{color:var(--g-blue-ink)}
.led{width:7px;height:7px;border-radius:50%;background:var(--g-dim-2);flex:none}.led.on{background:var(--g-allow)}
.insp-main{padding:22px;min-width:0;display:grid;gap:10px;align-content:start}
@media (max-width:560px){.insp-main{padding:18px 14px}}
.crumbs{font-size:var(--t-14);color:var(--graphite-dim);overflow-wrap:anywhere}.crumbs span{color:var(--graphite-dim)}
.insp-main h3{font-size:var(--t-24);letter-spacing:-.02em;overflow-wrap:anywhere}
.insp-main .sub{color:var(--graphite-dim);font-size:var(--t-16);margin-top:-6px}
.instr{font-size:var(--t-16);line-height:1.55;color:var(--g-ink-2);max-width:68ch}
.tcards-h{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.tcards-h>span{font-size:var(--t-14);color:var(--graphite-dim)}
.tall{font:500 var(--t-14)/1 var(--sans);background:none;border:0;color:var(--graphite-dim);cursor:pointer;padding:4px 0}
.tall:hover{color:var(--graphite-ink)}
.tcards{display:grid;gap:8px;margin-top:2px}
.tcard{border:1px solid var(--graphite-rule);border-radius:var(--r-sm);background:var(--graphite);transition:opacity .2s,border-color .2s}
.tcard.dim{opacity:.45;order:1}
.tcard.hit{border-color:var(--g-sel-rule)}
.tcards:has(.dim){display:flex;flex-direction:column}
.thead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;width:100%;padding:13px 16px;border:0;background:none;color:inherit;text-align:left;cursor:pointer;font:inherit;border-radius:var(--r-sm)}
.thead:hover h4{color:var(--graphite-ink)}
.tline{display:flex;align-items:center;gap:10px;min-width:0;grid-column:1}
.tname{font-size:var(--t-14);color:var(--g-blue-ink);min-width:0;overflow-wrap:break-word}
.tstat{font-size:var(--t-14);color:var(--g-allow);white-space:nowrap}
.thead h4{grid-column:1;margin:0;font-size:var(--t-16);line-height:1.35;letter-spacing:-.01em;font-weight:500;color:var(--graphite-ink)}
.tchev{grid-column:2;grid-row:1 / 3;width:14px;height:14px;color:var(--graphite-dim);transition:transform .2s}
.tcard.open .tchev{transform:rotate(180deg)}
.tpanel{display:grid;gap:12px;padding:0 16px 16px}
.tbody{display:grid;gap:10px}
.tcard ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.tcard li{position:relative;padding-left:14px;font-size:var(--t-14);line-height:1.5;color:var(--g-ink-2)}
.tcard li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--g-rule-2)}
.tdec{font-size:var(--t-14);line-height:1.5;color:var(--g-ink-2);padding:9px 11px;border-radius:var(--r-sm);background:var(--g-sel);margin:0}
.tdec b{display:block;font:500 var(--t-14)/1.4 var(--mono);color:var(--g-blue-ink);margin-bottom:2px}
.tstack{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.tstack span{font:400 var(--t-14)/1 var(--mono);padding:4px 7px;border-radius:var(--r-xs);background:var(--graphite-3);color:var(--graphite-dim)}
.traw-bar,.res-bar{display:flex;align-items:center;gap:6px}
.res-bar .res-label{margin:0}
.copy-ico{display:inline-grid;place-items:center;width:26px;height:24px;padding:0;border-radius:var(--r-xs);border:1px solid var(--graphite-rule);background:transparent;color:var(--graphite-dim);cursor:pointer}
.copy-ico:hover{color:var(--graphite-ink);border-color:var(--graphite-dim)}
.copy-ico svg,.path-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.i-ok,.ok>.i-copy{display:none}.ok>.i-ok{display:block}
.copy-ico.ok,.path-chip.ok{color:var(--g-allow);border-color:color-mix(in srgb,var(--g-allow) 40%,var(--graphite-rule))}
.copy-ico.fail,.path-chip.fail{color:var(--g-deny);border-color:color-mix(in srgb,var(--g-deny) 45%,var(--graphite))}
.traw-btn{font-size:var(--t-14);padding:4px 8px;border-radius:var(--r-xs);border:1px solid var(--graphite-rule);background:transparent;color:var(--graphite-dim);cursor:pointer}
.traw-btn:hover,.traw-btn[aria-expanded="true"]{color:var(--graphite-ink);border-color:var(--graphite-dim)}
.traw{display:grid;gap:4px}
.insp-foot{display:grid;gap:12px;margin-top:10px;padding-top:16px;border-top:1px solid var(--graphite-rule)}
.lesson-row,.res-row{display:grid;gap:6px}
.lesson-row>span,.res-row>span{font-size:var(--t-14);color:var(--graphite-dim)}
.res-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.res-row>span{margin-right:4px}
.res-btn{font-size:var(--t-14);padding:5px 9px;border-radius:var(--r-xs);border:1px solid var(--graphite-rule);background:transparent;color:var(--g-ink-2);cursor:pointer;overflow-wrap:anywhere;text-align:left}
.res-btn:hover,.res-btn.sel{border-color:var(--blue-2);color:var(--graphite-ink)}
.insp-main pre,.insp-log pre{margin:6px 0 0;padding:12px;border-radius:var(--r-sm);background:var(--graphite);border:1px solid var(--graphite-rule);font:400 var(--t-14)/1.55 var(--mono);overflow:auto;max-height:260px;white-space:pre-wrap;word-break:break-word;color:var(--g-ink-2)}
.res-label{font-size:var(--t-14);color:var(--graphite-dim)}
.lesson{margin:0;padding:14px 16px;border:1px solid var(--graphite-rule);background:var(--graphite);border-radius:var(--r-sm);font-size:var(--t-18);line-height:1.45}
.insp-log{border-top:1px solid var(--graphite-rule);background:var(--graphite)}
.insp-log-head{display:flex;justify-content:space-between;padding:10px 14px;font-size:var(--t-14);color:var(--graphite-dim);cursor:pointer;list-style:none}
.insp-log-head::-webkit-details-marker{display:none}
.insp-log-head>span::before{content:"▸ ";color:var(--g-dim-2)}.insp-log[open] .insp-log-head>span::before{content:"▾ "}
.insp-log-head button{font:inherit;background:none;border:0;color:var(--graphite-dim);cursor:pointer}
.insp-log ol{list-style:none;margin:0;padding:0 8px 8px;max-height:170px;overflow:auto;font-size:var(--t-14)}
/* Log rows, in aligned columns: the server name fits its longest id, the method and tool get twice the room of the
   raw JSON preview, and narrower panels drop the preview (opening a row shows the full JSON). */
.insp-log li summary{display:grid;grid-template-columns:14px 17ch minmax(0,2fr) minmax(0,1fr);align-items:center;gap:8px;padding:4px 6px;line-height:1.5;border-radius:var(--r-xs);cursor:pointer;list-style:none;white-space:nowrap}
.insp-log li>details>summary>span{min-width:0}
.insp-log li summary::-webkit-details-marker{display:none}
.insp-log li summary:hover{background:var(--graphite-3)}
.insp-log .arrow{color:var(--blue-2)}.insp-log li.in .arrow{color:var(--g-allow)}.insp-log li.notify .arrow{color:var(--g-hold)}
.insp-log .lg-srv{color:var(--graphite-dim);overflow:hidden;text-overflow:ellipsis}
.insp-log .lbl{color:var(--graphite-ink);overflow:hidden;text-overflow:ellipsis}
.insp-log .lg-t{color:var(--blue-2);text-decoration:none}
.insp-log a.lg-t:hover{text-decoration:underline;text-underline-offset:2px}
.tcard.flash,.lesson-row.flash{animation:lgFlash 1.2s ease-out}
@keyframes lgFlash{0%{box-shadow:0 0 0 2px var(--blue-2)}100%{box-shadow:0 0 0 2px transparent}}
@media (prefers-reduced-motion:reduce){.tcard.flash,.lesson-row.flash{animation:none;outline:2px solid var(--blue-2)}}
.insp-log .peek{color:var(--graphite-dim);overflow:hidden;text-overflow:ellipsis}
@container main (max-width:760px){.insp-log li summary{grid-template-columns:14px 17ch minmax(0,1fr)}.insp-log .peek{display:none}}
.connect-sub{margin-top:10px;font-size:var(--t-14);color:var(--graphite-dim)}
.connect-roles{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.path-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;font-size:var(--t-14);line-height:1.3;color:var(--graphite-ink);padding:4px 8px;border-radius:var(--r-xs);border:1px solid var(--graphite-rule);background:var(--graphite-2);cursor:pointer;text-align:left;vertical-align:baseline}
.path-chip span{min-width:0;overflow-wrap:anywhere}
.path-chip svg{flex:none;color:var(--graphite-dim)}
.path-chip:hover{border-color:var(--graphite-dim)}.path-chip:hover svg{color:var(--graphite-ink)}
.path-chip.ok svg{color:var(--g-allow)}
.connect{display:grid;gap:16px;margin-top:20px;padding:20px 22px;border:1px solid var(--graphite-rule);border-radius:var(--r-lg)}
@container main (min-width:860px){.connect{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:start}}
.connect p{color:var(--graphite-dim);font-size:var(--t-16);margin-top:6px}
.connect p code{color:var(--graphite-ink);font-size:var(--t-14);overflow-wrap:anywhere}
.connect-cmd{display:grid;gap:10px}
.connect-cmd>code{display:block;padding:12px 14px;border-radius:var(--r-sm);background:var(--graphite);border:1px solid var(--graphite-rule);font-size:var(--t-14);overflow-wrap:anywhere;color:var(--graphite-ink)}
.connect-cmd>code::before{content:"$ ";color:var(--blue-2)}
.connect-actions{display:flex;flex-wrap:wrap;gap:8px}
.live{margin-top:20px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);overflow:hidden}
.live-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--graphite-rule);font-size:var(--t-14)}
.live-head .dim{color:var(--graphite-dim);margin-left:auto}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--g-dim-2)}
.live-dot.on{background:var(--g-allow);animation:pulse 2s ease-in-out 2}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(91,203,139,.5)}50%{box-shadow:0 0 0 6px rgba(91,203,139,0)}}
.now-dot{display:inline-block;width:8px;height:8px;margin-right:10px;border-radius:50%;background:var(--g-allow);vertical-align:.16em}
@media (prefers-reduced-motion:reduce){.now-dot{animation:none}}
.live-list{list-style:none;margin:0;padding:0}
.live-list li{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:12px;padding:11px 14px;border-top:1px solid var(--graphite-rule);font-size:var(--t-16);align-items:baseline}
.live-list li:first-child{border-top:0}
.live-list li.new{animation:flash 2.4s ease-out}
@keyframes flash{from{background:var(--g-sel)}to{background:transparent}}
.live-list .k{font-size:var(--t-14);color:var(--graphite-dim)}.live-list .k-ship{color:var(--g-allow-ink)}.live-list .k-build{color:var(--g-blue-ink)}
.live-list time{font-size:var(--t-14);color:var(--graphite-dim);white-space:nowrap}
.live-list a{text-decoration-color:var(--graphite-rule)}
@media (max-width:600px){.live-list li{grid-template-columns:minmax(0,1fr)}.live-list time{order:-1}}

/* ---------- 3. model card ---------- */
.card-tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:28px;border-bottom:1px solid var(--rule)}
.card-tabs button{display:grid;gap:4px;align-content:start;text-align:left;padding:12px 14px 14px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;font:inherit;border-radius:var(--r-sm) var(--r-sm) 0 0;transition:color .15s,background .15s}
.card-tabs button:hover{color:var(--ink);background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.card-tabs button b{font-size:var(--t-16);font-weight:500;letter-spacing:-.01em}
.card-tabs button span{font:400 var(--t-14)/1.3 var(--mono);color:var(--ink-3)}
.card-tabs button[aria-selected="true"]{color:var(--ink)}
.card-tabs button[aria-selected="true"] span{color:var(--blue)}
.card-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.card-tabs-ind{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink);transition:transform .25s ease,width .25s ease}
.card-tabs button span em{font-style:normal}
/* Too narrow for each tab's count line on one line: show the names alone rather than break the counts mid-phrase. */
@container main (max-width:859px){.card-tabs button span{display:none}}
@media (max-width:560px){.card-tabs button{padding:10px 8px 12px}.card-tabs button b{font-size:var(--t-14)}.card-tabs button span{font-size:var(--t-14)}.card-tabs button span em{display:none}}
@media (prefers-reduced-motion:reduce){.card-tabs-ind{transition:none}}
.card-panel{margin-top:20px}
.caption{font-size:var(--t-14);color:var(--ink-3);margin-top:12px;max-width:60em}
.mc{display:grid;gap:20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:22px}
@container main (min-width:760px){.mc{grid-template-columns:300px minmax(0,1fr);gap:32px}}
/* Model card field labels: one style, the site's lowercase mono label. */
.mc h4{font:500 var(--t-14)/1.3 var(--mono);color:var(--ink-3);text-transform:lowercase;margin:18px 0 8px}
.mc-side h4:first-of-type{margin-top:18px}
.mc-name{font-size:var(--t-20);font-weight:500;color:var(--blue)}
.mc-details{display:grid;gap:8px;margin:14px 0 0}
.mc-details dt{font:500 var(--t-14)/1.3 var(--mono);color:var(--ink-3);text-transform:lowercase}.mc-details dd{margin:0 0 4px;font-size:var(--t-16)}
.mc-list{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:var(--t-16)}
.mc-p{font-size:var(--t-16)}
.mc-main h4:first-child{margin-top:0}
.cap-group+.cap-group{margin-top:22px}
.cap-group h5{margin:0 0 8px;display:flex;align-items:center;gap:8px}
.cap-n{font-size:var(--t-14);color:var(--ink-3)}
.caps{display:grid;gap:0;border-top:1px solid var(--rule)}
.cap{padding:11px 0;border-bottom:1px solid var(--rule);display:grid;gap:3px;align-content:start}
.cap-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.cap b{font-weight:600;font-size:var(--t-16)}
.cap p{font-size:var(--t-16);line-height:1.5;color:var(--ink-2)}
.lvl{font:500 var(--t-14)/1 var(--mono);padding:4px 7px;border-radius:999px}
.lvl.ship{background:var(--allow-bg);color:var(--allow)}.lvl.build{background:var(--sunk);color:var(--ink-2)}
.limits{margin-top:18px;padding:14px 16px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--rule)}
.limits h4{margin-top:0}
.limits ul{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:var(--t-16)}
.bias{margin-top:10px;font-size:var(--t-14);color:var(--ink-2)}
.bench-sum{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--t-16);margin-bottom:12px}
.bench-sum b{font-weight:600}
.bench{border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:auto}
.b-row{display:grid;grid-template-columns:minmax(170px,1.1fr) 150px minmax(240px,2fr) 90px;gap:16px;padding:12px 16px;border-top:1px solid var(--rule);align-items:center;font-size:var(--t-14);min-width:720px}
.b-row.h{border-top:0;color:var(--ink-3);font-size:var(--t-14)}
.b-req{font-weight:500}
.b-n{display:flex;align-items:center;gap:8px}
.b-n i{display:block;height:6px;border-radius:3px;background:var(--blue);flex:none}
.b-n em{font-style:normal;font-size:var(--t-14);color:var(--ink-3)}
.b-ev{color:var(--ink-2)}
@media (max-width:700px){
  .bench{overflow:visible}
  .b-row{min-width:0;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:14px}
  .b-row.h{display:none}
  .b-row:nth-child(2){border-top:0}
  .b-req{grid-column:1;grid-row:1}
  .b-row>span:last-child{grid-column:2;grid-row:1;justify-self:end}
  .b-n{grid-column:1 / -1;grid-row:2}
  .b-ev{grid-column:1 / -1;grid-row:3;font-size:var(--t-14)}
}
.st{font:500 var(--t-14)/1 var(--mono);padding:4px 8px;border-radius:999px;white-space:nowrap}
.st.meets{background:var(--allow-bg);color:var(--allow)}.st.building{background:var(--blue-soft);color:var(--blue-ink)}.st.gap{background:var(--sunk);color:var(--ink-2)}

/* ---------- 7. resume ---------- */
.rz{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:32px;align-items:start}
/* The controls column is sized in rem so it grows with the type on large monitors (300px clipped its buttons at 2560). */
@container main (min-width:880px){.rz{grid-template-columns:19.5rem minmax(0,1fr)}}
.rz-controls{display:grid;gap:18px}
@container main (min-width:880px){.rz-controls{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}}
.rz-block{display:grid;gap:8px}
.rz-label{font-size:var(--t-14);color:var(--ink-3)}
.rz-presets{display:flex;flex-wrap:wrap;gap:6px}
.rz-presets button{font:500 var(--t-14)/1.2 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.rz-presets button:hover{border-color:var(--ink-3)}
.rz-presets button[aria-checked="true"]{border-color:var(--blue);background:var(--blue-soft)}
.rz textarea{width:100%;resize:vertical;font:400 var(--t-14)/1.5 var(--sans);padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.rz-row{display:flex;flex-wrap:wrap;gap:8px}
.rz-url{display:flex;gap:6px;align-items:center}
.rz-url input{flex:1;min-width:0;font:400 var(--t-14)/1.4 var(--mono);padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
.rz-url input:focus{outline:none;border-color:var(--blue)}
.rz-note{margin:0;font-size:var(--t-14);line-height:1.5;color:var(--ink-3)}
.rz-note.err{color:var(--deny)}
.rz-posting{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface)}
.rz-posting b{font-size:var(--t-16);font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.rz-posting span{grid-column:1;font-size:var(--t-14);color:var(--ink-2);overflow-wrap:anywhere}
.rz-posting .src{font:400 var(--t-14)/1.4 var(--mono);color:var(--ink-3)}
.rz-posting .warn{margin-top:6px;padding:7px 9px;border-radius:var(--r-xs);background:var(--hold-bg);color:var(--hold);font-size:var(--t-14);line-height:1.45}
.rz-posting button{grid-column:2;grid-row:1;align-self:start;width:24px;height:24px;border:0;border-radius:var(--r-xs);background:none;color:var(--ink-3);cursor:pointer;font-size:var(--t-16);line-height:1}
.rz-posting button:hover{background:var(--sunk);color:var(--ink)}
.rz-paste summary{cursor:pointer;font-size:var(--t-14);color:var(--ink-2);width:max-content}
.rz-paste[open]{display:grid;gap:8px}
.rz-paste .btn{justify-self:start}
.rz-fit{margin:0;font-size:var(--t-18);font-weight:600;letter-spacing:-.01em}
.rz-fit.strong{color:var(--allow)}.rz-fit.good{color:var(--allow)}.rz-fit.partial{color:var(--hold)}.rz-fit.blocked{color:var(--deny)}
.fit-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fit-score{font-size:var(--t-18);font-weight:500;color:var(--ink)}
.fit-groups{display:grid;margin-top:4px}
.fit-group{display:grid;gap:8px;padding:12px 0;border-top:1px solid var(--rule)}
.fit-group:last-child{padding-bottom:4px}
.fit-group h5{margin:0;display:flex;justify-content:space-between;gap:10px;font-size:var(--t-14);font-weight:600;color:var(--ink)}
.fit-group h5 span{font-weight:400;font-size:var(--t-14);color:var(--ink-3)}
.fit-sub{margin:-2px 0 0;font-size:var(--t-14);line-height:1.45;color:var(--ink-3)}
.fit-chips{display:flex;flex-wrap:wrap;gap:4px}
.fit-chips>span{font:400 var(--t-14)/1 var(--mono);padding:5px 8px;border-radius:999px;background:var(--allow-bg);color:var(--allow)}
.fit-chips>span.miss{background:none;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule)}
.fit-chips>span.miss::before{content:"×";margin-right:5px;color:var(--ink-3)}
.fit-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fit-checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:start;font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
.fit-checks .sg-ico{width:20px;height:20px}
.fit-checks li.pass .sg-ico{background:var(--allow-bg);color:var(--allow)}
.fit-checks li.hold{color:var(--hold)}.fit-checks li.hold .sg-ico{background:var(--hold-bg);color:var(--hold)}
.fit-checks li.deny{color:var(--deny)}.fit-checks li.deny .sg-ico{background:var(--deny-bg);color:var(--deny)}
.rz-page{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--ink-3)}
.rz-len{display:inline-flex;padding:2px;border-radius:999px;border:1px solid var(--rule);background:var(--surface)}
.rz-len button{font:500 var(--t-14)/1 var(--sans);padding:6px 10px;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer}
.rz-len button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.cov-bar{height:6px;border-radius:3px;background:var(--sunk);overflow:hidden}
.cov-bar i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s}
.cov-bar i.strong{background:var(--allow)}.cov-bar i.partial{background:var(--hold)}
.rz-dl{display:grid;grid-template-columns:1fr 1fr}.rz-dl .btn{justify-content:center;white-space:nowrap}.rz-dl #rzPdf{grid-column:1 / -1}
.sheet{background:#fff;color:#1A1B1E;border:1px solid var(--rule);border-radius:var(--r-xs);padding:40px 44px;box-shadow:0 1px 0 var(--rule),0 24px 48px -32px rgba(20,24,40,.35);font-size:var(--t-14);line-height:1.5;min-width:0}
/* The sheet stays paper in dark mode (it previews the PDF), toned down so it isn't the brightest thing on the page. */
:root[data-theme="dark"] .sheet{border-color:#2A2C31;background:#E4E5E8;box-shadow:none}
.sheet header{border-bottom:1px solid #E3E5E8;padding-bottom:12px}
.sheet h3{font-size:var(--t-24);letter-spacing:-.03em}
.sheet .role{color:#2B59FF;font-weight:500;margin-top:2px}
.sheet .contact{color:#5F636A;font-size:var(--t-14);margin-top:4px}
.sheet .contact a{color:inherit}.sheet .contact>span{white-space:nowrap}
.sheet section{margin-top:16px}
.sheet h4{font-size:var(--t-14);letter-spacing:.08em;text-transform:uppercase;color:#1A1B1E;margin:0 0 8px;padding-bottom:4px;border-bottom:1.5px solid #2B59FF;display:inline-block}
.sheet .job{margin-top:10px}
.sheet .job-h{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.sheet .job-h span{color:#5F636A}
.sheet .job-h time{margin-left:auto;color:#5F636A;font-size:var(--t-14)}
/* Phones: title, company and dates stack left-aligned, instead of the dates jumping between lines. */
@media (max-width:600px){.sheet .job-h{display:grid;gap:1px}.sheet .job-h time{margin-left:0}}
.sheet ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.sheet li{position:relative;padding:3px 6px 3px 14px;border-radius:var(--r-xs);cursor:pointer;transition:background .15s,opacity .15s}
.sheet li::before{content:"•";position:absolute;left:4px;top:3px;color:#8A8E95}
.sheet li:hover{background:#F2F4F8}
.sheet li:focus-visible{outline:2px solid #2B59FF;outline-offset:1px}
.sheet li.off{opacity:.42;text-decoration:line-through;text-decoration-color:#8A8E95}
.sheet li.auto{display:none}.sheet.all li.auto{display:list-item}
/* A past role with nothing on this tailored page is left off it, and shown dimmed with the rest of what didn't fit. */
.sheet .job.out{display:none}.sheet.all .job.out{display:block;opacity:.55}
.rz-more{font:inherit;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sheet li em{display:block;font-style:normal;font-size:var(--t-14);color:#6B6F76;text-decoration:none}
.sheet mark{background:#DCE4FF;color:inherit;border-radius:2px;padding:0 1px}
.sheet .sk,.sheet .ed{margin-top:4px}
.sheet .ed time{color:#5F636A;font-size:var(--t-14);margin-left:6px}
.sheet .ed span{color:#5F636A}
@media (max-width:600px){.sheet{padding:24px 18px}}
.turn-meta{font-size:var(--t-14);color:var(--ink-3);margin-top:-2px}

/* ---------- 4. tool use (graphite) ---------- */
.sec.dark{max-width:none;background:var(--graphite);color:var(--graphite-ink);padding-left:max(var(--gut-w),calc((100% - var(--maxw))/2 + var(--gut)));padding-right:max(var(--gut-w),calc((100% - var(--maxw))/2 + var(--gut)))}
.sec.dark .concept{border-top-color:var(--graphite-ink);color:var(--graphite-dim)}
.sec.dark .concept b{color:var(--graphite-ink)}
.sec.dark .chapter,.sec.dark .lead{color:var(--graphite-dim)}
.ne-link{color:var(--graphite-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--blue-2)}.ne-link:hover{color:var(--graphite-ink)}
.journey{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:0}
@container main (min-width:760px){.journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.journey li{position:relative;display:grid;gap:8px;align-content:start;padding:22px 0;border-top:1px solid var(--graphite-rule)}
.journey li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--graphite-dim)}
.journey li.now::before{background:var(--blue-2);box-shadow:0 0 0 4px rgba(68,147,248,.25)}
.journey .when{font:400 var(--t-14)/1 var(--mono);color:var(--graphite-dim)}
.journey .jstep{font-size:var(--t-14);color:var(--blue-2);font-weight:500}
.journey h3{font-size:var(--t-20);line-height:1.25}
.journey p{color:var(--graphite-dim);font-size:var(--t-16)}
.flow{display:grid;gap:16px;margin-top:56px}
.flow-head{display:grid;gap:6px}
.flow-head p{color:var(--graphite-dim);font-size:var(--t-16);max-width:40em}
.flow-canvas{position:relative;border:0;border-radius:0;background:var(--graphite-2) radial-gradient(circle,var(--graphite-rule) 1px,transparent 1.2px) 0 0/22px 22px;min-height:540px;overflow:hidden}
#flowSvg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#flowSvg .w{fill:none;stroke:var(--g-rule-2);stroke-width:1.5}
#flowSvg .w.hot{stroke:var(--blue-2);stroke-width:2}
#flowSvg .w.deny{stroke:var(--g-deny);stroke-dasharray:4 4}
#flowSvg .w.hold{stroke:var(--g-hold)}
#flowSvg .packet{fill:var(--blue-2)}
.fnode{position:absolute;transform:translate(-50%,-50%);min-width:136px;max-width:clamp(140px,15vw,170px);padding:9px 11px;border-radius:var(--r-sm);background:var(--graphite-3);border:1px solid var(--g-rule-2);font-size:var(--t-14);line-height:1.3;transition:border-color .25s,box-shadow .25s}
.fnode b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--t-14)}
.fnode b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g-dim-2)}
.fnode small{display:block;color:var(--graphite-dim);font:400 var(--t-14)/1.35 var(--mono);margin-top:3px}
.fnode.kind-orch{border-color:var(--graphite-ink)}
.fnode.kind-gate{background:var(--g-sel);border-color:var(--g-sel-rule)}
.fnode.kind-human{border-style:dashed}
.fnode.hot{border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(68,147,248,.22)}
.fnode.hot b::before{background:var(--blue-2)}
.fnode.deny{border-color:var(--g-deny);box-shadow:0 0 0 3px rgba(240,108,102,.2)}
.fnode.deny b::before{background:var(--g-deny)}
.fnode.hold{border-color:var(--g-hold);box-shadow:0 0 0 3px rgba(239,175,69,.2)}
.fnode.hold b::before{background:var(--g-hold)}
.fnode.ok{border-color:color-mix(in srgb,var(--g-allow) 60%,var(--graphite))}
.fnode.ok b::before{background:var(--g-allow)}
.flow-panel{border:1px solid var(--graphite-rule);border-radius:var(--r-lg);background:var(--graphite-2);overflow:hidden}
.flow-note{font-size:var(--t-14);color:var(--graphite-dim)}
.trace{border:0;border-top:1px solid var(--graphite-rule);border-radius:0;background:var(--graphite);padding:14px 16px;font-size:var(--t-14);line-height:1.6;min-height:0;max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
/* The flow's trace holds a fixed height and scrolls inside: growing as the autoplay ran pushed every chapter
   below it down mid-read (and threw nav jumps off). */
#flowTrace{height:auto;min-height:12em}
.trace .dim{color:var(--graphite-dim);font-family:var(--sans);font-size:var(--t-14)}
.trace p{display:grid;grid-template-columns:46px minmax(0,1fr);gap:8px;animation:traceIn .28s ease-out}
.trace p.dim{display:block;animation:none}
@keyframes traceIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.trace p{animation:none}}
.trace p .t{color:var(--graphite-dim)}
.trace p.allow span:last-child{color:var(--g-allow)}.trace p.hold span:last-child{color:var(--g-hold)}.trace p.deny span:last-child{color:var(--g-deny)}.trace p.agent span:last-child{color:var(--graphite-ink)}.trace p.sys span:last-child{color:var(--graphite-dim)}
.trace .sum{margin-top:6px;padding-top:8px;border-top:1px solid var(--graphite-rule);color:var(--blue-2);display:block}
.hold-btns{display:flex;gap:6px;margin:4px 0 4px 54px}
.hold-btns button{font:500 var(--t-14)/1 var(--sans);padding:7px 10px;border-radius:999px;border:1px solid var(--g-rule-2);background:transparent;color:var(--graphite-ink);cursor:pointer}
.hold-btns button.yes{background:var(--g-hold);border-color:var(--g-hold);color:var(--graphite)}
.flow-panel.stacked{display:flex;flex-direction:column}
.flow-panel.stacked .flow-tabs{order:0}.flow-panel.stacked .trace{order:1;border-top:1px solid var(--graphite-rule)}.flow-panel.stacked .flow-canvas{order:2;border-top:1px solid var(--graphite-rule)}
.flow-panel.stacked .flow-canvas{min-height:0;padding:12px}
.flow-panel.stacked #flowNodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.flow-panel.stacked #flowSvg{display:none}
.flow-panel.stacked .fnode{position:static;transform:none;max-width:none}

/* ---------- 5. safeguards ---------- */
.sg{margin-top:32px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.sg-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border-bottom:1px solid var(--rule)}
.sg-tabs button{position:relative;display:grid;gap:3px;align-content:start;text-align:left;padding:14px 16px 15px;border:0;background:var(--surface);color:var(--ink-2);cursor:pointer;font:inherit;transition:background .15s}
.sg-tabs b{font-size:var(--t-16);font-weight:500;color:var(--ink)}
.sg-tabs small{font-size:var(--t-14);color:var(--ink-3)}
.sg-tabs button:hover{background:var(--paper)}
.sg-tabs button[aria-pressed="true"]{background:var(--paper)}
.sg-tabs button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue)}
.sg-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.sg-input{display:grid;gap:10px;padding:18px 20px;border-bottom:1px solid var(--rule)}
.sg-input label{font-size:var(--t-14);color:var(--ink-3)}
.sg-input label span{margin-left:6px;padding:2px 7px;border-radius:999px;background:var(--deny-bg);color:var(--deny)}
.sg-input textarea{width:100%;resize:vertical;min-height:calc(4 * 1.6em + 26px);font-size:var(--t-14);line-height:1.6;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.sg-input textarea:focus{outline:none;border-color:var(--blue)}
.sg-check{margin:0;font-size:var(--t-14);line-height:1.5;color:var(--ink-3)}
.sg-check b{font-weight:500;color:var(--ink)}
.sg-check.hit b{color:var(--deny)}.sg-check.soft b{color:var(--hold)}
.sg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 20px;border-bottom:1px solid var(--rule);background:var(--paper)}
.sg-bar h3{margin:0;font-size:var(--t-18);font-weight:600;letter-spacing:-.01em}
.sg-bar p{margin:2px 0 0;max-width:44em;font-size:var(--t-14);color:var(--ink-2)}
.sg-lanes{display:grid}
@media (min-width:860px){.sg-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}.sg-lane+.sg-lane{border-left:1px solid var(--rule)}}
@media (max-width:859px){.sg-lane+.sg-lane{border-top:1px solid var(--rule)}}
.sg-lane{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;min-width:0}
.sg-lane h4{margin:0;font-size:var(--t-16);line-height:1.4;font-weight:600;letter-spacing:-.01em}
.sg-lane header p{margin:2px 0 0;font-size:var(--t-14);line-height:1.45;color:var(--ink-3)}
.sg-steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sg-idle{font-size:var(--t-14);color:var(--ink-3)}
.sg-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--rule);animation:traceIn .28s ease-out}
.sg-step:first-child{border-top:0}
.sg-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:500 var(--t-14)/1 var(--mono);background:var(--sunk);color:var(--ink-2)}
.sg-step.allow .sg-ico,.sg-step.pass .sg-ico{background:var(--allow-bg);color:var(--allow)}
.sg-step.hold .sg-ico{background:var(--hold-bg);color:var(--hold)}
.sg-step.deny .sg-ico,.sg-step.fail .sg-ico{background:var(--deny-bg);color:var(--deny)}
.sg-h{margin:0;font-size:var(--t-14);line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.sg-h code{font:400 var(--t-14)/1.45 var(--mono)}
.sg-b{margin:2px 0 0;font-size:var(--t-14);line-height:1.45;color:var(--ink-3);overflow-wrap:anywhere}
.sg-b q{font-family:var(--mono);font-size:var(--t-14);color:var(--ink-2);quotes:"\201C" "\201D"}
.sg-step.allow .sg-b,.sg-step.pass .sg-b{color:var(--allow)}.sg-step.hold .sg-b{color:var(--hold)}.sg-step.deny .sg-b,.sg-step.fail .sg-b{color:var(--deny)}
.sg-out{margin:auto 0 0;display:grid;gap:3px;padding:12px 14px;border-radius:var(--r-sm);font-size:var(--t-14);line-height:1.45;animation:traceIn .28s ease-out}
.sg-out b{font-weight:600}
.sg-out span{color:var(--ink)}
.sg-out.allow{background:var(--allow-bg)}.sg-out.allow b{color:var(--allow)}
.sg-out.hold{background:var(--hold-bg)}.sg-out.hold b{color:var(--hold)}
.sg-out.deny{background:var(--deny-bg)}.sg-out.deny b{color:var(--deny)}
@media (prefers-reduced-motion:reduce){.sg-step,.sg-out{animation:none}}
@media (max-width:899px){.sg-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.sg-tabs button:nth-child(5){grid-column:span 2}}
@media (max-width:520px){.sg-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.sg-input,.sg-lane,.sg-bar{padding-left:16px;padding-right:16px}.sg-tabs small{display:none}.sg-tabs button{padding:12px 14px}.sg-tabs b{font-size:var(--t-14)}}
.experiment{display:grid;gap:14px;margin-top:48px}
@media (min-width:760px){.experiment{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}}
.exp-card{display:grid;gap:10px;align-content:start;padding:20px 22px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.exp-card h3{font-size:var(--t-18);letter-spacing:-.01em}
.exp-card p{color:var(--ink-2);font-size:var(--t-16);line-height:1.55;margin:0}
.exp-card p.exp-k{font:500 var(--t-14)/1 var(--mono);justify-self:start}
.exp-card.garm{grid-column:1/-1;gap:20px;padding:24px}
/* Every experiment card takes the full row: a lone card left a half-empty grid beside it. */
.experiment>.exp-card{grid-column:1/-1}
@container main (min-width:860px){.exp-card.garm{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:20px 36px;padding:28px 30px}}
.garm-copy,.garm-side{display:grid;gap:12px;align-content:start;min-width:0}
.garm-copy p:not(.exp-k){max-width:62ch}
.exp-card.garm h3{font-size:var(--t-24);letter-spacing:-.02em}
.exp-card p.garm-tag{font-size:var(--t-18);color:var(--ink-2);line-height:1.45}
/* One surface: the stats are rows on hairlines and the chart sits on the card itself, not boxes inside the box. */
.garm-stats{display:grid;gap:0;margin:0;border-top:1px solid var(--rule)}
.garm-stats div{display:grid;grid-template-columns:7.25em minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);min-width:0}
.garm-stats dt{font:600 var(--t-18)/1.15 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.garm-stats dd{margin:0;font-size:var(--t-14);line-height:1.4;color:var(--ink-2)}
.garm-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.garm-links .gh{flex:none}
.exp-card p.garm-meta{font-size:var(--t-14);color:var(--ink-3)}
.vchips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:2px 0}
.vchips li{flex:0 0 auto}.vchips li:has(details[open]){flex-basis:100%}
.vchips summary{display:inline-block;list-style:none;cursor:pointer;font:500 var(--t-14)/1 var(--mono);color:var(--ink);padding:7px 11px;border:1px solid var(--rule);border-radius:999px;background:var(--paper)}
.vchips summary::-webkit-details-marker{display:none}
.vchips summary:hover,.vchips details[open] summary{border-color:var(--blue);color:var(--blue-ink)}
.vchips summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.vchips details p{margin:8px 2px 2px;font-size:var(--t-14)}
.garm-fig{grid-column:1/-1;margin:0;min-width:0;padding:18px 0 0;border-top:1px solid var(--rule)}
.garm-fig img{display:block;width:100%;max-width:900px;height:auto;margin:0 auto}
.garm-fig .fig-dark{display:none}
:root[data-theme="dark"] .garm-fig .fig-light{display:none}
:root[data-theme="dark"] .garm-fig .fig-dark{display:block}
.garm-fig figcaption{margin-top:10px;font-size:var(--t-14);line-height:1.45;color:var(--ink-3)}
.exp-arms{display:flex;flex-wrap:wrap;gap:6px}
.exp-arms span{font-size:var(--t-14);padding:5px 10px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2)}
.pend{font-family:var(--mono);font-size:var(--t-14);color:var(--ink-3)}

/* ---------- 6. embeddings ---------- */
.space{position:relative;margin-top:24px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.space-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:12px 16px;border-bottom:1px solid var(--rule)}
.space-q{display:flex;align-items:center;gap:6px;font-size:var(--t-14);color:var(--ink-2)}
.space-q input{width:min(220px,48vw);font-size:var(--t-14);padding:7px 10px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.space-q input:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.space-legend{display:flex;flex-wrap:wrap;gap:6px}
.space-legend button{display:inline-flex;align-items:center;gap:7px;font:500 var(--t-14)/1 var(--sans);padding:7px 11px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:border-color .15s,color .15s}
.space-legend button:hover{color:var(--ink);border-color:var(--ink-3)}
.space-legend button[aria-pressed="true"]{color:var(--ink);border-color:var(--blue)}
.space-legend i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.space-legend .mono{font-size:var(--t-14);color:var(--ink-3)}
.space-stage{position:relative}
#embed{display:block;width:100%;height:clamp(360px,62vh,620px);cursor:grab;touch-action:pan-y}
#embed.drag{cursor:grabbing}
.space-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.space-labels span{position:absolute;left:0;top:0;font-size:var(--t-14);font-weight:500;white-space:nowrap;color:var(--ck,var(--c));transition:opacity .25s;will-change:transform}
.space-labels span.cl{font-weight:600;font-size:var(--t-14)}
.space-labels span.hit{font-weight:600;padding:1px 6px;border-radius:var(--r-xs);background:color-mix(in srgb,var(--surface) 82%,transparent)}
.space-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 18px;padding:12px 16px;border-top:1px solid var(--rule)}
.space-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:var(--t-14);color:var(--ink-2);min-height:1.4em}
.space-out b{color:var(--ink);font-weight:500;font-size:var(--t-14)}
.space-out .nb{display:inline-flex;align-items:center;gap:6px}
.space-out .nb-note{display:block;flex-basis:100%;margin-top:4px;font-size:var(--t-14);color:var(--ink-3)}
.space-out .nb i{width:7px;height:7px;border-radius:50%;background:var(--c)}
.space-out .nb .mono{font-size:var(--t-14);color:var(--ink-3)}
.space-note{font-size:var(--t-14);color:var(--ink-3)}
.c-agents{--c:var(--c-agents)}.c-security{--c:var(--c-security)}.c-infra{--c:var(--c-infra)}.c-product{--c:var(--c-product);--ck:var(--hold)}.c-data{--c:var(--c-data)}

/* ---------- 7. evals ---------- */
.term{margin-top:32px;border-radius:var(--r-lg);background:var(--graphite);color:var(--graphite-ink);border:1px solid var(--graphite-rule);overflow:hidden}
.term-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--graphite-rule);font-size:var(--t-14);color:var(--graphite-dim);flex-wrap:wrap}
.term-body{padding:16px;font-size:var(--t-14);line-height:1.7;min-height:330px;overflow-x:auto}
.ev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px dashed var(--graphite-rule);color:var(--graphite-dim)}
.ev-meta b{font-weight:400;color:var(--graphite-ink)}
.ev-prog{flex:1 1 120px;max-width:220px;height:4px;border-radius:999px;background:var(--graphite-rule);overflow:hidden}
.ev-prog i{display:block;height:100%;width:0;background:var(--g-allow);transition:width .2s linear}
.ev-count{color:var(--graphite-ink);min-width:3.5em}
.ev{display:grid;grid-template-columns:70px 200px minmax(0,1fr);gap:12px;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.ev.in{opacity:1;transform:none}
.ev .st{font-weight:500}
.ev .st.pass{color:var(--g-allow)}.ev .st.fail{color:var(--g-deny)}.ev .st.wip{color:var(--blue-2)}
.ev .dt{color:var(--graphite-dim)}
@media (max-width:720px){.ev{grid-template-columns:66px minmax(0,1fr);row-gap:2px;margin-bottom:10px}.ev .dt{grid-column:2}.ev-prog{display:none}}
.ev-sum{margin-top:14px;padding-top:12px;border-top:1px dashed var(--graphite-rule);display:flex;flex-wrap:wrap;gap:6px 22px;opacity:0;transition:opacity .4s}
.ev-sum.in{opacity:1}
.ev-sum b{color:var(--g-allow);font-weight:500}
.ev-sum .ev-trust{flex-basis:100%;color:var(--g-ink-2)}.ev-sum .ev-trust b{color:inherit}
.rt{margin-top:16px}
.rt .term-head span:last-child{color:var(--graphite-dim)}
.rt .term-body{min-height:0}
.rt-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) 60px;gap:12px;padding:3px 0;color:var(--graphite-ink)}
.rt-row b{font-weight:500;color:var(--graphite-ink)}
.rt-row span{color:var(--graphite-dim)}.rt-row span:first-child{color:var(--graphite-ink)}
.rt-h span{color:var(--graphite-dim)!important}
.rt-row .good{color:var(--g-allow)!important}.rt-row .bad{color:var(--g-deny)!important}
.rt-k{margin:16px 0 8px;padding-top:12px;border-top:1px dashed var(--graphite-rule);color:var(--graphite-dim)}
.rt-cats{display:grid;gap:4px}
.rt-cat{display:grid;grid-template-columns:150px minmax(0,1fr) 44px;align-items:center;gap:12px;color:var(--graphite-ink)}
.rt-cat i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--g-ink-2) var(--w),var(--graphite-rule) var(--w))}
.rt-cat span:last-child{color:var(--graphite-dim);text-align:right}
.rt-sum{margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--graphite-rule);color:var(--graphite-dim);font-family:var(--sans);font-size:var(--t-14);line-height:1.55}
@media (max-width:640px){.rt-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 40px;gap:8px;font-size:var(--t-14)}.rt-cat{grid-template-columns:128px minmax(0,1fr) 36px;gap:8px;font-size:var(--t-14)}}
.ev-sum .dim{color:var(--graphite-dim)}

/* ---------- 8. inference ---------- */
.console{margin-top:32px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.console-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);font-size:var(--t-14)}
.mode{font:500 var(--t-14)/1 var(--mono);padding:5px 9px;border-radius:999px;background:var(--allow-bg);color:var(--allow);white-space:nowrap}
.mode.off{background:var(--sunk);color:var(--ink-2)}
.log{display:flex;flex-direction:column;gap:16px;padding:18px 16px;min-height:220px;max-height:460px;overflow-y:auto}
.msg{min-width:0}
.msg.user{align-self:flex-end;max-width:85%;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:var(--r-md) var(--r-md) 3px var(--r-md)}
.msg.agent{display:flex;flex-direction:column;gap:10px;max-width:100%}
.msg.agent .text p+p,.msg.agent .text ul+p,.msg.agent .text p+ul{margin-top:8px}
.msg.agent .text ul{margin:0;padding-left:1.2em}
.msg.agent .text ol{margin:0;padding-left:1.4em}.msg.agent .text :is(p,ul,ol,.tbl)+:is(p,ul,ol,.tbl){margin-top:8px}
.msg.agent .text .tbl{overflow-x:auto;max-width:100%}.msg.agent .text table{border-collapse:collapse;font-size:.92em;min-width:100%}
.msg.agent .text th,.msg.agent .text td{text-align:left;vertical-align:top;padding:6px 10px;border-bottom:1px solid var(--rule)}.msg.agent .text th{font-weight:600;color:var(--ink);background:var(--sunk)}
.calls{display:flex;flex-direction:column;gap:6px}
.secflag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline;padding:8px 10px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--hold) 40%,var(--rule));background:var(--hold-bg);font-size:var(--t-14);color:var(--ink)}
.secflag>span{font:500 var(--t-14)/1.4 var(--sans);color:var(--hold)}
.secflag p{margin:0}
.reason{border-top:1px solid var(--rule);padding-top:8px;margin-top:2px}
.reason summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-size:var(--t-14);font-weight:500;color:var(--ink-2)}
.reason summary::-webkit-details-marker{display:none}
.reason summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.reason[open] summary::before{transform:rotate(45deg)}
.reason summary .mono{font-size:var(--t-14);font-weight:400;color:var(--ink-3)}
.reason summary:hover{color:var(--ink)}
.reason ol{margin:10px 0 2px;padding:0;list-style:none;counter-reset:rs;display:grid;gap:10px}
.reason ol>li{counter-increment:rs;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px}
.reason ol>li::before{content:counter(rs);grid-row:1 / 3;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:500 var(--t-14)/1 var(--mono);color:var(--ink-2);border:1px solid var(--rule)}
.reason ol>li>b{font-size:var(--t-14);font-weight:500;color:var(--ink)}
.reason ol>li>p{margin:2px 0 0;font-size:var(--t-14);color:var(--ink-2);line-height:1.5}
.reason ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.reason ul li{font-size:var(--t-14);color:var(--ink-2);overflow-wrap:anywhere}
.caught{display:grid;gap:10px;padding:16px 16px 14px;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--deny) 35%,var(--rule));background:var(--deny-bg)}
.caught-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.caught-h b{font-size:var(--t-16);color:var(--ink)}
.caught-h .mono{margin-left:auto;font-size:var(--t-14);color:var(--ink-3)}
.caught-dot{width:8px;height:8px;border-radius:50%;background:var(--deny)}
.caught-flags{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.caught-flags span{font-size:var(--t-14);padding:3px 7px;border-radius:var(--r-xs);background:var(--surface);border:1px solid var(--rule);color:var(--deny)}
.caught p{margin:0;font-size:var(--t-14);line-height:1.55;color:var(--ink)}
.caught .caught-pitch{color:var(--ink-2)}
.caught-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.call{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;font:400 var(--t-14)/1.4 var(--mono);background:var(--paper);border:1px solid var(--rule);padding:8px 10px;border-radius:var(--r-sm)}
.call code{font:inherit;overflow-wrap:anywhere}
.call .gate{font:500 var(--t-14)/1 var(--mono);padding:4px 7px;border-radius:var(--r-xs);background:var(--allow-bg);color:var(--allow);white-space:nowrap}
.call.approve{border-color:color-mix(in srgb,var(--hold) 40%,var(--rule))}.call.approve .gate{background:var(--hold-bg);color:var(--hold)}
.call.deny{border-color:color-mix(in srgb,var(--deny) 40%,var(--rule))}.call.deny .gate{background:var(--deny-bg);color:var(--deny)}
.call .why{grid-column:1/-1;color:var(--ink-2);font-size:var(--t-14)}
.approval{grid-column:1/-1;display:flex;gap:8px;margin-top:4px}
.approval button{font:500 var(--t-14)/1 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.approval button.yes{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.note-card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:12px;font-size:var(--t-14);display:grid;gap:8px}
.note-card pre{margin:0;white-space:pre-wrap;font:400 var(--t-14)/1.5 var(--mono)}
.thinking{color:var(--ink-3);font:400 var(--t-14)/1.4 var(--mono)}
.thinking::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
.suggest button{font:400 var(--t-14)/1.2 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;text-align:left}
.suggest button:hover{border-color:var(--ink)}
form.ask{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--rule)}
form.ask textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:transparent}
form.ask textarea{flex:1;min-width:0;resize:none;height:46px;font:400 var(--t-16)/1.4 var(--sans);padding:12px 14px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink)}
.console-foot{display:flex;justify-content:space-between;gap:12px;padding:0 16px 12px;font-size:var(--t-14);color:var(--ink-3);flex-wrap:wrap}
.copyrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* One disclosure row: the same height, type and "+" as the field notes. */
.annotated{margin-top:20px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface)}
.annotated summary{cursor:pointer;padding:14px 44px 14px 16px;font-weight:500;font-size:var(--t-16);list-style:none;display:flex;align-items:center;gap:12px;position:relative}
.annotated summary::-webkit-details-marker{display:none}
.annotated summary::after{content:"+";position:absolute;right:16px;top:calc(50% - .5em);font:400 var(--t-18)/1 var(--sans);color:var(--ink-3);transition:transform .2s}
.annotated[open] summary::after{transform:rotate(45deg)}
.ann{display:grid;border-top:1px solid var(--rule)}
.ann-row{display:grid;gap:8px 28px;padding:14px 20px;border-bottom:1px solid var(--rule)}
.ann-row:last-child{border-bottom:0}
@media (min-width:860px){.ann-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.ann-row code{font:400 var(--t-14)/1.6 var(--mono)}
.ann-row p{font-size:var(--t-16);color:var(--ink-2)}

/* ---------- footer: a graphite card with a tab for the logo ---------- */
.foot{position:relative;padding:56px 12px 0;color:var(--graphite-ink);
  background:var(--paper)}
.foot-card{position:relative;display:flow-root;background:var(--graphite);border-radius:var(--r-xl);max-width:1600px;margin:0 auto}
.foot-tab{position:absolute;left:50%;bottom:calc(100% - 1px);width:200px;height:36px;transform:translateX(-50%);fill:var(--graphite);display:block}
.foot-logo{position:absolute;left:50%;top:-29px;transform:translateX(-50%);width:44px;height:40px;display:grid;place-items:center;color:var(--graphite-ink);border-radius:var(--r-sm)}
.foot-logo .mark{height:30px;width:30px;--mark-ink:var(--graphite);--mark-node:var(--g-brand)}
.foot-logo:hover .mark{--mark-node:var(--brand-2)}
.foot-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:44px var(--gut) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:32px;justify-items:center;text-align:center}
.foot-cta{display:grid;justify-items:center}
.foot-kicker{color:var(--blue-2);font-size:var(--t-14)}
.foot h2{font-size:clamp(var(--t-32),3.6vw,var(--t-48));letter-spacing:-.035em;line-height:1.06;margin:12px 0 22px;max-width:15em}
.foot .copyrow{justify-content:center}
.foot-cols{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 24px;text-align:left}
.foot-cols div{display:grid;gap:6px;align-content:start;font-size:var(--t-16)}
.foot-cols div:first-child{grid-auto-flow:row}
@media (min-width:760px){.foot-cols div:first-child{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline}.foot-cols div:first-child p{flex-basis:100%}.foot-cols div:nth-child(2){text-align:left}}
/* Phones: the links sit two to a row instead of one long column. */
@media (max-width:759px){.foot-cols div:first-child{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}.foot-cols div:first-child p{grid-column:1/-1}}
.foot-cols p{font-size:var(--t-14);color:var(--graphite-dim)}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--blue-2)}
.foot-cols span{color:var(--g-ink-2)}
.foot-cols .sess{font-size:var(--t-14);color:var(--graphite-dim)}
.foot-cols .sess span{color:inherit}
#wordmark{display:block;width:calc(100% - 2 * clamp(16px,3vw,48px));margin:28px auto 0;margin-bottom:22px;height:clamp(96px,19vw,330px);cursor:crosshair;touch-action:pan-y}
.foot-base{max-width:1600px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;font-size:var(--t-14);font-weight:500;color:var(--ink);padding:18px 12px 20px}
.foot-base a{text-decoration:none}
@media (max-width:560px){.foot-base{flex-direction:column;align-items:center;gap:6px;text-align:center}}
.foot-base a:hover{color:var(--blue)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.chip{opacity:1}.wires path{opacity:.3}}
/* very small phones: the pill drops under the sentence, long file names wrap */
@media (max-width:420px){.hero-copy p{font-size:var(--t-16)}.pill-slot{margin-top:8px}}
/* The narrowest phones: a long phrase wraps inside the pill rather than overflow the screen. */
@media (max-width:360px){.pill{white-space:normal;max-width:100%}.pill-word{text-align:center}}
.sp-meta,.sp-group>summary,.sp-doc summary{overflow-wrap:anywhere}
#sysprompt .hl{color:var(--blue);font-weight:500}

.real .cpill{background:var(--blue-soft);color:var(--blue)}
.cache-table tr.real td{font-weight:500}
/* agent skill */
.skill{margin-top:40px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);padding:22px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.skill>*,.skill-install{min-width:0}
.skill-head{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:flex-start}
.skill-head h3{font-size:var(--t-18)}
.skill-head p{color:var(--ink-2);font-size:var(--t-16);max-width:62ch;margin-top:6px}
/* The three loading steps sit in three columns or one, never two plus an orphan. */
.skill-levels{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@container main (min-width:600px){.skill-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}
.skill-levels li{border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px;display:grid;gap:6px;align-content:start;background:var(--paper)}
.skill-levels p{font-size:var(--t-14);color:var(--ink-2);line-height:1.5;overflow-wrap:anywhere}
.skill-agents{display:inline-flex;justify-self:start;padding:2px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);margin-bottom:4px}
.skill-agents button{font:500 var(--t-14)/1 var(--sans);padding:7px 12px;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer}
.skill-agents button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.skill-levels .lv{font-size:var(--t-14);color:var(--blue-ink)}
.skill-levels b{font-size:var(--t-16)}
.skill-levels em{font-style:normal;font-size:var(--t-14);color:var(--ink-2)}

.skill-levels code{font-size:var(--t-14);padding:2px 6px;border-radius:var(--r-xs);background:var(--sunk);margin:0 2px 4px 0;display:inline-block}
.skill-install{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.skill-cmd{min-width:0;display:flex;gap:8px;align-items:center;border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 8px 8px 12px;background:var(--paper)}
.skill-cmd code{flex:1;min-width:0;font-size:var(--t-14);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
/* the job agent: design only */

/* field notes: the edge cases you only meet in production */
.notes{margin-top:36px;display:grid;gap:8px}
.note{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--surface);transition:border-color .2s}
.note[open]{border-color:color-mix(in srgb,var(--blue) 55%,var(--rule))}
.note summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:14px 44px 14px 16px;position:relative}
.note summary::-webkit-details-marker{display:none}
.note summary::after{content:"+";position:absolute;right:16px;top:calc(50% - .5em);font:400 var(--t-18)/1 var(--sans);color:var(--ink-3);transition:transform .2s}
.note[open] summary::after{transform:rotate(45deg)}
/* A disclosure row's header fill stays inside the card's corners, and keyboard focus rings the whole card: the header's hover fill and 6px focus ring used to sit square inside the card's rounder corners. */
:is(.note,.annotated){overflow:clip}   /* a summary can't inherit the card's radius (it sits in the details' slot), so clip */
:is(.note,.annotated)>summary{border-radius:0}
:is(.note,.annotated)>summary:focus-visible{outline:0}
:is(.note,.annotated):has(>summary:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.note-k{font:500 var(--t-14)/1.2 var(--mono);color:var(--blue-ink)}
.note summary b{font-weight:500;font-size:var(--t-16)}
.note p{padding:0 16px 16px;color:var(--ink-2);font-size:var(--t-16);line-height:1.6;max-width:72ch}
.note code{font-size:var(--t-14);padding:1px 5px;border-radius:var(--r-xs);background:var(--sunk)}
.sec.dark{--blue-2:var(--g-blue-ink)}
.sec.dark .note{background:var(--graphite-2);border-color:var(--graphite-rule)}
.sec.dark .note p{color:var(--g-ink-2)}
.sec.dark .note code{background:var(--graphite-3)}
.sec.dark .note-k{color:var(--g-blue-ink)}
/* pass@k vs pass^k */
.passk{display:grid;gap:10px;margin-top:12px;padding:14px;border-radius:var(--r-sm);background:var(--paper);border:1px solid var(--rule)}
.passk label{display:grid;grid-template-columns:9.5em minmax(0,1fr) 3.5em;align-items:center;gap:10px;font-size:var(--t-14);color:var(--ink-2)}
@media (max-width:480px){.passk label{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.passk label input{grid-column:1/-1;order:3}}
.passk input{width:100%;accent-color:var(--blue)}
.pk-out{display:flex;gap:24px;flex-wrap:wrap;font-size:var(--t-14)}
.pk-out b{font-size:var(--t-20);color:var(--ink);margin-left:6px}
/* cache toggle */
.tgl{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-14);color:var(--ink-2);cursor:pointer}
.tgl input{accent-color:var(--blue)}

/* ---------- scrollbars: slim and visible wherever a region scrolls on purpose */
.chips,.cache-scroll,.term-body,.skill-cmd code,.hf-list,.log,.insp-log ol,.insp-main pre,.traw pre{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink-3) 55%,transparent) transparent}
.hf-list,.insp-log ol,.insp-main pre,.traw pre{scrollbar-color:var(--g-rule-2) transparent}
.chips::-webkit-scrollbar,.cache-scroll::-webkit-scrollbar,.term-body::-webkit-scrollbar,.skill-cmd code::-webkit-scrollbar,.hf-list::-webkit-scrollbar,.log::-webkit-scrollbar,.insp-log ol::-webkit-scrollbar,.insp-main pre::-webkit-scrollbar{width:6px;height:6px}
.chips::-webkit-scrollbar-thumb,.cache-scroll::-webkit-scrollbar-thumb,.term-body::-webkit-scrollbar-thumb,.skill-cmd code::-webkit-scrollbar-thumb,.log::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink-3) 55%,transparent);border-radius:999px}
.hf-list::-webkit-scrollbar-thumb,.insp-log ol::-webkit-scrollbar-thumb,.insp-main pre::-webkit-scrollbar-thumb{background:var(--g-rule-2);border-radius:999px}
.chips::-webkit-scrollbar-track,.cache-scroll::-webkit-scrollbar-track,.term-body::-webkit-scrollbar-track,.skill-cmd code::-webkit-scrollbar-track,.hf-list::-webkit-scrollbar-track,.log::-webkit-scrollbar-track,.insp-log ol::-webkit-scrollbar-track,.insp-main pre::-webkit-scrollbar-track{background:transparent}
.chips.more-end{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.chips.more-start.more-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(to right,transparent,#000 12%,#000 82%,transparent)}
.chips.more-start:not(.more-end){-webkit-mask-image:linear-gradient(to right,transparent,#000 12%);mask-image:linear-gradient(to right,transparent,#000 12%)}
.hf-list::after{content:"";grid-column:1 / -1;position:sticky;bottom:-8px;height:44px;margin-top:-44px;background:linear-gradient(to bottom,transparent,var(--graphite-2) 85%);pointer-events:none;opacity:0;transition:opacity .15s}
.hf-list.more-end::after{opacity:1}

/* Touch screens: every control is at least 40px tall. */
@media (pointer:coarse){
  .btn.small{min-height:40px;padding:10px 14px}
  .theme{width:40px;height:40px}
  .tall,#inspClear,.traw-btn{min-height:36px;padding:8px 12px}
  .copy-ico{width:40px;height:36px}
  .insp-log li summary{min-height:40px}
  .path-chip{min-height:36px}
  .rz-len button{padding:10px 14px}
}

.connect-more{margin-top:10px}
.connect-more summary{cursor:pointer;font-size:var(--t-14);color:var(--graphite-dim);width:max-content}
.connect-more[open] summary{margin-bottom:8px}
.connect-result{margin:8px 0 0;font-size:var(--t-14);color:var(--g-allow)}

.rt-head{margin:0 0 12px;font-family:var(--sans);font-size:var(--t-18);font-weight:600;color:var(--graphite-ink)}
.rt-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rt-tile{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--graphite-rule);border-radius:var(--r-sm);background:var(--graphite-2)}
.rt-tile b{font:600 var(--t-24)/1 var(--sans);color:var(--graphite-ink)}
.rt-tile.good b{color:var(--g-allow)}
.rt-tile span{font-family:var(--sans);font-size:var(--t-14);line-height:1.4;color:var(--graphite-dim)}
.rt-note{margin:10px 0 0;font-family:var(--sans);font-size:var(--t-14);color:var(--graphite-dim)}
/* The layers an attack meets, as one bar: code stopped it (green), the model held (blue), it worked (red). Colour guide. */
.rt-layers{margin:0 0 14px}
.rt-bar{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden;background:var(--graphite-rule)}
.rt-bar i{display:block;min-width:4px}
.rt-layers .code{background:var(--g-allow)}.rt-layers .model{background:var(--g-blue)}.rt-layers .won{background:var(--g-deny)}
.rt-key{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--sans);font-size:var(--t-14);color:var(--graphite-dim)}
.rt-key li{display:flex;align-items:center;gap:7px}.rt-key i{width:9px;height:9px;border-radius:2px;flex:none}.rt-key b{color:var(--graphite-ink);font-weight:600}
.rt-sum{max-width:68ch}
@media (max-width:640px){.rt-tiles{grid-template-columns:minmax(0,1fr)}}
@container main (min-width:760px){.caps{grid-template-columns:1fr 1fr;column-gap:28px;border-top:0}.caps .cap:nth-child(-n+2){border-top:1px solid var(--rule)}}
/* Posting reader: a link that couldn't be read */
.rz-miss{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:start;padding:12px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface)}
.rz-miss svg{width:52px;height:52px;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rz-miss .pg{fill:var(--paper)}
.rz-miss .bdg{stroke:var(--ink-2);fill:var(--surface)}
.rz-miss[data-kind="lock"] .bdg,.rz-miss[data-kind="code"] .bdg{stroke:var(--hold)}
.rz-miss b{display:block;font-size:var(--t-14);font-weight:600;line-height:1.35}
.rz-miss p{margin:3px 0 0;font-size:var(--t-14);line-height:1.45;color:var(--ink-2)}
/* One short sequence when it appears: the page's lines are drawn, then they fade, as if nothing was there. */
.rz-miss .ln{stroke-dasharray:20;stroke-dashoffset:20;animation:missLine 1.6s ease-out forwards}
.rz-miss .l2{animation-delay:.12s}.rz-miss .l3{animation-delay:.24s}
.rz-miss .bdg{opacity:0;transform-origin:38px 40px;animation:missBadge .35s ease-out 1s forwards}
.rz-miss[data-kind="empty"] .bdg{transform-origin:37px 38px;animation:missBadge .35s ease-out 1s forwards,missLook 1.2s ease-in-out 1.35s 1}
@keyframes missLine{0%{stroke-dashoffset:20;opacity:1}45%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.18}}
@keyframes missBadge{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes missLook{0%,100%{translate:0 0}30%{translate:-9px -6px}65%{translate:-3px -14px}}
@media (prefers-reduced-motion:reduce){.rz-miss .ln{animation:none;stroke-dashoffset:0;opacity:.18}.rz-miss .bdg{animation:none;opacity:1}}

/* A short line in my own voice where a demo has just made the point. */
.rt-pitch{margin:10px 0 0;color:var(--graphite-ink);font-family:var(--sans);font-size:var(--t-14);line-height:1.55;font-weight:500;max-width:68ch}
.sg-foot{margin:0;padding:14px 20px;border-top:1px solid var(--rule);background:var(--paper);font-size:var(--t-14);line-height:1.5;color:var(--ink-2)}
.sg-foot a{color:var(--blue-ink);font-weight:500;text-underline-offset:3px}
.foot .leaf{width:.95em;height:.95em;vertical-align:-.12em;fill:var(--leaf)}

/* P.S.: the closing note */
.lvl.proto{background:var(--sunk);color:var(--ink-2)}
.ps-caps{margin-top:28px}
.ps-letter{margin-top:32px;max-width:62ch}
.ps-letter p{font-size:var(--t-18);line-height:1.6;color:var(--ink)}
.ps-sign{margin-top:12px;font-weight:600}

/* Corner launcher and panel for the chapter 8 agent */
/* The agent launcher is a chat bubble: round (a circle with only the logo, a pill with the label), with a tail at
   the bottom right pointing into the screen corner. Shadows are drop-shadows so they follow the tail. */
.dock-btn{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:9px;padding:12px 18px 12px 14px;border:0;border-radius:999px 999px 0 999px;background:var(--ink);color:var(--paper);font:500 var(--t-16)/1 var(--sans);cursor:pointer;filter:drop-shadow(0 8px 14px rgba(10,12,20,.3)) drop-shadow(0 2px 3px rgba(10,12,20,.16))}
.dock-btn::after{content:"";position:absolute;right:-10px;bottom:0;width:24px;height:18px;background:inherit;clip-path:path("M0 0H14C14 7 16.5 13.5 24 18H0Z");pointer-events:none}
.dock-btn:hover{transform:translateY(-1px)}
.dock-btn[hidden]{display:none}
.dock-btn{transition:transform .25s cubic-bezier(.3,.7,.2,1),opacity .2s}
.dock-btn.tucked{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
.dock-btn.on-dark{--ring:color-mix(in srgb,var(--paper) 55%,transparent);filter:drop-shadow(1px 0 0 var(--ring)) drop-shadow(-1px 0 0 var(--ring)) drop-shadow(0 1px 0 var(--ring)) drop-shadow(0 -1px 0 var(--ring)) drop-shadow(0 12px 18px rgba(0,0,0,.5))}
main{padding-bottom:72px}
.dock{position:fixed;right:20px;bottom:20px;z-index:61;width:min(420px,calc(100vw - 32px));height:min(640px,calc(100vh - 110px));display:flex}
.dock .console{margin:0;width:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-2)}
.dock .log{flex:1;min-height:0;max-height:none}
.dock .suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.dock .suggest button{flex:none}
.dock .console-head{gap:8px}
.dock .console-head .mode{margin-left:auto}
.dock-close{width:30px;height:30px;border:0;border-radius:50%;background:none;color:var(--ink-2);font-size:var(--t-20);line-height:1;cursor:pointer}
.dock-close:hover{background:var(--sunk);color:var(--ink)}
.console-slot{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px dashed var(--rule);border-radius:var(--r-lg);color:var(--ink-2);font-size:var(--t-16)}
@media (max-width:600px){.dock{right:8px;left:8px;bottom:8px;width:auto;height:calc(100dvh - 90px)}.dock-btn{right:14px;bottom:14px}}
@media (prefers-reduced-motion:no-preference){.dock:not([hidden]){animation:dockIn .22s ease-out}@keyframes dockIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}}

/* ---------- 8. the agent chat: identity, live activity trail, composer ---------- */
.agent-id{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--ink)}
.avatar .mark{width:100%;height:100%}
.avatar.sm{width:26px;height:26px}
.agent-name{display:grid;gap:3px;line-height:1.2}
.agent-name b{font-size:var(--t-14);font-weight:600}
.console-head .mode{background:none;padding:0;border-radius:0;font:400 var(--t-14)/1.2 var(--mono);color:var(--allow);display:inline-flex;align-items:center;gap:6px}
.console-head .mode::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.console-head .mode.off{color:var(--ink-3)}
.msg.agent{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start}
.msg.agent .body{display:flex;flex-direction:column;gap:10px;min-width:0}
.trail{border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);overflow:hidden}
.trail-sum{width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;border:0;background:none;color:var(--ink-2);font:500 var(--t-14)/1.3 var(--sans);text-align:left;cursor:pointer}
.trail-sum:hover .trail-label{color:var(--ink)}
.trail-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trail-meta{margin-left:auto;font-size:var(--t-14);color:var(--ink-3);white-space:nowrap}
/* In the narrow dock the metrics drop under the label instead of cutting it to "Ans…". */
.dock .trail-sum{flex-wrap:wrap;row-gap:2px}.dock .trail-label{white-space:normal}.dock .trail-meta{flex-basis:100%;margin-left:26px;font-family:var(--mono)}
.chev{flex:none;width:7px;height:7px;margin:0 2px 3px 2px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .15s}
.trail.collapsed .chev{transform:rotate(-45deg);margin-bottom:0}
.trail.collapsed .steps{display:none}
.steps{list-style:none;margin:0;padding:12px;display:grid;gap:12px;border-top:1px solid var(--rule)}
.step{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;animation:stepIn .3s ease-out both;animation-delay:calc(min(var(--i, 0), 6) * 80ms)}
.step:not(:last-child)::after{content:"";position:absolute;left:8.5px;top:22px;bottom:-12px;width:1px;background:var(--rule)}
.step b{display:block;font-size:var(--t-14);font-weight:500;color:var(--ink);line-height:18px}
.step p{margin:2px 0 0;font-size:var(--t-14);color:var(--ink-2);line-height:1.45}
.step-ico,.trail-ico{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font:700 var(--t-14)/1 var(--sans)}
.step.done .step-ico,.trail-ico.done{background:var(--allow-bg);color:var(--allow)}
.step.done .step-ico::before,.trail-ico.done::before{content:"✓"}
.step.hold .step-ico,.trail-ico.hold{background:var(--hold-bg);color:var(--hold)}
.step.hold .step-ico::before,.trail-ico.hold::before{content:"!"}
.step.deny .step-ico,.trail-ico.deny{background:var(--deny-bg);color:var(--deny)}
.step.deny .step-ico::before,.trail-ico.deny::before{content:"×"}
.step.run .step-ico,.trail-ico.run{background:none;border:2px solid var(--rule);border-top-color:var(--blue);animation:spin .8s linear infinite}
.step.call{background:none;border:0;padding:0;border-radius:0;font:inherit}
.call-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-xs);background:var(--surface);font:400 var(--t-14)/1.4 var(--mono)}
.call-row code{font:inherit;overflow-wrap:anywhere;min-width:0}
.step.call.run .gate{background:var(--sunk);color:var(--ink-3)}
.step.call .why{display:block;margin-top:6px;font-size:var(--t-14);color:var(--ink-2)}
.step.call .approval{margin-top:8px}
/* The working label is plain text; the spinner beside it carries the motion. */
.shimmer{color:var(--ink-2)}
.text .dim{color:var(--ink-2)}
.text.reveal>*{animation:rise .4s ease-out both}
.text.reveal>*:nth-child(2){animation-delay:.08s}.text.reveal>*:nth-child(3){animation-delay:.16s}.text.reveal>*:nth-child(n+4){animation-delay:.24s}
@keyframes stepIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
form.ask{align-items:center}
.send{flex:none;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--blue);color:var(--on-blue);cursor:pointer;transition:background-color .15s}
.send svg{width:20px;height:20px}
.send:hover{background:var(--blue-2)}
.send:disabled{background:var(--sunk);color:var(--ink-3);cursor:default}
/* The launcher is a round chat bubble holding only the logo, at every width; it grows with the screen (56px on a
   laptop to 84px on a large monitor). The logo tile is 68% of it, so its corners stay inside the circle. */
.dock-btn{--db:clamp(56px,2vw + 30px,84px);width:var(--db);height:var(--db);padding:0;gap:0;justify-content:center}
.dock-btn .avatar{width:calc(var(--db) * .68);height:calc(var(--db) * .68);color:var(--paper)}
.dock-btn .avatar .mark{--mark-ink:var(--ink);--mark-node:var(--brand-2)}
.dock-btn .dock-btn-l{display:none}
@media (prefers-reduced-motion:reduce){.step,.text.reveal>*{animation:none}.shimmer{animation:none;color:var(--ink-2);background:none}.step.run .step-ico,.trail-ico.run{animation:none;border-top-color:var(--rule);border-color:var(--blue)}}
@media (max-width:600px){.suggest{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.suggest::-webkit-scrollbar{display:none}.suggest button{flex:none}}
/* ---------- 4. NestEazy, at product level ---------- */
.ne-now{margin-top:28px;display:grid;gap:8px;justify-items:start;padding:20px 22px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);background:var(--graphite-2)}
.ne-now h3{margin:4px 0 0;font-size:var(--t-18);letter-spacing:-.01em;color:var(--graphite-ink)}
.ne-now p{margin:0;max-width:68ch;color:var(--g-ink-2);line-height:1.6}
.ne-ai{margin-top:28px}
.ne-ai-h{margin:0 0 6px;font-size:var(--t-14);color:var(--graphite-dim)}
.ne-caps{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:28px;border-top:0}
.ne-caps{gap:10px}
.sec.dark .ne-caps .cap{position:relative;border:1px solid var(--graphite-rule);border-radius:var(--r-md);padding:14px 16px 16px;background:var(--graphite-2);gap:6px;transition:border-color .2s,transform .2s}
.sec.dark .ne-caps .cap:hover{border-color:var(--g-sel-rule);transform:translateY(-2px)}
.sec.dark .ne-caps .cap::after{content:"";position:absolute;top:16px;right:16px;width:7px;height:7px;border-radius:50%;background:var(--g-allow);box-shadow:0 0 0 3px rgba(91,203,139,.15)}
.cap-t{font-size:var(--t-14);letter-spacing:.02em;color:var(--g-blue-ink)}
.sec.dark .ne-caps .cap b{color:var(--graphite-ink)}
.sec.dark .ne-caps .cap p{color:var(--graphite-dim)}
/* ---------- the agent panel: launcher, header tools, inference drawer ---------- */
.dock-tools{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.dock-info{font:500 var(--t-14)/1 var(--mono);padding:7px 10px;border-radius:999px;border:1px solid var(--rule);background:none;color:var(--ink-2);cursor:pointer}
.dock-info[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.infer{position:absolute;left:1px;right:1px;top:63px;bottom:1px;z-index:2;overflow:auto;padding:16px;background:var(--surface);border-top:1px solid var(--rule);border-radius:0 0 var(--r-lg) var(--r-lg)}
.infer dl{margin:0;display:grid;gap:10px}
.infer dl div{display:grid;gap:2px}
.infer dt{font-size:var(--t-14);color:var(--ink-3)}
.infer dd{margin:0;font-size:var(--t-14);color:var(--ink);overflow-wrap:anywhere}
.infer-notes{margin-top:16px;display:grid;gap:8px}
.dock .console-head{position:relative}
.sd-letter{margin-top:40px}

/* ---------- 8. system design and delivery ---------- */
.sd-tabs{margin-top:28px}
.sd-panel{margin-top:18px}
.sd-k{font-size:var(--t-14);color:var(--ink-3);margin:0}
.sd-controls{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface);border-bottom:0}
.sd-traffic{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sd-traffic label{font-size:var(--t-14);font-weight:600}
.sd-traffic input{flex:1;min-width:160px;accent-color:var(--blue)}
.sd-traffic output{font-size:var(--t-14);color:var(--ink);min-width:9ch;text-align:right}
.sd-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sd-group .sd-k{min-width:64px}
.sd-chip{font:500 var(--t-14)/1 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.sd-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sd-chip.fail[aria-pressed="true"]{background:var(--deny);border-color:var(--deny);color:var(--on-solid)}
.sd-presets{display:flex;flex-wrap:wrap;gap:6px 18px}
.sd-stage{position:relative;height:clamp(380px,46vw,520px);border:1px solid var(--rule);background:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink-3) 30%,transparent) 1px,transparent 0) 0 0/22px 22px,var(--paper);overflow:hidden}
.sd-stage canvas,.sd-stage svg{position:absolute;inset:0;width:100%;height:100%}
.sd-stage svg line{stroke:color-mix(in srgb,var(--ink-3) 55%,transparent);stroke-width:1.5}
.sd-stage svg line.dash{stroke-dasharray:4 5}
.sd-stage svg line.off{opacity:.2}
#sdNodes{position:absolute;inset:0}
.sd-n{position:absolute;transform:translate(-50%,-50%);display:grid;gap:2px;justify-items:center;text-align:center;min-width:96px;max-width:132px;padding:8px 10px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px -12px rgba(10,12,20,.4);transition:border-color .2s,opacity .2s,box-shadow .2s}
.sd-n b{font-size:var(--t-14);font-weight:600;line-height:1.2}
.sd-n span{font-size:var(--t-14);color:var(--ink-3);line-height:1.25}
.sd-n:hover,.sd-n.sel{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)}
.sd-n.warn{border-color:var(--hold)}.sd-n.bad{border-color:var(--deny);box-shadow:0 0 0 3px color-mix(in srgb,var(--deny) 18%,transparent)}
.sd-n.off{opacity:.38}
.sd-legend{position:absolute;left:12px;bottom:10px;margin:0;padding:6px 10px;list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);font-size:var(--t-14);color:var(--ink-2)}
.sd-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.sd-legend .ok{background:var(--blue)}.sd-legend .hit{background:var(--allow)}.sd-legend .hold{background:var(--hold)}.sd-legend .deg{background:var(--ink-3)}.sd-legend .err{background:var(--deny)}
.sd-stage.no-gl .sd-legend{display:none}
.sd-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--rule);border-top:0;background:var(--surface)}
.sd-m{display:grid;gap:4px;align-content:start;padding:12px 16px;border-left:1px solid var(--rule)}
.sd-m:first-child{border-left:0}
.sd-m span{font-size:var(--t-14);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-m b{font-size:var(--t-18);font-weight:500;color:var(--ink)}
.sd-m.good b{color:var(--allow)}.sd-m.warn b{color:var(--hold)}.sd-m.bad b{color:var(--deny)}
.sd-bottom{display:grid;gap:0;border:1px solid var(--rule);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface)}
@container main (min-width:760px){.sd-bottom{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.sd-log{border-left:1px solid var(--rule)}}
.sd-node,.sd-log{padding:16px 18px;display:grid;gap:8px;align-content:start}
.sd-node h4{margin:0;font-size:var(--t-16)}
.sd-node ul{margin:0;padding-left:1.1em;display:grid;gap:6px;font-size:var(--t-14);color:var(--ink-2);line-height:1.5}
.sd-trade{margin:2px 0 0;font-size:var(--t-14);color:var(--ink-2);line-height:1.5}
.sd-trade b{color:var(--ink)}
.sd-node .rz-more{justify-self:start}
.sd-log ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sd-log li{font-size:var(--t-14);line-height:1.5;color:var(--ink-3)}
.sd-log li.new{color:var(--ink)}
@media (max-width:640px){.sd-stage{height:640px}.sd-n{min-width:84px;max-width:110px;padding:6px 8px}.sd-n span{display:none}.sd-legend{right:12px;border-radius:var(--r-sm)}}
/* delivery */
.pl-controls{display:grid;gap:12px;padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface)}
.pl-sum{display:grid;gap:8px;padding:16px 18px;border:1px solid var(--rule);border-top:0;background:var(--surface)}
.pl-big{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pl-big b{font-size:var(--t-32);font-weight:500;letter-spacing:-.02em}
.pl-big span{color:var(--ink-2)}
.pl-big .pl-vs{margin-left:auto;font-size:var(--t-14);color:var(--ink-3)}
.pl-sum p{margin:0;font-size:var(--t-14);color:var(--ink-2);line-height:1.8}
.pl-crit{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--blue-soft);color:var(--blue-ink);font-size:var(--t-14);line-height:1.5}
.gantt{border:1px solid var(--rule);border-top:0;background:var(--paper);padding:12px 18px 16px;overflow-x:auto}
.g-head,.g-row{display:grid;grid-template-columns:minmax(150px,240px) minmax(420px,1fr);gap:12px;align-items:center}
.g-weeks,.g-track{display:grid;grid-template-columns:repeat(var(--cols),1fr);position:relative}
.g-weeks{height:26px}.g-weeks i{position:absolute;top:0;bottom:0;left:calc(var(--s) / var(--cols) * 100%);width:calc(var(--d) / var(--cols) * 100%);font:400 var(--t-14)/1 var(--mono);color:var(--ink-3);font-style:normal;text-align:left;padding:6px 0 0 4px;border-left:1px solid var(--rule)}
.g-ws{margin-top:10px}
.g-ws>p{margin:0 0 4px;font-size:var(--t-14);font-weight:600;color:var(--ink-3)}
.g-row{min-height:28px}
.g-name{font-size:var(--t-14);color:var(--ink);line-height:1.3}
.g-name em{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-style:normal;font-size:var(--t-14);line-height:1.5;color:var(--hold);border:1px solid color-mix(in srgb,var(--hold) 45%,transparent);cursor:help;vertical-align:1px}
.g-track{height:22px;background:repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px calc(500% / var(--cols)))}
.g-bar{position:absolute;top:4px;bottom:4px;left:calc(var(--s) / var(--cols) * 100%);width:calc(var(--d) / var(--cols) * 100% - 3px);border-radius:var(--r-xs);background:color-mix(in srgb,var(--ink-3) 45%,transparent);transition:left .35s ease,width .35s ease}
.g-bar.crit{background:var(--blue)}
.g-ms{position:absolute;top:50%;left:calc(var(--s) / var(--cols) * 100%);width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--ink);border:2px solid var(--paper);transition:left .35s ease}
.pl-risks{border:1px solid var(--rule);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface);padding:16px 18px;display:grid;gap:8px}
.pl-risks ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.pl-risks li{display:grid;gap:2px;padding-left:12px;border-left:2px solid var(--rule)}
.pl-risks li.on{border-left-color:var(--deny)}
.pl-risks b{font-size:var(--t-14);font-weight:600}
.pl-risks span{font-size:var(--t-14);color:var(--ink-2);line-height:1.5}
@media (prefers-reduced-motion:reduce){.g-bar,.g-ms{transition:none}}
@media (max-width:640px){.g-name{white-space:normal;overflow-wrap:anywhere}.gantt{padding:10px 12px 14px}.g-head,.g-row{grid-template-columns:minmax(0,1fr);gap:4px}.g-head>span{display:none}.g-row{margin-top:6px}.g-weeks i{font-size:var(--t-14);padding-left:2px}}
/* system design, simplified: one row of controls, compact nodes, quiet chrome */
.sd-controls{gap:12px;padding:14px 16px}
.sd-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.sd-row .sd-traffic{flex:1;min-width:240px;max-width:460px}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);justify-self:start}
.seg button{font:500 var(--t-14)/1 var(--sans);padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sd-scen button[aria-pressed="true"]:not([data-scen="normal"]){background:var(--deny);color:var(--on-solid)}
.sd-stage{height:clamp(340px,38vw,440px)}
.sd-stage svg path{fill:none;stroke:color-mix(in srgb,var(--ink-3) 45%,transparent);stroke-width:1.5}
.sd-stage svg path.off{opacity:.15}
.sd-n{min-width:0;max-width:none;padding:8px 14px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-1)}
.sd-n b{font-size:var(--t-14);font-weight:600}
.sd-n span{display:none}
.sd-n.off{opacity:.35;border-style:dashed}
.sd-legend{left:auto;right:12px;top:auto;bottom:10px;padding:5px 10px;gap:4px 10px}
.sd-hint{position:absolute;left:14px;bottom:10px;margin:0;font-size:var(--t-14);color:var(--ink-3)}
.sd-m em{font-style:normal;font-size:var(--t-14);color:var(--ink-2)}
.sd-tgl{margin-top:4px;font-size:var(--t-14);font-weight:500}
@media (max-width:640px){.sd-stage{height:560px}.sd-n{padding:7px 11px}.sd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-m:nth-child(3){border-left:0}.sd-m:nth-child(n+3){border-top:1px solid var(--rule)}.sd-hint{display:none}.sd-row .sd-traffic{max-width:none}}
@media (max-width:640px){.sd-legend{top:auto;bottom:10px;left:12px;right:12px;justify-content:center}}
/* system design: live load on each part, sparklines */
.sd-n{display:grid;gap:1px;padding:7px 14px;border-radius:var(--r-md)}
.sd-n span{display:block;font-size:var(--t-14);line-height:1.2;color:var(--ink-3)}
.sd-n.warn span{color:var(--hold)}.sd-n.bad span{color:var(--deny)}
.sd-sub{font-size:var(--t-14);font-weight:400;color:var(--ink-3)}
.sd-stage svg path.dash{stroke-dasharray:4 5}
.sd-m{position:relative;padding-bottom:30px}
.sd-m svg{position:absolute;left:16px;right:16px;bottom:8px;width:calc(100% - 32px);height:18px;overflow:visible}
.sd-m polyline{fill:none;stroke:color-mix(in srgb,var(--ink-3) 70%,transparent);stroke-width:1.5;vector-effect:non-scaling-stroke}
.sd-m.warn polyline{stroke:var(--hold)}.sd-m.bad polyline{stroke:var(--deny)}.sd-m.good polyline{stroke:var(--allow)}
.sd-m em{line-height:1.35}
.sd-legend .deg{background:var(--ink-3)}
@container main (max-width:880px){.sd-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}.sd-m{border-top:1px solid var(--rule)}.sd-m:nth-child(-n+3){border-top:0}.sd-m:nth-child(4){border-left:0}}
@media (max-width:640px){.sd-stage{height:640px}.sd-n{padding:6px 10px}.sd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sd-m{border-left:1px solid var(--rule);border-top:1px solid var(--rule)}.sd-m:nth-child(odd){border-left:0}.sd-m:nth-child(-n+2){border-top:0}}

/* NestEazy OS: five scenarios in one row, the model node, the three rules */
/* The model is one more component, drawn like the rest (no "AI = purple"): a dashed outline. */
.fnode.kind-model{border-style:dashed;border-color:var(--g-rule-2)}
.fnode.kind-model b::before{background:var(--graphite-ink)}
#flowSvg .packet.deny{fill:var(--g-deny)}
.flow-head h3{max-width:34em}
#flowCanvas{min-height:660px}

/* ---------- 6. the agent eval ---------- */
.ag .term-head{flex-wrap:wrap}
.ag-models{display:inline-flex;gap:4px;margin-left:auto}
.ag-models button{font:500 var(--t-14)/1 var(--mono);padding:6px 9px;border-radius:999px;border:1px solid var(--graphite-rule);background:transparent;color:var(--graphite-dim);cursor:pointer}
.ag-models button[aria-pressed="true"]{background:var(--graphite-2);border-color:var(--blue-2);color:var(--graphite-ink)}
.ag-models button:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
.ag-live{font-style:normal;margin-left:6px;padding:2px 7px;border-radius:999px;background:rgba(91,203,139,.14);color:var(--g-allow)}
.ag-row{display:grid;grid-template-columns:minmax(0,38ch) minmax(0,1fr) 6ch 13ch;font-variant-numeric:tabular-nums;align-items:center;gap:12px;padding:3px 0;color:var(--graphite-ink);opacity:0;transition:opacity .25s}
.ag-row.in{opacity:1}
.ag-row i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--g-allow) var(--w),var(--graphite-rule) var(--w));transition:--w .4s}
.ag-row.weak i{background:linear-gradient(90deg,var(--g-hold) var(--w),var(--graphite-rule) var(--w))}
.ag-row .ag-n{text-align:right;white-space:nowrap}.ag-row .ag-k{color:var(--graphite-dim);text-align:right;white-space:nowrap}
.ag-fails{flex-basis:100%;margin-top:6px}
.ag-fails summary{cursor:pointer;color:var(--graphite-dim)}
.ag-fails ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.ag-fails li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 10px;font-family:var(--sans);font-size:var(--t-14);color:var(--graphite-ink)}
.ag-fails li b{font:500 var(--t-14)/1.6 var(--mono);color:var(--g-hold)}
.ag-fails li span{grid-column:2;color:var(--graphite-dim)}
.ag-caught{margin-top:20px}
.ag-h{margin:0 0 10px;font-size:var(--t-16);font-weight:600}
.ag-caught ol{margin:0;padding:0;list-style:none;display:grid;gap:8px;counter-reset:cg}
.ag-caught li{counter-increment:cg;display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-top:1px solid var(--rule);font-size:var(--t-14);line-height:1.5}
.ag-caught li::before{content:counter(cg,decimal-leading-zero);font:500 var(--t-14)/1.6 var(--mono);color:var(--ink-3)}
.ag-caught li span{color:var(--ink-2)}
.ag-caught li b{font-weight:500;color:var(--ink)}
.ag-caught li b::before{content:"→ ";color:var(--blue-ink)}
.fitcal{margin-top:16px}.fitcal .term-body{min-height:0}
.fit-line{margin:0;font-family:var(--sans);font-size:var(--t-16);line-height:1.6;color:var(--graphite-ink)}
.fit-line b{color:var(--g-allow);font-weight:600}
.fit-note{margin:8px 0 0;font-family:var(--sans);font-size:var(--t-14);color:var(--graphite-dim)}
#evalBody{min-height:0}
@media (max-width:720px){.ag-row{grid-template-columns:minmax(0,1fr) 50px;row-gap:4px}.ag-row i{grid-column:1/-1;grid-row:2}.ag-row .ag-k{display:none}.ag-caught li{grid-template-columns:24px minmax(0,1fr)}.ag-caught li b{grid-column:2}.ag-models{margin-left:0}}

/* ---------- 7. the job agent's funnel ---------- */


/* ---------- 6. abuse tests ---------- */
.sh-rows{display:grid;gap:2px}
.sh-row{display:grid;grid-template-columns:52px minmax(0,1fr) minmax(0,1.2fr);gap:12px;padding:7px 0;border-top:1px dashed var(--graphite-rule);color:var(--graphite-ink)}
.sh-row:first-child{border-top:0}
.sh-row small{display:block;color:var(--graphite-dim);font-size:var(--t-14);line-height:1.45;margin-top:2px}
.sh-st{font-weight:600}.sh-st.good{color:var(--g-allow)}.sh-st.bad{color:var(--g-deny)}
.sh .rt-pitch a{color:var(--blue-2)}
@media (max-width:720px){.sh-row{grid-template-columns:44px minmax(0,1fr)}.sh-o{grid-column:2}}
/* chapter 6: four graded things as KPI tabs */
.evx{margin-top:28px}
.evx-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.evx-tabs button{position:relative;display:grid;gap:6px;align-content:start;text-align:left;padding:16px 16px 18px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;transition:border-color .2s,box-shadow .2s,transform .2s}
.evx-tabs button:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--rule))}
.evx-tabs button[aria-selected="true"]{border-color:var(--blue)}
.evx-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-11px;width:12px;height:12px;background:var(--surface);border-right:1px solid var(--blue);border-bottom:1px solid var(--blue);transform:translateX(-50%) rotate(45deg)}
.evx-tabs button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.evx-l{font:500 var(--t-14)/1 var(--mono);color:var(--ink-3)}
.evx-v{font:600 var(--t-32)/1.05 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.evx-s{font-size:var(--t-14);line-height:1.4;color:var(--ink-2)}
.evx-panel .term{margin-top:20px}
.ag-more{margin-top:4px}
.ag-more summary,.rt-more summary{cursor:pointer;font-size:var(--t-14);color:var(--blue-ink);padding:8px 0;list-style:none}
.ag-more summary::-webkit-details-marker,.rt-more summary::-webkit-details-marker{display:none}
.ag-more summary::before,.rt-more summary::before{content:"+ ";font-family:var(--mono)}
.ag-more[open] summary::before,.rt-more[open] summary::before{content:"− "}
.rt-more{margin:16px 0 0;padding-top:8px;border-top:1px dashed var(--graphite-rule)}
.rt-more summary{color:var(--graphite-dim)}
.sh .sh-o{color:var(--graphite-ink)}
@media (max-width:900px){.evx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.evx-tabs button[aria-selected="true"]::after{display:none}.evx-v{font-size:var(--t-24)}}

/* chapter 8: the job agent */
/* The twist speaks in the site's own label voice: lowercase mono on the chapter line, in the agent's blue. */
.ja-eyebrow{display:inline;color:var(--g-blue-ink)}
.ja{position:relative;margin-top:28px;border:1px solid var(--graphite-rule);border-radius:var(--r-lg);background:var(--graphite-2);overflow:hidden}
.ja-top{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--graphite-rule);font-size:var(--t-14);color:var(--graphite-dim)}
.ja-live{display:inline-flex;align-items:center;gap:8px;color:var(--g-allow-ink)}
.ja-live i{width:8px;height:8px;border-radius:50%;background:var(--g-allow);box-shadow:none}
.ja-live.off{color:var(--g-ink-2)}.ja-live.off i{background:var(--g-dim-2)}
.ja-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border-top:1px solid var(--graphite-rule)}
/* The inbox sample and the policy sit on the panel itself, split by a hairline: no card or box inside the panel. */
.ja-grid .policy{margin:0;align-self:stretch;border:0;border-left:1px solid var(--graphite-rule);border-radius:0;background:none}
/* chapter 9: how it decides. Sample postings pass a scan line, their checks resolve in order and each lands where
   the policy says; the policy line it lands on lights. Colours follow the guide: blue reads, green passed, amber
   waits for me, red blocked, gray neutral. */
.scan{display:grid;gap:12px;padding:22px 22px 8px}
.scan-list{--row:68px;list-style:none;margin:0;padding:0;height:calc(var(--row) * 4);overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.sc-row{position:relative;display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;align-items:center;gap:8px 18px;padding:11px 12px;border-bottom:1px solid var(--graphite-rule);overflow:hidden}
.sc-job{display:grid;min-width:0}
.sc-job b{font-size:var(--t-16);font-weight:600;line-height:1.4;color:var(--graphite-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-job small{font-size:var(--t-14);line-height:1.4;color:var(--graphite-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-checks{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
/* Checks are statuses, so they take the site's one status pill: a tint of their colour, no border. */
.sc-checks span{--c:var(--g-dim-2);display:inline-flex;align-items:center;gap:7px;padding:3px 10px;border-radius:999px;font-size:var(--t-14);line-height:1.4;color:var(--g-ink-2);white-space:nowrap;background:color-mix(in srgb,var(--c) 14%,transparent)}
.sc-checks span::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c)}
.sc-checks .ok{--c:var(--g-allow)}
.sc-row[data-out="me"] .stop{--c:var(--g-hold);color:var(--g-hold)}
.sc-checks .deny{--c:var(--g-deny);color:var(--g-deny)}
.sc-out{--oc:var(--g-ink-2);justify-self:end;padding:4px 11px;border-radius:999px;font-size:var(--t-14);font-weight:500;line-height:1.4;white-space:nowrap;color:var(--oc);background:color-mix(in srgb,var(--oc) 13%,transparent)}
.sc-row[data-out="rule"] .sc-out{--oc:var(--g-allow-ink)}
.sc-row[data-out="me"] .sc-out{--oc:var(--g-hold)}
/* A new posting slides in at the top, the scan line crosses it, then its checks and its outcome resolve in turn. */
.sc-row.in{animation:scIn .4s ease-out both}
.sc-row.in::after{content:"";position:absolute;top:0;bottom:0;left:-72px;width:72px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--g-blue) 18%,transparent) 80%,var(--g-blue) calc(100% - 2px),transparent);pointer-events:none;animation:scBeam 1s cubic-bezier(.45,0,.25,1) .15s both}
.sc-row.in .sc-checks span{animation:scPop .3s ease-out both;animation-delay:calc(.6s + var(--d) * .32s)}
.sc-row.in .sc-out{animation:scPop .3s ease-out both;animation-delay:calc(.7s + var(--n) * .32s)}
@keyframes scIn{from{max-height:0;opacity:0;padding-block:0}to{max-height:9rem;opacity:1}}
@keyframes scBeam{from{left:-72px}to{left:100%}}
@keyframes scPop{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.policy dl>div{transition:background-color .45s}
.policy dl>div.hit{background:color-mix(in srgb,var(--pe) 12%,transparent)}
@container main (max-width:760px){
  .scan{padding:18px 16px 6px}
  .scan-list{--row:126px;height:calc(var(--row) * 3)}
  .sc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"job out" "checks checks";padding:12px 4px}
  .sc-job{grid-area:job}.sc-checks{grid-area:checks}.sc-out{grid-area:out;align-self:start}
}
/* explainers: one small card for any [data-tip] */
.tip{position:absolute;z-index:60;max-width:min(320px,calc(100vw - 24px));padding:12px 14px;border-radius:var(--r-sm);background:var(--graphite);color:var(--graphite-ink);border:1px solid var(--g-rule-2);box-shadow:var(--shadow-2);font-size:var(--t-14);line-height:1.5;pointer-events:none;animation:cardIn .15s ease-out}
.tip b{display:block;font-weight:600;margin-bottom:4px}
.tip p{margin:0;color:var(--g-ink-2)}
.tip code{display:block;margin-top:8px;font:400 var(--t-14)/1.45 var(--mono);color:var(--g-allow-ink)}
.ja-inbox{padding:22px;display:grid;align-content:start;gap:10px}
.ja-k{margin:0;font-size:var(--t-14);font-weight:600;color:var(--graphite-ink);display:flex;align-items:center;gap:8px}
.ja-sample{font-weight:500;font-size:var(--t-14);padding:3px 7px;border-radius:999px;color:var(--graphite-dim);border:1px solid var(--graphite-rule)}
.ja-card{padding:0;display:grid;gap:10px}
.ja-card.skipped{opacity:.75}
.jc-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline}
.jc-head b{color:var(--graphite-ink);font-size:var(--t-16)}
.jc-fit{font-size:var(--t-14);color:var(--g-allow-ink);background:rgba(91,203,139,.12);padding:3px 8px;border-radius:999px}
.jc-co{margin:-4px 0 0;font-size:var(--t-14);color:var(--graphite-dim)}
.jc-checks{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.jc-checks li{position:relative;padding-left:22px;font-size:var(--t-14);color:var(--g-ink-2);line-height:1.45}
.jc-checks li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--g-allow);font-weight:700}
.jc-why{margin:0;font-size:var(--t-14);color:var(--g-hold)}
.jc-act{display:flex;flex-wrap:wrap;gap:8px}
.jc-log{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:var(--t-14);color:var(--graphite-dim)}
.jc-log:empty{display:none}
.jc-log li{animation:cardIn .25s ease-out}
.jc-log li::before{content:"→ ";color:var(--g-blue)}
.ja-card.done .jc-log li:last-child{color:var(--g-allow-ink)}
.ja-card.decided .jc-why{color:var(--graphite-dim)}
.ja-dial{margin-top:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ap-pitch{margin:20px 0 0;font-size:var(--t-18);color:var(--graphite-ink);font-weight:500}
@container main (max-width:880px){.ja-grid{grid-template-columns:minmax(0,1fr)}.ja-grid .policy{margin:0;border-left:0;border-top:1px solid var(--graphite-rule)}.ja-dial{grid-template-columns:minmax(0,1fr)}.ja-priv{margin-left:0}}
@media (prefers-reduced-motion:reduce){.ja-live i{animation:none}}

/* The two-row header is taller, so the hero title starts below it. */
@media (max-width:1240px){.hero-copy{top:clamp(122px,14vh,150px)}}
/* chapter 4: the journey as a live line. Done steps are solid; the one in progress runs dashed with a pulse. */
.journey li{border-top:0}
.jtrack{position:absolute;top:-1px;left:0;right:0;height:2px;border-radius:2px;background:var(--graphite-rule)}
.journey li.done .jtrack{background:var(--g-blue)}
@container main (min-width:760px){.journey li.done .jtrack{right:-28px}}
.journey li.now .jtrack{background:repeating-linear-gradient(90deg,var(--g-blue) 0 10px,transparent 10px 18px);background-size:36px 2px;opacity:.85;animation:jDash 1.1s linear 3}
@keyframes jDash{to{background-position:36px 0}}
.journey li::before{z-index:1;top:-6px;width:12px;height:12px;left:-1px}
.journey li.done::before{background:var(--g-blue);box-shadow:0 0 0 3px var(--graphite)}
.journey li.now::before{background:var(--g-blue);box-shadow:0 0 0 3px var(--graphite);animation:jPulse 1.8s ease-out 3}
@keyframes jPulse{0%{box-shadow:0 0 0 3px var(--graphite),0 0 0 3px rgba(68,147,248,.55)}100%{box-shadow:0 0 0 3px var(--graphite),0 0 0 14px rgba(68,147,248,0)}}
.journey li.now .jstep::after{content:" · in progress";color:var(--graphite-dim);font-weight:400}

/* chapter 4: the six AI features as a carousel; the card in the middle is in focus */
.feat{position:relative;list-style:none;margin:0;padding:4px 0 12px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.feat::-webkit-scrollbar{display:none}
.feat:focus-visible .cap.on{outline:2px solid var(--g-blue);outline-offset:2px}
.feat .cap{position:relative;flex:0 0 min(340px,82vw);scroll-snap-align:center;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-content:start;padding:16px 18px 18px;
  border:1px solid var(--graphite-rule);border-radius:var(--r-md);background:var(--graphite-2);cursor:pointer;opacity:.72;transform:scale(.95);transition:opacity .45s,transform .45s,border-color .45s}
.feat .cap.on{opacity:1;transform:none;border-color:var(--g-rule-2)}
.feat .cap::before{content:"";grid-row:1;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--g-allow)}
.feat .cap b{grid-column:2;color:var(--graphite-ink);font-weight:600}
.feat .cap .bd-t{grid-column:2;font-size:var(--t-14);color:var(--g-blue-ink)}
.feat .cap p{grid-column:2;margin:6px 0 0;font-size:var(--t-14);line-height:1.5;color:var(--g-ink-2)}
@media (prefers-reduced-motion:reduce){.feat .cap{transition:none}}
.ne-ai-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ne-ai-head .ne-ai-h{margin:0;color:var(--graphite-ink);font-weight:500}
.ne-ai-nav{display:flex;align-items:center;gap:6px}
.ne-count{font-size:var(--t-14);color:var(--graphite-dim);margin-right:6px;font-variant-numeric:tabular-nums}
.ne-ai-nav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--graphite-rule);background:transparent;color:var(--graphite-ink);cursor:pointer;font:inherit}
.ne-ai-nav button:hover{background:var(--graphite-2)}
.ne-ai-nav button:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px}
.sec.dark .ne-caps{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 6px;scrollbar-width:none}
.sec.dark .ne-caps::-webkit-scrollbar{display:none}
.sec.dark .ne-caps:focus-visible{outline:2px solid var(--g-blue);outline-offset:4px;border-radius:var(--r-md)}
.sec.dark .ne-caps .cap{flex:0 0 min(280px,80%);scroll-snap-align:start;cursor:pointer;background:var(--graphite-2);border:1px solid var(--graphite-rule);border-radius:var(--r-md);padding:16px 18px 18px;gap:6px;transition:border-color .25s}
.sec.dark .ne-caps .cap::after{content:none}
.sec.dark .ne-caps .cap:hover{transform:none;border-color:var(--g-rule-2)}
.sec.dark .ne-caps .cap.on{border-color:var(--g-blue)}
.sec.dark .ne-caps .cap b{font-size:var(--t-16);color:var(--graphite-ink)}
.sec.dark .ne-caps .cap p{color:var(--g-ink-2)}
.cap-t{font:500 var(--t-14)/1.3 var(--sans);letter-spacing:0;color:var(--graphite-dim)}
.sec.dark .ne-caps .cap.on .cap-t{color:var(--g-blue-ink)}
.next-sc{align-self:flex-start;margin-top:10px;font:500 var(--t-14)/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid var(--g-blue);background:var(--g-sel);color:var(--graphite-ink);cursor:pointer}
.next-sc:hover{background:var(--g-sel-hover)}
.next-sc:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.journey li.now .jtrack,.journey li.now::before,.jtabs button::before{animation:none}}

/* ---------- finale: everything the page preached, then the ways to reach out ---------- */
.finale{margin-top:clamp(64px,8vw,120px);padding-top:40px;border-top:1px solid var(--graphite-rule);display:grid;gap:20px}
.fin-ok{color:var(--g-allow);font-weight:600}
.fin-ch{font-size:var(--t-14);color:var(--graphite-dim)}
.fin-you{color:var(--graphite-dim)}
.fin-you .fin-ok{color:var(--graphite-dim);font-size:var(--t-14)}
.finale-line{margin:12px 0 0;font-size:clamp(var(--t-24),2.4vw,var(--t-32));line-height:1.25;letter-spacing:-.02em;font-weight:600;color:var(--graphite-ink);max-width:24ch}
.fin-letter{margin-top:4px}
.fin-letter p{color:var(--graphite-ink)}
.fin-ask{display:flex;align-items:center;gap:8px;max-width:640px;margin-top:8px;padding:6px 6px 6px 18px;border:1px solid var(--graphite-rule);border-radius:999px;background:color-mix(in srgb,var(--graphite-ink) 6%,transparent);transition:border-color .2s}
.fin-ask:focus-within{border-color:var(--graphite-dim)}
.fin-ask input{flex:1;min-width:0;border:0;background:none;color:var(--graphite-ink);font:400 var(--t-16)/1.4 var(--sans);padding:10px 0;outline:none}
.fin-ask input::placeholder{color:var(--graphite-dim)}
.fin-send{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;cursor:pointer}
.fin-send svg{width:18px;height:18px}
.fin-send:hover{background:var(--blue-2)}
.fin-chips{display:flex;flex-wrap:wrap;gap:8px}
.fin-chips button{font:400 var(--t-14)/1 var(--sans);padding:9px 14px;border-radius:999px;border:1px solid var(--graphite-rule);background:none;color:var(--graphite-ink);cursor:pointer;transition:border-color .2s}
.fin-chips button:hover{border-color:var(--graphite-dim)}
.fin-alt{margin:6px 0 0;font-size:var(--t-14);color:var(--graphite-dim);overflow-wrap:anywhere}
.fin-cmd{color:var(--graphite-ink)}
.fin-cmd{font:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--graphite-rule);text-underline-offset:3px}
.fin-cmd:hover{text-decoration-color:var(--graphite-dim)}
.sg-actions{display:flex;flex-wrap:wrap;gap:8px}
.ag-src{margin:14px 0 0;font-size:var(--t-14)}.ag-src a{color:var(--ink-2)}.ag-src a:hover{color:var(--ink)}

/* Chapter 9's plot twist: three cards from earlier chapters flip, in turn, to show their second job. */
.ja-twist{list-style:none;margin:22px 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;perspective:1100px}
.ja-twist li{min-width:0;display:grid}   /* each card stretches to the row, so the three match */
.tw-card{position:relative;display:block;width:100%;min-height:132px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.7,.2,1);transform:rotateY(0)}
.tw-card:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px;border-radius:var(--r-md)}
.tw-face{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--graphite-rule);background:var(--graphite-2);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tw-face b{font-size:var(--t-16);color:var(--graphite-ink);font-weight:600}
.tw-face small{font-size:var(--t-14);line-height:1.4;color:var(--graphite-dim)}
.tw-k{font-size:var(--t-14);color:var(--graphite-dim)}
/* The flip does the work: a solid back face, no sheen or glow. */
.tw-b{transform:rotateY(180deg);border-color:var(--g-sel-rule);background:var(--g-sel)}
.tw-b .tw-k{color:var(--g-blue-ink)}
.tw-b small{color:var(--g-ink-2)}
.tw-card[aria-pressed="true"]{transform:rotateY(180deg)}
.ja-twist.on .tw-card{animation:twFlip .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.45s + var(--i) * .32s)}
.ja-twist.on .tw-card[aria-pressed="false"]{animation:none}
@keyframes twFlip{0%{transform:rotateY(0)}60%{transform:rotateY(196deg)}100%{transform:rotateY(180deg)}}
.ja-eyebrow.scr{font-variant-numeric:tabular-nums}
@media (min-width:721px) and (max-width:1020px){.tw-card{min-height:156px}}
@media (max-width:720px){.ja-twist{grid-template-columns:1fr}.tw-card{min-height:112px}}
@media (prefers-reduced-motion:reduce){.tw-card,.ja-twist.on .tw-card{transition:none;animation:none}.ja-twist.on .tw-b::after{animation:none;display:none}}
/* Phone: the agent button is the avatar alone (after the base .dock-btn padding rule, so it wins). */
@media (max-width:600px){.dock-btn{padding:6px}.dock-btn .dock-btn-l{display:none}.dock-btn .avatar{width:40px;height:40px}}
/* Touch screens: links and small buttons get a 44px target (WCAG 2.5.8 recommends 24, Apple and Google 44). */
@media (pointer:coarse){
  .foot a{display:inline-flex;align-items:center;min-height:44px}
  .btn.small,.vchips summary,.evx-tabs button,.sg-tabs button,.flow-tabs button{min-height:44px}
}
/* Phone: the chat is a full-height sheet, so nothing on the page behind it shows or takes taps. */
/* The eval replay reserves its finished height, so its last lines don't push the chapters below. */
#evalBody{min-height:500px}
@media (max-width:600px){#evalBody{min-height:660px}}
/* Dark theme: the graphite chapters keep their rhythm against the page, with edge rules and the dot grid the
   flow canvas already uses (graphite on paper was 1.04:1 and the chapters ran together). */
:root[data-theme="dark"] .sec.dark{box-shadow:inset 0 1px var(--graphite-rule),inset 0 -1px var(--graphite-rule);background-image:radial-gradient(circle,color-mix(in srgb,var(--graphite-rule) 80%,transparent) 1px,transparent 1.3px);background-size:22px 22px}
/* Motion only where something is running; anything else plays a set number of times. The pause control in the
   nav stops all of it (WCAG 2.2.2) and is remembered. */
html.still *,html.still *::before,html.still *::after{animation-play-state:paused!important;transition:none!important}
.still-btn{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--rule);border-radius:50%;background:none;color:var(--ink-2);cursor:pointer}
.still-btn:hover{color:var(--ink)}.still-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.nav.on-dark .still-btn{border-color:var(--graphite-rule);color:var(--graphite-dim)}
/* The standard pause icon (two bars), and play (a triangle) once paused, so nobody has to guess what it does. */
.still-btn{position:relative}
.still-btn i{display:block;width:10px;height:12px;box-sizing:border-box;border-left:3px solid currentColor;border-right:3px solid currentColor;border-radius:1px}
html.still .still-btn i{width:0;height:0;margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;border-radius:0}
/* Its label on hover or keyboard focus: "Pause animations" or "Play animations". */
.still-btn::after{content:attr(aria-label);position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-3px);padding:4px 9px;border-radius:var(--r-xs);background:var(--ink);color:var(--paper);font:500 var(--t-14)/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
@media (hover:hover){.still-btn:hover::after{opacity:1;transform:translate(-50%,0)}}
.still-btn:focus-visible::after{opacity:1;transform:translate(-50%,0)}
/* Rishabh's own voice: rare on purpose, so wherever the serif appears a person is speaking, not the agent. */
.finale-line{font:400 var(--t-14)/1.5 var(--mono);letter-spacing:0;color:var(--graphite-dim);max-width:none}
.ps-letter p{font-family:var(--voice);font-size:var(--t-20);line-height:1.55;letter-spacing:-.003em}
.ps-letter p.ps-sign{font-family:var(--voice);font-style:italic;font-weight:400;font-size:var(--t-24)}
.sg-foot{font-family:var(--voice);font-size:var(--t-18)}
.sg-foot a{font:inherit;font-weight:500}   /* the link reads in the sentence's own voice and size */
::selection{background:var(--blue-soft);color:var(--ink)}
/* Chapter 9: what the agent may do, shown as its policy. */
.policy{margin-top:28px;border:1px solid var(--graphite-rule);border-radius:var(--r-lg);background:var(--graphite-2);overflow:hidden}
.policy-h{display:flex;align-items:center;gap:10px;margin:0;padding:11px 16px;border-bottom:1px solid var(--graphite-rule);font-size:var(--t-14);color:var(--graphite-dim)}
.policy dl{margin:0;padding:0}
.policy dl>div{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:16px;padding:12px 16px;font-size:var(--t-14);line-height:1.55;box-shadow:inset 3px 0 0 var(--pe)}
.policy dl>div+div{border-top:1px solid var(--graphite-rule)}
.policy .auto{--pe:var(--g-blue)}.policy .rule{--pe:var(--g-allow)}.policy .me{--pe:var(--g-hold)}
.policy dt{font-weight:500}.policy dd{margin:0;color:var(--g-ink-2);font-family:var(--sans);font-size:var(--t-16)}
.policy .auto dt{color:var(--g-blue-ink)}.policy .rule dt{color:var(--g-allow-ink)}.policy .me dt{color:var(--g-hold)}
@media (max-width:600px){.policy dl>div{grid-template-columns:minmax(0,1fr);gap:4px}}
/* Each chapter's label carries the hero promise it proves; it links back to the hero. */
/* What he'd bring: one line per chapter, in his own voice. */
.bring{margin:40px 0 0;max-width:60ch;font-family:var(--voice);font-size:var(--t-20);line-height:1.45;color:var(--ink)}
.bring-k{display:block;margin-bottom:6px;font-size:var(--t-14);color:var(--ink-3);letter-spacing:0}
.sec.dark .bring{color:var(--graphite-ink)}.sec.dark .bring-k{color:var(--graphite-dim)}
/* Chapter 4: the live features as a production board (all six at once; the status dot is "in production"). */
.board{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);overflow:hidden;background:var(--graphite-rule)}
.board li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:2px;align-content:start;padding:14px 16px;background:var(--graphite-2)}
.board li::before{content:"";grid-row:1;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--g-allow)}
.board b{grid-column:2;color:var(--graphite-ink);font-weight:600}
.board .bd-t{grid-column:2;font-size:var(--t-14);color:var(--g-blue-ink)}
.board p{grid-column:2;margin:4px 0 0;font-size:var(--t-14);line-height:1.5;color:var(--g-ink-2)}
/* Phone: the NestEazy flow as a vertical pipeline in run order, on a dotted rail whose taps light with the
   step that's running; the trace comes after it, so the nodes are seen first. */
.flow-panel.stacked .flow-canvas{order:1}.flow-panel.stacked .trace{order:2;height:auto;min-height:96px;max-height:220px}
.flow-panel.stacked #flowNodes{position:relative;grid-template-columns:repeat(2,minmax(0,1fr));padding-left:20px}
.flow-panel.stacked #flowNodes::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:radial-gradient(circle,var(--g-rule-2) 1px,transparent 1.3px) 0 0/2px 6px}
.flow-panel.stacked .fnode{position:relative}
.flow-panel.stacked .fnode::before{content:"";position:absolute;left:-18px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--graphite-2);border:1px solid var(--g-rule-2);transition:background .25s,border-color .25s}
.flow-panel.stacked .fnode.hot::before{background:var(--g-blue);border-color:var(--g-blue)}
.flow-panel.stacked .fnode.hold::before{background:var(--g-hold);border-color:var(--g-hold)}
.flow-panel.stacked .fnode.ok::before{background:var(--g-allow);border-color:var(--g-allow)}
.flow-panel.stacked .fnode.deny::before{background:var(--g-deny);border-color:var(--g-deny)}
.flow-panel.stacked .fnode:is(.kind-orch,.kind-model,.kind-mem,.kind-gate,.kind-human,.kind-sys){grid-column:1/-1}
/* Three tiers: the last one spans the row instead of leaving a gap beside it. */
.flow-panel.stacked .fnode[data-id="decide"]{grid-column:1/-1}
/* Two-up rows (the inputs, the agents): only the left one sits on the rail. Agents are children 6 to 11 in the DOM, so the odd ones land in the right column. */
.flow-panel.stacked .fnode.kind-agent:nth-child(odd)::before,.flow-panel.stacked .fnode.kind-io:nth-child(2)::before{display:none}
.flow-panel.stacked .fnode.kind-io{order:1}.flow-panel.stacked .fnode.kind-orch{order:2}.flow-panel.stacked .fnode.kind-model{order:3}.flow-panel.stacked .fnode.kind-agent{order:4}.flow-panel.stacked .fnode.kind-mem{order:5}.flow-panel.stacked .fnode.kind-gate{order:6}.flow-panel.stacked .fnode.kind-human{order:7}.flow-panel.stacked .fnode.kind-sys{order:8}
/* Phone: role presets as a row of chips, and live-feed items in two rows (tag and time, then the text). */
@media (max-width:600px){
  .live-list li{grid-template-columns:auto minmax(0,1fr);row-gap:4px}.live-list li>:not(.k):not(time){grid-column:1/-1;order:2}.live-list time{order:0;justify-self:end}
}
@media (max-width:640px),(max-height:500px){.nav{transition:transform .28s cubic-bezier(.3,.7,.2,1)}.nav.tucked{transform:translateY(calc(-1 * var(--tuck,0px)))}}
.fig-open{cursor:zoom-in}.fig-open img{display:block;width:100%;height:auto}
/* The bar a recruiter sees when the resume's link opens the site on their posting. */
.for-bar{position:fixed;left:50%;bottom:20px;z-index:70;transform:translateX(-50%);display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;max-width:min(760px,calc(100vw - 32px));padding:12px 14px 12px 18px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-2)}
.for-bar p{margin:0;font-size:var(--t-16);color:var(--ink)}.for-bar p .mono{font-size:var(--t-14);color:var(--ink-3)}
.for-bar>div{display:flex;align-items:center;gap:8px}
.for-x{width:36px;height:36px;border:0;border-radius:50%;background:none;color:var(--ink-3);font-size:var(--t-20);cursor:pointer}.for-x:hover{color:var(--ink)}
@media (max-width:600px){.for-bar{left:12px;right:12px;bottom:12px;transform:none;max-width:none;padding:12px}.for-bar>div{width:100%}.for-bar .btn{flex:1;white-space:nowrap}}
body:has(.for-bar) .dock-btn{bottom:96px}@media (min-width:601px){body:has(.for-bar) .dock-btn{bottom:20px}}


.sd-m{cursor:help}.sd-m:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* chapter 8: the hint and legend sit in a strip under the diagram, so they never cover a part */
.sd-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:8px 14px;border:1px solid var(--rule);border-top:0;background:var(--surface)}
.sd-foot .sd-hint,.sd-foot .sd-legend{position:static;inset:auto;margin:0;padding:0;background:none;border-radius:0}
.sd-foot .sd-legend{justify-content:flex-end}
@media (max-width:640px){.sd-foot .sd-hint{display:block}.sd-foot .sd-legend{justify-content:flex-start}}
.sd-stage.tall{height:600px}
/* Touch: every tap target reaches 24x24 (WCAG 2.5.8). Vertical padding on inline links grows the touch area
   without moving the text; checkboxes and sliders get larger hit areas. */
@media (pointer:coarse), (max-width:600px){
  .brand{padding-block:4px}
  dd a, .contact a, .sg-foot a, .ne-link, li .t a, .lg-t, .rz-more{padding-block:4px}
  .connect-more>summary, .rz-paste>summary{padding-block:4px}
  input[type=checkbox]{width:20px;height:20px}
  input[type=range]{height:28px}
}
/* Flip cards size to their longer face: both faces share one grid cell instead of a fixed height (a line was clipped
   on phones). */
.tw-card{display:grid}
.tw-face{position:relative;inset:auto;grid-area:1/1}
/* Garm stats: the number above its explanation on phones, so the text isn't squeezed into a narrow column. */
@container main (max-width:520px){.garm-stats div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* chapter 4: the three rules as a relay, model to code to person, in the policy colours chapter 9 uses */
.flow-rules{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.flow-rules li{position:relative;display:grid;gap:4px;align-content:start;padding:14px 16px 16px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);background:var(--graphite-2)}
/* The colour edge is a straight bar inset from the rounded corners (an inset shadow curled round them). */
.flow-rules li::before{content:"";position:absolute;left:-1px;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:var(--fr)}
.flow-rules .fr-model{--fr:var(--g-blue);--frk:var(--g-blue-ink)}.flow-rules .fr-code{--fr:var(--g-allow);--frk:var(--g-allow-ink)}.flow-rules .fr-you{--fr:var(--g-hold);--frk:var(--g-hold)}
.flow-rules .fr-k{font-size:var(--t-14);color:var(--frk);letter-spacing:.02em}
.flow-rules b{font-size:var(--t-16);font-weight:600;line-height:1.35;color:var(--graphite-ink)}
.flow-rules .fr-p{font-size:var(--t-14);line-height:1.5;color:var(--g-ink-2)}
.flow-rules li:not(:last-child)::after{content:"→";position:absolute;top:50%;right:-17px;transform:translateY(-50%);width:14px;text-align:center;font:500 var(--t-16)/1 var(--mono);color:var(--graphite-dim)}
@media (max-width:720px){.flow-rules{grid-template-columns:minmax(0,1fr);gap:18px}.flow-rules li:not(:last-child)::after{content:"↓";top:auto;bottom:-17px;right:auto;left:22px;transform:none}}

/* chapter 8 delivery: bars coloured by kind of work, the critical chain outlined, and when each phase runs */
.g-bar.k-decide{background:color-mix(in srgb,var(--ink-3) 55%,transparent)}
.g-bar.k-build{background:color-mix(in srgb,var(--blue) 45%,transparent)}
.g-bar.k-verify{background:color-mix(in srgb,var(--allow) 55%,transparent)}
.g-bar.k-calendar{background:color-mix(in srgb,var(--hold) 60%,transparent)}
.g-bar.crit{box-shadow:inset 0 0 0 2px var(--ink);filter:saturate(1.4)}

/* Chapter 4 scenarios: five joined tabs in one row at every width above phones (phones get the chip row further
   down). Nothing scrolls or clips: narrower containers drop the description and set the title at 14px, so every
   title fits in two lines. The chosen tab is filled; a played one keeps a small green tick (done, in the colour guide). */
.flow-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--graphite-rule)}
.flow-tabs button{position:relative;display:grid;gap:4px;align-content:start;min-width:0;text-align:left;padding:14px 16px 16px;border:0;border-right:1px solid var(--graphite-rule);background:transparent;color:var(--graphite-dim);cursor:pointer;font:inherit;transition:background .15s,color .15s}
.flow-tabs button:last-child{border-right:0}
.flow-tabs button b{font-size:var(--t-16);font-weight:500;line-height:1.35;color:var(--graphite-ink)}
.flow-tabs button small{font-size:var(--t-14);line-height:1.45;color:var(--graphite-dim)}
.flow-tabs button:hover{background:var(--graphite-3)}
.flow-tabs button[aria-pressed="true"]{background:var(--g-sel)}
.flow-tabs button:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px;border-radius:0}
.sc-n{display:flex;align-items:center;gap:8px;font-size:var(--t-14);color:var(--graphite-dim);letter-spacing:.04em}
.flow-tabs button[aria-pressed="true"] .sc-n{color:var(--g-blue-ink)}
.flow-tabs button.done .sc-n::after{content:"";width:9px;height:5px;margin-top:-3px;border-left:1.5px solid var(--g-allow-ink);border-bottom:1.5px solid var(--g-allow-ink);transform:rotate(-45deg)}
@container main (max-width:859px){.flow-tabs button{padding:12px 12px 14px}.flow-tabs button b{font-size:var(--t-14);line-height:1.4}.flow-tabs button small{display:none}}
/* Large monitors (27 to 34 inch): the page grows with the screen instead of sitting in a 1280px block with wide
   empty margins. Type is in rem, so one root size scales the whole scale; the column and sidebar widen with it. */
@media (min-width:1800px){:root{--maxw:1440px}html{font-size:106.25%}.sec{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:5rem}.fnode{max-width:200px}}
@media (min-width:2300px){:root{--maxw:1600px}html{font-size:112.5%}.fnode{max-width:220px}}
@media (min-width:3000px){:root{--maxw:1760px}html{font-size:118.75%}}
/* Diagram boxes size to their text, not to the space left before the canvas edge (right-hand boxes wrapped to four
   lines on wide screens). */
.flow-panel:not(.stacked) .fnode{width:max-content}
@media (min-width:1800px){.insp-body{grid-template-columns:17rem minmax(0,1fr)}}
.flow-panel:not(.stacked) .fnode.kind-gate{max-width:15rem}
/* Phones: card tabs become one sideways-scrolling row (subtitles wrapped to three lines), and the cache table's
   headers stay on one line inside its scroll box. */
@media (max-width:600px){
  .card-tabs{display:flex;overflow-x:auto;scrollbar-width:none}
  .card-tabs::-webkit-scrollbar{display:none}
  .card-tabs button{flex:1 0 auto;white-space:nowrap}
  .cache-table th{white-space:nowrap}
}
/* Phones: the role list is one sideways-scrolling row, each role on one line (long names wrapped to four lines). */
@media (max-width:600px){
  .insp-rail{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;gap:6px}
  .insp-rail::-webkit-scrollbar{display:none}
  .insp-rail .srv{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
}
/* Scrolling strips fade at the edge that has more to show, so a cut-off tab reads as "scroll for more". */
.edge-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.edge-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.edge-l.edge-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
@media (max-width:600px){.insp-rail .srv{width:auto;min-width:0}}

/* chapter 8 delivery: the chain that sets the date on one sideways-scrolling line */
.pl-chain{display:flex;align-items:center;gap:10px;min-width:0}
.pl-chain-k{flex:none;font-size:var(--t-14);color:var(--ink-2);padding:2px 8px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 2px var(--ink)}
.pl-crit-row{display:flex;gap:6px;margin:0;padding:2px 0;list-style:none;overflow-x:auto;scrollbar-width:none;min-width:0}
.pl-crit-row::-webkit-scrollbar{display:none}
.pl-crit-row .pl-crit{flex:none;white-space:nowrap}
.pl-crit-row .pl-crit+.pl-crit::before{content:"→";margin:0 6px 0 -2px;color:var(--ink-3)}
/* phases: four labelled bars on the same week grid as the tasks below them */
.g-phases{margin-top:6px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.g-phases .g-name{font-weight:600}
.g-ph{top:2px;bottom:2px;display:flex;align-items:center;padding:0 8px;overflow:hidden}
.g-ph span{font-size:var(--t-14);line-height:1;color:var(--ink);white-space:nowrap}
.sd-price button{white-space:nowrap}
.g-ph.out{overflow:visible}.g-ph.out span{position:absolute;left:calc(100% + 6px);color:var(--ink-2)}
/* Phones: segmented controls wrap into a two-column grid, so no option is clipped inside a scrolling pill. */
@media (max-width:600px){.sd-controls .seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;border-radius:var(--r-md)}.sd-controls .seg button{white-space:nowrap;border-radius:var(--r-sm)}}
@media (max-width:600px){.sd-traffic{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}.sd-traffic input{flex:1;min-width:0;width:auto}.sd-traffic output{flex:none}.pl-big .pl-vs{margin-left:0;flex-basis:100%}}
@media (max-width:600px){.sd-row,.sd-controls{min-width:0}.sd-row>*{min-width:0;max-width:100%}.sd-controls .seg{min-width:0}}

/* Chapter side notes on narrow screens: folded behind one line (app.js conceptOrder). */
.concept-d{display:block}
.concept-s{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;font:500 var(--t-14)/1.4 var(--mono);color:var(--ink-2)}
.concept-s::-webkit-details-marker{display:none}
.concept-s::after{content:"+";flex:none;font:400 var(--t-18)/1 var(--sans);color:var(--ink-3)}
.concept-d[open] .concept-s::after{content:"\2212"}
.sec.dark .concept-s{color:var(--graphite-dim)}
.concept-in{display:grid;gap:10px;padding-bottom:4px}
@media (min-width:980px){.concept-s{display:none}}
/* Until the script folds a note behind its one line, it isn't shown on narrow screens: showing it whole above the
   chapter and then moving and folding it shifted the page by a screen. */
@media (max-width:979px){.concept:not(:has(.concept-d)){display:none}}
/* Touch: every control at least 44px tall, nav links with a larger hit area than they look. */
@media (pointer:coarse),(max-width:600px){
  .btn.small,.seg button,.chip,.sd-chip,.sd-scen button,.card-tabs button,.ag-models button,.fin-chips button,.suggest button,.rz-presets button,.reach-i{min-height:44px}
  .ne-ai-nav button{min-width:44px;min-height:44px}
  .still-btn,.theme{width:44px;height:44px}
  details>summary,.path-chip,.res-btn,.sp-toggle{min-height:44px;box-sizing:border-box}
  .insp-log li summary,.ag-fails summary,.reason summary{display:flex;align-items:center;min-height:44px}
  .nav nav a{position:relative}.nav nav a::after{content:"";position:absolute;inset:-6px -4px}
  .tgl{min-height:44px}
}
/* Dark theme: the graphite chapters sit close to the dark paper, so a rule marks where each begins and ends. */
:root[data-theme="dark"] .sec.dark{border-block:1px solid var(--graphite-rule)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec.dark{border-block:1px solid var(--graphite-rule)}}
/* Prose-length links read in the interface voice; mono stays for paths and commands. */
.ag-src a{font-family:var(--sans)}
/* One checkbox style across the page. */
input[type=checkbox]{accent-color:var(--blue)}
/* Garm's headline chart: two dot plots, one row per defence, two callbacks per row (assets/garm-chart.js). */
.gch{display:grid;gap:18px}
.gch-key{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--t-14);color:var(--ink-2)}
.gch-key span{display:inline-flex;align-items:center;gap:8px}
.gch-key .gch-dot{position:static;transform:none}
.gch-panels{display:grid;gap:22px}
@media (min-width:860px){.gch-panels{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px}.gch-p+.gch-p .gch-lab{display:none}.gch-p+.gch-p .gch-row{grid-template-columns:minmax(0,1fr)}}
.gch-h{margin:0 0 10px;font-size:var(--t-16);font-weight:600;color:var(--ink);display:grid;gap:2px}
.gch-h small{font-size:var(--t-14);font-weight:400;color:var(--ink-3)}
.gch-rows{display:grid}
.gch-row{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--rule)}
.gch-lab{font-size:var(--t-14);line-height:1.35;color:var(--ink-2)}
.gch-lab b{font-weight:500;color:var(--ink);margin-right:4px}
.gch-track{position:relative;height:40px;margin-right:12px;background:linear-gradient(90deg,var(--rule),var(--rule)) 0 50%/100% 1px no-repeat}
.gch-dot{position:absolute;left:var(--x);width:11px;height:11px;margin-left:-5.5px;border-radius:50%;box-shadow:0 0 0 2px var(--paper)}
.gch-dot.on-file{top:4px;background:var(--gch-a)}
.gch-dot.known{bottom:4px;background:var(--gch-b)}
.gch-dot b{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font:500 var(--t-14)/1 var(--mono);color:var(--ink-2);white-space:nowrap}
.gch-dot.flip b{left:auto;right:calc(100% + 6px)}
.gch-key .gch-dot b{display:none}
.gch-axis{min-height:28px;border-top:1px solid var(--ink-3)}
.gch-axis .gch-track{height:24px;background:none}
.gch-axis .gch-track span{position:absolute;left:var(--x);top:4px;transform:translateX(-50%);font:400 var(--t-14)/1 var(--mono);color:var(--ink-3)}
.gch-axis .gch-track span:first-child{transform:none}.gch-axis .gch-track span:last-child:not(:first-child){transform:translateX(-100%)}
@media (max-width:520px){.gch-row{grid-template-columns:minmax(0,1fr);gap:4px;padding-top:8px}.gch-lab{padding-top:2px}.gch-axis .gch-lab{display:none}}
/* Footer email: the address and a copy icon in one pill. */
.mailpill{display:inline-flex;max-width:100%;align-items:center;gap:4px;padding:4px 4px 4px 20px;border-radius:999px;background:var(--blue);color:var(--on-blue)}
.mail-a{min-width:0;font:500 var(--t-16)/1 var(--sans);color:inherit;text-decoration:none;padding:10px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.mailpill{padding-left:16px}.mail-a{font-size:var(--t-14)}}
.mail-a:hover{text-decoration:underline;text-underline-offset:3px}
.mail-copy{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:50%;background:color-mix(in srgb,var(--on-blue) 16%,transparent);color:inherit;cursor:pointer}
.mail-copy:hover{background:color-mix(in srgb,var(--on-blue) 28%,transparent)}
.mail-copy:focus-visible{outline:2px solid var(--on-blue);outline-offset:2px}
.mail-copy svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mail-copy::after{content:attr(data-label);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,3px);padding:4px 9px;border-radius:var(--r-xs);background:var(--graphite-ink);color:var(--graphite);font:500 var(--t-14)/1.3 var(--sans);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.mail-copy:hover::after,.mail-copy:focus-visible::after,.mail-copy.said::after{opacity:1;transform:translate(-50%,0)}
@media (pointer:coarse),(max-width:600px){.mail-copy{width:44px;height:44px}}
/* Model card capabilities: a plain row on wide screens, a tap-to-open row on phones. */
.cap>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:default}
.cap>summary::-webkit-details-marker{display:none}
@media (max-width:640px){.cap>summary{cursor:pointer;min-height:44px}.cap>summary::after{content:"+";flex:none;font:400 var(--t-18)/1 var(--sans);color:var(--ink-3)}.cap[open]>summary::after{content:"\2212"}}
@media (min-width:641px){.cap>summary{pointer-events:none}}
details.cap{display:block}details.cap>p{margin-top:3px}
/* Inspector: the first four tools, then "Show N more". */
.tcards:not(.all):not(:has(.tcard.dim)) .tcard:nth-child(n+5){display:none}
.tcards.all+.tmore,.tcards:has(.tcard.dim)+.tmore{display:none}
.tmore{justify-self:start;margin-top:8px;min-height:44px;padding:0 16px;border:1px solid var(--graphite-rule);border-radius:999px;background:none;color:var(--graphite-ink);font-size:var(--t-14);cursor:pointer}
.tmore:hover{border-color:var(--graphite-dim)}.tmore:focus-visible{outline:2px solid var(--g-blue);outline-offset:2px}

/* ================= Phone layer (2026-10-23 mobile review) =================
   One block, last in the file, so phone fixes don't fight earlier rules. Patterns: touch feedback, one-line header bars,
   one segmented control, one chip scroller, one card depth, peek carousels, native-feel inputs, bottom sheets. */
.wide-only{display:inline}
.nowrap{white-space:nowrap}
time{white-space:nowrap}
*{-webkit-tap-highlight-color:transparent}
:is(.btn,.seg button,.card-tabs button,.sg-tabs button,.flow-tabs button,.evx-tabs button,.rz-presets button,.rz-len button,.skill-agents button,.fin-chips button,.suggest button,.space-legend button,.tmore,.srv,.reach-i,.dock-btn,.mail-copy,.theme,.still-btn,.sd-chip,.peek-btn){transition:transform .12s cubic-bezier(.3,.7,.2,1),background-color .15s,border-color .15s,color .15s}
@media (hover:none){
  :is(.btn,.seg button,.card-tabs button,.sg-tabs button,.flow-tabs button,.evx-tabs button,.rz-presets button,.rz-len button,.skill-agents button,.fin-chips button,.suggest button,.space-legend button,.tmore,.srv,.reach-i,.dock-btn,.mail-copy,.theme,.still-btn,.sd-chip,.peek-btn,.chip):active{transform:scale(.96)}
  :is(.note summary,.concept-s,.cap>summary,.thead,.insp-log-head,.foot-cols a):active{background:color-mix(in srgb,currentColor 7%,transparent)}
  .theme:hover,.dock-btn:hover,.sec.dark .ne-caps .cap:hover,.chip:hover,.reach-a:hover,.thead:hover{transform:none}
}
/* Native-feel switch and slider, at every width. */
.tgl input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:44px;height:26px;margin:0;border-radius:999px;background:var(--rule);position:relative;cursor:pointer;transition:background .2s}
.tgl input[type=checkbox]::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent);transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.tgl input[type=checkbox]:checked{background:var(--blue)}.tgl input[type=checkbox]:checked::after{transform:translateX(18px)}
.tgl input[type=checkbox]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input[type=range]{-webkit-appearance:none;appearance:none;height:28px;background:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:var(--rule)}
input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:var(--rule)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--surface);border:1px solid var(--rule);box-shadow:0 1px 4px color-mix(in srgb,var(--ink) 25%,transparent)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surface);border:1px solid var(--rule)}
input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--blue);outline-offset:2px}
/* Dark theme: the dot grid stays on the canvases, not behind prose. */
:root[data-theme="dark"] .sec.dark{background-image:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sec.dark{background-image:none}}
.dock-scrim{display:none}
@media (pointer:coarse){textarea{resize:none}}

@media (max-width:640px){
  html{scroll-padding-top:64px}
  .sd-stage{height:520px}
  .sd-metrics{grid-auto-rows:1fr}
}
@media (max-width:600px){
  .wide-only{display:none}
  /* Header bars: one line, the label ellipsizes and the action stays right. */
  :is(.editor-head,.insp-log-head,.cache-head){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:44px}
  :is(.editor-head,.insp-log-head,.cache-head)>:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  :is(.editor-head,.insp-log-head,.cache-head)>:last-child{white-space:nowrap}
  .cache-head{grid-template-columns:minmax(0,1fr);row-gap:2px}.cache-head>:first-child{white-space:normal}
  .insp-bar{flex-wrap:nowrap}.insp-title{white-space:nowrap;flex:1}.insp-status{flex-basis:auto;padding-left:0;margin-left:auto}
  .live-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:8px;row-gap:2px}
  .live-head .dim{grid-column:2;margin-left:0;justify-self:start}
  .ne-ai-head{flex-wrap:nowrap}.ne-ai-head .ne-ai-h{min-width:0}.ne-count{white-space:nowrap}
  /* One segmented control: equal columns in a soft track, the chosen one lifted. */
  :is(.card-tabs,.rz-len,.skill-agents,.sd-controls .seg:not(:has(>:nth-child(4)))){display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:2px;width:100%;padding:3px;border:0;border-radius:999px;background:var(--sunk);overflow:visible;-webkit-mask-image:none;mask-image:none}
  :is(.card-tabs,.rz-len,.skill-agents,.sd-controls .seg:not(:has(>:nth-child(4)))) button{min-height:44px;padding:0 8px;border:0;border-radius:999px;background:none;white-space:nowrap;text-align:center;place-content:center;justify-items:center;color:var(--ink-2)}
  .card-tabs button span,.card-tabs-ind{display:none}
  :is(.card-tabs button[aria-selected="true"],.rz-len button[aria-pressed="true"],.rz-len button.on,.skill-agents button[aria-pressed="true"],.sd-controls .seg:not(:has(>:nth-child(4))) button[aria-pressed="true"]){background:var(--thumb);color:var(--ink);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent)}
  /* One chip scroller: role presets, the map legend, finale asks, flow scenarios, four-way simulator choices. */
  :is(.rz-presets,.space-legend,.fin-chips,.flow-tabs,.sd-controls .seg:has(>:nth-child(4))){display:flex!important;flex-wrap:nowrap;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut);scroll-padding-inline:var(--gut);border:0;background:none;border-radius:0;grid-template-columns:none}
  :is(.rz-presets,.space-legend,.fin-chips,.flow-tabs,.sd-controls .seg)::-webkit-scrollbar{display:none}
  :is(.rz-presets,.space-legend,.fin-chips,.flow-tabs,.sd-controls .seg:has(>:nth-child(4)))>*{flex:none;scroll-snap-align:start;white-space:nowrap;min-height:44px;border-radius:999px}
  .flow-tabs button{border:1px solid var(--graphite-rule)!important;padding:0 14px}.flow-tabs button small{display:none}
  .sg-tabs{display:flex!important;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px 16px;background:none;border-bottom:1px solid var(--rule);grid-template-columns:none}
  .sg-tabs::-webkit-scrollbar{display:none}
  .sg-tabs button{flex:none;min-height:40px;padding:0 14px;border:1px solid var(--rule)!important;border-radius:999px;background:var(--surface)}
  .sg-tabs small{display:none}
  .sg-tabs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)!important}
  .sg-tabs button[aria-pressed="true"] b{color:var(--paper)}
  /* One card depth: a second level is a fill, never another border. Demos run edge to edge. */
  :is(.garm-stats>div,.skill-levels li,.limits,.ja-card,.policy){border:0!important;box-shadow:none!important;background:var(--sunk);border-radius:var(--r-md)}
  .sec.dark :is(.ja-card,.policy,.tcard){background:var(--graphite-3);border:0!important;box-shadow:none!important}
  .garm-fig{border:0;padding:16px 0 0;background:none;border-top:1px solid var(--rule);border-radius:0}
  :is(.inspector,.flow-panel){margin-inline:calc(-1 * var(--gut));border-radius:0;border-inline:0}
  /* Peek carousel: the neighbours show at the edges, the arrows give way to swiping. */
  .feat{margin-inline:calc(-1 * var(--gut));gap:10px;-webkit-mask-image:none;mask-image:none}
  .feat .cap{flex:0 0 calc(100vw - 2 * var(--gut) - 32px);opacity:.72;transform:none}
  .feat .cap.on{opacity:1}
  .ne-ai-nav button{display:none}
  /* Field notes: one grouped list with one label, not a stack of separate cards. */
  .notes{display:block;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
  .sec.dark .notes{border-color:var(--graphite-rule);background:var(--graphite-2)}
  .notes .note{border:0!important;border-radius:0!important;background:none!important;margin:0}
  .notes .note+.note{border-top:1px solid var(--rule)!important}
  .sec.dark .notes .note+.note{border-top-color:var(--graphite-rule)!important}
  .notes .note summary{flex-direction:column;align-items:flex-start;gap:2px;min-height:52px;padding:12px 44px 12px 16px}
  .notes .note-k{display:none}
  .notes::before{content:"field notes";display:block;padding:12px 16px 0;font:400 var(--t-14)/1.4 var(--mono);color:var(--ink-3)}
  .sec.dark .notes::before{color:var(--graphite-dim)}
  /* Long previews start as a peek (app.js peeks). */
  .peek:not(.peek-open){max-height:360px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  #sysprompt.peek{max-height:none;overflow:visible}
  #sysprompt.peek:not(.peek-open){max-height:420px;overflow:hidden}
  .peek-btn{margin:12px auto 0;display:flex;width:100%;justify-content:center}
  /* Eval terminal: no long black void while the replay runs. */
  /* Chat: a real bottom sheet, with a grabber, a dimmed page and safe areas. */
  .dock{top:auto!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:min(88dvh,760px)!important}
  .dock .console{height:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;border-bottom:0}
  .dock .console-head{position:relative;padding-top:22px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center}
  .dock .console-head::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:999px;background:var(--rule)}
  .dock .console-head .mode{margin-left:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .dock .log{overscroll-behavior:contain}
  .dock form.ask{padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .console-foot span:last-child{display:none}
  .dock-scrim{display:block;position:fixed;inset:0;z-index:60;background:color-mix(in srgb,var(--graphite) 45%,transparent)}
  .dock-scrim[hidden]{display:none}
  html.sheet-open body{overflow:hidden}
  .dock-close,.msg-x{width:44px;height:44px}
  .dock-btn{bottom:calc(14px + env(safe-area-inset-bottom))}
  /* Message sheet: a grabber and a full-width send pinned at the bottom. */
  .mdlg::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:999px;background:var(--rule)}
  .mdlg form{padding-top:26px}
  .msg-foot{position:sticky;bottom:0;background:var(--surface);padding:10px 0 max(6px,env(safe-area-inset-bottom));flex-wrap:wrap}
  .msg-foot .btn{flex:1;justify-content:center}
  /* Name pill: touch users see the labels under the icons. */
  .reach{border-radius:var(--r-lg);padding:6px}
  .reach-i{width:72px;height:auto;min-height:56px;border-radius:var(--r-md);grid-template-rows:auto auto;row-gap:2px;padding:8px 0 6px}
  .reach-i::after{position:static;opacity:1;transform:none;background:none;color:var(--ink-2);padding:0;font-size:var(--t-14)}
  .reach-i:hover::after,.reach-i:focus-visible::after,.reach-i.said::after{color:inherit;transform:none}
  /* Footer links: tappable pills with an arrow, two to a row. */
  .foot-cols div:first-child a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 14px;border:1px solid var(--graphite-rule);border-radius:999px}
  .foot-cols div:first-child a::after{content:"↗";color:var(--graphite-dim);margin-left:8px}
  .foot-cols div:first-child a[href^="#"]::after{content:"›"}
  .nav{padding-top:max(14px,env(safe-area-inset-top))}
}
@media (max-width:600px){.dock .suggest{flex-wrap:wrap;overflow:visible}.dock .suggest button{white-space:normal;text-align:left}
  .dock .suggest.used{flex-wrap:nowrap;overflow-x:auto}.dock .suggest.used button{white-space:nowrap}}
.rz-why{font-size:var(--t-14);color:var(--ink-3);margin:0 12px 0 10px}
@media (max-width:600px){.rz-why{display:block;margin:8px 0 0}}
/* Controls on desktop: chips and presets at the 36px small-button height; segmented buttons at 32px inside their
   36px track (phones raise all of them to 44px above). */
@media (pointer:fine) and (min-width:601px){
  :is(.fin-chips button,.rz-presets button,.res-btn,.skill-agents button,.ag-models button,.rz-page button){min-height:36px}
  .seg button{min-height:32px}
}
/* ---------- Mobile audit, 2026-10-23 ---------- */
/* Touch screens wider than a phone (landscape, tablets): the contact labels sit under the icons, as on phones,
   since there is no hover to show them. */
@media (pointer:coarse) and (min-width:601px){
  .reach{border-radius:var(--r-lg);padding:6px}
  .reach-i{width:72px;height:auto;min-height:56px;border-radius:var(--r-md);grid-template-rows:auto auto;row-gap:2px;padding:8px 0 6px}
  .reach-i::after{position:static;opacity:1;transform:none;background:none;color:var(--ink-2);padding:0;font-size:var(--t-14)}
  .reach-i:focus-visible::after,.reach-i.said::after{color:inherit;transform:none}
}
/* Landscape phones: the chat opens as a full-height sheet. */
@media (max-height:500px) and (orientation:landscape){
  .dock{top:0!important;left:0!important;right:0!important;bottom:0!important;width:auto!important;height:100dvh!important;border-radius:0}
}
/* iOS zooms into any field under 16px when it gets focus. */
@media (pointer:coarse){#sgText,#rzUrl,#rzJd,#eq,#q{font-size:var(--t-16)}}
@media (max-width:600px){
  /* Attack tabs as pills: label centred, 44px tall, no desktop underline. */
  .sg-tabs button{min-height:44px;align-content:center}
  .sg-tabs button::after{display:none!important}
  /* The flow panel is already full-bleed, so its chip row keeps the gutter. */
  .flow-panel .flow-tabs{margin-inline:0;padding-inline:var(--gut)}
  /* The install command wraps instead of hiding most of itself; Copy is right there. */
  .skill-cmd code{white-space:pre-wrap;word-break:break-all}
}
/* System design metrics on phones: one set of dividers for two columns, values on a shared line. */
@media (max-width:640px){
  .sd-m,.sd-m:nth-child(n){border:0;border-top:1px solid var(--rule)}
  .sd-m:nth-child(-n+2){border-top:0}
  .sd-m:nth-child(even){border-left:1px solid var(--rule)}
}
.msg-status:empty{display:none}
#rtMeta span,#rtMeta time{white-space:nowrap}
/* More touch targets at 44px. */
@media (pointer:coarse),(max-width:600px){
  .hold-btns button,.rz-more,.tall,#inspClear,.skill-agents button,.rz-len button{min-height:44px}
  .fin-send{width:44px;height:44px}
  .ne-link,.lg-t,#finCopy{position:relative}
  .ne-link::after,.lg-t::after,#finCopy::after{content:"";position:absolute;inset:-10px -4px}
}
/* Safe areas on notched phones. */
.dock-btn{right:max(20px,env(safe-area-inset-right))}
@media (max-width:600px){.dock-btn{right:max(14px,env(safe-area-inset-right))}}
.foot-base{padding-bottom:max(20px,env(safe-area-inset-bottom))}
/* Ch2 connect card on narrow phones: the MCP URL chip wraps instead of widening the card past the screen (320px). */
@media (max-width:600px){.connect{grid-template-columns:minmax(0,1fr)}.path-chip span{white-space:normal}}
/* Finale on phones: the command is a full-width copy field (swipe to read, tap to copy). Desktop keeps the inline
   line, so the copy icon only shows here. */
.fin-cp{display:none}
@media (max-width:600px){
  .fin-alt{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;overflow-wrap:normal}
  #finCopy::after{content:none}
  .fin-cmd{display:flex;align-items:center;gap:4px;width:100%;min-height:48px;padding:0 0 0 12px;border:1px solid var(--graphite-rule);border-radius:var(--r-sm);text-decoration:none}
  #finCmd{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-block:12px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  #finCmd::-webkit-scrollbar{display:none}
  .fin-cp{display:block;flex:none;box-sizing:content-box;width:18px;height:18px;padding:13px;fill:none;stroke:var(--graphite-dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .fin-cp .fin-ok-i,.fin-cmd.ok .fin-cp :not(.fin-ok-i){display:none}
  .fin-cmd.ok .fin-cp .fin-ok-i{display:inline;stroke:var(--g-allow)}
  .fin-cmd:hover .fin-cp{stroke:var(--graphite-ink)}
}
.rz-hint{flex-basis:100%;font-size:var(--t-14)}
/* Words that drop on phones so segmented labels fit ("Small model" becomes "Small"). */
@media (max-width:420px){.wo{display:none}}
.rz-controls>*,.rz-block{min-width:0}
/* Hold the space for content that arrives with the live data, so nothing below it jumps. */
/* Phone header: plain icon buttons, as in a native app bar (44px hit area, no outlined circles). */
@media (max-width:600px){.nav .still-btn,.nav .theme{border-color:transparent}.nav{padding-top:max(8px,env(safe-area-inset-top))}}
.hero .run .nw{white-space:nowrap}
/* Touch: sliders, single-line fields, the logo and the context-window bars reach 44px. */
@media (pointer:coarse),(max-width:600px){
  input[type=range]{min-height:44px}
  #finQ,#rzUrl{min-height:44px}
  .brand{min-height:44px}
  .cw-zoom{height:44px}
}

/* Dock, 2026-10-25: answers end with their sources, a copy action and follow-ups; send becomes stop while a turn runs. */
.ans-foot{display:flex;align-items:flex-start;gap:12px;margin-top:10px}
.srcs{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:var(--t-14);color:var(--ink-3)}
.srcs span{margin-right:2px}
.srcs a{color:var(--ink-2);text-decoration:none;border:1px solid var(--rule);border-radius:999px;padding:3px 9px}
.srcs a:hover,.srcs a:focus-visible{color:var(--ink);border-color:var(--ink)}
.copy-ans{flex:none;margin-left:auto;font:500 var(--t-14)/1 var(--sans);color:var(--ink-3);background:none;border:0;padding:6px 4px;cursor:pointer}
.copy-ans:hover,.copy-ans:focus-visible{color:var(--ink)}
.follow{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0 40px}
.follow button{font:400 var(--t-14)/1.2 var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer;text-align:left}
.follow button:hover{border-color:var(--ink)}
.dock .suggest.used.has-follow{display:none}
.send.stop{background:var(--ink);color:var(--paper)}
.send.stop svg{width:16px;height:16px}
.step.call .why.lead{margin:0 0 6px;color:var(--ink);font-weight:500}
.kbd{margin-left:8px;font:500 var(--t-14)/1 var(--mono);padding:3px 6px;border-radius:6px;border:1px solid color-mix(in srgb,var(--paper) 35%,transparent);color:color-mix(in srgb,var(--paper) 80%,transparent)}
@media (hover:none){.kbd{display:none}}
/* Trail summary: the chevron sits at the end of the first line; the timing wraps below. */
.dock .trail-label{flex:1}
.dock .chev{order:1;margin-left:auto}
.dock .trail-meta{order:2}
@media (pointer:coarse){.approval button,.follow button,.dock-info,.copy-ans{min-height:44px}.approval button{padding:0 18px}.srcs a{padding:10px 12px}}
@media (max-width:600px){.follow{margin-left:0}}
/* Before the first question the chips wrap at every width (a cut-off row hid three of four on tablets). */
.dock .suggest:not(.used){flex-wrap:wrap;overflow:visible}
.dock .suggest:not(.used) button{white-space:normal}

/* ---------- Screen-size audit, 2026-10-25 ---------- */
/* Focus and anchor jumps clear the fixed header at every width (it was set only up to 1240px). */
html{scroll-padding-top:84px}
@media (max-width:1240px){html{scroll-padding-top:124px}}
@media (max-width:640px){html{scroll-padding-top:64px}}
/* Between 980 and 1240px the header has two rows, so the sticky concept aside starts below it. */
@media (min-width:980px) and (max-width:1240px){.concept{top:132px}}
/* Touch tablets: the remaining small controls reach 44px. */
@media (pointer:coarse){.tall,#inspClear,.traw-btn{min-height:44px}.copy-ico{width:44px;height:44px}.btn.small{min-height:44px}.theme,.still-btn{width:44px;height:44px}}
/* Everything clickable answers the pointer. */
.note summary:hover,.cap>summary:hover{background:var(--sunk)}
.sec.dark .note summary:hover,.thead:hover{background:var(--graphite-3)}
.ag-fails summary:hover{color:var(--graphite-ink)}
.tw-card:hover{filter:brightness(1.06)}
.brand:hover .brand-dim{color:var(--ink-2)}
@media (hover:none){.note summary:hover,.cap>summary:hover,.sec.dark .note summary:hover,.thead:hover{background:none}.tw-card:hover{filter:none}}
/* The finale prompt gets the same visible focus ring as the dock input. */
.fin-ask:focus-within{outline:2px solid var(--blue-2);outline-offset:2px}
/* Prose stays under ~70 characters a line. */
.note p,.connect p,.caps p,.exp-card p,.sg-lane header p,.journey p,.cache-note{max-width:68ch}
/* Garm chart: in a narrow panel the quarter ticks collided ("0%25% 50% 75%100%"), so only 0, 50 and 100% stay. */
.gch-p{container:gch/inline-size}
@container gch (max-width:440px){.gch-axis .minor{display:none}}
/* The ?for= bar: never over the open agent (it covered the chat input), and on phones both actions fit one row
   with a 44px close in the corner. */
html.sheet-open .for-bar{display:none}
@media (max-width:600px){
  .for-bar{padding:12px 52px 12px 12px}
  .for-bar .btn{white-space:nowrap;flex:1 1 auto}
  .for-bar .for-x{position:absolute;top:4px;right:4px;width:44px;height:44px}
}
/* Phone audit, 2026-10-25. */
.ag-live{white-space:nowrap}
.dock .agent-name b{white-space:nowrap}
@media (max-width:600px){.dock .console-head .mode{overflow:visible}}
@media (pointer:coarse){.dock-close{width:44px;height:44px}}
/* Typing on a phone: the keyboard takes half the sheet, so the chips and footer step aside for the conversation. */
@media (pointer:coarse){.dock:has(#q:focus) :is(.suggest,.console-foot){display:none}}
/* Landscape phones: the header is one row (the two-row header took 30% of the screen). */
@media (max-height:500px) and (orientation:landscape){.ctx{display:none}.nav{flex-wrap:nowrap;padding-bottom:0}.nav nav{order:0;flex:1 1 auto;min-width:0}html{scroll-padding-top:72px}}
@media (pointer:coarse){.for-x{width:44px;height:44px}}
.sd-mini{display:none}
@media (max-width:640px){.sd-mini{display:block;flex-basis:100%;margin:6px 0 0;font-size:var(--t-14);color:var(--ink-2)}}
/* Window-chrome dots read as decoration; the titles carry the meaning. */
.insp-dots{display:none}
.nowrap{white-space:nowrap}
/* ---------- AI-slop audit, 2026-10-25 ---------- */
/* Dots only where they show live state (server LEDs, the job agent's check-in, the chat mode). */
.concept b::before{content:none}
.now-dot{display:none}
.sc-n,.fr-k{letter-spacing:0}
/* Two control heights, as the design system says: 36px with a mouse, 44px on touch. */
@media (pointer:fine){.hold-btns button,.approval button,.tall,#inspClear,.traw-btn{min-height:36px}.copy-ico{height:36px;width:36px}}
.hold-btns button{min-height:36px}
.fin-send,.mail-copy{width:44px;height:44px}
/* Ch4 journey: its three runs wait until it's on screen, so they aren't spent while it's out of view. */
.journey:not(.in) li.now .jtrack,.journey:not(.in) li.now::before{animation-play-state:paused}
/* MCP traffic log: folded by default. */
.insp-log-head:hover>span:first-child{color:var(--graphite-ink)}
.insp-log-head:focus-visible{outline-offset:-2px}
.insp-log-head.ptr:focus-visible{outline:none}
/* Ch4 as system design: labelled planes behind the nodes, and two rails that cross all of them. */
#flowZones{position:absolute;inset:0;pointer-events:none}
.fzone{position:absolute;border:1px dashed var(--g-rule-2);border-radius:var(--r-md);transition:border-color .3s}
.fzone span{position:absolute;left:10px;top:7px;font-size:var(--t-14);color:var(--graphite-dim)}
.fzone.hot{border-color:color-mix(in srgb,var(--blue-2) 55%,var(--g-rule-2))}
.fzone.hot span{color:var(--graphite-ink)}
.flow-panel.stacked #flowZones{display:none}
.flow-rails{display:grid;border-top:1px solid var(--graphite-rule)}
.flow-rails p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;padding:9px 16px;font-size:var(--t-14);color:var(--graphite-ink)}
.flow-rails p+p{border-top:1px solid var(--graphite-rule)}
.flow-rails span{min-width:11em;color:var(--graphite-dim)}
.flow-rails b{margin-left:auto;font-weight:400;color:var(--graphite-dim)}
.flow-rails i{font-style:normal;color:var(--graphite-ink)}
.flow-rails small{font-size:inherit}
.trace .hop{display:none}   /* a step's route; shown on phones, where the diagram is folded away */
@media (max-width:600px){.flow-rails span{min-width:0;flex-basis:100%}.flow-rails b{margin-left:0}}
.flow-panel.stacked .flow-rails{order:3}
.flow-canvas .fnode{max-width:160px}
@media (min-width:1800px){.flow-canvas .fnode{max-width:170px}}
.flow-panel:not(.stacked) .flow-canvas .fnode.kind-gate{max-width:160px}@media (min-width:1800px){.flow-panel:not(.stacked) .flow-canvas .fnode.kind-gate{max-width:170px}}
.sd-assume{margin:6px 0 0;font-size:var(--t-14);color:var(--ink-3);max-width:80ch}
.sd-foot .sd-assume{flex-basis:100%}
/* ---------- One vertical rhythm for every chapter (2026-10-27) ----------
   32px from the lead to the first block, 40px between separate blocks, 20px between parts of one block (left as is),
   40px before the pitch line and 36px before the field notes (as set above), 56px before the finale. */
.sec > .main > :is(#ctxwin,#inspector,#journey,.sg,#evx,.rz,#jaTwist,#mcTabs){margin-top:32px}
#sysdesign > :first-child{margin-top:32px}
.sec > .main > :is(.editor,.cache,.ne-ai,.flow,.experiment,#skill,#jobAgent){margin-top:40px}
.sec > .main > #jaTwist{margin-bottom:0}
.sec > .main > .finale{margin-top:56px}
/* ---------- Phones as an app (2026-10-27) ----------
   One header row with the current chapter and a reading line; a bar at the bottom with the chapters sheet, the agent,
   pause and theme; panels run edge to edge instead of sitting in a box inside the page margin. Desktop is unchanged. */
.nav-now,.nav-read{display:none}
.tabbar[hidden]{display:none}
@media (max-width:600px){
  .nav{flex-wrap:nowrap;padding-bottom:0;min-height:56px;align-items:center;gap:12px}
  .nav nav,.nav-right,.brand-t{display:none!important}
  .nav-now{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1;font-size:var(--t-16);color:var(--ink)}
  .nav-now b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav.on-dark .nav-now,.nav.on-dark .nav-now b{color:var(--graphite-ink)}
  .nav-read{display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
  .nav-read i{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0)}
  html{scroll-padding-top:68px}
  /* The bottom bar. */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:59;display:grid;grid-template-columns:1fr 1.5fr auto;align-items:center;gap:6px;
    padding:6px max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule)}
  .tab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 12px;border:0;border-radius:var(--r-md);background:none;color:var(--ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .tab svg{width:20px;height:20px}
  .tab:active{background:var(--sunk)}
  .tab-ask{background:var(--ink);color:var(--paper)}
  .tab-ask .avatar{width:28px;height:28px;color:var(--paper)}
  .tab-ask .avatar .mark{--mark-ink:var(--ink);--mark-node:var(--brand-2)}
  .tab-slot{display:flex;gap:4px}
  .tab-slot .theme,.tab-slot .still-btn{width:44px;height:44px;border-color:transparent}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .dock-btn{display:none!important}
  .for-bar{bottom:calc(72px + env(safe-area-inset-bottom))}
  html.sheet-open .tabbar{visibility:hidden}
  /* The chapters sheet. */
  .chsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:80dvh;padding:0 0 max(12px,env(safe-area-inset-bottom));border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-2);overflow:auto}
  .chsheet::backdrop{background:color-mix(in srgb,var(--graphite) 45%,transparent)}
  .chsheet-h{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 16px 8px;background:var(--surface)}
  .chsheet-h::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:999px;background:var(--rule)}
  .chsheet-h b{font-size:var(--t-18)}
  .chsheet-x{width:44px;height:44px;border:0;background:none;color:var(--ink-3);font-size:var(--t-24);cursor:pointer}
  .chsheet-list{list-style:none;margin:0;padding:0 8px}
  .chsheet-list a{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:baseline;padding:12px 10px;border-radius:var(--r-md);color:var(--ink);text-decoration:none}
  .chsheet-list a .mono{font-size:var(--t-14);color:var(--ink-3)}
  .chsheet-list a b{display:block;font-size:var(--t-16);font-weight:600}
  .chsheet-list a small{display:block;margin-top:2px;font-size:var(--t-14);color:var(--ink-2)}
  .chsheet-list a[aria-current]{background:var(--sunk)}
  .chsheet-list a[aria-current] .mono{color:var(--blue)}
}
@media (prefers-reduced-motion:no-preference) and (max-width:600px){.chsheet[open]{animation:sheetUp .22s cubic-bezier(.3,.7,.2,1)}}
@keyframes sheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (max-width:600px){.nav.at-top .brand .brand-t{display:inline!important}.nav.at-top .nav-now{display:none}}
@media (max-width:600px){.tab span{white-space:nowrap}}
@media (max-width:360px){.tab-my{display:none}.tab{padding:0 8px}.tabbar{gap:2px}}
/* Phones: the MCP role rail as a row of equal chips, the selected one filled and kept in view. */
@media (max-width:600px){
  .insp-rail{gap:8px;padding:12px var(--gut);scroll-padding-inline:var(--gut)}
  .insp-rail .srv{min-height:56px;padding:10px 14px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);align-content:center}
  .insp-rail .srv.sel{border-color:transparent}
  /* Snap and fade stay clear of the chip a tap selects: snapped to the middle, edges faded over the gutter only. */
  .insp-rail .srv{scroll-snap-align:center}
  .insp-rail.edge-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}
  .insp-rail.edge-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px);mask-image:linear-gradient(90deg,transparent,#000 24px)}
  .insp-rail.edge-l.edge-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}
@media (max-width:600px){
  .insp-rail .srv{max-width:240px}
  .insp-rail .srv-org{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .insp-main .crumbs{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ---------- Phones as an app, chapter by chapter (2026-10-27 audit) ---------- */
@media (max-width:600px){
  /* Ch6: the four result tabs as one segmented strip; the numbers carry it, the sentence lives in the panel. */
  .evx-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0;padding:4px;background:var(--sunk);border-radius:var(--r-md)}
  .evx-tabs button{min-height:56px;padding:8px 4px;border:0;border-radius:calc(var(--r-md) - 4px);background:none;text-align:center;justify-items:center;align-content:center;gap:2px}
  .evx-tabs button[aria-selected="true"]{background:var(--surface);box-shadow:var(--shadow-1)}
  .evx-tabs button[aria-selected="true"]::after{display:none}
  .evx-s{display:none}
  .evx-v{font-size:var(--t-18)!important}
  #evalBody{min-height:0}
  /* Ch8: compact metric tiles, three across. */
  .sd-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .sd-m{padding:10px 12px 26px}
  .sd-m em{display:none}
  .g-ph span{display:none}
  /* Ch1: the context card opens under the bar, not above it behind the header; inset buttons; a wrapping empty row. */
  .cw-card{position:static!important;width:auto;margin-top:12px}
  .peek-btn{width:auto;margin-inline:var(--gut)}
  .cache-scroll tr.empty td{white-space:normal}
  #cacheTtl{justify-self:start}
  /* Ch7: the install command stays whole on one line and scrolls. */
  .skill-cmd code{white-space:pre!important;word-break:normal!important;overflow-x:auto}
  /* Small links in logs reach 44px. */
  .insp-log .lg-t,.ne-link{display:inline-block;padding-block:9px}
  /* The bottom bar matches the top bar over dark chapters. */
  .tabbar.on-dark{background:color-mix(in srgb,var(--graphite) 92%,transparent);border-top-color:var(--graphite-rule)}
  .tabbar.on-dark .tab{color:var(--graphite-ink)}
  .tabbar.on-dark .tab-ask{background:var(--graphite-ink);color:var(--graphite)}
  .tabbar.on-dark .tab-ask .avatar .mark{--mark-ink:var(--graphite-ink)}
  .tabbar.on-dark .theme,.tabbar.on-dark .still-btn{color:var(--graphite-ink)}
}
.appsheet .appsheet-body{padding:4px 16px 16px}
.appsheet-p{margin:0;font-size:var(--t-16);line-height:1.55;color:var(--ink)}
.appsheet-code{display:block;margin-top:12px;font:400 var(--t-14)/1.5 var(--mono);color:var(--ink-2);white-space:normal}
@media (min-width:601px){.appsheet{max-width:520px;margin:auto;border-radius:var(--r-lg)}}
.appsheet .hf-list{position:static;width:auto;max-height:none;margin:0;padding:0;grid-template-columns:minmax(0,1fr);border:0;box-shadow:none;background:none}
.appsheet .hf-list li{min-height:56px;border-radius:var(--r-md)}
.appsheet .hf-list li[aria-selected="true"]{background:var(--sunk)}
.appsheet .sd-node{border:0;padding:0}
/* The prompt is already open in full here, so its "Show the full prompt" button would only reopen it. */
.appsheet .peek-btn{display:none!important}
/* The sheet's title already names the part, so its description joins the kicker line instead of a second heading. */
.sd-k-sub{display:none}
.appsheet #sdNode .sd-k-sub{display:inline}
.appsheet #sdNode h4{display:none}
.appsheet .hf-t{color:var(--ink)}
.appsheet .hf-d{color:var(--ink-2)}
.appsheet .hf-n{background:var(--sunk);color:var(--ink-2)}
.appsheet .hf-list li{scroll-margin-top:76px}
@media (max-width:600px){
  .insp-rail .srv-org{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .insp-rail .srv{align-items:start}
  .tabbar.on-dark .tab-ask .avatar{color:var(--graphite)}
}
/* Phones: two selection styles only. A segmented control (white thumb on a soft track) for a few exclusive options,
   and filter chips (outlined, filled when chosen) for rows that scroll. */
@media (max-width:600px){
  .ag-models{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:999px;background:var(--graphite-3)}
  .ag-models button{min-height:44px;border:0!important;border-radius:999px;background:none;color:var(--graphite-dim)}
  .ag-models button[aria-pressed="true"]{background:var(--graphite-ink);color:var(--graphite)}
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.sd-controls .seg:has(>:nth-child(4))) button{border:1px solid var(--rule)!important;background:var(--surface);color:var(--ink);box-shadow:none}
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.sd-controls .seg:has(>:nth-child(4))) button:is([aria-pressed="true"],[aria-checked="true"]){background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.sd-controls .seg:has(>:nth-child(4))) button:is([aria-pressed="true"],[aria-checked="true"]) *{color:inherit!important}
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.sd-controls .seg:has(>:nth-child(4))) button[aria-pressed="true"]::after{display:none}
  .sec.dark :is(.flow-tabs,.rz-presets,.space-legend) button{border-color:var(--graphite-rule)!important;background:transparent;color:var(--graphite-ink)}
  .sec.dark :is(.flow-tabs,.rz-presets,.space-legend) button:is([aria-pressed="true"],[aria-checked="true"]){background:var(--graphite-ink)!important;color:var(--graphite)!important;border-color:var(--graphite-ink)!important}
}
@media (max-width:600px){
  .appsheet.full{height:94dvh;max-height:94dvh}
  .appsheet.full .appsheet-body{padding:0}
  .appsheet .editor{margin:0!important;border:0;border-radius:0}
}
.fit-stats{display:none}
@media (max-width:600px){
  .fit-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
  .fit-stats div{padding:12px 14px;border-radius:var(--r-md);background:var(--sunk);display:grid;gap:2px}
  .fit-stats b{font:600 var(--t-24)/1.1 var(--sans);font-variant-numeric:tabular-nums}
  .fit-stats span{font-size:var(--t-14);color:var(--ink-2)}
  #agCaught li{position:relative;cursor:pointer;padding-right:24px;min-height:44px}
  #agCaught li span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  #agCaught li b{display:none}
  #agCaught li::after{content:"›";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:var(--t-20)}
}
@media (max-width:600px){#agCaught li{grid-template-columns:28px minmax(0,1fr)}}
.gch-switch{display:none}
@media (max-width:600px){
  .gch-switch{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;margin-bottom:12px;border-radius:999px;background:var(--sunk)}
  .gch-switch button{min-height:44px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .gch-switch button[aria-pressed="true"]{background:var(--thumb);color:var(--ink);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 14%,transparent)}
  .gch-panels[data-show="0"] .gch-p:nth-child(2),.gch-panels[data-show="1"] .gch-p:nth-child(1){display:none}
}
.ne-dots{display:none}
@media (max-width:600px){
  .ne-dots{display:flex;justify-content:center;gap:0;margin-top:2px}
  .ne-dots button{width:28px;height:44px;border:0;background:none;display:grid;place-items:center;cursor:pointer}
  .ne-dots i{width:7px;height:7px;border-radius:50%;background:var(--graphite-rule);transition:width .2s,background-color .2s}
  .ne-dots button[aria-current="true"] i{width:18px;border-radius:999px;background:var(--graphite-ink)}
}
.rz-fab[hidden]{display:none}
@media (max-width:600px){
  .rz-fab{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:58;padding:10px var(--gut);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--rule)}
  .rz-fab .btn{width:100%;justify-content:center;min-height:48px}
  html.sheet-open .rz-fab{display:none}
}
@media (min-width:601px){.rz-fab{display:none}}
@media (max-width:600px){
  #mcBench .b-row:not(.h){position:relative;cursor:pointer;padding-right:32px;min-height:56px}
  #mcBench .b-row:not(.h)::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:var(--t-20)}
  #mcBench .b-ev{display:none}
  #embed{height:min(100vw,400px)}
}
@media (max-width:600px){.flow-tabs button{display:inline-flex!important;align-items:center;gap:8px;padding-block:0}.flow-tabs button .sc-n{margin:0}}
@media (max-width:600px){.fit-stats div{background:var(--graphite-3)}.fit-stats b{color:var(--graphite-ink)}.fit-stats span{color:var(--graphite-dim)}}
@media (max-width:600px){.flow-panel.stacked > .flow-tabs{order:0}.flow-panel.stacked > .trace{order:1}.flow-panel.stacked > .flow-canvas{order:2}.flow-panel.stacked > .flow-rails{order:3}}
/* ---------- Phones: the agent's composer and chat sheet (2026-10-27, CollectUI chat-layout references) ---------- */
@media (max-width:600px){
  .tabbar{grid-template-columns:auto minmax(0,1fr) auto;gap:8px}
  .tab-ch{width:48px;padding:0}
  .tab-ask{justify-content:flex-start;gap:10px;min-height:48px;padding:0 6px 0 8px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);color:var(--ink-3);font-weight:400}
  .tab-ask .avatar{width:30px;height:30px;color:var(--ink)}
  .tab-ask .avatar .mark{--mark-ink:var(--paper);--mark-node:var(--brand)}
  .tab-ask-ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:var(--t-16)}
  .tab-ask-go{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--on-blue)}
  .tab-ask-go svg{width:18px;height:18px}
  .tab-ask:active{background:var(--sunk)}
  .tabbar.on-dark .tab-ask{background:var(--graphite-2);border-color:var(--graphite-rule);color:var(--graphite-dim)}
  .tabbar.on-dark .tab-ask .avatar{color:var(--graphite-ink)}
  .tabbar.on-dark .tab-ask .avatar .mark{--mark-ink:var(--graphite)}
  /* The pause row at the foot of the chapters sheet. */
  .chsheet-row{display:block;width:calc(100% - 16px);margin:8px 8px 0;min-height:52px;padding:0 10px;border:0;border-top:1px solid var(--rule);background:none;color:var(--ink);font:500 var(--t-16)/1 var(--sans);text-align:left;cursor:pointer}
  /* Chat sheet: an empty conversation centres its greeting, suggestions are a 2×2 of cards, the send button sits in the field. */
  .dock .log:has(> .msg:only-child){justify-content:center}
  .dock .log > .msg.agent:only-child .text p{font-size:var(--t-20);line-height:1.4;color:var(--ink)}
  .dock .suggest:not(.used){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 16px 12px}
  .dock .suggest:not(.used) button{min-height:64px;padding:12px;border-radius:var(--r-md);border:1px solid var(--rule);background:var(--surface);text-align:left;align-items:flex-start;display:flex;line-height:1.3}
  .dock form.ask{position:relative;border-top:0}
  .dock #q{padding-right:56px;background:var(--surface)}
  .dock #send{position:absolute;right:22px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 5px);width:36px;height:36px}
  .dock #send svg{width:18px;height:18px}
}
/* The wordmark's full stop is the mark's blue light (r., chosen 2026-10-27). */
.brand-dot{color:var(--brand)}
.nav.on-dark .brand-dot{color:var(--brand-2)}

/* ---------- Phones: one card system (2026-10-27) ----------
   Every panel is an inset card at the 16px page margin with the same 16px corner radius; nothing runs edge to edge
   except a row of chips, which scrolls and lines its first chip up with that margin (Material 3 filter chips: one
   row, 8px apart; iOS inset-grouped cards). */
@media (max-width:600px){
  .sec > .main :is(.inspector,.connect,.editor,.cache,.mc,.flow-panel,.sg,.term,.skill,.ja,.annotated,.space,.rz-sheet,.limits){border-radius:var(--r-md)}
  /* Ch1: the prompt's reader button is a full-width row inside its card, and the notes card sits in the page margin. */
  #prompt .peek-btn{width:calc(100% - 32px);margin:12px 16px 16px;justify-content:center}
  /* Ch2: the roles as one row of chips: name and tool count on one line, the chosen one filled. */
  .insp-rail{display:flex!important;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:12px 16px!important;scroll-padding-inline:16px;scrollbar-width:none;border-bottom:1px solid var(--graphite-rule)}
  .insp-rail::-webkit-scrollbar{display:none}
  /* Name and count share one baseline (the mono count sat 2px lower when both were centred by their boxes), and the
     live dot is centred on that line instead of the desktop rule's top-aligned dot, which left it riding high. */
  .insp-rail .srv{flex:none;display:inline-flex!important;align-items:baseline;gap:8px;width:auto!important;max-width:calc(100% - 24px)!important;min-height:0!important;padding:11px 14px!important;border:1px solid var(--graphite-rule);border-radius:999px;white-space:nowrap}
  .insp-rail .srv .led{align-self:center;margin:0}
  .insp-rail .srv-org{white-space:nowrap!important;font-size:var(--t-14);line-height:20px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .insp-rail .srv-when,.insp-rail .srv-role{display:none!important}
  .insp-rail .srv-full{display:none}.insp-rail .srv-short{display:inline!important}
  .insp-rail .srv-n{flex:none;font-size:var(--t-14);line-height:20px;color:var(--graphite-dim)}
  .insp-rail .srv.sel{background:var(--graphite-ink);border-color:var(--graphite-ink)}
  .insp-rail .srv.sel :is(.srv-org,.srv-n){color:var(--graphite)}
}
@media (max-width:600px){
  .sec > .main :is(#inspector,.flow-panel){margin-inline:0!important;border-radius:var(--r-md)!important;border-left-width:1px!important;border-right-width:1px!important;border-left-style:solid!important;border-right-style:solid!important}
  .sec > .main :is(.exp-card,#live,.notes,.ja,.mc,.connect,.sg){border-radius:var(--r-md)!important}
}
@media (max-width:600px){.sec > .main :is(#inspector,.flow-panel){border-color:var(--graphite-rule)!important}}
/* ---------- Ch4 on phones: a story bar, a compact relay of rules, and the scenario as an agent run (2026-10-27) ---------- */
.jtabs,.flow-map-btn{display:none}
@media (max-width:600px){
  /* The journey: three segments fill like a story bar; one step's card shows at a time. */
  .jtabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:32px}
  .jtabs button{padding-right:8px!important}
  .jtabs button:not(:first-child)::before{border-top-left-radius:0;border-bottom-left-radius:0}
  .jtabs button:not(:last-child)::before{border-top-right-radius:0;border-bottom-right-radius:0}
  /* The line is the company's progress, as on the desktop timeline: solid through what's done, a moving dash on
     the step in progress. Which card is open shows in the label. */
  .jtabs button{position:relative;display:grid;gap:4px;justify-items:start;min-height:44px;padding:14px 0 4px;border:0;border-radius:0;background:none;color:var(--graphite-dim);font:inherit;text-align:left;cursor:pointer}
  .jtabs button::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:2px;background:var(--g-blue)}
  .jtabs button:last-child::before{background:repeating-linear-gradient(90deg,var(--g-blue) 0 10px,transparent 10px 18px);background-size:36px 3px;opacity:.85;animation:jDash 1.1s linear 3}
  .jtabs:not(.in) button:last-child::before{animation-play-state:paused}
  .jtabs button b{font-size:var(--t-14);font-weight:500;color:inherit}
  .jtabs button small{font-size:var(--t-14);color:var(--graphite-dim)}
  .jtabs button[aria-pressed="true"] b{color:var(--graphite-ink);font-weight:600}
  .jtabs button:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px}
  .journey{margin-top:12px}
  .journey li{display:none;gap:10px;padding:20px 16px;border:1px solid var(--graphite-rule);border-radius:var(--r-md);background:var(--graphite-2)}
  .journey li.sel{display:grid}
  .journey li::before,.journey .jtrack,.journey .when,.journey .jstep{display:none}
  .journey li.now h3::after{content:"in progress";display:inline-block;margin-left:8px;vertical-align:2px;padding:2px 8px;border-radius:999px;background:var(--g-sel);color:var(--g-blue-ink);font:400 var(--t-14)/1.4 var(--mono)}
  /* The three rules: one card, a row each, the plane's colour on its key. */
  .flow-rules{gap:0;border:1px solid var(--graphite-rule);border-radius:var(--r-md);background:var(--graphite-2);overflow:hidden}
  .flow-rules li{grid-template-columns:64px minmax(0,1fr);column-gap:12px;row-gap:2px;padding:14px 16px;border:0;border-radius:0;background:none;box-shadow:inset 3px 0 0 var(--fr)}
  .flow-rules li+li{border-top:1px solid var(--graphite-rule)}
  .flow-rules li::after,.flow-rules li::before{display:none!important}
  .flow-rules .fr-k{grid-row:span 2;padding-top:2px}
  .flow-rules b{font-size:var(--t-16)}
  /* The scenario as an agent run: the trace leads and grows with the run, each step a dot on one line. */
  .flow-panel.stacked > .flow-canvas{display:none}
  .flow-panel.stacked.map-open > .flow-canvas{display:block}
  .flow-panel.stacked > .flow-map-btn{order:2}
  .flow-panel.stacked.map-open > .flow-canvas{order:3;border-top:1px solid var(--graphite-rule)}
  .flow-panel.stacked > .flow-rails{order:4}
  .flow-panel.stacked > .trace{height:auto;max-height:none;min-height:180px;overflow:visible;padding:16px;gap:0}
  .flow-panel .trace::before{content:"illustrative run · sample data";display:block;margin-bottom:10px;color:var(--graphite-dim);font:400 var(--t-14)/1.4 var(--mono)}
  .flow-panel .trace p{position:relative;grid-template-columns:20px minmax(0,1fr);gap:10px;padding:0 0 12px}
  .flow-panel .trace p .t{font-size:0}
  .flow-panel .trace p .t::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--graphite-dim)}
  .flow-panel .trace p:not(:last-of-type)::after{content:"";position:absolute;left:8px;top:21px;bottom:-1px;width:2px;background:var(--graphite-rule)}
  .flow-panel .trace p.agent .t::before{background:var(--g-blue)}
  .flow-panel .trace p.hold .t::before{background:var(--g-hold)}
  .flow-panel .trace p.deny .t::before{background:var(--g-deny)}
  .flow-panel .trace p.allow .t::before{background:var(--g-allow)}
  .flow-panel .trace p.dim{padding:0}
  .flow-panel .hold-btns{margin:0 0 12px 30px;gap:8px}
  .flow-panel .hold-btns button{min-height:44px;padding:0 16px}
  .flow-panel .trace .sum{margin-top:4px}
  .flow-panel .next-sc{min-height:44px}
  .flow-map-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin:0;padding:0 16px;border:0;border-top:1px solid var(--graphite-rule);background:none;color:var(--graphite-ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .flow-map-btn::after{content:"+";font:400 var(--t-18)/1 var(--mono);color:var(--graphite-dim)}
  .flow-map-btn[aria-expanded="true"]::after{content:"−"}
  .flow-map-btn:focus-visible{outline:2px solid var(--blue-2);outline-offset:-2px}
  .flow-note{display:none}
}
/* Garm chart on phones: grouped bars, each value written at the bar's end, so no axis to read across. */
@media (max-width:600px){
  .gch-key{display:grid;gap:6px}
  .gch-key .gch-dot{width:14px;height:10px;margin:0;border-radius:0 4px 4px 0;box-shadow:none;flex:none}
  .gch-h{margin-bottom:4px}
  .gch-row{grid-template-columns:minmax(0,1fr);gap:8px;min-height:0;padding:12px 0}
  .gch-lab{padding:0}
  .gch-track{display:grid;gap:6px;height:auto;margin:0;background:none}
  /* Each value is a bar on its own full-length track, the number in a column at the right, so 0% reads as an
     empty track rather than a sliver. */
  .gch-rows .gch-dot{position:relative;inset:auto;left:0;margin:0;width:100%;height:10px;border-radius:999px;box-shadow:none;
    background:linear-gradient(var(--c),var(--c)) 0 0/calc(var(--x) * .8) 100% no-repeat,linear-gradient(var(--sunk),var(--sunk)) 0 0/80% 100% no-repeat}
  .gch-rows .gch-dot.on-file{--c:var(--gch-a)}.gch-rows .gch-dot.known{--c:var(--gch-b)}
  .gch-rows .gch-dot b,.gch-rows .gch-dot.flip b{left:auto;right:0;width:17%;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
  .gch-axis{display:none}
  .gch-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
}
/* Wider screens: the system prompt peeks too, and unfolds in place instead of scrolling inside its own box. */
@media (min-width:601px){
  #sysprompt.peek{max-height:none;overflow:visible}
  #sysprompt.peek:not(.peek-open){max-height:560px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  #prompt .peek-btn{display:flex;margin:4px auto 18px}
  #prompt .peek-btn[hidden]{display:none}
}
/* Ch6 on phones: the four results as a 2×2 grid of stat cards (label over value), the chosen one raised with an
   accent edge. Four squeezed segments wrapped their labels and read as a form control, not as results. */
@media (max-width:600px){
  .evx-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px;padding:0;background:none;border-radius:0}
  .evx-tabs button{position:relative;min-height:0;padding:12px 14px;gap:6px;justify-items:start;align-content:start;text-align:left;border:1px solid var(--rule)!important;border-radius:12px;background:var(--surface);overflow:hidden}
  .evx-tabs .evx-l{font:500 var(--t-14)/1.2 var(--sans);color:var(--ink-3);white-space:nowrap}
  .evx-tabs .evx-v{font-size:var(--t-24)!important;line-height:1}
  .evx-tabs button[aria-selected="false"] .evx-v{color:var(--ink-2)}
  .evx-tabs button[aria-selected="true"]{border-color:var(--blue)!important;box-shadow:inset 0 0 0 1px var(--blue)}
  .evx-tabs button[aria-selected="true"] .evx-l{color:var(--blue-ink)}
  .evx-tabs button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
  .gch-switch button:focus-visible{box-shadow:inset 0 0 0 2px var(--blue);outline:0}
}
/* Ch1 on phones: the parts row is a slim bar of tappable segments; a tap opens the part's card. */
@media (max-width:600px){
  .cw-zoom{height:28px!important;gap:2px}
  .cw-zoom i{border-radius:6px}
}
/* Phones: stat lists and levels as hairline rows and a stepper, not stacks of grey slabs. */
@media (max-width:600px){
  .garm-stats{gap:0;border-top:1px solid var(--rule)}
  .garm-stats>div{grid-template-columns:minmax(0,1fr)!important;gap:4px!important;padding:14px 0!important;background:none!important;border-radius:0!important;border-bottom:1px solid var(--rule)!important}
  .garm-stats dt{font-size:var(--t-24);font-variant-numeric:tabular-nums}
  .skill-levels{position:relative;gap:0}
  .skill-levels::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:2px;background:var(--rule)}
  .skill-levels li{position:relative;padding:12px 0 18px 28px!important;background:none!important;border-radius:0!important}
  .skill-levels li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--blue);box-sizing:border-box}
  .skill-levels li:first-child::before{background:var(--blue)}
}
/* Ch8 on phones: six metrics as a 2×3 grid with whole labels; the trend lines stay on wider screens (at three
   across, "p95 of answered" was cut and a short trend looked like a stray dash). */
@media (max-width:600px){
  .sd-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sd-m,.sd-m:nth-child(n){border:0!important;border-top:1px solid var(--rule)!important;padding:12px 14px!important}
  .sd-m:nth-child(-n+2){border-top:0!important}
  .sd-m:nth-child(even){border-left:1px solid var(--rule)!important}
  .sd-m span{white-space:normal}
  .sd-m svg{display:none}
}
/* Disclosure rows: a text button with a chevron that turns, not the browser's default triangle. */
:is(.connect-more,.rz-paste)>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:32px}
:is(.connect-more,.rz-paste)>summary::-webkit-details-marker{display:none}
:is(.connect-more,.rz-paste)>summary::after{content:"";width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s}
:is(.connect-more,.rz-paste)[open]>summary::after{transform:rotate(225deg);margin-top:3px}
@media (pointer:coarse),(max-width:600px){:is(.connect-more,.rz-paste)>summary{min-height:44px}}
/* Touch tablets: inline text controls still reach 44px. */
@media (pointer:coarse){
  .rz-note .rz-more{display:inline;min-height:0;padding-block:11px;margin-block:-11px}
  #finCopy{min-height:44px}
}
/* Chips in a sideways row: the focus ring sits inside the chip, since the row clips anything drawn outside it. */
@media (max-width:600px){
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.fin-chips,.insp-rail,.sd-controls .seg) :is(button,.srv):focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
}
/* ---------- Phones as an app: shared pieces (2026-10-27 native pass) ---------- */
.fine-row{display:none}
@media (max-width:600px){
  /* A chapter's concept is an info chip under the lead; the explanation opens in a sheet. */
  .concept.inline{margin-top:16px;padding-top:0;border-top:0}
  .concept-s{display:inline-flex;width:auto;min-height:40px;padding:0 14px 0 10px;gap:8px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font:500 var(--t-14)/1.2 var(--sans);color:var(--ink)}
  .concept-s .concept-k{display:none}
  .concept-s::before{content:"i";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:var(--on-blue);font:700 12px/1 var(--serif, Georgia),serif;font-style:italic}
  .concept-s::after{display:none}
  .sec.dark .concept-s{border-color:var(--graphite-rule);background:var(--graphite-2);color:var(--graphite-ink)}
  /* Field notes: an inset grouped list with its header above, each row opening its note in a sheet. */
  .notes{border:0!important;background:none!important;overflow:visible!important}
  .notes::before{padding:0 4px 8px!important;text-transform:none}
  .notes .note{background:var(--surface)!important;border:1px solid var(--rule)!important;border-radius:0!important}
  .notes .note+.note{border-top:0!important;box-shadow:inset 0 1px 0 var(--rule)}
  .notes .note:first-of-type{border-radius:var(--r-md) 16px 0 0!important}
  .notes .note:last-of-type{border-radius:0 0 16px 16px!important}
  .notes .note:only-of-type{border-radius:var(--r-md)!important}
  .sec.dark .notes .note{background:var(--graphite-2)!important;border-color:var(--graphite-rule)!important}
  .sec.dark .notes .note+.note{box-shadow:inset 0 1px 0 var(--graphite-rule)}
  .notes .note summary{min-height:52px;justify-content:center;padding:12px 40px 12px 16px}
  .notes .note summary b{font-size:var(--t-16);line-height:1.35}
  :is(.notes .note summary,.annotated summary)::after{content:""!important;width:8px;height:8px;border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:rotate(45deg)!important;top:calc(50% - 4px)!important;right:18px!important;position:absolute}
  .annotated summary{position:relative;min-height:52px;padding:12px 40px 12px 16px}
  /* Fine print under a demo: one row that opens it. */
  .fine-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;margin:0;padding:0 16px;border:0;border-top:1px solid var(--rule);background:none;color:var(--ink-2);font:500 var(--t-14)/1.2 var(--sans);text-align:left;cursor:pointer}
  .fine-row::before{content:"i";display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font:700 11px/1 Georgia,serif;font-style:italic}
  .fine-row::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:rotate(45deg)}
  .sec.dark .fine-row{color:var(--graphite-dim);border-top-color:var(--graphite-rule)}
  .fine{display:none!important}
  /* Sheet reading. */
  .appsheet-read{display:grid;gap:12px;font-size:var(--t-16);line-height:1.6;color:var(--ink)}
  .appsheet-read p{margin:0;max-width:none;padding:0;color:var(--ink-2)}
  .appsheet-read b{color:var(--ink);font-weight:600}
  .appsheet-read code{font-size:var(--t-14);padding:1px 5px;border-radius:4px;background:var(--sunk)}
}
/* Ch1 on phones: the cache demo's switch is a settings row, label left and switch right. */
@media (max-width:600px){
  .cache-actions{flex-wrap:wrap}
  .cache-actions .tgl{order:3;flex:1 0 100%;display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;min-height:52px;margin-top:4px;padding:0;border-top:1px solid var(--rule);font-size:var(--t-14);color:var(--ink)}
}
/* Ch2 on phones: the role's description clamps to three lines with "more"; the feed shows three updates. */
.live-all{display:none}
@media (max-width:600px){
  :is(.instr,.garm-copy > p:last-of-type,.fit-line,.term .rt-sum){position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  :is(.instr,.garm-copy > p:last-of-type,.fit-line,.term .rt-sum).open{display:block;-webkit-line-clamp:unset}
  .live-list:not(.all) li:nth-child(n+4){display:none}
  .live-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-top:1px solid var(--graphite-rule);background:none;color:var(--g-blue-ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .live-all[hidden]{display:none}
}
/* Ch3 on phones: capabilities as a grouped list under section headers, each row opening its evidence in a sheet. */
@media (max-width:600px){
  .cap-group h5{margin:20px 0 8px;padding:0 2px}
  .cap-group .caps{border:1px solid var(--rule);border-radius:14px;background:var(--surface);overflow:hidden}
  .cap-group details.cap{padding:0;border-bottom:0}
  .cap-group details.cap+details.cap{border-top:1px solid var(--rule)}
  .cap-group details.cap>summary{position:relative;min-height:48px;padding:0 40px 0 14px}
  .cap-group details.cap>summary b{font-size:var(--t-16);font-weight:500}
  .cap-group details.cap>summary::after{content:""!important;position:absolute;right:16px;top:calc(50% - 4px);width:7px;height:7px;border-right:2px solid var(--ink-3);border-top:2px solid var(--ink-3);transform:rotate(45deg)}
  .cap-group details.cap>p{display:none}
}
/* Ch5 on phones: the two designs as two result cards over one lane at a time. */
.sg-pick{display:none}
@media (max-width:600px){
  .sg-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px 0}
  .sg-pick button{display:grid;gap:4px;justify-items:start;text-align:left;padding:10px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink-2);font:500 var(--t-14)/1.25 var(--sans);cursor:pointer}
  .sg-pick button[aria-selected="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}
  .sg-pick button:focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
  .sg-pick-s{font:600 var(--t-14)/1.2 var(--sans);color:var(--ink-3)}
  .sg-pick-s.deny{color:var(--deny)}.sg-pick-s.hold{color:var(--hold)}.sg-pick-s.allow{color:var(--allow)}
  .sg-lanes[data-lane="0"] .sg-lane:nth-child(2),.sg-lanes[data-lane="1"] .sg-lane:nth-child(1){display:none}
  .sg-lane+.sg-lane{border-top:0!important}
}
@media (max-width:600px){.sg-lane header h4{display:none}.sg-lane{padding-top:12px}}
@media (max-width:600px){.rz-note .rz-more{display:inline;min-height:0;padding:11px 0;margin:-11px 0}}
/* Ch8 Delivery on phones: phases first, tasks on request; team size as one segmented control. */
.g-all{display:none}
@media (max-width:600px){
  #plGantt:not(.all) .g-ws:not(.g-phases){display:none}
  .g-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin:0;border:0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);border-radius:0;background:var(--surface);color:var(--blue-ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .sd-group:has(>[data-team]){display:grid!important;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;gap:2px}
  .sd-group:has(>[data-team]) .sd-k{margin-right:10px}
  .sd-group [data-team]{min-height:40px!important;border:0!important;border-radius:0!important;background:var(--sunk)!important;color:var(--ink)!important}
  .sd-group [data-team]:nth-child(2){border-radius:999px 0 0 999px!important}
  .sd-group [data-team]:last-child{border-radius:0 999px 999px 0!important}
  .sd-group [data-team][aria-pressed="true"]{background:var(--ink)!important;color:var(--paper)!important}
}
/* Ch8 Delivery on phones: scope, tooling and risks are on/off settings, so they read as switch rows. */
@media (max-width:600px){
  .sd-group:is(:has(>[data-scope]),:has(>[data-ai]),:has(>[data-risk])){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:0;border:1px solid var(--rule);border-radius:12px;background:var(--surface);overflow:hidden}
  .sd-group:is(:has(>[data-scope]),:has(>[data-ai]),:has(>[data-risk])) .sd-k{padding:10px 14px 6px;margin:0;font-size:var(--t-14);color:var(--ink-3)}
  .sd-group :is([data-scope],[data-ai],[data-risk]){display:flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px!important;padding:8px 14px!important;border:0!important;border-top:1px solid var(--rule)!important;border-radius:0!important;background:none!important;color:var(--ink)!important;font:400 var(--t-14)/1.35 var(--sans)!important;text-align:left;white-space:normal!important}
  .sd-group :is([data-scope],[data-ai],[data-risk])::after{content:"";flex:none;width:44px;height:26px;border-radius:999px;background:var(--rule) radial-gradient(circle 10px at 13px 50%,var(--surface) 96%,transparent 100%) no-repeat;transition:background .2s}
  .sd-group :is([data-scope],[data-ai],[data-risk])[aria-pressed="true"]::after{background:var(--blue) radial-gradient(circle 10px at calc(100% - 13px) 50%,var(--surface) 96%,transparent 100%) no-repeat}
  .sd-group :is([data-scope],[data-ai],[data-risk]):focus-visible{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
}
/* The link at the end of a lead keeps the line spacing; its ::after already gives it a 44px tap area. */
@media (max-width:600px){.lead .ne-link{display:inline;padding-block:0}}
/* Phones: anything scrolled into view (a focused row, a jump link) stops above the app bar, not under it. */
@media (max-width:600px){html{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
/* Ch2 on phones: "Hiring for" is a dropdown under its button, as wide as the button. The count sits on the caption
   line so the role name has the full width; options are one compact column. */
@media (max-width:600px){
  .hf{position:relative;width:100%}
  .hf-btn{width:100%;min-width:0;grid-template-columns:minmax(0,1fr) auto 14px;column-gap:10px;row-gap:2px;padding:10px 14px}
  .hf-val{display:contents}
  .hf-cap{grid-column:1;grid-row:1}
  .hf-cnt{grid-column:2;grid-row:1;justify-self:end}
  .hf-val #hfLabel{grid-column:1 / 3;grid-row:2;min-width:0}
  .hf-btn svg{grid-column:3;grid-row:1 / 3}
  .hf-list{top:calc(100% + 6px);left:0;right:0;width:auto;max-height:min(60vh,420px);padding:6px;gap:2px;grid-template-columns:minmax(0,1fr)}
  .hf-list li{min-height:48px;padding:8px 12px;align-items:center;align-content:center}
  .hf-list .hf-n{padding:0;background:none!important}
  .hf-list li[aria-selected="true"]{border-color:var(--g-sel-rule);background:var(--g-sel)}
  .hf-list li[aria-selected="true"] .hf-n{color:var(--blue-2);background:var(--g-sel-hover)}
  .hf-list .hf-d{display:none}
}
/* Ch4 on phones: the run log reads in one colour (status is the dot), the chips carry only the scenario, and the
   system diagram is a list grouped by zone, in the order a request meets it, whose rows light as the run plays. */
.fz-h{display:none}
@media (max-width:600px){
  .flow-panel .trace p span:last-child{color:var(--graphite-ink)!important}
  .flow-panel .trace p.sys span:last-child{color:var(--g-ink-2)!important}
  .flow-panel .trace .sum{color:var(--g-ink-2);font-family:var(--sans);font-size:var(--t-14);line-height:1.5;border-top-color:var(--graphite-rule)}
  .flow-tabs button .sc-n{display:none}
  .flow-panel.stacked > .flow-canvas{padding:0;background:var(--graphite-2)}
  .flow-panel.stacked #flowNodes{display:flex!important;flex-direction:column;padding:0 0 8px!important;gap:0!important}
  .flow-panel.stacked #flowNodes::before{display:none}
  .flow-panel.stacked #flowNodes > *{order:var(--o)}
  .flow-panel.stacked .fz-h{display:block;margin:0;padding:16px 16px 6px;font-size:var(--t-14);color:var(--graphite-dim)}
  .flow-panel.stacked .fnode{display:block;width:auto!important;min-width:0;max-width:none;margin:0;padding:10px 16px;border:0!important;border-top:1px solid var(--graphite-rule)!important;border-radius:0;background:none;box-shadow:none!important;transition:background .25s}
  .flow-panel.stacked .fnode::before{display:none!important}
  .flow-panel.stacked .fnode b{gap:10px;font-size:var(--t-14)}
  .flow-panel.stacked .fnode b::before{width:8px;height:8px;transition:background .25s}
  .flow-panel.stacked .fnode small{padding-left:18px;margin-top:2px}
  .flow-panel.stacked .fnode.hot{background:var(--g-sel)}
  .flow-panel.stacked .fnode.hold{background:color-mix(in srgb,var(--g-hold) 12%,transparent)}
  .flow-panel.stacked .fnode.deny{background:color-mix(in srgb,var(--g-deny) 12%,transparent)}
}
/* Ch2 on phones: the JSON-RPC log is a list, not a box that scrolls inside the page: the latest eight messages,
   each a method line over its server, the JSON opening in a sheet. */
.lg-all{display:none}
@media (max-width:600px){
  .insp-log ol{max-height:none;overflow:visible;padding:0 0 4px}
  .insp-log ol:not(.all) li:nth-last-child(n+9){display:none}
  .insp-log li summary{display:grid!important;grid-template-columns:16px minmax(0,1fr)!important;grid-template-rows:auto auto;column-gap:8px;row-gap:0;min-height:48px;padding:6px 14px;border-radius:0;border-top:1px solid var(--graphite-rule);align-content:center}
  .insp-log li summary .arrow{grid-row:1 / 3;align-self:start;padding-top:1px}
  .insp-log li summary .lbl{grid-column:2;grid-row:1;white-space:normal}
  .insp-log li summary .lg-srv{grid-column:2;grid-row:2;font-size:var(--t-14)}
  .insp-log li summary .lg-t{display:inline;padding:0}
  .insp-log li details > :not(summary){display:none}
  .lg-all{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-top:1px solid var(--graphite-rule);background:none;color:var(--g-blue-ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .lg-all[hidden]{display:none}
  .appsheet pre{margin:12px 0 0;padding:12px;border-radius:12px;background:var(--sunk);font:400 var(--t-14)/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
}
/* Ch7 on phones: the resume comes right after the role it's tailored to. Order: role, length, resume, then the
   posting tools and their fit report, then downloads (the sticky Download PDF bar covers the resume meanwhile). */
@media (max-width:600px){
  .rz{gap:16px}
  .rz-controls{display:contents}
  .rz-controls > .rz-block:first-child{order:1}
  .rz-controls > #rzPageText{order:2;margin:0}
  .rz > #rzSheet{order:3}
  .rz > .peek-btn{order:4;margin-top:-4px}
  .rz-controls > .rz-block:nth-child(2){order:5;margin-top:16px}
  .rz-controls > #rzCoverage{order:6}
  .rz-controls > .rz-dl{order:7}
}
@media (max-width:600px){#rzSkill{display:none}.rz-dl{grid-template-columns:1fr!important}}
/* Phone QA pass 2026-10-27: no doubled rule between grouped rows; list items wrap normally; ch8 diagram frame sized
   to its content and metric rows sized to their own content. */
@media (max-width:600px){
  .notes .note{border-bottom-width:0!important;box-shadow:none!important}
  .notes .note:last-of-type{border-bottom-width:1px!important}
  .notes .note+.note{border-top:1px solid var(--rule)!important}
  .sec.dark .notes .note+.note{border-top-color:var(--graphite-rule)!important}
  li,dd{text-wrap:wrap}
  .sd-stage{height:560px!important}
  .sd-metrics{grid-auto-rows:auto!important}
}
.clamp-more{display:none}
@media (max-width:600px){
  .clamp-more{display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 -6px;padding:0;border:0;background:none;color:var(--blue-ink);font:500 var(--t-14)/1 var(--sans);cursor:pointer}
  .clamp-more[hidden]{display:none}
  :is(.sec.dark,.term) .clamp-more{color:var(--g-blue-ink)}
}
/* Ch4 on phones, second pass: the run log reads in the body font (full sentences in mono wrapped raggedly), and each
   audit rail is its key and count over one line of description. */
@media (max-width:600px){
  .flow-panel .trace p span:last-child{font:400 var(--t-16)/1.45 var(--sans)}
  .flow-panel .trace p .t::before{top:6px}
  .flow-panel .trace p:not(:last-of-type)::after{top:20px}
  .flow-panel .trace .hop{display:block;margin-top:3px;font:400 var(--t-14)/1.4 var(--mono);color:var(--graphite-dim)}
  .flow-map-btn{color:var(--g-blue-ink)}
  .flow-map-btn::after,.flow-map-btn[aria-expanded="true"]::after{content:none}
  .flow-rails p{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 16px}
  .flow-rails span{grid-area:1/1;flex-basis:auto}
  .flow-rails b{grid-area:1/2}
  .flow-rails small{grid-area:2/1/3/3;font:400 var(--t-14)/1.45 var(--sans);color:var(--g-ink-2)}
}
/* Ch4 below 760px: the diagram as a column with its real links (flow.js draws them from where the cards land). The
   inputs merge into the proactive agents; the parts they hand off to are inset, so a rail on the left reaches each
   one and a rail on the right carries each output into the policy checks; you and the send share the last row. */
.flow-panel.stacked #flowSvg{display:block;z-index:0}
.flow-panel.stacked #flowSvg .w{marker-end:url(#fa)}
.flow-panel.stacked #flowSvg .w.hot{marker-end:url(#fa-hot)}
.flow-panel.stacked #flowSvg .w.hold{marker-end:url(#fa-hold)}
.flow-panel.stacked #flowSvg .w.deny{marker-end:url(#fa-deny);stroke-dasharray:none}
#flowSvg .fa{fill:var(--g-rule-2)}#flowSvg .fa.hot{fill:var(--blue-2)}#flowSvg .fa.hold{fill:var(--g-hold)}#flowSvg .fa.deny{fill:var(--g-deny)}
.flow-panel.stacked #flowNodes.wired{position:relative;z-index:1;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px!important;padding:16px!important}
.flow-panel.stacked #flowNodes.wired::before,.flow-panel.stacked #flowNodes.wired .fz-h,.flow-panel.stacked #flowNodes.wired .fnode::before{display:none!important}
.flow-panel.stacked #flowNodes.wired .fnode{grid-column:1/-1;order:0;margin:0;padding:10px 12px;border:1px solid var(--graphite-rule)!important;border-radius:var(--r-sm);background:var(--graphite-3)}
.flow-panel.stacked #flowNodes.wired .fnode small{padding-left:18px;font:400 var(--t-14)/1.35 var(--sans)}
.flow-panel.stacked #flowNodes.wired .fnode:is(.kind-io,.kind-human,.kind-sys){grid-column:auto}
.flow-panel.stacked #flowNodes.wired .fnode:is(.kind-agent,.kind-model,.kind-mem){margin-inline:26px}
.flow-panel.stacked #flowNodes.wired .fnode:is(.kind-orch,.kind-gate,.kind-human,.kind-sys){margin-top:28px}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="renter"]{order:1}.flow-panel.stacked #flowNodes.wired .fnode[data-id="rentals"]{order:2}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="watch"]{order:3}.flow-panel.stacked #flowNodes.wired .fnode[data-id="rules"]{order:4}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="model"]{order:5}.flow-panel.stacked #flowNodes.wired .fnode[data-id="track"]{order:6}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="routine"]{order:7}.flow-panel.stacked #flowNodes.wired .fnode[data-id="decide"]{order:8}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="checks"]{order:9}.flow-panel.stacked #flowNodes.wired .fnode[data-id="you"]{order:10}
.flow-panel.stacked #flowNodes.wired .fnode[data-id="send"]{order:11}
/* Lit cards in the column view: the desktop's outline and glow (the phone list's !important borders would hide them). */
.flow-panel.stacked #flowNodes.wired .fnode.hot{border-color:var(--blue-2)!important;box-shadow:0 0 0 3px rgba(68,147,248,.22)!important;background:var(--g-sel)}
.flow-panel.stacked #flowNodes.wired .fnode.hold{border-color:var(--g-hold)!important;box-shadow:0 0 0 3px rgba(239,175,69,.2)!important;background:color-mix(in srgb,var(--g-hold) 12%,var(--graphite-3))}
.flow-panel.stacked #flowNodes.wired .fnode.deny{border-color:var(--g-deny)!important;box-shadow:0 0 0 3px rgba(240,108,102,.2)!important;background:color-mix(in srgb,var(--g-deny) 12%,var(--graphite-3))}
.flow-panel.stacked #flowNodes.wired .fnode.ok{border-color:color-mix(in srgb,var(--g-allow) 60%,var(--graphite))!important}
/* Without JavaScript the résumé sheet is empty, so the record shows as plain HTML in its place (scripts/seo.mjs). */
.nojs-resume{padding:24px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);color:var(--ink);font-size:var(--t-16);line-height:1.55}
.nojs-resume h3{margin:0 0 8px;font-size:var(--t-20)}.nojs-resume h4{margin:20px 0 4px;font-size:var(--t-16)}
.nojs-resume .meta{margin:0;color:var(--ink-2);font-size:var(--t-14)}.nojs-resume ul{padding-left:20px}
.nojs-resume dl{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:4px 14px}.nojs-resume dd{margin:0;color:var(--ink-2)}
/* One selected state, the same at every width (2026-10-29): a choice on a light surface fills with ink; a choice or
   a row on a graphite surface takes the navy selection colour; a tab that switches a panel is underlined. Only colours
   and borders change here, never sizes or layout, so the phone layouts stay exactly as they were. */
.rz-presets button[aria-checked="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ag-models button[aria-pressed="true"]{background:var(--g-sel);border-color:var(--g-sel-rule);color:var(--graphite-ink)}
@media (max-width:600px){
  /* Segmented controls: the ink fill desktop uses, instead of a raised white thumb. */
  :is(.rz-len button[aria-pressed="true"],.rz-len button.on,.skill-agents button[aria-pressed="true"],.sd-controls .seg:not(:has(>:nth-child(4))) button[aria-pressed="true"],.gch-switch button[aria-pressed="true"]){background:var(--ink)!important;color:var(--paper)!important;box-shadow:none!important}
  /* Panel tabs: underlined, as on desktop, on a plain rule instead of a segmented track. */
  .card-tabs{background:none!important;border-radius:0!important;padding:0!important;box-shadow:inset 0 -1px 0 var(--rule)}
  .card-tabs button{border-radius:0!important}
  .card-tabs button[aria-selected="true"]{background:none!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important}
  .sg-tabs{box-shadow:inset 0 -1px 0 var(--rule)}
  .sg-tabs button{border:0!important;border-radius:0!important;background:none!important;color:var(--ink-2)}
  .sg-tabs button:is([aria-pressed="true"],[aria-selected="true"]){background:none!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--ink)!important}
  /* On graphite: navy, as the desktop server list and scenario tabs. */
  .sec.dark :is(.flow-tabs,.rz-presets,.space-legend) button:is([aria-pressed="true"],[aria-checked="true"]){background:var(--g-sel)!important;color:var(--graphite-ink)!important;border-color:var(--g-sel-rule)!important}
  .insp-rail .srv.sel{background:var(--g-sel)!important;border-color:var(--g-sel-rule)!important}
  .insp-rail .srv.sel .srv-org{color:var(--graphite-ink)!important}.insp-rail .srv.sel .srv-n{color:var(--g-blue-ink)!important}
  .ag-models button[aria-pressed="true"]{background:var(--g-sel)!important;border:1px solid var(--g-sel-rule)!important;color:var(--graphite-ink)!important}
}
/* Chapter 9 on phones too: the inbox sample and the policy sit on the panel, as on desktop (no fill box). */
@media (max-width:600px){.ja-grid :is(.ja-card,.policy){background:none!important;border-radius:0!important}.ja-grid .policy{border-top:1px solid var(--graphite-rule)!important}}

/* Chip rows below desktop: one square chip, the shape chapter 5's attack picker has on a phone (user, 2026-10-29: "I
   like these square buttons on mobile… just be consistent"). Rows that pick or ask (roles, clusters, scenarios, role
   presets, the finale's prompts); segmented controls keep their track, and desktop is unchanged. */
@media (max-width:600px){
  :is(.rz-presets,.space-legend,.flow-tabs,.sg-tabs,.fin-chips,.sd-controls .seg:has(>:nth-child(4))) button,.insp-rail .srv{border-radius:0!important}
}
@media (min-width:601px) and (max-width:1023px){
  :is(.rz-presets,.space-legend,.fin-chips) button{border-radius:0!important}
}