/* genclass.dev design system: black ground, bone text, the GenClass mark's colours (green for what GenClass fixes,
   red-orange for the bugs it catches), square corners, 1px rules, few words per screen. Type: Satoshi for text and
   headings, JetBrains Mono for code. The older token names (--paper, --ink, --blue-f…) stay as aliases so inline
   styles in pages and partials keep working.
   Themes: the palette below is dark, the default. Light replaces it on <html data-theme="light"> (the header's toggle,
   saved as localStorage "gc-theme", shared with the dashboard) and, with no pick, when the system asks for light.
   --accent is green for text and marks (darker in light, to read at 4.5:1 on white); --accent-fill is the green of
   filled buttons under --accent-ink text. Panels drawn as screens (terminals, the live demo, code) keep the dark
   palette in both themes: they are listed with :root, so they declare it themselves. */
:root,.term,.race,.lab,.code,.console,.trace,.demo,.app{
  color-scheme:dark;
  --ground:#000; --raised:#0B0B0A; --raised2:#131311; --bone:#F0F1E9; --dim:#A0A196; --faint:#88897F;
  --rule:#30312B; --rule-strong:#46463E; --accent:#2FD07F; --accent-fill:#2FD07F; --accent-ink:#02140A; --red:#FF5A36;
  --good:#5BE39B; --good-t:rgba(47,208,127,.08); --bad:#FF6B4A; --bad-t:rgba(255,90,54,.1); --warn:#F5C66A;
  --ph:#5D5E56; --nav-bg:rgba(0,0,0,.75); --nav-solid:rgba(0,0,0,.94); --veil:0,0,0;
  --paper:var(--ground); --panel:var(--raised); --ink:var(--bone); --ink2:var(--dim); --ink3:var(--faint);
  --rule2:var(--rule-strong);
  --orange:var(--bad); --orange-f:var(--bad); --orange-t:var(--bad-t);
  --blue:var(--good); --blue-f:var(--accent); --blue-t:var(--good-t);
  --night:var(--raised); --night2:var(--raised2); --nline:var(--rule); --ntext:var(--bone); --ndim:var(--dim);
  --display:"Satoshi", ui-sans-serif, system-ui, sans-serif;
  --sans:"Satoshi", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max:1440px; --pad:clamp(16px,8vw,115px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* light: off-white page, white surfaces, near-black text; greys and greens that read at 4.5:1 or more on white. The two
   blocks are the same values: an explicit pick, then the system's preference when there is no pick. */
:root[data-theme="light"]{
  color-scheme:light;
  --ground:#FCFCFC; --raised:#FFFFFF; --raised2:#F3F3F3; --bone:#171717; --dim:#525252; --faint:#6B6B6B;
  --rule:#E6E6E6; --rule-strong:#D4D4D4; --accent:#0A7C4A; --accent-fill:#1DB36A; --accent-ink:#02140A; --red:#D9411F;
  --good:#0A7C4A; --good-t:rgba(10,124,74,.07); --bad:#C0341D; --bad-t:rgba(192,52,29,.07); --warn:#9A6700;
  --ph:#8A8A8A; --nav-bg:rgba(252,252,252,.8); --nav-solid:rgba(252,252,252,.96); --veil:252,252,252;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --ground:#FCFCFC; --raised:#FFFFFF; --raised2:#F3F3F3; --bone:#171717; --dim:#525252; --faint:#6B6B6B;
    --rule:#E6E6E6; --rule-strong:#D4D4D4; --accent:#0A7C4A; --accent-fill:#1DB36A; --accent-ink:#02140A; --red:#D9411F;
    --good:#0A7C4A; --good-t:rgba(10,124,74,.07); --bad:#C0341D; --bad-t:rgba(192,52,29,.07); --warn:#9A6700;
    --ph:#8A8A8A; --nav-bg:rgba(252,252,252,.8); --nav-solid:rgba(252,252,252,.96); --veil:252,252,252;
  }
}
/* the screens set their own text colour: body's is the page theme's, and they keep the dark palette */
.term,.race,.lab,.code,.console,.trace,.demo,.app{color:var(--bone)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;background:var(--ground)}
body{background:var(--ground);color:var(--bone);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:var(--accent-fill);color:var(--accent-ink)}
a{color:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent-fill);color:var(--accent-ink);padding:8px 12px;z-index:60}
.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--mono)}
code{font-family:var(--mono);font-size:.9em}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.0125em;text-wrap:balance;color:var(--bone)}
h3{font-weight:500;letter-spacing:-.025em}
p{text-wrap:pretty}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--rule)}
@media (prefers-reduced-transparency:reduce){.nav{background:var(--ground)}}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px;position:relative}
.logo{display:flex;align-items:center;gap:10px;font:500 17px var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--bone);flex:none}
.logo img{width:24px;height:24px;display:block}
.nav nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:26px}
.nav nav a,.nav .gh{font-size:14px;color:var(--dim);text-decoration:none;transition:color .15s}
.nav nav a:hover,.nav .gh:hover,.nav nav a.on{color:var(--bone)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav .gh{padding:8px 10px}
.nav .btn{min-height:36px;font-size:14px;padding:0 16px}
/* the Discord button: the community invite, bordered like the menu button; the label goes on phones, the mark stays */
.nav .dc{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;margin-right:4px;border:1px solid var(--rule-strong);font-size:14px;color:var(--dim);text-decoration:none;transition:color .15s,border-color .15s}
.nav .dc:hover{color:var(--bone);border-color:var(--accent)}
.nav .dc .i-discord{width:16px;height:16px;flex:none;display:block}
@media (max-width:560px){.nav .dc{width:36px;padding:0;justify-content:center;margin-right:0}.nav .dc span{display:none}}
@media (max-width:860px){.nav nav{display:none}}
/* the theme toggle: a sun on the dark theme (switch to light), a moon on the light one */
.theme{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;margin-right:2px;border:1px solid transparent;background:none;color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s}
.theme:hover{color:var(--bone);border-color:var(--rule-strong)}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme .i-moon{display:none}
:root[data-theme="light"] .theme .i-sun{display:none}
:root[data-theme="light"] .theme .i-moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme .i-sun{display:none}:root:not([data-theme="dark"]) .theme .i-moon{display:block}}

/* ---------- buttons, install line ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:0;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;border:1px solid var(--accent-fill);background:var(--accent-fill);color:var(--accent-ink);white-space:nowrap;transition:opacity .15s,border-color .15s,color .15s,transform .1s}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.985)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn.green{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-ink)}
.btn.ghost{background:transparent;color:var(--dim);border-color:var(--rule-strong)}
.btn.ghost:hover{opacity:1;color:var(--bone);border-color:var(--faint)}
.btn:disabled{opacity:.5;cursor:progress}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.cmd{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:46px;padding:0 14px;border:1px solid var(--rule);border-radius:0;background:var(--raised2);font:400 14px var(--mono);cursor:pointer;color:var(--bone);text-align:left;transition:border-color .15s}
.cmd:hover{border-color:var(--rule-strong)}
.cmd .p{color:var(--faint);margin-right:6px}
.cmd .k{font:400 0/1 var(--mono);color:var(--faint);display:inline-flex;align-items:center;gap:6px;flex:none}
.cmd.done .k{font-size:12px}
.cmd .k::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='8' y='8' width='12' height='12'/%3E%3Cpath d='M16 8V4H4v12h4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='8' y='8' width='12' height='12'/%3E%3Cpath d='M16 8V4H4v12h4'/%3E%3C/svg%3E") center/contain no-repeat}
.cmd:hover .k{color:var(--bone)}
.cmd.done .k{color:var(--accent)}
.cmd.done .k::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.textlink{color:var(--bone);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px;transition:text-decoration-color .15s;background:none;border:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:0}
.textlink:hover{text-decoration-color:var(--bone)}

/* ---------- page heads and sections ---------- */
.hero{padding:88px 0 0}
.eyebrow{font-size:14px;color:var(--dim);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.eyebrow .tag{border:1px solid var(--rule-strong);padding:2px 8px;color:var(--bone)}
.hero h1{font-size:clamp(40px,5vw,56px);line-height:1.15;letter-spacing:-.055em;margin:20px 0 0;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-row{display:block;margin-top:18px}
.lede{font-size:clamp(16px,1.2vw,17px);line-height:1.55;color:var(--dim);max-width:58ch}
.lede strong{color:var(--bone);font-weight:500}
.lede a{color:var(--bone);text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.hero-top{display:block;margin-top:18px}
.hero-top h1{margin-top:0}
.hero-mark{display:none}
.cap{font-size:13px;color:var(--faint);margin-top:12px}

section{padding:112px 0 0}
@media (max-width:620px){section{padding:80px 0 0}}
.sh{display:block}
.sh .no{display:block;font-size:14px;color:var(--faint);margin-bottom:14px}
.sh h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15;letter-spacing:-.0125em;max-width:26ch}
.intro{font-size:16px;line-height:1.6;color:var(--dim);max-width:62ch;margin:18px 0 0}
.intro strong{color:var(--bone);font-weight:500}
.intro a,.note a{color:var(--bone);text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.note{font-size:14px;color:var(--faint);margin-top:18px;max-width:90ch}
sup{font-family:var(--mono);font-size:11px;color:var(--faint)}

/* scroll reveal: only hides content once the inline head script has marked the page as scripted */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin-top:40px}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font:500 12px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--rule-strong)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--dim)}
td b,td strong{color:var(--bone);font-weight:500}
td.k{font-family:var(--mono);font-size:14px;white-space:nowrap;color:var(--bone)}
.spec td:nth-child(2){min-width:280px}
.pill{display:inline-block;font:500 12px var(--mono);padding:3px 8px;margin:0 4px 4px 0;white-space:nowrap;border:1px solid var(--rule-strong);color:var(--bone)}
.pill.o{color:var(--dim)}
.pill.g{border-color:rgba(47,208,127,.35);color:var(--accent);background:var(--good-t)}
.pill.h{color:var(--bone)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:13px;color:var(--dim);align-items:center}
.data{min-width:640px}.spec{min-width:600px}
.data td.n{font-family:var(--mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--bone)}
.data td.bar{width:42%;min-width:160px}
.data td.bar div{height:8px;background:var(--raised2);overflow:hidden;margin-top:6px}
.data td.bar i{display:block;height:100%;background:var(--bone)}
.data tr.ev i{background:var(--bad)}
.data tr.rl i{background:var(--accent)}
.stat td:last-child{font-family:var(--mono);white-space:nowrap;text-align:right}
.stat th:last-child{text-align:right}
.met{color:var(--good)} .nyet{color:var(--bad)}
.modes td:first-child{font-family:var(--mono);font-weight:500;white-space:nowrap;color:var(--bone)}
.modes tr.def td{background:var(--raised)}
.modes tr.def td:first-child{padding-left:10px}
.prof th:not(:first-child),.prof td:not(:first-child){text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.prof th.hl,.prof td.hl{background:var(--raised);padding-left:12px;color:var(--bone)}
.pr td{font-family:var(--mono);font-size:14px}
.pr td:first-child{font-family:var(--sans);font-size:15px}

/* ---------- code ---------- */
.code{background:var(--ground);color:var(--bone);border:1px solid var(--rule-strong);overflow:hidden;margin-top:40px}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--rule);overflow-x:auto}
.tabs button{all:unset;cursor:pointer;font:400 13px var(--mono);color:var(--faint);padding:12px 16px;border-right:1px solid var(--rule);transition:color .15s}
.tabs button:hover{color:var(--bone)}
.tabs button[aria-selected="true"]{color:var(--bone);background:var(--raised2);box-shadow:inset 0 -1px 0 var(--accent)}
.tabs button:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
pre{font:13.5px/1.75 var(--mono);padding:22px 24px;overflow-x:auto;color:var(--bone)}
pre .c{color:var(--faint)} pre .k{color:var(--accent)} pre .s{color:var(--good)}
.console{margin-top:40px;background:var(--ground);border:1px solid var(--rule-strong);color:var(--bone);font:13px/1.7 var(--mono);padding:18px 20px;overflow-x:auto}
.console div{white-space:pre}
.console .d{color:var(--faint)} .console .b{color:var(--good)} .console .o{color:var(--bad)}

