@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=JetBrains+Mono:wght@400..600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400..600&display=swap');
:root{
  --ground:#0a0d0b; --surface:#101410; --raise:#181e19; --card:#121712;
  --ink:#d2dbd3; --strong:#f0f6f0; --muted:#8b9d90; --faint:#5d6b60;
  --line:rgba(214,240,222,.13); --hairline:rgba(214,240,222,.07);
  --accent:#3fcf8e; --accent-ink:#6fe3ab; --tint:rgba(63,207,142,.11); --tint-line:rgba(63,207,142,.38);
  --ok:#3ecf7a;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -16px rgba(0,0,0,.6);
  --shadow-lg:0 34px 80px -24px rgba(0,0,0,.75);
  --article:46rem; --side:16.5rem;
}
:root[data-theme="light"]{
  --ground:#f6f8f6; --surface:#ffffff; --raise:#edf1ee; --card:#ffffff;
  --ink:#1d241f; --strong:#0d130e; --muted:#5c675f; --faint:#8a948c;
  --line:rgba(20,34,25,.13); --hairline:rgba(20,34,25,.075);
  --accent:#0e8a4d; --accent-ink:#0b703f; --tint:rgba(14,138,77,.09); --tint-line:rgba(14,138,77,.3);
  --ok:#189a4e;
  --shadow:0 1px 2px rgba(14,20,30,.05),0 10px 30px -18px rgba(14,20,30,.18);
  --shadow-lg:0 28px 70px -24px rgba(14,20,30,.4);
}
*{box-sizing:border-box}
html{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent-ink);text-decoration:none}
code{font-family:var(--mono)}
::selection{background:var(--tint)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}

.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--surface);
  border-right:1px solid var(--hairline);z-index:40;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.side-head{padding:1.2rem 1.2rem .95rem;border-bottom:1px solid var(--hairline)}
