/* ------------------------------------------------------------------ tokens */
:root{
  --bg:#0A0A0A;
  --panel:#0F0F0F;
  --panel-2:#1A1A1A;
  --well:#0A0A0A;
  --alt:#00161B;
  --line:#2E2E2E;
  --line-soft:#141414;
  --line-strong:#3D3D3D;
  --fg-hi:#FAF9F5;
  --fg:#E0E0D7;
  --fg-2:#9A9997;
  --fg-3:#5E5E5E;
  --accent:#01C8F1;
  --accent-hover:#00DFF6;
  --accent-ink:#0A0A0A;
  --accent-soft:rgba(1,200,241,.14);
  --accent-glow:rgba(1,200,241,.22);
  --link:#BEF0F5;
  --secondary:#A78BFA;
  --green:#0FDFBA;  --green-soft:rgba(15,223,186,.14);
  --amber:#DEC75F;  --amber-soft:rgba(222,199,95,.13);
  --red:#FF6B78;    --red-soft:rgba(255,107,120,.13);
  --orange:#FFA27D; --orange-soft:rgba(255,162,125,.13);
  --blue:#00D6F6;   --blue-soft:rgba(0,214,246,.13);
  --pink:#FA9BF2;   --pink-soft:rgba(250,155,242,.13);
  /* the one rectangular corner radius — the same 2px the Peractor extension
     uses on every control; circles stay 50% */
  --r:2px;
  /* the fixed marketing nav: the band it occupies, and the clearance that
     floats the scrolled glass pill off the top and side edges rather than
     letting it wedge into the corners. Anything that has to clear the nav
     (the docs sidebar) derives its offset from --nav-h. */
  --nav-h:76px;
  --nav-inset:12px;
  --shadow-card:0 8px 24px rgba(0,0,0,.45);
  --shadow-pop:0 16px 48px rgba(0,0,0,.55);
  --font:"Geist",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --font-size-caption:12px;
  --font-size-ui:14px;
  --font-size-body:16px;
  --font-size-heading:26px;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --grad-brand:linear-gradient(90deg,#18B4F4 0%,#01C8F1 44%,#6FADF8 72%,#A78BFA 100%);
}

/* -------------------------------------------------------------------- base */
@font-face{
  font-family:"Geist";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/geist.woff2) format("woff2");
}
@font-face{
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/geist-mono.woff2) format("woff2");
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{height:100%}
body{
  background:var(--bg);color:var(--fg);
  font:15px/1.55 var(--font);letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100%;
}
::selection{background:rgba(1,200,241,.35);color:var(--fg-hi)}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--r)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
a{color:inherit;text-decoration:none}
a.link{color:var(--link)}
a.link:hover{text-decoration:underline}
h1,h2,h3,h4{color:var(--fg-hi);font-weight:500;letter-spacing:-.02em}
button{font-family:var(--font)}
code{
  font-family:var(--mono);font-size:.85em;
  color:var(--fg);background:var(--panel-2);border:1px solid var(--line-soft);
  padding:1.5px 6px;border-radius:var(--r);white-space:nowrap;
}
:focus-visible{outline:2px solid var(--fg-hi);outline-offset:2px;border-radius:var(--r)}
.muted{color:var(--fg-2)}
.faint{color:var(--fg-3)}
.small{font-size:12.5px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px;align-items:center}
.spacer{flex:1}

/* --------------------------------------------------------- shared controls */
/* Primary actions: Geist sans (not mono), cyan primary w/ dark ink */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 15px;border-radius:var(--r);cursor:pointer;
  font:600 14px/1.2 var(--font);letter-spacing:-.01em;color:var(--fg-hi);
  background:transparent;border:1px solid var(--fg-3);
  transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
  white-space:nowrap;user-select:none;
}
.btn:hover{background:var(--panel-2);border-color:var(--fg-2);color:var(--fg-hi)}
.btn.primary{
  background:var(--accent);border-color:var(--accent-hover);color:var(--accent-ink);
}
.btn.primary:hover{
  background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg-2);font-family:var(--font);font-weight:500;letter-spacing:-.01em}
.btn.ghost:hover{background:rgba(255,255,255,.08);color:var(--fg-hi)}
.btn.danger{color:var(--red);border-color:rgba(255,107,120,.35)}
.btn.danger:hover{background:var(--red-soft);border-color:rgba(255,107,120,.55)}
.btn.wide{width:100%}
.btn.lg{padding:12px 18px;font-size:14px}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:var(--r)}
.btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
.btn svg{flex:none}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:12.5px;font-weight:510;color:var(--fg-2)}
.field .hint{font-size:12px;color:var(--fg-3)}
.input,select.input,textarea.input{
  width:100%;background:var(--well);color:var(--fg-hi);
  border:1px solid var(--line);border-radius:var(--r);
  padding:8px 12px;font:13.5px/1.45 var(--font);letter-spacing:-.01em;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.input::placeholder{color:var(--fg-3)}
.input:focus{outline:none;border-color:rgba(1,200,241,.7);box-shadow:0 0 0 3px rgba(1,200,241,.18)}
select.input{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%239A9997' d='M4.4 6.2 8 9.8l3.6-3.6.9.9L8 11.6 3.5 7.1z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:28px}
textarea.input{resize:vertical;min-height:72px}
.input[disabled],select.input[disabled],textarea.input[disabled]{cursor:default}
/* reusable form atoms — the beta form's optional/validation styling, promoted off
   .access-form so any WebUiHelper.field() carries it wherever it is used */
.field label span{
  font:var(--font-weight-regular) var(--font-size-caption)/1.4 var(--font);
  letter-spacing:0;text-transform:none;color:var(--fg-3);
}
.input[aria-invalid="true"],select.input[aria-invalid="true"],textarea.input[aria-invalid="true"]{
  border-color:rgba(255,107,120,.72);box-shadow:0 0 0 3px var(--red-soft);
}
.field-error{margin:2px 0 0;color:var(--red);font-size:var(--font-size-caption);line-height:1.4}
/* inline muted text link — the "Log in" / "Sign up" footnote style, standalone */
.link-muted{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.link-muted:hover{color:var(--fg-hi)}

.error,.notice{
  border-radius:var(--r);padding:9px 12px;font-size:12.5px;margin-bottom:14px;
}
.error{background:var(--red-soft);color:var(--red);border:1px solid rgba(255,107,120,.3)}
.notice{background:var(--green-soft);color:#5FE8CC;border:1px solid rgba(15,223,186,.3)}

.badge{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:510;
  padding:2px 9px;border-radius:var(--r);background:var(--panel-2);
  border:1px solid var(--line-soft);color:var(--fg-2);white-space:nowrap;
}
.badge.accent{background:var(--accent-soft);color:var(--link);border-color:rgba(1,200,241,.3)}
.badge.admin{background:var(--accent-soft);color:var(--link);border-color:rgba(1,200,241,.3)}
.badge.ok{background:var(--green-soft);color:#5FE8CC;border-color:rgba(15,223,186,.25)}
.badge.wait{background:var(--amber-soft);color:#E8D88A;border-color:rgba(222,199,95,.25)}
.badge.fail{background:var(--red-soft);color:var(--red);border-color:rgba(255,107,120,.25)}
.badge.run{background:var(--blue-soft);color:#7BE8F5;border-color:rgba(0,214,246,.25)}
.badge.dim{color:var(--fg-3)}

.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--fg-3)}
.dot.green{background:var(--green)} .dot.amber{background:var(--amber)}
.dot.red{background:var(--red)}     .dot.blue{background:var(--blue)}
.dot.accent{background:var(--accent)} .dot.orange{background:var(--orange)}
.dot.pink{background:var(--pink)}   .dot.violet{background:var(--secondary)}
.dot.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.avatar{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;color:var(--accent-ink);
  background:var(--grad-brand);
}
.kbd{
  font:11px var(--mono);color:var(--fg-2);background:var(--panel-2);
  border:1px solid var(--line);border-bottom-width:2px;border-radius:var(--r);
  padding:1px 5px;
}

table{width:100%;border-collapse:collapse;font-size:13px}
th{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);
  text-align:left;font-weight:510;padding:6px 10px;border-bottom:1px solid var(--line);
}
td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
tr.click{cursor:pointer}
tr.click:hover td{background:rgba(255,255,255,.02)}

.menu{
  position:absolute;z-index:60;min-width:220px;padding:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-pop);
}
.menu a,.menu button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:7px 9px;border-radius:var(--r);font-size:13px;color:var(--fg);
  background:transparent;border:0;cursor:pointer;
}
.menu a:hover,.menu button:hover{background:var(--panel-2);color:var(--fg-hi)}
.menu .sep{height:1px;background:var(--line-soft);margin:5px 4px}
.menu .head{padding:6px 9px 4px;font-size:11px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}

.empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:44px 20px;text-align:center;color:var(--fg-2);
}
.empty .t{color:var(--fg-hi);font-weight:550;font-size:14px}
.empty .d{font-size:13px;max-width:380px}

/* --------------------------------------------------------- marketing chrome */
/*
 * Layout contract: .mk-nav is a fixed overlay (transparent at rest, a
 * liquid-glass bar once scrolled), so it reserves NO document space. Every
 * page therefore starts with exactly one of the openers, each of which
 * carries its own nav clearance: .hero (the homepage composition),
 * .page-head (the standard subpage header), or .page-pad / .docs (document
 * pages). After the opener, content flows in .mk-section blocks
 * (self-spacing). No inline padding hacks.
 */
.mk{min-height:100vh;display:flex;flex-direction:column}
.mk-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);pointer-events:none;
}
.mk-nav-inner{
  position:relative;z-index:1;pointer-events:auto;
  max-width:1200px;margin:0 auto;width:100%;height:var(--nav-h);
  display:flex;align-items:center;gap:6px;padding:0 40px;
}
/* the pill is inset on all four sides, so it reads as a bar floating over the
   page rather than one wedged into the top corners; the border keeps its edge
   legible where the blur lands on a dark section */
.mk-nav-inner::before{
  content:"";position:absolute;inset:var(--nav-inset) 24px;z-index:0;
  border:1px solid rgba(255,255,255,.06);border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    rgba(10,10,10,.32);
  backdrop-filter:blur(26px) saturate(1.55);
  -webkit-backdrop-filter:blur(26px) saturate(1.55);
  box-shadow:0 10px 32px rgba(0,0,0,.28);
  opacity:0;transform:translateY(-10px);
  transition:opacity .28s ease,transform .28s ease;
}
.mk-nav.is-scrolled .mk-nav-inner::before{opacity:1;transform:none}
.mk-nav-inner>*{position:relative;z-index:1}
.mk-brand{display:flex;align-items:center;gap:9px;font-size:var(--font-size-body);font-weight:500;color:var(--fg-hi);letter-spacing:-.02em;margin-right:34px}
.mk-brand svg{color:var(--accent)}
.mk-links{display:flex;gap:2px;align-items:center}
.mk-links a{
  padding:4px 8px;border-radius:var(--r);font-size:var(--font-size-ui);font-weight:500;line-height:1.4;color:var(--fg);
  transition:color .15s ease,background .15s ease;
}
.mk-links a:hover,.mk-links a.on{color:var(--fg-hi)}
.mk-links a:hover{background:rgba(250,249,245,.07)}
.mk-nav .spacer{flex:1}
.mk-cta{display:flex;align-items:center;gap:6px}
.mk-cta .btn{padding:6px 10px;font-size:var(--font-size-ui)}
.mk-cta .btn.ghost{color:var(--fg)}
.mk-main{flex:1}
.mk-wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/*
 * One-at-a-time carousel. Progressive enhancement: the markup ships every slide
 * stacked (which is exactly how the section read before, and what a crawler with
 * no JS still sees), and the script adds .is-live to switch it on. In live mode
 * the slides share a single grid cell, so the frame is always as tall as the
 * tallest slide and swapping one for another never jolts the page.
 */
.mk-carousel{margin-top:44px;--dwell:6s}
.mk-carousel-nav{display:none}
.mk-carousel-slide + .mk-carousel-slide{margin-top:88px}
.mk-carousel.is-live .mk-carousel-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;
  margin-bottom:40px;border-bottom:1px solid var(--line-soft);
}
.mk-carousel-nav button{
  position:relative;padding:9px 13px 13px;
  background:none;border:0;cursor:pointer;
  font:500 13.5px/1.4 var(--font);letter-spacing:-.011em;color:var(--fg-3);
  transition:color .18s ease;
}
.mk-carousel-nav button:hover{color:var(--fg)}
.mk-carousel-nav button.on{color:var(--fg-hi)}
/* the rail doubles as the auto-advance clock: it fills over one dwell, so the
   reader can see how long they have rather than being surprised by the swap */
.mk-carousel-nav button i{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--r);
}
.mk-carousel-nav button.on i{background:var(--line)}
.mk-carousel-nav button.on i::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:0;
  border-radius:var(--r);background:var(--accent);
  animation:mk-dwell var(--dwell,12s) linear forwards;
}
.mk-carousel.is-held .mk-carousel-nav button.on i::after{animation-play-state:paused}
@keyframes mk-dwell{to{width:100%}}
/* the script pins the frame to the active slide and animates between them:
   sizing to the tallest instead would leave the short slides sitting under a
   screenful of dead space, which is worst on a phone where they differ most */
/* every slide shares one grid cell, so the frame is always as tall as the
   TALLEST slide and never changes height. Sizing it to the active slide instead
   looks tighter but re-lays out the whole page under it on every advance, which
   a reader below the section sees as the page twitching every few seconds */
.mk-carousel.is-live .mk-carousel-track{display:grid}
.mk-carousel.is-live .mk-carousel-slide{
  grid-area:1/1;margin-top:0;
  opacity:0;visibility:hidden;transition:opacity .4s ease;
}
.mk-carousel.is-live .mk-carousel-slide.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){
  .mk-carousel-nav button.on i::after{animation:none;width:100%}
  .mk-carousel.is-live .mk-carousel-slide{transition:none}
}

