@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================================
   SELIUS
   Type   : Inter, everywhere. No second family.
   Look   : blueprint terminal. hairline grid, square corners,
            corner ticks, no glow, no two-tone headlines.
   ============================================================ */

:root{
  --bg:#000000;
  --bg-1:#050506;
  --panel:#08080A;
  --panel-2:#0D0D10;
  --panel-3:#131317;
  --line:rgba(255,255,255,.065);
  --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.19);

  /* glass, shared by the nav, panels and code blocks */
  --glass:rgba(12,12,17,.55);
  --glass-2:rgba(20,20,27,.62);
  --text:#FFFFFF;
  --text-2:#B9B9C2;
  --muted:#71767B;
  --faint:#4A4A52;
  --accent:#AEB2F7;
  --accent-2:#8B90EE;
  --ok:#3FCF8E;
  --warn:#E0B155;

  --nav:262px;
  --maxw:1720px;
  --gutter:clamp(18px,2.6vw,52px);
  --r:3px;

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:var(--font);
  --code:var(--font);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* a class with an explicit display beats the UA rule for [hidden], so pin it */
[hidden]{display:none!important}
svg{display:block;flex:none}
.nav__toggle svg,.mbar__btn svg{width:16px;height:16px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:15.5px;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* the whole site shares one ambient cast so no page reads as flat black */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 76% -12%,rgba(112,118,224,.11),transparent 68%),
    radial-gradient(900px 600px at 8% 108%,rgba(96,102,200,.07),transparent 70%);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:560;letter-spacing:-.038em;line-height:1.08}
p{margin:0}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#1D1D24;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2C2C36}

/* ============================================================
   SHELL
   ============================================================ */
.main{margin-right:var(--nav);border-right:1px solid var(--line);position:relative;z-index:1;min-height:100vh}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ============================================================
   NAV
   Glass over the artwork rather than a slab beside it. No solid
   fills, no table rules: the page is soft and luminous, so the
   active row is a wash of the same accent the artwork uses.
   ============================================================ */
.nav{
  position:fixed;inset:0 0 0 auto;width:var(--nav);
  background:rgba(6,6,9,.62);
  backdrop-filter:blur(26px) saturate(125%);
  -webkit-backdrop-filter:blur(26px) saturate(125%);
  border-left:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;z-index:55;
}
/* a faint bloom at the top edge, echoing the contour light */
.nav::before{
  content:'';position:absolute;inset:0 0 auto;height:220px;pointer-events:none;
  background:linear-gradient(180deg,rgba(174,178,247,.07),transparent);
}
.nav__head{
  display:flex;align-items:center;padding:0 18px;height:64px;
  border-bottom:1px solid rgba(255,255,255,.05);flex:none;position:relative;
}
.nav__brand{display:flex;align-items:center;gap:10px;min-width:0}
.nav__logo{width:24px;height:24px;overflow:hidden;flex:none}
.nav__logo img{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.nav__name{font-size:14px;font-weight:520;letter-spacing:-.02em;color:var(--text-2)}
.nav__brand:hover .nav__name{color:var(--text)}
.nav__toggle{display:none;order:-1;margin-right:auto;color:var(--faint);place-items:center;padding:6px}

.nav__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px 10px;position:relative}

.nav__item{
  display:grid;grid-template-columns:17px 1fr 6px;align-items:center;gap:12px;
  padding:11px 12px;border-radius:var(--r);
  color:var(--muted);font-size:14px;font-weight:420;letter-spacing:-.014em;
  position:relative;transition:color .25s var(--ease),background .25s var(--ease);
}
.nav__ico{
  width:17px;height:17px;display:grid;place-items:center;
  color:rgba(255,255,255,.30);transition:color .25s var(--ease);
}
.nav__ico svg{width:17px;height:17px}
.nav__tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__dot{width:4px;height:4px;border-radius:50%;background:transparent;transition:background .3s,box-shadow .3s}

.nav__item:hover{color:var(--text-2);background:rgba(255,255,255,.035)}
.nav__item:hover .nav__ico{color:var(--text-2)}

