@font-face{font-family:Figtree;src:url(/assets/figtree.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{
  --font:Figtree,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#fefdfb;--surface:#ffffff;--surface-2:#f6f3ec;--line:#e7e2d7;--line-strong:#d4cdbd;
  --ink:#213130;--ink-2:#44585a;--muted:#667775;
  --accent:#b1e47c;--accent-hover:#a2da69;--accent-ink:#17260f;--accent-soft:#eef9df;--accent-text:#2d6a1a;
  --amber:#b7791f;--amber-soft:#fdf3dc;--bad:#c2410c;--bad-soft:#fdeadf;--ok:#2d7a3a;--ok-soft:#e8f6e6;--info:#2b6f8a;--info-soft:#e3f1f6;
  --ring:rgba(94,160,52,.45);--shadow:0 1px 2px rgba(33,49,48,.06),0 8px 24px rgba(33,49,48,.07);--shadow-lg:0 2px 4px rgba(33,49,48,.06),0 24px 60px rgba(33,49,48,.14);
  --r1:4px;--r2:6px;--r3:8px;--r4:12px;--r5:16px;--rfull:999px;
  --ease:cubic-bezier(.2,.8,.2,1);--t1:.12s;--t2:.2s;--t3:.32s;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#111413;--surface:#181c1b;--surface-2:#1f2423;--line:#2a312f;--line-strong:#3a4442;
  --ink:#eef3f0;--ink-2:#c3d0cb;--muted:#92a39e;
  --accent:#9bd985;--accent-hover:#aae496;--accent-ink:#0f1f0a;--accent-soft:#1c2b19;--accent-text:#a9e48f;
  --amber:#e8b04a;--amber-soft:#2e2514;--bad:#ff8a5c;--bad-soft:#331c12;--ok:#7fd28b;--ok-soft:#16281a;--info:#7cc3de;--info-soft:#14262d;
  --ring:rgba(155,217,133,.5);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#111413;--surface:#181c1b;--surface-2:#1f2423;--line:#2a312f;--line-strong:#3a4442;
  --ink:#eef3f0;--ink-2:#c3d0cb;--muted:#92a39e;
  --accent:#9bd985;--accent-hover:#aae496;--accent-ink:#0f1f0a;--accent-soft:#1c2b19;--accent-text:#a9e48f;
  --amber:#e8b04a;--amber-soft:#2e2514;--bad:#ff8a5c;--bad-soft:#331c12;--ok:#7fd28b;--ok-soft:#16281a;--info:#7cc3de;--info-soft:#14262d;
  --ring:rgba(155,217,133,.5);--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.3);--shadow-lg:0 2px 4px rgba(0,0,0,.3),0 24px 60px rgba(0,0,0,.5);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;font-feature-settings:"ss01"}
::selection{background:var(--accent);color:var(--accent-ink)}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:0 0 .5rem;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3.4rem)} h2{font-size:clamp(1.4rem,3vw,2rem)} h3{font-size:1.1rem;letter-spacing:-.01em}
p{margin:0 0 1rem;text-wrap:pretty} a{color:var(--accent-text);text-underline-offset:3px}
small,.small{font-size:.875rem} .muted{color:var(--muted)} .ink2{color:var(--ink-2)} .center{text-align:center}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--ring);border-radius:var(--r3)}

/* ---------- page transitions (progressive enhancement; ignored where unsupported) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s;animation-timing-function:var(--ease)}
.side{view-transition-name:side}

/* ---------- icons ---------- */
.i{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}

