/* mutational - the design system. One stylesheet for every page.
   Monochrome, and bright: white paper, true neutral greys, black ink. There is no
   hue anywhere, so nothing on a page can mean something by colour alone: a caught
   fault, a lost one and one that cannot be told apart differ by fill, by line and
   by the word on them. Geist says things, Geist Mono labels and measures them.
   Tokens first; components use tokens and never a raw colour. */

@font-face { font-family: "Geist"; src: url("fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f7f7f7;             /* a band set apart */
  --panel: #ffffff;            /* cards and panels */
  --panel-2: #fafafa;          /* raised inside a panel */
  --panel-3: #f2f2f2;          /* hover */
  --ink-rgb: 17, 17, 17;
  --line: rgba(var(--ink-rgb), .1);
  --line-2: rgba(var(--ink-rgb), .16);
  --line-3: rgba(var(--ink-rgb), .3);
  --grid: rgba(var(--ink-rgb), .05);
  --ink: #111111;              /* 18.9:1 on white */
  --ink-2: #333333;            /* 12.6:1 */
  --ink-3: #4d4d4d;            /* 8.4:1 - body copy in sections, labels */
  --ink-4: #6b6b6b;            /* 5.3:1 - the quietest text there is */

  /* The accent is the ink itself: what matters is black, and everything else is
     a grey of it. */
  --accent-rgb: 17, 17, 17;
  --accent: #111111;
  --accent-2: #000000;
  --accent-ink: #ffffff;
  --accent-text: #111111;
  --accent-tint: rgba(var(--accent-rgb), .04);
  --accent-tint-2: rgba(var(--accent-rgb), .08);
  --accent-line: rgba(var(--accent-rgb), .32);
  --edge: 0 0 0 1px rgba(var(--accent-rgb), .3);

  /* signals, in grey: caught is solid ink, cannot-tell is a mid grey drawn dashed,
     lost is ink turned over (white on black). The shape carries the meaning. */
  --good-rgb: 17, 17, 17;    --good: #111111; --good-tint: rgba(var(--good-rgb), .04); --good-line: rgba(var(--good-rgb), .4);
  --warn-rgb: 90, 90, 90;    --warn: #555555; --warn-tint: rgba(var(--warn-rgb), .06); --warn-line: rgba(var(--warn-rgb), .45);
  --bad-rgb: 17, 17, 17;     --bad: #111111;  --bad-tint: rgba(var(--bad-rgb), .07);  --bad-line: rgba(var(--bad-rgb), .55);

  /* slate: the one colour kept, the line the outlined words are drawn in
     (the filters in header.html carry it as #3a3f45) */
  --graphite-rgb: 58, 63, 69;
  --graphite: rgb(var(--graphite-rgb));

  /* the hero's halftone figure, as "r, g, b": the stack, and the layer out of line */
  --art-ink: 40, 40, 40;
  --art-hot: 0, 0, 0;

  --term-bg: #141414;
  --term-ink: #f2f2f2;
  --term-dim: #a3a3a3;
  --term-line: rgba(255, 255, 255, .1);
  --term-accent: #ffffff;
  --term-good: #f2f2f2; --term-warn: #b8b8b8; --term-bad: #ffffff;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 5px; --r: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px;
  --r-card: 18px;              /* every card, panel and window */
  --surface: #f4f4f4;          /* a card on the page */
  --surface-2: #ffffff;        /* a card inside a card */
  --shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 10px 30px -18px rgba(var(--ink-rgb), .22);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(20px, 3.4vw, 56px);
  --rail: 244px;
  --top: 64px;
  /* one scale of layers, so nothing is ever given 999 to win */
  --z-raise: 1; --z-over: 2; --z-header: 50; --z-menu: 60; --z-skip: 100; --z-toast: 200;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--sans); letter-spacing: -0.006em; font-feature-settings: "calt";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }
button, summary, select, label[for], [role="tab"], [role="menuitem"], input[type="checkbox"], input[type="radio"] { cursor: pointer; }
[hidden] { display: none !important; }
/* No scrollbars, on the page or in anything inside it: the wheel, a trackpad and
   touch still scroll every one of them, and a wide table shows its cut edge. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--ring); border-radius: var(--r-sm); }
/* A field is not ringed: the caret in it already says where the keyboard is, and a
   coloured halo round every box a person types into was the loudest thing on a form. */
input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: none; }
::selection { background: rgba(var(--accent-rgb), .18); color: inherit; }

.skip { position: absolute; left: 16px; top: -64px; z-index: var(--z-skip); background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: var(--r); text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
/* The site is read, and has a measure: 1280 of content, with room on either side
   and between its sections. The app is worked in, and keeps the whole width. */
html[data-shell="site"] .wrap, html[data-shell="auto"]:not([data-auth="in"]) .wrap { max-width: calc(1280px + 2 * var(--gutter)); margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type ---- */
/* Two voices, as a poster has them. DISPLAY - the headline of a page or a
   section - is Geist at its heaviest, in capitals, set solid: line-height under
   one, so a two-line headline reads as one block. Everything under it speaks in
   Geist 600 at a size a person reads rather than looks at. Identifiers - a
   suite's name, a project's - are never capitalised: they are case-sensitive,
   and a heading that changed one would be stating a name nobody gave it. */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; margin: 0; color: var(--ink); text-wrap: balance; }
h1, h2, .display { font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: -0.014em; }
h1 { font-size: clamp(42px, 6.6vw, 99px); }
h2 { font-size: clamp(30px, 4.2vw, 61px); }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; }
h3.lg { font-size: clamp(20px, 1.7vw, 23px); }
/* headings that label a part of a page, not the page: the second voice */
.panel h2, .doc-body h2, .prose h2, .files h2, .empty h2 { font-weight: 600; text-transform: none; line-height: 1.25; letter-spacing: -0.022em; }
#sw-suite, #pj-name { text-transform: none; letter-spacing: -0.035em; line-height: .95; }
/* One word of a display heading is drawn rather than set: one continuous
   slate outline, empty inside. Still
   text, one word, one colour with its sentence. */
.m { display: inline-block; filter: url(#pencil); }
.lede { font-size: clamp(17px, 1.45vw, 20px); font-weight: 450; line-height: 1.5; color: var(--ink-2); max-width: 32em; margin: 0; letter-spacing: -0.012em; }
.lede a { color: var(--accent-text); }
/* links in running text: underlined, and the line kept off the letters */
.lede a, .prose a, .doc-body a, .faq .a a, .help a, .note a, .empty a, .fine a, .panel > header p a {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
p { margin: 0; }
.muted { color: var(--ink-3); }
.num { font: 400 12px/1 var(--mono); letter-spacing: .12em; color: var(--ink-3); }
code, kbd, .mono { font-family: var(--mono); letter-spacing: 0; }
code { font-size: .86em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; color: var(--ink); }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border-radius: var(--r); border: 1px solid transparent; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease), transform .12s var(--ease); touch-action: manipulation; }
.btn:active { transform: translateY(1px); }
.btn.lg { min-height: 44px; padding: 0 24px; font-size: 15px; }
.btn.block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn-primary:hover { background: var(--accent-2); }
.btn-secondary { background: rgba(var(--ink-rgb), 0.021); color: var(--ink); border-color: var(--line-2); }
.btn-secondary:hover { background: rgba(var(--ink-rgb), 0.042); border-color: var(--line-3); }
.btn-quiet { background: transparent; color: var(--ink-2); border-color: var(--line-2); min-height: 34px; padding: 0 12px; font-size: 13px; }
.btn-quiet:hover { background: rgba(var(--ink-rgb), 0.035); color: var(--ink); border-color: var(--line-3); }
.btn-danger { background: transparent; color: var(--bad); border-color: var(--bad-line); }
.btn-danger:hover { background: var(--bad-tint); border-color: var(--bad); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn .spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--accent-line); color: var(--accent-text);
  font: 500 12px/1 var(--mono); letter-spacing: .04em; text-decoration: none; background: var(--accent-tint); transition: background-color .18s var(--ease), box-shadow .18s var(--ease); }
