/* irag docs — editorial dark theme.
   Type: Clash Display (display) + Satoshi (text) via Fontshare.
   Hairline borders, one accent, no decoration for its own sake. */
:root{
  --bg:#08090c; --bg-inset:#0b0d11; --panel:#0f1216; --panel-2:#161a21;
  --border:rgba(235,240,255,.08); --border-strong:rgba(235,240,255,.17);
  --text:#f2f3f5; --text-dim:#a2a9b4; --text-faint:#828a99;
  --accent:#58a6ff; --accent-dim:rgba(88,166,255,.12); --accent-ring:rgba(88,166,255,.45);
  --green:#3fb950; --purple:#c8a2ff; --orange:#e3a13a;
  --sans:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Clash Display",var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --dur:170ms; --ease:cubic-bezier(.22,1,.36,1);
  --side-w:250px; --toc-w:200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-color:rgba(235,240,255,.2) transparent;overflow-x:clip}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--text);font:16px/1.68 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px circle at 85% -10%, rgba(88,166,255,.05), transparent 60%),
    radial-gradient(700px circle at 0% 0%, rgba(235,240,255,.03), transparent 55%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
::selection{background:var(--accent-dim)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(235,240,255,.16);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:var(--mono);font-size:.85em;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px}
:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--accent);color:#04121f;
  padding:8px 16px;border-radius:8px;font-weight:600}
.skip:focus{left:8px;text-decoration:none}
kbd{font-family:var(--mono);font-size:11px;color:var(--text-dim);background:var(--panel-2);
  border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:1px 6px}
.logo{width:24px;height:24px;flex-shrink:0}
.logo line{stroke:rgba(242,243,245,.35);stroke-width:1.4}

/* ---------- shared shell ---------- */
.wrap{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr) var(--toc-w);
  max-width:1360px;margin:0 auto;position:relative;z-index:1;gap:0}
.side{position:sticky;top:0;height:100vh;overflow-y:auto;padding:22px 18px;
  border-right:1px solid var(--border);display:flex;flex-direction:column;gap:2px}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:var(--text)}
.side-brand b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em}
.side-brand:hover{text-decoration:none}
.side-docs{font-family:var(--mono);font-size:11px;color:var(--text-faint);
  border:1px solid var(--border);border-radius:99px;padding:1px 8px}
.side-sec{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);
  margin:18px 0 6px;padding:0 8px}
.side-link{display:block;padding:6px 10px;border-radius:var(--r-sm);color:var(--text-dim);font-size:14px}
.side-link:hover{background:var(--panel-2);color:var(--text);text-decoration:none}
.side-link[aria-current="page"]{background:var(--accent-dim);color:var(--accent);font-weight:550}

/* mobile menu toggle (hidden on desktop) */
.menu-btn{display:none;background:var(--panel-2);color:var(--text);border:1px solid var(--border);
  border-radius:var(--r-md);padding:7px 16px;font:14px var(--sans);cursor:pointer}
.menu-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}

/* search */
.search-box{position:relative;margin:0 0 4px}
.skbd{position:absolute;right:9px;top:8px;pointer-events:none}
#search{width:100%;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);
  color:var(--text);padding:8px 12px;font:14px var(--sans)}
#search::placeholder{color:var(--text-faint)}
#search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
#search-results{position:absolute;top:calc(100% + 6px);left:0;right:-40px;z-index:50;
  background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r-md);
  max-height:340px;overflow-y:auto;box-shadow:0 18px 44px -16px rgba(0,0,0,.9)}
#search-results a{display:block;padding:9px 12px;border-bottom:1px solid var(--panel-2);color:var(--text)}
#search-results a:last-child{border-bottom:none}
#search-results a:hover,#search-results a.sel{background:var(--panel-2);text-decoration:none}
#search-results .r-t{font-size:13.5px;font-weight:600}
#search-results .r-t small{color:var(--text-faint);font-weight:400;margin-left:6px}
#search-results .r-x{font-size:12px;color:var(--text-dim);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#search-results .none{padding:10px 12px;color:var(--text-dim);font-size:13px}
#search-results mark{background:none;color:var(--accent);font-weight:650}