/* ---------- live trace (how it works) ---------- */
.trace{margin-top:56px;background:var(--ground);border:1px solid var(--rule-strong);color:var(--bone);overflow:hidden;font-family:var(--mono);font-size:13px}
.trace-head{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--rule);color:var(--faint)}
.trace-head b{color:var(--bone);font-weight:500}
.trace-head .live{margin-left:auto;display:flex;align-items:center;gap:8px}
.trace-head .live i{width:7px;height:7px;background:var(--accent);display:block;box-shadow:0 0 10px var(--accent)}
.trace-body{padding:18px 20px 8px;overflow-x:auto}
.tgrid{min-width:720px;padding-top:28px}
.trow{display:grid;grid-template-columns:200px 1fr 150px;gap:16px;align-items:center;height:34px}
.trow .q{color:var(--faint);white-space:nowrap}
.trow .q b{color:var(--bone);font-weight:400}
.lane{position:relative;height:100%}
.lane .bar{position:absolute;top:12px;height:10px;background:var(--accent);transform-origin:left;animation:grow .9s var(--ease) both}
.lane .bar.late{background:repeating-linear-gradient(135deg,var(--bad) 0 6px,#C2402A 6px 12px)}
.trow .out{text-align:right;color:var(--faint);white-space:nowrap}
.trow .out.ok{color:var(--good)}
.trow .out.no{color:var(--bad)}
.axis{display:grid;grid-template-columns:200px 1fr 150px;gap:16px;height:30px;color:var(--faint);font-size:11px}
.ticks{position:relative;border-top:1px solid var(--rule)}
.ticks span{position:absolute;top:6px;transform:translateX(-50%);white-space:nowrap}
.ticks span:last-of-type{transform:translateX(-100%)}
.mark{position:absolute;top:-198px;height:198px;width:0;border-left:1px dashed var(--faint)}
.mark-l{position:absolute;top:0;left:6px;white-space:nowrap;color:var(--bone);font-size:11px;background:var(--raised2);padding:2px 6px}
.trace-foot{border-top:1px solid var(--rule);padding:14px 20px;line-height:1.6;color:var(--good)}
.trace-foot span{color:var(--faint)}
@keyframes grow{from{transform:scaleX(0)}}
.d1{animation-delay:.1s}.d2{animation-delay:.25s;animation-duration:2.6s}.d3{animation-delay:.4s}.d4{animation-delay:.55s}.d5{animation-delay:.7s}
.fade{animation:fade .5s ease both}
.f1{animation-delay:2.9s}
@keyframes fade{from{opacity:0}}

/* ---------- proof row, search demo (older pages) ---------- */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule);margin-top:72px}
.proof > div{padding:26px 24px 26px 0}
.proof > div + div{padding-left:24px;border-left:1px solid var(--rule)}
@media (max-width:540px){.proof > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.big{font-family:var(--display);font-size:clamp(32px,3vw,44px);font-weight:400;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--bone)}
.proof p{font-size:14.5px;color:var(--dim);margin-top:10px;max-width:28ch}
.stacks{display:flex;flex-wrap:wrap;gap:6px 20px;padding:18px 0;font-family:var(--mono);font-size:13px;color:var(--faint)}
.stacks b{color:var(--bone);font-weight:500}
.demo{margin-top:40px;border:1px solid var(--rule-strong);padding:24px}
.dtop{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.field{flex:1 1 280px;display:flex;flex-direction:column;gap:6px}
.field label{font:500 13px var(--sans);color:var(--dim)}
.field input{font:400 16px var(--sans);min-height:46px;padding:0 14px;border:1px solid var(--rule);background:var(--ground);color:var(--bone)}
.field input:focus{outline:0;border-color:var(--faint)}
.dtop .btns{display:flex;gap:8px;align-items:flex-end}
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:16px;margin-top:20px}
.lanebox{border:1px solid var(--rule);padding:18px;min-height:290px;display:flex;flex-direction:column}
.lanebox h3{font:500 15px var(--sans);letter-spacing:0;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.lanebox h3 span{font:400 12px var(--mono);color:var(--faint)}
.for{font:13px var(--mono);color:var(--faint);margin-top:12px}
.for b{color:var(--bone);font-weight:500}
.res{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:4px;flex:1}
.res li{padding:8px 10px;background:var(--raised2)}
.lanebox.stale{border-color:var(--bad)}
.lanebox.stale .res li{background:var(--bad-t)}
.st{font:13px/1.5 var(--mono);margin-top:12px;min-height:40px;color:var(--faint)}
.st .no{color:var(--bad)} .st .ok{color:var(--good)}
.score{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);font-size:14px;color:var(--dim);align-items:baseline}
.score b{font:400 28px var(--display);color:var(--bone);margin-right:6px;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.score .a b{color:var(--bad)} .score .c b{color:var(--accent)}
.reqs{margin-top:14px;display:flex;flex-direction:column;gap:4px;font:12.5px var(--mono);color:var(--faint)}
.req{display:grid;grid-template-columns:minmax(120px,180px) 1fr 64px;gap:12px;align-items:center}
.req .q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req .t{height:6px;background:var(--raised2);position:relative;overflow:hidden}
.req .t i{position:absolute;inset:0 auto 0 0;width:0;background:var(--accent)}
.req.late .t i{background:var(--bad)}
.req .ms{text-align:right}

/* ---------- steps, figures, timelines ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:0 40px;margin-top:40px}
.step{padding:22px 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:44px 1fr;gap:4px 8px}
.step .n{font:400 13px var(--mono);color:var(--faint);padding-top:4px}
.step h3{font-size:20px}
.step p{grid-column:2;color:var(--dim);font-size:15px}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:56px 48px;margin-top:48px}
figure{min-width:0}
figure .frame{border:1px solid var(--rule);padding:24px}
figcaption{font-size:14px;color:var(--dim);margin-top:14px;max-width:62ch}
figcaption b{color:var(--bone);font-weight:500}
.ftitle{font:500 17px var(--sans);letter-spacing:-.01em;color:var(--bone)}
.fsub{font-size:14px;color:var(--faint);margin-top:2px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;height:240px;margin-top:28px;align-items:end;border-bottom:1px solid var(--rule-strong)}
.colg{display:flex;justify-content:center;align-items:flex-end;gap:6px;height:100%}
.colg div{width:min(34px,38%);position:relative}
.colg .dx{background:var(--bone)}
.colg .ax{background:var(--accent);box-shadow:0 0 18px rgba(47,208,127,.25)}
.colg div span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font:11px var(--mono);color:var(--dim);padding-bottom:4px;white-space:nowrap}
.xl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:10px;font-size:12.5px;color:var(--dim);text-align:center;line-height:1.35}
.key{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.hbar{margin-top:18px}
.hbar .r{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;margin-bottom:6px}
.hbar .r span{color:var(--dim)}
.hbar .r b{font:500 14px var(--mono);color:var(--bone)}
.hbar .t{height:10px;background:var(--raised2);overflow:hidden}
.hbar .t i{display:block;height:100%;background:var(--bone)}
.hbar .t i.b{background:var(--accent)} .hbar .t i.o{background:var(--bad)} .hbar .t i.m{background:var(--rule-strong)}
.mini{display:flex;align-items:center;gap:10px}
.mini .t{flex:1;height:6px;background:var(--raised2);overflow:hidden;min-width:60px}
.mini .t i{display:block;height:100%;background:var(--bone)}
.mini .t i.b{background:var(--accent)}
svg.chart{width:100%;height:auto;margin-top:20px;display:block}
svg.chart text{font:11px var(--mono);fill:var(--faint)}
.pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));margin-top:20px;border-top:1px solid var(--rule)}
.pair > div{padding:22px 24px 4px 0}
.pair > div + div{border-left:1px solid var(--rule);padding-left:24px}
@media (max-width:620px){.pair > div + div{border-left:0;padding-left:0;border-top:1px solid var(--rule)}}
.pair p{font-size:14.5px;color:var(--dim);margin-top:8px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:48px;margin-top:64px}
.cf{border:1px solid var(--rule);padding:22px;margin-top:20px;font:13px/1.6 var(--mono);color:var(--bone)}
.cf .sit{color:var(--faint)}
.cf .opt{display:grid;grid-template-columns:80px 1fr 96px;gap:12px;padding:10px 0;border-top:1px solid var(--rule);align-items:baseline}
.cf .opt:first-of-type{margin-top:12px}
.cf .opt .c{text-align:right;color:var(--bad)}
.cf .opt.win{color:var(--accent)}
.cf .opt.win .c{color:var(--accent);font-weight:500}
.tl{list-style:none;margin-top:20px;border-left:1px solid var(--rule-strong)}
.tl li{position:relative;padding:0 0 18px 22px;font-size:15px;color:var(--dim)}
.tl li::before{content:"";position:absolute;left:-4px;top:8px;width:7px;height:7px;background:var(--bone)}
.tl li b{display:block;font:500 12.5px var(--mono);color:var(--bone)}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:0 40px;margin-top:32px}
.feats div{padding:18px 0;border-top:1px solid var(--rule)}
.feats h3{font:500 16px var(--sans);letter-spacing:0}
.feats p{font-size:14.5px;color:var(--dim);margin-top:4px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:0 48px;margin-top:32px}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;list-style:none;padding:20px 0;font:400 16px var(--sans);color:var(--bone);display:flex;align-items:center;gap:16px;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;width:12px;height:12px;background:linear-gradient(var(--faint),var(--faint)) center/12px 1px no-repeat,linear-gradient(var(--faint),var(--faint)) center/1px 12px no-repeat;transition:transform .25s var(--ease)}
summary:hover::before{background:linear-gradient(var(--accent),var(--accent)) center/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1px 12px no-repeat}
details[open] > summary::before{transform:rotate(45deg);background:linear-gradient(var(--accent),var(--accent)) center/12px 1px no-repeat,linear-gradient(var(--accent),var(--accent)) center/1px 12px no-repeat}
details p{color:var(--dim);padding:0 0 22px 28px;font-size:15px;max-width:68ch}
details p a{color:var(--bone);text-underline-offset:4px;text-decoration-color:var(--rule-strong)}

/* ---------- footer ---------- */
.foot-wrap{border-top:1px solid var(--rule);margin-top:128px}
.foot-grid{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(0,1fr));gap:40px 24px;padding:64px 0 56px}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
.foot-brand p{font-size:14px;color:var(--dim);margin-top:14px;max-width:30ch}
.foot-grid b{display:block;font:500 14px var(--sans);color:var(--bone);margin-bottom:14px}
.foot-grid a{display:block;font-size:14px;color:var(--dim);text-decoration:none;padding:4px 0;transition:color .15s}
.foot-grid a:hover{color:var(--bone)}
.foot-grid .logo{display:flex;padding:0;color:var(--bone)}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;padding:24px 0 40px;border-top:1px solid var(--rule);font-size:13px;color:var(--faint)}
.foot a{text-decoration:none;color:var(--faint)}
.foot a:hover{color:var(--bone)}
.foot span a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html.js .reveal{opacity:1;transform:none}}

/* ---------- shared components: mobile menu, crumbs, page heads, badges ---------- */
.mnav{display:none;position:relative;border:0}
.mnav summary{list-style:none;cursor:pointer;min-height:36px;min-width:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--rule-strong);font:400 14px var(--sans);color:var(--dim);padding:0 12px;gap:0}
.mnav summary::before{content:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{color:var(--bone);border-color:var(--faint)}
.mnav .panel{position:absolute;right:0;top:46px;background:var(--ground);border:1px solid var(--rule-strong);padding:6px;display:flex;flex-direction:column;min-width:220px;animation:menu-in .18s var(--ease)}
.mnav .panel a{padding:11px 12px;text-decoration:none;font-size:15px;color:var(--dim)}
.mnav .panel a:hover{background:var(--raised2);color:var(--bone)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
@media (max-width:860px){.mnav{display:block}}
/* a phone: Sign in, then Get started, move into the menu */
@media (max-width:560px){.nav .gh{display:none}}
@media (max-width:480px){.nav .right > .btn{display:none}}

.crumbs{font:13px var(--sans);color:var(--faint);display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--bone)}
.page-hero{padding:72px 0 8px}
.page-hero h1{font-size:clamp(36px,4.4vw,56px);line-height:1.12;letter-spacing:-.05em;max-width:22ch}
.page-hero h1 em{font-style:normal;color:var(--accent)}
.page-hero .lede{margin-top:20px;max-width:60ch}
.page-hero .ctas{margin-top:28px}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--mono);padding:3px 8px;border:1px solid rgba(47,208,127,.35);background:var(--good-t);color:var(--accent);white-space:nowrap}
.badge.n{border-color:var(--rule-strong);background:transparent;color:var(--dim)}
.badge.o{border-color:rgba(255,90,54,.4);background:var(--bad-t);color:var(--bad)}
.prod > .badge,.page-hero > .wrap > .badge{align-self:flex-start;justify-self:start}
.notice{display:block;border:1px solid var(--rule);border-left:2px solid var(--accent);background:var(--raised);padding:12px 16px;font-size:15px;color:var(--bone);margin-top:16px;max-width:70ch}
.callout{border:1px solid var(--rule);border-left:2px solid var(--accent);background:var(--raised);padding:16px 18px;margin:0 0 20px;font-size:15px}
.callout b{color:var(--bone)}
.up{color:var(--good)} .dn{color:var(--bad)} .mut{color:var(--faint)}

