/*
 * simplesplit design system, ported from the approved mockup (squared.html).
 * Plain CSS with custom properties -- no Tailwind. Tokens below are
 * authoritative; keep them in sync with the mockup if it changes.
 */

:root{
  color-scheme:light;
  --bg:#FFFFFF; --canvas:#FAFAFD; --stone:#EFEDF7; --stone-2:#E5E2F2; --line:#E7E5F5;
  --ink:#121026; --muted:rgba(18,16,38,.62); --faint:rgba(18,16,38,.42);
  --btn:#121026; --btn-ink:#FAFAFD;
  --pos:#12805B; --neg:#C0432A; --pos-bg:rgba(18,128,91,.10); --neg-bg:rgba(192,67,42,.10);
  /* "Indigo Sun" palette: --orange/--green/--blue keep their names from the
     original mockup tokens but now hold indigo/teal/amber -- renaming them
     touches every call site for no functional gain, so read them as
     accent-1/2/3 rather than literally orange/green/blue. */
  --orange:#5B4FE8; --green:#17A673; --blue:#F0A93B;
  --shadow:0 2px 10px rgba(0,0,0,.05); --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --serif:"Arvo", ui-serif, Georgia, serif;
  --sans:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --hand:"Caveat", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121026; --canvas:#171530; --stone:#201D3D; --stone-2:#2A2649; --line:#2E2A4F;
    --ink:#F1F0FA; --muted:rgba(241,240,250,.64); --faint:rgba(241,240,250,.42);
    --btn:#F1F0FA; --btn-ink:#121026;
    --pos:#3FC08A; --neg:#E2643D; --pos-bg:rgba(63,192,138,.13); --neg-bg:rgba(226,100,61,.13);
    --orange:#8B7FFF; --green:#2FC08D; --blue:#F0A93B;
    --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121026; --canvas:#171530; --stone:#201D3D; --stone-2:#2A2649; --line:#2E2A4F;
  --ink:#F1F0FA; --muted:rgba(241,240,250,.64); --faint:rgba(241,240,250,.42);
  --btn:#F1F0FA; --btn-ink:#121026;
  --pos:#3FC08A; --neg:#E2643D; --pos-bg:rgba(63,192,138,.13); --neg-bg:rgba(226,100,61,.13);
  --orange:#8B7FFF; --green:#2FC08D; --blue:#F0A93B;
  --shadow:0 2px 10px rgba(0,0,0,.35); --shadow-lg:0 12px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);padding-inline:0;-webkit-font-smoothing:antialiased}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
a{color:inherit}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
h1,h2,h3{text-wrap:balance;margin:0}
p{margin:0}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:0;font-size:14px;font-weight:500;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn.dark{background:var(--btn);color:var(--btn-ink)}
.btn.soft{background:var(--stone);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.sm{height:30px;padding:0 10px;gap:5px;font-size:13px}
.btn.lg{height:46px;padding:0 22px;font-size:15px}
.btn:hover{filter:brightness(.96)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--muted);cursor:pointer;font-size:14px;text-decoration:none}
.link:hover{color:var(--ink)}

/* brand + app nav */
.brand{font-family:var(--serif);font-size:21px;letter-spacing:-.02em;line-height:1;text-decoration:none;color:var(--ink)}
.appnav{display:flex;flex-direction:column;gap:10px;padding:14px 24px;border-bottom:1px solid var(--line)}
.appnav-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.appnav nav{display:flex;gap:18px;min-width:0}
.appnav nav a{background:none;border:0;padding:0;font-size:14px;color:var(--muted);cursor:pointer;text-decoration:none}
.appnav nav a.on{color:var(--ink);font-weight:500}
.av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:600;color:#121026;flex:none;border:2px solid var(--bg);text-decoration:none}
.av.sm{width:22px;height:22px;font-size:10px}
.av.pending{background:transparent!important;color:var(--muted);border:1.5px dashed var(--faint)}
.stack{display:flex}.stack .av+.av{margin-left:-7px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:500;background:var(--stone);color:var(--muted);white-space:nowrap}
.chip.pos{background:var(--pos-bg);color:var(--pos)} .chip.neg{background:var(--neg-bg);color:var(--neg)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}