/* ---------- doc article ---------- */
.doc{min-width:0;padding:40px 48px 60px}
article{max-width:76ch}
article h1{font-family:var(--display);font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 14px;text-wrap:balance}
article h2{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.015em;margin:44px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--border);text-wrap:balance}
article h3{font-size:18px;font-weight:640;margin:30px 0 8px}
article h4{font-size:15.5px;font-weight:640;margin:22px 0 6px}
article p{margin:12px 0;color:var(--text-dim);text-wrap:pretty}
article p strong{color:var(--text)}
article li strong{color:var(--text)}
article ul,article ol{margin:12px 0;padding-left:26px;color:var(--text-dim)}
article li{margin:6px 0}
article hr{border:none;border-top:1px solid var(--border);margin:30px 0}
article img{max-width:100%;border-radius:var(--r-md);border:1px solid var(--border);margin:14px 0}
article blockquote{border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);
  padding:12px 16px;margin:14px 0}
article blockquote p{margin:4px 0}
.hlink{opacity:0;margin-left:8px;font-weight:400;color:var(--text-faint);font-size:.85em}
h1:hover .hlink,h2:hover .hlink,h3:hover .hlink,h4:hover .hlink{opacity:1;text-decoration:none}

/* code blocks */
.code-block{position:relative;margin:14px 0}
.code-block pre{background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--r-md);
  padding:14px 16px;overflow-x:auto;line-height:1.55}