.pill:hover { background: var(--accent-tint-2); box-shadow: var(--edge); }
.textlink { color: var(--ink-3); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
.textlink:hover { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- corner ticks: the instrument's bezel ---- */
/* the measuring grid, faded out from its middle */
.grid-bg { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%); }

/* ---- header ---- */

.site { position: sticky; top: 0; z-index: var(--z-header); background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.site.stuck { border-bottom-color: var(--line); background: rgba(255, 255, 255, .92); }
.site .wrap { display: flex; align-items: center; gap: 20px; min-height: var(--top); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--sans); letter-spacing: -0.055em; text-decoration: none; color: var(--ink); margin-right: auto; padding: 6px 2px; }
/* The wordmark is the product in one word, and its capital is still being drawn:
   the M outlined in slate, and "utational" set. It reads as one
   word, and aloud it is one. */
.wm { display: inline-block; white-space: nowrap; }
/* a drawn word keeps the stop after it on its line */
.nw { white-space: nowrap; }
.wm-pencil { filter: url(#pencil-fine); }
.pencil-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.site nav { display: flex; align-items: center; gap: 2px; position: absolute; left: 50%; transform: translateX(-50%); }
.site nav a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-3); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: var(--r-sm); transition: color .15s, background-color .15s; }
.site nav a:hover { color: var(--ink); background: rgba(var(--ink-rgb), 0.028); }
.site nav a[aria-current="page"] { color: var(--ink); background: rgba(var(--ink-rgb), 0.042); }
.site nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Two products share these files and must never be seen in each other: the SITE,
   which says what Mutational is, and the APP, which is somebody's workspace. A page
   says which it is on <html data-shell>: "site", "app", or "auto" - the app for
   somebody signed in and the site for anybody else (the playground, which both
   use). The first version had one header that changed its links when you signed
   in, so the app's navigation led to the landing page and the landing page wore
   the app's chrome. `only-site` and `only-app` are which shell a thing belongs
   to; `auth-in` and `auth-out` are who is looking. `data-auth` is set before the
   first paint (auth-hint.js) and corrected when the server answers (site.js). */
html[data-shell="app"] .only-site, html[data-shell="auto"][data-auth="in"] .only-site { display: none !important; }
html[data-shell="site"] .only-app, html[data-shell="auto"]:not([data-auth="in"]) .only-app, html:not([data-shell]) .only-app { display: none !important; }
html[data-auth="in"] .auth-out { display: none !important; }
html:not([data-auth="in"]) .auth-in { display: none !important; }
.site-end { display: flex; align-items: center; gap: 8px; }
.site .site-end .btn { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.account { position: relative; }
.account-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 10px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(var(--ink-rgb), 0.021);
  font-size: 13px; color: var(--ink-2); transition: border-color .15s, background-color .15s; }
.account-btn:hover, .account-btn[aria-expanded="true"] { border-color: var(--line-3); background: rgba(var(--ink-rgb), 0.042); }
.account-btn svg { color: var(--ink-3); transition: transform .18s var(--ease); flex: none; }
.account-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-tint-2); border: 1px solid var(--accent-line); color: var(--accent-text); font: 500 12px/1 var(--mono); text-transform: uppercase; }
.site .who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 248px; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 24px 60px -12px rgba(var(--ink-rgb), 0.112); padding: 6px; z-index: var(--z-menu);
  transform-origin: top right; animation: menu-in .16s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.menu-h { padding: 10px 10px 12px; font: 400 11px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-h strong { display: block; color: var(--ink); font: 500 13px/1.5 var(--sans); letter-spacing: -0.01em; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a, .menu button { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 0 10px; border: 0; background: none; border-radius: var(--r-sm); font-size: 13.5px; color: var(--ink-2); text-decoration: none; text-align: left; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: rgba(var(--ink-rgb), 0.042); color: var(--ink); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.nav-foot { display: none; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r); background: rgba(var(--ink-rgb), 0.021); align-items: center; justify-content: center; color: var(--ink-2); }
@media (max-width: 1023px) {
  .site nav { position: fixed; left: 0; right: 0; top: 0; transform: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line-2);
    padding: 76px 16px 20px; display: none; box-shadow: 0 30px 60px -20px rgba(var(--ink-rgb), 0.128); z-index: -1; max-height: 100dvh; overflow-y: auto; }
  .site nav.open { display: flex; }
  .site nav a { padding: 12px 12px; font-size: 17px; color: var(--ink-2); border-bottom: 1px solid var(--line); border-radius: 0; }
  .menu-btn { display: inline-flex; }
  .nav-foot { display: grid; gap: 10px; margin-top: 20px; }
  .site-end > .btn, .site .who, .account-btn svg { display: none; }
  .account-btn { padding: 3px; border-radius: 50%; }
}

/* The app's rail. Somebody at work has a workspace, not a website: on a screen
   wide enough, the same header stands up along the left edge and the page gets
   the rest. Same markup, same hooks - only where it sits changes. */
@media (min-width: 1024px) {
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) body { padding-left: var(--rail); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--rail); border-bottom: 0; border-right: 1px solid var(--line); background: var(--bg);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site .wrap {
    flex-direction: column; align-items: stretch; gap: 0; height: 100%; padding: 20px 12px 14px; max-width: none; min-height: 0; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .wordmark { margin: 0 0 24px; padding: 6px 8px; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav {
    position: static; transform: none; flex-direction: column; align-items: stretch; gap: 2px; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a { padding: 8px 10px; font-size: 13.5px; color: var(--ink-3); position: relative; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"] { color: var(--ink); background: rgba(var(--ink-rgb), 0.038); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"] svg { color: var(--accent-text); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site-end { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account { width: 100%; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account-btn { width: 100%; border-radius: var(--r); padding: 6px 10px 6px 6px; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account-btn .who { flex: 1; text-align: left; max-width: none; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account-btn svg { transform: rotate(180deg); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account-btn[aria-expanded="true"] svg { transform: none; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 100%; transform-origin: bottom left; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .menu-btn { display: none; }
}

/* the app's footer: a line */
.app-foot { border-top: 1px solid var(--line); margin-top: 72px; padding: 24px 0 28px; font: 400 12px/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-4); }
.app-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-foot-links { display: flex; gap: 24px; }
.app-foot a { color: var(--ink-3); text-decoration: none; }
.app-foot a:hover { color: var(--ink); }

/* ---- sections ---- */
section { position: relative; }
.band { padding: clamp(96px, 10vw, 160px) 0; border-top: 1px solid var(--line); }
.band > .wrap { position: relative; }
.band header { margin-bottom: 72px; }
/* A section head uses the width it is given: the headline on the left, and what
   it means on the right, level with its last line - not under it, where a wide
   screen had left a paragraph alone in a margin. */
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); align-items: end; }
.sec-head > h2, .sec-head > h1 { grid-column: 1; max-width: 13em; }
.pg-hero .sec-head > h1 { max-width: 11em; }
.sec-head > h2:last-child { grid-column: 1 / -1; max-width: 22em; }
.sec-head > .lede { grid-column: 2; justify-self: end; max-width: 30em; }
.layer .sec-head, .faq-wrap .sec-head, .live-copy { display: block; }
.layer .sec-head .lede, .faq-wrap .sec-head .lede { margin-top: 24px; }
@media (max-width: 1023px) { .sec-head { display: block; } .sec-head > .lede { margin-top: 20px; } }
@media (max-width: 639px) { .band { padding: 72px 0; } .band header { margin-bottom: 40px; } }

/* ---- hero ---- */
.hero { padding: clamp(56px, 7vw, 128px) 0 clamp(64px, 7vw, 120px); overflow: hidden; }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "head scope" "foot scope";
  column-gap: var(--gutter); row-gap: clamp(32px, 3.4vw, 56px); align-items: end; }
.hero-head { grid-area: head; }
.hero h1 { max-width: none; font-size: clamp(42px, 6.7vw, 104px); }
.hero-foot { grid-area: foot; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--gutter); align-items: end; }
.hero .lede { margin-top: 0; font-size: clamp(17px, 1.35vw, 20px); max-width: 28em; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.with { padding-left: 24px; border-left: 1px solid var(--line); }
.with-label { margin: 0 0 12px; font-size: 13px; color: var(--ink-3); }
.with ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 32px; padding: 0; margin: 0; align-items: center; }
.with li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.with svg { width: 18px; height: 18px; color: var(--ink-2); }

/* the instrument the figure sits in */
.scope { grid-area: scope; position: relative; justify-self: end; width: 100%; max-width: 620px; border: 1px solid var(--line); border-radius: var(--r-md); background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.014), transparent 40%), var(--bg);
  padding: 14px; }
.scope-top { display: flex; justify-content: space-between; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); padding: 2px 2px 0; }
.scope-live { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); }
.hero-art { width: 100%; aspect-ratio: 1; padding: 6% 7% 4%; }
.hero-art canvas { width: 100%; height: 100%; }
/* the figure as landing.js leaves it: three canvases, one over another */
.fig { position: relative; width: 100%; height: 100%; }
.fig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fig-fault { will-change: transform; }
.readout dd { transition: color .3s var(--ease); }
.readout dd.good { color: var(--good); }
.readout dd.bad { color: var(--bad); }
.readout { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.readout div { padding: 10px 4px 2px; }
.readout div:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 12px; }
.readout div:nth-child(even) { padding-left: 14px; }
.readout div:nth-child(-n+2) { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.readout dt { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.readout dd { margin: 6px 0 0; font: 400 13px/1.2 var(--mono); color: var(--ink-2); }
.readout dd.hot { color: var(--accent-text); }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "foot" "scope"; }
  .hero-foot { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .scope { justify-self: start; max-width: 420px; }
}

/* ---- the numbers under the hero ---- */
.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.stat-row { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { padding: 36px var(--gutter) 36px 0; }
.stat + .stat { padding-left: var(--gutter); border-left: 1px solid var(--line); }
.stat dt { font: 900 clamp(24px, 2.7vw, 38px)/.9 var(--sans); letter-spacing: -0.014em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat .arrow { color: var(--accent-text); font-weight: 400; padding: 0 2px; }
.stat dd { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); max-width: 34ch; }
@media (max-width: 767px) {
  .stat-row { grid-template-columns: 1fr; }
  .stat, .stat + .stat { padding: 24px 0; border-left: 0; }
  .stat + .stat { border-top: 1px solid var(--line); }
}

/* ---- the product frame ---- */
.live { padding: clamp(64px, 7vw, 112px) 0; }
.live-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); align-items: start; }
.live-copy { position: sticky; top: 104px; }
.live-copy h2 { font-size: clamp(30px, 3.5vw, 50px); }
.live-copy .lede { margin-top: 24px; font-size: 16px; }
.live-list { list-style: none; margin: 28px 0 28px; padding: 0; border-top: 1px solid var(--line); }
.live-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.live-list .num { color: var(--accent-text); padding-top: 3px; }
.live-list strong { display: block; font-weight: 600; font-size: 15px; letter-spacing: -0.015em; }
.live-list span:not(.num) { display: block; margin-top: 3px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 1279px) { .live-grid { grid-template-columns: minmax(0, 1fr); row-gap: 36px; } .live-copy { position: static; max-width: 720px; } }
@media (max-width: 639px) { .live { padding: 48px 0 72px; } }
.frame { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-2); padding: 6px;
  box-shadow: var(--shadow); }