.container{max-width:1160px;margin:0 auto}
.body{padding:32px 32px 48px}
.eyebrow{font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}

/* landing */
.l-nav{display:flex;align-items:center;gap:24px;padding:16px 28px;max-width:1160px;margin:0 auto}
.l-nav nav{display:flex;gap:24px;flex:1;justify-content:center}
.l-nav nav a{font-size:14px;color:var(--muted);text-decoration:none}
.pill-2{display:inline-flex;border-radius:999px;overflow:hidden;margin-left:auto}
.pill-2 a{height:38px;padding:0 16px;display:inline-flex;align-items:center;font-size:14px;font-weight:500;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.pill-2 a.soft{background:var(--stone);color:var(--ink)}
.pill-2 a.dark{background:var(--btn);color:var(--btn-ink)}
.pill-2 a:hover{filter:brightness(.96)}
.l-hero{text-align:center;padding:72px 24px 88px;max-width:1160px;margin:0 auto}
.announce{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:26px;background:none;border:0;cursor:pointer;text-decoration:none}
.l-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.4vw,72px);line-height:1.08;letter-spacing:-.025em;max-width:12em;margin:0 auto}

/* Hero "s": opens as a green $, spins once around its y-axis, lands as a
   normal "s". .s-flip-b sits in normal flow so the letter reserves the
   exact space "s" needs (no layout shift once the animation settles);
   .s-flip-a ($ ) overlays it during the flip only. Base (non-animated)
   opacity values ARE the resting state, so prefers-reduced-motion (which
   disables the animation globally) still lands on a plain "s". */
.s-flip{display:inline-block;position:relative;perspective:240px}
.s-flip-a{position:absolute;left:0;top:0;color:var(--pos);opacity:0;animation:s-flip-rotate .9s ease-in-out 1 both,s-flip-out .9s ease-in-out 1 both}
.s-flip-b{display:inline-block;opacity:1;animation:s-flip-rotate .9s ease-in-out 1 both,s-flip-in .9s ease-in-out 1 both}
@keyframes s-flip-rotate{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes s-flip-out{0%,45%{opacity:1}50%,100%{opacity:0}}
@keyframes s-flip-in{0%,50%{opacity:0}55%,100%{opacity:1}}
.l-hero p{font-size:19px;color:var(--muted);max-width:30em;margin:22px auto 30px;text-wrap:pretty}
.l-hero .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;padding:0 28px;max-width:1160px;margin:0 auto}
.duo-h{margin-bottom:10px;text-align:center}
.duo-h .k{font-size:20px;font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--muted)}
.duo-h .k b{display:block;color:var(--ink);font-weight:500}
.duo-cta{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none}
.duo-cta:hover{text-decoration:underline}
.duo-cta .fi{transition:transform .15s ease}
.duo-cta:hover .fi{transform:translateX(2px)}
.mini{background:var(--stone);border-radius:4px;padding:22px 22px 0;position:relative;min-height:250px}
.mini::before{content:"";position:absolute;left:22px;top:0;width:10px;height:14px;background:var(--orange)}
.mini.g::before{background:var(--green)}
.mini .card{background:var(--bg);border-radius:10px 10px 0 0;box-shadow:var(--shadow);padding:16px 18px;font-size:13px}
.receipt-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.receipt-row:last-child{border-bottom:0}
.msg{max-width:88%;font-size:14px;padding:10px 13px;border-radius:14px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--btn);color:var(--btn-ink);border-bottom-right-radius:4px;margin-left:auto}
.msg.bot{align-self:flex-start;background:var(--bg);box-shadow:var(--shadow);border-bottom-left-radius:4px}
.api{align-self:stretch;font-family:var(--mono);font-size:11.5px;color:var(--muted);display:flex;gap:8px;align-items:baseline;padding:2px 4px;line-height:1.45}
.api .m{color:var(--pos);font-weight:500;flex:none}
.api .st{margin-left:auto;flex:none;color:var(--faint)}
.reveal-item{opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.reveal-item.in{opacity:1;transform:none}
.band{margin:72px 28px 0;background:var(--canvas);border-radius:6px;padding:56px 28px;text-align:center;max-width:1104px;margin-left:auto;margin-right:auto}
.band h2{font-size:clamp(28px,3.6vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.12}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:36px;text-align:left}
.step{background:var(--bg);border-radius:10px;padding:20px;box-shadow:var(--shadow)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--faint)}
.step h3{font-size:18px;font-weight:500;letter-spacing:-.015em;margin:8px 0 6px}
.step p{color:var(--muted);font-size:14px}
.l-foot{text-align:center;padding:80px 24px 40px}
.l-foot h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.02em;line-height:1.1}