.code-block code{background:none;border:none;padding:0;font-size:13px;color:#d5dde5}
.code-lang{position:absolute;top:8px;right:64px;font:11px var(--mono);color:var(--text-faint)}
.code-copy{position:absolute;top:6px;right:8px;background:var(--panel-2);color:var(--text-dim);
  border:1px solid var(--border);border-radius:6px;padding:2px 9px;font:11px var(--mono);cursor:pointer}
.code-copy:hover{color:var(--text);border-color:var(--accent)}
.code-copy.ok{color:var(--green);border-color:var(--green)}
/* syntax tokens (GitHub-dark palette) */
.tk-c{color:#8b949e;font-style:italic}
.tk-s{color:#a5d6ff}
.tk-k{color:#ff7b72}
.tk-f{color:#d2a8ff}
.tk-v{color:#ffa657}
.tk-n{color:#79c0ff}

/* tables */
.table-wrap{overflow-x:auto;margin:14px 0;border:1px solid var(--border);border-radius:var(--r-md)}
article table,.table-wrap table{border-collapse:collapse;width:100%;font-size:14px}
.table-wrap th{background:var(--panel);color:var(--text);text-align:left;font-weight:600;
  padding:9px 12px;border-bottom:1px solid var(--border-strong)}
.table-wrap td{padding:8px 12px;border-bottom:1px solid var(--panel-2);color:var(--text-dim);vertical-align:top}
.table-wrap tr:last-child td{border-bottom:none}
.table-wrap tbody tr:hover td{background:rgba(22,26,33,.5)}

/* toc */
.toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:46px 18px 20px;font-size:13px}
.toc-t{font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--text-faint);
  margin-bottom:8px}
.toc a{display:block;color:var(--text-dim);padding:5px 10px;border-radius:var(--r-sm)}
.toc a:hover{color:var(--text);text-decoration:none;background:var(--panel-2)}
.toc a.on{color:var(--accent);background:var(--accent-dim);font-weight:550}

/* pagers + footer */
.pagers{display:flex;gap:14px;margin:44px 0 0;max-width:76ch}
.pager{flex:1;border:1px solid var(--border);border-radius:var(--r-md);padding:12px 16px;color:var(--text)}
.pager:hover{border-color:var(--accent);text-decoration:none}
.pager span{display:block;font-size:11.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em}
.pager b{font-weight:600;font-size:14.5px}
.pager.next{text-align:right;margin-left:auto}
.foot{margin-top:44px;padding-top:16px;border-top:1px solid var(--border);
  color:var(--text-faint);font-size:13px;max-width:76ch}
.foot.center{text-align:center;max-width:none;border-top:none}

/* =====================================================================
   landing — editorial
   ===================================================================== */
.is-landing main{position:relative;z-index:1}
.hero-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:16px 40px;border-bottom:1px solid var(--border);
  background:rgba(8,9,12,.72);backdrop-filter:blur(12px)}
.hero-nav .side-brand{padding:0}
.hero-nav nav{display:flex;gap:26px;font-size:14px;align-items:center}
.hero-nav nav a{color:var(--text-dim);position:relative}
.hero-nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:var(--text);transform:scaleX(0);transform-origin:right;
  transition:transform .28s var(--ease)}
.hero-nav nav a:hover{color:var(--text);text-decoration:none}
.hero-nav nav a:hover::after{transform:scaleX(1);transform-origin:left}
.landing{max-width:1180px;margin:0 auto;padding:0 40px}

.eyebrow{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.hero-eyebrow::before{content:"";display:inline-block;width:22px;height:1px;
  background:var(--accent);margin-right:12px;vertical-align:4px}
/* section titles lead with a short accent tick (replaces the old numbered
   eyebrows — one restrained accent mark, not a tracked-label scaffold) */
.sec>.sec-t::before{content:"";display:block;width:30px;height:2px;border-radius:2px;
  background:var(--accent);margin-bottom:24px;opacity:.9}
.mono-cap{font:12px var(--mono);color:var(--text-faint);letter-spacing:.03em}
.sec{padding:104px 0 96px;border-top:1px solid var(--border)}
.sec-t{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.5vw,54px);
  line-height:1.05;letter-spacing:-.02em;margin:16px 0 0;max-width:22ch;text-wrap:balance}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .9fr;gap:64px;align-items:center;padding:92px 0 76px}
.hero>*{min-width:0}
.hero-name{font-family:var(--display);font-weight:700;font-size:clamp(92px,13vw,168px);
  line-height:1;letter-spacing:-.04em;margin:6px 0 0;padding-bottom:.08em;
  margin-bottom:-.08em;overflow:hidden}
.hero-name span{display:inline-block;will-change:transform}
.hn-dot{color:var(--accent)}
.lede{font-size:19px;line-height:1.65;color:var(--text-dim);max-width:54ch;margin-top:26px;text-wrap:pretty}
.lede b{color:var(--text)}
.cta{display:flex;gap:12px;align-items:center;margin-top:36px;flex-wrap:wrap}
.btn{display:inline-block;border-radius:999px;padding:12px 26px;font-weight:600;font-size:15px;
  letter-spacing:-.01em;color:var(--text)}
.btn:hover{text-decoration:none}
.btn.primary{background:var(--text);color:#0a0b0e}
.btn.primary:hover{background:#fff;transform:translateY(-1px);
  box-shadow:0 10px 28px -14px rgba(242,243,245,.5)}
.btn.ghost{border:1px solid var(--border-strong)}
.btn.ghost:hover{border-color:var(--text-dim);transform:translateY(-1px)}
.install{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:18px;
  border:1px solid var(--border);border-radius:999px;padding:10px 12px 10px 18px;max-width:100%}
.install code{background:none;border:none;padding:0;font-size:13px;color:var(--text-dim);white-space:nowrap;
  overflow-x:auto}
.install .code-copy{position:static;background:none;border:none;color:var(--text-faint)}
.install .code-copy:hover{color:var(--text)}

/* hero graph — the code map draws itself */
.hero-graph{margin:0;position:relative}
/* The graph is the whole page's backdrop when the 3D scene is running, so
   the small hero figure would just be a duplicate — hide it then. Without
   JS, on mobile, or under reduced motion the scene never starts and the
   static SVG is what you see. */
.scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;
  pointer-events:none;display:block}
.has-scene .hero-graph{display:none}
.has-scene .hero{grid-template-columns:1fr;max-width:760px}
/* content sits above the scene, with a soft scrim so type stays readable
   over moving nodes */
.landing,header.top{position:relative;z-index:1}
.has-scene .hero-copy,.has-scene .sec>*,.has-scene .stat{position:relative}
.has-scene main.landing::before{content:"";position:fixed;inset:0;z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 85% at 50% 45%,rgba(8,9,12,.62) 0%,
    rgba(8,9,12,.40) 50%,rgba(8,9,12,.14) 80%,transparent 100%)}
/* the showcase runs its own graph; drop the backdrop out of its way */
.has-scene .showcase{background:linear-gradient(rgba(8,9,12,0),
  rgba(8,9,12,.93) 12%,rgba(8,9,12,.93) 88%,rgba(8,9,12,0))}
.ggraph{width:100%;height:auto;display:block}
.ggraph .gn{transform-box:fill-box;transform-origin:center}
.hero-graph figcaption{margin-top:12px;text-align:right}
@media (prefers-reduced-motion: no-preference){
  .ggraph{animation:gfloat 9s ease-in-out infinite alternate}
}
@keyframes gfloat{to{transform:translateY(-10px)}}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border)}
.stat{padding:30px 26px 36px;border-left:1px solid var(--border)}
.stat:first-child{border-left:none;padding-left:0}
.stat b{display:block;font:600 44px/1 var(--display);letter-spacing:-.02em}
.stat span{display:block;margin-top:10px;font-size:13px;color:var(--text-faint);line-height:1.5}