.frame-in { position: relative; border: 1px solid var(--line-2); border-radius: 2px; background: var(--term-bg); overflow: hidden; }
/* a snippet regrouped into its lines, so they can be typed in one at a time */
pre .ln { display: block; }
.chrome { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--term-line); background: rgba(255, 255, 255, .025); }
.chrome i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .16); display: block; }
.chrome i:first-child { background: var(--term-accent); }
.chrome span { margin-left: 8px; font: 400 11.5px/1 var(--mono); letter-spacing: .02em; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- cards and mini interfaces ---- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.grid-4 > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* three steps, one line through them */
.pipeline { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.pipeline li { position: relative; }
.pipeline span { position: relative; z-index: var(--z-over); display: inline-flex; align-items: center; gap: 8px; background: var(--bg); padding-right: 12px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.pipeline span::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--accent); background: var(--accent); transform: rotate(45deg); }
@media (max-width: 1023px) { .pipeline { display: none; } }

.stage { position: relative; height: 280px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0.017), transparent 30%); }
.stage.short { height: 214px; background:
  var(--panel); }
.feature > h3 { margin-top: 28px; }
.feature > .num { display: block; margin-top: 28px; color: var(--accent-text); }
.feature > .num + h3 { margin-top: 14px; }
.feature > p { margin-top: 10px; color: var(--ink-3); font-size: 14.5px; }
.band .feature:not(:has(.stage)) > h3 { margin-top: 0; }

/* the hairline bento: cells share their edges */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bento > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bento .cell { background: var(--bg); padding: 16px 16px 32px; transition: background-color .25s var(--ease); }
.bento .cell:hover { background: var(--bg-2); }
.bento .cell > h3, .bento .cell > p { padding: 0 8px; }
@media (max-width: 1023px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .bento { grid-template-columns: 1fr; } }

.mini { position: absolute; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 20px 50px -20px rgba(var(--ink-rgb), 0.128); }
.tiles { position: absolute; inset: 16px -30px 16px -18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font: 400 11.5px/1 var(--mono); color: var(--ink-3); min-height: 74px; }
.tile svg { width: 19px; height: 19px; color: var(--ink-2); }
.tile.v { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-tint); }
.tile.v svg { color: var(--accent-text); }
.tile { transition: border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease); }
.tile svg { transition: color .3s var(--ease); }
.tile.scan { border-color: var(--accent); color: var(--accent-2); background: var(--accent-tint-2); }
.tile.scan svg { color: var(--accent-2); }
.tiles .tile:nth-child(4n+1) { transform: translateX(-22px); } .tiles .tile:nth-child(n+5):nth-child(-n+8) { transform: translateX(26px); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.rows li:last-child { border-bottom: 0; }
.rows .mono { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .end { margin-left: auto; }
.rows .num { display: inline; margin: 0; flex: none; color: var(--accent-text); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 4px; font: 500 11px/1 var(--mono); letter-spacing: .05em; border: 1px solid var(--line-2); background: rgba(var(--ink-rgb), 0.021); color: var(--ink-2); white-space: nowrap; }
.chip.keep { background: var(--good-tint); border-color: var(--good-line); color: var(--good); }
.chip.del { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.cant { background: transparent; border-style: dashed; border-color: var(--warn-line); color: var(--warn); }
.chip.v { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-text); }
.chip.keep::before, .chip.del::before, .chip.cant::before, .chip.v::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.chip.cant::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.snippet { margin: 0; font: 400 12px/1.7 var(--mono); color: var(--ink-3); white-space: pre; overflow: hidden; padding: 14px 16px; }
.snippet b { color: var(--ink); font-weight: 500; } .snippet em { color: var(--accent-text); font-style: normal; } .snippet s { color: var(--ink-3); text-decoration: line-through; }
.bar { height: 4px; border-radius: 2px; background: rgba(var(--ink-rgb), 0.049); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); transition: transform .3s var(--ease); }

/* the isometric stack in step two: four measured layers, and the verdict glowing on top */
.stack { position: absolute; left: 50%; top: 50%; width: 270px; height: auto; transform: translate(-50%, -50%); }
.stack .slab polygon { stroke: rgba(var(--ink-rgb), .2); stroke-width: 1; }
.stack .slab .t { fill: #ffffff; } .stack .slab .l { fill: #f2f2f2; } .stack .slab .r { fill: #e4e4e4; }
/* the phase being run: motion.js steps through them in the engine's own order */
.stack .slab polygon, .stack .slab text { transition: fill .3s var(--ease), stroke .3s var(--ease); }
.stack .slab.now .t { fill: rgba(var(--accent-rgb), .14); } .stack .slab.now polygon { stroke: rgba(var(--accent-rgb), .6); } .stack .slab.now text { fill: var(--accent-text); }
.stack text { font: 400 8px var(--mono); letter-spacing: 1.6px; fill: var(--ink-3); }
.stack .hot polygon { stroke: rgba(var(--accent-rgb), 0.54); }
.stack .hot .t { fill: rgba(var(--accent-rgb), 0.275); } .stack .hot .l { fill: rgba(var(--accent-rgb), 0.16); } .stack .hot .r { fill: rgba(var(--accent-rgb), 0.11); }

/* ---- who it is for ---- */
.who-card { background: var(--bg); padding: 28px 24px 28px; min-height: 220px; display: flex; flex-direction: column; transition: background-color .25s var(--ease); }
.who-card:hover { background: var(--bg-2); }
.who-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink); background: var(--bg); }
.who-icon svg { width: 22px; height: 22px; }
.who-card h3 { margin-top: 48px; }
.who-card p { margin-top: 8px; color: var(--ink-3); font-size: 14px; }
@media (max-width: 639px) { .who-card { min-height: 0; } .who-card h3 { margin-top: 28px; } }