/* ---------- ruled grids: cells share 1px rules, incomplete rows stay open ---------- */
.fgrid,.cards3,.stats,.principles{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:48px}
.fgrid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cards3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.principles{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.fcard,.gcard,.stat,.principles > div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px}
@media (max-width:620px){.fcard,.gcard,.stat,.principles > div{padding:24px}}
.fcard .ic{width:36px;height:36px;border:1px solid rgba(47,208,127,.35);background:var(--good-t);display:grid;place-items:center;margin-bottom:22px}
.fcard .ic svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fcard .ic.r{border-color:rgba(255,90,54,.4);background:var(--bad-t)} .fcard .ic.r svg{stroke:var(--bad)}
.fcard .ic.n{border-color:var(--rule-strong);background:transparent} .fcard .ic.n svg{stroke:var(--dim)}
.fcard h3,.principles h3{font:500 20px var(--display);letter-spacing:-.025em}
.fcard p,.principles p{font-size:15px;color:var(--dim);margin-top:10px}
.gcard{text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.gcard:hover{background:var(--raised)}
.gcard .k2{font:400 12px var(--mono);color:var(--faint)}
.gcard h3{font:500 20px var(--display);letter-spacing:-.025em}
.gcard p{font-size:15px;color:var(--dim)}
.gcard span.more{font-size:14px;color:var(--bone);margin-top:auto;padding-top:10px;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.gcard:hover span.more{text-decoration-color:var(--accent)}
.stat .big{color:var(--bone)}
.stat .big.g,.big.g{color:var(--accent)}
.stat p{font-size:15px;color:var(--dim);margin-top:14px}
.stat small{display:block;font:12px/1.5 var(--mono);color:var(--faint);margin-top:12px}

/* ---------- products, pricing ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:0;margin-top:48px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.prod{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px;display:flex;flex-direction:column;gap:16px}
.prod.dark{background:var(--raised)}
.prod.dark p,.prod.dark li{color:var(--dim)}
.prod h3{font-size:26px;letter-spacing:-.03em}
.prod p{color:var(--dim)}
.prod ul,.tier ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--dim)}
.prod li,.tier li{display:flex;gap:12px}
.prod li::before,.tier li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.2L13 4.8' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
.prod .foot2{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding-top:8px}
.price{font:400 36px var(--display);letter-spacing:-.04em;color:var(--bone)}
.price span{font:400 15px var(--sans);color:var(--faint);letter-spacing:0}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0;margin-top:56px;align-items:stretch;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.tier{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px;display:flex;flex-direction:column;gap:18px;position:relative}
.tier.pop{background:var(--raised)}
.tier.pop::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent);box-shadow:0 0 16px 1px rgba(47,208,127,.5)}
.tier .tag2{position:absolute;top:16px;right:20px}
.tier h2{font-size:22px;font-weight:500;letter-spacing:-.025em}
.tier .who{color:var(--dim);font-size:15px;min-height:48px}
.tier .btn{width:100%}
.tier .fine2{font-size:13px;color:var(--faint)}
.cmp th:not(:first-child),.cmp td:not(:first-child){text-align:center}
.yes{color:var(--accent);font-weight:500}.no2{color:var(--rule-strong)}

/* ---------- forms ---------- */
.formcard{border:1px solid var(--rule);padding:40px;margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:40px}
@media (max-width:620px){.formcard{padding:24px}}
.formcard h2{font-size:28px;letter-spacing:-.02em}
.formcard p{color:var(--dim);margin-top:12px}
.wl{display:flex;flex-direction:column;gap:14px}
.wl label{font:500 13px var(--sans);color:var(--dim);display:flex;flex-direction:column;gap:8px}
.wl input,.wl select,.wl textarea{font:400 14px var(--sans);min-height:42px;padding:9px 12px;border:1px solid var(--rule);border-radius:0;background:var(--ground);color:var(--bone);transition:border-color .15s}
.wl input::placeholder{color:var(--ph)}
.wl select{appearance:none;background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2388897F' stroke-width='1.4'/%3E%3C/svg%3E") right 12px center/12px no-repeat;padding-right:32px}
.wl textarea{min-height:90px;resize:vertical}
.wl input:hover,.wl select:hover{border-color:var(--rule-strong)}
.wl input:focus,.wl select:focus,.wl textarea:focus{outline:0;border-color:var(--faint)}
.wl .row2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:14px}
.wl .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wl .btn{min-height:42px;font-size:14px;margin-top:4px}
.wl .msg{font-size:14px;min-height:20px;color:var(--dim)}
.wl .msg.ok{color:var(--good)} .wl .msg.err{color:var(--bad)}
.wl small{font-size:13px;color:var(--faint)}
.wl small a{color:var(--dim)}

/* ---------- architecture strip ---------- */
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:0;margin-top:48px;border:1px solid var(--rule)}
.arch > div{padding:32px;border-right:1px solid var(--rule)}
.arch > div:last-child{border-right:0}
@media (max-width:900px){.arch > div{border-right:0;border-bottom:1px solid var(--rule)}.arch > div:last-child{border-bottom:0}}
.arch .lvl{font:400 12px var(--mono);color:var(--faint)}
.arch h3{font-size:20px;margin-top:10px}
.arch p{font-size:15px;color:var(--dim);margin-top:10px}
.arch .paid{background:var(--raised)}

/* ---------- docs + articles ---------- */
.doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;margin-top:40px}
/* minmax(0,1fr), not 1fr: a 1fr track grows to its widest code block (a <pre> line of 1,400px), and a phone then laid
   the docs out 839px wide and zoomed out */
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr);gap:24px}}
.toc{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:0;font-size:14px;max-height:calc(100vh - 120px);overflow:auto;border-left:1px solid var(--rule)}
@media (max-width:900px){.toc{position:static;flex-direction:row;flex-wrap:wrap;gap:4px;border-left:0;max-height:none}}
.toc b{font:500 12px var(--sans);color:var(--bone);margin:18px 0 6px 16px}
.toc b:first-child{margin-top:0}
.toc a{color:var(--faint);text-decoration:none;padding:5px 16px;margin-left:-1px;border-left:1px solid transparent;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--bone);border-left-color:var(--accent)}
@media (max-width:900px){.toc b{margin:8px 0 2px;width:100%}.toc a{padding:4px 10px;border:1px solid var(--rule);margin:0}}
.prose{max-width:74ch;font-size:16px;line-height:1.75;color:var(--dim)}
/* inline code (a long URL, a <meta> tag) wraps on a phone instead of widening the page; code blocks scroll */
.prose :not(pre) > code{overflow-wrap:anywhere}
.prose h2{font-size:28px;color:var(--bone);margin:64px 0 16px;letter-spacing:-.02em;line-height:1.15}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;color:var(--bone);margin:36px 0 10px}
.prose h4{font-size:16px;font-weight:500;color:var(--bone);margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--faint)}
.prose strong{color:var(--bone);font-weight:500}
.prose a{color:var(--bone);text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.prose a:hover{text-decoration-color:var(--accent)}
.prose code{background:var(--raised2);border:1px solid var(--rule);color:var(--bone);padding:1px 5px;font-size:.86em}
.prose pre{background:var(--raised);border:1px solid var(--rule);margin:0 0 22px;font-size:13.5px}
.prose pre code{background:none;border:0;color:inherit;padding:0;font-size:inherit}
.prose blockquote{border-left:2px solid var(--accent);padding:4px 0 4px 18px;margin:0 0 16px;color:var(--bone)}
.prose table{font-size:14.5px;margin-bottom:22px;display:block;overflow-x:auto}
.prose hr{border:0;border-top:1px solid var(--rule);margin:40px 0}
.prose img{border:1px solid var(--rule)}

/* ---------- GenClass Cloud dashboard preview ---------- */
.app{border:1px solid var(--rule-strong);background:var(--ground);overflow:hidden;margin-top:48px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 40px 120px -40px rgba(47,208,127,.12)}
.app-top{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--raised);font-size:13px;color:var(--dim);flex-wrap:wrap}
.app-top .dots{display:flex;gap:6px}.app-top .dots i{width:9px;height:9px;background:var(--rule-strong);display:block}
.app-top .url{font:12px var(--mono);border:1px solid var(--rule);background:var(--ground);padding:4px 10px;color:var(--faint)}
.app-top .sample{margin-left:auto}
.app-body{display:grid;grid-template-columns:220px minmax(0,1fr)}
@media (max-width:900px){.app-body{grid-template-columns:1fr}.app-side{display:none}}
.app-side{border-right:1px solid var(--rule);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:var(--raised)}
.proj{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;border-bottom:1px solid var(--rule);margin-bottom:10px}
.proj img{width:24px;height:24px}
.proj b{font:500 14px var(--sans);display:block;color:var(--bone)}
.proj span{font:12px var(--mono);color:var(--faint)}
.app-side button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:8px 10px;font:400 14px var(--sans);color:var(--dim);border-left:1px solid transparent}
.app-side button svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.app-side button:hover{background:var(--raised2);color:var(--bone)}
.app-side button[aria-current="true"]{background:var(--raised2);color:var(--bone);border-left-color:var(--accent)}
.app-side button:focus-visible{outline:1px solid var(--accent)}
.app-main{padding:22px;min-width:0}
.app-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.app-head h3{font:500 20px var(--display)}
.app-head .ctl{display:flex;gap:8px;flex-wrap:wrap}
.sel{font:400 13px var(--sans);border:1px solid var(--rule);padding:6px 10px;color:var(--dim)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:0;margin-top:18px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.kpi{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 16px}
.kpi .k{font:400 12.5px var(--sans);color:var(--faint)}
.kpi .v{font:400 28px var(--display);letter-spacing:-.04em;margin-top:4px;font-variant-numeric:tabular-nums;color:var(--bone)}
.kpi .d{font:12px var(--mono);margin-top:2px}
.panels{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px;margin-top:10px}
@media (max-width:900px){.panels{grid-template-columns:1fr}}
.pnl{border:1px solid var(--rule);padding:16px;min-width:0}
.pnl h4{font:500 14px var(--sans);display:flex;justify-content:space-between;gap:8px}
.pnl h4 span{font:12px var(--mono);color:var(--faint);font-weight:400}
.spark{display:flex;align-items:flex-end;gap:3px;height:150px;margin-top:14px;border-bottom:1px solid var(--rule)}
.spark i{flex:1;background:var(--accent);opacity:.85;min-height:2px}
.spark i.r{background:var(--bad)}
.axisx{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--faint);margin-top:6px}
.cat{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.cat .r{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:5px;color:var(--dim)}
.cat .r b{font:500 13px var(--mono);color:var(--bone)}
.cat .t{height:6px;background:var(--raised2);overflow:hidden}
.cat .t i{display:block;height:100%;background:var(--accent)}
.feed{margin-top:10px;display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:70px auto minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:13.5px;align-items:center}
.ev:first-child{border-top:0}
.ev .tm{font:12px var(--mono);color:var(--faint)}
.ev .msg{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.ev{grid-template-columns:1fr auto}.ev .tm,.ev .msg{display:none}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:24px}}
.rel{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.rel th{font:500 11.5px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--rule)}
.rel td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--dim)}
.toggle i{width:30px;height:16px;background:var(--accent-fill);position:relative;display:block}
.toggle i::after{content:"";position:absolute;right:2px;top:2px;width:12px;height:12px;background:var(--accent-ink)}
.toggle.off i{background:var(--rule-strong)}.toggle.off i::after{right:auto;left:2px;background:var(--faint)}
.view[hidden]{display:none}
.app-note{font-size:12.5px;color:var(--faint);padding:10px 22px 16px}

/* ---------- home: hero over the self-healing mesh (public/mend.js) ---------- */
.hero4{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--rule);text-align:center;padding:120px 0 136px;min-height:min(calc(100vh - 64px),860px);min-height:min(calc(100svh - 64px),860px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:700px){.hero4{padding:72px 0 120px;min-height:0}}
.hero4 > .wrap{position:relative;z-index:2;width:100%}
.hero4 .mend{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.hero4::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(46% 52% at 50% 46%,rgba(var(--veil),.82),rgba(var(--veil),.45) 60%,transparent 82%)}
.hero4 .mend-cap{position:absolute;right:16px;bottom:12px;z-index:2;margin:0;font:11px/1.4 var(--mono);color:var(--faint);pointer-events:none}
.hero4 .mend-cap span+span::before{content:" · "}
.hero4 .mend-cap span:empty{display:none}
@media (max-width:640px){.hero4 .mend-cap{left:16px;right:16px;text-align:left}.hero4 .mend-cap span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hero4 .mend-cap span+span::before{content:none}}
.hero4 .kicker{display:inline-block;max-width:100%;font-size:13px;line-height:1.9;color:var(--dim);text-decoration:none;transition:color .15s;margin-bottom:18px}
.hero4 .kicker:hover{color:var(--bone)}
.hero4 .kicker b{display:inline-block;font:500 11.5px/1.5 var(--mono);background:var(--accent);color:var(--accent-ink);padding:1px 6px;margin:0 6px;vertical-align:1px}
.hero4 h1{font-size:clamp(38px,5.4vw,64px);line-height:1.12;letter-spacing:-.055em;margin:0 auto;max-width:18ch}
.hero4 h1 em{font-style:normal;color:var(--accent)}
/* the home hero's "Your app works. Until <ending>": the ending is its own line, and public/home.js deletes and retypes
   it in turn with a caret after it, holding the line at the tallest ending's height so nothing under it moves. With
   no script or with reduced motion the first ending stays and no caret is drawn. */
