/* Layout: one cool-white bench. Copy left, instrument right; under it a single bordered
   "replay room" where the trace, the branch form, the diff and the tests share one frame. */
:root{
  --ground:#f2f4f7; --sheet:#ffffff; --well:#f4f6f9; --line:#e3e6ec; --line-2:#cfd5de;
  --ink:#090b10; --ink-2:#2a303c; --muted:#646d7c; --faint:#97a0ae;
  --accent:#2360ea; --accent-ink:#1d52d4; --on-accent:#ffffff;
  --blue-wash:#eef4ff; --blue-tint:#dde9ff; --blue-edge:#bcd2ff;
  --ok-bg:#e4f5ea; --ok-ink:#17764a; --bad-bg:#fdeaea; --bad-ink:#b3261e;
  --btn:#090b10; --btn-ink:#ffffff;
  --f-top:#ffffff; --f-front-a:#ffffff; --f-front-b:#e9edf3; --f-side:#d6dce6; --f-floor:#f4f6f9; --f-wall:#c9d1dd;
  --f-edge:rgba(20,30,50,.10); --shadow:rgba(20,35,70,.22);
  --display:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --body:'Geist','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#07090d; --sheet:#0e1117; --well:#151922; --line:#222834; --line-2:#343c4c;
    --ink:#f3f5f9; --ink-2:#d3d8e2; --muted:#98a1b1; --faint:#6a7384;
    --accent:#3f70f5; --accent-ink:#8fb0ff; --on-accent:#ffffff;
    --blue-wash:#111a2f; --blue-tint:#182749; --blue-edge:#2a437f;
    --ok-bg:#0f2a1d; --ok-ink:#62d394; --bad-bg:#351515; --bad-ink:#ff8f85;
    --btn:#f3f5f9; --btn-ink:#090b10;
    --f-top:#3c465c; --f-front-a:#2f384c; --f-front-b:#242b3b; --f-side:#191e2b; --f-floor:#333c51; --f-wall:#141824;
    --f-edge:rgba(255,255,255,.07); --shadow:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#07090d; --sheet:#0e1117; --well:#151922; --line:#222834; --line-2:#343c4c;
  --ink:#f3f5f9; --ink-2:#d3d8e2; --muted:#98a1b1; --faint:#6a7384;
  --accent:#3f70f5; --accent-ink:#8fb0ff; --on-accent:#ffffff;
  --blue-wash:#111a2f; --blue-tint:#182749; --blue-edge:#2a437f;
  --ok-bg:#0f2a1d; --ok-ink:#62d394; --bad-bg:#351515; --bad-ink:#ff8f85;
  --btn:#f3f5f9; --btn-ink:#090b10;
  --f-top:#3c465c; --f-front-a:#2f384c; --f-front-b:#242b3b; --f-side:#191e2b; --f-floor:#333c51; --f-wall:#141824;
  --f-edge:rgba(255,255,255,.07); --shadow:rgba(0,0,0,.6);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 .875rem/1.45 var(--body);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,pre{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:.375rem}
.i{width:1.125rem;height:1.125rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:75.75rem;margin-inline:auto;padding-inline:1rem}
.sheet{min-height:100dvh;background:var(--sheet)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--sheet) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:1.25rem;height:3.5rem}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;font:700 1.625rem/1 var(--display);letter-spacing:-.045em}
.brand svg{width:2rem;height:2rem;color:var(--accent)}
.nav-links{display:flex;align-self:stretch;margin-left:1rem}
.nav-links a{display:flex;align-items:center;padding-inline:1rem;text-decoration:none;font-size:.8125rem;font-weight:500;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.nav-mobile{margin-left:auto;display:none;gap:.25rem}
.iconbtn{display:grid;place-items:center;width:2.5rem;height:2.5rem;border:0;background:none;border-radius:.5rem;color:var(--ink)}
.iconbtn .i{width:1.5rem;height:1.5rem}
.iconbtn.tint{color:var(--accent-ink)}
.menu{border-top:1px solid var(--line);padding-block:.75rem 1rem}
.menu .wrap{display:grid;gap:.5rem}
.menu a{padding:.6rem .25rem;text-decoration:none;font-weight:500;border-bottom:1px solid var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.25rem;padding-inline:1rem;border-radius:.5rem;border:1px solid transparent;font-size:.8125rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:transform .12s,background-color .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--btn);color:var(--btn-ink)}
.btn-ink:hover{background:color-mix(in srgb,var(--btn) 82%,var(--accent))}
.btn-outline{background:var(--sheet);border-color:var(--line-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--muted)}
.btn-lg{height:2.75rem;padding-inline:1.6rem;font-size:.9375rem}
.btn-block{width:100%}
.btn[disabled]{opacity:.65;cursor:progress}
.credits{display:inline-flex;align-items:center;gap:.6rem;height:2.25rem;padding-inline:.9rem;border-radius:.5rem;border:1px solid var(--blue-tint);background:var(--blue-wash);font-size:.8125rem;font-weight:500;color:var(--ink-2)}
.credits .i{color:var(--accent)}
.credits b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
a.credits{text-decoration:none}
.credits[aria-current]{border-color:var(--accent)}
.link{display:inline-flex;align-items:center;gap:.4rem;padding:0;border:0;background:none;color:var(--accent-ink);font-size:.8125rem;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
.link .i{width:1rem;height:1rem}
.link:hover{text-decoration-thickness:2px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:1rem;align-items:center;padding-block:1.75rem 1.25rem}
.eyebrow{font:500 .6875rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
h1{font:800 clamp(2.5rem,4.75vw,3.5rem)/.94 var(--display);letter-spacing:-.055em}
.hero h1{margin-top:1rem}
.lede{margin-top:1rem;font-size:1.0625rem;line-height:1.4;color:var(--ink-2)}
.cta{display:flex;align-items:center;gap:1.5rem;margin-top:1.25rem}
.feats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.feats li{display:flex;align-items:center;gap:.75rem;height:2.5rem;padding-inline:1rem 1.75rem;border:1px solid var(--line);border-radius:.5rem;background:var(--sheet);font-size:.8125rem;font-weight:500}
.feats .i{color:var(--accent);width:1.25rem;height:1.25rem}
.art svg{display:block;width:100%;height:auto;overflow:visible}
.art-label{font:400 11px var(--mono);fill:var(--faint);letter-spacing:.04em}
.art-shadow{fill:var(--shadow)}
.f-top{fill:var(--f-top)} .f-side{fill:var(--f-side)} .f-floor{fill:var(--f-floor)} .f-wall{fill:var(--f-wall)}
.f-top,.f-side,.f-floor,.f-wall,.f-front{stroke:var(--f-edge);stroke-width:.75;stroke-linejoin:round}

/* ---------- replay room ---------- */
main{padding-bottom:1.5rem}
.room{border:1px solid var(--line);border-radius:.875rem;padding:1rem;display:grid;gap:.75rem;background:var(--sheet);scroll-margin-top:4.5rem}
.room-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .9rem;padding:.15rem .25rem 0}
h2{font:700 1.375rem/1.15 var(--display);letter-spacing:-.035em}
h3{font:600 1rem/1.2 var(--display);letter-spacing:-.02em}
.meta{font:400 .6875rem/1.4 var(--mono);color:var(--muted)}
.count{margin-left:auto;display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--ink-2);align-self:center}
.count .i{color:var(--muted)}
.count i{font-style:normal}
.task{display:flex;border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.task b{padding:.55rem 1rem;background:var(--well);border-right:1px solid var(--line);font-size:.8125rem;font-weight:600}
.task span{padding:.55rem 1rem;font:400 .8125rem/1.5 var(--mono);min-width:0}

.stepper{display:flex;align-items:center;gap:.75rem;padding:.35rem 4.5rem}
.stepper .bar{flex:1;height:1.5px;background:var(--line-2);min-width:1rem}
.s{display:flex;align-items:center;gap:.75rem;padding:.25rem;border:0;background:none;border-radius:999px;font-size:.8125rem;white-space:nowrap}
.s .n{display:grid;place-items:center;width:1.875rem;height:1.875rem;border-radius:50%;border:1.5px solid var(--line-2);background:var(--sheet);font:600 .75rem var(--mono);transition:background-color .2s,border-color .2s,color .2s}
.s .n .i{width:.9rem;height:.9rem;stroke-width:2.4}
.s:hover .n{border-color:var(--accent)}
.s[aria-current="step"] .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.s.is-reused .n,.s.is-done .n{background:var(--blue-tint);border-color:var(--blue-edge);color:var(--accent-ink)}
.s.is-running .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent);animation:ring 1s ease-out infinite}
@keyframes ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent)}to{box-shadow:0 0 0 .6rem transparent}}