/* ---- the control layer ---- */
.layer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: start; }
.layer .sec-head.sticky { position: sticky; top: 104px; margin-bottom: 0; }
.loop { list-style: none; margin: 0; padding: 0; position: relative; }
.loop::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; transform-origin: 50% 0; transform: scaleY(var(--draw, 1)); background: linear-gradient(180deg, var(--accent-line), var(--line-2) 30%, var(--line-2) 70%, var(--accent-line)); }
.loop li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 20px; padding: 0 0 36px; }
.loop li:last-child { padding-bottom: 0; }
.loop .n { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.loop li.gate .n { border-color: var(--accent); color: var(--accent-text); box-shadow: var(--edge); }
.loop .n { transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease); }
.loop li.lit .n { border-color: var(--accent-line); color: var(--accent-text); background: var(--accent-tint); }
.loop h3 { font-size: 19px; margin: 10px 0 8px; }
.loop p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; max-width: 58ch; }
@media (min-width: 1280px) {
  .loop li > div { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); column-gap: 28px; align-items: baseline; }
  .loop h3 { margin: 10px 0 0; }
  .loop p { margin-top: 10px; }
}
.rule { margin-top: 32px; padding: 16px 0 16px 20px; border-left: 2px solid var(--accent); font: 600 clamp(18px, 1.6vw, 22px)/1.3 var(--sans); letter-spacing: -0.025em; color: var(--ink);
  background: linear-gradient(90deg, var(--accent-tint), transparent 80%); }
@media (max-width: 1023px) { .layer { grid-template-columns: 1fr; gap: 40px; } .layer .sec-head.sticky { position: static; } }

/* ---- agents ---- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); row-gap: 40px; align-items: stretch; }
@media (max-width: 1023px) { .split { grid-template-columns: 1fr; } }
.clients { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); align-content: stretch; }
.clients > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client { display: flex; align-items: flex-start; gap: 16px; background: var(--bg); padding: 20px 24px; transition: background-color .2s var(--ease); }
.client:hover { background: var(--bg-2); }
.client svg { width: 20px; height: 20px; flex: none; color: var(--accent-text); margin-top: 2px; }
.client h3 { font-size: 17px; } .client p { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.codecard { position: relative; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--term-bg); overflow: hidden;
  box-shadow: var(--shadow); }
.codecard .chrome span { margin-left: 0; color: var(--term-dim); }
.codecard pre { margin: 0; padding: 24px; font: 400 13px/1.75 var(--mono); color: var(--term-dim); overflow-x: auto; }
.codecard pre b { color: var(--term-ink); font-weight: 500; } .codecard pre em { color: var(--term-accent); font-style: normal; }

/* ---- pricing ---- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--panel); align-items: stretch; }
@media (max-width: 1023px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0 !important; border-top: 1px solid var(--line-2); } }
.plan { position: relative; display: flex; flex-direction: column; background: transparent; }
.plan + .plan { border-left: 1px solid var(--line-2); }
.plan.best { background: none; box-shadow: inset 0 0 0 1px var(--accent-line); z-index: var(--z-raise); }
.plan .flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--accent-ink); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 4px; white-space: nowrap; box-shadow: var(--edge); }
.plan .top { padding: 28px clamp(24px, 2.4vw, 36px) 24px; }
.plan .name { font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.plan .price { margin-top: 16px; font: 900 37px/.9 var(--sans); letter-spacing: -0.014em; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; }
.plan .price small { font: 500 14px/1 var(--sans); color: var(--ink-3); letter-spacing: -0.01em; text-transform: none; }
.plan .bill { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }
.plan .tag { padding: 12px clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-2); background: rgba(var(--ink-rgb), 0.01); }
.plan ul { list-style: none; margin: 0; padding: 24px clamp(24px, 2.4vw, 36px); display: grid; gap: 12px; align-content: start; font-size: 14px; color: var(--ink-2); flex: 1; }
.plan li { display: flex; gap: 12px; align-items: flex-start; }
.plan li svg { flex: none; width: 18px; height: 18px; padding: 3px; margin-top: 1px; border-radius: 4px; background: var(--accent-tint-2); color: var(--accent-text); }
.plan li.strong { font-weight: 500; color: var(--ink); }
.plan .foot { padding: 0 clamp(24px, 2.4vw, 36px) 28px; }

/* ---- faq ---- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gutter); align-items: start; }
.faq-wrap .sec-head { position: sticky; top: 104px; }
.faq-wrap h2, .layer h2 { font-size: clamp(30px, 3.5vw, 50px); }
@media (max-width: 1023px) { .faq-wrap { grid-template-columns: 1fr; gap: 8px; } .faq-wrap .sec-head { position: static; } }
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 4px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; min-height: 44px; transition: color .15s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform .2s var(--ease), color .2s; }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--accent-text); }
.faq summary:hover { color: var(--accent-2); }
.faq summary:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r-sm); }
.faq .a { padding: 0 4px 28px; color: var(--ink-3); max-width: 72ch; font-size: 14.5px; line-height: 1.65; }
.faq .a p + p { margin-top: 12px; }

/* ---- closing + footer ---- */
.closing-band { border-top: 0; padding-top: 24px; }
.closing { position: relative; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--gutter); align-items: end;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--bg-2);
  padding: clamp(56px, 7vw, 128px) clamp(24px, 4vw, 72px); }