.nav__item.is-active{
  color:var(--text);font-weight:480;
  background:linear-gradient(90deg,rgba(174,178,247,.03),rgba(174,178,247,.11));
}
.nav__item.is-active .nav__ico{color:var(--accent)}
.nav__item.is-active .nav__dot{background:var(--accent);box-shadow:0 0 9px var(--accent)}

/* sub index */
.nav__subs{display:none;padding:4px 0 10px 29px;position:relative}
.nav__subs.is-open{display:block}
.nav__subs::before{content:'';position:absolute;left:20px;top:6px;bottom:12px;width:1px;background:rgba(255,255,255,.07)}
.nav__sub{
  display:block;padding:6px 12px 6px 0;font-size:12.5px;color:rgba(255,255,255,.34);
  letter-spacing:-.01em;transition:color .22s,transform .28s var(--ease);
}
.nav__sub:hover{color:var(--text-2);transform:translateX(-2px)}
.nav__sub.on{color:var(--accent)}

.nav__foot{border-top:1px solid rgba(255,255,255,.05);padding:0;flex:none;position:relative}
.nav__x{
  display:flex;align-items:center;gap:10px;padding:16px 18px;
  font-size:12px;color:rgba(255,255,255,.28);letter-spacing:-.01em;
  transition:color .25s,background .25s;
}
.nav__x svg{width:12px;height:12px}
.nav__x:hover{color:var(--text-2);background:rgba(255,255,255,.03)}

.mbar{
  display:none;position:fixed;top:0;left:0;right:0;height:54px;z-index:70;
  background:rgba(6,6,9,.72);backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;gap:12px;padding:0 14px;
}
.mbar__brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:520;letter-spacing:-.02em}
.mbar__brand .lg{width:22px;height:22px;overflow:hidden}
.mbar__brand img{width:100%;height:100%;object-fit:contain;transform:scale(1.12)}
.mbar__btn{color:var(--text-2);padding:8px;margin-left:-8px;transition:.2s}
.mbar__btn:hover{color:var(--text)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.25s;z-index:50}
body.nav-open .scrim{opacity:1;visibility:visible}

/* ============================================================
   PANEL : the core surface. square, hairline, corner ticks.
   ============================================================ */
.panel{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid var(--line);border-radius:var(--r);
  position:relative;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.panel:hover{background:var(--glass-2);border-color:var(--line-2)}
.panel::after{
  content:'';position:absolute;inset:-1px;pointer-events:none;opacity:0;
  transition:opacity .3s var(--ease);
  background:
    linear-gradient(var(--accent) 0 0) 0 0/10px 1px no-repeat,
    linear-gradient(var(--accent) 0 0) 0 0/1px 10px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 0/10px 1px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 0/1px 10px no-repeat,
    linear-gradient(var(--accent) 0 0) 0 100%/10px 1px no-repeat,
    linear-gradient(var(--accent) 0 0) 0 100%/1px 10px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 100%/10px 1px no-repeat,
    linear-gradient(var(--accent) 0 0) 100% 100%/1px 10px no-repeat;
}
.panel:hover::after,.panel.lit::after{opacity:.8}
.panel__bar{
  display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.022);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.panel__bar .r{margin-left:auto;display:flex;align-items:center;gap:10px}
.panel__b{padding:clamp(16px,1.7vw,24px)}

/* ============================================================
   SECTION : index number in the margin, single colour heading
   ============================================================ */
.sec{border-bottom:1px solid var(--line);padding-block:clamp(34px,3.6vw,56px)}
.sec__h{display:flex;gap:clamp(14px,2.2vw,38px);align-items:flex-start;margin-bottom:clamp(18px,2vw,28px)}
.sec__ix{
  font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;
  padding-top:.6em;flex:none;width:34px;
}
.sec__t{font-size:clamp(24px,2.9vw,40px);letter-spacing:-.04em;max-width:22ch;line-height:1.1}
.sec__n{margin-left:auto;display:flex;gap:10px;align-items:center;flex:none}

/* ============================================================
   BUTTONS : rectangular
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border-radius:var(--r);font-size:13.5px;font-weight:500;letter-spacing:-.012em;
  border:1px solid transparent;position:relative;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,opacity .18s;
}
.btn svg{width:14px;height:14px}
.btn--p{background:#fff;color:#000}
.btn--p:hover{background:#DEDEE6}
.btn--s{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--s:hover{background:var(--panel-2);border-color:var(--line-3)}
.btn--g{color:var(--muted);padding-inline:4px}
.btn--g:hover{color:var(--text)}
.btn--g svg{transition:transform .3s var(--ease)}
.btn--g:hover svg{transform:translateX(4px)}
.btn[disabled]{opacity:.34;pointer-events:none}
.btn--sm{padding:7px 12px;font-size:12.5px}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.f{display:block}
.f__l{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px;
}
.f__i,.f__s{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:var(--r);
  padding:10px 12px;font-size:14px;color:var(--text);letter-spacing:-.012em;
  transition:border-color .2s,background .2s;
}
.f__i::placeholder{color:var(--faint)}
.f__i:focus,.f__s:focus{outline:0;border-color:var(--accent);background:var(--panel-2)}
.f__s{
  appearance:none;cursor:pointer;padding-right:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.f__s option{background:#0D0D10;color:#fff}
.f__row{display:grid;gap:14px}
.f__hint{font-family:var(--mono);font-size:10px;color:var(--faint);margin-top:7px;letter-spacing:.04em}
.mono-i{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}

/* ============================================================
   TAGS / STATES
   ============================================================ */
.tag{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 8px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--muted);
  white-space:nowrap;
}
.tag--draft{color:var(--faint)}
.tag--open{color:var(--accent);border-color:rgba(174,178,247,.34);background:rgba(174,178,247,.07)}
.tag--claimed{color:var(--warn);border-color:rgba(224,177,85,.32);background:rgba(224,177,85,.06)}
.tag--verify{color:var(--text);border-color:var(--line-3)}
.tag--settled{color:var(--ok);border-color:rgba(63,207,142,.3);background:rgba(63,207,142,.06)}