/* ---------- buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:40px;padding:0 1.05rem;border-radius:var(--r3);border:1px solid transparent;background:var(--accent);color:var(--accent-ink);font:600 .9rem/1 var(--font);text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:background var(--t1),transform var(--t1),box-shadow var(--t2),border-color var(--t1)}
.btn:active{transform:scale(.97)}
.btn.sm{min-height:32px;padding:0 .75rem;font-size:.85rem;border-radius:var(--r2)}
.btn.lg{min-height:48px;padding:0 1.4rem;font-size:1rem;border-radius:var(--rfull)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.quiet{background:transparent;color:var(--ink-2)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line-strong)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;transform:none}
.btn.busy{cursor:progress;opacity:.8}
@media (hover:hover){.btn:not(:disabled):hover{background:var(--accent-hover)}.btn.ghost:not(:disabled):hover,.btn.quiet:not(:disabled):hover,.btn.danger:not(:disabled):hover{background:var(--surface-2)}}
.kbd{display:inline-block;min-width:1.4em;padding:0 .35em;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--r2);font:600 .72rem/1.5 var(--font);color:var(--muted);text-align:center;background:var(--surface)}
.btn .kbd{margin-left:.15rem;background:rgba(255,255,255,.4);border-color:rgba(0,0,0,.15);color:inherit}

/* ---------- forms ---------- */
label,.label{display:block;font-weight:600;font-size:.875rem;margin:0 0 .3rem}
.hint{color:var(--muted);font-size:.85rem;margin:.3rem 0 0}
input[type=text],input[type=number],input[type=time],input[type=datetime-local],input[type=file],input[type=search],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r3);padding:.6rem .75rem;min-height:44px;transition:border-color var(--t1),box-shadow var(--t2)}
textarea{min-height:7rem;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--ring)}
input[type=checkbox]{width:1.15rem;height:1.15rem;accent-color:var(--accent-text);vertical-align:middle}
.check{display:flex;align-items:center;gap:.6rem;font-weight:400;margin:.4rem 0;min-height:32px;font-size:.95rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.9rem 1rem}
.stack>*+*{margin-top:1rem} .stack-s>*+*{margin-top:.5rem}
fieldset{border:1px solid var(--line);border-radius:var(--r4);padding:.6rem 1rem 1rem;margin:1rem 0;background:var(--surface)}
legend{font-weight:700;padding:0 .4rem;font-size:.9rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .row.end{justify-content:flex-end} .grow{flex:1}

/* ---------- cards, chips, banners ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r4);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--rfull);padding:.2rem .65rem .2rem .5rem;font-size:.78rem;font-weight:600;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.chip.good{background:var(--ok-soft);color:var(--ok)} .chip.bad{background:var(--bad-soft);color:var(--bad)} .chip.wait{background:var(--amber-soft);color:var(--amber)} .chip.info{background:var(--info-soft);color:var(--info)}
.badge{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line-strong);border-radius:var(--r2);padding:.1rem .5rem;font-size:.78rem;font-weight:600;color:var(--ink-2);background:var(--surface)}
.net{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:var(--r2);background:var(--ink);color:var(--bg);font:700 .7rem/1 var(--font)}
.banner{display:flex;gap:.75rem;align-items:flex-start;border:1px solid var(--line);border-left:4px solid var(--line-strong);border-radius:var(--r3);padding:.8rem 1rem;margin:1rem 0;background:var(--surface)}
.banner.good{border-left-color:var(--ok);background:var(--ok-soft)} .banner.bad{border-left-color:var(--bad);background:var(--bad-soft)} .banner.wait{border-left-color:var(--amber);background:var(--amber-soft)}
.banner .i{margin-top:.15rem}
.note{color:var(--muted);font-size:.9rem}
.fingerprint{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;overflow-wrap:anywhere}
hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}

/* ---------- public top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;height:64px;padding:0 max(1rem,calc((100vw - 1120px)/2));background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color var(--t2)}
.topbar.scrolled{border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.logo{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--accent);display:grid;place-items:center}
.logo svg{width:18px;height:18px}
.topnav{display:flex;gap:.25rem;margin-left:1rem}
.topnav a{padding:.45rem .75rem;border-radius:var(--rfull);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.92rem;transition:background var(--t1)}
.topnav a:hover{background:var(--surface-2)} .topnav a[aria-current=page]{color:var(--ink);background:var(--surface-2)}
.topbar .spacer{flex:1}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--rfull);border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background var(--t1)}
.icon-btn:hover{background:var(--surface-2)}
.wrap{width:min(1120px,100% - 2rem);margin-inline:auto} .narrow{width:min(720px,100% - 2rem);margin-inline:auto}
.foot{margin-top:5rem;padding:2rem 0 3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
@media (max-width:720px){.topnav{display:none}}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh}
.side{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:.4rem;padding:1rem .75rem;border-right:1px solid var(--line);background:var(--surface)}
.side .brand{padding:.25rem .5rem 1rem}
.side .btn.newpost{width:100%;justify-content:space-between;margin-bottom:.75rem}
.nav a{display:flex;align-items:center;gap:.7rem;min-height:40px;padding:0 .7rem;border-radius:var(--r3);color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.93rem;transition:background var(--t1),color var(--t1)}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a[aria-current=page]{background:var(--accent-soft);color:var(--ink);font-weight:700}
.nav a[aria-current=page] .i{color:var(--accent-text)}
.nav .count{margin-left:auto;font-size:.75rem;font-weight:700;background:var(--amber-soft);color:var(--amber);border-radius:var(--rfull);padding:0 .5rem;min-width:1.4rem;text-align:center}
.side h4{margin:1rem .7rem .25rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.chan{display:flex;align-items:center;gap:.6rem;padding:.35rem .7rem;font-size:.9rem;color:var(--ink-2)}
.side .spacer{flex:1}
.me{display:flex;align-items:center;gap:.6rem;padding:.6rem .5rem;border-top:1px solid var(--line);margin-top:.5rem}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.me form{margin-left:auto}
.main{min-width:0;padding:1.5rem clamp(1rem,3vw,2.5rem) 4rem}
.mobilebar{display:none}
.scrim{display:none}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}
.page-head h1{font-size:clamp(1.6rem,3.2vw,2.2rem);margin:0}
.page-head>div:first-child{flex:1 1 18rem;min-width:0}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:50;transform:translateX(-102%);transition:transform var(--t3) var(--ease);box-shadow:var(--shadow-lg)}
  body.nav-open .side{transform:none}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;opacity:0;pointer-events:none;transition:opacity var(--t2)}
  body.nav-open .scrim{opacity:1;pointer-events:auto}
  .mobilebar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.5rem;height:56px;padding:0 .75rem;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
}

/* ---------- pipeline board ---------- */
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;padding-bottom:1rem}
.lane{min-width:0}
[hidden]{display:none!important}
.lane-head{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-weight:700;font-size:.9rem}
.lane-head .n{margin-left:auto;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.lane-dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--line-strong)}
.lane.attn .lane-dot{background:var(--bad)} .lane.wait .lane-dot{background:var(--amber)} .lane.sched .lane-dot{background:var(--info)} .lane.done .lane-dot{background:var(--ok)}
.lane-body{display:flex;flex-direction:column;gap:.6rem;min-height:6rem;padding:.5rem;border-radius:var(--r4);background:var(--surface-2)}
.pcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:.75rem .85rem;color:var(--ink);text-decoration:none;box-shadow:0 1px 1px rgba(33,49,48,.04);transition:transform var(--t2) var(--ease),box-shadow var(--t2),border-color var(--t1)}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line-strong)}
.pcard .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.92rem;margin:.35rem 0 .55rem;overflow-wrap:anywhere}
.pcard .m{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;font-size:.78rem;color:var(--muted)}
.empty{display:grid;place-items:center;text-align:center;gap:.4rem;padding:1.2rem .5rem;color:var(--muted);font-size:.85rem}
.pcard[hidden]{display:none}
.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-bottom:1rem}
.toolbar input[type=search]{max-width:260px}.toolbar select{width:auto;min-width:160px}