/* why */
.why-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px}
.why-cols p{color:var(--text-dim);font-size:16px;text-wrap:pretty}
.why-cols b{color:var(--text)}
.cmp{margin-top:46px}
.cmp td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.cmp th.hl,.cmp td.hl{background:rgba(88,166,255,.06)}
.cmp th.hl{color:var(--accent)}
.fineprint{margin-top:20px;font-size:13.5px;color:var(--text-faint);max-width:80ch;line-height:1.7}
.fineprint b{color:var(--text-dim)}

/* how — three actors */
.pipe{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--border);
  margin-top:48px}
.pipe em{position:absolute;top:-3px;width:5px;height:5px;border-radius:50%;opacity:0}
.pd1{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:dotL 5s linear infinite}
.pd2{background:rgba(242,243,245,.65);animation:dotR 7s linear infinite 1.2s}
@keyframes dotL{0%{left:50%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:0;opacity:0}}
@keyframes dotR{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:50%;opacity:0}}
.pipe-col{padding:30px 28px 6px;border-left:1px solid var(--border)}
.pipe-col:first-child{border-left:none;padding-left:0}
.pipe-col h3{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.01em;margin:12px 0 10px}
.pipe-col.mid h3{color:var(--accent)}
.pipe-col p{color:var(--text-dim);font-size:14.5px}
.term{width:100%;max-width:660px;margin:64px auto 0;background:var(--bg-inset);
  border:1px solid var(--border);border-radius:12px;overflow:hidden;text-align:left;will-change:transform}
.term-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;border-bottom:1px solid var(--border)}
.tb{width:9px;height:9px;border-radius:50%;background:var(--panel-2);border:1px solid var(--border-strong)}
.term-title{margin-left:8px;font:11.5px var(--mono);color:var(--text-faint)}
.term-body{margin:0;padding:16px 18px;min-height:208px;font:13px/1.75 var(--mono);color:#d5dde5;
  white-space:pre-wrap;overflow-wrap:anywhere}
.term-body .tc{color:var(--text)}
.term-body .to{color:var(--text-dim)}
.term-body .tg{color:var(--green)}
.term-caret{display:inline-block;width:8px;height:15px;background:var(--accent);
  vertical-align:-2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* features — numbered ledger */
.featlist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:34px;padding:0}
.featlist li{border-top:1px solid var(--border);padding:26px 0 30px;position:relative}
/* a hairline-divided ledger: each item led by its title + a small accent
   tick on the top rule (replaces the old numbers — structure, not scaffold) */
.featlist li::before{content:"";position:absolute;top:-1px;left:0;width:28px;height:2px;background:var(--accent)}
.featlist h3{font-size:17px;font-weight:650;letter-spacing:-.01em;margin:2px 0 8px}
.featlist p{color:var(--text-dim);font-size:14.5px;max-width:42ch}

/* shots */
.shots{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:48px;
  perspective:1400px;perspective-origin:50% 40%}
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt:hover{box-shadow:0 30px 70px -20px rgba(0,0,0,.75),
  0 0 0 1px rgba(88,166,255,.16)}
.shots figure{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  background:var(--bg-inset);will-change:transform}
.shots img{width:100%;display:block}
.shots figcaption{padding:12px 16px;border-top:1px solid var(--border);
  font:12px var(--mono);color:var(--text-faint)}