/* ============================================================
   STATE MACHINE STRIP
   ============================================================ */
.smx{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.smx__s{
  flex:1;padding:12px 14px;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;position:relative;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.smx__s:last-child{border-right:0}
.smx__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);transition:color .4s}
.smx__v{font-size:13.5px;color:var(--faint);letter-spacing:-.015em;transition:color .4s}
.smx__s.done{background:var(--panel)}
.smx__s.done .smx__k{color:var(--muted)}
.smx__s.done .smx__v{color:var(--text-2)}
.smx__s.now{background:var(--panel-3)}
.smx__s.now .smx__k{color:var(--accent)}
.smx__s.now .smx__v{color:var(--text)}
.smx__s.now::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:var(--accent)}

/* ============================================================
   BOARD ROWS
   ============================================================ */
.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:1fr 132px 118px 130px;align-items:center;gap:18px;
  padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .18s;position:relative;text-align:left;width:100%;
}
.row:hover{background:var(--panel-2)}
.row.sel{background:linear-gradient(90deg,rgba(174,178,247,.10),rgba(174,178,247,.02))}
.row.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.row__n{display:block;font-size:14.5px;color:var(--text);letter-spacing:-.018em;min-width:0}
.row__c{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.row__p{font-family:var(--mono);font-weight:500;font-size:14px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.row__a{justify-self:end}
.rows__empty{padding:64px 16px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}

/* ============================================================
   FILTER BAR
   ============================================================ */
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.022)}
.fbar__search{
  flex:1;min-width:180px;display:flex;align-items:center;gap:9px;
  background:rgba(0,0,0,.35);border:1px solid var(--line-2);border-radius:var(--r);padding:0 11px;
  transition:border-color .2s;
}
.fbar__search:focus-within{border-color:var(--accent)}
.fbar__search svg{width:14px;height:14px;color:var(--faint)}
.fbar__search input{flex:1;background:none;border:0;outline:0;padding:9px 0;font-size:13.5px}
.fbar__search input::placeholder{color:var(--faint)}
.chipf{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--muted);
  transition:.18s;
}
.chipf:hover{color:var(--text);border-color:var(--line-3)}
.chipf.on{background:rgba(174,178,247,.16);border-color:rgba(174,178,247,.42);color:var(--accent)}
.fbar__count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-left:auto}

