/* ═══════════════════════════════════════════════════════════
   X Pay whitepaper, documentation shell
   Deep blue glass, Syne display, animated SVG diagrams.
   Tokens mirror the site so the two never drift apart.
   ═══════════════════════════════════════════════════════════ */

:root{
  --tint:165 235 125;
  --black:#050705;--ink:#0A0D0A;--surface:#121712;--surface-2:#182018;--surface-3:#222C22;
  --text:#FFFFFF;--muted:#9CB097;--dim:#7C8C78;
  --accent:#7ED321;--accent-hi:#B6F55C;--accent-solid:#35690A;--accent-solid-2:#487F0C;--accent-deep:#35690A;--accent-rgb:126 211 33;--sky:#C6F76A;
  --line:rgb(var(--tint) / .12);--line-2:rgb(var(--tint) / .22);--line-3:rgb(var(--tint) / .34);
  --glass:linear-gradient(158deg,rgb(var(--tint) / .075),rgb(var(--tint) / .022));
  --blur:blur(22px) saturate(160%);
  --display:"Syne",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --top:60px;
  --r:16px;
}

@property --bd{syntax:'<angle>';initial-value:0deg;inherits:false}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 24px);overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--black);color:var(--text);font-family:var(--body);
  font-size:16.5px;line-height:1.78;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;overflow-x:clip;
}
a{color:inherit}
::selection{background:rgb(var(--accent-rgb) / .4);color:#fff}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px;border-radius:6px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--accent-solid);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* ── background ── */
.doc-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.doc-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgb(var(--tint) / .038) 1px,transparent 1px) 0 0/76px 76px,
             linear-gradient(to bottom,rgb(var(--tint) / .038) 1px,transparent 1px) 0 0/76px 76px;
  -webkit-mask-image:radial-gradient(ellipse 66% 46% at 50% 0%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 66% 46% at 50% 0%,#000,transparent 76%);
}
.doc-glow{position:absolute;width:900px;height:900px;top:-420px;left:50%;margin-left:-450px;
  border-radius:50%;filter:blur(100px);
  background:radial-gradient(circle,rgb(var(--accent-rgb) / .3),transparent 68%)}

.doc-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:linear-gradient(to right,var(--accent),var(--sky));
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}

/* ── topbar ── */
.topbar{
  position:sticky;top:0;z-index:100;height:var(--top);
  display:flex;align-items:center;gap:14px;padding:0 22px;
  background:rgba(10,13,10,.74);border-bottom:1px solid var(--line);
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
}
.topbrand{display:flex;align-items:center;gap:9px;text-decoration:none}
.topbrand svg{width:23px;height:23px;display:block}
.topbrand span{font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.02em}
.topdiv{width:1px;height:20px;background:var(--line-2)}
.topdoc{font-size:14px;color:var(--muted);font-weight:500}

.menu-btn{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;
  flex-direction:column;justify-content:center;gap:4px;padding:0}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.search-open{
  margin-left:auto;display:flex;align-items:center;gap:9px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--muted);
  background:rgb(var(--tint) / .05);border:1px solid var(--line);border-radius:10px;
  padding:7px 11px;transition:border-color .2s,background .2s,color .2s;
}
.search-open:hover{color:var(--text);border-color:var(--line-2);background:rgb(var(--tint) / .1)}
.search-open svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round}
.search-open kbd,.search-field kbd{
  font-family:var(--mono);font-size:10.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:1px 6px;background:rgb(var(--tint) / .05)}

.drawer-head,.doc-scrim{display:none}
@media (max-width:900px){.drawer-head{display:flex}.doc-scrim{display:block}}

/* ── shell ── */
.shell{
  position:relative;
  display:grid;grid-template-columns:264px minmax(0,1fr) 208px;
  gap:44px;max-width:1500px;margin:0 auto;padding:0 26px;align-items:start;
}

/* ── sidebar ── */
.sidebar{position:sticky;top:var(--top);height:calc(100vh - var(--top));overflow:hidden}
.sidebar-inner{height:100%;overflow-y:auto;padding:30px 8px 40px 0;scrollbar-width:thin}
.sidebar-inner::-webkit-scrollbar{width:5px}
.sidebar-inner::-webkit-scrollbar-thumb{background:rgb(var(--tint) / .14);border-radius:3px}