/* quote + closing */
.quote{padding:120px 0;border-top:1px solid var(--border);text-align:center}
.quote blockquote{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.6vw,44px);
  line-height:1.18;letter-spacing:-.015em;max-width:21ch;margin:0 auto;text-wrap:balance}
.quote blockquote b{color:var(--accent);font-weight:500}
.quote .mono-cap{display:block;margin-top:22px}
.closing{padding:110px 0 96px;border-top:1px solid var(--border);text-align:center}
.closing .sec-t{margin:0 auto}
.closing .cta{justify-content:center;margin-top:36px}
.foot.land{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:none;
  margin:0;padding:24px 0 30px;font:12.5px var(--mono)}
.foot.land a{color:var(--text-dim)}

/* ---- section nav: the visible rail is painted in the canvas; these are
   the real controls, hidden until focused so keyboard users can jump ---- */
.rail{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:4px;padding:8px}
.rdot{width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;background:none;color:var(--text);
  cursor:pointer;font:12px var(--sans)}
.rdot:focus-visible{width:auto;height:auto;clip:auto;overflow:visible;
  padding:8px 14px;border-radius:var(--r-sm);background:var(--panel);
  border:1px solid var(--accent);outline:2px solid var(--accent-ring);
  outline-offset:2px}

/* copy resolves as the camera arrives at that section's node */
/* The section resolves as the camera arrives at its node. Applied to the
   section itself, not its children: `.js .wipe.in` sets opacity on those
   and wins on specificity. */
.has-scene .stop{--at:1;opacity:calc(.20 + .80 * var(--at));
  transition:opacity .3s linear}
@media (prefers-reduced-motion: reduce){.has-scene .stop{opacity:1}}

/* docs reading progress bar */
.readbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--accent);
  transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------- Lenis momentum scroll (required styles) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- motion, Mistral-style ---------- */
/* cinematic scroll reveal: rise + de-blur on a heavy ease-out */
:root{--mist:cubic-bezier(.16,1,.3,1)}
.js .reveal{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .85s var(--mist),transform .85s var(--mist),filter .85s var(--mist)}
.js .reveal.in{opacity:1;transform:none;filter:blur(0)}
.js .featlist .reveal:nth-child(2n){transition-delay:.06s}
.js .shots .reveal:nth-child(2){transition-delay:.08s}

/* clip-wipe reveal (headings) — unmask bottom-up while it sharpens */
.js .wipe{clip-path:inset(0 0 100% 0);filter:blur(12px);opacity:0;
  transition:clip-path 1s var(--mist),filter 1s var(--mist),opacity .7s var(--mist)}
.js .wipe.in{clip-path:inset(0 0 -8% 0);filter:blur(0);opacity:1}

/* pixel dissolve — a canvas of bg blocks clears in a dither order to
   reveal the element beneath (the signature Mistral pixel reveal) */
.px{position:relative}
.px-canvas{position:absolute;inset:0;z-index:3;pointer-events:none;
  width:100%;height:100%;image-rendering:pixelated}

/* pixel-block hover fill on buttons */
.btn{position:relative;overflow:hidden;isolation:isolate}
/* impeccable-disable-next-line codex-grid-background: intentional interactive pixel-block fill, not a page background */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background-image:
    linear-gradient(90deg,currentColor 1px,transparent 1px),
    linear-gradient(currentColor 1px,transparent 1px);
  background-size:6px 6px;color:rgba(255,255,255,.14);
  transition:opacity .3s var(--mist)}
.btn.primary::before{color:rgba(10,11,14,.14)}
.js .btn:hover::before{opacity:1}