/* ---------- stepper (one post's journey through the gate) ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:1rem 0 1.5rem;padding:0;counter-reset:s}
.step{position:relative;text-align:center;padding:0 .25rem;font-size:.78rem;color:var(--muted)}
.step .dot{position:relative;z-index:1;width:34px;height:34px;margin:0 auto .45rem;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-strong);color:var(--muted);transition:all var(--t3) var(--ease)}
.step::before{content:"";position:absolute;top:16px;left:-50%;width:100%;height:2px;background:var(--line-strong)}
.step:first-child::before{display:none}
.step.done::before{background:var(--accent-text)}
.step.done .dot{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.step.now .dot{border-color:var(--accent-text);color:var(--accent-text);animation:pulse 1.8s var(--ease) infinite}
.step.stop .dot{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.step.done,.step.now{color:var(--ink)} .step b{display:block;font-size:.82rem}
.step .st{display:block;color:var(--muted)}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--ring)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (max-width:560px){.step .st{display:none}.step b{font-size:.7rem}}

/* ---------- post preview ---------- */
.preview{border:1px solid var(--line);border-radius:var(--r4);background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}
.preview .meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.85rem;color:var(--ink-2)}
.preview .meta .sp{flex:1}
.post-text{margin:0;padding:1rem 1.1rem;white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.05rem;line-height:1.5}
.preview img{display:block;max-width:100%;height:auto;border-top:1px solid var(--line)}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:.5rem 1.2rem;margin:1rem 0}
dl.facts dt{color:var(--muted);font-size:.9rem} dl.facts dd{margin:0;font-variant-numeric:tabular-nums}