@media (max-width: 1023px) { .closing { display: block; } .closing-ask { margin-top: 28px; } }
.closing .grid-bg { -webkit-mask-image: radial-gradient(ellipse 70% 80% at 20% 0%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 70% 80% at 20% 0%, #000 10%, transparent 70%); }
.closing h2 { position: relative; font-size: clamp(37px, 6vw, 96px); }
.closing-ask { position: relative; }
.closing .lede { max-width: 26em; }
.closing .cta { margin-top: 28px; }
footer.site-foot { position: relative; border-top: 1px solid var(--line); padding: 72px 0 0; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); row-gap: 48px; }
.foot-cols { justify-content: flex-end; }
@media (max-width: 767px) { .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-cols { justify-content: flex-start; } }
.foot-brand .wordmark { margin: 0 0 14px; padding: 0; }
.foot-brand .muted { font-size: 14px; }
.rule-line { margin-top: 20px; font: 400 12px/1.5 var(--mono); letter-spacing: .02em; color: var(--accent-text); }
.foot-cols { display: flex; gap: 72px; flex-wrap: wrap; }
/* the footer's column names are headings to a screen reader, and a label to the eye */
.foot-cols h2 { margin: 0 0 16px; font: 500 11px/1 var(--mono); letter-spacing: .16em; color: var(--ink-4); text-transform: uppercase; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-cols a { color: var(--ink-3); text-decoration: none; display: inline-block; padding: 6px 0; font-size: 14px; transition: color .15s; }
.foot-cols a:hover { color: var(--ink); }
.foot-bottom { margin-top: 64px; padding: 24px 0 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 12px/1.5 var(--mono); color: var(--ink-4); }
.foot-mark { font: 900 10.4vw/.8 var(--sans); letter-spacing: -0.02em; text-transform: uppercase; text-align: center; margin-bottom: -.12em; user-select: none; pointer-events: none; color: rgba(var(--ink-rgb), .05); }

/* ---- forms ---- */
.field { display: grid; gap: 8px; }
.field label { font: 500 11px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--bg); font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: var(--line-3); }
.input:focus-visible { border-color: var(--ink-4); box-shadow: none; }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input.code { font: 500 28px/1 var(--mono); letter-spacing: .42em; text-align: center; padding-left: .42em; min-height: 62px; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
select.input option { background: var(--panel-2); color: var(--ink); }
input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; }
.help { font-size: 13.5px; color: var(--ink-3); }
.help a, .note a, .empty a, .fine a, .panel > header p a { color: var(--accent-text); }
.error { font-size: 13.5px; color: var(--bad); display: flex; gap: 6px; align-items: flex-start; }
.error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.note { border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--r-md); padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.note.good { border-color: var(--good-line); background: var(--good-tint); color: var(--good); }
.note.warn { border-color: var(--warn-line); border-style: dashed; background: var(--warn-tint); color: var(--ink-2); }

/* ---- sign in ---- */
.auth { min-height: calc(100dvh - var(--top)); display: grid; place-items: center; padding: 48px 16px 96px; position: relative; overflow: hidden; }
.auth::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 56px 56px; background-position: center;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 55%); mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 55%); }
.auth::after { content: ""; position: absolute; left: 50%; top: 40%; width: 640px; height: 640px; transform: translate(-50%, -50%); pointer-events: none;
  background: none; }
.auth-card { position: relative; z-index: var(--z-raise); width: min(440px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 40px 32px 32px; }
.auth-card h1 { font-size: clamp(29px, 3.2vw, 35px); }
.auth.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); place-items: stretch; padding: 0; }
.auth.split::before, .auth.split::after { display: none; }
.auth-side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(40px, 5vw, 96px) var(--gutter); border-right: 1px solid var(--line); overflow: hidden;
  background: var(--bg); }
.auth-side .grid-bg { -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 100%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 80% 70% at 30% 100%, #000 10%, transparent 75%); }
.auth-side > * { position: relative; }
/* in the app the header is a rail at the side, so the page has the whole height */
@media (min-width: 1024px) { :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .auth { min-height: 100dvh; } }
.auth-rule { font-size: clamp(35px, 4.6vw, 90px); margin-top: 8px; }
.auth-list { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 14px 44px; font-size: 14.5px; color: var(--ink-2); }
.auth-list li { display: flex; align-items: center; gap: 10px; }
.auth-list svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink); }
.auth-main { position: relative; display: grid; place-items: center; padding: 48px var(--gutter) 72px; }
.huge { font-size: clamp(96px, 19vw, 368px); line-height: .78; color: var(--ink); }
@media (max-width: 1023px) {
  .auth.split { grid-template-columns: minmax(0, 1fr); }
  .auth-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 36px var(--gutter) 40px; }
  /* in the app the header is a rail at the side, so the page has the whole height */