/* shared marketing type atoms */
.eyebrow{
  display:block;margin-bottom:16px;
  font:600 12px/1.2 var(--mono);color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
}
.lead{font-size:17px;color:var(--fg-2);line-height:1.65;margin:0}

/* subpage opener: eyebrow + h1 + lead, with fixed-nav clearance built in */
.page-head{padding:148px 0 8px}
.page-head h1{
  margin:0 0 16px;max-width:720px;
  font-size:clamp(32px,4.4vw,48px);font-weight:500;line-height:1.08;letter-spacing:-.02em;
}
.page-head .lead{max-width:560px}
.page-head.center{text-align:center}
.page-head.center h1{margin-left:auto;margin-right:auto}
.page-head.center .lead{margin-left:auto;margin-right:auto}

.mk-footer{
  border-top:1px solid var(--line-soft);padding:0;margin-top:120px;
  font-size:var(--font-size-ui);color:var(--fg-2);
}
.mk-footer .cols{
  display:grid;grid-template-columns:2fr repeat(3,1fr);gap:40px;padding:40px 0;
}
.mk-footer .col{display:flex;flex-direction:column;gap:9px;min-width:0}
.mk-footer .col>p{font-size:var(--font-size-ui)}
.mk-footer .col .h{
  color:var(--fg-hi);font:600 var(--font-size-caption)/1.2 var(--mono);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:6px;
}
.mk-footer a{color:var(--fg-2);font-weight:400;line-height:1.35}
.mk-footer a:hover{color:var(--fg-hi)}
.mk-footer .base{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:20px 0;border-top:1px solid var(--line-soft);
  color:var(--fg-3);font:var(--font-size-caption)/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;
}
.mk-footer .base-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mk-footer .base-separator{color:var(--fg-3);margin:0 8px}
.mk-footer .mk-socials{display:flex;align-items:center;gap:8px}
.mk-footer .mk-socials a{
  width:28px;height:28px;display:grid;place-items:center;
  color:var(--fg-3);transition:color .15s ease;
}
.mk-footer .mk-socials a:hover{color:var(--fg-hi)}