.brand{display:flex;align-items:baseline;gap:.55rem}
.brand b{font-family:var(--mono);font-weight:650;font-size:1rem;letter-spacing:-.02em;color:var(--strong)}
.brand .tag{font-size:.58rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border:1px solid var(--line);border-radius:99px;padding:.14rem .45rem}
.cov{margin-top:.9rem}
.cov-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.68rem;color:var(--faint);margin-bottom:.35rem}
.cov-row b{color:var(--ok);font-variant-numeric:tabular-nums;font-family:var(--mono);font-weight:600;font-size:.72rem}
.cov-bar{height:4px;border-radius:99px;background:var(--raise);overflow:hidden}
.cov-bar span{display:block;height:100%;border-radius:99px;background:var(--ok);
  transform-origin:left;animation:grow 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes grow{from{transform:scaleX(0)}}
.search-btn{margin:.85rem 1.2rem;display:flex;align-items:center;gap:.5rem;width:calc(100% - 2.4rem);
  padding:.5rem .7rem;border:1px solid var(--line);border-radius:9px;background:var(--ground);
  color:var(--faint);font-family:var(--sans);font-size:.8rem;cursor:pointer;transition:border-color .15s,color .15s}
.search-btn:hover{border-color:var(--tint-line);color:var(--muted)}
.search-btn kbd{margin-left:auto;font-family:var(--mono);font-size:.64rem;color:var(--faint);
  border:1px solid var(--line);border-radius:5px;padding:.06rem .32rem;background:var(--surface)}
.tree{flex:1;overflow-y:auto;padding:.3rem .75rem 1.6rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tree::-webkit-scrollbar{width:8px}
.tree::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px;border:2px solid var(--surface)}
.doclinks{display:flex;flex-direction:column;gap:1px;padding:.2rem 0 .5rem}
.doclink{display:flex;align-items:center;gap:.55rem;padding:.42rem .6rem;border-radius:8px;
  font-size:.85rem;color:var(--ink);font-weight:500;transition:background .12s}
.doclink svg{width:.95rem;height:.95rem;color:var(--faint);flex:none}
.doclink:hover{background:var(--raise)}
.doclink.on{background:var(--tint);color:var(--accent-ink);font-weight:600}
.doclink.on svg{color:var(--accent)}
.tree-cap{padding:1.1rem .6rem .35rem;font-size:.62rem;font-weight:650;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.group{margin-top:.15rem}
.group-h{display:flex;align-items:center;gap:.45rem;width:100%;background:none;border:0;cursor:pointer;
  padding:.45rem .6rem;border-radius:8px;color:var(--muted);font-family:var(--mono);font-size:.72rem;
  font-weight:600;text-align:left;overflow-wrap:anywhere;line-height:1.4;transition:background .12s}
.group-h:hover{background:var(--raise)}
.group-h .chev{transition:transform .2s;font-size:.85rem;line-height:1;color:var(--faint);flex:none}
.group.collapsed .chev{transform:rotate(-90deg)}
.group.collapsed .items{display:none}
.items{display:flex;flex-direction:column;gap:1px;padding-left:.55rem}
.item{display:block;padding:.3rem .6rem;border-radius:7px;font-family:var(--mono);font-size:.76rem;
  color:var(--muted);overflow-wrap:anywhere;position:relative;transition:background .12s,color .12s}
.item:hover{background:var(--raise);color:var(--ink)}
.item.on{background:var(--tint);color:var(--accent-ink);font-weight:600}
.item-g{display:block;padding:.36rem .6rem;border-radius:7px;font-size:.8rem;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.item-g:hover{background:var(--raise);color:var(--ink)}
.item-g.on{background:var(--tint);color:var(--accent-ink);font-weight:600}

.content{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.75rem;height:3.25rem;
  padding:0 1.5rem;background:color-mix(in srgb,var(--ground) 72%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--hairline)}
.crumb{display:flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.76rem;color:var(--faint);min-width:0}
.crumb .sep{color:var(--line)}
.crumb b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spacer{flex:1}
.icon-btn{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid transparent;
  border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.icon-btn:hover{color:var(--ink);background:var(--raise)}
.icon-btn svg{width:1rem;height:1rem}
.menu-btn{display:none}
.moon{display:none}
:root[data-theme="light"] .sun{display:none}
:root[data-theme="light"] .moon{display:block}

.mid{display:grid;grid-template-columns:1fr minmax(0,var(--article)) 1fr;column-gap:2.75rem}
.mid:has(.doc.reading){--article:42.5rem}
.doc{grid-column:2;min-width:0;padding:3rem 0 7rem;line-height:1.72;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
/* no fill-mode above: `both` would leave a permanent (identity) transform on the
   article, and a transformed ancestor hijacks position:fixed — the maximized
   graph would pin to the article, not the viewport */
.doc.reading p{margin:1.1rem 0}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.doc h1{font-family:var(--mono);font-size:1.75rem;font-weight:650;letter-spacing:-.012em;color:var(--strong);
  margin:.15rem 0 1.05rem;text-wrap:balance;line-height:1.18}
.doc h1.mono{font-size:1.6rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.eyebrow{font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.65rem}
.eyebrow code{font-size:.95em;text-transform:none;letter-spacing:.02em;color:var(--muted)}
.doc h2{font-family:var(--mono);font-size:1.18rem;font-weight:650;letter-spacing:-.01em;margin:2.6rem 0 .9rem;color:var(--strong)}
.doc h3{font-family:var(--mono);font-size:.98rem;font-weight:650;margin:1.7rem 0 .45rem;color:var(--strong)}
.doc h4{font-size:.92rem;font-weight:650;margin:1.2rem 0 .3rem}
.doc p{margin:.9rem 0}
.doc p a,.doc li a,.doc td a{text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--accent) 30%,transparent);text-underline-offset:3px}
.doc p a:hover,.doc li a:hover,.doc td a:hover{text-decoration-color:var(--accent)}
.doc .rows a,.doc .chips a,.doc .feats a{text-decoration:none}
p code,li code,.chips code,.xref code,dd code{background:var(--raise);
  padding:.1em .36em;border-radius:5px;font-size:.84em;color:var(--ink)}
pre{background:var(--raise);border:1px solid var(--hairline);border-radius:12px;
  padding:1rem 1.2rem;overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.6;color:var(--ink)}
.prewrap{position:relative;margin:1.15rem 0}
.prewrap pre{margin:0}
.copy{position:absolute;top:.55rem;right:.55rem;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);border-radius:7px;font-family:var(--sans);font-size:.68rem;font-weight:550;
  padding:.26rem .6rem;opacity:0;cursor:pointer;transition:opacity .15s,color .15s,border-color .15s}
.prewrap:hover .copy,.copy:focus-visible{opacity:1}
.copy.done{color:var(--ok);border-color:var(--ok);opacity:1}
.section-h{display:flex;align-items:center;gap:.75rem;margin:3rem 0 1.15rem}
.section-h h2{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0;font-weight:650}
.section-h .rule{flex:1;height:1px;background:var(--hairline)}
.chips{color:var(--muted);font-size:.85rem;line-height:2}
.chips a{color:var(--accent-ink)}
.stat{font-family:var(--mono);font-size:.85rem;color:var(--muted)}

.graph-wrap{position:relative;margin:1.5rem 0}
.graph-shell{border:1px solid var(--hairline);border-radius:16px;margin:0;background:
  radial-gradient(circle at 1px 1px,var(--hairline) 1px,transparent 0) 0 0/22px 22px,var(--surface);
  overflow:auto;max-height:33rem;display:flex;justify-content:safe center;
  align-items:safe center;box-shadow:var(--shadow);cursor:grab}
.graph-shell.panning{cursor:grabbing;user-select:none}
.graph-wrap figcaption{margin-top:.6rem;text-align:center;font-size:.74rem;color:var(--faint);
  line-height:1.5;text-wrap:balance}
.graph-wrap.tall .graph-shell{max-height:calc(100vh - 11rem)}
.graph-wrap.max{position:fixed;inset:0;z-index:80;margin:0;padding:1rem;
  background:var(--ground);display:flex;flex-direction:column}
.graph-wrap.max .graph-shell{max-height:none;width:100%;flex:1}
.graph-wrap.max .graph-tools{top:1.6rem;right:1.6rem}
.graph-wrap.max figcaption{flex:none;padding:.35rem 0 .1rem}
.graph-tools{position:absolute;top:.65rem;right:.65rem;display:flex;gap:.3rem;z-index:2}
.graph-tools button{min-width:1.9rem;height:1.9rem;padding:0 .5rem;border:1px solid var(--line);
  border-radius:8px;background:var(--surface);color:var(--muted);font-family:var(--sans);
  font-size:.8rem;cursor:pointer;transition:color .15s,border-color .15s}
.graph-tools button:hover{color:var(--accent-ink);border-color:var(--tint-line)}
.row-cap{margin:1.7rem 0 .1rem;font-size:.7rem;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint)}
pre.mermaid{margin:0;padding:1.8rem;background:none;border:0;border-radius:0;overflow:visible;
  font-size:.78rem;color:var(--faint)}

.shots{margin:1.6rem 0;text-align:center}
.shots img{max-width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.shot-light{display:none}
:root[data-theme="light"] .shot-light{display:inline}
:root[data-theme="light"] .shot-dark{display:none}

.rows{list-style:none;padding:0;margin:.3rem 0 1.6rem}
.rows li{border-top:1px solid var(--hairline)}
.rows li:first-child{border-top:0}
.rows a{display:block;padding:.72rem .1rem}
.row-name{display:inline-block;font-weight:600;color:var(--accent-ink);font-size:.94rem}
.rows a:hover .row-name{text-decoration:underline;text-underline-offset:3px}
.rows.mono .row-name{font-family:var(--mono);font-size:.85rem;overflow-wrap:anywhere}
.row-desc{display:block;color:var(--muted);font-size:.87rem;margin-top:.14rem;line-height:1.55}
.ref-dir{margin:1.8rem 0 .1rem;font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--faint)}
.ref-dir code{background:none;border:0;padding:0;color:inherit}
.arch{display:flex;flex-direction:column}
.arch-sec{border-top:1px solid var(--hairline);padding:1.8rem 0 .5rem}
.arch-sec h2{font-family:var(--mono);font-size:1.02rem;margin:0 0 .55rem}
.arch-sec h2 a{color:var(--strong)}
.arch-sec h2 a:hover{color:var(--accent-ink)}

.hero-band{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,var(--tint),transparent 82%)}
.hero-in{position:relative;max-width:var(--article);margin:0 auto;padding:2.7rem 0 2.1rem}
.hero-in h1{font-family:var(--mono);font-size:1.8rem;font-weight:700;letter-spacing:-.014em;color:var(--strong);
  margin:.3rem 0 .55rem;line-height:1.15;text-wrap:balance}
.hero-in h1.mono{font-size:1.6rem;overflow-wrap:anywhere}
.hero-in .lede{margin-bottom:.2rem}
.hero-art{position:absolute;right:-3.5rem;top:-3.5rem;width:24rem;height:24rem;color:var(--accent);
  opacity:.16;pointer-events:none}
.metarow{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:1.15rem;font-size:.78rem;color:var(--muted)}
.metarow code{background:none;border:0;padding:0;color:var(--muted);font-size:.95em}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem;align-items:center}
.hero-in:has(.hero-grid){max-width:74rem}
@media (min-width:1100px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,27rem)}}
.hero{padding:.6rem 0 .4rem;min-width:0}
.hero h1{font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.08;letter-spacing:-.016em;margin:.4rem 0 .7rem}
.hero .lede{margin-bottom:1.4rem}
.hero .stats{margin:1.9rem 0 0}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.36rem .85rem;border:1px solid var(--tint-line);
  border-radius:99px;background:var(--tint);color:var(--accent-ink);font-size:.75rem;font-weight:650;
  letter-spacing:.02em;margin-bottom:1.2rem}