@media (min-width: 1024px) { :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .auth { min-height: 100dvh; } }
.auth-rule { font-size: clamp(27px, 7.2vw, 45px); }
  .auth-list { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
}
.auth-card .lede { font-size: 15px; margin-top: 12px; max-width: none; }
.auth-card form { margin-top: 28px; display: grid; gap: 16px; }
.auth-card .fine { margin-top: 24px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.auth-card .cta { margin-top: 28px; }
.linkish { background: none; border: 0; padding: 8px 0; color: var(--accent-text); font-weight: 500; font-size: 13.5px; min-height: 44px; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.linkish[disabled] { color: var(--ink-4); cursor: default; text-decoration: none; }

/* ---- dashboard ---- */
.dash { padding: 44px 0 0; }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.dash-head h1 { font-size: clamp(27px, 3.2vw, 42px); }
.panel { position: relative; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); margin-bottom: 20px; }
.panel > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.panel > header h2 { font-size: 17px; letter-spacing: -0.02em; }
.panel > header p { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; max-width: 72ch; line-height: 1.55; }
.panel .body { padding: 24px; }
.panel.danger { border-color: var(--bad-line); }
/* The app's columns. A workspace on a wide screen is read side by side - the
   form beside what it makes, the result beside the facts of the run - and one
   column only where there is no room for two. */
.cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.cols .dl { grid-template-columns: minmax(0, 1fr); }
.cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.cols.aside { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.cols > .panel, .col-main > .panel:last-child, .col-side > .panel:last-child { margin-bottom: 0; }
.col-side { position: sticky; top: 24px; }
.cols .row-form, .cols.three .integration .key-form { grid-template-columns: minmax(0, 1fr); }
.cols .row-form > .btn { justify-self: start; }
.cols.aside .meters-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.col-side .kv { grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; font-size: 13.5px; }
.col-side pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.cols.aside > .panel:last-child pre.cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
/* facts laid across the page: pairs in columns, read like a spec sheet */
.kv.spec { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.kv.spec > div { padding: 14px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kv.spec dt { font-size: 10.5px; line-height: 1; }
.kv.spec dd { margin-top: 8px; }
@media (min-width: 1760px) { .cols.aside .meters-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1279px) {
  .cols, .cols.even, .cols.three, .cols.aside { grid-template-columns: minmax(0, 1fr); }
  .col-side { position: static; }
}
.panel.danger > header h2 { color: var(--bad); }
.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (max-width: 767px) { .meters { grid-template-columns: 1fr; } }
.meter { padding: 20px 20px 16px; background: var(--panel); }
.meter .k { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.meter .v { margin: 16px 0 14px; font: 900 29px/.9 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meter .v small { font: 400 13px/1 var(--mono); color: var(--ink-3); letter-spacing: 0; }
.meter .sub { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.meters-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .meters-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .meters-4 { grid-template-columns: minmax(0, 1fr); } }
/* position: a visually hidden label inside a cell is absolutely placed, and with
   no placed ancestor inside the scroller it escapes it: the table scrolled and
   the PAGE scrolled with it, at phone width, for one invisible pixel. */
.table-wrap { overflow-x: auto; position: relative; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); padding: 12px 24px; border-bottom: 1px solid var(--line); white-space: nowrap; background: rgba(var(--ink-rgb), 0.008); }
table.t td { padding: 12px 24px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
/* a row of a list is one line: a name broken over two reads as two names */
table.t:not(.t-detail) td { white-space: nowrap; }
table.t tr:last-child td { border-bottom: 0; }
table.t .r { text-align: right; font-variant-numeric: tabular-nums; }
table.t td.r { font-family: var(--mono); font-size: 12.5px; }
table.t code { font-size: 11.5px; }
tr.go { cursor: pointer; } tr.go td { transition: background-color .12s; } tr.go:hover td { background: rgba(var(--ink-rgb), 0.017); }
tr.go a { color: var(--ink); text-decoration: none; font-weight: 500; } tr.go a:hover { color: var(--accent-2); }
.empty { padding: 44px 24px; text-align: center; color: var(--ink-3); font-size: 14px; }
.empty h3 { color: var(--ink); margin-bottom: 8px; font-size: 16px; }
.empty .cmd { text-align: left; margin: 20px auto 12px; max-width: 720px; }

/* A project */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 20px; border-bottom: 1px solid var(--line); max-width: 100%; }
.tabs button { position: relative; min-height: 42px; padding: 0 16px; border: 0; background: transparent; font: 500 13.5px/1 var(--sans); color: var(--ink-3); cursor: pointer; transition: color .15s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent); }
.tabs button:focus-visible { outline: none; box-shadow: var(--ring); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.worklist { list-style: none; margin: 0; padding: 0; }
.worklist li { padding: 20px 24px; border-top: 1px solid var(--line); }
@media (min-width: 1280px) {
  .worklist li { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); column-gap: 36px; align-items: start; padding: 24px; }
  .worklist li > * { grid-column: 2; max-width: 96ch; }
  .worklist .wl-head { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; align-items: flex-start; margin: 2px 0 0; }
  .worklist .wl-head code { overflow-wrap: anywhere; }
}
.worklist li:first-child { border-top: 0; }
.wl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.wl-head code { font-size: 11px; color: var(--ink-3); background: transparent; }
.wl-what { font-weight: 500; color: var(--ink); } .wl-do { color: var(--ink-2); margin-top: 4px; font-size: 14px; } .worklist .muted { font-size: 12.5px; margin-top: 6px; }
.t-detail td { vertical-align: top; }
.t-detail .why { color: var(--bad); font-size: 12.5px; margin-top: 4px; max-width: 60ch; }
.t-detail .name { font-weight: 600; color: var(--ink); white-space: nowrap; }
.t-detail .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.t-detail .score { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.t-detail .score .bar { flex: 1; } .t-detail .score span { font: 400 12px/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.t-detail .none { color: var(--ink-4); }
.row-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px auto; gap: 12px; align-items: end; }
.row-form .grow { flex: 1 1 240px; min-width: 0; }
@media (max-width: 767px) { .row-form { grid-template-columns: 1fr; } }
.stack-form { display: grid; gap: 16px; } .stack-form > .btn { justify-self: start; }
.bar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-top: 1px solid var(--line); }
.renders { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 0 24px 24px; }
.render { margin: 0; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--panel-2); }
.render img, .render-wait { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg); }
.render-wait { display: grid; place-items: center; color: var(--ink-3); font-size: 13.5px; padding: 16px; text-align: center; }
.render figcaption { padding: 12px 14px; font-size: 13.5px; } .render figcaption p { font-size: 12px; margin-top: 6px; }
#pj-missing h1, #sw-missing h1 { font-size: 26px; margin-bottom: 8px; color: var(--ink); }
@media (max-width: 639px) { .worklist li { padding: 16px; } .renders { padding: 0 16px 16px; } }
/* Keys you lend us */
.lead-note { margin-bottom: 24px; font-size: 14px; line-height: 1.65; max-width: none; border-left: 2px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; }
.integration header { align-items: flex-start; }
.integration .key-form { grid-template-columns: minmax(0, 1fr) auto; }
.integration .or { margin: 14px 0; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.integration .help { margin-top: 14px; max-width: 78ch; }
.integration .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* One sweep, opened */
.crumb { margin-bottom: 12px; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font: 400 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb svg { width: 15px; height: 15px; }
.sw-sub { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-3); font-size: 14px; }
.sw-warn { margin-bottom: 20px; font-size: 14px; line-height: 1.55; }
.reveal { margin-top: 20px; border: 1px solid var(--accent-line); background: var(--accent-tint); border-radius: var(--r-md); padding: 20px; }
.reveal .tok { display: flex; gap: 8px; margin-top: 12px; align-items: stretch; }
.reveal code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--bg); border: 1px solid var(--accent-line); padding: 12px 14px; border-radius: var(--r); font-size: 12.5px; color: var(--accent-2); }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767px) { .dl { grid-template-columns: 1fr; } }
.dl a { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 14px 16px; text-decoration: none; background: var(--bg); transition: border-color .15s, background-color .15s; min-height: 64px; }
.dl a:hover { border-color: var(--line-3); background: var(--panel-2); }
.dl a.mine { border-color: var(--accent-line); background: var(--accent-tint); }
.dl svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.dl a.mine svg { color: var(--accent-text); }
.dl + .help { margin-top: 16px; }
.dl .n { font-weight: 500; } .dl .s { font: 400 11px/1.4 var(--mono); color: var(--ink-3); word-break: break-all; }
pre.cmd { position: relative; margin: 0; background: var(--term-bg); color: var(--term-ink); border: 1px solid var(--term-bg); border-radius: var(--r-md); padding: 16px 20px; font: 400 12.5px/1.75 var(--mono); overflow-x: auto; }
pre.cmd .c { color: var(--term-dim); }
pre.cmd.log { margin-top: 16px; max-height: 320px; overflow: auto; font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 24px); background: var(--panel-2); color: var(--ink); border: 1px solid var(--line-2); padding: 12px 20px; border-radius: var(--r); font-size: 13.5px; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: var(--z-toast); box-shadow: 0 20px 50px -10px rgba(var(--ink-rgb), 0.128), inset 2px 0 0 var(--accent); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.skeleton { background: linear-gradient(90deg, rgba(var(--ink-rgb), 0.028) 25%, rgba(var(--ink-rgb), 0.063) 50%, rgba(var(--ink-rgb), 0.028) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--r-sm); color: transparent !important; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---- the playground ---- */
.pg-hero { padding: 64px 0 36px; }
.pg-hero .wrap.one { display: block; }
.pg-hero h1 { max-width: none; font-size: clamp(37px, 5.3vw, 80px); }
.lede.wide { max-width: 46em; }
.pg-status { display: flex; align-items: flex-start; gap: 10px; font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); margin-bottom: 20px; }
.pg-status::before { content: ""; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ink-4); flex: none; }
.pg-status.good::before { background: var(--good); } .pg-status.bad { color: var(--bad); } .pg-status.bad::before { background: var(--bad); }
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; margin-bottom: 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pg-grid { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.pg-grid .presets { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.pg-grid .out { min-height: 560px; }
@media (max-width: 1279px) { .pg-grid { grid-template-columns: minmax(0, 1fr); } .pg-grid .presets { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .pg-grid .out { min-height: 260px; } }
.preset { text-align: left; background: var(--bg); color: var(--ink); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 88px; transition: background-color .15s; position: relative; }
.preset strong { font-weight: 500; font-size: 14.5px; } .preset span { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.preset:hover { background: var(--bg-2); }
.preset:hover strong { color: var(--accent-2); }
.term { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: var(--term-bg); }
.term-cmd { display: flex; align-items: stretch; padding: 8px 8px 8px 16px; gap: 8px; border-bottom: 1px solid var(--term-line); }
.term-cmd label { color: var(--term-accent); align-self: center; white-space: nowrap; font: 400 13px/1 var(--mono); }
.term-cmd input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--term-ink); font: 400 13px/1 var(--mono); padding: 10px 4px; min-height: 42px; }
.term-cmd input:focus-visible { box-shadow: none; }
.term-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; font-size: 12.5px; color: var(--term-dim); border-bottom: 1px solid var(--term-line); background: rgba(255, 255, 255, .02); }
.term-bar .btn-quiet { color: var(--term-ink); border-color: rgba(255, 255, 255, .18); }
.term-bar .btn-quiet:hover { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .3); }
.term-bar .spacer { flex: 1; }
.term-bar label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.term-bar .btn-quiet { min-height: 30px; }
.exit { font-family: var(--mono); } .exit.good { color: var(--term-good); } .exit.warn { color: var(--term-warn); } .exit.bad { color: var(--term-bad); }
.out { margin: 0; padding: 16px 20px 20px; color: var(--term-ink); font: 400 12.5px/1.55 var(--mono); white-space: pre; overflow: auto; max-height: 68vh; min-height: 260px; tab-size: 8; }
.out .err { color: var(--term-dim); }
.frame .out { max-height: 440px; min-height: 440px; }
.term.flat { border: 0; border-radius: 0; box-shadow: none; }
.files { margin-top: 72px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "head list" "drop list"; column-gap: var(--gutter); align-items: start; }
.files-head { grid-area: head; }
.files .drop { grid-area: drop; }
.files .filelist { grid-area: list; }
.files h2 { font-size: 26px; margin-bottom: 8px; }
@media (max-width: 1279px) { .files { display: block; } }
.drop { position: relative; border: 1px dashed var(--line-3); border-radius: var(--r-md); padding: 28px; background: repeating-linear-gradient(135deg, rgba(var(--ink-rgb), 0.008) 0 10px, transparent 10px 20px); cursor: pointer; margin: 20px 0; transition: border-color .15s, background-color .15s, box-shadow .15s; color: var(--ink-2); }
.drop:hover, .drop.over { border-color: var(--accent); background-color: var(--accent-tint); }
.drop.locked { cursor: default; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.drop.locked:hover { border-color: var(--line-3); background-color: transparent; box-shadow: none; }
.drop strong { color: var(--ink); font-weight: 500; }
.drop .muted { display: block; margin-top: 6px; font-size: 13.5px; }
.filelist { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.filelist td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.filelist code { word-break: break-all; }
.filelist .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 12px; }
@media (max-width: 639px) { .filelist td:nth-child(2) { display: none; } }

/* ---- prose pages ---- */
.prose-page { padding: clamp(48px, 5vw, 88px) 0 0; }
.prose-page + .site-foot { margin-top: 112px; }
.prose-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); align-items: start; }
.prose-head { position: sticky; top: 104px; }
.prose-head h1 { font-size: clamp(35px, 4.3vw, 77px); }
.prose-head p { margin-top: 24px; color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 30em; }
@media (max-width: 1023px) { .prose-grid { display: block; } .prose-head { position: static; margin-bottom: 40px; } }
.prose { max-width: 880px; }
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h1 { font-size: clamp(44px, 6vw, 84px); }
.prose h2 { font-size: 22px; margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose p, .prose li { color: var(--ink-2); margin-top: 14px; line-height: 1.7; font-size: 15px; }
.prose li strong, .prose p strong { color: var(--ink); font-weight: 500; }
.prose a { color: var(--accent-text); }
.prose ul { padding-left: 20px; margin: 0; }
.prose li::marker { color: var(--accent-text); }
.prose table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prose th { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.prose + .site-foot { margin-top: 112px; }

/* ---- the app's pages ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps .dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font: 500 11.5px/1 var(--mono); color: var(--ink-3); background: var(--bg); }
.steps li.done .dot { background: var(--good-tint); border-color: var(--good-line); color: var(--good); }
.steps h3 { font-size: 15.5px; }
.steps p { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; }
.steps li.done h3 { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
@media (max-width: 639px) { .steps li { grid-template-columns: 30px minmax(0, 1fr); } .steps li > .btn { grid-column: 2; justify-self: start; } }
.panel > header .btn { flex: none; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 32px; margin: 0; font-size: 14px; }
.kv dt { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.kv dd { margin: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.doc { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.doc-nav { position: sticky; top: 32px; display: grid; gap: 1px; font-size: 13.5px; border-left: 1px solid var(--line); }
.doc-nav a { color: var(--ink-3); text-decoration: none; padding: 8px 14px; margin-left: -1px; border-left: 1px solid transparent; transition: color .15s, border-color .15s; }
.doc-nav a:hover { color: var(--ink); border-left-color: var(--accent); }
.doc-body { min-width: 0; }
.doc-body section { padding-top: 36px; margin-bottom: 44px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
.doc-body section:first-child { padding-top: 0; border-top: 0; }
/* Explanation beside the code it introduces, where both fit; the code under its
   text where they do not - a command cut off at the edge of a column is worse
   than one a line lower. A section with no code keeps the whole width, and its
   paragraphs keep their measure. */
.doc-row + .doc-row { margin-top: 28px; }
.doc-text p, .doc-text h3 { max-width: 70ch; }
.doc-code { margin-top: 16px; }
.doc-body .doc-code pre.cmd { margin-top: 0; }
.doc-text > h2:first-child, .doc-text > h3:first-child { margin-top: 0; }
@media (min-width: 1600px) {
  .doc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--gutter); align-items: start; }
  .doc-row:not(:has(.doc-code)) .doc-text { grid-column: 1 / -1; }
  .doc-code { margin-top: 0; }
}
.doc-body h2 { font-size: 24px; margin-bottom: 12px; }
.doc-body h3 { font-size: 17px; margin: 28px 0 8px; }
.doc-body p, .doc-body li { color: var(--ink-2); line-height: 1.7; font-size: 14.5px; }
.doc-body a { color: var(--accent-text); }
.doc-body p + p, .doc-body pre + p, .doc-body p + pre, .doc-body ul + p, .doc-body table + p { margin-top: 14px; }
.doc-body ul { padding-left: 20px; margin: 10px 0 0; }
.doc-body table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.doc-body th, .doc-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.doc-body th { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); }
.doc-body pre.cmd { margin-top: 14px; }
@media (max-width: 1023px) { :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .doc-nav { top: 88px; } :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .doc-body section { scroll-margin-top: 88px; } }
@media (max-width: 1023px) { .doc { grid-template-columns: 1fr; gap: 24px; } .doc-nav { position: static; grid-auto-flow: column; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); } .doc-nav a { margin-left: 0; border-left: 0; white-space: nowrap; } }