.bench{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:.75rem}
.panel{border:1px solid var(--line);border-radius:.625rem;padding:1rem;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}
.tabs{display:flex;gap:.25rem}
.tabs button{height:1.75rem;padding-inline:.9rem;border:0;border-radius:.375rem;background:none;font-size:.75rem;font-weight:500;color:var(--muted)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--blue-tint);color:var(--accent-ink)}

.trace{position:relative;display:grid;gap:.35rem;margin-top:.75rem}
.trace::before{content:"";position:absolute;left:calc(.5625rem - .75px);top:1.5rem;bottom:1.5rem;width:1.5px;background:var(--line-2)}
.step{border-radius:.5rem;padding-bottom:0}
.step.is-active{background:var(--blue-wash);padding-bottom:.01px}
.step-row{display:grid;grid-template-columns:1.125rem minmax(0,1fr) auto 1.75rem;align-items:center;gap:.75rem;padding:.6rem .5rem .6rem 0}
.dot{position:relative;z-index:1;justify-self:center;width:.5rem;height:.5rem;border-radius:50%;background:var(--faint);box-shadow:0 0 0 3px var(--sheet)}
.is-active .dot{background:var(--accent);box-shadow:0 0 0 3px var(--blue-wash)}
.step-main{display:flex;align-items:center;gap:.9rem;min-width:0;padding:0;border:0;background:none;text-align:left}
.num{display:grid;place-items:center;flex:none;width:2rem;height:1.75rem;border:1px solid var(--line-2);border-radius:.375rem;background:var(--sheet);font:500 .6875rem var(--mono)}
.is-active .num{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step-text{display:grid;min-width:0}
.step-name{font:600 .8125rem/1.35 var(--mono);letter-spacing:-.01em;overflow-wrap:break-word}
.step-sub{font-size:.6875rem;line-height:1.35;color:var(--muted)}
.warn{display:grid;place-items:center;color:var(--accent-ink)}
.warn .i{width:1.25rem;height:1.25rem}
.chev{display:grid;place-items:center;width:1.75rem;height:1.75rem;border:0;border-radius:.375rem;background:none;color:var(--muted)}
.chev:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.chev .i{width:1rem;height:1rem;transition:transform .18s}
.chev[aria-expanded="true"] .i{transform:rotate(180deg)}

.pill{display:inline-flex;align-items:center;gap:.35rem;height:1.375rem;padding-inline:.625rem;border:0;border-radius:999px;font-size:.6875rem;font-weight:500;white-space:nowrap}
.pill-ok{background:var(--ok-bg);color:var(--ok-ink)}
.pill-idle,.pill-wait{background:var(--well);color:var(--muted)}
.pill-bad{background:var(--bad-bg);color:var(--bad-ink)}
.pill-reused,.pill-done{background:var(--blue-tint);color:var(--accent-ink)}
.pill-running{background:var(--accent);color:var(--on-accent)}
.pill-replay{height:1.5rem;padding-inline:.8rem;background:var(--sheet);color:var(--accent-ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--blue-edge)}
.pill-replay:hover{background:var(--accent);color:var(--on-accent);box-shadow:none}

.detail{display:grid;gap:.4rem;margin:.1rem .5rem .6rem 4.9rem}
.kv{display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.5rem;align-items:start}
.kv>span{padding-top:.45rem;font:400 .625rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.code{padding:.45rem .7rem;border:1px solid var(--line);border-radius:.375rem;background:var(--well);font:400 .6875rem/1.6 var(--mono);white-space:pre;overflow-x:auto}
.is-active .code{background:var(--sheet);border-color:var(--blue-tint)}
.detail-note{margin-left:3.75rem;font-size:.6875rem;color:var(--muted)}

.branches{display:grid;gap:.25rem;padding:0 .5rem .5rem 0}
.branch{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;margin-left:4.9rem;padding:.45rem .6rem .45rem 1.25rem;border-radius:.5rem;background:var(--blue-tint)}
.branch::before{content:"";position:absolute;left:-2rem;top:-.75rem;width:2rem;height:calc(50% + .75rem);border:solid var(--accent);border-width:0 0 1.5px 1.5px;border-bottom-left-radius:.5rem}
.branch + .branch::before{top:-1.9rem;height:calc(50% + 1.9rem)}
.branch::after{content:"";position:absolute;left:-.25rem;top:50%;width:.5rem;height:.5rem;margin-top:-.25rem;border-radius:50%;background:var(--accent)}
.branch-main{display:grid;min-width:0;padding:0;border:0;background:none;text-align:left}
.branch-name{font-size:.8125rem;font-weight:600;color:var(--accent-ink)}
.branch.is-current{box-shadow:inset 0 0 0 1.5px var(--accent)}
.branch.is-new{animation:land .7s ease-out}
@keyframes land{from{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:none}}

.tools{display:grid;gap:.75rem;margin-top:.75rem}
.tool{border:1px solid var(--line);border-radius:.5rem;overflow:hidden}
.tool-head{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--well);border-bottom:1px solid var(--line)}
.tool-head .step-name{margin-right:auto}
.tool .code{border:0;border-radius:0;background:none;padding:.6rem .75rem}
.tool-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.4rem .75rem;border-top:1px solid var(--line);font:400 .625rem var(--mono);color:var(--muted)}
.msgs{display:grid;gap:.5rem;margin-top:.75rem}
.msg{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:.75rem;align-items:start}
.role{padding-top:.5rem;font:400 .6875rem var(--mono);color:var(--muted)}
.bubble{padding:.5rem .75rem;border-radius:.5rem;background:var(--well);font:400 .75rem/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
.msg.is-branch .bubble{background:var(--blue-wash)}
.msg.is-branch .role{color:var(--accent-ink)}
.divider{display:flex;align-items:center;gap:.75rem;margin-top:.25rem;font:400 .625rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- branch form ---------- */
.form{display:grid;gap:.75rem;align-content:start}
.form label,.form legend{font-size:.75rem;font-weight:500}
.field{display:grid;gap:.4rem}
textarea{display:block;width:100%;min-height:4.25rem;field-sizing:content;padding:.6rem .9rem;border:1px solid var(--line-2);border-radius:.5rem;background:var(--sheet);font:400 .8125rem/1.5 var(--mono);resize:vertical}
textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.model{display:grid;grid-template-columns:3.75rem minmax(0,1fr);align-items:center;gap:.5rem}
.select{position:relative}
.select select{width:100%;height:2.25rem;padding:0 2.25rem 0 .75rem;border:1px solid var(--line-2);border-radius:.5rem;background:var(--sheet);font-size:.8125rem;-webkit-appearance:none;appearance:none}
.select .i{position:absolute;right:.7rem;top:50%;width:1rem;height:1rem;margin-top:-.5rem;pointer-events:none;color:var(--muted)}
.data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin:0;padding:0;border:0;min-width:0}
.data legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.opt{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.1rem .6rem;align-items:center}
.opt input{width:1rem;height:1rem;margin:0;accent-color:var(--accent)}
.opt strong{font-size:.8125rem;font-weight:600}
.opt small{grid-column:2;font-size:.6875rem;color:var(--muted)}
.opt.off strong{font-weight:400;color:var(--muted)}
.opt em{margin-left:.6rem;font:400 .625rem var(--mono);color:var(--faint)}
.estimate{display:flex;align-items:center;gap:.6rem;padding:.55rem .9rem;border-radius:.5rem;background:var(--blue-wash);font-size:.8125rem}
.estimate .i:first-child{color:var(--accent)}
.estimate b{font-weight:600;font-variant-numeric:tabular-nums}
.estimate button{display:grid;place-items:center;padding:0;border:0;background:none;color:var(--muted)}
.hint{margin-top:-.4rem;text-align:center;font-size:.6875rem;color:var(--muted)}

/* ---------- compare + scenarios ---------- */
.block{padding:.25rem .25rem 0;scroll-margin-top:4.5rem}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap}
.legend{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--ink-2)}
.legend .i{width:.9rem;height:.9rem;color:var(--muted)}
.cmp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.5rem}
.cmp{display:grid;gap:.35rem;align-content:start;padding:.7rem 1rem .8rem;border-radius:.5rem;background:var(--well)}
.cmp h4{display:flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600}
.cmp h4 .i{width:.9rem;height:.9rem;color:var(--muted)}
.cmp h4 .meta{margin-left:auto;font-weight:400}
.cmp pre{font:400 .8125rem/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.cmp .verdict{display:flex;align-items:center;gap:.35rem;margin-top:.15rem;font-size:.6875rem;color:var(--muted)}
.cmp .verdict .i{width:.8rem;height:.8rem;stroke-width:2.2}
.cmp-branch{background:var(--blue-wash)}
.cmp-branch h4,.cmp-branch h4 .i{color:var(--accent-ink)}
.cmp-branch.is-fixed .verdict{color:var(--ok-ink)}
.caption{margin-top:.15rem;font-size:.6875rem;color:var(--muted)}
table{width:100%;margin-top:.4rem;border-collapse:collapse;font-size:.75rem}
thead th{padding:.35rem .5rem;font:400 .625rem var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;color:var(--muted)}
tbody th,tbody td{padding:.3rem .5rem;border-top:1px solid var(--line);text-align:left;font-weight:400;vertical-align:middle}
tbody th{font-weight:500;width:39%}
td.last,th.last{width:13.5rem;border-left:1px solid var(--line);padding-left:1rem}
td.last>div{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.got{display:block;font:400 .6875rem/1.4 var(--mono);color:var(--bad-ink)}
.mini{display:inline-flex;align-items:center;gap:.3rem;height:1.5rem;padding-inline:.5rem;border:1px solid var(--line-2);border-radius:.375rem;background:var(--sheet);font-size:.6875rem;font-weight:500;color:var(--ink-2)}
.mini .i{width:.7rem;height:.7rem;fill:currentColor;stroke:none}
.mini:hover{border-color:var(--accent);color:var(--accent-ink)}
.mini[disabled]{opacity:.5;cursor:progress}

/* ---------- how + utility ---------- */
.how{padding-block:2.25rem .5rem;scroll-margin-top:4.5rem}
.how ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;margin-top:1rem;counter-reset:how}
.how li{display:grid;gap:.4rem;align-content:start;padding-top:.75rem;border-top:1.5px solid var(--ink);counter-increment:how}
.how li::before{content:"0" counter(how);font:500 .6875rem var(--mono);color:var(--accent-ink)}
.how li b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.how li span{font-size:.8125rem;color:var(--muted);max-width:34ch}
.how .mvp{margin-top:1.25rem;font:400 .6875rem/1.6 var(--mono);color:var(--muted)}
.utility{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);gap:1rem 2rem;align-items:center;padding-block:1rem 1.5rem;border-top:1px solid var(--line);scroll-margin-top:4.5rem}
.util{display:flex;align-items:center;gap:1rem}
.util>.i{width:1.75rem;height:1.75rem;color:var(--accent)}
.util + .util{padding-left:2rem;border-left:1px solid var(--line)}
.util b{display:block;font-size:.75rem;font-weight:600}
.util small{font-size:.6875rem;color:var(--muted)}
.fine{text-align:right;font-size:.6875rem;line-height:1.6;color:var(--muted)}