.cmdchip{display:flex;align-items:center;gap:.6rem;margin:.1rem 0 1.3rem;padding:.4rem .4rem .4rem .95rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);font-family:var(--mono);
  font-size:.8rem;color:var(--ink);max-width:30rem}
.cmdchip .c-cmd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cmdchip button{flex:none;border:1px solid var(--line);background:var(--raise);color:var(--muted);
  border-radius:8px;font-family:var(--sans);font-size:.7rem;font-weight:600;padding:.34rem .7rem;
  cursor:pointer;transition:color .15s,border-color .15s}
.cmdchip button:hover{color:var(--accent-ink);border-color:var(--tint-line)}
.cmdchip button.done{color:var(--ok);border-color:var(--ok)}
.hero-side{min-width:0}
.term{border:1px solid rgba(150,168,155,.25);border-radius:14px;background:#0c110d;
  box-shadow:var(--shadow-lg);overflow:hidden}
.t-head{display:flex;align-items:center;gap:.45rem;padding:.6rem .95rem;background:#141b16;
  border-bottom:1px solid rgba(255,255,255,.06)}
.t-dot{width:.68rem;height:.68rem;border-radius:99px}
.t-title{margin-left:.45rem;font-family:var(--mono);font-size:.7rem;color:#87988c}
.t-body{padding:1.05rem 1.2rem;font-family:var(--mono);font-size:.78rem;line-height:2;
  color:#d3dcd4;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#26302a transparent}
.t-line{white-space:pre;opacity:0;animation:tline .4s ease-out forwards;
  animation-delay:calc(var(--i,0)*110ms)}
@keyframes tline{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.t-p{color:#3fcf8e;margin-right:.6rem}
.t-c{color:#7e8f83}
.t-cur{display:inline-block;width:.55em;height:1.05em;background:#d3dcd4;vertical-align:text-bottom;
  animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.feats{list-style:none;padding:0;margin:2.4rem 0 .4rem;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.feats a{display:block;height:100%;border:1px solid var(--hairline);border-radius:14px;
  padding:1.1rem 1.15rem;background:var(--card);transition:border-color .16s,box-shadow .16s}
.feats a:hover{border-color:var(--tint-line);box-shadow:var(--shadow)}
.f-ico{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:10px;
  background:var(--tint);color:var(--accent-ink);margin-bottom:.75rem}
.f-ico svg{width:1.2rem;height:1.2rem}
.f-name{display:block;font-weight:650;color:var(--strong);font-size:.94rem}
.f-desc{display:block;color:var(--muted);font-size:.84rem;margin-top:.3rem;line-height:1.5}
.lede{font-size:1.1rem;color:var(--muted);max-width:37rem;margin:.2rem 0 1.4rem;line-height:1.6;text-wrap:pretty}
.stats{display:flex;flex-wrap:wrap;gap:2.4rem;margin:0 0 1.8rem}
.stat-b b{display:block;font-size:1.45rem;font-weight:650;color:var(--strong);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.2}
.stat-b span{font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.cta{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;text-decoration:none;padding:.55rem 1.25rem;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.9rem;font-weight:550;
  transition:border-color .15s,background .15s,color .15s}
.btn:hover{border-color:var(--tint-line);color:var(--accent-ink)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#08120c}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#08120c}
:root[data-theme="light"] .btn-primary{color:#fff}
:root[data-theme="light"] .btn-primary:hover{color:#fff}

.api{display:flex;flex-direction:column;margin-top:.2rem}
.api-entry{position:relative;padding:1.55rem 0 .9rem;border-top:1px solid var(--hairline)}
.api-entry:first-child{border-top:0;padding-top:.4rem}
.api-entry.method{margin-left:1.5rem}
.api-entry h3{font-weight:600;margin:0;display:flex;gap:.6rem;align-items:flex-start}
.kindb{flex:none;display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;margin-top:.5rem;
  border-radius:7px;background:var(--tint);color:var(--accent-ink);font-family:var(--mono);
  font-size:.68rem;font-weight:650}
.api-entry h3 code{flex:1;display:block;background:var(--raise);border:1px solid var(--hairline);border-radius:10px;
  padding:.72rem .95rem;font-size:.85rem;line-height:1.55;color:var(--ink);overflow-x:auto;overflow-wrap:anywhere}
.api-entry h3 code b{font-weight:650;color:var(--accent-ink)}
.api-entry.method h3 code{font-size:.82rem}
.src{font-family:var(--mono);font-size:.68rem;color:var(--faint);margin:.5rem 0 .65rem}
.api-entry p{margin:.55rem 0;font-size:.92rem}
.xref{display:flex;flex-wrap:wrap;gap:.4rem;row-gap:.55rem;margin-top:.75rem;font-size:.74rem;color:var(--faint)}
.xref code{font-size:.92em}
.doc table{border-collapse:collapse;margin:1.2rem 0;font-size:.88rem;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--hairline);padding:.45rem .75rem;text-align:left;vertical-align:top}
.doc th{background:var(--raise);font-weight:600}
dl.params{margin:.75rem 0 .2rem;font-size:.88rem}
dl.params dt{font-family:var(--mono);font-size:.82rem;color:var(--strong);margin:.6rem 0 .1rem}
dl.params dd{margin:0 0 .4rem;padding-left:1rem;border-left:2px solid var(--raise);color:var(--muted)}
details{margin-top:1.6rem;border:1px dashed var(--line);border-radius:12px;padding:.2rem 1rem;color:var(--muted)}
summary{cursor:pointer;padding:.65rem 0;font-size:.85rem;font-weight:600}
ul{padding-left:1.2rem}

.toc-rail{grid-column:3;justify-self:start;width:12.5rem;padding:3.3rem 1rem 2rem 0;font-size:.78rem}
.toc-in{position:sticky;top:4.4rem;max-height:calc(100vh - 6rem);overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.toc-cap{font-size:.62rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 .5rem}
.toc-in nav{border-left:1px solid var(--hairline)}
.toc-link{display:block;padding:.24rem .8rem;color:var(--muted);border-left:1px solid transparent;
  margin-left:-1px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .12s,border-color .12s}
.toc-link:hover{color:var(--ink)}
.toc-link.on{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}
.toc-link.mono{font-family:var(--mono);font-size:.72rem}

.scrim{position:fixed;inset:0;background:rgba(8,10,15,.45);backdrop-filter:blur(2px);opacity:0;
  pointer-events:none;transition:opacity .2s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.palette{position:fixed;top:13vh;left:50%;transform:translateX(-50%) scale(.98);width:min(37rem,92vw);
  background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  z-index:70;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;overflow:hidden}
.palette.on{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.palette input{width:100%;border:0;border-bottom:1px solid var(--hairline);background:none;color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:1.05rem 1.3rem;outline:none}
.palette input::placeholder{color:var(--faint)}
.results{max-height:min(52vh,26rem);overflow-y:auto;padding:.5rem;scrollbar-width:thin;
  scrollbar-color:var(--line) transparent}
.res{display:flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:9px;cursor:pointer;text-decoration:none}
.res:hover{background:var(--raise)}
.res.sel{background:var(--tint)}
.res .kind{font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  border:1px solid var(--line);border-radius:5px;padding:.12rem .3rem;flex:none;width:3.6rem;text-align:center}
.res.sel .kind{color:var(--accent-ink);border-color:var(--tint-line)}
.res .nm{font-family:var(--mono);font-size:.84rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res.sel .nm{color:var(--accent-ink)}
.res .ctx{margin-left:auto;font-size:.7rem;color:var(--faint);white-space:nowrap}
.res-empty{padding:1.6rem;text-align:center;color:var(--faint);font-size:.88rem}
.pal-foot{display:flex;gap:1rem;padding:.55rem 1.1rem;border-top:1px solid var(--hairline);font-size:.66rem;color:var(--faint)}
.pal-foot kbd{font-family:var(--mono);border:1px solid var(--line);border-radius:4px;padding:0 .3rem;margin-right:.25rem}

@media (max-width:1279px){
  .mid{grid-template-columns:1fr minmax(0,var(--article)) 1fr;column-gap:0}
  .toc-rail{display:none}
  .doc{padding-left:2rem;padding-right:2rem}
  .hero-in{padding-left:2rem;padding-right:2rem}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;left:0;width:min(19rem,86vw);transform:translateX(-101%)}
  .side.open{transform:none;box-shadow:var(--shadow-lg)}
  .menu-btn{display:grid}
  .doc{padding:2rem 1.3rem 5rem}
  .hero-in{padding:2rem 1.3rem 1.7rem}
  .stats{gap:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .t-line{opacity:1}}

/* aliro-theme */
/* ---- tokens ----------------------------------------------------------- */
/* Scoped exactly as the base sheet scopes its own: OS preference first, the
   explicit toggle second, so the toggle keeps winning either way. */
:root{--serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;--codebg:#1f1e1d;--codeink:#dedcd3;--codeline:rgba(250,249,245,.09);--codehead:#171614;--codeprompt:#e08c6d;--codedim:#9a968a;--ground:#faf9f5;--surface:#faf9f5;--raise:#f0eee6;--card:#ffffff;--ink:#3d3d3a;--strong:#141413;--muted:#5c5b54;--faint:#6b6960;--line:rgba(31,30,29,.14);--hairline:rgba(31,30,29,.07);--accent:#c96442;--accent-ink:#a94c2d;--btn:#b35232;--btn-hover:#9c4221;--btn-ink:#ffffff;--ok:#297347;--tint:rgba(201,100,66,.10);--tint-line:rgba(201,100,66,.30);--shadow:0 1px 2px rgba(31,30,29,.04),0 12px 32px -20px rgba(31,30,29,.16);--shadow-lg:0 30px 70px -26px rgba(31,30,29,.35);--shadow-hover:0 2px 4px rgba(31,30,29,.05),0 18px 40px -22px rgba(31,30,29,.28);--herotint:rgba(201,100,66,.06);--scrollthumb:rgba(31,30,29,.18);}
@media (prefers-color-scheme:dark){:root{--ground:#1f1e1d;--surface:#1b1a19;--raise:#302f2c;--card:#262624;--ink:#c2c0b6;--strong:#faf9f5;--muted:#a5a39a;--faint:#9b998f;--line:rgba(250,249,245,.13);--hairline:rgba(250,249,245,.07);--accent:#d97757;--accent-ink:#d4a27f;--btn:#d97757;--btn-hover:#e08c6d;--btn-ink:#1f1e1d;--ok:#8ac9a1;--tint:rgba(212,162,127,.13);--tint-line:rgba(212,162,127,.36);--shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -16px rgba(0,0,0,.55);--shadow-lg:0 34px 80px -24px rgba(0,0,0,.7);--shadow-hover:0 2px 4px rgba(0,0,0,.5),0 20px 44px -18px rgba(0,0,0,.65);--herotint:rgba(212,162,127,.05);--scrollthumb:rgba(250,249,245,.18);}}
:root[data-theme="light"]{--ground:#faf9f5;--surface:#faf9f5;--raise:#f0eee6;--card:#ffffff;--ink:#3d3d3a;--strong:#141413;--muted:#5c5b54;--faint:#6b6960;--line:rgba(31,30,29,.14);--hairline:rgba(31,30,29,.07);--accent:#c96442;--accent-ink:#a94c2d;--btn:#b35232;--btn-hover:#9c4221;--btn-ink:#ffffff;--ok:#297347;--tint:rgba(201,100,66,.10);--tint-line:rgba(201,100,66,.30);--shadow:0 1px 2px rgba(31,30,29,.04),0 12px 32px -20px rgba(31,30,29,.16);--shadow-lg:0 30px 70px -26px rgba(31,30,29,.35);--shadow-hover:0 2px 4px rgba(31,30,29,.05),0 18px 40px -22px rgba(31,30,29,.28);--herotint:rgba(201,100,66,.06);--scrollthumb:rgba(31,30,29,.18);}
:root[data-theme="dark"]{--ground:#1f1e1d;--surface:#1b1a19;--raise:#302f2c;--card:#262624;--ink:#c2c0b6;--strong:#faf9f5;--muted:#a5a39a;--faint:#9b998f;--line:rgba(250,249,245,.13);--hairline:rgba(250,249,245,.07);--accent:#d97757;--accent-ink:#d4a27f;--btn:#d97757;--btn-hover:#e08c6d;--btn-ink:#1f1e1d;--ok:#8ac9a1;--tint:rgba(212,162,127,.13);--tint-line:rgba(212,162,127,.36);--shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -16px rgba(0,0,0,.55);--shadow-lg:0 34px 80px -24px rgba(0,0,0,.7);--shadow-hover:0 2px 4px rgba(0,0,0,.5),0 20px 44px -18px rgba(0,0,0,.65);--herotint:rgba(212,162,127,.05);--scrollthumb:rgba(250,249,245,.18);}

/* The base sheet pins color-scheme to dark and only unpins it for the
   explicit light toggle, so a first visit on a light desktop got this
   theme's ivory page with dark-rendered scrollbars, form fields and
   spinners. Follow the palette instead. `:root` outranks its `html`. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark}}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---- type ------------------------------------------------------------- */
/* A larger, airier measure throughout. Bumping the root size scales every
   rem-based component with it, sidebar included. */
html{font-size:17px}
:root{--article:48rem}
body{font-family:var(--sans);letter-spacing:-.011em;font-synthesis-weight:none}
code,kbd,pre,.mono{font-family:var(--mono)}

/* Display headings. Direct children only: the nested h2s — the uppercase
   .section-h rails and the per-module .arch-sec headings — keep the sans
   they were designed around. The .mono variants outrank these on
   specificity, so API titles stay monospace untouched. */
.doc>h1,.doc>h2,.doc>h3,.hero-in h1,.hero h1{font-family:var(--serif);
  letter-spacing:0;font-optical-sizing:auto;text-wrap:balance}
.doc>h1{font-size:2.35rem;font-weight:430;line-height:1.2}
.hero-in h1{font-size:2.45rem;font-weight:430;line-height:1.2}
.hero h1{font-size:clamp(2.6rem,5vw,3.4rem);font-weight:420;line-height:1.08}
.doc>h2{font-size:1.6rem;font-weight:500;margin:3rem 0 1rem}
.doc>h3{font-size:1.22rem;font-weight:550;margin:2rem 0 .6rem}
.doc{line-height:1.78}
.doc p{margin:1.05rem 0;text-wrap:pretty}
.lede{font-size:1.16rem;line-height:1.65;color:var(--muted)}
.eyebrow{color:var(--accent-ink);letter-spacing:.13em}

/* Links carry the accent and a light underline that firms up on hover —
   the affordance the near-black link colour used to swallow. */
a{color:var(--accent-ink)}
.doc p a,.doc li a,.doc td a{text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--accent-ink) 38%,transparent)}
.doc p a:hover,.doc li a:hover,.doc td a:hover{text-decoration-color:var(--accent-ink)}
.row-name{color:var(--accent-ink)}

/* ---- code ------------------------------------------------------------- */
/* Panels stay dark on paper in both schemes; inline code keeps the light
   chip the base sheet gives it. */
pre{background:var(--codebg);border-color:var(--codeline);color:var(--codeink);
  padding:1rem 1.15rem;font-size:.86rem;line-height:1.7}
p code,li code,.chips code,.xref code,dd code{padding:.12em .38em;
  border-radius:6px;font-size:.85em}
.copy{background:color-mix(in srgb,var(--codebg) 82%,transparent);
  border-color:var(--codeline);color:var(--codedim);backdrop-filter:blur(6px)}
.copy:hover{color:var(--codeink);border-color:var(--codeprompt)}
.copy.done{color:var(--ok);border-color:var(--ok)}

/* The hero terminal and the copyable command chips shipped a green prompt
   and green-grey chrome from the generator's own palette. Retint both. */
.term{background:var(--codebg);border-color:var(--codeline)}
.t-head{background:var(--codehead);border-bottom-color:var(--codeline)}
.t-title{color:var(--codedim)}
.t-body{color:var(--codeink)}
.t-p{color:var(--codeprompt)}
.t-c{color:var(--codedim)}
.t-cur{background:var(--codeink)}
.cmdchip{background:var(--card);border-color:var(--line);border-radius:12px;
  transition:border-color .16s ease,box-shadow .16s ease}
.cmdchip:hover{border-color:var(--tint-line);box-shadow:var(--shadow)}
.cmdchip .t-p{color:var(--accent-ink)}
.cmdchip button{background:var(--raise);border-color:var(--line)}
.cmdchip button:hover{color:var(--accent-ink);border-color:var(--tint-line)}

/* API signatures are code blocks, so they read as code blocks — the light
   panel made them the one kind of code on the site that was not. */
.api-entry h3 code{background:var(--codebg);border-color:var(--codeline);
  color:var(--codeink)}
.api-entry h3 code b{color:var(--codeprompt)}
.kindb{background:var(--tint);color:var(--accent-ink)}
.src{color:var(--faint)}

/* ---- surfaces --------------------------------------------------------- */
.hero-band{background:linear-gradient(180deg,var(--herotint),transparent 82%)}
.btn{transition:border-color .16s ease,background .16s ease,color .16s ease,
  box-shadow .16s ease}
.btn:hover{border-color:var(--tint-line);color:var(--accent-ink);
  box-shadow:var(--shadow)}
.btn-primary,:root[data-theme="light"] .btn-primary{background:var(--btn);
  border-color:var(--btn);color:var(--btn-ink)}
.btn-primary:hover,:root[data-theme="light"] .btn-primary:hover{
  background:var(--btn-hover);border-color:var(--btn-hover);
  color:var(--btn-ink);box-shadow:var(--shadow)}

/* Cards lift a little on hover — 160ms, transform and shadow only, so
   nothing reflows. The reduced-motion block in the base sheet kills it. */
.feats a,.path,.rows a,.twin-cta{transition:border-color .16s ease,
  box-shadow .16s ease,transform .16s ease}
.feats a{border-radius:16px}
.feats a:hover{border-color:var(--tint-line);box-shadow:var(--shadow-hover);
  transform:translateY(-2px)}
.f-ico,.p-ico{background:var(--tint);color:var(--accent-ink)}
.pill{background:var(--tint);border-color:var(--tint-line);color:var(--accent-ink)}

/* Tables read like Claude's: horizontal hairlines only, a firmer header rule
   and no filled header cell. */
.doc table{border-collapse:collapse}
.doc th,.doc td{border:0;border-bottom:1px solid var(--hairline);
  padding:.6rem .8rem}
.doc th{background:none;color:var(--strong)}
.doc thead th{border-bottom:1px solid var(--line);font-weight:600}
.doc tbody tr:last-child td{border-bottom:0}

/* ---- chrome ----------------------------------------------------------- */
/* Solid topbar: the translucent blur smeared over images as they scrolled
   underneath. The crumb drops the monospace for a quiet sans. */
.topbar{background:var(--ground);backdrop-filter:none;
  -webkit-backdrop-filter:none;border-bottom:1px solid var(--hairline);
  height:3.4rem}
.crumb{font-family:var(--sans);font-size:.85rem;letter-spacing:0}
.crumb b{color:var(--strong)}
.icon-btn:hover{color:var(--accent-ink);background:var(--tint)}

/* Sidebar: calmer and more generous. Group caps become title-case headings;
   the parent cap above the bucket subcaps is redundant and goes; the
   coverage meter is build telemetry, not reader wayfinding. */
.cov{display:none}
.side{background:var(--surface)}
.side-head{padding:1.35rem 1.2rem 1.1rem}
.brand b{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.tree .tree-cap,.tree .tree-subcap{font-size:.8rem;font-weight:650;
  letter-spacing:0;text-transform:capitalize;color:var(--strong);
  padding:1.5rem .6rem .45rem}
.tree .tree-subcap{text-transform:none}
.tree .tree-cap:has(+ * .tree-subcap){display:none}
.doclink{font-size:.9rem;padding:.5rem .7rem;gap:.6rem;
  transition:background .14s ease,color .14s ease}
.item-g{font-size:.88rem;padding:.42rem .65rem}
.doclink.on,.item.on,.item-g.on{background:var(--tint);color:var(--accent-ink)}
.doclink.on svg{color:var(--accent)}
.side .search-btn{background:var(--ground);border-color:var(--line);
  color:var(--faint);font-weight:500;animation:none;border-radius:10px}
.side .search-btn:hover{border-color:var(--tint-line);color:var(--muted);
  box-shadow:none}
.side .search-btn kbd{color:var(--faint);border-color:var(--line);
  background:var(--surface)}

/* Right rail: a serif "On this page", larger targets, the accent marking
   the section actually on screen. */
.toc-cap{font-family:var(--serif);font-size:1.02rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--strong);
  margin-bottom:.7rem}
.toc-link{font-size:.85rem;padding:.3rem .8rem}
.toc-link.on{color:var(--accent-ink);border-left-color:var(--accent)}

/* The landing pill reads as a Claude-style eyebrow, not a bordered chip. */
.hero .pill{border:none;background:none;padding:0;color:var(--accent-ink);
  font-size:.74rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase}
.stat-b span{color:var(--faint)}

/* Search palette: warmer surface, and the selected row states in accent. */
.palette{background:color-mix(in srgb,var(--card) 94%,transparent);
  border-color:var(--line)}
.res.sel{background:var(--tint)}
.res.sel .nm,.res.sel .kind{color:var(--accent-ink)}
.scrim{background:color-mix(in srgb,var(--strong) 38%,transparent)}

/* ---- layout repairs --------------------------------------------------- */
/* The article is pushed left of centre by the "On this page" rail, because
   the third grid column floors at the rail's own width. The hero band sits
   outside that grid and centred itself on the full width instead, so a page
   title and the first heading under it were ~88px out of line. Give the hero
   the same three columns whenever the rail is on the page. Below 1280px the
   rail is display:none and the base sheet pads both, so this is a
   wide-viewport repair only. */
@media (min-width:1280px){
  .content:has(.toc-rail)>.hero-band>.hero-in:not(:has(.hero-grid)){
    max-width:none;width:100%;display:grid;column-gap:2.75rem;
    grid-template-columns:1fr minmax(0,var(--article)) minmax(12.5rem,1fr)}
  .content:has(.toc-rail)>.hero-band>.hero-in:not(:has(.hero-grid))>*{
    grid-column:2}
}
/* The landing hero widens to 74rem, wider than the content column at common
   desktop sizes, and the base sheet only pads it below 1280px — so the
   terminal card ran flush into the right edge of the window. */
.hero-in:has(.hero-grid){max-width:min(74rem,100%);
  padding-inline:clamp(1.3rem,3.2vw,3rem)}

/* ---- motion and focus ------------------------------------------------- */
html{scroll-behavior:smooth}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--tint);color:var(--strong)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Scrollbars follow the palette in both schemes — the base sheet only ever
   dressed the dark one. */
*{scrollbar-color:var(--scrollthumb) transparent}
pre,.t-body{scrollbar-width:thin;
  scrollbar-color:rgba(250,249,245,.18) transparent}
pre::-webkit-scrollbar,.t-body::-webkit-scrollbar{height:8px}
pre::-webkit-scrollbar-thumb,.t-body::-webkit-scrollbar-thumb{
  background:rgba(250,249,245,.16);border-radius:9px}
.tree::-webkit-scrollbar-thumb{background:var(--scrollthumb);
  border:2px solid var(--surface)}

/* aliro-motion */

@keyframes gv-rise{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(9px)}}
@keyframes gv-rise-card{from{opacity:0;transform:translate3d(0,38px,0) scale(.965)}}
@keyframes gv-ch{from{opacity:0;transform:translate3d(0,.42em,0) rotateX(-52deg);
  filter:blur(7px)}}

@media (prefers-reduced-motion:no-preference){
  .hero-cine .hero>*,.hero-lite .hero-in>*:not(.hero-art){
    animation:gv-rise .85s cubic-bezier(.16,.84,.3,1) both}
  .hero-cine .hero>*:nth-child(2){animation-delay:.06s}
  .hero-cine .hero>*:nth-child(3){animation-delay:.12s}
  .hero-cine .hero>*:nth-child(4){animation-delay:.18s}
  .hero-cine .hero>*:nth-child(5){animation-delay:.24s}
  .hero-cine .hero>*:nth-child(6){animation-delay:.30s}
  /* the art is child 1 of the lite band, so its content starts at 2 */
  .hero-lite .hero-in>*:nth-child(3){animation-delay:.06s}
  .hero-lite .hero-in>*:nth-child(4){animation-delay:.12s}
  .hero-lite .hero-in>*:nth-child(5){animation-delay:.20s}
  .hero-cine .hero-side{animation:gv-rise-card 1s cubic-bezier(.16,.84,.3,1) .2s both}

  /* Split wordmark. The script cancels the block entrance when it succeeds,
     so the h1 animates once either way. */
  .hero-cine h1.gv-split{animation:none;opacity:1;filter:none;transform:none;
    perspective:600px}
  .gv-split .ch{display:inline-block;
    animation:gv-ch .75s cubic-bezier(.16,.84,.3,1) both;
    animation-delay:calc(.1s + var(--c,0)*32ms)}
}

/* Printing runs animations in some engines and not others; pin the end state
   so a printed hero is never a blank band. */
@media print{
  .hero-cine .hero>*,.hero-cine .hero-side,.hero-lite .hero-in>*,.gv-split .ch{
    animation:none;opacity:1;filter:none;transform:none}}

.hf-spot{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(24rem 20rem at var(--mx,50%) var(--my,50%),
    rgba(224,133,95,.22),transparent 68%)}
.hero-cine.gv-live .hf-spot{opacity:1}

.hero-cine .hero-art{transform:translate3d(calc(var(--px,0)*-20px),
    calc(var(--py,0)*-15px + var(--sy,0)*70px),0);
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero-cine.gv-live .hero-art{transition-duration:.2s}
.hero-cine .hero-fx{transform:translate3d(0,calc(var(--sy,0)*40px),0)}
.hero-cine .hero-in{opacity:calc(1 - var(--sy,0)*.4)}

/* Beating docs_hero.py's own .hero-cine .term on specificity, because that
   rule is a fixed tilt and this one is the same tilt plus the pointer. */
.hero-cine .hero-side .term{transform:perspective(1400px)
    rotateY(calc(-7deg + var(--px,0)*6deg))
    rotateX(calc(2.5deg + var(--py,0)*-5deg)) scale(1.02)}
.hero-cine .hero-side .term:hover{transform:perspective(1400px)
    rotateY(0) rotateX(0) scale(1.03)}
@media (max-width:1099px){.hero-cine .hero-side .term,
  .hero-cine .hero-side .term:hover{transform:none}}

/* Typing. The generator fades the three lines in on a stagger; when the
   typist takes over they are all present from the start and empty. */
.term .t-body.gv-typed .t-line{opacity:1;animation:none}
.term .t-body.gv-typed .t-cur{margin-left:.1em}

/* Explore cards tilt toward the pointer, on top of the spotlight docs_hero.py
   already gives them. 4.5deg is enough to read as depth and small enough that
   the text stays square. */
.doc .feats a{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .16s ease,
    box-shadow .16s ease}
.doc .feats a.gv-tilt{transition-duration:.12s,.16s,.16s}
.doc .feats a:hover{box-shadow:var(--shadow-hover),inset 0 0 0 1px var(--tint-line)}

/* The rule beside a section heading draws itself in with the heading. Scoped
   to [data-rv] so a page without the script keeps a drawn rule. */
.doc .section-h[data-rv] .rule{transform:scaleX(0);transform-origin:left center;
  transition:transform 1s cubic-bezier(.2,.75,.2,1) .12s}
.doc .section-h[data-rv].rv-in .rule{transform:scaleX(1)}

/* Reading position, with the glow the hairline was missing. */
.gv-prog{box-shadow:0 0 12px var(--tint-line),0 0 3px var(--accent)}

/* The topbar leaves the page once you have. */
.topbar{transition:box-shadow .25s ease,border-color .25s ease}
.topbar.gv-lift{border-bottom-color:var(--line);
  box-shadow:0 12px 30px -24px rgba(0,0,0,.55)}

/* Sidebar entries lean toward their target. */
.doclink{transition:background .16s ease,color .16s ease,
  transform .16s cubic-bezier(.2,.7,.2,1)}
.doclink:hover{transform:translateX(2px)}

/* "On this page": one marker that slides, instead of an accent that jumps.
   The rail's own accent border is given up only once the marker is actually
   in the tree, so a page without the script keeps the border it had. */
.toc-rail nav:has(.gv-tocmark) .toc-link.on{border-left-color:transparent}
.gv-tocmark{position:absolute;left:0;top:0;width:2px;border-radius:2px;
  background:var(--accent);opacity:0;
  transition:transform .34s cubic-bezier(.2,.75,.2,1),height .34s ease,
    opacity .25s ease}
.gv-tocmark.on{opacity:1}

/* Links lift their underline rather than only recolouring it. */
.doc p a,.doc li a,.doc td a{transition:text-decoration-color .2s ease,
  text-underline-offset .2s ease}
.doc p a:hover,.doc li a:hover,.doc td a:hover{text-underline-offset:4px}

/* A light passes over the primary action once on hover. */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  pointer-events:none;transform:translateX(-170%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.btn-primary:hover::after{animation:gv-sheen .75s cubic-bezier(.3,.7,.4,1)}
@keyframes gv-sheen{to{transform:translateX(330%) skewX(-20deg)}}

/* A copy that landed should feel like it landed. */
@keyframes gv-pop{40%{transform:scale(1.13)}}
.cmdchip button.done,.hero-cine .cmdchip button.done,.prewrap .copy.done{
  color:var(--ok);border-color:var(--ok);animation:gv-pop .35s cubic-bezier(.2,.8,.3,1.3)}

/* One page into the next, where the engine has it. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:gv-vt-out .16s ease both}
::view-transition-new(root){animation:gv-vt-in .34s cubic-bezier(.2,.75,.2,1) both}
@keyframes gv-vt-out{to{opacity:0}}
@keyframes gv-vt-in{from{opacity:0;transform:translate3d(0,10px,0)}}

@media (prefers-reduced-motion:reduce){
  .hf-spot{display:none}
  .hero-cine .hero-art,.hero-cine .hero-fx{transform:none}
  .hero-cine .hero-in{opacity:1}
  .hero-cine .hero-side .term,.hero-cine .hero-side .term:hover{transform:none}
  .doc .feats a{transform:none;transition:border-color .16s ease,box-shadow .16s ease}
  .doc .section-h[data-rv] .rule{transform:none;transition:none}
  .doclink:hover{transform:none}
  .gv-tocmark{transition:opacity .2s ease}
  .btn-primary:hover::after{animation:none}
  .cmdchip button.done,.hero-cine .cmdchip button.done,.prewrap .copy.done{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}}

/* flash-page */
.qs-flash{margin:1.4rem 0 2.4rem}