.sidebar-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:16px}
.sidebar-title{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.sidebar-meta{font-size:11.5px;color:var(--dim)}

.nav-tree,.nav-sub{list-style:none;margin:0;padding:0}
.nav-tree > li{margin-bottom:2px}
.nav-tree a{
  display:block;font-size:13.5px;line-height:1.45;color:var(--muted);text-decoration:none;
  padding:6px 12px;border-radius:8px;border-left:2px solid transparent;
  transition:color .18s,background .18s,border-color .18s;
}
.nav-tree a:hover{color:var(--text);background:rgb(var(--tint) / .05)}
.nav-tree a.active{color:#fff;background:rgb(var(--accent-rgb) / .18);border-left-color:var(--accent-hi)}
.nav-sub{margin:2px 0 8px 12px;border-left:1px solid var(--line)}
.nav-sub a{font-size:12.5px;padding:4px 12px;color:var(--dim)}

.sidebar-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.sidebar-foot a,.print-btn{font-size:12.5px;color:var(--dim);text-decoration:none;
  transition:color .18s;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
.sidebar-foot a:hover,.print-btn:hover{color:var(--text)}

/* ── right rail ── */
.rail{position:sticky;top:var(--top);height:calc(100vh - var(--top));padding-top:30px}
.rail-inner{max-height:100%;overflow-y:auto;scrollbar-width:none}
.rail-inner::-webkit-scrollbar{display:none}
.rail-title{display:block;font-family:var(--display);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.rail-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rail-list a{display:block;font-size:12.5px;line-height:1.4;color:var(--dim);text-decoration:none;
  padding:5px 0 5px 13px;margin-left:-1px;border-left:1px solid transparent;transition:color .18s,border-color .18s}
.rail-list a:hover{color:var(--muted)}
.rail-list a.active{color:#fff;border-left-color:var(--accent-hi)}

/* ── document ── */
.doc{padding:44px 0 140px;min-width:0}

.doc h1{font-family:var(--display);font-size:clamp(38px,5.4vw,62px);font-weight:800;
  letter-spacing:-.035em;line-height:1;margin:0 0 4px;overflow-wrap:break-word;hyphens:auto}
.doc h1 + h2{font-family:var(--display);font-size:clamp(17px,2.3vw,23px);font-weight:600;
  color:var(--muted);letter-spacing:-.012em;margin:0 0 22px;border:0;padding:0}
.doc h1 + h2 .anchor{display:none}

.doc h2{font-family:var(--display);font-size:clamp(23px,2.9vw,31px);font-weight:700;
  letter-spacing:-.024em;line-height:1.14;margin:68px 0 18px;padding-top:30px;
  border-top:1px solid var(--line);scroll-margin-top:calc(var(--top) + 20px)}
.doc h3{font-family:var(--display);font-size:19.5px;font-weight:700;letter-spacing:-.014em;
  margin:38px 0 12px;scroll-margin-top:calc(var(--top) + 20px)}
.doc h4{font-family:var(--display);font-size:16px;font-weight:700;margin:28px 0 10px}

.anchored{position:relative}
.anchor{position:absolute;left:-24px;top:50%;transform:translateY(-50%);
  color:var(--dim);text-decoration:none;font-weight:400;opacity:0;transition:opacity .18s,color .18s;
  font-size:.7em;padding:0 6px}
.anchored:hover .anchor{opacity:1}
.anchor:hover{color:var(--text)}

.doc p{margin:0 0 17px;color:#E4F2E0}
.doc strong{color:var(--text);font-weight:600}
.doc a{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.doc a:hover{text-decoration-color:var(--text)}

.doc ul,.doc ol{margin:0 0 20px;padding-left:23px;color:#E4F2E0}
.doc li{margin-bottom:9px}
.doc li::marker{color:var(--dim)}

.doc hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.doc h2 + hr,.doc hr + h2{border-top:0;margin-top:0;padding-top:0}
.doc hr + h2{margin-top:34px}

.doc :not(pre) > code{font-family:var(--mono);font-size:.86em;background:rgb(var(--tint) / .08);
  border:1px solid var(--line);padding:1.5px 6px;border-radius:5px;color:#EFF9EC;
  word-break:break-word}

/* ── code blocks ── */
.code{
  position:relative;margin:0 0 24px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:rgb(var(--tint) / .035);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 12px 9px 16px;border-bottom:1px solid var(--line);background:rgb(var(--tint) / .03)}
.code-lang{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.code-copy{font:inherit;font-size:11.5px;font-weight:600;color:var(--dim);cursor:pointer;
  background:rgb(var(--tint) / .06);border:1px solid var(--line);border-radius:7px;padding:4px 10px;
  transition:color .18s,background .18s,border-color .18s}
.code-copy:hover{color:var(--text);background:rgb(var(--tint) / .13);border-color:var(--line-2)}
.code pre{margin:0;padding:18px 20px;overflow-x:auto}
.code code{font-family:var(--mono);font-size:12.8px;line-height:1.72;color:#D1E9CC;white-space:pre}

/* ── tables ── */
.table-wrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--line);border-radius:var(--r);
  background:rgb(var(--tint) / .03);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.doc table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.doc th{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--line-2);white-space:nowrap}
.doc td{padding:13px 16px;border-bottom:1px solid var(--line);color:#DCEED7;vertical-align:top}
.doc tbody tr:last-child td{border-bottom:0}
.doc tbody tr{transition:background .18s}
.doc tbody tr:hover{background:rgb(var(--tint) / .035)}
.doc td code{white-space:nowrap}

/* ── callouts ── */
.callout{
  position:relative;margin:0 0 26px;padding:20px 24px 6px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);overflow:hidden;
}
.callout::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line-3)}
.callout-head{display:flex;align-items:center;gap:9px;margin-bottom:8px;
  font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--text)}
.callout-head svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.callout-body > :last-child{margin-bottom:14px}
.callout p{font-size:15px;color:var(--muted)}
.callout-danger::before{background:var(--accent-hi)}
.callout-danger{background:linear-gradient(158deg,rgb(var(--tint) / .13),rgb(var(--tint) / .03))}
.callout-warn::before{background:var(--accent)}
.callout-tip::before,.callout-note::before{background:rgb(var(--tint) / .42)}

/* ═══════════ diagrams ═══════════ */

.diagram{margin:0 0 30px;padding:0}
.diagram-frame{
  border-radius:var(--r);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(158deg,rgb(var(--tint) / .055),rgb(var(--tint) / .015));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 24px 70px rgba(6,10,6,.55);
}
.diagram-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:rgb(var(--tint) / .03)}
.diagram-chrome i{width:8px;height:8px;border-radius:50%;background:rgb(var(--tint) / .16)}
.diagram-chrome b{margin-left:8px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim)}
.diagram-canvas{
  padding:20px 18px;overflow-x:auto;
  background-image:linear-gradient(to right,rgb(var(--tint) / .028) 1px,transparent 1px),
                   linear-gradient(to bottom,rgb(var(--tint) / .028) 1px,transparent 1px);
  background-size:34px 34px;
}
.diagram-canvas svg{display:block;width:100%;min-width:660px;height:auto;overflow:visible}
.diagram figcaption{margin-top:12px;font-size:13.5px;color:var(--dim);line-height:1.6}
.fig-label{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-right:8px}

/* base text styling inside every diagram */
.diagram text{font-family:var(--body);fill:#D6EBD1}
.diagram .sq-head text,.diagram .nm-title,.diagram .st-node text{font-family:var(--display);fill:#F7FBF5;font-weight:700}

/* sequence */
.sq-head rect{fill:rgb(var(--accent-rgb) / .16);stroke:rgb(var(--accent-rgb) / .5);stroke-width:1}
.sq-head text{font-size:13px;text-anchor:middle}
.sq-life{stroke:rgb(var(--tint) / .14);stroke-width:1;stroke-dasharray:3 7}
.diagram .sq-label{font-size:12.5px;text-anchor:middle;fill:#EDF6EA;font-weight:500}
.diagram .sq-sub{font-size:11px;text-anchor:middle;fill:var(--dim)}
.sq-line{stroke:rgb(var(--tint) / .72);stroke-width:1.5}
.sq-line.is-dashed{stroke:rgb(var(--tint) / .4);stroke-dasharray:5 5}
.sq-packet{fill:var(--sky);opacity:0}
.sq-loop{fill:none;stroke:rgb(var(--tint) / .4);stroke-width:1.4}
.sq-note{fill:rgb(var(--tint) / .07);stroke:rgb(var(--tint) / .18)}
.diagram .sq-note-t{font-size:11.5px;fill:#C9E5C3;font-family:var(--mono)}

/* node map */
.nm-node rect{fill:rgb(var(--tint) / .06);stroke:rgb(var(--tint) / .2);stroke-width:1}
.nm-node.is-accent rect{fill:rgb(var(--accent-rgb) / .26);stroke:var(--accent-hi);stroke-width:1.5}
.nm-title{font-size:13px;text-anchor:middle}
.diagram .nm-sub{font-size:10.5px;text-anchor:middle;fill:var(--dim)}
.nm-edge line,.nm-edge path{stroke:rgb(var(--tint) / .42);stroke-width:1.4;fill:none}
.nm-edge.is-dashed line,.nm-edge.is-dashed path{stroke:rgb(var(--tint) / .28)}
.diagram .nm-elabel{font-size:10.5px;text-anchor:middle;fill:var(--dim);font-family:var(--mono)}

/* bars */
.diagram .bar-name{font-size:14px;fill:#F2FAEF;font-weight:500;font-family:var(--display)}
.diagram .bar-sub{font-size:11.5px;fill:var(--dim)}
.bar-track{stroke:rgb(var(--tint) / .07);stroke-width:26;stroke-linecap:round}
.bar-fill{stroke:rgb(var(--tint) / .34);stroke-width:26;stroke-linecap:round;stroke-dashoffset:var(--from)}
.bar-row.is-accent .bar-fill{stroke:var(--accent-hi)}
.diagram .bar-val{font-size:13px;fill:var(--text);font-family:var(--mono);text-anchor:start}
.bar-row.is-accent .bar-val{font-weight:500}

/* nested */
.nest-layer rect{fill:rgb(var(--tint) / .035);stroke:rgb(var(--tint) / .18);stroke-width:1}
.nest-layer:last-child rect{fill:rgb(var(--accent-rgb) / .26);stroke:var(--accent-hi);stroke-width:1.5}
.diagram .nest-label{font-size:12.5px;fill:#E6F3E2;font-family:var(--display);font-weight:700}
.diagram .nest-value{font-size:12.5px;fill:var(--text);font-family:var(--mono);text-anchor:end}

/* states */
.st-node circle{fill:rgb(var(--tint) / .06);stroke:rgb(var(--tint) / .26);stroke-width:1.4}
.st-node.is-terminal circle{fill:rgb(var(--accent-rgb) / .26);stroke:var(--accent-hi);stroke-width:1.8}
.st-node text{font-size:12.5px;text-anchor:middle;font-weight:700}
.st-edge line,.st-edge path{stroke:rgb(var(--tint) / .45);stroke-width:1.4;fill:none}
.st-edge.is-fail line,.st-edge.is-fail path{stroke:rgb(var(--tint) / .22);stroke-dasharray:5 5}
.diagram .st-elabel{font-size:10.5px;text-anchor:middle;fill:var(--dim);font-family:var(--mono)}

/* ── diagram animation ── */
@keyframes dFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes dPacket{
  0%{transform:translateX(0);opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(var(--dx));opacity:0}
}
@keyframes dGrow{from{stroke-dashoffset:var(--from)}to{stroke-dashoffset:var(--to)}}
@keyframes dPop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes dFlow{to{stroke-dashoffset:-28}}

.js .diagram svg .sq-head,.js .diagram svg .sq-life,.js .diagram svg .sq-step,
.js .diagram svg .nm-node,.js .diagram svg .nm-edge,.js .diagram svg .bar-row,
.js .diagram svg .nest-layer,.js .diagram svg .st-node,.js .diagram svg .st-edge{opacity:0}

.diagram.in .sq-head{animation:dFade .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*.07s)}
.diagram.in .sq-life{animation:dFade .6s ease both;animation-delay:calc(.2s + var(--i)*.07s)}
.diagram.in .sq-step{animation:dFade .45s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(.42s + var(--i)*.3s)}
.diagram.in .sq-line{stroke-dasharray:var(--len);animation:dDraw .42s cubic-bezier(.4,0,.2,1) both;
  animation-delay:calc(.42s + var(--i)*.3s)}
.diagram.in .sq-packet{animation:dPacket .5s cubic-bezier(.35,0,.25,1) both;
  animation-delay:calc(.5s + var(--i)*.3s)}

.diagram.in .nm-node{animation:dPop .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*.08s)}
.diagram.in .nm-edge{animation:dFade .5s ease both;animation-delay:calc(.4s + var(--i)*.1s)}
.diagram.in .nm-edge line,.diagram.in .nm-edge path{
  stroke-dasharray:6 8;animation:dFlow 1.1s linear infinite;animation-delay:calc(.9s + var(--i)*.1s)}

.diagram.in .bar-row{animation:dFade .5s ease both;animation-delay:calc(var(--i)*.14s)}
.diagram.in .bar-fill{animation:dGrow 1.15s cubic-bezier(.2,.85,.3,1) both;
  animation-delay:calc(.24s + var(--i)*.14s)}

.diagram.in .nest-layer{animation:dPop .55s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*.13s)}
.diagram.in .st-node{animation:dPop .5s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i)*.11s)}
.diagram.in .st-edge{animation:dFade .5s ease both;animation-delay:calc(.3s + var(--i)*.11s)}

/* ── content reveal ── */
.js .doc > *{opacity:0;transform:translateY(16px)}
.doc > .in{animation:dFade .62s cubic-bezier(.2,.8,.3,1) both}

/* ── search ── */
.search-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;
  justify-content:center;padding:12vh 20px 20px;background:rgba(6,10,6,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.search-modal[hidden]{display:none}
.search-panel{width:100%;max-width:640px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);background:rgba(18,23,18,.97);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  box-shadow:0 40px 120px rgba(6,10,6,.8);animation:dPop .22s cubic-bezier(.2,.8,.3,1) both}
.search-field{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.search-field svg{width:18px;height:18px;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;flex-shrink:0}
.search-field input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font-family:inherit;font-size:16px}
.search-field input::placeholder{color:var(--dim)}
.search-results{list-style:none;margin:0;padding:8px;max-height:52vh;overflow-y:auto}
.search-results li a{display:block;padding:11px 14px;border-radius:10px;text-decoration:none;
  transition:background .15s}
.search-results li a:hover,.search-results li.sel a{background:rgb(var(--tint) / .09)}
.search-results .r-title{display:block;font-family:var(--display);font-size:14.5px;font-weight:700;color:var(--text)}
.search-results .r-text{display:block;font-size:12.5px;color:var(--dim);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-results mark{background:rgb(var(--tint) / .24);color:var(--text);border-radius:3px;padding:0 2px}
.search-empty{padding:26px;text-align:center;color:var(--dim);font-size:14px}

/* ── responsive ── */
@media (max-width:1240px){
  .shell{grid-template-columns:238px minmax(0,1fr);gap:36px}
  .rail{display:none}
}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr);padding:0 20px;gap:0}
  .menu-btn{display:flex}
  /* Full height, above the topbar, with its own header.
     The previous drawer started below the topbar and locked scrolling on
     <body>, which turns body into a scroll container and makes the sticky
     topbar stick to the top of the document instead of the viewport. Scrolled
     down, that left page text showing in the gap and no visible close button.
     Covering the full height removes the whole class of problem. */
  .sidebar{
    position:fixed;top:0;left:0;width:min(320px,86vw);
    height:100vh;height:100dvh;
    z-index:130;background:rgba(12,16,12,.985);border-right:1px solid var(--line);
    transform:translateX(-102%);transition:transform .32s cubic-bezier(.2,.8,.3,1);
    box-shadow:24px 0 60px rgba(4,7,4,.6);
    overscroll-behavior:contain;
  }
  .sidebar.open{transform:none}
  .sidebar-inner{padding:0 18px 40px;height:100%}

  .drawer-head{
    display:flex;align-items:center;gap:10px;
    height:var(--top);margin:0 -18px 14px;padding:0 14px 0 18px;
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;
    background:rgba(12,16,12,.9);backdrop-filter:blur(12px);
  }
  .drawer-head svg.dh-mark{width:22px;height:22px}
  .drawer-head b{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.02em}
  .drawer-close{
    margin-left:auto;width:34px;height:34px;flex-shrink:0;cursor:pointer;
    display:grid;place-items:center;border-radius:9px;
    background:rgb(var(--tint) / .07);border:1px solid var(--line);color:var(--muted);
    transition:color .2s,background .2s;
  }
  .drawer-close:hover{color:var(--text);background:rgb(var(--tint) / .16)}
  .drawer-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

  .doc-scrim{
    position:fixed;inset:0;z-index:125;background:rgba(4,6,4,.6);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .doc-scrim.on{opacity:1;pointer-events:auto}

  .doc{padding:32px 0 110px}
  .anchor{display:none}
  /* lock on the root, never on body: locking body breaks position sticky */
  html.locked{overflow:hidden}
}
@media (max-width:600px){
  body{font-size:16px}
  .topbar{padding:0 16px;gap:10px}
  .search-open span{display:none}
  .search-open kbd{display:none}
  .topdoc{display:none}
  .shell{padding:0 16px}
  .diagram-canvas{padding:14px 12px}
  .code pre{padding:15px 14px}
  .code code{font-size:12px}
  .doc h2{margin-top:52px;padding-top:24px}
  .callout{padding:17px 18px 4px}
}

/* ── print ── */
@media print{
  @page{margin:17mm 15mm}
  html,body{background:#fff!important;color:#000!important;font-size:10.5pt;line-height:1.55}
  .doc-bg,.doc-progress,.topbar,.sidebar,.rail,.search-modal,.anchor,.code-copy{display:none!important}
  .shell{display:block;max-width:none;padding:0}
  .doc{padding:0}
  .js .doc > *,.doc > .in{opacity:1!important;transform:none!important;animation:none!important}
  .doc h1,.doc h2,.doc h3,.doc h4{color:#000!important;page-break-after:avoid}
  .doc h1 + h2{color:#444!important}
  .doc h2{border-top:1px solid #ccc}
  .doc p,.doc li,.doc td{color:#111!important;orphans:3;widows:3}
  .doc strong{color:#000!important}
  .doc a{color:#000!important;text-decoration:none}
  .doc :not(pre) > code{background:#f2f2f2;border:1px solid #ddd;color:#000}
  .code,.table-wrap,.callout,.diagram-frame{background:#fff!important;border:1px solid #ccc!important;
    backdrop-filter:none!important;box-shadow:none!important;page-break-inside:avoid}
  .code code{color:#000}
  .code-bar,.diagram-chrome{background:#f7f7f7!important;border-color:#ddd!important}
  .code-lang,.diagram-chrome b{color:#555!important}
  .doc th{color:#000!important;border-bottom:1px solid #999}
  .doc td{border-bottom:1px solid #e2e2e2}
  .diagram-canvas{background-image:none!important}
  .diagram text{fill:#000!important}
  .diagram .nm-sub,.diagram .sq-sub,.diagram .nm-elabel,.diagram .st-elabel,.diagram .bar-sub{fill:#555!important}
  .diagram rect,.diagram circle{fill:#f4f4f4!important;stroke:#888!important}
  .diagram line,.diagram path{stroke:#333!important}
  .bar-track{stroke:#e8e8e8!important}
  .bar-fill{stroke:#333!important;stroke-dashoffset:var(--to)!important;animation:none!important}
  .sq-packet{display:none}
  .callout::before{background:#333!important}
  .diagram svg{min-width:0!important}
  .sr-only{position:static!important;width:auto;height:auto;clip:auto;
    font-size:9pt;color:#555!important;margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .doc > *{opacity:1;transform:none}
  .js .diagram svg *{opacity:1!important}
  .bar-fill{stroke-dashoffset:var(--to)}
  .sq-line{stroke-dasharray:none!important}
  .sq-packet{display:none}
}

/* ═══════════════════════════════════════════════════════════
   Diagrams on small screens
   A 920 unit wide diagram cannot shrink to a phone and stay
   legible. So: keep it scrollable at a readable size, show
   that it scrolls, and offer a fullscreen zoomable view.
   ═══════════════════════════════════════════════════════════ */

.diagram-frame{position:relative}

/* fade the edge the diagram continues past, only while it overflows */
.diagram-canvas{position:relative;scrollbar-width:thin;scroll-behavior:smooth}
.diagram-canvas::-webkit-scrollbar{height:6px}
.diagram-canvas::-webkit-scrollbar-thumb{background:rgb(var(--tint) / .16);border-radius:3px}
.diagram-frame[data-overflow="true"]::after{
  content:'';position:absolute;top:41px;right:0;bottom:0;width:56px;pointer-events:none;
  background:linear-gradient(to left,rgba(14,19,14,.94),transparent);
  opacity:1;transition:opacity .3s ease;z-index:2;
}
.diagram-frame[data-overflow="end"]::after{opacity:0}

.diagram-expand{
  position:absolute;top:7px;right:8px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--body);font-size:11px;font-weight:600;color:var(--muted);
  background:rgb(var(--tint) / .08);border:1px solid var(--line);border-radius:7px;
  padding:4px 9px;transition:color .2s,background .2s,border-color .2s;
}
.diagram-expand:hover{color:var(--text);background:rgb(var(--tint) / .16);border-color:var(--line-2)}
.diagram-expand svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

.swipe-hint{
  display:none;align-items:center;gap:7px;justify-content:center;
  font-size:11.5px;color:var(--dim);padding:8px 0 0;
}
.swipe-hint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;animation:swipeNudge 1.8s ease-in-out infinite}
@keyframes swipeNudge{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

/* ── fullscreen viewer ── */
.dv{
  position:fixed;inset:0;z-index:260;display:flex;flex-direction:column;
  background:rgba(8,11,8,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dv[hidden]{display:none}
.dv-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.dv-title{font-family:var(--mono);font-size:11.5px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dv-btn{
  font:inherit;font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);
  cursor:pointer;background:rgb(var(--tint) / .07);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;transition:color .2s,background .2s;flex-shrink:0;
}
.dv-btn:hover{color:var(--text);background:rgb(var(--tint) / .15)}
.dv-btn.is-on{color:#fff;background:var(--accent-solid);border-color:var(--accent-solid)}
.dv-body{
  flex:1;min-height:0;overflow:auto;padding:18px;
  display:grid;place-items:center;
  touch-action:pan-x pan-y pinch-zoom;
  background-image:linear-gradient(to right,rgb(var(--tint) / .03) 1px,transparent 1px),
                   linear-gradient(to bottom,rgb(var(--tint) / .03) 1px,transparent 1px);
  background-size:38px 38px;
}
.dv-body svg{display:block;height:auto;max-width:none}
.dv-body.is-fit svg{width:100%;min-width:0!important;max-width:100%}
.dv-body.is-full svg{width:1100px;min-width:1100px}
.dv-cap{padding:12px 18px;border-top:1px solid var(--line);font-size:12.5px;
  color:var(--dim);line-height:1.55;flex-shrink:0;max-height:26vh;overflow-y:auto}

@media (max-width:900px){
  /* Raise the floor so glyphs stay readable while scrolled, rather than
     letting the whole diagram shrink into illegibility. */
  .diagram-canvas svg{min-width:820px}
  .swipe-hint{display:flex}
  .diagram-expand{font-size:10.5px;padding:4px 8px}
}
@media (max-width:600px){
  .diagram-canvas{padding:12px 10px}
  .dv-body{padding:10px}
  .dv-bar{padding:10px 12px;gap:8px}
}

@media print{
  .diagram-expand,.swipe-hint,.dv{display:none!important}
  /* paper is wide, so always print the full layout regardless of screen width */
  .diagram.has-narrow .d-wide{display:block!important}
  .diagram.has-narrow .d-narrow{display:none!important}
  .diagram-frame[data-overflow="true"]::after{display:none}
}

/* ═══════════════════════════════════════════════════════════
   Narrow diagram layouts
   Below 900px the wide canvas is swapped for a purpose built
   vertical one, so nothing needs sideways scrolling to read.
   ═══════════════════════════════════════════════════════════ */

.d-narrow{display:none}
.diagram.has-narrow .d-narrow svg{min-width:0;width:100%}

/* narrow sequence timeline */
.nr-rail{stroke:rgb(var(--tint) / .16);stroke-width:1;stroke-dasharray:3 6}
.nr-dot{fill:var(--accent-hi)}
.diagram .sq-self .nr-dot{fill:rgb(var(--tint) / .35)}
.nr-card{fill:rgb(var(--tint) / .06);stroke:rgb(var(--tint) / .18);stroke-width:1}
.nr-card.is-dashed{stroke-dasharray:4 4}
.diagram .nr-from{font-size:10px;fill:var(--dim);font-family:var(--mono);letter-spacing:.02em}
.diagram .nr-label{font-size:13px;fill:#F4FAF2;font-weight:600;font-family:var(--display)}
.diagram .nr-note{font-size:10.5px;fill:var(--muted)}
.diagram .nr-group{font-size:10px;fill:var(--dim);font-family:var(--display);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}

/* narrow state pills reuse the wide node styling */
.st-node rect{fill:rgb(var(--tint) / .06);stroke:rgb(var(--tint) / .26);stroke-width:1.4}
.st-node.is-terminal rect{fill:rgb(var(--accent-rgb) / .26);stroke:var(--accent-hi);stroke-width:1.8}
.st-node.is-fail rect{fill:rgb(var(--tint) / .04);stroke:rgb(var(--tint) / .18);stroke-dasharray:4 4}

@media (max-width:900px){
  .diagram.has-narrow .d-wide{display:none}
  .diagram.has-narrow .d-narrow{display:block;overflow:visible}
  /* the narrow layout fits, so none of the scroll affordances apply to it */
  .diagram.has-narrow .swipe-hint{display:none!important}
  .diagram.has-narrow .diagram-frame[data-overflow="true"]::after{display:none}
}

/* ── the mark shimmers ──
   Three gradient stops cycling a third of a phase apart, so a bright band
   travels along the blades rather than the whole mark simply pulsing. */
@keyframes gsShift{0%,100%{stop-color:#5FAE12}50%{stop-color:#C6F76A}}
.js .gs-a{animation:gsShift 4.5s ease-in-out infinite}
.js .gs-m{animation:gsShift 4.5s ease-in-out -1.5s infinite}
.js .gs-b{animation:gsShift 4.5s ease-in-out -3s infinite}

/* the whitepaper mark now matches the site: breathing glow, blades that
   separate on hover, and a quarter turn that lands where it started */
.topbrand svg,.dh-mark{transition:transform .55s cubic-bezier(.2,.85,.28,1);transform-origin:50% 50%}
.js .topbrand svg{animation:markBreathe 5.5s ease-in-out infinite}
@keyframes markBreathe{
  0%,100%{filter:drop-shadow(0 0 0 rgb(var(--accent-rgb) / 0))}
  50%{filter:drop-shadow(0 0 9px rgb(var(--accent-rgb) / .55))}
}
.topbrand:hover svg,.topbrand:focus-visible svg{transform:rotate(90deg) scale(1.06)}
.topbrand svg path{transition:transform .5s cubic-bezier(.34,1.5,.5,1);transform-origin:50% 50%}
.topbrand:hover svg path:nth-of-type(1){transform:translate(-2.5px,-2.5px)}
.topbrand:hover svg path:nth-of-type(2){transform:translate(2.5px,-2.5px)}
.topbrand:hover svg path:nth-of-type(3){transform:translate(2.5px,2.5px)}
.topbrand:hover svg path:nth-of-type(4){transform:translate(-2.5px,2.5px)}
.topbrand span{transition:letter-spacing .45s cubic-bezier(.2,.85,.28,1)}
.topbrand:hover span{letter-spacing:.01em}

@media (prefers-reduced-motion:reduce){
  .js .gs-a,.js .gs-m,.js .gs-b,.js .topbrand svg{animation:none}
  .topbrand svg,.topbrand svg path{transition:none}
}