/* thin scrolling marquee of the command surface */
.marq{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  overflow:hidden;padding:16px 0;margin-top:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq-in{display:inline-flex;gap:0;white-space:nowrap;will-change:transform}
.marq-in span{font:500 13px var(--mono);color:var(--text-faint);padding:0 26px;
  letter-spacing:.02em}
.marq-in span::before{content:"·";color:var(--accent);margin-right:26px}
@media (prefers-reduced-motion: no-preference){
  .marq-in{animation:marq 34s linear infinite}
  .marq:hover .marq-in{animation-play-state:paused}
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- scroll-scrubbed graph showcase (anime.js timeline) ---------- */
.showcase{position:relative;height:300vh}
.sc-sticky{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:30px;padding:0 22px}
.sc-cap{text-align:center;max-width:min(92vw,780px);z-index:3}
.sc-cap-t{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.2vw,48px);
  letter-spacing:-.02em;line-height:1.06;margin:14px 0 12px;text-wrap:balance}
.sc-cap-p{color:var(--text-dim);font-size:16px;text-wrap:pretty;min-height:3.2em;
  max-width:58ch;margin-inline:auto}
.js .sc-cap-t,.js .sc-cap-p{transition:opacity .18s ease}
.sc-stage{position:relative;width:min(92vw,1060px);aspect-ratio:2/1;max-height:50vh}
.sc-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
.sc-edge{stroke:var(--accent);stroke-width:1.3;fill:none;opacity:0;
  filter:drop-shadow(0 0 3px rgba(88,166,255,.55))}
.sc-nodes{position:absolute;inset:0;z-index:2}
/* a file chip: reads as a line of `ls` output first, then as a graph node */
.sc-node{position:absolute;transform:translate(-50%,-50%);will-change:transform}
/* a file chip: reads as a line of `ls` output first, then as a graph node */
.sc-chip{white-space:nowrap;font:12.5px/1 var(--mono);letter-spacing:-.01em;
  color:var(--text-dim);background:var(--panel);border:1px solid var(--border-strong);
  border-radius:7px;padding:7px 11px;opacity:0;will-change:transform,opacity;
  transition:color .3s var(--mist),border-color .3s var(--mist),
    background .3s var(--mist),box-shadow .3s var(--mist)}
.sc-node.dep .sc-chip{color:var(--text);border-color:rgba(88,166,255,.5)}
.sc-node.hot .sc-chip{color:#08090c;background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(88,166,255,.16),0 8px 26px rgba(88,166,255,.28)}
.sc-edges.lit .sc-edge{stroke-width:1.8;filter:drop-shadow(0 0 5px rgba(88,166,255,.55))}
@media (max-width:820px){.sc-chip{font-size:11px;padding:6px 9px}}
.sc-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;
  font:11px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint)}
.sc-hint::after{content:"";display:block;width:1px;height:22px;margin:8px auto 0;
  background:linear-gradient(var(--text-faint),transparent)}
@media (prefers-reduced-motion: no-preference){.sc-hint{animation:schint 2s ease-in-out infinite}}
@keyframes schint{50%{opacity:.35;transform:translate(-50%,5px)}}
@media (max-width:820px){.showcase{height:230vh}.sc-stage{aspect-ratio:1.25/1}}
@media (prefers-reduced-motion: reduce){
  .sc-hint{animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:1140px){.wrap{grid-template-columns:var(--side-w) minmax(0,1fr)}.toc{display:none}}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;gap:48px;padding:70px 0 60px}
  .hero-graph{max-width:480px}
  .hero-graph figcaption{text-align:left}
  .stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--border)}
  .why-cols{grid-template-columns:1fr;gap:14px}
  .featlist{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr}
  .pipe-col{border-left:none;padding:24px 0 8px;border-top:1px solid var(--border)}
  .pipe-col:first-child{border-top:none}
  .shots{grid-template-columns:1fr}
}
@media (max-width:820px){
  .wrap{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:none;border-bottom:1px solid var(--border);padding:12px 16px;gap:8px}
  .side-brand{padding:4px 8px;margin-right:auto}
  .menu-btn{display:block}
  .side-links{display:none;flex:1 1 100%}
  .side.open .side-links{display:block;padding-top:6px}
  .search-box{flex:1 1 100%;order:9}
  .skbd{display:none}
  #search-results{right:0}
  .doc{padding:26px 20px 40px}
  .hero-nav{padding:14px 22px;gap:12px}
  .hero-nav nav{gap:16px;font-size:13.5px}
  .nav-sec{display:none}
  .landing{padding:0 22px}
  .hero{padding:54px 0 46px}
  .hero-name{font-size:clamp(68px,20vw,92px)}
  .sec{padding:70px 0 62px}
  .quote{padding:84px 0}
  .closing{padding:80px 0 70px}
  .stat b{font-size:36px}
  /* the install URL is one unbreakable token: white-space:normal alone only
     wraps at spaces, so it overflowed the pill and the command read as
     ".../Karang1908" with "/irag.git" clipped off. min-width:0 lets the
     flex item shrink; overflow-wrap breaks the token only when it must. */
  .install code{white-space:normal;overflow-wrap:anywhere;min-width:0}
}
@media (prefers-reduced-motion: no-preference){
  .side-link,.btn,.pager,.code-copy{transition:background var(--dur) var(--ease),color var(--dur),border-color var(--dur),filter var(--dur),transform var(--dur) var(--ease),box-shadow var(--dur)}
}
@media (prefers-reduced-motion: reduce){
  .ggraph{animation:none}
  .pipe em{animation:none;opacity:.6}
  .pd1{left:25%}
  .pd2{left:75%}
  .term-caret{animation:none}
  .js .reveal{opacity:1;transform:none;filter:none;transition:none}
  .js .wipe{clip-path:none;filter:none;opacity:1;transition:none}
  .marq-in{animation:none}
  .btn::before{display:none}
}