/* ---------- live checks + counter ring (composer and landing gate) ---------- */
.checks{list-style:none;margin:.75rem 0;padding:0;display:grid;gap:.35rem}
.checks li{display:flex;align-items:flex-start;gap:.55rem;font-size:.9rem;padding:.4rem .6rem;border-radius:var(--r3);background:var(--surface-2);transition:background var(--t2),color var(--t2)}
.checks li .i{margin-top:.12rem}
.checks li.ok{color:var(--ok)} .checks li.bad{background:var(--bad-soft);color:var(--bad)} .checks li.warn{background:var(--amber-soft);color:var(--amber)} .checks li.idle{color:var(--muted)}
.checks li span{color:var(--ink)} .checks li.bad span,.checks li.ok span,.checks li.warn span{color:inherit}
.ringc{display:inline-flex;align-items:center;gap:.45rem;font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.ringc svg{width:26px;height:26px;transform:rotate(-90deg)} .ringc circle{fill:none;stroke-width:3.5}
.ringc .bg{stroke:var(--line-strong)} .ringc .fg{stroke:var(--accent-text);stroke-linecap:round;transition:stroke-dashoffset var(--t2),stroke var(--t2)}
.ringc.warn .fg{stroke:var(--amber)} .ringc.over .fg{stroke:var(--bad)} .ringc.over{color:var(--bad)}
.mirror{position:relative}
.mirror .hl{position:absolute;inset:0;padding:.6rem .75rem;border:1px solid transparent;font:inherit;font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:transparent;pointer-events:none;overflow:hidden}
.mirror .hl mark{background:var(--bad-soft);color:transparent;border-bottom:2px solid var(--bad);border-radius:2px}
.mirror textarea{position:relative;background:transparent}

/* ---------- the gate (landing playground) ---------- */
.gate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r5);box-shadow:var(--shadow-lg);overflow:hidden}
.gate-top{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:.85rem;color:var(--ink-2)}
.gate-top .dots{display:flex;gap:.3rem} .gate-top .dots i{width:.6rem;height:.6rem;border-radius:50%;background:var(--line-strong)}
.gate-steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:1rem .5rem .25rem;gap:0}
.gs{position:relative;text-align:center;font-size:.76rem;color:var(--muted);padding:0 .2rem}
.gs .dot{position:relative;z-index:1;width:36px;height:36px;margin:0 auto .35rem;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line-strong);transition:all var(--t3) var(--ease)}
.gs::before{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;background:var(--line-strong)}
.gs:first-child::before{display:none}
.gs::after{content:"";position:absolute;top:17px;left:-50%;width:100%;height:2px;background:var(--accent-text);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.gs:first-child::after{display:none}
.gs.done::after{transform:scaleX(1)}
.gs.done .dot{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.gs.now .dot{border-color:var(--accent-text);color:var(--accent-text);animation:pulse 1.8s var(--ease) infinite}
.gs.stop .dot{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);animation:shake .4s}
.gs.done,.gs.now,.gs.stop{color:var(--ink)} .gs b{display:block;font-size:.8rem}
.gate-body{padding:1rem 1.1rem 1.2rem;display:grid;gap:.75rem}
.gate-meta{display:flex;align-items:center;gap:.6rem}
.gate-meta .sp{flex:1}
.gate-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.gate-log{min-height:3.2rem;font-size:.9rem;color:var(--ink-2);padding:.65rem .8rem;border-radius:var(--r3);background:var(--surface-2);transition:background var(--t2)}
.gate-log.good{background:var(--ok-soft);color:var(--ok)} .gate-log.bad{background:var(--bad-soft);color:var(--bad)}
.fpbox{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border:1px dashed var(--line-strong);border-radius:var(--r3);font-size:.8rem;transition:all var(--t2)}
.fpbox code{overflow-wrap:anywhere;flex:1;color:var(--ink-2);transition:color var(--t2)}
.fpbox.locked{border-style:solid;border-color:var(--ok);background:var(--ok-soft)} .fpbox.locked code{color:var(--ok)}
.fpbox.broken{border-style:solid;border-color:var(--bad);background:var(--bad-soft)} .fpbox.broken code{color:var(--bad)}
.fpbox .lockicon{color:var(--muted);transition:color var(--t2)} .fpbox.locked .lockicon{color:var(--ok)} .fpbox.broken .lockicon{color:var(--bad)}
@keyframes shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.shake{animation:shake .4s}
.flip{animation:flip .5s var(--ease)}
@keyframes flip{0%{opacity:.2;transform:translateY(6px)}100%{opacity:1;transform:none}}
.struck{animation:struck .7s var(--ease) forwards}
@keyframes struck{0%{opacity:1}40%{opacity:.5;text-decoration:line-through}100%{opacity:.35;text-decoration:line-through;filter:grayscale(1)}}

/* ---------- landing ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;padding:clamp(2rem,6vw,4.5rem) 0 2rem}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 .1em}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);max-width:34rem}
.tiles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.55}
.tile{position:absolute;width:44px;height:44px;border-radius:var(--r3);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;font-weight:800;color:var(--ink-2);animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.heroWrap{position:relative;isolation:isolate}
.hero{position:relative;z-index:1}
.heroWrap::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 70% 30%,#000 0,transparent 70%);opacity:.55}
@media (max-width:900px){.hero{grid-template-columns:1fr}.tile{display:none}}
.section{padding:3.5rem 0}
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:p;position:relative}
.pipe{position:relative;padding:1.2rem;border:1px solid var(--line);border-radius:var(--r4);background:var(--surface)}
.pipe .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r3);background:var(--accent-soft);color:var(--accent-text);margin-bottom:.8rem;font-size:1.3rem}
.pipe h3{margin:0 0 .35rem} .pipe p{margin:0;color:var(--ink-2);font-size:.93rem}
.pipe:not(:last-child)::after{content:"";position:absolute;top:50%;right:-1rem;width:1rem;height:2px;background:var(--line-strong)}
@media (max-width:900px){.pipeline{grid-template-columns:1fr 1fr}.pipe:not(:last-child)::after{display:none}}
@media (max-width:560px){.pipeline{grid-template-columns:1fr}}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1rem}
.proof a.card{display:block;text-decoration:none;color:var(--ink);transition:transform var(--t2) var(--ease),box-shadow var(--t2)}
.proof a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.apis{display:flex;flex-wrap:wrap;gap:.5rem}
details.faq{border:1px solid var(--line);border-radius:var(--r4);background:var(--surface);margin:.6rem 0}
details.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;min-height:52px;padding:0 1rem;font-weight:600}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";margin-left:auto;font-size:1.3rem;color:var(--muted);transition:transform var(--t2)}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq .ans{padding:0 1rem 1rem;color:var(--ink-2)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:1rem;bottom:1rem;z-index:100;display:grid;gap:.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--bg);padding:.65rem .9rem;border-radius:var(--r3);box-shadow:var(--shadow-lg);font-size:.9rem;font-weight:500;animation:toastin .25s var(--ease)}
.toast.out{animation:toastout .2s var(--ease) forwards}
@keyframes toastin{from{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes toastout{to{opacity:0;transform:translateY(6px)}}

/* ---------- timeline (receipt) ---------- */
ol.timeline{list-style:none;margin:1.2rem 0;padding:0 0 0 1.4rem;position:relative}
ol.timeline::before{content:"";position:absolute;left:.52rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line-strong)}
ol.timeline li{position:relative;padding:.5rem 0 .5rem 1.1rem;transition:background var(--t2)}
ol.timeline li::before{content:"";position:absolute;left:-1.25rem;top:.95rem;width:.9rem;height:.9rem;border-radius:50%;background:var(--surface);border:2px solid var(--accent-text);transition:all var(--t3) var(--ease)}
ol.timeline li.bad::before{border-color:var(--bad)}
ol.timeline li.verified::before{background:var(--accent);border-color:var(--accent-text);transform:scale(1.15)}
ol.timeline li.broken::before{background:var(--bad);border-color:var(--bad)}
ol.timeline time{display:block;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
ol.timeline .h{display:inline-block;margin-left:.4rem;font:600 .72rem ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
ol.timeline li.verified .h{color:var(--ok)} ol.timeline li.broken .h{color:var(--bad)}

/* ---------- client review ---------- */
.client{display:grid;place-items:start center;padding:1rem 0 2rem}
.ctrack{display:flex;gap:.5rem;align-items:center;justify-content:center;margin:0 0 1.5rem;padding:0;list-style:none;font-size:.82rem;color:var(--muted)}
.ctrack li{display:flex;align-items:center;gap:.4rem}
.ctrack li+li::before{content:"";width:1.6rem;height:2px;background:var(--line-strong);margin-right:.5rem}
.ctrack .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);font-weight:700;font-size:.72rem}
.ctrack li.now{color:var(--ink);font-weight:700}.ctrack li.now .n{border-color:var(--accent-text);color:var(--accent-text)}
.ctrack li.done{color:var(--ink)}.ctrack li.done .n{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.bigact{display:grid;gap:.6rem;margin:1.2rem 0}
.changes{border:1px solid var(--line);border-radius:var(--r4);background:var(--surface)}
.changes summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;font-weight:600}
.changes summary::-webkit-details-marker{display:none}
.changes .in{padding:0 1rem 1rem}
.lockanim{display:grid;place-items:center;margin:1rem auto;width:88px;height:88px;border-radius:50%;background:var(--ok-soft);color:var(--ok)}
.lockanim svg{width:44px;height:44px}
.lockanim .shackle{transform-origin:16px 11px;animation:shackle .7s .15s var(--ease) both}
@keyframes shackle{0%{transform:translateY(-4px)}60%{transform:translateY(-4px)}100%{transform:none}}
.lockanim{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}
.checkdraw path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .3s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- docs ---------- */
.docs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2.5rem;align-items:start}
.toc{position:sticky;top:5rem;display:grid;gap:.1rem;font-size:.9rem}
.toc a{padding:.35rem .7rem;border-left:2px solid var(--line);color:var(--muted);text-decoration:none;transition:all var(--t1)}
.toc a:hover{color:var(--ink)} .toc a.on{border-left-color:var(--accent-text);color:var(--ink);font-weight:600}
.docs h2{margin-top:2.5rem;font-size:1.5rem}
.codebox{position:relative}
.codebox .copy{position:absolute;top:.5rem;right:.5rem}
pre{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r3);padding:.9rem 1rem;overflow-x:auto;font-size:.84rem;line-height:1.55;margin:.6rem 0}
@media (max-width:900px){.docs{grid-template-columns:1fr}.toc{display:none}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r4);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0} th{color:var(--muted);font-weight:600;font-size:.82rem;white-space:nowrap;background:var(--surface-2)}