/* ---- the mini interfaces inside feature stages ---- */
#triage-mini { left: 22px; right: 22px; top: 32px; }
.mini-h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 14px 14px 8px; }
.mini-f { font-size: 12px; line-height: 1.5; color: var(--ink-3); padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.m-a, .m-d, .m-g, .m-h { left: 26px; right: 26px; top: 28px; }
.m-b, .m-e, .m-i { left: 30px; right: -40px; top: 30px; bottom: -20px; }
.m-c { left: 30px; right: -30px; top: 38px; padding: 14px; }
.m-f { left: 26px; right: 26px; top: 32px; padding-bottom: 14px; }
.search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-2); border-radius: var(--r); padding: 10px 12px; font-size: 13px; background: var(--bg); }
.search svg { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 84px; margin-top: 16px; padding: 0 2px; }
.bars i { display: block; border-radius: 2px 2px 0 0; background: rgba(var(--accent-rgb), 0.15); }
.bars i:nth-child(1) { height: 6%; background: rgba(var(--ink-rgb), 0.084); } .bars i:nth-child(2) { height: 26%; } .bars i:nth-child(3) { height: 29%; }
.bars i:nth-child(4) { height: 78%; background: var(--accent); } .bars i:nth-child(5) { height: 86%; background: var(--accent); } .bars i:nth-child(6) { height: 100%; background: var(--accent); }
.removed { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 0; }
.removed .chip { text-decoration: line-through; text-decoration-color: rgba(var(--ink-rgb), var(--strike, 1)); }
.removed .chip:last-child { text-decoration: none; }

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Where the pointer is a finger, everything pressable is at least 44px high: the
   mouse sizes above are right for a mouse and too small for a thumb. */