/* hero — homepage only: tall centered copy over a cyan wash, then the stage */
.hero{
  position:relative;overflow:hidden;text-align:center;
  --hero-orbit-x:0px;--hero-orbit-y:0px;--hero-message-x:0px;--hero-message-y:0px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(1,200,241,.12),transparent 60%),
    linear-gradient(180deg,var(--alt) 0%,var(--bg) 55%);
}
.hero-copy{
  position:relative;z-index:1;
  display:grid;place-items:center;width:100%;max-width:1200px;margin:0 auto;
  min-height:640px;padding:112px 40px 42px;text-align:center;
}
.hero-message{
  position:relative;z-index:2;width:min(100%,720px);
  display:flex;flex-direction:column;align-items:center;gap:24px;
  transform:translate3d(var(--hero-message-x),var(--hero-message-y),0);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero h1{
  margin:0;font-size:clamp(34px,5.5vw,58px);font-weight:500;line-height:1.05;
  letter-spacing:-.02em;max-width:720px;color:var(--fg-hi);
}
.hero h1 .hero-line{display:block}
.hero h1 .hero-focus{
  color:var(--secondary);
}
.hero .lead{max-width:500px}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-proof{
  display:flex;align-items:center;justify-content:center;gap:0;flex-wrap:wrap;
  color:var(--fg-3);font:11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;
}
.hero-proof span{display:flex;align-items:center}
.hero-proof span + span::before{
  content:"";width:3px;height:3px;border-radius:50%;background:var(--fg-3);margin:0 11px;
}
.hero-orbit{
  position:absolute;inset:70px 0 12px;z-index:1;pointer-events:none;
  transform:translate3d(var(--hero-orbit-x),var(--hero-orbit-y),0);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.hero-orbit>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Scope to the orbit's own svg — the signal cards (and their icons) live
   inside .hero-orbit too and must not inherit the dashed route stroke. */
.hero-orbit>svg path{
  fill:none;stroke:rgba(1,200,241,.2);stroke-width:1;stroke-dasharray:5 9;
  vector-effect:non-scaling-stroke;animation:hero-route-flow 14s linear infinite;
  transition:stroke .3s ease;
}
.hero:hover .hero-orbit>svg path{stroke:rgba(1,200,241,.3)}
.hero-orbit>svg circle{
  transform-box:fill-box;transform-origin:center;
  animation:hero-node-pulse 8s ease-in-out infinite;
}
.hero-orbit>svg circle:nth-of-type(1){fill:var(--pink)}
.hero-orbit>svg circle:nth-of-type(2){fill:var(--orange)}
.hero-orbit>svg circle:nth-of-type(3){fill:var(--blue)}
.hero-orbit>svg circle:nth-of-type(4){fill:var(--amber)}
.hero-orbit>svg circle:nth-of-type(5){fill:var(--green)}
.hero-orbit>svg circle:nth-of-type(2){animation-delay:1.6s}
.hero-orbit>svg circle:nth-of-type(3){animation-delay:3.2s}
.hero-orbit>svg circle:nth-of-type(4){animation-delay:4.8s}
.hero-orbit>svg circle:nth-of-type(5){animation-delay:6.4s}
.hero-signal{
  position:absolute;width:178px;padding:11px 12px;text-align:left;
  display:flex;flex-direction:column;gap:4px;
  background:rgba(10,10,10,.7);border:1px solid rgba(250,249,245,.12);
  border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 36px rgba(0,0,0,.28);pointer-events:auto;
  animation:
    hero-signal-reveal .55s var(--reveal-delay) ease both,
    hero-signal-cycle 8s var(--cycle-delay) ease-in-out infinite;
  transition:transform .2s ease,filter .2s ease,background .2s ease,border-color .2s ease;
}
.hero-signal:hover{
  transform:translateY(-3px);filter:brightness(1.15);
  background:rgba(18,18,18,.88);border-color:rgba(var(--signal-rgb),.55);
  animation-play-state:paused;
}
.hero-signal .kicker{
  display:flex;align-items:center;gap:6px;color:var(--fg-2);
  font:600 9px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;
}
.hero-signal .kicker svg{flex:none}
.hero-signal .kicker b{margin-left:auto;color:var(--fg-3);font-weight:500}
.hero-signal strong{font-size:13px;line-height:1.25;color:var(--fg-hi);font-weight:550}
.hero-signal>span:last-child{
  display:flex;align-items:center;gap:5px;color:var(--fg-2);
  font-size:11px;line-height:1.35;white-space:nowrap;
}
.hero-signal em{
  margin-left:auto;color:var(--fg-3);font:9px/1.2 var(--mono);font-style:normal;
}
.hero-signal.task{
  --signal-rgb:250,155,242;--reveal-delay:.16s;--cycle-delay:0s;
  left:12px;top:110px;border-left-color:var(--pink);
}
.hero-signal.prototyping{
  --signal-rgb:255,162,125;--reveal-delay:.26s;--cycle-delay:1.6s;
  left:50%;top:-5px;margin-left:-89px;border-left-color:var(--orange);
}
.hero-signal.coding{
  --signal-rgb:0,214,246;--reveal-delay:.36s;--cycle-delay:3.2s;
  right:4px;top:90px;border-left-color:var(--blue);
}
.hero-signal.gate{
  --signal-rgb:222,199,95;--reveal-delay:.46s;--cycle-delay:4.8s;
  right:28px;bottom:72px;border-left-color:var(--amber);
}
.hero-signal.shipping{
  --signal-rgb:15,223,186;--reveal-delay:.56s;--cycle-delay:6.4s;
  left:28px;bottom:70px;border-left-color:var(--green);
}
.hero-signal.task .kicker{color:var(--pink)}
.hero-signal.prototyping .kicker{color:var(--orange)}
.hero-signal.coding .kicker{color:var(--blue)}
.hero-signal.gate .kicker{color:var(--amber)}
.hero-signal.shipping .kicker{color:var(--green)}
/* Each kicker icon plays a themed move synced to its card's glow window.
   The shared 1.7 stroke is illegible at 13px, so bolden it here. */
.hero-signal .kicker svg{
  stroke-width:2.4;animation:8s var(--cycle-delay) ease-in-out infinite;
}
.hero-signal.task .kicker svg{animation-name:hero-icon-pop}
.hero-signal.prototyping .kicker svg{animation-name:hero-icon-sketch}
.hero-signal.coding .kicker svg{animation-name:hero-icon-type}
.hero-signal.gate .kicker svg{animation-name:hero-icon-guard}
.hero-signal.shipping .kicker svg{animation-name:hero-icon-launch}
.hero-stage{
  position:relative;width:100%;padding:0 40px;
  background:linear-gradient(180deg,transparent,rgba(0,22,27,.65) 40%,var(--bg));
}
.hero-stage-inner{max-width:1200px;margin:0 auto;position:relative}
/*
 * Editor mocks — faithful VS Code + Peractor-extension styling, NOT site
 * tokens. Everything inside .ide / .shot must read as a literal screenshot
 * of the extension: VS Code dark canvas (#1e1e1e / #252526), the editor UI
 * font (system stack, not Geist), SF Mono/Menlo for code, 2px radii,
 * the extension's teal accent, and VS Code's green/red/amber status colors.
 * Only the outer frame (rounded corners + drop shadow) is site presentation,
 * exactly like a screenshot embedded in a page.
 */
.ide,.shot{
  --vs-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Ubuntu,sans-serif;
  --vs-mono:"SF Mono",Monaco,Menlo,Consolas,"Liberation Mono",monospace;
  --vs-bg:#1e1e1e;--vs-side:#252526;--vs-tabs:#2d2d2d;
  --vs-line:#2b2b2b;--vs-line-2:#3c3c3c;--vs-input:#313131;
  --vs-fg:#cccccc;--vs-fg-2:#9d9d9d;--vs-fg-3:#858585;--vs-hi:#ffffff;
  --vs-accent:#29b8d4;--vs-accent-ink:#03252b;--vs-btn:#0e7386;
  --vs-green:#4ec9b0;--vs-red:#f48771;--vs-amber:#cca700;--vs-blue:#9cdcfe;
  font-family:var(--vs-font);font-size:12px;line-height:1.45;letter-spacing:0;
  color:var(--vs-fg);background:var(--vs-bg);text-align:left;
}
.ide .dot.green,.shot .dot.green{background:var(--vs-green)}
.ide .dot.red,.shot .dot.red{background:var(--vs-red)}
.ide .dot.amber,.shot .dot.amber{background:var(--vs-amber)}
.ide .dot.blue,.shot .dot.blue{background:#3794ff}

/* the hero editor window */
.ide{
  max-width:1200px;margin:0 auto;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  border:1px solid #3c3c3c;border-bottom:0;
  box-shadow:0 32px 100px rgba(0,0,0,.6);
  display:grid;grid-template-columns:248px minmax(0,1fr);min-height:480px;
}
/* a cropped screenshot panel (section showcases) */
.shot{
  border:1px solid #3c3c3c;border-radius:var(--r);overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
}
.shot.mini{border-radius:var(--r);box-shadow:0 10px 28px rgba(0,0,0,.35)}
/* terminal crop (self-host / platform vignettes) */
.term{padding:12px 15px;font:11px/1.75 var(--vs-mono);color:#c8c8c8;white-space:pre-wrap;overflow:hidden}
.term .ok{color:var(--vs-green)}
.term .dim{color:#8a8a8a}
.shot-title{
  display:flex;align-items:center;gap:8px;padding:12px 14px;
  color:var(--vs-hi);font-size:13px;font-weight:600;
  border-bottom:1px solid var(--vs-line);background:var(--vs-side);
}
.shot-body{padding:13px 14px;display:flex;flex-direction:column;gap:9px}

.ide-rail{
  background:var(--vs-side);border-right:1px solid var(--vs-line);padding:10px 8px 14px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
}
.ide-rail .brand-row{
  display:flex;align-items:center;gap:7px;padding:2px 6px 6px;
  font-size:11px;font-weight:700;letter-spacing:.06em;color:#bbbbbb;text-transform:uppercase;
}
.ide-rail .brand-row svg{color:var(--vs-accent)}
.ide-sec{display:flex;flex-direction:column;gap:1px}
.ide-sec .h{
  font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#a5a5a5;padding:4px 6px 5px;
}
.ide-item{
  display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:var(--r);
  color:var(--vs-fg);min-width:0;font-size:12px;
}
.ide-item.on{background:#37373d;color:var(--vs-hi)}
.ide-item.child{padding-left:23px}
.ide-item .dot{width:7px;height:7px}
.ide-item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ide-item .meta{flex:none;font-size:10px;color:var(--vs-fg-3)}
.ide-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--vs-fg-3);font-size:11px}
.ide-main{display:flex;flex-direction:column;min-width:0;background:var(--vs-bg)}
.ide-tabs{
  display:flex;align-items:stretch;background:var(--vs-side);border-bottom:1px solid var(--vs-line);
  font-size:12px;color:#969696;
}
.ide-tabs .tab{
  padding:8px 14px;border-right:1px solid var(--vs-line);background:var(--vs-tabs);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ide-tabs .tab.on{background:var(--vs-bg);color:var(--vs-hi);box-shadow:inset 0 1px 0 var(--vs-accent)}
.ide-body{padding:13px 15px 16px;display:flex;flex-direction:column;gap:9px;flex:1}

/* run header — phase chip · state · breadcrumb · actions (screenshot 1) */
.pr-runbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--vs-line);color:var(--vs-fg-2);font-size:11.5px;
}
.pr-phase{
  display:inline-flex;align-items:center;padding:1px 8px;border-radius:var(--r);
  background:var(--vs-accent);color:var(--vs-accent-ink);font-weight:600;font-size:11px;
}
.pr-state{
  display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--r);
  background:rgba(78,201,176,.16);color:var(--vs-green);font-weight:600;font-size:10.5px;
}
.pr-state.fail{background:rgba(244,135,113,.14);color:var(--vs-red)}
/* the one state that is still moving gets a pulse — a mock of a run in flight
   that holds perfectly still reads as a screenshot of a finished one */
.pr-state.running{
  background:rgba(55,148,255,.15);color:#75b7ff;
  animation:pr-breathe 2.4s ease-in-out infinite;
}
@keyframes pr-breathe{0%,100%{opacity:1}50%{opacity:.62}}
.pr-state.waiting{background:rgba(204,167,0,.14);color:#e2c454}
.pr-state.idle{background:rgba(255,255,255,.06);color:var(--vs-fg-3)}
/* one run in a list — the runs panel vignette */
.pr-runrow{
  display:flex;align-items:center;gap:9px;min-width:0;padding:8px 10px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);background:var(--vs-side);
  color:var(--vs-fg-2);font-size:11.5px;
}
.pr-runrow b{flex:none;color:var(--vs-hi);font-weight:550}
.pr-runrow .pr-runrow-meta{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-runrow .pr-state{flex:none}
.pr-runrow.done{opacity:.6}
.pr-crumb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-crumb b{color:var(--vs-blue);font-weight:400;font-family:var(--vs-mono);font-size:10.5px}
.pr-btn{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r);
  border:1px solid var(--vs-line-2);background:var(--vs-input);color:var(--vs-fg);
  font-family:var(--vs-font);font-size:11px;white-space:nowrap;
}
.pr-btn.primary{background:var(--vs-btn);border-color:var(--vs-btn);color:#fff;font-weight:500}
.pr-stats{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  padding:6px 14px;border-bottom:1px solid var(--vs-line);color:var(--vs-fg-2);font-size:11px;
}
.pr-stats b{color:#d4d4d4;font-weight:500;font-variant-numeric:tabular-nums}
.pr-phase-rail{
  display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--vs-line);
  background:#202020;color:var(--vs-fg-3);font-size:10.5px;
}
.pr-rail-node{
  display:inline-flex;align-items:center;justify-content:center;padding:3px 8px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);white-space:nowrap;
}
.pr-rail-node.done{border-color:rgba(78,201,176,.4);color:var(--vs-green)}
.pr-rail-node.on{border-color:var(--vs-accent);background:rgba(41,184,212,.1);color:var(--vs-hi)}
.pr-rail-line{height:1px;min-width:24px;flex:1;background:var(--vs-line-2)}
.pr-rail-line.done{background:rgba(78,201,176,.5)}

/* transcript pieces (screenshot 1: code block, tool lines, summary, commit) */
.pr-codeadd{
  background:#17351f;border:1px solid #24512f;border-radius:var(--r);
  padding:8px 11px;font:10.5px/1.65 var(--vs-mono);color:#a6d7b0;white-space:pre;overflow:hidden;
}
.pr-ok{color:var(--vs-green);font:11px var(--vs-mono)}
.pr-ok b{color:#d4d4d4;font-weight:400}
.pr-cmd{color:var(--vs-fg-2);font-size:11.5px}
.pr-cmd b{color:var(--vs-fg);font-weight:400}
.pr-prose{color:#b8b8b8;font-size:12px;line-height:1.6}
/* the trailing caret that marks the vignette as still being written */
.pr-caret{
  display:inline-block;width:6px;height:12px;margin-left:3px;vertical-align:-2px;
  background:var(--vs-accent);animation:pr-blink 1.1s steps(1) infinite;
}
@keyframes pr-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
.pr-prose .path{
  font:10px var(--vs-mono);color:#66d2e4;background:rgba(41,184,212,.1);
  padding:1px 5px;border-radius:var(--r);white-space:nowrap;
}
.pr-sumhead{color:var(--vs-hi);font-weight:600;font-size:12.5px;margin-top:2px}
.pr-preview{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r);
  background:rgba(41,184,212,.1);border:1px solid rgba(41,184,212,.35);
  color:#d4d4d4;font-size:12px;
}
.pr-commit{
  display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:var(--r);
  background:var(--vs-side);border:1px solid var(--vs-line-2);color:var(--vs-fg-2);
  font:10.5px var(--vs-mono);width:fit-content;max-width:100%;overflow:hidden;
}
.pr-commit b{color:var(--vs-blue);font-weight:400}
.pr-event{
  display:flex;align-items:center;gap:7px;color:var(--vs-fg-2);font-size:11.5px;
  padding:5px 8px;border-left:2px solid var(--vs-line-2);background:rgba(255,255,255,.015);
}
.pr-event svg{color:var(--vs-fg-3);flex:none}
.pr-event b{color:var(--vs-fg);font-weight:400;font-family:var(--vs-mono);font-size:10.5px}
.pr-check-result{
  display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:7px;
  padding:7px 9px;border:1px solid var(--vs-line-2);border-radius:var(--r);
  color:var(--vs-fg-2);font-size:11px;
}
.pr-check-result span{font-weight:700}
.pr-check-result b{color:var(--vs-fg);font-weight:500}
.pr-check-result em{font-style:normal;text-align:right}
.pr-check-result.fail{border-color:rgba(244,135,113,.3);background:rgba(244,135,113,.06)}
.pr-check-result.fail span{color:var(--vs-red)}
.pr-check-result.pass{border-color:rgba(78,201,176,.3);background:rgba(78,201,176,.06)}
.pr-check-result.pass span{color:var(--vs-green)}
.pr-summary{
  display:flex;flex-direction:column;gap:6px;padding:11px 12px;
  background:var(--vs-side);border:1px solid var(--vs-line-2);border-radius:var(--r);
}
.pr-summary strong{color:var(--vs-hi);font-size:13px;font-weight:550}
.pr-summary p{color:var(--vs-fg-2);font-size:11.5px;line-height:1.55;margin:0}
.pr-review-row{
  display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;
  padding:6px 2px;color:var(--vs-fg);font-size:11.5px;border-bottom:1px solid var(--vs-line);
}
.pr-review-row .ok{color:var(--vs-green)}
.pr-review-row b{font-weight:400;color:var(--vs-fg-2)}
.pr-files{display:flex;flex-direction:column;gap:5px;padding:4px 0}
.pr-files span{font:10.5px/1.4 var(--vs-mono);color:var(--vs-blue)}
.pr-gate-actions{display:flex;justify-content:flex-end;gap:7px;padding-top:5px}
/* the in-editor review: a read-only diff of the run's branch with the
   reviewer's comment sitting on the line it belongs to, the way the editor
   threads it — this is what turns "no" into instructions the agent can act on */
.pr-diff{
  border:1px solid var(--vs-line-2);border-radius:var(--r);overflow:hidden;
  font:10.5px/1.75 var(--vs-mono);
}
.pr-diff .f{
  padding:6px 11px;background:var(--vs-side);color:var(--vs-fg-2);
  border-bottom:1px solid var(--vs-line-2);
}
.pr-diff .l{
  display:grid;grid-template-columns:22px 1fr;gap:10px;
  padding:0 11px;color:var(--vs-fg-2);white-space:pre;
}
.pr-diff .l i{color:var(--vs-fg-3);font-style:normal;text-align:right}
.pr-diff .l.add{background:#17351f;color:#a6d7b0}
.pr-note{
  display:grid;grid-template-columns:19px 1fr;gap:9px;align-items:start;
  margin:7px 11px;padding:9px 11px;
  background:var(--vs-input);border:1px solid var(--vs-line-2);border-radius:var(--r);
  font:11.5px/1.55 var(--vs-font);color:var(--vs-fg);white-space:normal;
}
.pr-note .who{
  width:19px;height:19px;border-radius:50%;background:var(--vs-btn);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:600;
}
.pr-note b{display:block;margin-bottom:2px;color:var(--vs-hi);font-size:11px;font-weight:550}
/* a served preview: the built result behind a real URL, and the two answers
   that resolve it. The inner "site" is deliberately generic — it stands for
   whatever the phase built, not for Peractor */
.pr-urlbar{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);background:var(--vs-input);
  font:10.5px var(--vs-mono);color:var(--vs-fg-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pr-urlbar i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--vs-green)}
.pr-site{border:1px solid var(--vs-line-2);border-radius:var(--r);overflow:hidden;background:#101317}
.pr-site .bar{
  display:flex;align-items:center;gap:7px;padding:7px 11px;
  border-bottom:1px solid var(--vs-line-2);font-size:10.5px;color:var(--vs-fg-2);
}
.pr-site .bar b{color:var(--vs-hi);font-weight:600}
.pr-site .body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.pr-site .plan{
  display:flex;flex-direction:column;gap:5px;padding:10px;min-width:0;
  border:1px solid var(--vs-line-2);border-radius:var(--r);background:var(--vs-side);
}
.pr-site .plan.on{border-color:var(--vs-accent);background:rgba(41,184,212,.07)}
.pr-site .plan .n{
  display:flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--vs-fg-3);
}
.pr-site .plan .n em{
  font-style:normal;padding:0 4px;border-radius:var(--r);
  background:var(--vs-accent);color:var(--vs-accent-ink);font-size:7.5px;font-weight:700;
}
.pr-site .plan b{color:var(--vs-hi);font-size:15px;font-weight:600;line-height:1.2}
.pr-site .plan i{font-style:normal;font-size:9.5px;line-height:1.5;color:var(--vs-fg-2)}
.pr-site .plan .cta{
  margin-top:3px;padding:4px 0;text-align:center;border-radius:var(--r);
  border:1px solid var(--vs-line-2);font-size:9.5px;color:var(--vs-fg-2);
}
.pr-site .plan.on .cta{background:var(--vs-btn);border-color:var(--vs-btn);color:#fff}
/* a parked question: the options the agent offers, one of them picked */
.pr-choice{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);background:var(--vs-side);
  color:var(--vs-fg);font-size:11.5px;
}
.pr-choice .r{
  flex:none;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--vs-fg-3);
}
.pr-choice.on{border-color:var(--vs-accent);background:rgba(41,184,212,.07)}
.pr-choice.on .r{border-color:var(--vs-accent);background:var(--vs-accent);box-shadow:inset 0 0 0 2px var(--vs-bg)}
/* the board a phase watches: user-named columns, the run's card sitting in one */
.pr-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.pr-board .col{display:flex;flex-direction:column;gap:5px;min-width:0}
.pr-board .h{
  display:flex;align-items:center;gap:5px;padding-bottom:5px;
  border-bottom:1px solid var(--vs-line-2);
  font-size:9.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--vs-fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pr-board .h i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--vs-fg-3)}
.pr-board .card{
  padding:6px 7px;border:1px solid var(--vs-line-2);border-radius:var(--r);
  background:var(--vs-side);color:var(--vs-fg-2);font-size:10.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pr-board .card.on{border-color:var(--vs-accent);color:var(--vs-fg);background:rgba(41,184,212,.07)}
.pr-board .runs{padding:2px 1px;color:var(--vs-accent);font-size:9.5px}

/* editor forms — workflow / persona / connector screens (screenshots 2–4) */
.pr-label{
  font-family:var(--vs-font);font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--vs-fg-2);
}
.pr-textarea{
  background:var(--vs-input);border:1px solid var(--vs-line-2);border-radius:var(--r);
  padding:7px 10px;color:#d9d9d9;font-size:11.5px;line-height:1.55;
}
/* the persona library: each row is the identity, the panel under it is the
   system prompt that identity actually carries */
.pr-personas{display:flex;flex-direction:column;gap:3px}
.pr-persona{
  display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:9px;
  padding:7px 9px;border:1px solid transparent;border-radius:var(--r);
  font-size:12px;color:var(--vs-fg);
}
.pr-persona .ic{display:flex}
.pr-persona b{font-weight:500}
.pr-persona .d{
  color:var(--vs-fg-3);font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pr-persona.on{background:var(--vs-side);border-color:var(--vs-line-2)}
.pr-persona.on b{color:var(--vs-hi)}
.pr-hint{font-size:10.5px;color:#7d7d7d;line-height:1.5}
.pr-hint.em{font-style:italic}
/* the phase strip: equal-width boxes joined by arrows, with a shield over the
   arrow leaving a phase that ends at a gate — exactly how the editor draws it */
.pr-phases{display:flex;align-items:stretch;gap:5px}
.pr-phasechip{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:11px 4px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);background:var(--vs-side);
  color:var(--vs-fg);font-size:11.5px;text-align:center;
}
.pr-phasechip .n{
  width:19px;height:19px;border-radius:50%;background:#3a3a3a;color:var(--vs-fg);
  display:flex;align-items:center;justify-content:center;font-size:10px;
}
.pr-phasechip.on{border-color:var(--vs-accent)}
.pr-phasechip.on .n{background:var(--vs-accent);color:var(--vs-accent-ink);font-weight:700}
/* a phase that ends at a gate is outlined amber, matching its shield */
.pr-phasechip.gate{border-color:var(--vs-amber)}
.pr-phasearrow{
  flex:none;width:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;color:var(--vs-fg-3);
}
.pr-phasearrow.gate{color:var(--vs-amber)}
.pr-phasearrow svg{flex:none}
.pr-phaseadd{
  flex:none;align-self:center;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--vs-line-2);border-radius:var(--r);
  color:var(--vs-fg-3);font-size:15px;
}
/* a form field / a select, matching the editor's inputs */
.pr-field{
  flex:1;min-width:0;padding:6px 10px;border:1px solid var(--vs-line-2);
  border-radius:var(--r);background:var(--vs-input);color:#d9d9d9;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pr-field.name{flex:none;width:92px}
.pr-field.num{flex:none;width:50px}
.pr-checkform{display:flex;gap:7px}
.pr-namerow{display:flex;align-items:center;gap:10px}
.pr-namerow .ops{display:inline-flex;align-items:center;gap:7px;color:#5f5f5f;font-size:11px}
.pr-select{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 9px 5px 10px;border:1px solid var(--vs-line-2);border-radius:var(--r);
  background:var(--vs-input);color:#e0e0e0;font-size:11.5px;white-space:nowrap;
}
/* one drawn chevron for every control that opens something */
.pr-btn .pr-chev{margin-left:4px}
.pr-select i,.pr-chev{
  flex:none;width:7px;height:7px;transform:translateY(-2px) rotate(45deg);
  border-right:1.3px solid var(--vs-fg-2);border-bottom:1.3px solid var(--vs-fg-2);
}
.pr-checkline{display:flex;align-items:center;gap:9px;color:var(--vs-fg);font-size:11.5px}
.pr-checkline .box{
  flex:none;position:relative;width:13px;height:13px;border-radius:2px;
  border:1px solid var(--vs-line-2);background:var(--vs-bg);
}
.pr-checkline .box.on{background:#1f6feb;border-color:#1f6feb}
.pr-checkline .box.on::after{
  content:"";position:absolute;left:4px;top:1px;width:3px;height:7px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);
}
.pr-step{
  background:var(--vs-side);border:1px solid #343434;border-radius:var(--r);
  padding:9px 11px;display:flex;flex-direction:column;gap:8px;
}
.pr-step .head{
  display:flex;align-items:center;gap:7px;color:var(--vs-fg-2);
  font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
}
.pr-step .head .ops{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  letter-spacing:0;color:#5f5f5f;font-size:10px;
}
.pr-step .head .ops svg{flex:none}
.pr-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--vs-fg-2)}
.pr-check{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--vs-fg)}
.pr-check .box{
  width:13px;height:13px;border-radius:var(--r);background:var(--vs-btn);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;
}
.pr-conn{
  display:flex;align-items:center;gap:9px;padding:8px 11px;
  background:var(--vs-side);border:1px solid #343434;border-radius:var(--r);
  font-size:12px;color:var(--vs-fg);
}
.pr-conn .tagchip{
  font-size:9px;font-weight:600;letter-spacing:.04em;padding:1px 5px;
  border:1px solid var(--vs-line-2);border-radius:var(--r);color:var(--vs-fg-3);text-transform:uppercase;
}
.pr-conn .ok{color:var(--vs-green);font-size:11px;white-space:nowrap}
.pr-rule{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--vs-fg-2)}