/* ---------- landing (kept simple on purpose) ---------- */
.hero2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,7vw,5.5rem) 0 3.5rem}
.hero2 h1{font-size:clamp(2.8rem,7.5vw,4.8rem);line-height:1.02;margin-bottom:1.1rem}
.hero2 h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--accent) 62%);padding:0 .08em}
@media (max-width:900px){.hero2{grid-template-columns:1fr}}
.flow{background:var(--surface);border:1px solid var(--line);border-radius:var(--r5);box-shadow:var(--shadow-lg);padding:1.1rem 1.2rem 1.4rem}
.flow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;font-size:.9rem;color:var(--ink-2)}
.dotsnav{display:flex;gap:.45rem;align-items:center}
.dotsnav button{width:12px;height:12px;border-radius:50%;border:0;background:var(--line-strong);cursor:pointer;padding:0;transition:all var(--t2)}
.dotsnav button[aria-current=true]{width:30px;border-radius:99px;background:var(--accent-text)}
.flow-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:5.4rem}
.flow-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:calc(5.4rem + 26px);height:3px;background:var(--line);border-radius:3px}
.station{position:relative;text-align:center}
.station .sico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto .55rem;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);color:var(--muted);font-size:1.4rem;transition:all .4s var(--ease);position:relative;z-index:1}
.station b{display:block;font-size:.98rem}
.station small{display:block;color:var(--muted);font-size:.78rem;line-height:1.25;padding:0 .2rem;margin-top:.1rem}
.station.now .sico{border-color:var(--accent-text);color:var(--accent-text);animation:pulse 1.6s var(--ease) infinite}
.station.done .sico{background:var(--accent);border-color:var(--accent-text);color:var(--accent-ink)}
.station.stop .sico{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);animation:shake .4s}
.token{--pos:0;position:absolute;top:0;left:calc(12.5% + var(--pos) * 25%);width:80px;transform:translateX(-50%);padding:.6rem .65rem;border-radius:var(--r3);background:var(--surface);border:2px solid var(--line-strong);box-shadow:var(--shadow);transition:left .85s var(--ease),border-color .3s,background .3s,opacity .4s}
.token::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;background:inherit;border:inherit;border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg)}
.token .tl{display:block;height:6px;border-radius:3px;background:var(--line-strong);margin:4px 0}
.token .tl.s{width:62%}
.token .tag{display:none;position:absolute;top:-.8rem;right:-.7rem;background:var(--bad);color:#fff;border-radius:99px;font-size:.66rem;font-weight:700;padding:.05rem .5rem}
.token .pen{display:none;position:absolute;bottom:-.8rem;right:-.6rem;width:26px;height:26px;border-radius:50%;background:var(--amber);color:#fff;place-items:center;font-size:.9rem}
.token.flag .tag{display:block}
.token.edit .pen{display:grid;animation:pop .4s var(--ease)}
.token.ok{border-color:var(--ok);background:var(--ok-soft)}
.token.bad{border-color:var(--bad);background:var(--bad-soft)}
.token.shake{animation:shake .45s}
.token.struck{opacity:.5}
.token.struck .tl{background:var(--bad)}
.flow-cap{margin:1.6rem 0 0;min-height:3.4rem;font-weight:600;font-size:1.05rem;text-align:center;text-wrap:balance}
.flow-cap[data-tone=good]{color:var(--ok)}
.flow-cap[data-tone=bad]{color:var(--bad)}
.band{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r5);padding:clamp(1.5rem,4vw,3rem)}
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
@media (max-width:800px){.whys{grid-template-columns:1fr}}
.why h3{font-size:1.25rem;margin:1rem 0 .4rem}
.why p{margin:0;color:var(--ink-2);font-size:1.02rem}
.wico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:1.5rem;animation:breathe 3.4s ease-in-out infinite}
.why:nth-child(2) .wico{animation-delay:.6s}
.why:nth-child(3) .wico{animation-delay:1.2s}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 0 0 var(--ring)}50%{transform:scale(1.07);box-shadow:0 0 0 14px transparent}}
.try-head{max-width:36rem;margin-bottom:1.6rem}
.section{padding:clamp(2.5rem,6vw,4.5rem) 0}
#gate{max-width:660px;margin-inline:auto}
.proof{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

/* ---------- compatibility aliases and composer ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:1rem 0}
.btn.secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.warn{color:var(--bad)} .ok{color:var(--ok)}
input.copy{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem}
.composer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:2rem;align-items:start}
.cpreview{position:sticky;top:1.5rem}
.cpreview h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:.6rem}
@media (max-width:1100px){.composer{grid-template-columns:1fr}.cpreview{position:static}}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1rem;margin-bottom:1rem}
.gate-top b{white-space:nowrap}

/* ---------- entrance + motion switches ---------- */
.rise{animation:rise .45s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}