/* proof grid: measured numbers, landing page */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin:34px 0}
.pf{background:var(--bg);padding:22px 20px;display:flex;flex-direction:column;gap:7px}
.pf b{font-family:var(--display);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;
  color:var(--text);font-variant-numeric:tabular-nums}
.pf span{font-size:14px;color:var(--text-dim);line-height:1.5}


/* ---- launch transition ---- */
/* The sidebar sat on nothing, so the node field showed straight through
   the links. It is a solid panel now.
   No backdrop-filter: blurring a sticky 100vh backdrop (and the TOC's)
   re-composites on every frame — it washed the panel out AND was the
   reason the page felt slow. An opaque panel needs no blur anyway. */
.has-scene .side{background:#0b0d11;border-right:1px solid var(--border);
  padding:22px 18px 30px}
.has-scene .toc{background:#0b0d11;border-radius:var(--r-md);padding:14px 12px}
/* legible regardless of whether the scene ever starts */
.side-link{color:#c6cdd9}
.side-link:hover{color:var(--text)}
.side-sec{color:#9aa3b2}
.side-docs{color:#9aa3b2}
/* a texture behind the docs, never a competitor to the prose */
.scene.ambient{opacity:.28}
.has-scene .wrap{position:relative;z-index:1}
/* The scrim MUST hang off .wrap, not .doc-shell. .doc-shell comes after
   .side in the DOM and creates its own stacking context (it has an opacity
   animation), so a fixed full-viewport pseudo inside it painted straight
   over the sidebar and dimmed it. On .wrap it sits behind both columns. */
.has-scene .wrap::before{content:"";position:fixed;inset:0;z-index:-1;
  pointer-events:none;background:radial-gradient(105% 70% at 50% 40%,
  rgba(8,9,12,.93) 0%,rgba(8,9,12,.86) 55%,rgba(8,9,12,.72) 100%)}
.warp-veil{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:#08090c}
/* docs arrive out of the same white-out the landing page left on */
@media (prefers-reduced-motion: no-preference){
  .doc-shell{animation:doc-in .22s ease-out both}
}
/* docs are for reading: a plain fade, no movement or blur */
@keyframes doc-in{ from{opacity:0} to{opacity:1} }

/* changelog: everything older than the newest few is one click away */
.older-releases{margin-top:36px;border-top:1px solid var(--border);padding-top:8px}
.older-releases>summary{cursor:pointer;list-style:none;user-select:none;
  display:inline-flex;align-items:center;gap:9px;padding:10px 16px;margin:8px 0 4px;
  border:1px solid var(--border);border-radius:999px;background:var(--card,#0f1218);
  color:var(--text-dim);font:600 13.5px/1 var(--mono);letter-spacing:.02em;
  transition:color .15s ease,border-color .15s ease}
.older-releases>summary::-webkit-details-marker{display:none}
.older-releases>summary::before{content:"+";font-size:15px;line-height:1;
  color:var(--accent)}
.older-releases[open]>summary::before{content:"–"}
.older-releases>summary:hover{color:var(--text);border-color:var(--accent)}
.older-releases>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.older-releases[open]>summary{margin-bottom:18px}