/* homepage narrative — the three pains as warm, color-coded cards */
.mk-problems{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;
}
.mk-problem{
  --c:var(--accent);
  position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;
  padding:30px 28px 32px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
.mk-problem:nth-child(1){--c:var(--red)}
.mk-problem:nth-child(2){--c:var(--orange)}
.mk-problem:nth-child(3){--c:var(--amber)}
/* a color bar that lives on the top edge and sweeps across on hover */
.mk-problem::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:40px;z-index:2;
  background:var(--c);box-shadow:0 0 12px var(--c);
  opacity:.55;transition:width .4s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
/* a soft color bloom in the corner, revealed on hover */
.mk-problem::after{
  content:"";position:absolute;top:-70px;right:-70px;width:200px;height:200px;
  border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 24%,transparent),transparent 70%);
}
.mk-problem:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.mk-problem:hover::before{width:100%;opacity:1}
.mk-problem:hover::after{opacity:1}
/* one compact mono line: "GAP 1:  NO MEMORY" */
.mk-problem-head{display:flex;align-items:center;gap:9px;font:600 11px/1 var(--mono)}
.mk-problem-head .gap{color:var(--c);letter-spacing:.08em;text-transform:uppercase}
.mk-problem-head .lb{color:var(--fg-2);letter-spacing:.13em;text-transform:uppercase;font-weight:500}
.mk-problem h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--fg-hi)}
.mk-problem p{font-size:14px;color:var(--fg-2);line-height:1.65;margin:0;min-height:3.3em}

/* the payoff — a single before → after transformation band */
.mk-transform{
  position:relative;display:grid;grid-template-columns:340px auto 1fr;align-items:stretch;
  gap:0;margin-top:20px;border:1px solid var(--line);border-radius:var(--r);
  background:
    radial-gradient(150% 160% at 100% 50%,rgba(1,200,241,.035),transparent 55%),
    linear-gradient(180deg,rgba(255,255,255,.012),transparent 50%);
  overflow:hidden;
  transition:border-color .35s ease,box-shadow .35s ease;
}
/* accent bar that sweeps across on hover — matches the problem cards above */
.mk-transform::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:60px;z-index:3;
  background:var(--accent);box-shadow:0 0 12px var(--accent);
  opacity:.5;transition:width .5s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
/* matching corner bloom, like the problem cards */
.mk-transform::after{
  content:"";position:absolute;top:-90px;right:-90px;width:280px;height:280px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(circle,rgba(1,200,241,.16),transparent 70%);
}
.mk-transform:hover{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line));
  box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 42px rgba(1,200,241,.08);
}
.mk-transform:hover::before{width:100%;opacity:1}
.mk-transform:hover::after{opacity:1}
.mk-transform-side{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:44px 40px}
.mk-transform-tag{
  font:600 11px/1.2 var(--mono);color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase;
}
.mk-transform-tag.on{color:var(--accent)}
.mk-transform-scatter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;max-width:290px}
.mk-transform-scatter span{
  padding:8px 12px;border:1px dashed var(--line-strong);border-radius:var(--r);
  color:var(--fg-3);font:12px/1.2 var(--mono);background:rgba(255,255,255,.012);
}
.mk-transform-scatter span:nth-child(1){transform:rotate(-2deg)}
.mk-transform-scatter span:nth-child(2){transform:rotate(1.5deg) translateY(3px)}
.mk-transform-scatter span:nth-child(3){transform:rotate(2deg) translateY(-2px)}
.mk-transform-scatter span:nth-child(4){transform:rotate(-1.4deg)}
.mk-transform-note{font-size:13px;color:var(--fg-3);line-height:1.5;margin:0}
.mk-transform-note.on{color:var(--fg-2)}
.mk-transform-flow{
  display:flex;align-items:center;justify-content:center;position:relative;
  width:72px;color:var(--accent);
}
.mk-transform-line{
  position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(1,200,241,.12),rgba(1,200,241,.55));
}
.mk-transform-node{
  position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--bg);border:1px solid rgba(1,200,241,.35);
  box-shadow:0 0 18px rgba(1,200,241,.18);
}
.mk-transform-side.after{
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 55%);
  border-left:1px solid var(--line);
  position:relative;
}
.mk-transform-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mk-transform-pipe{position:absolute;left:40px;right:40px;top:50%;display:flex;transform:translateY(-7px)}
/* main flowing line: dot1 → dot5, colors land exactly on each dot */
.mk-transform-pipe::before{
  content:"";position:absolute;left:10%;right:10%;top:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,
    var(--pink) 0%,
    var(--blue) 25%,
    var(--orange) 50%,
    var(--amber) 75%,
    var(--green) 100%);
  filter:saturate(1.05);
  box-shadow:0 0 12px rgba(0,214,246,.18);
}
/* lead-in from the arrow node (blue) into the first dot (pink);
   starts at the node line's own opacity (.55) so the seam is invisible */
.mk-transform-pipe::after{
  content:"";position:absolute;left:-42px;right:90%;top:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,
    rgba(1,200,241,.55) 0%,
    var(--accent) 22%,
    var(--pink) 100%);
}
.mk-pipe-step{
  flex:1;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:15px;
  font:11px/1 var(--mono);color:var(--fg-2);letter-spacing:.02em;text-align:center;
}
.mk-pipe-step i{
  width:14px;height:14px;border-radius:50%;z-index:1;background:var(--accent);
  outline:2px solid var(--bg);outline-offset:0;
}
/* nth-child is offset by 1: child 1 is the comet, steps are children 2–6 */
.mk-pipe-step:nth-child(2) i{background:var(--pink);box-shadow:0 0 10px rgba(250,155,242,.45)}
.mk-pipe-step:nth-child(3) i{background:var(--blue);box-shadow:0 0 10px rgba(0,214,246,.45)}
.mk-pipe-step:nth-child(4) i{background:var(--orange);box-shadow:0 0 10px rgba(255,162,125,.45)}
.mk-pipe-step:nth-child(5) i{background:var(--amber);box-shadow:0 0 10px rgba(222,199,95,.45)}
.mk-pipe-step.done{color:var(--green);font-weight:600}
.mk-pipe-step.done i{background:var(--green);box-shadow:0 0 16px rgba(15,223,186,.65)}

/* -------------------------------------------------- pipeline animation */
/* a light "comet" rides the gradient line from the arrow to Shipped */
.mk-pipe-comet{
  position:absolute;top:6px;left:0;width:7px;height:7px;margin:-3px 0 0 -3px;
  border-radius:50%;background:#fff;opacity:0;z-index:1;pointer-events:none;
  box-shadow:0 0 8px 2px rgba(255,255,255,.9),0 0 20px 7px rgba(0,214,246,.55);
  animation:mk-comet 4.2s linear infinite;
}
/* linear, with a keyframe pinned to every dot centre (10/30/50/70/90%), so the
   time it passes a dot is exactly that keyframe's offset — the flare delays
   below are derived from it. Easing here would desync the two. */
@keyframes mk-comet{
  0%{left:-42px;opacity:0;transform:scale(.6)}
  5%{opacity:1;transform:scale(1)}
  12%{left:10%}
  33%{left:30%}
  54%{left:50%}
  75%{left:70%}
  96%{left:90%;opacity:1;transform:scale(1)}
  100%{left:90%;opacity:0;transform:scale(.6)}
}
/* each dot flares as the comet arrives, forming a travelling wave.
   The flare peaks 6% (.252s) after it starts, so each delay is the comet's
   arrival offset minus that: 12%→.25s, 33%→1.13s, 54%→2.02s, 75%→2.9s, 96%→3.78s */
.mk-pipe-step i{animation:mk-flare 4.2s ease-out infinite;will-change:transform,filter}
@keyframes mk-flare{
  0%,20%,100%{transform:scale(1);filter:brightness(1) saturate(1)}
  6%{transform:scale(1.35);filter:brightness(1.55) saturate(1.15)}
}
.mk-pipe-step:nth-child(2) i{animation-delay:.25s}
.mk-pipe-step:nth-child(3) i{animation-delay:1.13s}
.mk-pipe-step:nth-child(4) i{animation-delay:2.02s}
.mk-pipe-step:nth-child(5) i{animation-delay:2.9s}
.mk-pipe-step:nth-child(6) i{animation-delay:3.78s}
/* the arrow node breathes a soft glow */
.mk-transform-node{animation:mk-breathe 4.2s ease-in-out infinite}
@keyframes mk-breathe{
  0%,100%{box-shadow:0 0 18px rgba(1,200,241,.18);border-color:rgba(1,200,241,.35)}
  50%{box-shadow:0 0 26px rgba(1,200,241,.4);border-color:rgba(1,200,241,.6)}
}
@media (prefers-reduced-motion:reduce){
  .mk-pipe-comet,.mk-pipe-step i,.mk-transform-node{animation:none}
  .mk-pipe-comet{display:none}
  .pr-state.running,.pr-caret{animation:none}
}
/* one example workflow: its shape and the step palette on the left, the editor
   it was built in on the right. Start-aligned so both columns begin level. */
.mk-workflow{
  display:grid;grid-template-columns:minmax(320px,1fr) minmax(400px,1.25fr);
  gap:48px;align-items:start;
}
.mk-workflow-copy .lead{max-width:520px}
.wf-kicker{
  display:block;margin:40px 0 18px;color:var(--fg-2);
  font:600 10.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;
}
.wf-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.wf-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:30px}
.wf-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-3)}
/* a solid square filled with the very rgba its node's border is drawn in, so
   both composite to the same color over the canvas — the raw hue read far
   brighter than the border, and an outlined swatch read as a checkbox */
.wf-legend i{
  width:10px;height:10px;border-radius:var(--r);flex:none;
  background:rgba(226,196,84,.35);
}
.wf-legend i.end{background:rgba(1,200,241,.35)}
/* the palette, listed rather than demonstrated four times over */
.wf-parts{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-top:22px;border-top:1px solid var(--line-soft);
}
.wf-parts-label{
  width:100%;margin-bottom:2px;color:var(--fg-3);
  font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;
}
.wf-node{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-size:12px;color:var(--fg-2);
}
/* a gate ends a phase — the amber border marks the phase that stops. The
   editor mock draws that as a shield on the arrow, the way the product does;
   out here a border reads better at this size. */