@media (pointer: coarse) {
  .btn, .btn-quiet, .site .site-end .btn, .account-btn, .menu a, .menu button, .crumb a, .tabs button, .check, .input, .term-cmd input, .term-bar .btn-quiet { min-height: 44px; }
  .site nav a { min-height: 44px; }
}

/* ---- surfaces ----
   A card is a rounded fill and never a line: no borders round a card, a panel, a
   window or a cell, and no corner marks. On the white page a card is a light grey;
   anything inside a card is white again, so nesting reads without a line either.
   Lines are kept only where they mean something to a hand: a field you type into,
   a button, a chip, and the rows of a table. */
.scope, .frame, .stage, .closing, .note, .auth-card, .panel, .render, .plan, .meter, .who-card,
.bento .cell, .client, .preset, .kv.spec > div, .dl a, .mini, .menu, .faq details, .tile, .drop {
  border: 0; border-radius: var(--r-card); }
.scope, .frame, .closing, .note, .auth-card, .panel, .render, .plan, .who-card, .bento .cell,
.client, .preset, .faq details, .drop { background: var(--surface); }
.codecard, .term, pre.cmd, .frame-in { border: 0; border-radius: var(--r-card); }
.frame-in { border-radius: calc(var(--r-card) - 6px); }
.term.flat { border-radius: 0; }

/* cards inside a card are white */
.panel .meter, .panel .kv.spec > div, .panel .note, .panel .dl a, .panel .render, .panel .drop,
.bento .cell .stage, .scope .readout div, .auth-card .note { background: var(--surface-2); }
.bento .cell .stage, .stage { border: 0; }
.stage::after { display: none; }
.who-icon { border: 0; background: var(--surface-2); }
.plan li svg, .auth-list svg { border: 0; background: var(--surface-2); }

/* grids of cards: a gap between them, not a shared line */
.grid-4, .bento, .clients, .presets, .kv.spec, .plans, .meters { border: 0; gap: 12px; background: none; border-radius: 0; overflow: visible; }
.grid-4 > *, .bento > *, .clients > *, .kv.spec > div { border: 0; }
.preset { border: 0; }
.plan + .plan { border: 0; }
.plan.best { box-shadow: none; background: #ebebeb; }
.plan .tag { border: 0; background: none; padding-top: 0; }
.faq { border: 0; display: grid; gap: 8px; }
.faq details { padding: 0 20px; }
.faq .a { padding-bottom: 24px; }

/* the hero's instrument and the pictured windows */
.scope { background: var(--surface); }
.readout { border: 0; gap: 8px; margin-top: 12px; }
.readout div, .readout div:nth-child(odd), .readout div:nth-child(-n+2) { border: 0; border-radius: var(--r-md); padding: 10px 12px; }
.tile { background: var(--surface); }
.tile.v { background: #e6e6e6; }
.tile.scan { background: var(--ink); color: var(--bg); }
.tile.scan svg { color: var(--bg); }
.mini { background: var(--surface-2); }

/* inside a panel, room instead of a rule */
.panel > header { border-bottom: 0; padding-bottom: 8px; }
.panel.danger { box-shadow: inset 0 0 0 1px var(--bad-line); }
.mini-f { border-top: 0; }

/* the rest of the page's rules, gone the same way */
.band { border-top: 0; }
.stats { border: 0; }
.stat + .stat { border-left: 0; }
.loop .n { border: 0; background: var(--surface); }
.loop li.lit .n, .loop li.gate .n { background: var(--ink); color: var(--bg); box-shadow: none; }
.foot-bottom, .app-foot { border-top: 0; }
.menu { box-shadow: 0 24px 60px -12px rgba(var(--ink-rgb), .16); background: var(--surface-2); }
.who-card:hover, .bento .cell:hover, .client:hover, .preset:hover { background: #eeeeee; }
.dash-head { border-bottom: 0; padding-bottom: 8px; }
.steps { display: grid; gap: 8px; padding: 0 16px 16px; }
.steps li { border-bottom: 0; background: var(--surface-2); border-radius: var(--r-md); padding: 14px 16px; }
.panel.danger { box-shadow: none; }
.auth-side { border-right: 0; border-bottom: 0; }
/* the app's rail: a surface of its own rather than a line down the page */
@media (min-width: 1024px) {
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site { border-right: 0; background: var(--surface); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"] { background: var(--surface-2); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .account-btn { border: 0; background: var(--surface-2); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site-end { border-top: 0; }
}


/* ---- the header, detached ----
   Neither the site's bar nor the app's rail touches the edge of the window: each
   is a rounded surface floating a little inside it, like every other card here. */
.site { top: 0; padding: 12px var(--gutter) 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.site.stuck { background: none; border-bottom: 0; }
html .site > .wrap { max-width: 1280px; margin-left: auto; margin-right: auto; min-height: 60px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(244, 244, 244, .86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
html[data-shell="app"] .site > .wrap, html[data-shell="auto"][data-auth="in"] .site > .wrap { max-width: none; }
.site nav a:hover { background: rgba(var(--ink-rgb), .05); }
.site nav a[aria-current="page"] { background: var(--surface-2); }
.site .site-end .btn { border-radius: 999px; }
.site .menu-btn { border: 0; background: var(--surface-2); border-radius: 50%; }
@media (max-width: 1023px) {
  .site nav { left: 12px; right: 12px; top: 84px; border: 0; border-radius: var(--r-card); background: var(--surface); padding: 12px; max-height: calc(100dvh - 96px);
    box-shadow: 0 30px 60px -20px rgba(var(--ink-rgb), .2); z-index: var(--z-menu); }
  .site nav a { border-bottom: 0; border-radius: var(--r-md); }
}
@media (min-width: 1024px) {
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) body { padding-left: calc(var(--rail) + 24px); }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site { top: 12px; bottom: 12px; left: 12px; margin: 0; padding: 0; border-radius: var(--r-card); background: var(--surface); overflow: hidden; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site > .wrap { border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 20px 12px 12px; min-height: 0; margin: 0; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"]::before { display: none; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a[aria-current="page"] { font-weight: 600; }
  :is(html[data-shell="app"], html[data-shell="auto"][data-auth="in"]) .site nav a:hover { background: rgba(var(--ink-rgb), .05); }
}

/* ---- the last of the lines, and one shape for every control ----
   Buttons are pills, as the header's are; a tab bar is a segmented pill; lists
   inside a card are white cards; sections of a long page are separated by room. */
.btn { border-radius: 999px; }
.input, select.input { border-radius: var(--r-md); }
.with { border-left: 0; padding-left: 0; }
.live-list { border-top: 0; display: grid; gap: 8px; }
.live-list li { border-bottom: 0; background: var(--surface); border-radius: var(--r-md); padding: 14px 16px; }
@media (max-width: 1023px) { .plan + .plan { border-top: 0 !important; } .auth-side { border-bottom: 0; } }
@media (max-width: 639px) { .stat + .stat { border-top: 0; } }
footer.site-foot { border-top: 0; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; border-bottom: 0; background: var(--surface); border-radius: 999px; }
.tabs button { min-height: 36px; border-radius: 999px; }
.tabs button[aria-selected="true"] { background: var(--surface-2); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .08); }
.tabs button[aria-selected="true"]::after { display: none; }
.worklist { display: grid; gap: 8px; padding: 0 16px 16px; }
.worklist li, .worklist li:first-child { border-top: 0; background: var(--surface-2); border-radius: var(--r-md); }
.bar-actions { border-top: 0; }
.prose h2 { border-top: 0; padding-top: 0; }
.doc-body section { border-top: 0; padding-top: 0; }
.doc-nav { border-left: 0; gap: 2px; }
.doc-nav a { border-left: 0; margin-left: 0; border-radius: var(--r-md); }
.doc-nav a:hover { background: var(--surface); }