.hero4 h1.until{max-width:22ch}
.hero4 h1.until em{display:block}
@media (max-width:480px){.hero4 h1.until{font-size:clamp(27px,8.5vw,38px)}}
.hero4 h1.until em.rt::after{content:"";display:inline-block;width:.06em;height:.8em;margin-left:.07em;vertical-align:-.04em;background:currentColor;animation:blink 1.06s steps(1) infinite}
.hero4 h1.until em.rt.typing::after{animation:none}
.hero4 .sub{font-size:clamp(16.5px,1.4vw,19px);line-height:1.55;color:var(--dim);margin:28px auto 0;max-width:min(640px,100%)}
/* the buttons, centred: the hero's two (Get started, See it live) and the closing one; full width on a phone */
.cta2{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:44px auto 0}
.cta2 .btn{min-width:180px}
/* in the hero the buttons box hugs the buttons, so the mesh (public/mend.js) stays open beside them */
.hero4 .cta2{width:max-content;max-width:100%}
@media (max-width:480px){.cta2,.hero4 .cta2{flex-direction:column;align-items:stretch;width:100%}.cta2 .btn{width:100%}}
.install{display:flex;justify-content:center;width:max-content;max-width:100%;margin:16px auto 0}
.install .cmd{width:auto}
/* the hero's install command, one quiet line under the buttons */
.hero4 .install{margin-top:20px}
.hero4 .install .cmd{min-height:48px;gap:28px;padding:0 18px;border-color:var(--rule-strong);background:var(--raised2);color:var(--bone);font-size:15.5px}
.hero4 .install .cmd:hover{border-color:var(--accent)}

/* ---------- home: bento with glowing seams ---------- */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);margin-top:56px}
.cell{position:relative;padding:40px;min-width:0}
.cell.w2{grid-column:span 2}
.cell.w3{grid-column:1/-1}
.cell.top{border-bottom:1px solid var(--rule)}
.cell h3{font-size:24px;line-height:1.15;letter-spacing:-.025em;max-width:16ch}
.cell p{font-size:15px;color:var(--dim);margin-top:18px;max-width:40ch}
.cell p code{color:var(--bone)}
.cell.split2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:center}
.cell.split2.rev{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.seam::after{content:"";position:absolute;top:0;bottom:0;width:2px;z-index:1;background:linear-gradient(to bottom,transparent,rgba(47,208,127,.9) 18%,var(--accent) 50%,rgba(47,208,127,.9) 82%,transparent);box-shadow:0 0 14px 1px rgba(47,208,127,.45);background-size:100% 220%;animation:seam 6s ease-in-out infinite alternate}
.seam.r::after{right:-1px}
.seam.l::after{left:-1px}
@keyframes seam{from{background-position:0 0}to{background-position:0 100%}}
@media (max-width:980px){
  .bento{grid-template-columns:1fr}
  .cell.w2,.cell.w3{grid-column:auto}
  .cell{border-bottom:1px solid var(--rule)}
  .cell:last-child{border-bottom:0}
  .cell.split2,.cell.split2.rev{grid-template-columns:1fr}
  .seam::after{content:none}
}
@media (max-width:620px){.cell{padding:24px}}
.stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:32px;list-style:none;font-size:15px;color:var(--bone)}
.stack li{display:flex;align-items:center;gap:12px}
.stack li::before{content:"";flex:none;width:18px;height:18px;border:1px solid var(--rule-strong);background:linear-gradient(135deg,transparent 50%,var(--rule-strong) 50%)}
.stack li:nth-child(3n+2)::before{border-radius:0 18px 0 0;background:var(--rule-strong);border:0}
.stack li:nth-child(3n)::before{background:var(--raised2)}
.catches{list-style:none;margin-top:28px;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.catches li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--bone)}
.catches li span{font:12px var(--mono);color:var(--faint);white-space:nowrap}

/* a small race diagram drawn with divs */
.race{border:1px solid var(--rule-strong);background:var(--ground);font:12px var(--mono);color:var(--faint)}
.race-h{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule)}
.race-h b{font-weight:400;color:var(--bone)}
.race-b{padding:16px 12px 12px;display:flex;flex-direction:column;gap:12px}
.rl2{display:grid;grid-template-columns:82px 1fr;gap:10px;align-items:center}
.rl2 .t{position:relative;height:22px;border-bottom:1px dashed var(--rule)}
.rl2 .t i{position:absolute;top:6px;height:10px;background:var(--bone)}
.rl2.ok .t i{background:var(--accent);box-shadow:0 0 12px rgba(47,208,127,.35)}
.rl2.late .t i{background:repeating-linear-gradient(135deg,var(--bad) 0 5px,#B9402A 5px 10px)}
.race-f{border-top:1px solid var(--rule);padding:9px 12px;color:var(--good);line-height:1.55}
html.js .race .t i{transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)}
html.js .race.in .t i{transform:none}
html.js .race .rl2.late .t i{transition-duration:2.2s;transition-delay:.15s}
html.js .race .race-f{opacity:0;transition:opacity .5s ease 2.3s}
html.js .race.in .race-f{opacity:1}

/* terminal panel */
.term{border:1px solid var(--rule-strong);background:var(--ground);font:13px/1.7 var(--mono);color:var(--bone);min-width:0}
.term-h{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--rule);color:var(--faint);font-size:12px}
.term-h::before{content:"";width:8px;height:8px;border:1px solid var(--rule-strong)}
.term pre{padding:16px 16px 18px;font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}
.term .p{color:var(--faint)} .term .c{color:var(--faint)} .term .k{color:var(--accent)} .term .s{color:var(--good)} .term .o{color:var(--bad)}
.caret{display:inline-block;width:.6em;height:1.1em;vertical-align:-.2em;background:var(--bone);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- home: setup steps + terminal ---------- */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:56px;margin-top:56px;align-items:start}
@media (max-width:980px){.setup{grid-template-columns:1fr;gap:32px}}
.steps2{list-style:none;border-top:1px solid var(--rule)}
.steps2 li{border-bottom:1px solid var(--rule);position:relative}
.steps2 button{all:unset;cursor:pointer;display:flex;align-items:center;gap:22px;width:100%;padding:20px 22px;box-sizing:border-box;font:400 18px var(--display);letter-spacing:-.015em;color:var(--faint);transition:color .2s}
.steps2 button:hover{color:var(--bone)}
.steps2 button:focus-visible{outline:1px solid var(--accent);outline-offset:-1px}
.steps2 .n{font:400 12px var(--mono);color:var(--faint);width:18px}
.steps2 li.on .n{color:var(--accent)}
.steps2 .body{display:none;padding:0 22px 22px 62px;font-size:14.5px;color:var(--dim)}
.steps2 .body code{color:var(--bone)}
.steps2 .body a{display:inline-block;margin-top:14px;color:var(--bone);font-size:14px;text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.steps2 li.on button{color:var(--bone);font-size:20px}
.steps2 li.on .body,html:not(.js) .steps2 .body{display:block;animation:fade .4s ease both}
.steps2 li.on::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 14px 1px rgba(47,208,127,.5)}
.setup .term{min-height:360px}
.setup .term pre{min-height:300px}

/* ---------- home: four columns ---------- */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px;margin-top:56px}
@media (max-width:1080px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.four{grid-template-columns:1fr}}
.four .pic{border:1px solid var(--rule);height:144px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:var(--ground);position:relative;overflow:hidden}
.four .pic .big{font-size:clamp(36px,3.4vw,48px)}
.four .pic .big.g{color:var(--accent);text-shadow:0 0 28px rgba(47,208,127,.3)}
.four .pic small{font:11.5px/1.5 var(--mono);color:var(--faint)}
.four h3{font-size:20px;margin-top:22px}
.four p{font-size:14.5px;color:var(--dim);margin-top:10px}

/* ---------- home: FAQ and closing CTA ---------- */
.faq2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:32px 48px}
@media (max-width:900px){.faq2{grid-template-columns:1fr}}
.faq2 h2{font-size:clamp(30px,3.2vw,40px);line-height:1.15;max-width:12ch}
.faq2 .list{border-top:1px solid var(--rule)}
.cta-end{position:relative;isolation:isolate;overflow:hidden;padding:128px 0;margin-top:128px;border-top:1px solid var(--rule);text-align:center}
.cta-end::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 70% at 50% 100%,rgba(47,208,127,.12),transparent 70%)}
main:has(> .cta-end:last-child) + .foot-wrap{margin-top:0}
.cta-end .in{max-width:576px;margin:0 auto}
.cta-end h2{font-size:clamp(30px,3.2vw,40px)}
.cta-end p{color:var(--dim);margin:16px auto 0;max-width:46ch}
.cta-end .cta2{margin:32px auto 0}
.cta-end .install{margin:16px auto 0}