.wf-node.gate{border-color:rgba(226,196,84,.35);color:#e2c454;background:rgba(226,196,84,.06)}
.wf-node.end{border-color:rgba(1,200,241,.35);color:var(--link);background:rgba(1,200,241,.06)}
.wf-arrow{display:inline-flex;color:var(--fg-3)}
.wf-arrow svg{width:12px;height:12px}
/*
 * Where Peractor runs. Three cards, each the same two halves — the control plane
 * that coordinates and the runners that execute — so the eye compares only the
 * thing that actually differs between them: who owns which half.
 */
.mk-where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
.mk-where-opt{
  display:flex;flex-direction:column;gap:16px;padding:24px 22px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
/* Two hues carry the halves: blue is one we run, green is one you run. At rest
   every card sits at the same neutral weight so the three are compared, not
   ranked; the colour arrives on hover, in the hue of the half that makes that
   card worth choosing. The first card has no half of yours to light up, so it
   lifts in plain white. */
.mk-where-opt:hover{
  border-color:rgba(255,255,255,.26);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 18px 60px -28px rgba(255,255,255,.45);
}
.mk-where-opt.hot:hover{
  border-color:rgba(0,214,246,.34);
  background:linear-gradient(180deg,rgba(0,214,246,.06),transparent 70%);
  box-shadow:0 0 0 1px rgba(0,214,246,.08),0 18px 60px -30px rgba(0,214,246,.6);
}
.mk-where-opt.own:hover{
  border-color:rgba(15,223,186,.3);
  background:linear-gradient(180deg,rgba(15,223,186,.05),transparent 70%);
  box-shadow:0 0 0 1px rgba(15,223,186,.07),0 18px 60px -30px rgba(15,223,186,.5);
}
.mk-where-name{font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--fg-hi)}
.mk-where-stack{display:flex;flex-direction:column}
.mk-where-node{
  display:flex;align-items:center;gap:9px;padding:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--well);
  font-size:13.5px;color:var(--fg-3);
}
.mk-where-node b{flex:1;min-width:0;font-weight:450;color:var(--fg-2)}
.mk-where-node em{
  flex:none;font-style:normal;padding:1px 6px;border-radius:var(--r);
  font:600 9.5px/1.7 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.05);color:var(--fg-3);
}
.mk-where-node.ours{border-color:rgba(0,214,246,.22);background:rgba(0,214,246,.04);color:var(--blue)}
.mk-where-node.ours b{color:var(--fg)}
.mk-where-node.ours em{background:var(--blue-soft);color:#7BE8F5}
.mk-where-node.yours{border-color:rgba(15,223,186,.32);background:rgba(15,223,186,.06);color:var(--green)}
.mk-where-node.yours b{color:var(--fg-hi)}
.mk-where-node.yours em{background:var(--green-soft);color:var(--green)}
.mk-where-wire{align-self:center;width:1px;height:14px;background:var(--line-strong)}
.mk-where-opt p{margin:0;font-size:13.5px;line-height:1.6;color:var(--fg-2)}
.mk-where-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;margin-top:26px;
}
.mk-where-foot p{margin:0;max-width:420px;font-size:13.5px;line-height:1.6;color:var(--fg-3)}
.mk-where-foot .actions{display:flex;gap:10px;flex-wrap:wrap}

/* homepage "how it works" — three setup steps, each closing on a mini visual */
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.mk-step{
  position:relative;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  padding:30px 28px 28px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 60%);
  transition:border-color .3s ease,background .3s ease;
}
.mk-step::before{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;opacity:0;
  background:var(--grad-brand);
  transition:width .45s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.mk-step:hover{border-color:var(--line-strong);background:var(--panel)}
.mk-step:hover::before{width:100%;opacity:1}
.mk-step-n{font:600 12px/1 var(--mono);color:var(--accent);letter-spacing:.1em}
.mk-step h3{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:0}
.mk-step p{font-size:14.5px;color:var(--fg-2);line-height:1.65;margin:0;flex:1}
/* min-height holds the divider at the same y across all three cards, whatever
   the art inside is; align-content then centres a shorter row within it */
.mk-step-art{
  display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:8px;
  min-height:84px;margin-top:6px;padding-top:16px;
  border-top:1px solid var(--line-soft);
}
/* small labelled pill — provider chips, state chips */
.mk-chip{
  display:inline-flex;align-items:center;gap:7px;padding:5px 10px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  font-size:12px;color:var(--fg-2);white-space:nowrap;
}
.mk-chip.more{color:var(--fg-3);border-style:dashed}
/* only the linked chips react to the pointer — the palette ones are labels */
a.mk-chip{transition:border-color .15s ease,color .15s ease}
a.mk-chip:hover{border-color:var(--fg-3);color:var(--fg-hi)}
.mk-chip .dot{width:7px;height:7px}

/*
 * Intake lanes — the homepage's core argument. One row per front door:
 * what someone filed, what Peractor ran, what came back to them. The rows are
 * deliberately uniform so the repetition reads as "many doors, one system".
 */
.mk-lanes{display:flex;flex-direction:column;gap:12px;margin-top:56px}
.mk-lane{
  --c:var(--accent);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr) minmax(0,1fr);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 70%);
  transition:border-color .25s ease,background .25s ease,
    transform .35s cubic-bezier(.2,.7,.3,1);
}
.mk-lane:hover{border-color:var(--line-strong);background:var(--panel);transform:translateY(-2px)}
/* every column centres, so the shorter middle/right ones sit level with the
   source card and with the flow chevrons rather than stranding space below */
.mk-lane>div{
  display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:22px 24px;min-width:0;
}
.mk-lane-src{position:relative;border-right:1px solid var(--line-soft)}
.mk-lane-src::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--c)}
.mk-lane-run{position:relative;border-right:1px solid var(--line-soft)}
/* a chevron sitting on each divider, so a row reads left-to-right as one flow */
.mk-lane-src::after,.mk-lane-run::after{
  content:"";position:absolute;right:0;top:50%;z-index:1;
  width:20px;height:20px;transform:translate(50%,-50%);
  border:1px solid var(--line);border-radius:50%;background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16' fill='none' stroke='%235E5E5E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3l5 5-5 5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
  transition:background-color .25s ease,border-color .25s ease;
}
.mk-lane:hover .mk-lane-src::after,.mk-lane:hover .mk-lane-run::after{
  border-color:var(--line-strong);background-color:var(--panel);
}
.mk-lane-who{
  display:flex;align-items:center;gap:8px;color:var(--c);
  font:600 11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;
}
.mk-lane-who svg{flex:none}
.mk-lane-label{
  color:var(--fg-3);font:600 10px/1 var(--mono);
  text-transform:uppercase;letter-spacing:.1em;
}
.mk-lane-meta{font-size:12px;color:var(--fg-3);line-height:1.45}
.mk-lane-card{
  display:flex;flex-direction:column;gap:7px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
}
.mk-lane-card .hd{font-size:11.5px;color:var(--fg-3)}
.mk-lane-card .msg{font-size:14px;line-height:1.5;color:var(--fg-hi)}
.mk-lane-card.code .msg{font:12px/1.6 var(--mono);color:var(--link);word-break:break-word}
/* the chain must hold five phases on one line — a wrap strands a trailing arrow */
.mk-lane-chain{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.mk-lane .wf-node{min-height:22px;padding:3px 7px;font-size:11px}
.mk-lane .wf-arrow svg{width:9px;height:9px}
.mk-lane-result{
  display:flex;align-items:flex-start;gap:8px;
  color:var(--fg-hi);font-size:14.5px;font-weight:550;line-height:1.4;
}
.mk-lane-result svg{color:var(--green);flex:none;margin-top:2px}
.mk-lane-note{
  display:flex;align-items:flex-start;gap:8px;margin:0;
  font-size:12.5px;line-height:1.6;color:var(--fg-2);
}
.mk-lane-note .provider-ic{flex:none;margin-top:3px}

/*
 * Connector roster — one panel of category rows, matching .mk-vs. A fixed
 * label column on the left keeps the eye anchored; the marks get a full line
 * each so nothing wraps into the ragged blocks a box grid produced.
 */
/* four columns left to right, in the order a run touches them — the same
   movement as the three steps above, and a third the height of a stacked list.
   The note is pushed to the bottom of each column so they line up as a band. */
.mk-roster{
  /* the two-mark columns are floored so their pair always sits on one line —
     by pure fr weighting "Code lands in" landed a pixel short and wrapped */
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.95fr) minmax(228px,.95fr) minmax(0,1.35fr);
  margin-top:28px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);
}
.mk-roster-col{
  display:flex;flex-direction:column;gap:13px;min-width:0;
  padding:22px 22px 20px;border-left:1px solid var(--line-soft);
  transition:background .2s ease;
}
.mk-roster-col:first-child{border-left:0}
.mk-roster-col:hover{background:rgba(255,255,255,.018)}
.mk-roster-col .lbl{
  color:var(--fg-2);font:600 10.5px/1.4 var(--mono);
  text-transform:uppercase;letter-spacing:.08em;
}
.mk-roster-col .v{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.mk-roster-col .note{
  margin-top:auto;padding-top:4px;
  font-size:11.5px;line-height:1.55;color:var(--fg-3);
}
.mk-roster .mk-chip{padding:6px 9px;font-size:12.5px;color:var(--fg)}
.mk-roster .mk-chip svg{flex:none}

/* a secondary heading inside a section that already has an .mk-head */
.mk-subhead{margin-top:80px;max-width:620px}
.mk-subhead h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0 0 10px}
.mk-subhead p{font-size:15px;color:var(--fg-2);line-height:1.65;margin:0}

/*
 * "Why not just X" as a coverage map rather than four paragraphs. Every
 * alternative covers part of the same line the rest of the page has been
 * walking (task → build → checks → decision → shipped), so showing WHICH part
 * makes the argument in one glance and keeps it honest: the gaps are visible,
 * and so is the one row that fills them.
 */
.mk-cover{
  margin-top:48px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 60%);
}
.mk-cover-head,.mk-cover-row{
  display:grid;grid-template-columns:minmax(150px,.95fr) minmax(200px,1fr) minmax(0,1.75fr);
  gap:24px;align-items:center;padding:14px 24px;
}
.mk-cover-head{padding-top:11px;padding-bottom:9px;color:var(--fg-3)}
.mk-cover-head .stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mk-cover-head .stages span{
  font:600 9px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  text-align:center;overflow:hidden;text-overflow:ellipsis;
}
.mk-cover-row{border-top:1px solid var(--line-soft);transition:background .2s ease}
.mk-cover-row:hover{background:rgba(255,255,255,.018)}
.mk-cover-row .k b{
  display:block;margin-bottom:2px;
  font-size:14.5px;font-weight:500;letter-spacing:-.02em;color:var(--fg-hi);
}
.mk-cover-row .k span{font:500 10.5px/1.5 var(--mono);color:var(--fg-3)}
.mk-cover-row .v{font-size:13px;color:var(--fg-2);line-height:1.55}
/* three states, because "it could do that if you built it" is a real answer and
   collapsing it into either covered or not would misrepresent the engines */
.mk-cover-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mk-cover-track i{height:20px;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.mk-cover-track i.on{border-color:var(--accent);background:var(--accent-soft)}
.mk-cover-track i.diy{border-style:dashed;border-color:var(--fg-3);background:transparent}
/* the summary row is marked by its tint and its full track, not by putting our
   own name in the brand color — a comparison reads as honest only while it
   looks like one */
.mk-cover-row.us{background:rgba(1,200,241,.05)}
.mk-cover-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;padding-left:2px}
.mk-cover-legend span{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-3)}
.mk-cover-legend i{
  width:11px;height:11px;flex:none;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);
}
.mk-cover-legend i.on{border-color:var(--accent);background:var(--accent-soft)}
.mk-cover-legend i.diy{border-style:dashed;border-color:var(--fg-3);background:transparent}

/* marketing sections — one heading system for every section on every page */
.mk-section{padding:128px 0 0}
.mk-section h2{
  font-size:clamp(28px,4.2vw,44px);font-weight:500;line-height:1.1;
  letter-spacing:-.02em;max-width:740px;margin:0 0 16px;
}
.mk-head{max-width:760px}
.mk-head .lead{max-width:560px}
.mk-head .lead.lead-wide{max-width:700px}
.mk-head.center{margin:0 auto;text-align:center}
.mk-head.center h2{margin-left:auto;margin-right:auto}
.mk-head.center .lead{margin-left:auto;margin-right:auto}

/* flat card grid (the docs index) */
.mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 24px;margin-top:48px}
.mk-card{border-top:1px solid var(--line);padding:24px 0 0}
.mk-card h3{font-size:18px;font-weight:500;margin-bottom:10px;letter-spacing:-.02em}
.mk-card p{font-size:15px;color:var(--fg-2);line-height:1.6}

/* integration marks: bare glyphs, muted until hover */
.mk-logos{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:28px 40px;margin-top:36px;padding:12px 0 4px;
}
.mk-logo{display:inline-flex;opacity:.72;transition:opacity .2s ease;color:inherit;text-decoration:none}
.mk-logo:hover{opacity:1}
.mk-logo .provider-ic{display:block;width:22px;height:22px}
.mk-logo .name{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* split: copy beside an art panel; .rev mirrors it */
.mk-split{display:grid;grid-template-columns:minmax(280px,5fr) minmax(300px,7fr);gap:72px;align-items:center}
.mk-split.rev{grid-template-columns:minmax(300px,7fr) minmax(280px,5fr)}
/* a section may stack several splits under one .mk-head */
.mk-head + .mk-split{margin-top:56px}
.mk-split + .mk-split{margin-top:88px}
.mk-split-h{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 14px}
.mk-split .txt .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.mk-stack{display:flex;flex-direction:column;gap:16px}
.mk-split .txt .lead{margin-bottom:20px;max-width:480px}
.mk-split .txt ul{margin:0;padding:0}
.mk-split .txt li{font-size:15px;color:var(--fg-2);margin:8px 0;list-style:none;display:flex;gap:10px;align-items:flex-start}
.mk-split .txt li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.mk-split .art{min-width:0}

/*
 * Homepage workflow switcher — underline tabs on a full-width rule, with the
 * panel hanging directly off that rule. A boxed segmented control read as a
 * standalone widget and let its content look like a new top-level section;
 * this reads as one tabbed surface. The first tab is flush left so its
 * underline lines up with the section heading.
 */
/*
 * The tab strip sits in a labelled row: "Examples" leads it and the hint
 * closes it, both on the tabs' own baseline. A note above the strip was too
 * easy to skip, and four confident names then read as workflows Peractor ships
 * rather than starting points a team rewrites.
 */
.mk-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:8px}
.mk-pillar{border-top:1px solid var(--line);padding-top:24px}
.mk-pillar h3{font-size:18px;font-weight:500;margin-bottom:10px;letter-spacing:-.02em}
.mk-pillar p{font-size:15px;color:var(--fg-2);line-height:1.6}

/* use-case cards — copy on top, a screenshot vignette as proof below */
.mk-usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.mk-usecase{
  border:1px solid var(--line);border-radius:var(--r);padding:28px 24px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 55%);
  display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s,background .15s;
}
.mk-usecase:hover{border-color:var(--fg-3);background:var(--panel)}
.mk-usecase .tag{font:600 12px/1.2 var(--mono);color:var(--secondary);letter-spacing:.08em;text-transform:uppercase}
.mk-usecase h3{font-size:22px;font-weight:500;letter-spacing:-.02em;margin:0}
.mk-usecase p{font-size:15px;color:var(--fg-2);line-height:1.6;margin:0;flex:1}
.mk-usecase .vis{margin-top:12px}