/* ---------- pages ---------- */
.page-head{display:grid;gap:.75rem;max-width:46rem;padding-block:2.25rem 1.5rem}
.page-head h1{font-size:clamp(2rem,3.4vw,2.625rem);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.page-head .lede{margin:0;max-width:60ch;font-size:1rem}
.meta a{color:var(--accent-ink);text-underline-offset:.25em}
.empty{padding:1.1rem 1rem;border:1px dashed var(--line-2);border-radius:.5rem;font-size:.8125rem;line-height:1.5;color:var(--muted)}
.empty b{display:block;font-weight:600;color:var(--ink-2)}
.stack{display:grid;gap:.75rem;padding-bottom:1rem}
.sub-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.5rem}

.split{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:.75rem;align-items:start;padding-bottom:1rem}
.runs{display:grid;gap:.5rem}
.run-card{display:grid;gap:.45rem;width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:.625rem;background:var(--sheet);text-align:left;transition:border-color .15s,background-color .15s}
.run-card:hover{border-color:var(--line-2)}
.run-card[aria-pressed="true"]{border-color:var(--accent);background:var(--blue-wash)}
.run-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.run-task{font-size:.875rem;font-weight:600;line-height:1.3}
.run-detail{display:grid;gap:1.4rem}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.detail-head h2{margin-top:.3rem;max-width:26ch;text-wrap:balance}
.steps-list li{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.5rem 0;border-top:1px solid var(--line)}
.steps-list li:first-child{border-top:0;padding-top:0}
.picks{display:grid;gap:.4rem}
.pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.25rem 1rem;width:100%;padding:.6rem .9rem;border:1px solid var(--line);border-radius:.5rem;background:var(--sheet);text-align:left}
.pick:hover{border-color:var(--line-2)}
.pick[aria-pressed="true"]{border-color:var(--accent);background:var(--blue-wash)}
.pick .branch-name{white-space:nowrap}
.pick .branch-name small{margin-left:.5rem;font:400 .6875rem var(--mono);color:var(--muted)}
.pick .said{overflow:hidden;font:400 .75rem/1.4 var(--mono);text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.said-full{margin-top:.6rem;font:400 .75rem/1.55 var(--mono);white-space:pre-wrap;color:var(--muted)}
.said-full b{font-weight:500;color:var(--ink-2)}

.suite-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:1rem}
.suite-sum{display:flex;flex-wrap:wrap;gap:.3rem 1.25rem;font-size:.875rem;color:var(--ink-2)}
.suite-sum b{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.suites{display:grid;gap:.75rem;padding-bottom:1rem}
.suite .room-head .link{margin-left:auto;align-self:center}
.suite .field{max-width:44rem;padding-inline:.25rem}
.suite .field label{font-size:.75rem;font-weight:500}
.suite tbody th{width:22%}
td.input{font:400 .6875rem/1.4 var(--mono);color:var(--muted)}
.got.is-ok{color:var(--muted)}

.docs{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:3.5rem;align-items:start;padding-bottom:2.5rem}
.toc{position:sticky;top:calc(4.75rem + env(safe-area-inset-top,0px));display:grid}
.toc a{padding:.4rem .9rem;border-left:1.5px solid var(--line);font-size:.8125rem;text-decoration:none;color:var(--muted)}
.toc a:hover{color:var(--ink)}
.toc a[aria-current]{border-left-color:var(--accent);font-weight:500;color:var(--accent-ink)}
.prose{display:grid;gap:2.75rem;max-width:43rem;min-width:0}
.prose section{display:grid;gap:.9rem;scroll-margin-top:5rem}
.prose p,.prose li,.prose dd{font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.prose a{color:var(--accent-ink);text-underline-offset:.25em}
.flow{display:grid;gap:.9rem;counter-reset:flow}
.flow li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.75rem;counter-increment:flow}
.flow li::before{content:"0" counter(flow);padding-top:.3rem;font:500 .6875rem var(--mono);color:var(--accent-ink)}
.flow b{display:block;font-weight:600;color:var(--ink)}
.prose dl{display:grid;gap:.9rem;margin:0}
.prose dt{font:600 .8125rem var(--mono);color:var(--ink)}
.prose dd{margin:.15rem 0 0}
.prose .code{font-size:.75rem;line-height:1.65}
.prose code{padding:.1em .35em;border-radius:.25rem;background:var(--well);font:400 .85em var(--mono)}
.note{padding:.8rem 1rem;border-radius:.5rem;background:var(--blue-wash);font-size:.8125rem;line-height:1.55;color:var(--ink-2)}
.status-list{display:grid;gap:.6rem}
.status-list li{display:grid;grid-template-columns:5.25rem minmax(0,1fr);gap:.75rem;align-items:baseline}

.credit-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.75rem;align-items:start}
.balance{display:grid;gap:.9rem}
.amount{display:flex;align-items:baseline;gap:.6rem}
.amount b{font:700 3.25rem/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.ledger li{display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto;gap:.75rem;align-items:baseline;padding:.5rem 0;border-top:1px solid var(--line);font-size:.8125rem}
.ledger li:first-child{border-top:0}
.ledger time{font:400 .6875rem var(--mono);color:var(--muted)}
.ledger .amt{font:500 .75rem var(--mono);font-variant-numeric:tabular-nums}
.price td:last-child,.price th:last-child{width:8rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.holder .caption{margin-top:.75rem}
.holder .sub-head{margin-top:.5rem}
.tier{display:grid;gap:.6rem;align-content:start}
.tier.is-holder{border-color:var(--blue-tint);background:var(--blue-wash)}
.tier ul{display:grid;gap:.4rem}
.tier li{display:flex;gap:.5rem;font-size:.8125rem;color:var(--ink-2)}
.tier li .i{width:.9rem;height:.9rem;margin-top:.15rem;stroke-width:2.2;color:var(--accent-ink)}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.25rem 1.25rem;margin-bottom:.4rem}
.foot-links a{font-size:.75rem;text-decoration:none;color:var(--ink-2)}
.foot-links a:hover{color:var(--accent-ink)}
.lost{display:grid;gap:1rem;justify-items:start;padding-block:5rem 6rem}

/* ---------- mobile chrome ---------- */
.tabbar{display:none;position:fixed;inset:auto 0 0 0;z-index:30;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--sheet);border-top:1px solid var(--line)}
.tabbar ul{display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{display:grid;justify-items:center;gap:.2rem;padding:.55rem 0 .5rem;text-decoration:none;font-size:.6875rem;color:var(--muted)}
.tabbar .i{width:1.25rem;height:1.25rem}
.tabbar a[aria-current]{color:var(--accent-ink);background:var(--blue-wash)}
.toasts{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));z-index:40;display:grid;gap:.5rem;justify-items:center;width:min(30rem,calc(100% - 2rem));transform:translateX(-50%);pointer-events:none}
.toast{padding:.6rem 1rem;border-radius:.5rem;background:var(--btn);color:var(--btn-ink);font-size:.8125rem;line-height:1.35;box-shadow:0 .5rem 1.5rem color-mix(in srgb,var(--shadow) 80%,transparent);animation:land .25s ease-out;transition:opacity .3s}
.toast.out{opacity:0}