/* auth */
.auth{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:start;padding:64px 40px;max-width:1160px;margin:0 auto}
.auth-card{max-width:380px;width:100%;justify-self:center}
.auth-card h1{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.02em;line-height:1.1;scroll-margin-top:32px}
.auth-card p.sub{color:var(--muted);margin:10px 0 26px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:500}
.input{height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);padding:0 14px;width:100%}
/* date-field: the real <input type=date> sits invisibly on top so a tap
   opens the OS picker directly; the visible layer is just sized text. */
.date-field{position:relative;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg);overflow:hidden}
.date-field-display{display:flex;align-items:center;height:100%;padding:0 14px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.date-field input[type="date"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:none;cursor:pointer}
.input:focus{outline:none;border-color:var(--ink)}
textarea.input{height:auto;padding:10px 14px;resize:vertical;line-height:1.5}
.code{font-family:var(--mono);letter-spacing:.5em;text-align:center;font-size:20px}
.email{background:var(--stone);border-radius:6px;padding:22px;position:relative}
.email .mail{background:var(--bg);border-radius:10px;box-shadow:var(--shadow);padding:22px;font-size:14px}
.email .hdr{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:12px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:18px}
.email .hdr b{font-weight:500;color:var(--ink)}
.bigcode{font-family:var(--mono);font-size:26px;letter-spacing:.3em;background:var(--canvas);border-radius:8px;padding:10px;text-align:center;margin:14px 0}
.stepper{display:flex;gap:8px;margin-bottom:28px}
.stepper span{height:3px;flex:1;border-radius:3px;background:var(--line)}
.stepper span.on{background:var(--ink)}
.note{font-family:var(--hand);font-size:22px;color:var(--orange);line-height:1.1;transform:rotate(-2deg)}
.flash{max-width:1160px;margin:14px auto 0;padding:0 40px}
.flash div{background:var(--neg-bg);color:var(--neg);border-radius:10px;padding:10px 14px;font-size:14px}
.flash.notice div{background:var(--pos-bg);color:var(--pos)}

/* events list */
.page-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.page-h h1{font-family:var(--serif);font-weight:400;font-size:40px;letter-spacing:-.02em;line-height:1.05}
.balance-line{font-size:14px;color:var(--muted);text-align:left;margin:14px 0 26px}
.balance-line .num{font-size:15px;font-weight:500}
.rows{border-top:1px solid var(--line)}
.erow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-inline:0;border-top:0;width:100%;text-align:left;text-decoration:none;color:inherit}
.erow-archived{opacity:.5}
.erow:hover{background:var(--canvas)}
.erow .t{font-size:17px;font-weight:500;letter-spacing:-.015em}
.erow .d{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:3px}
.erow .bal{text-align:right;min-width:110px}
.erow .bal .num{font-size:16px}
.erow .bal small{display:block;font-size:12px;color:var(--muted)}
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border-radius:10px;overflow:hidden;margin-bottom:28px}
.summary>div{background:var(--canvas);padding:16px 18px}
.summary .num{font-size:22px;display:block;margin-top:4px}
/* Always three columns on one line, even on narrow phones -- shrink
   padding/type instead of wrapping to a second row. */