/* platform dual cards — each opens with a screenshot crop */
.mk-platform{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px}
.mk-product{
  border:1px solid var(--line);border-radius:var(--r);padding:28px;
  background:var(--panel);display:flex;flex-direction:column;gap:14px;min-height:280px;
  position:relative;overflow:hidden;
}
.mk-product .shot{margin-bottom:8px}
.mk-product::before{
  content:"";position:absolute;inset:auto -20% -40% -20%;height:55%;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(1,200,241,.14),transparent 70%);
}
.mk-product > *{position:relative}
.mk-product .name{font:600 12px/1.2 var(--mono);color:var(--secondary);letter-spacing:.08em;text-transform:uppercase}
.mk-product h3{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:0;line-height:1.15}
.mk-product p{font-size:15px;color:var(--fg-2);line-height:1.6;margin:0;flex:1}
.mk-product .chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.mk-product .chip-static{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r);border:1px solid var(--line);
  font-size:12px;color:var(--fg-2);background:var(--bg);
}
.mk-product .btn{align-self:flex-start;margin-top:auto}

/* hard-numbers band (why-Peractor proof) */
.mk-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;margin-top:48px}
.num-card{border-top:1px solid var(--line);padding-top:24px}
.num-card .n{
  font-size:clamp(38px,3.8vw,54px);font-weight:500;letter-spacing:-.03em;
  color:var(--fg-hi);line-height:1;
}
.num-card .l{
  font:600 12px/1.4 var(--mono);color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;margin:12px 0 10px;
}
.num-card p{font-size:14px;color:var(--fg-2);line-height:1.6;margin:0}


@media (max-width:880px){
  .mk-pillars,.mk-usecases,.mk-platform,.mk-where{grid-template-columns:1fr;gap:24px}
  .mk-numbers{grid-template-columns:1fr 1fr;gap:28px 20px}
  .mk-problems,.mk-steps{grid-template-columns:1fr}
  /* splits stack copy-first, including the mirrored ones */
  .mk-split,.mk-split.rev{grid-template-columns:1fr;gap:32px}
  .mk-split.rev .art{order:2}
  .mk-split + .mk-split{margin-top:56px}
  /* lanes stack into three labelled blocks; the divider moves to the bottom,
     and the flow chevrons no longer point anywhere useful */
  .mk-lane{grid-template-columns:1fr}
  .mk-lane-src,.mk-lane-run{border-right:0;border-bottom:1px solid var(--line-soft)}
  .mk-lane-src::after,.mk-lane-run::after{display:none}
  /* a wrapped chain strands its trailing arrow — at this width order is enough */
  .wf-arrow{display:none}
  .wf-flow,.mk-lane-chain{gap:8px}
  .mk-cover-row{grid-template-columns:1fr;gap:14px;padding:22px 24px}
  /* the stage labels only make sense sitting above the track they label */
  .mk-cover-head{display:none}
  /* the roster band stacks; the divider moves from the side to the top */
  .mk-roster{grid-template-columns:1fr}
  .mk-roster-col{border-left:0;border-top:1px solid var(--line-soft)}
  .mk-roster-col:first-child{border-top:0}
  .mk-roster-col .note{margin-top:0}
  .mk-workflow,.mk-open{grid-template-columns:1fr;gap:28px}
  .mk-transform{grid-template-columns:1fr}
  .mk-transform-side{padding:30px 24px}
  .mk-transform-side.after{border-left:0;border-top:1px solid rgba(1,200,241,.18)}
  /* the flow arrow is redundant when the two sides simply stack — drop it */
  .mk-transform-flow{display:none}
  .mk-transform-pipe{position:relative;left:auto;right:auto;top:auto;transform:none}
  .mk-transform-pipe::after{display:none}
}

/* document pages without a .page-head opener still need fixed-nav clearance */
.page-pad{padding-top:140px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:44px}
.plan{
  --c:var(--accent);
  border:1px solid var(--line);border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease;
}
/* the same lift every other card on the site answers a pointer with */
.plan:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.plan.hot{border-color:rgba(1,200,241,.55);box-shadow:0 0 40px rgba(1,200,241,.12)}
.plan.hot:hover{box-shadow:0 0 44px rgba(1,200,241,.2),0 16px 44px rgba(0,0,0,.45)}
.plan .name{font-size:14.5px;font-weight:600;color:var(--fg-hi);display:flex;align-items:center;gap:8px}
.plan .price{font-size:32px;font-weight:600;letter-spacing:-.03em;color:var(--fg-hi);margin:14px 0 2px}
.plan .price .per{font-size:13px;font-weight:450;color:var(--fg-3);letter-spacing:-.01em}
.plan .for{font-size:12.5px;color:var(--fg-3);margin-bottom:18px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 24px;padding:18px 0 0;border-top:1px solid var(--line-soft)}
.plan li{font-size:13px;color:var(--fg-2);display:flex;gap:9px;align-items:baseline}
.plan li::before{content:"✓";color:var(--green);font-size:11px;flex:none}
.plan .btn{margin-top:auto}
.faq{max-width:720px;margin:48px auto 0}
/* opening a section already carries the section's own top padding — the extra
   48px on top of it left a void between the plans and "Questions" */
.mk-section > .mk-wrap > .faq{margin-top:0}
.faq details{border-bottom:1px solid var(--line-soft);padding:16px 4px}
.faq summary{cursor:pointer;font-size:14.5px;font-weight:530;color:var(--fg-hi);list-style:none;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;color:var(--fg-3);font-size:16px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),color .2s ease;
}
.faq details[open] summary::after{content:"–";transform:rotate(180deg)}
.faq summary:hover::after{color:var(--fg-2)}
.faq details p{margin-top:10px;font-size:13.5px;color:var(--fg-2);line-height:1.65}
/*
 * The answer rises into place, and the marker turns with it.
 *
 * Sizing ::details-content would slide the whole panel open, which is the
 * nicer effect, but it opens by clipping the answer to zero and growing it —
 * so any browser that stalls that transition shows an empty panel. That is a
 * broken page where this is only a missing flourish, so the panel is left to
 * open instantly and only its contents are animated.
 *
 * The keyframe carries no opacity and no fill mode for the same reason: an
 * animation frozen by a backgrounded document sits on its from-state, and a 5px
 * offset is imperceptible where a faded-out paragraph would be unreadable.
 */
.faq details[open] p{animation:faq-reveal .3s cubic-bezier(.2,.7,.3,1)}
@keyframes faq-reveal{from{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .faq details[open] p{animation:none}
  .faq summary::after{transition:none}
  .faq details[open] summary::after{transform:none}
}

/* download — the surface cards (/download) and the homepage's short version */
/* three surfaces across; the source build is its own full-width row below */
.dl-families{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
/* the source build is a fourth row of the same offering, not a new argument —
   it sits at the grid's own gap rather than a full section's worth of air */
.dl-families + .dl-card{margin-top:16px}
.dl-card{
  --c:var(--accent);
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  padding:30px 26px 28px;border:1px solid var(--line);border-radius:var(--r);
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 55%);
  transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
  /* the cards are link targets (/download#download-desktop, and the homepage's
     three) — the nav is fixed, so it would otherwise cover the head */
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
/* the color bar on the top edge, sweeping the full width on hover */
.dl-card::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:44px;z-index:2;
  background:var(--c);box-shadow:0 0 12px var(--c);
  opacity:.6;transition:width .4s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.dl-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.dl-card:hover::before{width:100%;opacity:1}
/*
 * Glyph and kicker are one line, not a bordered tile stacked over a label. The
 * marketing logo strip already settled this for the connector marks — bare
 * glyphs, no tiles — and a boxed icon floating above its own caption reads as
 * two separate things when it is one.
 */
.dl-card-kicker{
  display:flex;align-items:center;gap:9px;margin-bottom:14px;
  color:var(--c);font:600 12px/1.2 var(--mono);
  text-transform:uppercase;letter-spacing:.08em;
}
.dl-card-kicker svg{
  flex:none;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent));
}
.dl-card-head h2{font-size:21px;font-weight:550;letter-spacing:-.02em;margin:0 0 10px}
.dl-card-head .lead{font-size:14px;line-height:1.6}
/* the full-width row: copy beside the body instead of above it */
.dl-card.wide{padding:34px 32px 30px}
.dl-card.wide .dl-card-body{margin-top:0}
.dl-card.wide .dl-card-head{max-width:420px}
@media (min-width:881px){
  /* the split is weighted to the code, not evenly: the longest command line
     wants ~600px and the copy beside it reads fine at 390 */
  .dl-card.wide{
    display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
    gap:16px 44px;align-items:start;
  }
  /* the copy column is the taller of the two and sets the row height, so the
     snippet centres against it rather than hanging from the top edge */
  .dl-card.wide .dl-card-body{align-self:center}
}
.dl-card-body{margin-top:24px}
/* the control sits under the copy, in the head's column on the wide card */
.dl-card-action{margin-top:22px}

/*
 * The rows: mark, what it is, what you can do about it — one line. Positions are
 * placed explicitly rather than through grid-template-areas, because an areas
 * grid declares its second row whether or not anything occupies it, and a row
 * carrying no specifics was left sitting a gap's worth above centre.
 */
.dl-targets{display:flex;flex-direction:column;gap:8px}
.dl-target{
  display:grid;grid-template-columns:18px minmax(0,1fr) auto;
  gap:2px 10px;align-items:center;
  padding:12px 12px;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--panel);transition:border-color .15s ease,background .15s ease;
}
.dl-target:hover{border-color:color-mix(in srgb,var(--c) 30%,var(--line))}
/* the visitor's own platform, marked client-side — see WebDownloadHelper.osScript */
.dl-target.on{
  border-color:color-mix(in srgb,var(--c) 38%,transparent);
  background:color-mix(in srgb,var(--c) 7%,var(--panel));
}
.dl-target.on .dl-target-mark{color:var(--c)}
.dl-target-mark{grid-column:1;grid-row:1;display:inline-flex;color:var(--fg-3)}
.dl-target-name{
  grid-column:2;grid-row:1;min-width:0;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12.5px;font-weight:550;color:var(--fg-hi);letter-spacing:-.005em;
}
/* the longest name on the page ("VS Code Marketplace") sits about 8px inside
   what a 360px column leaves it, so the row control is trimmed to match */
.dl-target .btn.sm{padding:6px 9px}
/* row 2 only exists when a target actually sets a meta — placing it explicitly
   (rather than through a template that declares the row up front) keeps a row
   without one exactly one line tall, and centred */
.dl-target-meta{grid-column:2/-1;grid-row:2;font-size:11.5px;color:var(--fg-3)}
.dl-target-you{
  font:600 9px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.07em;
  color:var(--c);border-radius:var(--r);padding:1px 5px;
  border:1px solid color-mix(in srgb,var(--c) 32%,transparent);
  background:color-mix(in srgb,var(--c) 12%,transparent);
}
.dl-target-action{grid-column:3;grid-row:1;display:inline-flex;justify-content:flex-end}
/* the state chip and the access button both wear the card's hue, so a column
   reads as one thing rather than a tinted head over grey rows */
.dl-target-action .badge{
  color:color-mix(in srgb,var(--c) 72%,var(--fg-2));
  border-color:color-mix(in srgb,var(--c) 24%,transparent);
  background:color-mix(in srgb,var(--c) 8%,transparent);
}
.dl-target .btn:not(.primary){border-color:color-mix(in srgb,var(--c) 40%,var(--fg-3))}
.dl-target .btn:not(.primary):hover{
  border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);
}
.dl-code{
  padding:18px 20px;overflow-x:auto;
  border:1px solid color-mix(in srgb,var(--c) 18%,var(--line-soft));
  border-radius:var(--r);background:var(--well);
  font:12.5px/1.85 var(--mono);color:var(--fg);white-space:pre;
}
/* the bare code rule is built for inline spans — its nowrap would put this
   whole block on one line, and its chip border would box it twice */
.dl-code code{
  background:none;border:0;padding:0;white-space:pre;
  font:inherit;color:inherit;
}
.dl-code .dim{color:color-mix(in srgb,var(--c) 40%,var(--fg-3))}
/* the homepage's three-card summary of the same thing, in the same three hues */
.dl-surfaces{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px}
.dl-surface{
  --c:var(--accent);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:10px;padding:28px;
  border:1px solid var(--line);border-radius:var(--r);
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%,color-mix(in srgb,var(--c) 9%,transparent),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.022),transparent 55%);
  transition:border-color .3s ease,box-shadow .3s ease,transform .35s cubic-bezier(.2,.7,.3,1);
}
.dl-surface::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:44px;z-index:2;
  background:var(--c);box-shadow:0 0 12px var(--c);
  opacity:.6;transition:width .4s cubic-bezier(.2,.7,.3,1),opacity .3s ease;
}
.dl-surface:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--c) 45%,var(--line));
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.dl-surface:hover::before{width:100%;opacity:1}
/* same treatment as the download page's cards — glyph on the label's own line */
.dl-surface-head{
  display:flex;align-items:center;gap:10px;
  font-size:16px;font-weight:550;color:var(--fg-hi);letter-spacing:-.015em;
}
.dl-surface-head svg{
  flex:none;color:var(--c);
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--c) 55%,transparent));
}
.dl-surface > span:not(.dl-surface-go){
  font-size:13.5px;line-height:1.6;color:var(--fg-2);
}
.dl-surface-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:14px;
  font-size:12.5px;font-weight:550;color:var(--c);
}
.dl-surface:hover .dl-surface-go{color:var(--fg-hi)}
/*
 * One hue per surface, carried on --c the way .mk-problem carries its own, so
 * the two card shells above name no color themselves and the download page and
 * the homepage tint from the same four classes. Blue = editor, amber =
 * desktop, pink = mobile, green = the source build (the only one you can have
 * today).
 *
 * Desktop is amber rather than the violet it started on: violet sat between
 * the editor's blue and mobile's pink and read as a shade of both, so the row
 * lost its at-a-glance ordering. Warm-vs-cool separates all three.
 *
 * Declared last on purpose: these are single-class selectors, exactly as
 * specific as the .dl-card / .dl-surface defaults they have to beat, so source
 * order is the whole of what makes them win.
 */