@media (max-width:60rem){
  .nav-links,.nav-right{display:none}
  .nav-mobile{display:flex}
  .tabbar{display:block}
  .toasts{bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:4rem}
  .hero{grid-template-columns:minmax(0,1fr);gap:.25rem;padding-block:1.5rem 1.25rem}
  .hero-copy{display:contents}
  .eyebrow{order:1} h1{order:2} .lede{order:3} .art{order:4;max-width:30rem;width:100%;justify-self:center} .cta{order:5} .feats{order:6}
  .cta{flex-direction:column;gap:.9rem;margin-top:.5rem}
  .cta .btn{width:100%}
  .art-label{display:none}
  .bench{grid-template-columns:minmax(0,1fr)}
  .stepper{padding-inline:.25rem}
  .how ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .utility{grid-template-columns:minmax(0,1fr)}
  .util + .util{padding-left:0;border-left:0}
  .fine{text-align:left}
  .foot-links{justify-content:flex-start}
  .split,.credit-grid{grid-template-columns:minmax(0,1fr)}
  .docs{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .toc{position:static;display:flex;flex-wrap:wrap;gap:.35rem}
  .toc a{padding:.3rem .75rem;border:1px solid var(--line);border-radius:999px}
  .toc a[aria-current]{border-color:var(--accent)}
}
@media (max-width:40rem){
  h1{font-size:clamp(2.125rem,10vw,2.75rem)}
  .lede{font-size:.9375rem}
  .feats{display:none}
  .room{padding:.75rem}
  .panel{padding:.75rem}
  .stepper{display:none}
  .count i{display:none}
  .trace::before{left:calc(1.5rem - .75px)}
  .dot{display:none}
  .step-row{grid-template-columns:minmax(0,1fr) auto 1.75rem;gap:.5rem;padding-inline:.5rem .25rem}
  .step-main{gap:.65rem}
  .step-name{font-size:.75rem}
  .num{position:relative;z-index:1}
  .detail{margin-left:3.1rem}
  .kv{grid-template-columns:minmax(0,1fr);gap:.15rem}
  .kv>span{padding-top:0}
  .detail-note{margin-left:0}
  .branch{margin-left:3.1rem}
  .branch::before{left:-1.6rem;width:1.6rem}
  textarea{min-height:5.75rem}
  .data{grid-template-columns:minmax(0,1fr)}
  .cmp-grid{grid-template-columns:minmax(0,1fr)}
  .how ol{grid-template-columns:minmax(0,1fr)}
  thead{display:none}
  tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .75rem;padding:.5rem .25rem;border-top:1px solid var(--line)}
  tbody th,tbody td{padding:0;border:0;width:auto}
  tbody td.expect{grid-row:2;color:var(--muted)}
  td.input{display:none}
  .suite tbody th{width:auto}
  .price td:last-child{width:auto}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .pick{grid-template-columns:minmax(0,1fr) auto}
  .pick .said{grid-column:1 / -1;grid-row:2}
  .amount b{font-size:2.75rem}
  .page-head{padding-block:1.5rem 1.25rem}
  .page-head h1{font-size:clamp(1.875rem,8.5vw,2.25rem)}
  td.last{grid-row:1 / span 2;grid-column:2;width:auto;border-left:0;padding-left:0;align-self:center}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}