/* ============================================================
   INSPECTOR
   ============================================================ */
.insp{position:sticky;top:20px}
.insp__empty{padding:64px 20px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.9}
.kvs{display:grid}
.kv2{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.kv2:last-child{border-bottom:0}
.kv2 dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);padding-top:3px}
.kv2 dd{margin:0;color:var(--text-2);min-width:0;word-break:break-word}
.kv2 dd.m{font-family:var(--mono);font-size:13px;color:var(--text);font-variant-numeric:tabular-nums}

/* ============================================================
   CODE
   ============================================================ */
.code{background:rgba(0,0,0,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.code pre{margin:0;padding:15px;overflow-x:auto;font-family:var(--code);font-size:12.5px;line-height:1.78;color:var(--text-2);font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.code .k{color:var(--accent)}
.code .s{color:#8CC7A8}
.code .n{color:#E2C384}
.code .c{color:var(--faint)}

/* ============================================================
   ACTION CARDS (usesook-style paired cards)
   ============================================================ */
.acts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.act{
  padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;min-height:0;
}
.act__t{font-size:clamp(19px,1.9vw,26px);letter-spacing:-.035em;max-width:18ch;line-height:1.16}
.act__f{margin-top:auto;padding-top:34px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;transition:color .25s}
.act:hover .act__f{color:var(--text)}
.act__f svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.act:hover .act__f svg{transform:translateX(5px)}

/* ============================================================
   SPLIT / LEDGER (without vs with, one line each)
   ============================================================ */
.ldg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ldg__c{padding:clamp(20px,2.2vw,30px)}
.ldg__c+.ldg__c{border-left:1px solid var(--line)}
.ldg__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.ldg__c.on .ldg__k{color:var(--accent)}
.ldg__v{font-size:clamp(18px,1.9vw,26px);letter-spacing:-.035em;margin-top:12px;line-height:1.15;max-width:20ch}
.ldg__l{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0}
.ldg__l li{
  display:flex;gap:11px;align-items:center;color:var(--text-2);
  font-size:12.5px;letter-spacing:.01em;
  padding:8px 0;border-bottom:1px solid var(--line);
}
.ldg__l li:last-child{border-bottom:0}
.ldg__l b{font-weight:400;color:var(--faint);width:14px;flex:none}

/* ============================================================
   CLOSER
   ============================================================ */
.closer{padding-block:clamp(44px,5vw,78px);border-bottom:1px solid var(--line)}
.closer h2{font-size:clamp(26px,3.6vw,52px);letter-spacing:-.045em;max-width:19ch;line-height:1.1;margin-inline:auto;text-align:center}
.closer__cta{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding-block:26px}
.foot__in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot__l{display:flex;gap:22px;flex-wrap:wrap}
.foot__l a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.foot__l a:hover{color:var(--text)}
.foot__c{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--faint)}
.foot__note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px;line-height:1.7;max-width:88ch}

/* ============================================================
   PAGE HEAD
   ============================================================ */
.phead{border-bottom:1px solid var(--line);padding-block:clamp(52px,7vw,104px);position:relative;overflow:hidden;isolation:isolate}
.phead__in{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.phead h1{font-size:clamp(32px,4.4vw,62px);letter-spacing:-.046em}
.phead__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.phead__a{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ============================================================
   HERO
   ============================================================ */
/* ============================================================
   STAGE
   One sticky viewport with the scenes stacked inside it. The
   scroll distance comes from the tall track, not from tall
   sections, so there is real travel with no dead space: the pin
   is always exactly one screen and its content is centred.
   ============================================================ */
.stage{position:relative;height:calc((var(--scenes,3) + 0.55) * 100vh)}
.stage__pin{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate}
.scene{
  position:absolute;inset:0;z-index:1;
  display:flex;align-items:center;
  padding-block:clamp(60px,8vh,96px);
}
.scene>.wrap{width:100%}
.stage__pin>.scene:first-of-type .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.stage__dots{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;gap:7px;z-index:6;pointer-events:none;
}
.stage__dots span{width:26px;height:2px;background:var(--line-2);transition:background .45s var(--ease)}
.stage__dots span.on{background:#fff}
/* the headline is the page. cap it on character count, not on a pixel width,
   so it breaks in the same place at every size it is legible at. */
.scene h1{
  font-size:clamp(42px,8.4vw,128px);letter-spacing:-.055em;line-height:1.0;
  max-width:13ch;margin-inline:auto;
}
.hero__sub{margin-top:clamp(18px,1.8vw,28px);color:var(--muted);font-size:clamp(15px,1.35vw,20px);max-width:46ch;line-height:1.5}
.hero__cta{display:flex;gap:11px;margin-top:clamp(24px,2.6vw,38px);flex-wrap:wrap;justify-content:center}

/* ============================================================
   DOCS
   ============================================================ */
.doc{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(28px,4vw,68px);align-items:start;padding-block:clamp(30px,3.4vw,52px)}
.toc{position:sticky;top:24px;border-left:1px solid var(--line);padding-left:18px}
.doc__s{position:relative}
.toc__t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.toc a{display:block;padding:5px 0;font-size:13px;color:var(--muted);transition:color .2s}
.toc a:hover{color:var(--text)}
.toc a.on{color:var(--accent)}
.doc__s{padding-bottom:clamp(38px,4.4vw,64px);margin-bottom:clamp(38px,4.4vw,64px);border-bottom:1px solid var(--line);scroll-margin-top:24px}
.doc__s:last-child{border-bottom:0;margin-bottom:0}
.doc__s h2{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.038em;margin-bottom:18px}
.doc__s h3{font-size:17px;letter-spacing:-.028em;margin:32px 0 12px}
.doc__s p{color:var(--text-2);font-size:15px;line-height:1.72;max-width:78ch;margin-bottom:15px}
.doc__s p:last-child{margin-bottom:0}
.doc__s ul{margin:0 0 16px;padding-left:19px;color:var(--text-2);font-size:15px;line-height:1.72;max-width:78ch}
.doc__s li{margin-bottom:7px}
.doc__s .code,.doc__s .kvs,.doc__s .panel{margin:20px 0}
.doc__lead{color:var(--muted);font-size:16.5px;line-height:1.65;max-width:72ch}

/* ============================================================
   UTIL
   ============================================================ */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mt{margin-top:20px}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:12px;align-items:start}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1400px){
  .wide{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
}
@media (max-width:1180px){
  .wide{grid-template-columns:1fr}
  .insp{position:static}
  .doc{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:940px){
  /* Stacking absolutely positioned scenes cannot work when the content is
     taller than the screen, so on small viewports this becomes a normal page:
     scenes flow, nothing is faded, and the artwork is capped to the top. */
  .stage{height:auto}
  .stage__pin{position:relative;height:auto;overflow:hidden}
  .scene{
    position:relative;inset:auto;min-height:auto;
    padding-block:clamp(64px,11vh,96px);
    opacity:1!important;transform:none!important;pointer-events:auto!important;
  }
  .scene+.scene{border-top:1px solid var(--line)}
  .stage__dots{display:none}
  /* pin was static before, so inset:0 escaped to .main and stretched the
     artwork down the whole page. Bound it to the top of the stage instead. */
  .banner{position:absolute;inset:0 0 auto;height:min(72vh,560px);transform:none}
  .banner::after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.15) 45%,#000 100%)}
  .banner--head{inset:0;height:100%}
  .mbar{display:flex}
  .main{margin-right:0;border-right:0;padding-top:54px}
  .nav{left:auto;right:0;width:min(300px,86vw);transform:translateX(102%);transition:transform .38s var(--ease);z-index:75;box-shadow:-24px 0 60px -30px #000}
  body.nav-open .nav{transform:translateX(0)}
  .nav__toggle{display:grid}
  .acts,.ldg,.g2,.g3{grid-template-columns:1fr}
  .ldg__c+.ldg__c{border-left:0;border-top:1px solid var(--line)}
  .smx{flex-direction:column}
  .smx__s{border-right:0;border-bottom:1px solid var(--line)}
  .smx__s:last-child{border-bottom:0}
  .row{grid-template-columns:1fr auto;gap:10px 14px}
  .row__a{grid-column:2;grid-row:1}
  .row__st{grid-column:1/-1;display:flex;gap:8px}
  .sec__h{flex-wrap:wrap}
  .sec__ix{width:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   SCENES
   Compact on purpose. The cross-fade is tuned to the distance a
   section travels, not to how tall it is, so sections stay dense
   and the fade still reads.
   ============================================================ */
.sec[data-scene]>.wrap{width:100%}

/* ============================================================
   APP COMPONENTS  (composer, verdicts, session, toast)
   ============================================================ */
.compose__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:clamp(16px,2.4vw,32px);align-items:start}
.compose__spec .code{margin-top:8px}
.compose__spec pre{min-height:236px}

.acc-list{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.acc-list__t{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.chk{display:flex;gap:12px;padding:5px 0;font-size:12.5px}
.chk b{font-weight:450;color:var(--text-2);min-width:82px}
.chk span{color:var(--muted);word-break:break-word}

.vd{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.vd__h{margin-bottom:10px}
.vd__c{display:flex;gap:10px;padding:6px 0;font-size:12.5px;border-bottom:1px solid var(--line)}
.vd__c:last-of-type{border-bottom:0}
.vd__c b{font-weight:450;color:var(--red);min-width:78px}
.vd__c.ok b{color:var(--ok)}
.vd__c span{color:var(--muted)}
.vd__e{margin-top:10px;font-size:10.5px;color:var(--faint);word-break:break-all}

.tag--fail{color:var(--red);border-color:rgba(240,101,111,.32);background:rgba(240,101,111,.07)}

.sess{padding:12px 18px;border-bottom:1px solid var(--line)}
.sess__h{display:block;font-size:13px;color:var(--text);letter-spacing:-.015em}
.sess__b{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.sess__b i{font-style:normal;color:var(--faint)}

.keyout{border-top:1px solid var(--line)}
.keyout__v{margin-top:8px;background:rgba(0,0,0,.4);border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px}
.keyout__v code{font-size:12px;color:var(--accent);word-break:break-all}

.jobc textarea.f__i{resize:vertical;line-height:1.6;font-size:12.5px}
.ck{display:block;padding:3px 0;font-size:11.5px;color:var(--red)}
.ck.ok{color:var(--ok)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--glass-2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-radius:var(--r);
  padding:12px 18px;font-size:13.5px;color:var(--text);z-index:200;
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
  max-width:min(520px,88vw);box-shadow:0 22px 60px -24px #000;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast--ok{border-color:rgba(63,207,142,.4)}
.toast--err{border-color:rgba(240,101,111,.42)}

@media (max-width:1080px){ .compose__grid{grid-template-columns:1fr} }

/* ---------- wallet (nav footer) ---------- */
.wbtn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 18px;border:0;background:none;cursor:pointer;
  border-bottom:1px solid var(--line);
  font:inherit;font-size:12.5px;letter-spacing:-.012em;
  color:var(--text-2);text-align:left;
  transition:color .25s,background .25s;
}
.wbtn svg{width:14px;height:14px;flex:none;color:var(--accent)}
.wbtn:hover:not(:disabled){color:var(--text);background:rgba(174,178,247,.05)}
.wbtn:disabled{opacity:.55;cursor:default}
.wbtn--ghost svg{color:var(--faint)}
.wbtn--warn{color:var(--warn)}
.wbtn--warn svg{color:var(--warn)}
.wbtn--warn:hover{background:rgba(224,177,85,.07);color:var(--warn)}

.wbox{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 8px;padding:12px 12px 12px 18px;
  border-bottom:1px solid var(--line);
}
.wbox__a{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text);letter-spacing:-.012em;
}
.wbox__a svg{width:13px;height:13px;flex:none;color:var(--accent)}
.wbox__b{grid-column:1;font-size:11.5px;color:var(--muted)}
.wbox__x{
  grid-row:1/3;grid-column:2;
  border:0;background:none;cursor:pointer;padding:6px;
  color:var(--faint);line-height:0;border-radius:var(--r);
  transition:color .2s,background .2s;
}
.wbox__x svg{width:12px;height:12px}
.wbox__x:hover{color:var(--text-2);background:rgba(255,255,255,.05)}