.tone-blue{--c:var(--blue)}
.tone-amber{--c:var(--amber)}
.tone-pink{--c:var(--pink)}
.tone-green{--c:var(--green)}

/* prose (docs, legal, changelog bodies) */
.prose{font-size:15px;line-height:1.65;color:var(--fg);max-width:720px}
.prose h1{font-size:37px;letter-spacing:-.025em;margin:0 0 10px;font-weight:600}
.prose h2{font-size:23px;margin:34px 0 12px;letter-spacing:-.02em;font-weight:600}
.prose h3{font-size:18px;margin:26px 0 10px;font-weight:600}
.prose p{margin:12px 0;color:var(--fg-2)}
.prose p b,.prose li b{color:var(--fg);font-weight:570}
.prose ul,.prose ol{margin:12px 0 12px 22px;color:var(--fg-2)}
.prose li{margin:6px 0}
.prose pre{
  background:var(--well);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:14px 16px;overflow-x:auto;margin:16px 0;
}
.prose pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.65;color:var(--fg);white-space:pre}
.prose a{color:var(--link)}
.prose a:hover{text-decoration:underline}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:28px 0}
.prose table{margin:16px 0;font-size:13.5px}
.prose td{font-variant-numeric:normal;color:var(--fg-2)}
.prose td:first-child{white-space:nowrap}
.prose .note{
  border:1px solid var(--line-soft);border-left:2px solid var(--link);
  border-radius:var(--r);background:var(--panel);padding:12px 16px;margin:16px 0;
  font-size:14px;
}
.prose .note p{margin:6px 0}

/* docs layout */
.docs{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding:140px 0 48px}
.docs-side{
  position:sticky;top:calc(var(--nav-h) + 24px);align-self:start;
  display:flex;flex-direction:column;gap:1px;
  max-height:calc(100vh - var(--nav-h) - 48px);overflow-y:auto;
}
.docs-side .h{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-3);padding:6px 10px}
.docs-side .h + a{margin-top:1px}
.docs-side .h:not(:first-child){margin-top:14px}
.docs-side a{padding:6px 10px;border-radius:var(--r);font-size:13px;color:var(--fg-2)}
.docs-side a:hover{color:var(--fg-hi);background:var(--panel-2)}
.docs-side a.on{color:var(--link);background:var(--alt)}

/* changelog */
.log{max-width:760px;padding:40px 0 0}
.log-entry{display:grid;grid-template-columns:130px minmax(0,1fr);gap:28px;padding:28px 0;border-top:1px solid var(--line-soft)}
.log-entry:first-of-type{border-top:0}
.log-date{font-size:12.5px;color:var(--fg-3);padding-top:3px;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.log-body h3{font-size:18px;margin-bottom:8px;letter-spacing:-.018em;font-weight:600}
.log-body p{font-size:14px;color:var(--fg-2);line-height:1.55;margin:8px 0}
.log-body .tags{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

/* --------------------------------------------------------- beta access page */
.access-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:calc(100vh - 160px);padding:154px 0 112px;
  background:
    radial-gradient(ellipse 60% 62% at 12% 28%,rgba(1,200,241,.11),transparent 68%),
    radial-gradient(ellipse 42% 48% at 88% 22%,rgba(0,214,246,.055),transparent 72%);
}
/* an almost-invisible large-cell cyan grid, lit from behind the headline by a
   radial spotlight rather than a flat edge fade */
.access-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(1,200,241,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,200,241,.06) 1px,transparent 1px);
  background-size:160px 160px;
  -webkit-mask-image:radial-gradient(ellipse 64% 68% at 33% 32%,#000,transparent 68%);
  mask-image:radial-gradient(ellipse 64% 68% at 33% 32%,#000,transparent 68%);
}
.access-layout{
  --access-panel-rest-height:555px;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(480px,1.08fr);
  align-items:start;gap:clamp(48px,7vw,96px);
}
.access-copy-frame{
  min-height:var(--access-panel-rest-height);display:flex;align-items:center;
}
.access-copy{max-width:590px}
.access-copy>.eyebrow{font-size:var(--font-size-caption)}
.access-copy h1{
  margin:18px 0 20px;max-width:580px;
  font-size:clamp(52px,5.5vw,72px);font-weight:var(--font-weight-medium);line-height:1.03;
  letter-spacing:-.04em;text-wrap:balance;
}
.access-copy>.lead{
  max-width:510px;font-size:var(--font-size-body);line-height:1.6;color:var(--fg-2);
}
.access-panel{
  position:relative;isolation:isolate;overflow:hidden;padding:34px 36px 24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(167,139,250,.11),transparent 34%),
    radial-gradient(circle at 0 0,rgba(1,200,241,.07),transparent 30%),
    linear-gradient(145deg,rgba(26,26,26,.92),rgba(15,15,15,.97));
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);
}
.access-panel::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:var(--grad-brand);
}
.access-panel> *{position:relative;z-index:1}
.access-panel-head{margin-bottom:25px}
.access-panel-kicker{margin-bottom:8px}
.access-panel-head h2{
  font-size:var(--font-size-heading);font-weight:var(--font-weight-semibold);
  line-height:1.25;letter-spacing:-.02em;
}
.access-panel-head p{
  margin-top:6px;font-size:var(--font-size-ui);line-height:1.5;color:var(--fg-3);
}
.access-form{display:grid;grid-template-columns:1fr 1fr;gap:15px 14px}
.access-form .field{gap:7px;margin:0}
.access-form .field label{
  display:flex;align-items:center;justify-content:flex-start;gap:4px;
  color:var(--fg);font-size:var(--font-size-ui);font-weight:var(--font-weight-medium);
}
.access-form .field label span{
  font:var(--font-weight-regular) var(--font-size-caption)/1.4 var(--font);
  letter-spacing:0;text-transform:none;color:var(--fg-3);
}
.access-form .input{
  padding:10px 11px;font-size:var(--font-size-ui);background:rgba(10,10,10,.78);
}
.access-form .input[aria-invalid="true"]{
  border-color:rgba(255,107,120,.72);box-shadow:0 0 0 3px var(--red-soft);
}
.access-form .field-error{
  margin:-1px 0 0;color:var(--red);
  font-size:var(--font-size-caption);line-height:1.4;
}
.access-form textarea.input{min-height:92px}
.access-form-wide{grid-column:1/-1}
.access-submit{margin-top:2px}
.access-submit .btn{font-size:var(--font-size-ui)}
.access-consent{
  margin-top:10px;text-align:center;
  font-size:var(--font-size-caption);line-height:1.5;color:var(--fg-3);
}
.access-consent a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.access-consent a:hover{color:var(--fg-hi)}
.access-login{
  margin-top:18px;text-align:center;
  font-size:var(--font-size-caption);line-height:1.5;color:var(--fg-3);
}
.access-login a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.access-login a:hover{color:var(--fg-hi)}
.access-success{padding:34px 8px 22px;text-align:center;animation:rise .45s ease both}
.access-success-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin-bottom:18px;border-radius:50%;
  color:var(--green);background:var(--green-soft);border:1px solid rgba(15,223,186,.28);
  box-shadow:0 0 32px rgba(15,223,186,.12);
}
.access-success h2{
  font-size:var(--font-size-heading);font-weight:var(--font-weight-semibold);line-height:1.25;
}
.access-success p{
  max-width:360px;margin:8px auto 24px;color:var(--fg-2);
  font-size:var(--font-size-ui);line-height:1.5;
}

/* ---------------------------------------------------------------- auth card */
.auth-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;position:relative;
}
.auth-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%,rgba(1,200,241,.14),transparent 70%),
    linear-gradient(180deg,var(--alt) 0%,var(--bg) 55%);
}
.auth{
  position:relative;width:392px;max-width:100%;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:32px 32px 26px;box-shadow:var(--shadow-card);
}
.auth-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-size:18px;font-weight:600;color:var(--fg-hi);margin-bottom:6px}
.auth-brand svg{color:var(--accent)}
.auth-sub{text-align:center;color:var(--fg-2);font-size:13.5px;margin-bottom:22px;line-height:1.55}
.providers{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.divider{
  display:flex;align-items:center;gap:10px;color:var(--fg-3);font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;margin:18px 0;font-family:var(--mono);
}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.auth-foot{margin-top:18px;text-align:center;font-size:12.5px;color:var(--fg-3)}
.auth-foot a{color:var(--fg-2);text-decoration:underline;text-underline-offset:2px}
.auth-foot a:hover{color:var(--fg-hi)}
.auth-below{position:relative;margin-top:18px;text-align:center;font-size:13px;color:var(--fg-3)}
.auth-below a{color:var(--fg-2)}
.auth-below a:hover{color:var(--fg-hi)}

/* ---------------------------------------------------------------- 404 / lost */
/* Not-found: an oversized violet 404 with a soft pulsing glow behind it, over
   the shared auth grid backdrop tinted with a secondary (violet) wash so the
   focal point reads violet rather than the site's usual cyan. */
.nf-wrap.auth-wrap::before{
  background:
    radial-gradient(ellipse 48% 38% at 50% 37%,rgba(167,139,250,.16),transparent 68%),
    radial-gradient(ellipse 60% 46% at 50% 30%,rgba(1,200,241,.06),transparent 72%),
    linear-gradient(180deg,var(--alt) 0%,var(--bg) 52%);
}
.nf{
  position:relative;width:min(100%,540px);text-align:center;
  display:flex;flex-direction:column;align-items:center;
  animation:rise .6s ease both;
}
.nf-glyph{
  position:relative;display:flex;justify-content:center;
  margin:0 0 14px;line-height:1;
}
.nf-glyph::before{
  content:"";position:absolute;z-index:-1;
  top:50%;left:50%;width:min(440px,92%);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.24),transparent 68%);
  animation:nf-halo 4.5s ease-in-out infinite;
}
.nf-glyph .d{
  font:600 clamp(96px,20vw,182px)/1 var(--font);letter-spacing:-.04em;
  background:linear-gradient(100deg,#8B7CF7,#A78BFA 36%,#C4B5FD 62%,#A78BFA 84%,#8B7CF7);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:nf-sheen 9s linear infinite;
}
.nf-lead{max-width:404px;margin:0;font-size:15px;line-height:1.62;color:var(--fg-2)}
.nf-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
@keyframes nf-sheen{to{background-position:220% 0}}
@keyframes nf-halo{
  0%,100%{opacity:.4;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .nf{animation:none}
  .nf-glyph .d,.nf-glyph::before{animation:none}
}

/* ----------------------------------------------------------------- app shell */
body.app{display:flex;height:100vh;overflow:hidden;font-size:13.5px}
.side{
  width:232px;flex:none;display:flex;flex-direction:column;
  padding:12px 10px 10px;gap:12px;background:var(--bg);
}
.side-org{position:relative}
.side-org>button{
  display:flex;align-items:center;gap:9px;width:100%;padding:6px 8px;
  background:transparent;border:0;border-radius:var(--r);cursor:pointer;
  color:var(--fg-hi);font-size:13.5px;font-weight:570;letter-spacing:-.01em;text-align:left;
}
.side-org>button:hover{background:var(--panel-2)}
.side-org .mark{
  width:22px;height:22px;border-radius:var(--r);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-brand);color:var(--accent-ink);
  font-size:11px;font-weight:640;
}
.side-org .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-org .chev{color:var(--fg-3);flex:none}
.side-org .menu{top:calc(100% + 4px);left:0;right:0}
.side-nav{display:flex;flex-direction:column;gap:1px}
.side-nav a{
  display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:var(--r);
  color:var(--fg-2);font-size:13px;font-weight:510;letter-spacing:-.008em;
}
.side-nav a svg{flex:none;opacity:.85}
.side-nav a:hover{background:var(--panel-2);color:var(--fg-hi)}
.side-nav a.on{background:var(--alt);color:var(--link)}
.side-sec{margin-top:14px;padding:0 9px 5px;font-size:11px;font-weight:530;color:var(--fg-3);letter-spacing:.05em;text-transform:uppercase;font-family:var(--mono)}
.side-foot{margin-top:auto;position:relative}
.side-foot>a{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--r);
  color:var(--fg-2);font-size:12.5px;min-width:0;
}
.side-foot>a:hover{background:var(--panel-2);color:var(--fg-hi)}
.side-foot .email{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{
  flex:1;min-width:0;display:flex;flex-direction:column;
  margin:8px 8px 8px 0;background:var(--panel);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
}
.main-head{
  flex:none;display:flex;align-items:center;gap:12px;
  height:46px;padding:0 20px;border-bottom:1px solid var(--line-soft);
}
.main-head h1{font-size:14.5px;font-weight:600;letter-spacing:-.014em}
.main-head .crumb{color:var(--fg-3);font-weight:450}
.main-body{flex:1;overflow-y:auto;padding:22px 24px 48px}
.main-body.narrow>*{max-width:860px}
.main-body.center{display:flex;flex-direction:column}

.panel{background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin-bottom:16px}
.panel h2{font-size:13.5px;font-weight:600;margin-bottom:12px;letter-spacing:-.01em}
.panel .desc{font-size:12.5px;color:var(--fg-2);margin:-6px 0 14px;line-height:1.55}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.stat .k{font-size:11.5px;color:var(--fg-3);font-weight:510;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono)}
.stat .v{font-size:22px;font-weight:600;color:var(--fg-hi);letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.stat .s{font-size:12px;color:var(--fg-2);margin-top:2px}
.meter{height:4px;border-radius:var(--r);background:var(--panel-2);margin-top:10px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:var(--r);background:var(--accent)}
.meter i.warn{background:var(--amber)}
.meter i.over{background:var(--red)}

.steps{display:flex;flex-direction:column}
.step{display:flex;gap:13px;padding:13px 2px;border-bottom:1px solid var(--line-soft);align-items:flex-start}
.step:last-child{border-bottom:0}
.step-n{
  width:24px;height:24px;flex:none;border-radius:50%;background:var(--panel-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--fg-2);
}
.step.done .step-n{background:var(--green-soft);border-color:rgba(15,223,186,.35);color:var(--green)}
.step-b{flex:1}
.step-t{font-size:13.5px;color:var(--fg-hi);font-weight:530}
.step-d{font-size:12.5px;color:var(--fg-2);margin-top:2px;line-height:1.55}
.step .btn{align-self:center}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;
  border-radius:var(--r);border:1px solid var(--line);background:transparent;
  font-size:12px;font-weight:510;color:var(--fg-2);cursor:pointer;
}
.chip:hover{color:var(--fg-hi);border-color:var(--line-strong)}
.chip.on{background:var(--alt);border-color:rgba(1,200,241,.4);color:var(--link)}