/* ---------- live lab (home) ---------- */
.lab{margin:56px auto 0;border:1px solid var(--rule-strong);background:var(--ground);overflow:hidden;text-align:left}
.lab-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--rule);background:var(--raised)}
.lab-title{font:500 14px var(--sans);color:var(--bone);padding:4px 4px 4px 0}
.lab-chip{font:400 12px var(--mono);color:var(--bad);border:1px solid rgba(255,90,54,.35);background:var(--bad-t);padding:3px 8px;white-space:nowrap}
.lab-chip-link{font:400 12.5px var(--mono);color:var(--dim);padding:0 6px;text-underline-offset:3px}
.lab-live{margin-left:auto;display:flex;align-items:center;gap:8px;font:400 12.5px var(--mono);color:var(--dim);padding:0 4px}
.lab-live i{width:7px;height:7px;background:var(--faint)}
.lab.is-ready .lab-live{color:var(--accent)}
.lab.is-ready .lab-live i{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blink 2.4s ease-in-out infinite}
.lab-intro{font-size:13.5px;color:var(--faint);padding:14px 24px 0}
.lab-body{display:grid;grid-template-columns:minmax(0,1fr) 340px}
@media (max-width:980px){.lab-body{grid-template-columns:1fr}}
.lab-foot{font-size:13px;color:var(--faint);padding:14px 24px;border-top:1px solid var(--rule);background:var(--raised)}
.lab-foot a{color:var(--dim)}
.lab-foot code{color:var(--bone)}
.dup{padding:24px;border-bottom:1px solid var(--rule)}
.dup-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:20px}
.dup-head h3,.radar-app h3{font-size:clamp(20px,2vw,24px);line-height:1.15}
.dup-head p,.radar-app p{font-size:14.5px;color:var(--dim);margin-top:8px;max-width:62ch}
.dup-go{min-width:180px}
.dup-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px}
.inv{border:1px solid var(--rule);padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color .25s,background .25s}
.inv.bad{border-color:rgba(255,90,54,.6);background:var(--bad-t)}
.inv.good{border-color:rgba(47,208,127,.55);background:var(--good-t)}
.inv-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag-off,.tag-on{font:500 11.5px var(--mono);letter-spacing:.03em;text-transform:uppercase;padding:3px 8px}
.tag-off{border:1px solid var(--rule-strong);color:var(--faint)} .tag-on{background:var(--accent-fill);color:var(--accent-ink)}
.btn.sm{min-height:34px;font-size:13.5px;padding:0 12px}
.inv-box{border:1px solid var(--rule);overflow:hidden;min-height:170px;background:var(--ground)}
.inv-box-h{font:400 12px var(--mono);color:var(--faint);padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--raised)}
.inv-box ul{list-style:none}
.inv-box li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:10px 12px;border-bottom:1px solid var(--rule);font-size:14px;animation:inv-in .35s ease-out}
.inv-box li.inv-empty{display:block;color:var(--faint);font-size:13.5px;border:0;animation:none}
.inv-from{font-weight:500;color:var(--bone)}
.inv-subj{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-t{font:12px var(--mono);color:var(--faint)}
.inv-box li.dup{background:var(--bad-t);padding:10px 12px;border-bottom:1px solid var(--rule)}
.inv-box li.dup .inv-t{color:var(--bad);font-weight:500}
@keyframes inv-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.inv-verdict{min-height:22px;font-size:14px;color:var(--dim)}
.inv.bad .inv-verdict b{color:var(--bad)} .inv.good .inv-verdict b{color:var(--accent)}
.inv-verdict b{font:500 17px var(--display);margin-right:4px}
.dup-quote{margin-top:14px;font:12.5px/1.55 var(--mono);color:var(--dim);background:var(--raised);border:1px solid var(--rule);border-left:2px solid var(--accent);padding:10px 12px;overflow-wrap:anywhere}
.dup-quote b{color:var(--accent);font-weight:500}
.radar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media (max-width:900px){.radar{grid-template-columns:1fr}}
.radar-app{padding:24px;min-width:0}
.radar-ctl{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.radar-ctl input,.lab-ctl input{flex:1 1 220px;font:400 15px var(--sans);min-height:46px;padding:0 14px;border:1px solid var(--rule);border-radius:0;background:var(--ground);color:var(--bone)}
.radar-ctl input::placeholder{color:var(--ph)}
.radar-ctl input:focus,.lab-ctl input:focus{outline:0;border-color:var(--faint)}
.radar-mini{display:flex;flex-direction:column;gap:8px}
.radar-mini>div{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border:1px solid var(--rule);padding:10px 12px;font-size:14px}
.mini-k{font:12px var(--mono);color:var(--faint);min-width:92px}
.radar-mini b{font-weight:500}
.radar-mini b.bad{color:var(--bad)}
.radar-mini .btn{margin-left:auto}
.mini-flag{font:12px var(--mono);padding:2px 8px}
.mini-flag.bad{background:var(--bad-t);color:var(--bad)} .mini-flag.good{background:var(--good-t);color:var(--accent)}
.radar-feed{background:var(--raised);border-left:1px solid var(--rule);padding:18px;min-width:0;display:flex;flex-direction:column;gap:12px}
@media (max-width:900px){.radar-feed{border-left:0;border-top:1px solid var(--rule)}}
.radar-feed-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:12.5px var(--mono);color:var(--faint)}
.radar-feed-h>b{font:500 14px var(--sans);color:var(--bone)}
.radar-feed-h span b{color:var(--bone);font-weight:500}
#gc-feed{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:380px;overflow:auto}
#gc-feed .feed-empty{font-size:13.5px;color:var(--faint);border:1px dashed var(--rule-strong);padding:14px}
.bug{border:1px solid var(--rule);border-left:2px solid var(--warn);background:var(--ground);padding:11px 12px;font-size:13.5px;animation:inv-in .35s ease-out}
.bug.fixed{border-left-color:var(--accent)}
.bug-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bug-top b{font-weight:500;color:var(--bone)}
.bug-conf{font:12px var(--mono);color:var(--warn);white-space:nowrap}
.bug.fixed .bug-conf{color:var(--accent)}
.bug-bar{height:2px;background:var(--rule);margin:8px 0}
.bug-bar i{display:block;height:100%;background:var(--warn)}
.bug.fixed .bug-bar i{background:var(--accent)}
.bug-subj{font:12px var(--mono);color:var(--faint);overflow-wrap:anywhere}
.bug-ev{font-size:13px;color:var(--dim);margin-top:6px}
.bug-out{font:12.5px var(--mono);color:var(--faint);margin-top:6px}
.bug.fixed .bug-out{color:var(--accent)}
.bug details{border:0;padding:0;margin:0;background:none}
.bug details summary{display:block;font:500 12px var(--mono);color:var(--dim);cursor:pointer;margin-top:6px;min-height:0;padding:0;border:0}
.bug details summary::after,.bug details summary::before{content:none}
.bug pre{font:11px/1.45 var(--mono);white-space:pre-wrap;background:var(--raised2);border:1px solid var(--rule);color:var(--bone);padding:8px;margin-top:6px;max-height:220px;overflow:auto}
.bug-n{font:500 11.5px var(--mono);color:var(--faint);margin-left:auto}
.bug-n:empty,.bug-ev:empty{display:none}
@media (prefers-reduced-motion:reduce){.inv-box li{animation:none}}

/* older lab inspector (kept for partials that still use it) */
.lab-stage{padding:20px;min-width:0}
.lab-hint{font-size:14.5px;color:var(--dim);margin-bottom:14px;max-width:70ch}
.lab-ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.lab-note{font:13px var(--mono);color:var(--faint)}
.lab-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:12px;margin-bottom:14px}
.lane2{border:1px solid var(--rule);padding:14px;min-height:210px;display:flex;flex-direction:column;gap:8px}
.lane2.gc{border-color:rgba(47,208,127,.4)}
.lane2.stale{border-color:var(--bad);background:var(--bad-t)}
.lane2-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px}
.lane2-h span,.lane2-for{font:12px var(--mono);color:var(--faint)}
.lane2-for code{color:var(--bone)}
.lane2 ul{list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14px}
.lane2 li{padding:6px 9px;background:var(--raised2)}
.lane2.stale li{background:var(--bad-t)}
.lane2-st{font:12.5px var(--mono);color:var(--faint);margin-top:auto}
.lane2.stale .lane2-st{color:var(--bad)}
.lane2-big{font-size:14px;color:var(--dim)}
.lane2-big b{font:400 30px var(--display);color:var(--bone);margin-right:6px}
.lane2.stale .lane2-big b{color:var(--bad)}
.lane2 .btn{align-self:flex-start}
.lab-insp{border-left:1px solid var(--rule);background:var(--raised);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:980px){.lab-insp{border-left:0;border-top:1px solid var(--rule)}}
.insp-h{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.pill2{font:500 11.5px var(--mono);padding:3px 9px;border:1px solid var(--rule-strong);color:var(--dim)}
.pill2.ready{border-color:rgba(47,208,127,.35);color:var(--accent)} .pill2.error,.pill2.unavailable{border-color:rgba(255,90,54,.4);color:var(--bad)}
.insp-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.insp-kv div{border:1px solid var(--rule);padding:8px 10px;min-width:0}
.insp-kv dt{font:11.5px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.insp-kv dd{font:500 13px var(--sans);margin-top:2px;overflow-wrap:anywhere}
.insp-ctl{display:flex;gap:6px;flex-wrap:wrap}
.insp-ctl button{all:unset;cursor:pointer;font:400 12.5px var(--mono);padding:7px 10px;border:1px solid var(--rule-strong);color:var(--dim)}
.insp-ctl button[aria-pressed="true"]{background:var(--accent-fill);color:var(--accent-ink);border-color:var(--accent-fill)}
.insp-ctl button:focus-visible{outline:1px solid var(--accent)}
.insp-ctl select{font:400 12.5px var(--mono);border:1px solid var(--rule-strong);padding:6px 8px;background:var(--ground);color:var(--bone)}
.insp-feed{list-style:none;display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;font:12.5px/1.45 var(--mono)}
.insp-feed li{padding:8px 10px;border:1px solid var(--rule);overflow-wrap:anywhere}
.insp-feed li.act{border-color:rgba(47,208,127,.4);background:var(--good-t)}
.insp-feed li.exp{opacity:.75}
.insp-feed .k{color:var(--bone);font-weight:500} .insp-feed .ok{color:var(--accent);font-weight:500} .insp-feed .mut{color:var(--faint)} .insp-feed .subj{display:block;color:var(--faint);font-size:11.5px}
.insp-feed details summary{font:500 11.5px var(--mono);color:var(--dim);padding:4px 0 0;min-height:0}
.insp-feed details summary::before{content:none}
.insp-feed pre{font:11px/1.45 var(--mono);white-space:pre-wrap;background:var(--raised2);border:1px solid var(--rule);padding:8px;margin-top:6px;max-height:220px;overflow:auto}
.insp-foot{font-size:12px;color:var(--faint)}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:36px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-size:14px;color:var(--dim)}
.trust b{color:var(--bone);font-weight:500}
.trust a{color:var(--dim);text-decoration:none} .trust a:hover{color:var(--bone)}
.trust-note{font:12px/1.6 var(--mono);color:var(--faint);margin:14px auto 0;max-width:86ch}
.trust-note a{color:var(--dim)}
.codetabs{margin-top:28px}
.final{margin-top:96px;border:1px solid var(--rule);padding:56px 32px;text-align:center}
.final h2{font-size:clamp(26px,3vw,38px);max-width:24ch;margin:0 auto}
.final p{color:var(--dim);margin:12px auto 0;max-width:56ch}
.final .ctas{justify-content:center;margin-top:24px}

/* ---------- main's components (plans, page check, GenClass Vision, before/after, enterprise), recoloured for black ---------- */
.fcard .fnum{font:12px/1.5 var(--mono);color:var(--ink3);margin-top:auto;padding-top:12px;text-wrap:balance}
.fcard .fnum b{color:var(--ink);font-weight:600}
.disclose{font-size:14.5px;color:var(--ink2);margin-top:16px;max-width:76ch}
.disclose a{color:var(--ink);white-space:nowrap}
.console.first{margin-top:28px}
.console.first div{white-space:pre-wrap;overflow-wrap:anywhere}
.console.first div+div{margin-top:6px}
.price-hero h1{max-width:26ch}
.price-sec{padding-top:40px}
.plans{display:grid;grid-template-columns:repeat(var(--plans,3),minmax(0,1fr));border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule-strong)}
.plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding:18px 28px 12px;border-left:1px solid var(--rule);min-width:0}
.plan:first-child{border-left:0;padding-left:0}
.plan:last-child{padding-right:0}
.plan-k{font:500 12.5px var(--mono);color:var(--ink3)}
.plan h3{font:500 26px/1.1 var(--display);letter-spacing:-.02em;margin-top:8px}
.plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px}
.plan-price b{font:400 48px/1 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.plan-price span{font:500 14px var(--sans);color:var(--ink3)}
/* a price in words (Enterprise: By agreement) sits on the numbers' line at a size that fits a third of the row */
.plan-price b.words{font-size:clamp(26px,2.6vw,40px);line-height:48px;letter-spacing:-.03em}
.plan-sum{font-size:15px;color:var(--ink2);margin-top:14px;max-width:36ch}
.plan-cta{margin-top:22px}
.plan-cta .btn{width:100%}
.plan-cta .btn.off{cursor:default;color:var(--ink3);border-style:dashed}
.plan-cta .btn.off:hover{border-color:var(--rule2)}
.plan-cta p{font-size:13.5px;line-height:1.5;color:var(--ink3);margin-top:10px;max-width:38ch}
.plan-feat{list-style:none;margin-top:24px;border-top:1px solid var(--rule-strong);font-size:15px;color:var(--ink2)}
.plan-feat li{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule)}
.plan-feat li:last-child{border-bottom:0}
.plan-feat li::before{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.plan-feat li.inc{font:500 12px/1.5 var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0 10px}
.plan-feat li.inc::before{display:none}
.plan-feat li.soon{color:var(--ink3)}
.plan-feat li.soon::before{background:var(--faint);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='2.2 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.2' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='2.2 2'/%3E%3C/svg%3E")}
.plan-feat li.soon em{font:500 12.5px var(--mono);font-style:normal;white-space:nowrap}
.plans-more{padding:16px 0 0;font-size:15.5px;color:var(--ink2)}
.plans-more a{color:var(--ink);font-weight:500;text-underline-offset:3px}
@media (max-width:860px){.plans{grid-template-columns:1fr;border-top:0;border-bottom:0}.plan{display:block;padding:18px 0 4px;border-left:0;border-top:1px solid var(--rule-strong)}.plan + .plan{margin-top:36px}.plan:last-child{border-bottom:1px solid var(--rule-strong)}.plan-sum,.plan-cta p{max-width:none}}
.pnotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));border-top:1px solid var(--rule-strong);margin-top:32px}
.pnotes > div{padding:20px 24px 20px 0}
.pnotes > div + div{padding-left:24px;border-left:1px solid var(--rule)}
@media (max-width:620px){.pnotes > div + div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}
.pnotes h3{font:600 17px/1.35 var(--sans);letter-spacing:-.01em}
.pnotes p{font-size:15px;color:var(--ink2);margin-top:6px}
.ent{margin-top:32px;border-top:1px solid var(--rule-strong)}
.ent-h,.ent-r{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,2fr) minmax(0,1.3fr);gap:8px 32px}
.ent-h{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;padding:12px 0;border-bottom:1px solid var(--rule-strong)}
.ent-r{padding:18px 0;border-bottom:1px solid var(--rule)}
.ent-r h3{font:600 17px/1.4 var(--sans);letter-spacing:-.01em}
.ent-r p{font-size:15px;color:var(--ink2)}
.ent-r a{color:var(--ink)}
.ent-l{display:none}
@media (max-width:760px){.ent-h{display:none}.ent-r{grid-template-columns:1fr;gap:6px}.ent-l{display:block;font:500 11.5px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}}
.vis .sh h2{font-size:clamp(30px,4.3vw,54px);line-height:1.06;letter-spacing:-.03em;max-width:21ch}
.vis .intro{font-size:clamp(16.5px,1.35vw,18.5px);max-width:62ch}
.scanbox{margin-top:30px;max-width:780px}
.scanbox label{display:block;font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.scanbox-row{display:flex;gap:10px}
.scanbox input{flex:1 1 auto;min-width:0;font:400 19px var(--sans);min-height:58px;padding:0 18px;border:1px solid var(--rule-strong);border-radius:0;background:var(--ground);color:var(--bone)}
.scanbox input::placeholder{color:var(--ink3);opacity:1}
.scanbox input:focus{outline:0;border-color:var(--accent)}
.scanbox input[aria-invalid="true"]{border-color:var(--orange)}
.scanbox .btn{min-height:58px;padding:0 30px;font-size:17px;flex:none}
.scanbox-msg{min-height:22px;margin-top:8px;font-size:14.5px;color:var(--ink2)}
.scanbox-msg[data-state="error"]{color:var(--orange)}
.scanbox-help{font-size:14px;color:var(--ink2);max-width:72ch}
.scanbox-help a{color:var(--ink);white-space:nowrap}
.vart{display:block;width:100%;height:auto}
.vspec-fig{margin-top:56px}
.vspec{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px 20px;border-top:1px solid var(--rule-strong);padding-top:22px}
.vspec h3{font:600 15.5px/1.3 var(--sans);letter-spacing:-.005em;min-height:2.6em;margin-bottom:10px;text-wrap:balance}
.vspec p{font-size:14px;line-height:1.5;color:var(--ink2);margin-top:10px}
.vspec code{display:block;font:12px var(--mono);color:var(--ink3);margin-top:6px;overflow-wrap:anywhere}
.vspec .vnone{font:500 12px var(--mono);color:var(--orange);margin-top:4px}
.vspec-fig figcaption,.vfam-fig figcaption{max-width:90ch;margin-top:22px}
.vspec-fig figcaption a,.vfam-fig figcaption a{color:var(--ink);white-space:nowrap}
.vnote{margin-top:22px}
.vstate{margin-top:30px;max-width:780px;border-top:1px solid var(--rule-strong)}
.vstate>div{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:4px 20px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule)}
.vstate dt{font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em}
.vstate dd{font-size:15.5px;line-height:1.45;color:var(--ink)}
.vstate dd a{color:var(--ink)}
.vstate .due{padding:16px 0 18px}
.vstate .due dd{font:400 clamp(26px,2.7vw,36px)/1.1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;text-wrap:balance}
.vstate .due dd .vsample{font-family:var(--mono);letter-spacing:0}
.vwhen{white-space:nowrap}
.vbars{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.vrow{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:6px 18px;align-items:center}
.vrow .vn{font-size:14.5px;line-height:1.35;color:var(--ink)}
.vpair{display:flex;flex-direction:column;gap:2px}
.vb{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:10px;align-items:center}
.vb .t{height:10px;background:var(--raised2);overflow:hidden}
.vb .t i{display:block;height:100%;min-width:2px}
.vb .t i.a{background:var(--accent)}
.vb .t i.c{background:var(--faint)}
.vb b{font:500 13px var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
details.tview{border-top:0;margin-top:14px}
details.tview summary{display:inline-flex;justify-content:flex-start;align-items:center;gap:8px;min-height:44px;padding:0;font:500 13px var(--mono);color:var(--ink2)}
details.tview summary::after{font-size:15px}
details.tview .tbl-wrap{margin-top:4px}
.vtbl td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vtbl td.n,.vtbl th:not(:first-child){text-align:right}
.vtbl.vspec-t td:last-child{color:var(--ink2);font-size:14px;text-align:left}
.vtfig{margin-top:40px}
.vtfig + .vtfig{margin-top:48px}
.vtfig figcaption{font-size:14px;color:var(--ink2);max-width:90ch;margin:0}
.vtfig figcaption b{color:var(--ink);font-weight:600}
.vtfig .tbl-wrap{margin-top:16px}
.vmodel{border-top:1px solid var(--rule-strong);padding-top:20px}
.vmodel p{font-size:15px;color:var(--ink2)}
.vmodel p + p{margin-top:12px}
.vmodel b{color:var(--ink);font-weight:600}
.vmodel a{color:var(--ink)}
.vsample{display:inline-block;margin-left:8px;font:500 11.5px var(--mono);color:var(--orange);background:var(--orange-t);padding:2px 7px;vertical-align:1px;white-space:nowrap}
.vstatus{margin-top:28px}
.vfam-fig{margin-top:40px}
.vfam{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(480px,100%),1fr));gap:0 48px;border-top:1px solid var(--rule-strong)}
.vfam > div{display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:6px 22px;padding:22px 0;border-bottom:1px solid var(--rule);align-content:start}
.vfam .vart{grid-row:1/span 3}
.vfam h3{font:600 17px/1.3 var(--sans);letter-spacing:-.005em}
.vfam p{font-size:14.5px;line-height:1.55;color:var(--ink2)}
.vfam p.chk{font:12px/1.7 var(--mono);color:var(--ink3);align-self:start}
.vfam p.chk code{color:var(--ink);font-size:12px;white-space:nowrap}
.vsteps .step p code{font-size:.88em;background:var(--raised2);border:1px solid var(--rule);padding:1px 5px}
.vlim{list-style:none;margin-top:28px;border-top:1px solid var(--rule-strong);max-width:900px}
.vlim li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink2)}
.vlim li b{color:var(--ink);font-weight:600}
.vsrc{margin-top:36px;font-size:14px;color:var(--ink2);max-width:900px}
.vsrc b{display:block;font:500 12px var(--mono);color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.vsrc ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.vsrc a{color:var(--ink)}
.vsrc span{color:var(--ink3)}
.vsrc span::before{content:"· "}
#visual .vspec{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.vspec,#visual .vspec{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.scanbox{margin-top:24px}.vstate{margin-top:24px}.vstate>div{grid-template-columns:1fr;padding:11px 0}.vstate .due{padding:12px 0 14px}.scanbox input{font-size:17px;min-height:54px;padding:0 14px}.scanbox .btn{min-height:54px;padding:0 20px;font-size:16px}.vspec-fig{margin-top:40px}.vspec,#visual .vspec{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px;padding-top:18px}.vspec h3{font-size:14.5px}.vspec p{font-size:13.5px}.vrow{grid-template-columns:1fr}.vtbl{font-size:14px}.vtbl th{letter-spacing:.04em}.vtbl th,.vtbl td{padding-right:10px}.vfam > div{grid-template-columns:112px minmax(0,1fr);gap:4px 14px;padding:18px 0}.vfam .vart{grid-row:1/span 2}.vfam p.chk{grid-column:1/-1;margin-top:4px}}
.vnums-fig{margin-top:56px}
.vnums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.vnums>div{padding:20px 24px 22px 0;min-width:0}
.vnums>div+div{padding-left:24px;border-left:1px solid var(--rule)}
.vnums b{display:block;font:400 clamp(36px,3.6vw,52px)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.vnums p{font-size:15px;line-height:1.5;color:var(--ink2);margin-top:12px}
.vnums small{display:block;font:12px/1.5 var(--mono);color:var(--ink3);margin-top:10px}
.vnums-fig figcaption{font-size:14px;color:var(--ink2);max-width:90ch;margin-top:14px}
.vnums-fig figcaption a{color:var(--ink);white-space:nowrap}
.vkey{margin-top:24px}
.vtbl tr.hl td{background:var(--panel)}
.vtfig .note{margin-top:12px}
.vview{font:500 11.5px var(--mono);color:var(--ink3);margin-left:4px;white-space:nowrap}
.vcrawl{margin-top:48px}
.vcrawl+.vmodel{margin-top:36px}
.vmodel-none{margin-top:48px;max-width:900px}
.vsh2{margin-top:72px}
@media (max-width:1000px){.vnums{grid-template-columns:repeat(2,minmax(0,1fr))}.vnums>div:nth-child(3){padding-left:0;border-left:0}.vnums>div:nth-child(n+3){border-top:1px solid var(--rule)}}
@media (max-width:640px){.vnums-fig{margin-top:36px}.vnums{grid-template-columns:1fr}.vnums{border-bottom:0}.vnums>div,.vnums>div+div,.vnums>div:nth-child(n+3){padding:16px 0 18px;border-left:0;border-top:0;border-bottom:1px solid var(--rule)}.vnums b{font-size:36px}.vnums p{margin-top:8px;font-size:14.5px}.vnums small{margin-top:6px;font-size:11.5px}}
.ba .sh h2{font-size:clamp(30px,4.3vw,54px);line-height:1.06;letter-spacing:-.03em}
.ba-fig{margin-top:32px}
.ba-frame{border:1px solid var(--rule-strong);overflow:hidden;background:#fff;box-shadow:0 40px 120px -50px rgba(47,208,127,.25)}
.ba-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:40px;padding:0 14px;background:var(--panel);border-bottom:1px solid var(--rule);font:500 12px var(--mono)}
.ba-bar b{display:flex;align-items:center;gap:7px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ba-bar b::before{content:"";width:7px;height:7px;background:currentColor}
.ba-lb{color:var(--orange)}
.ba-la{color:var(--blue)}
.ba-url{min-width:0;overflow:hidden;white-space:nowrap;color:var(--ink3);background:var(--ground);border:1px solid var(--rule);padding:3px 16px}
.ba-view{--pos:50;position:relative;container-type:inline-size;aspect-ratio:72.5/38.5;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:ew-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ba-pg{--u:calc(100cqw / 72.5);position:absolute;inset:0;overflow:hidden;font-size:var(--u);line-height:1.4}
.ba-pg>*{position:absolute}
.ba-a{clip-path:inset(0 0 0 calc(var(--pos) * 1%))}
.ba-nav{left:0;right:0;top:0;height:3.3em;padding:0 3em;display:flex;align-items:center;gap:2.4em}
.ba-logo{display:flex;align-items:center;gap:.5em;font-size:1.1em;font-weight:700;white-space:nowrap}
.ba-links{display:flex;gap:1.7em;font-size:.88em}
.ba-in{position:relative;margin-left:auto;font-size:.85em;line-height:1;padding:.62em 1.3em;border-radius:.5em;white-space:nowrap}
.ba-h1{left:calc(var(--u)*3);top:calc(var(--u)*5.3);width:calc(var(--u)*33);font-size:calc(var(--u)*3.2);line-height:1.04}
.ba-sub{left:calc(var(--u)*3);top:calc(var(--u)*13.5);width:calc(var(--u)*29);font-size:calc(var(--u)*1.12);line-height:1.5}
.ba-cta{left:3em;top:18em;display:flex;gap:.8em}
.ba-cta span{display:flex;align-items:center;height:2.9em;padding:0 1.5em;font-size:.95em;white-space:nowrap}
.ba-img{left:37.5em;top:5.2em;width:32em;height:15.6em}
.ba-img svg{display:block;width:100%;height:100%}
.ba-h2{left:calc(var(--u)*3);top:calc(var(--u)*22.8);font-size:calc(var(--u)*1.5);line-height:1.3;white-space:nowrap}
.ba-cards{left:3em;top:25.6em;width:44em;height:8.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}
.ba-card{display:flex;flex-direction:column;gap:.3em;padding:1.1em 1.2em}
.ba-card i{display:grid;place-items:center;width:2em;height:2em;margin-bottom:.35em}
.ba-card b{font-size:1em;line-height:1.2}
.ba-card span{font-size:.8em;line-height:1.35}
.ba-price{left:50em;top:22.8em;width:19.5em;height:11.2em;display:flex;flex-direction:column;align-items:flex-start;gap:.3em;padding:1.3em 1.5em}
.ba-price b{font-size:2.6em;line-height:1.05;white-space:nowrap}
.ba-price small{font-size:.36em;font-weight:500}
.ba-li{font-size:.82em}
.ba-buy{align-self:stretch;margin-top:auto;display:flex;align-items:center;justify-content:center;height:2.9em;font-size:.86em}
.ba-cookie{display:flex;align-items:center}
.ba-b{background:linear-gradient(180deg,#6A11CB 3.3em,#2575FC 10em,#C9D6FF 12.6em,#E2E9FF 14em,#EDF1FF 17em,#fff 21em);font-family:"Times New Roman",Times,serif;color:#222}
.ba-b .ba-nav{background:#111;color:#fff}
.ba-b .ba-logo i{width:1.1em;height:1.1em;border-radius:50%;background:linear-gradient(135deg,#6A11CB,#2575FC)}
.ba-b .ba-links span{color:#8AB4F8;text-decoration:underline}
.ba-b .ba-in{background:#fff;color:#FAFAFA;border-radius:2em}
.ba-b .ba-h1{font-weight:700;color:#fff;text-shadow:0 .06em .12em rgba(0,0,0,.35)}
.ba-b .ba-sub{color:#fff}
.ba-b .ba-cta span{background:linear-gradient(90deg,#6A11CB,#2575FC);color:#fff;border-radius:2em}
.ba-b .ba-img{border:1px solid #A9A9A9}
.ba-broken{display:flex;align-items:center;gap:.3em;padding:.2em;font-size:.85em;color:#fff}
.ba-broken svg{width:1.15em;height:1.15em}
.ba-b .ba-h2{left:calc(var(--u)*2.2);font-weight:700;color:#222}
.ba-b .ba-card{background:#fff;border:1px solid #DDD;border-radius:1.4em;box-shadow:0 .6em 1.6em rgba(106,17,203,.35)}
.ba-b .ba-card i{border-radius:50%;background:linear-gradient(135deg,#6A11CB,#2575FC)}
.ba-b .ba-card:nth-child(2){margin-top:1.3em;align-items:center;text-align:center;border-radius:.3em}
.ba-b .ba-card:nth-child(3){width:84%;margin-left:.6em}
.ba-b .ba-card:nth-child(3) b{font-size:1.12em;white-space:nowrap}
.ba-b .ba-price{left:49.4em;top:23.6em;border:2px solid #6A11CB;border-radius:1.4em;background:#fff;align-items:center}
.ba-b .ba-price b{font-size:2.2em;color:#6A11CB}
.ba-b .ba-buy{background:linear-gradient(90deg,#6A11CB,#2575FC);color:#fff;border-radius:2em}
.ba-b .ba-cookie{left:calc(var(--u)*7);top:calc(var(--u)*17);width:calc(var(--u)*28);flex-wrap:wrap;gap:.55em .6em;padding:.9em 1em;background:#fff;border:1px solid #CCC;box-shadow:0 .4em 1.6em rgba(0,0,0,.3);font:.8em/1.35 Arial,Helvetica,sans-serif;color:#333}
.ba-b .ba-cookie span:first-child{flex-basis:100%}
.ba-b .ba-cookie i{font-style:normal}
.ba-b .ba-cookie span+span{padding:.45em 1em;background:#E4E4E4}
.ba-b .ba-cookie .ba-ok{background:#2563EB;color:#fff}
.ba-a{background:radial-gradient(30em 13em at 54em 13em,rgba(167,139,250,.5),rgba(167,139,250,0) 70%),linear-gradient(180deg,#120D38 3.3em,#2B2391 7em,#4B3BC9 11em,#8F82F3 12.5em,#DAD5FF 13.4em,#F6F4FF 14.8em,#fff 20em);font-family:var(--sans);color:#14123A}
.ba-a .ba-nav{background:#0D0B26;color:#fff}
.ba-a .ba-logo{font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.ba-a .ba-logo svg{width:1.3em;height:1.3em}
.ba-a .ba-links span{color:#B7B4E0}
.ba-a .ba-in{border:1px solid rgba(255,255,255,.32);color:#fff;font-weight:600}
.ba-a .ba-h1{font-family:var(--display);font-weight:700;letter-spacing:-.035em;color:#fff}
.ba-a .ba-h1 span{background:linear-gradient(90deg,#C7D2FE,#F5D0FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.ba-a .ba-sub{color:#2B2672}
.ba-a .ba-cta span{font-weight:600;border-radius:.6em;background:#fff;color:#2B2672;border:1px solid #DAD6F5}
.ba-a .ba-cta .ba-go{background:#4F46E5;color:#fff;border-color:#4F46E5;box-shadow:0 .6em 1.2em -.5em rgba(79,70,229,.8)}
.ba-a .ba-img{border-radius:.9em;box-shadow:0 0 0 1px rgba(255,255,255,.6),0 1.8em 3.4em -1.2em rgba(20,10,80,.55)}
.ba-a .ba-img svg{border-radius:.9em;font-family:var(--display)}
.ba-a .ba-h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.ba-a .ba-card{background:#fff;border:1px solid #E8E6F6;border-radius:.9em;box-shadow:0 .3em .9em rgba(20,10,80,.05)}
.ba-a .ba-card i{border-radius:.55em;background:#EEF0FF}
.ba-a .ba-card svg{width:1.15em;height:1.15em;fill:none;stroke:#4F46E5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ba-a .ba-card b{font-family:var(--display);font-weight:600}
.ba-a .ba-card span{color:#5B5880}
.ba-a .ba-price{background:#fff;border:1px solid #E8E6F6;border-radius:1em;box-shadow:0 1em 2.4em -.8em rgba(20,10,80,.22)}
.ba-a .ba-plan{font-size:.72em;font-weight:600;color:#4338CA;background:#EEF0FF;border-radius:2em;padding:.2em .7em}
.ba-a .ba-price b{font-family:var(--display);letter-spacing:-.03em}
.ba-a .ba-price small{color:#6B6890;letter-spacing:0}
.ba-a .ba-li{color:#4A4770}
.ba-a .ba-buy{background:#4F46E5;color:#fff;border-radius:.55em;font-weight:600}
.ba-a .ba-cookie{left:calc(var(--u)*3);bottom:calc(var(--u)*.9);gap:.8em;padding:.4em .45em .4em 1.1em;background:#14123A;color:#E9E7FF;border-radius:2em;font-size:.8em;white-space:nowrap}
.ba-a .ba-ok{background:#fff;color:#14123A;font-weight:600;border-radius:2em;padding:.3em .9em}
.ba-tag{display:inline-flex;align-items:center;gap:.45em;font:600 12.5px/1 var(--sans);font-style:normal;letter-spacing:0;color:#02140A;background:#fff;border:1.5px solid #2FD07F;padding:.34em .72em;white-space:nowrap;vertical-align:.12em;text-shadow:none;-webkit-text-fill-color:currentColor}
.ba-tag.ba-live{background:#2FD07F}
.ba-tag.ba-live::before{content:"";width:.5em;height:.5em;background:#02140A}
.ba-pg .ba-tag{position:absolute;z-index:2;font-size:max(8.5px,.88cqw);box-shadow:0 1px 3px rgba(14,31,77,.18)}
.ba-pg .ba-sub .ba-tag,.ba-pg .ba-h2 .ba-tag{position:static;margin-left:.3em}
.ba-in .ba-tag{right:calc(100% + .7em);top:50%;transform:translateY(-50%)}
.ba-h1 .ba-tag{left:0;bottom:100%;margin-bottom:.6em}
.ba-img .ba-tag,.ba-price .ba-tag,.ba-cards>.ba-tag{top:-1em;right:1.2em}
.ba-cookie .ba-tag{left:calc(100% + .7em);top:50%;transform:translateY(-50%)}
.ba-line{position:absolute;top:0;bottom:0;left:0;width:0;z-index:3;pointer-events:none;transform:translateX(calc(var(--pos) * 1cqw))}
.ba-line::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(14,31,77,.3),0 0 14px rgba(14,31,77,.3)}
.ba-knob{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;background:#2FD07F;color:#02140A;border:0;box-shadow:0 0 0 4px rgba(0,0,0,.35),0 0 24px rgba(47,208,127,.55)}
.ba-knob svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ba-range{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.ba-range:focus-visible~.ba-line .ba-knob{outline:3px solid var(--blue-f);outline-offset:3px}
.ba-view.is-drag .ba-knob{background:#fff}
.ba-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:none;margin-top:16px}
.ba-key a{margin-left:auto;font-size:14.5px;color:var(--ink);white-space:nowrap}
@media (max-width:640px){.ba-fig{margin-top:22px}.ba-bar{height:36px;padding:0 12px;font-size:11px}.ba-view{aspect-ratio:22.5/42}.ba-pg{--u:calc(100cqw / 22.5)}.ba-nav{height:3em;padding:0 1.25em}.ba-links{display:none}.ba-logo{font-size:1em}.ba-in{font-size:.8em}.ba-h1{left:calc(var(--u)*1.25);top:calc(var(--u)*4.6);width:calc(var(--u)*20);font-size:calc(var(--u)*1.85);line-height:1.06}.ba-sub{left:calc(var(--u)*1.25);top:calc(var(--u)*9.6);width:calc(var(--u)*20);font-size:calc(var(--u)*.92);line-height:1.45}.ba-cta{left:1.25em;top:13.3em;gap:.6em}.ba-cta span{height:2.6em;padding:0 1.2em;font-size:.9em}.ba-img{left:1.25em;top:16.8em;width:20em;height:8em}.ba-h2{left:calc(var(--u)*1.25);top:calc(var(--u)*26);font-size:calc(var(--u)*1.05)}.ba-b .ba-h2{left:calc(var(--u)*.8)}.ba-cards{left:1.25em;top:28.3em;width:20em;height:5.6em;gap:.6em}.ba-card{padding:.75em .7em}.ba-card i{width:1.6em;height:1.6em;margin-bottom:.25em}.ba-card b{font-size:.85em}.ba-b .ba-card:nth-child(3) b{font-size:.9em}.ba-card span,.ba-li{display:none}.ba-b .ba-card:nth-child(2){margin-top:.8em}.ba-b .ba-card:nth-child(3){margin-left:.3em}.ba-price{left:1.25em;top:34.9em;width:20em;height:3.6em;flex-direction:row;align-items:center;gap:.7em;padding:0 .7em 0 1em}.ba-b .ba-price{left:.9em;top:35.3em}.ba-price b{font-size:1.7em}.ba-b .ba-price b{font-size:1.5em}.ba-buy{align-self:auto;margin:0 0 0 auto;height:2.3em;padding:0 .9em}.ba-b{background:linear-gradient(180deg,#6A11CB 3em,#2575FC 7.4em,#C9D6FF 9em,#E2E9FF 10em,#EDF1FF 12.5em,#fff 15em)}.ba-a{background:radial-gradient(18em 8em at 15em 9.5em,rgba(167,139,250,.5),rgba(167,139,250,0) 70%),linear-gradient(180deg,#120D38 3em,#2B2391 5.4em,#4B3BC9 8em,#8F82F3 8.8em,#DAD5FF 9.5em,#F6F4FF 10.6em,#fff 14em)}.ba-b .ba-cookie{left:calc(var(--u)*3.4);top:calc(var(--u)*12.7);width:calc(var(--u)*18.6);padding:.65em .8em}.ba-b .ba-cookie i{display:none}.ba-broken{color:#444}.ba-a .ba-cookie{left:calc(var(--u)*1.25);bottom:calc(var(--u)*.7)}.ba-pg .ba-tag{font-size:max(8.5px,2.65cqw)}.ba-cards>.ba-tag{right:auto;left:50%;transform:translateX(-50%)}.ba-key{gap:8px}.ba-key .ba-tag{font-size:12px}.ba-key a{margin-left:0;flex-basis:100%;margin-top:4px}}
@media (max-width:420px){.ba-url{display:none}}

/* ---------- scroll: a progress line under the nav, staggered reveals, headings that wipe in, the hero drifting away ---------- */
.nav .prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--accent),rgba(47,208,127,.25));transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(47,208,127,.6);pointer-events:none}
html.js .reveal[data-stagger]{opacity:1;transform:none}
html.js [data-stagger] > *{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 85ms)}
html.js [data-stagger].in > *{opacity:1;transform:none}
html.js .sh.reveal h2,html.js .faq2 h2.reveal{clip-path:inset(0 0 100% 0);transform:translateY(.3em);transition:clip-path 1s var(--ease),transform 1s var(--ease)}
html.js .sh.reveal.in h2,html.js .faq2 h2.reveal.in{clip-path:inset(-10% -10% -20% -10%);transform:none}
html.js .bento .seam::after{transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--ease) .35s}
html.js .bento.in .seam::after{transform:none}
html.js .steps2 li.on::before{transform-origin:top;animation:grow-y .6s var(--ease) both}
@keyframes grow-y{from{transform:scaleY(0)}}
.hero4 > .wrap{transform:translateY(calc(var(--hp,0) * -64px));opacity:calc(1 - var(--hp,0) * 1.15)}
.hero4 .mend{transform:scale(calc(1 + var(--hp,0) * .06));opacity:calc(1 - var(--hp,0) * .55)}
@media (prefers-reduced-motion:reduce){html.js [data-stagger] > *{opacity:1;transform:none}html.js .sh.reveal h2,html.js .faq2 h2.reveal{clip-path:none;transform:none}.hero4 > .wrap,.hero4 .mend{transform:none;opacity:1}.nav .prog{display:none}}

/* Touch screens (2026-10-19, Chrome on some phones closed the tab on a fast scroll): no blur behind the sticky nav or
   the hero's command, which the GPU redoes every frame of a fling, and no hero drift. live.js starts the lab only when
   asked there (.lab-start). */
@media (pointer:coarse){
  .nav{background:var(--nav-solid);backdrop-filter:none;-webkit-backdrop-filter:none}
  .hero4 > .wrap,.hero4 .mend{transform:none;opacity:1}
}
.lab-start{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 24px 0;padding:16px;border:1px solid var(--rule-strong);background:var(--panel,#0b0b0a)}
.lab-start p{margin:0;font-size:14px;color:var(--dim);flex:1 1 220px}
.lab.lab-idle .dup,.lab.lab-idle .radar{opacity:.45;pointer-events:none}

/* screenshots and GIFs in the docs (the dashboard guide) */
.prose figure.shot{margin:22px 0 28px}
.prose figure.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#000}
.prose figure.shot.phone img{max-width:300px}
.prose figure.shot figcaption{font:12.5px/1.5 var(--mono);color:var(--faint);margin-top:8px}

/* ---------- light theme: the few things the tokens do not cover ---------- */
:root[data-theme="light"] .four .pic .big.g{text-shadow:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .four .pic .big.g{text-shadow:none}}

/* ---------- stacked copy-able commands (.cmd from base.css): the home page's skill cell, /docs/skill, /docs/open-source ---------- */
.cmds{display:grid;gap:8px;margin-top:22px;min-width:0}
.cmds .cmd{width:100%;min-height:42px;font-size:13px;padding:0 12px}
.cmds .cmd > span:first-child{min-width:0;overflow-wrap:anywhere}
.cell .cmds-note{margin-top:14px;font-size:13.5px}
.prose .cmds{margin:0 0 16px}
.prose .cmds .cmd{font-size:13.5px}

/* ---------- home: the community (Discord) ---------- */
/* The join card wraps Discord's mark, kept in one colour as Discord's brand guide asks, in the two arrows of the GenClass
   mark (green, then red-orange); on hover they turn once, like the mark. The hero has a one-line link to the same invite. */
.i-discord{width:16px;height:16px;flex:none;display:block}
.hero4 .join-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:13.5px;color:var(--dim);text-decoration:none;transition:color .15s}
.hero4 .join-link:hover{color:var(--bone)}
.hero4 .join-link .i-discord{width:15px;height:15px}
.join{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);border:1px solid var(--rule)}
.join-text{padding:56px 48px;align-self:center}
.join-text .intro{max-width:52ch}
.join-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.join-cta .btn .i-discord{width:18px;height:18px}
.join-card{position:relative;display:flex;flex-direction:column;border-left:1px solid var(--rule);background:var(--raised);color:var(--bone);text-decoration:none}
.join-h,.join-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font:12px/1.5 var(--mono);color:var(--faint)}
.join-h{border-bottom:1px solid var(--rule)}
.join-h > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.join-h .on{display:inline-flex;align-items:center;gap:7px;flex:none;white-space:nowrap}
.join-h .on::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(47,208,127,.7)}
.join-art{position:relative;flex:1;display:grid;place-items:center;padding:40px 24px;background:radial-gradient(50% 50% at 50% 50%,rgba(47,208,127,.08),transparent 72%)}
.join-mark{position:relative;width:min(220px,62%);aspect-ratio:1}
.join-mark .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform 1.1s var(--ease)}
.join-mark .i-discord{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);color:var(--bone)}
.join-card:hover .ring,.join-card:focus-visible .ring{transform:rotate(360deg)}
.join-f{border-top:1px solid var(--rule);font:500 15px/1.5 var(--sans);color:var(--bone);padding:14px}
.join-f .arr{color:var(--faint);transition:transform .2s var(--ease),color .15s}
.join-card:hover .join-f .arr{transform:translateX(3px);color:var(--accent)}
@media (max-width:900px){
  .join{grid-template-columns:1fr}
  .join-card{border-left:0;border-top:1px solid var(--rule)}
  .join-card.seam::after{content:none}
}
@media (max-width:620px){.join-text{padding:32px 24px}}

/* ---------- home (2026-11-11): the hero, one showcase panel with four tabs, one proof strip, the plans, the FAQ and
   the wordmark at the end. Nothing else is on the page. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero4.hero-home{min-height:0;padding:104px 0 112px}
@media (max-width:700px){.hero4.hero-home{padding:72px 0 96px}}

/* the Copy prompt button: it names a coding agent in turn (Claude Code, Codex, Cursor), in that agent's colour, and
   a small knight of the same colour fights a bug. The sprites are GenClass's own drawings. */
.agentbtn{--ag:#D97757;gap:12px;padding:0 20px 0 14px;color:var(--bone);border-color:color-mix(in srgb,var(--ag) 60%,var(--rule-strong));transition:border-color .4s var(--ease),background .2s}
.agentbtn[data-agent="codex"]{--ag:#8FA6FF}
.agentbtn[data-agent="cursor"]{--ag:var(--bone)}
:root[data-theme="light"] .agentbtn[data-agent="claude"]{--ag:#B5532F}
:root[data-theme="light"] .agentbtn[data-agent="codex"]{--ag:#3D55CC}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .agentbtn[data-agent="claude"]{--ag:#B5532F}
  :root:not([data-theme="dark"]) .agentbtn[data-agent="codex"]{--ag:#3D55CC}
}
.agentbtn.btn.ghost:hover{border-color:var(--ag);background:color-mix(in srgb,var(--ag) 8%,transparent)}
.agentbtn .duel{display:inline-flex;align-items:flex-end;gap:2px;flex:none}
.agentbtn .duel svg{display:block;height:28px;width:auto;overflow:visible}
.agentbtn .kn{color:var(--ag);transition:color .4s var(--ease);animation:kn-lunge 1.5s steps(1) infinite}
.agentbtn .bg{color:var(--red);animation:bg-hit 1.5s steps(1) infinite}
.agentbtn .eye{fill:var(--ground)}
.agentbtn .blade{fill:var(--bone)}
.agentbtn .sw{transform-box:view-box;transform-origin:9.5px 5px;animation:kn-slash 1.5s steps(1) infinite}
@keyframes kn-slash{0%,100%{transform:rotate(-18deg)}40%{transform:rotate(-34deg)}52%{transform:rotate(38deg)}64%{transform:rotate(62deg)}80%{transform:rotate(10deg)}}
@keyframes kn-lunge{0%,100%{transform:none}52%,64%{transform:translateX(2px)}}
@keyframes bg-hit{0%,100%{transform:none;opacity:1}56%{transform:translate(3px,-2px);opacity:.45}68%{transform:translate(2px,0);opacity:1}84%{transform:translateX(1px)}}
.agentbtn .agent-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1;text-align:left}
.agentbtn .k{font:500 15px/1 var(--sans)}
.agentbtn .agent-for{font:500 11px/1 var(--mono);color:var(--dim);white-space:nowrap}
.agentbtn .agent-for b{display:inline-block;font-weight:500;color:var(--ag);transition:color .4s var(--ease)}
.agentbtn.done .agent-for{visibility:hidden}

/* the showcase */
.show-sec{padding-top:56px}
.show{border:1px solid var(--rule);background:var(--ground)}
.show-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--rule);background:var(--raised)}
.show-tabs button{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:0 22px;background:none;border:0;border-left:1px solid var(--rule);color:var(--faint);font:400 14.5px/1.3 var(--sans);text-align:left;cursor:pointer;min-width:0;transition:color .15s,background .15s}
.show-tabs button:first-child{border-left:0}
.show-tabs button > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.show-tabs .n{font:500 12px/1 var(--mono);color:var(--faint);flex:none}
.show-tabs b{font-weight:500}
.show-tabs button:hover{color:var(--dim)}
.show-tabs button.on{color:var(--dim);background:var(--ground)}
.show-tabs button.on b{color:var(--bone)}
.show-tabs button::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent)}
.show-tabs button.on::after{width:100%}
.show.auto .show-tabs button.on::after{animation:showbar 7s linear both}
.show.auto:hover .show-tabs button.on::after,.show.auto:focus-within .show-tabs button.on::after{animation-play-state:paused}
@keyframes showbar{from{width:0}to{width:100%}}
.show-pane{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:48px;align-items:center;padding:48px;min-height:432px}
.show-pane + .show-pane{border-top:1px solid var(--rule)}
.show-pane[hidden]{display:none}
.show-say h3{font-size:clamp(22px,2.1vw,30px);line-height:1.18;letter-spacing:-.025em;max-width:17ch}
.show-say p{color:var(--dim);margin-top:16px;max-width:44ch;font-size:15.5px;line-height:1.6}
.show-say .go{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:26px}
.show-say .go small{color:var(--faint);font-size:13.5px}
.show-say .lnk{color:var(--bone);font-size:15px;text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
.show-say .lnk:hover{text-decoration-color:var(--accent)}
@media (max-width:980px){
  .show-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .show-tabs button:nth-child(3){border-left:0}
  .show-tabs button:nth-child(n+3){border-top:1px solid var(--rule)}
  .show-tabs button > span:last-child{white-space:normal}
  .show-pane{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 24px;min-height:0}
}
@media (max-width:520px){.show-tabs button{padding:0 14px;gap:8px;font-size:13.5px;min-height:52px}.show-pane{padding:24px 16px}}

/* a pull request comment, as GitHub draws one */
.ghc{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;font:14px/1.55 var(--sans);min-width:0}
.ghc-av{width:40px;height:40px;border:1px solid var(--rule-strong);background:var(--raised2);display:grid;place-items:center}
.ghc-av svg{width:24px;height:24px}
.ghc-box{border:1px solid var(--rule-strong);background:var(--raised);min-width:0}
.ghc-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--rule);background:var(--raised2);color:var(--dim);font-size:13.5px}
.ghc-h b{color:var(--bone);font-weight:500}
.ghc-bot{font:500 11px/1 var(--mono);border:1px solid var(--rule-strong);padding:3px 6px}
.ghc-b{padding:18px 16px}
.ghc-t{font:500 19px/1.3 var(--display);letter-spacing:-.015em;color:var(--bone);padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--rule)}
.ghc-b p{color:var(--dim)}
.ghc-b p b{color:var(--bone);font-weight:500}
.ghc code{font-size:12.5px;background:var(--raised2);border:1px solid var(--rule);padding:1px 5px;color:var(--bone);overflow-wrap:anywhere}
.ghc-rows{border:1px solid var(--rule);margin:14px 0;background:var(--ground)}
.ghc-row{display:grid;grid-template-columns:16px 44px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-top:1px solid var(--rule);font-size:13.5px}
.ghc-row:first-child{border-top:0}
.ghc-row .n{color:var(--faint);font:12px var(--mono)}
.ghc-row .gst{font:500 11px/1 var(--mono);color:var(--bad);border:1px solid currentColor;padding:3px 5px;justify-self:start}
.ghc-row .f{min-width:0;color:var(--dim)}
.ghc-row .f b{color:var(--bone);font-weight:500}
.ghc-row .f small{display:block;color:var(--faint);font:12px/1.5 var(--mono);margin-top:4px;overflow-wrap:anywhere}
.ghc-row .seen{font-size:12.5px;line-height:1.35;color:var(--dim);text-align:right;max-width:13ch}
.ghc-row .seen.g{color:var(--accent)}
@media (max-width:620px){
  .ghc{grid-template-columns:minmax(0,1fr)}
  .ghc-av{display:none}
  .ghc-row{grid-template-columns:16px minmax(0,1fr);gap:6px 10px}
  .ghc-row .gst{display:none}
  .ghc-row .seen{grid-column:2;text-align:left;max-width:none}
}

/* the dashboard's Problems view, as an example */
.dmock{border:1px solid var(--rule-strong);background:var(--raised);min-width:0}
.dmock-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 18px;border-bottom:1px solid var(--rule);background:var(--raised2)}
.dmock-h b{font-weight:500}
.dmock-h span{font:12px var(--mono);color:var(--faint)}
.dmock-r{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--rule)}
.dmock-r:nth-child(2){border-top:0}
.dmock-r i{width:8px;height:8px;background:var(--bad)}
.dmock-r i.warn{background:var(--warn)}
.dmock-r i.ok{background:var(--accent)}
.dmock-r .f b{display:block;font-weight:500;font-size:15px}
.dmock-r .f small{display:block;font:12px/1.5 var(--mono);color:var(--faint);margin-top:2px;overflow-wrap:anywhere}
.dmock-r .c{font:400 24px/1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dmock-r .c.g{color:var(--accent)}

/* the proof: one strip */
.proof-sec{padding-top:72px}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--rule)}
.strip > div{padding:26px 28px 24px;border-left:1px solid var(--rule);min-width:0}
.strip > div:first-child{border-left:0}
.strip b{display:block;font:400 clamp(30px,3vw,44px)/1 var(--display);letter-spacing:-.04em;white-space:nowrap}
.strip b.g{color:var(--accent)}
.strip div span{display:block;margin-top:10px;font-size:14px;color:var(--dim)}
.strip > p{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;border-top:1px solid var(--rule);padding:14px 28px;font-size:14px;color:var(--faint);background:var(--raised)}
.strip > p a{color:var(--bone);text-underline-offset:4px;text-decoration-color:var(--rule-strong)}
@media (max-width:900px){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip > div:nth-child(3){border-left:0}
  .strip > div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:480px){.strip > div{padding:20px 16px}.strip > p{padding:12px 16px}}

/* the plans on the home page */
.home-plans{margin-top:48px}

/* the end of the page: the wordmark, as wide as the page, cut by the footer */
.livery{position:relative;isolation:isolate;overflow:hidden;margin-top:128px;border-top:1px solid var(--rule);padding-top:80px;text-align:center}
.livery::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 78% at 50% 100%,rgba(47,208,127,.16),transparent 72%)}
.livery .cta2{margin-top:0}
.livery-word{position:relative;z-index:0;margin:48px 0 -.29em;font:500 clamp(60px,22.5vw,440px)/1 var(--display);letter-spacing:-.065em;white-space:nowrap;user-select:none;-webkit-user-select:none;background:linear-gradient(100deg,var(--accent) 0%,var(--bone) 32%,var(--bone) 68%,var(--red) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:livery 9s ease-in-out infinite alternate}
.livery-word::before{content:attr(data-t);position:absolute;inset:0;z-index:-1;background:inherit;-webkit-background-clip:text;background-clip:text;filter:blur(30px);opacity:.4;animation:inherit}
@keyframes livery{from{background-position:0 0}to{background-position:100% 0}}
main:has(> .livery:last-child) + .foot-wrap{margin-top:0;position:relative;background:var(--ground)}

/* ---------- /docs/cli: three ways in, side by side (one under the other on a phone) ---------- */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0 0 18px;border:1px solid var(--rule);background:var(--rule)}
.ways > div{display:flex;flex-direction:column;gap:10px;padding:20px;background:var(--ground);min-width:0}
.ways .n{font:400 12px var(--mono);color:var(--accent)}
.ways b{font-size:16px;color:var(--bone)}
.ways p{margin:0;font-size:14px;line-height:1.5;color:var(--dim);flex:1}
.ways .cmds{margin:0}
.ways .lnk{font-size:14px}
@media (max-width:760px){.ways{grid-template-columns:1fr}}