.summary-line{grid-template-columns:repeat(3,1fr)}
.summary-line>div{padding:12px 8px;min-width:0}
.summary-line .eyebrow{font-size:10.5px}
.summary-line .num{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* event */
.ev-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;align-items:start}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sec-h h2{font-size:17px;font-weight:500;letter-spacing:-.015em}
.act details{border-bottom:1px solid var(--line)}
.act summary{list-style:none;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 2px;cursor:pointer}
.act summary::-webkit-details-marker{display:none}
.ico{width:36px;height:36px;border-radius:10px;background:var(--stone);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
.ico.pay{background:var(--pos-bg);color:var(--pos)}
.act .t{font-weight:500;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.act .s{font-size:13px;color:var(--muted)}
.act .r{text-align:right}
.act .r .num{display:block}
.act .r small{font-size:12px}
.shares{padding:0 2px 14px 50px;display:grid;gap:6px;font-size:13px}
.shares div{display:flex;justify-content:space-between;gap:10px}
.by{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--muted);background:var(--stone);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.by.agent{background:rgba(91,79,232,.14);color:var(--orange)}
.side{display:flex;flex-direction:column;gap:18px}
.box{background:var(--canvas);border-radius:10px;padding:18px}
.xfer{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.xfer:last-child{border-bottom:0}
.xfer .who{font-size:14px;line-height:1.3}
.xfer .who .num{display:block;font-size:15px;margin-top:2px}
.balrow{display:grid;grid-template-columns:62px 1fr 84px;gap:10px;align-items:center;font-size:13px;padding:5px 0}
.bartrack{position:relative;height:10px}
.bartrack::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--faint)}
.bar{position:absolute;top:0;height:10px;border-radius:2px}
.bar.p{left:50%;background:var(--pos)} .bar.n{right:50%;background:var(--neg)}
.balrow .num{text-align:right}
.settled{display:flex;gap:10px;align-items:center;color:var(--pos);font-weight:500}
.confirm{background:var(--canvas);border-radius:10px;padding:14px 16px;margin-bottom:16px;display:grid;gap:10px}
.confirm .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.confirm .row:first-of-type{border-top:0;padding-top:0}
.confirm .acts{display:flex;gap:6px}
.pend{display:inline-block;font-size:11px;font-weight:500;color:var(--orange);margin-left:6px}

/* agents */
.ag-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:28px;align-items:start}
.keyrow{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.scopes{display:flex;gap:6px;flex-wrap:wrap}
.instr{font-size:13px;color:var(--muted);border-left:2px solid var(--line);padding-left:10px}
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.check input{margin-top:3px;accent-color:var(--ink)}
.check small{display:block;color:var(--muted);font-size:12px}
.row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.secret{background:var(--canvas);border:1px dashed var(--faint);border-radius:10px;padding:14px;display:grid;gap:10px;margin-top:14px}
.secret code{font-family:var(--mono);font-size:13px;word-break:break-all}
.agentpick{position:relative;display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.agentpick::-webkit-scrollbar{display:none}
.agentpick label{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;flex:none;white-space:nowrap}
.agentpick input{position:absolute;opacity:0;pointer-events:none}
.agentpick label:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.agentpick .dot{width:18px;height:18px;border-radius:6px;display:block;flex:none}
.prompt{background:var(--canvas);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.prompt-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.prompt pre{margin:0;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--ink);max-height:360px;overflow:auto}
.prompt pre .k{background:rgba(238,123,74,.16);color:var(--ink);border-radius:3px;padding:0 3px}
.steps-v{display:grid;gap:26px;min-width:0}
.steps-v>*,.steps-v .box{min-width:0}
.stepn{min-width:0}
/* Small-caps eyebrow labels read fine as field-group labels inside a
   bounded card (below), which is why they're scoped to .box -- used bare in
   the page's flow, at page-title size, they competed with the page title
   instead of reading as subordinate to it. */
.box .stepn h2{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
/* .sub marks a section header as subordinate to the page's own title (also
   .sec-h h2, but without .sub) -- same ink-colored, sentence-case treatment
   as the page title, just a size down. */
.sec-h.sub h2{font-size:15px;font-weight:500;letter-spacing:-.01em}
.stepn+.stepn{margin-top:18px}
.conn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.conn .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:600;color:#121026}
.feed{border-top:1px solid var(--line)}
.feed div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.feed small{color:var(--faint);font-size:12px;white-space:nowrap}

/* sheet (modal) */
dialog.sheet{border:0;background:var(--bg);border-radius:16px;box-shadow:var(--shadow-lg);width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:24px;margin:auto;color:var(--ink)}
dialog.sheet::backdrop{background:rgba(16,15,15,.35)}
dialog.sheet[open]{animation:sheet-in .15s ease both}
@keyframes sheet-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:28px;letter-spacing:-.02em;margin-bottom:18px}
.people{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--line);cursor:pointer;font-size:13px;background:var(--bg)}
.pick input[type=checkbox]{margin:0}
.pick:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pick .w{width:44px;height:26px;border-radius:999px;border:1px solid var(--line);text-align:center;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:12px}
.preview{background:var(--canvas);border-radius:10px;padding:12px 14px;font-size:13px;display:grid;gap:4px;margin:14px 0}
.preview div{display:flex;justify-content:space-between}
.sheet .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.err{color:var(--neg);font-size:13px;min-height:1em}
.acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
.seg{display:inline-flex;gap:2px;padding:4px;background:var(--stone);border-radius:999px;max-width:100%;overflow-x:auto}
.seg button,.seg a{border:0;background:transparent;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;white-space:nowrap;text-decoration:none}
.seg button[aria-selected="true"],.seg a[aria-selected="true"]{background:var(--bg);color:var(--ink);box-shadow:var(--shadow)}

/* model / docs page */
.doc{max-width:900px;margin:0 auto;padding:44px 8px 60px}
.doc h2{font-family:var(--serif);font-weight:400;font-size:36px;letter-spacing:-.02em;line-height:1.1;margin:52px 0 12px}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:17px;font-weight:500;letter-spacing:-.015em;margin:28px 0 8px}
.doc p,.doc li{max-width:66ch;color:var(--muted)}
.doc p+p{margin-top:10px}
.doc ul{padding-left:18px;margin:8px 0;display:grid;gap:6px}
.doc b{color:var(--ink);font-weight:500}
.doc code{font-family:var(--mono);font-size:.88em;background:var(--stone);border-radius:4px;padding:1px 5px;color:var(--ink)}
.ents{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.ent{background:var(--canvas);border-radius:10px;padding:16px}
.ent h4{margin:0 0 8px;font-family:var(--mono);font-size:13px;font-weight:500}
.ent h4 span{color:var(--faint);font-weight:400}
.ent dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px}
.ent dt{font-family:var(--mono);color:var(--ink)}
.ent dd{margin:0;color:var(--muted)}
.scroll{overflow-x:auto}
pre.code{background:var(--canvas);border-radius:10px;padding:16px 18px;font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-x:auto;margin:12px 0;color:var(--ink)}
table.t{border-collapse:collapse;width:100%;font-size:13.5px;margin-top:12px;min-width:560px}
table.t th{text-align:left;font-weight:500;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
table.t td:first-child{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.flow{display:grid;gap:0;margin-top:14px;border-left:1px solid var(--line);padding-left:20px}
.flow>div{position:relative;padding:0 0 18px}
.flow>div::before{content:"";position:absolute;left:-25px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--ink)}
.flow b{display:block}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:999px;font-size:14px;box-shadow:var(--shadow-lg);z-index:60}

@media (max-width:820px){
  .ev-grid,.ag-grid{grid-template-columns:1fr}
  .l-nav nav{display:none}
  .body{padding:22px 16px 36px}
  .appnav{padding:12px 16px;gap:14px}
  .l-hero{padding:48px 16px 60px}
  .duo{padding:0 16px}.band{margin:48px 16px 0;padding:40px 16px}
  /* Less padding above the card (so there's less to scroll past when the
     keyboard opens and the browser brings the focused input into view --
     it was clipping the heading), more below (so content doesn't sit
     flush against the bottom of the viewport / the keyboard). */
  .auth{padding:20px 16px 72px}
  .l-nav{padding:12px 16px}
  .stepper{margin-bottom:20px}
  .auth-card p.sub{margin-bottom:18px}
  .erow{grid-template-columns:minmax(0,1fr) auto}
  .erow .st{display:none}
}
@media (max-width:400px){
  .page-h h1{font-size:32px}
  .auth-card h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}