/* board */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:20px;min-height:60vh}
.board-col{width:290px;flex:none;display:flex;flex-direction:column;gap:8px}
.board-head{display:flex;align-items:center;gap:8px;padding:4px 6px;font-size:12.5px;font-weight:600;color:var(--fg-hi)}
.board-head .count{color:var(--fg-3);font-weight:450;font-variant-numeric:tabular-nums}
.board-cards{display:flex;flex-direction:column;gap:8px;min-height:8px}
.card{
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:11px 12px;display:flex;flex-direction:column;gap:8px;cursor:default;
  transition:border-color .12s ease;
}
.card:hover{border-color:var(--line-strong)}
.card .t{font-size:13px;color:var(--fg-hi);line-height:1.45;font-weight:510}
.card .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-3)}
.card .meta .badge{font-size:10.5px;padding:1px 7px}
.card .foot{display:flex;align-items:center;gap:8px}

/* run detail */
.run-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:20px;align-items:start}
.rail{position:sticky;top:0;display:flex;flex-direction:column;gap:14px}
.rail .panel{margin-bottom:0}
.phases{display:flex;flex-direction:column;gap:2px}
.phase{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r);font-size:12.5px;color:var(--fg-2)}
.phase.on{background:var(--alt);color:var(--link)}
.phase .st{margin-left:auto;font-size:10.5px;color:var(--fg-3)}
.kv{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.kv .r{display:flex;gap:10px}
.kv .k{width:84px;flex:none;color:var(--fg-3)}
.kv .v{color:var(--fg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv .v a{color:var(--link)}

.gatebox{
  border:1px solid rgba(222,199,95,.32);background:var(--amber-soft);
  border-radius:var(--r);padding:16px 18px;margin-bottom:16px;
}
.gatebox .t{display:flex;align-items:center;gap:9px;color:#E8D88A;font-weight:600;font-size:13.5px;margin-bottom:6px}
.gatebox .d{font-size:12.5px;color:var(--fg-2);margin-bottom:12px;line-height:1.55}
.gatebox textarea{margin-bottom:10px}

.feed{display:flex;flex-direction:column;gap:2px;font-size:13px}
.ev{display:flex;gap:11px;padding:7px 4px;border-radius:var(--r);line-height:1.55}
.ev .ic{flex:none;width:20px;height:20px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:10px;background:var(--panel-2);color:var(--fg-3);margin-top:1px}
.ev .b{flex:1;min-width:0;color:var(--fg-2);overflow-wrap:anywhere}
.ev .b .hd{color:var(--fg);font-weight:530}
.ev.sys .b{color:var(--fg-3);font-size:12px}
.ev-tool{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11.5px;
  background:var(--well);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:3px 9px;color:var(--fg-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ev-sep{display:flex;align-items:center;gap:10px;padding:14px 0 6px;color:var(--fg-3);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-family:var(--mono)}
.ev-sep::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.feed .live{display:flex;align-items:center;gap:8px;padding:10px 4px;color:var(--fg-3);font-size:12px}

/* settings sub-nav */
.subnav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--line-soft)}
.subnav a{padding:8px 12px;font-size:13px;font-weight:510;color:var(--fg-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--fg-hi)}
.subnav a.on{color:var(--link);border-bottom-color:var(--accent)}

/* ------------------------------------------------- signature grid backdrop */
/*
 * The beta hero's large-cell cyan grid, promoted to the shared page-opener
 * backdrop so every surface speaks one language: identical 160px cells of cyan
 * hairlines, lit by a radial spotlight sat behind that page's headline. Each
 * opener isolates a stacking context and paints the grid on a z-index:-1 pseudo
 * — above its own wash, behind its copy — exactly like .access-hero.
 */
.hero,.page-head,.page-pad,.docs{position:relative;isolation:isolate}
.hero::before,
.page-head::before,
.page-pad::before,
.docs::before,
.auth-wrap::after{
  content:"";position:absolute;pointer-events:none;
  background-image:
    linear-gradient(rgba(1,200,241,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,200,241,.06) 1px,transparent 1px);
  background-size:160px 160px;
}
/* bounded openers fill their box; tall document surfaces cap to a top band */
.hero::before,.page-head::before{inset:0;z-index:-1}
.docs::before,.page-pad::before{top:0;left:0;right:0;height:560px;z-index:-1}
/* left-aligned headlines (changelog, docs, legal): upper-left spotlight */
.page-head::before,.docs::before,.page-pad::before{
  -webkit-mask-image:radial-gradient(ellipse 60% 72% at 28% 42%,#000,transparent 66%);
  mask-image:radial-gradient(ellipse 60% 72% at 28% 42%,#000,transparent 66%);
}
/* centered headlines (homepage hero, centered page-heads): top-center spotlight */
.hero::before,.page-head.center::before{
  -webkit-mask-image:radial-gradient(ellipse 66% 60% at 50% 26%,#000,transparent 64%);
  mask-image:radial-gradient(ellipse 66% 60% at 50% 26%,#000,transparent 64%);
}
/* auth card: the grid rides above the wash/glow (::before), below the card —
   a broad spotlight centered on the card so it reads in the margins around it */
.auth-wrap{isolation:isolate}
.auth-wrap>div{position:relative;z-index:1}
.auth-wrap::after{
  inset:0;z-index:0;
  background-image:
    linear-gradient(rgba(1,200,241,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,200,241,.07) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(ellipse 78% 66% at 50% 44%,#000,transparent 66%);
  mask-image:radial-gradient(ellipse 78% 66% at 50% 44%,#000,transparent 66%);
}
/* app shell: a fainter grid crowning the content sheet, behind the header + top */
.main{position:relative}
.main-head,.main-body{position:relative;z-index:1}
.main::before{
  content:"";position:absolute;top:0;left:0;right:0;height:300px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(1,200,241,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(1,200,241,.05) 1px,transparent 1px);
  background-size:160px 160px;
  -webkit-mask-image:radial-gradient(ellipse 120% 100% at 22% 0%,#000,transparent 70%);
  mask-image:radial-gradient(ellipse 120% 100% at 22% 0%,#000,transparent 70%);
}

/* motion */
@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes fade-in{
  from{opacity:0}
  to{opacity:1}
}
@keyframes hero-route-flow{
  to{stroke-dashoffset:-56}
}
@keyframes hero-node-pulse{
  0%,14%,100%{transform:scale(1)}
  7%{transform:scale(2)}
}
@keyframes hero-signal-reveal{
  from{opacity:0;clip-path:inset(0 0 100% 0)}
  to{opacity:1;clip-path:inset(0)}
}
@keyframes hero-signal-cycle{
  0%,16%,100%{box-shadow:0 14px 36px rgba(0,0,0,.28)}
  8%{box-shadow:0 14px 36px rgba(0,0,0,.28),0 0 24px rgba(var(--signal-rgb),.16)}
}
@keyframes hero-icon-pop{
  0%,16%,100%{transform:scale(1)}
  4%{transform:scale(1.5) rotate(-10deg)}
  10%{transform:scale(1.15)}
}
@keyframes hero-icon-sketch{
  0%,16%,100%{transform:rotate(0)}
  3%{transform:rotate(-16deg) translateY(-1px)}
  6%{transform:rotate(12deg)}
  9%{transform:rotate(-12deg) translateY(-1px)}
  12%{transform:rotate(8deg)}
}
@keyframes hero-icon-type{
  0%,16%,100%{transform:scaleX(1);opacity:1}
  3%{transform:scaleX(1.35);opacity:.55}
  6%{transform:scaleX(1)}
  9%{transform:scaleX(1.35);opacity:.55}
  12%{transform:scaleX(1);opacity:1}
}
@keyframes hero-icon-guard{
  0%,16%,100%{transform:scale(1)}
  8%{transform:scale(1.45);filter:drop-shadow(0 0 5px rgba(var(--signal-rgb),.9))}
}
@keyframes hero-icon-launch{
  0%,16%,100%{transform:translate(0,0) rotate(0)}
  4%{transform:translate(3px,-4px) rotate(8deg) scale(1.2)}
  8%{transform:translate(-1px,1px) rotate(-4deg)}
  12%{transform:translate(1px,-2px) rotate(4deg)}
}
.hero h1{animation:rise .7s ease both}
.hero .lead{animation:rise .7s .08s ease both}
.hero .actions{animation:rise .7s .14s ease both}
.hero-stage{animation:fade-in 1s .22s ease both}
.page-head h1{animation:rise .6s ease both}
.page-head .lead{animation:rise .6s .07s ease both}

@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .lead,.hero .actions,.hero-stage,
  .hero-orbit>svg path,.hero-orbit>svg circle,.hero-signal,.hero-signal .kicker svg{
    animation:none;
  }
  .hero-orbit,.hero-message,.hero-signal{transition:none;transform:none}
}

@media (max-width:1100px){
  .hero-orbit{display:none}
  .hero-copy{min-height:560px}
  .dl-card{padding:26px 22px 24px}
}

/* ------------------------------------------------------------------ mobile */
@media (max-width:880px){
  body.app{flex-direction:column;height:auto;overflow:auto}
  .side{width:100%;flex-direction:row;align-items:center;padding:8px 12px;gap:8px;overflow-x:auto}
  .side-org{flex:none}
  .side-org .menu{left:0;right:auto;min-width:240px}
  .side-nav{flex-direction:row;gap:2px}
  .side-nav a span{display:none}
  .side-sec{display:none}
  .side-foot{margin-top:0;margin-left:auto}
  .side-foot .email{display:none}
  .main{margin:0 8px 8px}
  .run-grid{grid-template-columns:1fr}
  .rail{position:static;order:-1}
  .docs{grid-template-columns:1fr;gap:20px}
  .docs-side{position:static;flex-direction:row;flex-wrap:wrap}
  /* the collapsed sidebar is a wrapped row, so a section heading would trail at
     the end of whatever line it lands on — reading as a label for the links
     BEFORE it. Claiming the full row puts each heading back at the head of its
     own group, which is the only thing the headings are for */
  .docs-side .h{flex-basis:100%;margin-top:10px}
  .docs-side .h:first-child{margin-top:0}
  .mk-split,.mk-split.rev{grid-template-columns:1fr;gap:28px}
  .mk-links{display:none}
  .mk-wrap,.hero-copy,.hero-stage{padding-left:20px;padding-right:20px}
  :root{--nav-h:64px;--nav-inset:8px}
  .mk-nav-inner{padding-left:18px;padding-right:16px}
  .mk-nav-inner::before{left:8px;right:8px}
  /* the 34px only exists to hold the brand off .mk-links, which is hidden
     here — reclaiming it is what lets brand + both CTAs fit at 375px */
  .mk-nav .mk-brand{margin-right:0}
  .mk-footer .cols{grid-template-columns:1fr 1fr;gap:28px}
  .mk-grid{grid-template-columns:1fr}
  .mk-section{padding-top:88px}
  .page-head{padding-top:120px}
  .docs,.page-pad{padding-top:110px}
  .log-entry{grid-template-columns:1fr;gap:6px}
  .hero-copy{min-height:440px;padding-top:110px}
  .ide{grid-template-columns:1fr;min-height:0}
  .ide-rail{display:none}
  .mk-open{padding:28px 22px}
  .dl-surfaces,.dl-families{grid-template-columns:1fr}
  .dl-card,.dl-card.wide{padding:24px 20px}
  /* a phone has vertical room and no horizontal room: the action takes its own
     line so the longest name ("VS Code Marketplace") keeps the full width */
  .dl-target{grid-template-columns:18px minmax(0,1fr);gap:4px 12px}
  .dl-target-meta{grid-column:2;grid-row:2}
  .dl-target-action{grid-column:2;grid-row:3;justify-content:flex-start;margin-top:4px}
  /* four columns at phone width ellipsis every card — two still reads */
  .pr-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 7px}
  .pr-check-result{grid-template-columns:16px 1fr}
  .pr-check-result em{grid-column:2;text-align:left}
  .access-hero{min-height:0;padding:118px 0 84px}
  .access-layout{grid-template-columns:1fr;gap:48px}
  .access-copy-frame{min-height:0;display:block}
  .access-copy{max-width:660px}
  .access-copy h1{font-size:clamp(48px,9vw,66px)}
  .access-panel{max-width:620px;width:100%;padding:30px}
}
@media (max-width:600px){
  .access-hero{padding-top:106px}
  .access-copy h1{font-size:46px}
  .access-panel{padding:26px 20px 20px}
  .access-form{grid-template-columns:1fr}
  .access-form-wide{grid-column:auto}
}