/* soluterminal.com
   One idea: the page is the product. Dark, dense, calm. One accent colour,
   and it always means the same thing: "your move" (download, approve, the
   pane that needs you). No external assets: fonts are self-hosted (OFL, see
   /fonts/OFL.txt) and the CSP allows nothing else. */

@font-face {
  font-family: 'Martian Mono';
  src: url('/fonts/martian-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0a0b0a;
  --bg-1: #101210;
  --bg-2: #161916;
  --bg-3: #1d211d;
  --line: #222622;
  --line-2: #2f342e;
  --fg: #efefe7;
  --fg-2: #b4b5ab;
  --fg-3: #8b8d83;
  --acc: #d4ff3a;
  --acc-ink: #0a0b0a;
  --acc-soft: rgb(212 255 58 / 0.1);
  --acc-line: rgb(212 255 58 / 0.55);
  --err: #ff8a73;
  --close: #c42b1c;

  --mono: 'Martian Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --sans: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 72px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  display: block;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--acc);
}
code,
kbd,
pre {
  font-family: var(--mono);
  font-stretch: 87.5%;
}
::selection {
  background: var(--acc);
  color: var(--acc-ink);
}
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.mono {
  font-family: var(--mono);
  font-stretch: 87.5%;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}

/* ---------- small parts ---------- */

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.35em;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.72em;
  font-weight: 600;
  line-height: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.15s var(--ease);
}
.btn:hover {
  color: inherit;
  border-color: var(--fg-3);
}
.btn:active {
  transform: translateY(1px);
}
.btn-acc {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--acc-ink);
}
.btn-acc:hover {
  color: var(--acc-ink);
  background: #e2ff7a;
  border-color: #e2ff7a;
}
.btn-acc kbd {
  background: rgb(10 11 10 / 0.14);
  color: var(--acc-ink);
}
.btn-lg {
  height: 56px;
  padding: 0 22px;
  font-size: 17px;
}
.btn-sm {
  height: 34px;
  padding: 0 12px;
  font-size: 14px;
  gap: 10px;
}

.label {
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: 0.02em;
  color: var(--fg-3);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--acc);
  color: var(--acc-ink);
  font-weight: 600;
}
.skip-link:focus {
  top: 12px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Opaque: page text scrolling under the sticky header must never show through. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 600 15px/1 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--fg);
}
.brand .tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-3);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 3px 5px;
}
.site-nav {
  margin-left: auto;
}
.site-nav ul {
  display: flex;
  gap: 24px;
}
.site-nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--fg-2);
}
.site-nav a:hover {
  color: var(--fg);
}
@media (max-width: 760px) {
  .site-nav {
    display: none;
  }
  .site-header .wrap {
    gap: 10px;
  }
}

/* ---------- hero ---------- */

.hero {
  padding: clamp(24px, 3vw, 36px) 0 0;
}
.hero-top {
  display: grid;
}
.hero-row {
  margin-top: clamp(18px, 2vw, 26px);
  display: grid;
  grid-template-columns: minmax(0, 50ch) minmax(0, 1fr);
  gap: 20px 56px;
  align-items: start;
}
.hero-row .dl {
  margin-top: 0;
}
.hero-row .fine {
  margin-top: 10px;
}
.eyebrow {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acc);
}
h1 {
  font: 650 clamp(1.9rem, 4.3vw, 3.7rem) / 1.04 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 .h1-line {
  display: block;
}
h1 .h1-quiet {
  color: var(--fg-3);
}
.lede {
  color: var(--fg-2);
  font-size: 17px;
  text-wrap: pretty;
}
.dl {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.dl-meta {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-3);
}
.dl-meta b {
  color: var(--fg-2);
  font-weight: 500;
}
.fine {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-3);
}
.fine a {
  color: var(--fg-2);
}
.dl-next {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--acc);
  background: var(--bg-1);
  font-size: 14px;
  color: var(--fg-2);
}
.dl-next strong {
  color: var(--fg);
}
@media (max-width: 960px) {
  .hero-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .lede {
    font-size: 16px;
  }
  .btn-lg {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- demo ---------- */

.demo {
  margin-top: clamp(24px, 3vw, 32px);
}
.stage {
  position: relative;
  height: clamp(420px, calc(100svh - 470px), 620px);
}

/* The demo window reproduces the app itself, so inside it the app's own
   palette applies (blue focus, yellow approval, green busy, cyan waiting),
   not the site's accent. Values mirror the app's web/src/styles.css. */
.app {
  --a-bg: #0b0d10;
  --a-bg1: #0f1217;
  --a-bg2: #13171c;
  --a-bg3: #1a1f27;
  --a-elev: #181d24;
  --a-fg: #e5e9f0;
  --a-dim: #8b95a7;
  --a-border: #262c36;
  --a-border2: #39424f;
  --a-accent: #7dd3fc;
  --a-accent2: #38bdf8;
  --a-ok: #4ade80;
  --a-warn: #facc15;
  --a-danger: #f87171;
  --a-perm: #b1b9f9;
  /* The two greys below the app's dim, lifted to WCAG AA (4.5:1) on the
     panels they sit on: --a-faint (was #5d6676, 3.1:1) for the "auto" badge
     and disabled diff buttons, --a-hint (was #6b7385, 3.5:1) for placeholders. */
  --a-faint: #7a828f;
  --a-hint: #818897;
  /* Text on the accent and approval colours (badges). */
  --a-on-accent: #071014;
  --a-on-warn: #111111;
  --a-new-bg: #38bdf8;
  --a-on-new: #0b0d10;
  /* The terminal (xterm's 'solu dark' scheme) and what Claude Code and Codex
     draw inside it: Claude's orange spinner and mode line, the prompt rules,
     the band behind a sent prompt, Codex's composer. */
  --a-term-bg: #000000;
  --a-term-fg: #e5e9f0;
  --a-t-dim: #8b95a7;
  --a-t-claude: #e0895f;
  --a-t-mode: #e0a84f;
  --a-t-green: #4ade80;
  --a-t-blue: #60a5fa;
  --a-you-bg: #24272d;
  --a-codex-bg: #1c1f24;
  --a-rule: #4b5262;
  --a-rule-hi: #6b7385;
  /* Translucent washes the app draws in its accent, approval and diff colours. */
  --a-focus-glow: rgb(56 189 248 / 0.45);
  --a-choice-glow: rgb(250 204 21 / 0.6);
  --a-turn-line: rgb(56 189 248 / 0.35);
  --a-turn-unseen: rgb(56 189 248 / 0.14);
  --a-resume-line: rgb(74 222 128 / 0.55);
  --a-reply-bg: #1c1d18;
  --a-reply-line: rgb(250 204 21 / 0.35);
  --a-reply-live: rgb(250 204 21 / 0.7);
  --a-reply-live-ring: rgb(250 204 21 / 0.25);
  --a-reply-hover: #2f2e1d;
  --a-reply-hover-line: #7d6d1f;
  --a-reply-danger: #3a2224;
  --a-reply-danger-line: #7c3a3a;
  --a-reply-pressed: #3b3514;
  --a-add-bg: rgb(74 222 128 / 0.1);
  --a-add-fg: #c4f5d5;
  --a-del-bg: rgb(248 113 113 / 0.1);
  --a-del-fg: #fecaca;
  --a-pop-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.8);
  --a-sans: 'Segoe UI', 'Instrument Sans', system-ui, sans-serif;
  --a-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 34px minmax(0, 1fr) 30px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--a-bg);
  color: var(--a-fg);
  font: 400 12px/1.4 var(--a-sans);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.9);
  transform-origin: 92% 100%;
  transition:
    transform 0.42s var(--ease),
    opacity 0.32s var(--ease);
}
.demo[data-state='closed'] .app {
  transform: translateY(24px) scale(0.92);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.42s var(--ease),
    opacity 0.32s var(--ease),
    visibility 0s 0.42s;
}
.app button {
  font-family: inherit;
}
.app :focus-visible {
  outline: 2px solid var(--a-accent);
  outline-offset: -2px;
}

/* top bar */
.ap-top {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding-left: 10px;
  border-bottom: 1px solid var(--a-border);
  background: var(--a-bg);
}
.ap-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--a-fg);
}
.ap-brand .mark {
  width: 15px;
  height: 15px;
}
.ap-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  margin-left: 6px;
  padding: 0 10px;
  border: 1px solid var(--a-border);
  border-radius: 999px;
  background: var(--a-bg3);
  color: var(--a-fg);
  font-size: 12px;
}
.ap-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-accent);
}
.ap-sp {
  flex: 1;
}
.ap-tb {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border-radius: 4px;
  color: var(--a-dim);
  font-size: 13px;
  font-weight: 600;
}
.ap-tb:hover {
  color: var(--a-fg);
  background: var(--a-bg3);
}
.ap-bell-n {
  position: absolute;
  right: 0;
  top: 0;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--a-warn);
  color: var(--a-on-warn);
  font: 700 9px/14px var(--a-sans);
}
.win-ctl {
  display: flex;
}
.ctl {
  position: relative;
  width: 44px;
  display: grid;
  place-items: center;
}
.ctl::before,
.ctl::after {
  content: '';
  position: absolute;
  background: var(--a-dim);
}
.ctl-min::before {
  width: 10px;
  height: 1px;
}
.ctl-min::after,
.ctl-max::after {
  display: none;
}
.ctl-max::before {
  width: 9px;
  height: 9px;
  background: none;
  border: 1px solid var(--a-dim);
}
.ctl-close::before,
.ctl-close::after {
  width: 12px;
  height: 1.5px;
  background: var(--a-fg);
  transform: rotate(45deg);
}
.ctl-close::after {
  transform: rotate(-45deg);
}
.ctl-close:hover,
.ctl-close:focus-visible {
  background: var(--close);
}

.ap-mid {
  min-height: 0;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
}

/* sidebar: the workspace list */
.ap-side {
  min-height: 0;
  padding: 10px 6px;
  border-right: 1px solid var(--a-border);
  background: var(--a-bg1);
  overflow: hidden;
}
.ap-side-h {
  padding: 0 8px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-dim);
}
.ap-ws-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: 4px;
  text-align: left;
  font-size: 12px;
}
.ap-ws-row:hover {
  background: var(--a-bg2);
}
.ap-ws-row.active {
  background: var(--a-bg3);
}
.ap-ws-row.active .ap-ws-name {
  color: var(--a-accent);
}
.ap-ws-name {
  color: var(--a-fg);
  white-space: nowrap;
}
.ap-ws-meta {
  margin-left: auto;
  color: var(--a-dim);
  font-size: 11px;
  white-space: nowrap;
}
.ap-ws-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--a-accent);
  color: var(--a-on-accent);
  font: 700 10px/16px var(--a-sans);
  text-align: center;
}
.ap-ws-badge.choice {
  background: var(--a-warn);
  color: var(--a-on-warn);
}

/* panes */
.ap-main {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 3px;
  background: var(--a-bg);
}
.ap-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 3px;
  overflow: hidden;
  border: 1px solid var(--a-border);
  border-radius: 4px;
  background: var(--a-term-bg);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ap-pane:focus {
  outline: none;
}
.ap-pane:not(.focused) .ap-head {
  opacity: 0.72;
  /* The app dims an unfocused header to 72%. Its small grey and red text
     would then fall to about 3:1, so the greys and red are lifted here just
     enough to stay at 4.5:1 once dimmed; the header still reads as quieter. */
  --a-dim: #aeb6c3;
  --a-faint: #acb2bb;
  --a-danger: #fca5a5;
}

/* The app's light theme, from the Dark/Light switch in the demo's title bar.
   Chrome values are the app's :root[data-theme='light'] tokens; the terminal
   is xterm's 'solu light' scheme (white, ANSI 600/700 inks). Two kinds of
   change, both for WCAG AA (4.5:1) on every panel the text sits on:
   - --a-dim, --a-accent, --a-ok, --a-warn and --a-danger are the app's
     #5b6675, #0369a1, #15803d, #b45309 and #dc2626, darkened just enough to
     clear 4.5:1 on the darkest surface each sits on (--a-bg3, or the blue
     wash of an unseen turn chip); the app's own fall to 3.3-4.4:1 there;
   - Claude Code's truecolor orange, mode line and permission violet are what
     the app actually shows: xterm's minimumContrastRatio 4.5 darkens them
     against the white terminal. */
.app[data-theme='light'] {
  --a-bg: #f5f7fa;
  --a-bg1: #eceff4;
  --a-bg2: #e3e8ee;
  --a-bg3: #d8dfe8;
  --a-elev: #ffffff;
  --a-fg: #1c2430;
  --a-dim: #576270;
  --a-border: #d3dae3;
  --a-border2: #aeb9c6;
  --a-accent: #03679e;
  --a-accent2: #0284c7;
  --a-ok: #116932;
  --a-warn: #9c4808;
  --a-danger: #b41f1f;
  --a-perm: #676c91;
  --a-faint: #5d6676;
  --a-hint: #5b6675;
  --a-on-accent: #ffffff;
  --a-on-warn: #ffffff;
  --a-new-bg: #03679e;
  --a-on-new: #ffffff;
  --a-term-bg: #ffffff;
  --a-term-fg: #1f2937;
  --a-t-dim: #4b5563;
  --a-t-claude: #a26344;
  --a-t-mode: #916c32;
  --a-t-green: #15803d;
  --a-t-blue: #2563eb;
  --a-you-bg: #f0f0f0;
  --a-codex-bg: #f3f4f6;
  --a-rule: #9ca3af;
  --a-rule-hi: #6b7280;
  --a-focus-glow: rgb(2 132 199 / 0.45);
  --a-choice-glow: rgb(156 72 8 / 0.4);
  --a-turn-line: rgb(2 132 199 / 0.35);
  --a-turn-unseen: rgb(2 132 199 / 0.14);
  --a-resume-line: rgb(17 105 50 / 0.55);
  /* The approval strip's washes, mixed as the app mixes them from its light
     #b45309 and #dc2626: 8% over --bg-2, 18% over --bg-3 on hover. */
  --a-reply-bg: #dfdcdc;
  --a-reply-line: #cab2a2;
  --a-reply-live: rgb(156 72 8 / 0.7);
  --a-reply-live-ring: rgb(156 72 8 / 0.2);
  --a-reply-hover: #d2c6c0;
  --a-reply-hover-line: #c49776;
  --a-reply-danger: #d9bec5;
  --a-reply-danger-line: #d88085;
  --a-reply-pressed: #cfbcb0;
  --a-add-bg: #e8f7ea;
  --a-add-fg: #1a7f37;
  --a-del-bg: #feeae9;
  --a-del-fg: #cf222e;
  --a-pop-shadow: 0 8px 24px rgb(15 23 42 / 0.16);
}
/* Fading an unfocused header to 72% works on black but washes its text out
   against white, so in light the header keeps full strength; the focused
   pane still stands out by its blue ring. */
.app[data-theme='light'] .ap-pane:not(.focused) .ap-head {
  opacity: 1;
  --a-dim: #576270;
  --a-faint: #5d6676;
  --a-danger: #b41f1f;
}
.app[data-theme='light'] .ap-dl.hunk {
  opacity: 1;
}

.ap-pane.focused {
  border-color: var(--a-accent2);
  box-shadow:
    0 0 0 1px var(--a-accent2),
    0 0 12px -2px var(--a-focus-glow);
}
.ap-pane.awaiting-input:not(.focused) {
  border-color: var(--a-accent);
}
.ap-pane.choice-prompt:not(.focused) {
  border-color: var(--a-warn);
  box-shadow:
    0 0 0 1px var(--a-warn),
    0 0 14px -2px var(--a-choice-glow);
  animation: ap-pulse 1.2s ease-in-out infinite;
}
.ap-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--a-border);
  background: var(--a-bg2);
  font-size: 11px;
  white-space: nowrap;
}
.ap-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a-border2);
}
.ap-dot.busy {
  background: var(--a-ok);
  box-shadow: 0 0 6px var(--a-ok);
  animation: ap-pulse 1s ease-in-out infinite;
}
.ap-dot.awaiting-input {
  background: var(--a-accent);
  box-shadow: 0 0 8px var(--a-accent);
  animation: ap-pulse 2s ease-in-out infinite;
}
.ap-dot.choice-prompt {
  background: var(--a-warn);
  box-shadow: 0 0 10px var(--a-warn);
  animation: ap-pulse 0.7s ease-in-out infinite;
}
.ap-idx {
  padding: 0 4px;
  border: 1px solid var(--a-border);
  border-radius: 3px;
  background: var(--a-bg3);
  color: var(--a-dim);
  font: 10px/14px var(--a-mono);
}
.ap-pane.focused .ap-idx {
  color: var(--a-accent);
  border-color: var(--a-accent2);
}
.ap-title {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--a-fg);
  font-weight: 500;
}
.ap-chip {
  padding: 0 6px;
  border-radius: 3px;
  background: var(--a-bg3);
  color: var(--a-warn);
  line-height: 16px;
}
.ap-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--a-fg);
}
.ap-confirm button {
  height: 18px;
  padding: 0 7px;
  border: 1px solid var(--a-border2);
  border-radius: 3px;
  font-size: 11px;
}
.ap-confirm-yes {
  color: var(--a-danger);
}
.ap-ic {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  color: var(--a-dim);
  font-size: 14px;
  line-height: 1;
}
.ap-ic:hover {
  color: var(--a-fg);
  background: var(--a-bg3);
}
.ap-zoom::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 1px;
}
.ap-body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 6px;
  font: 400 12.5px/1.45 var(--a-mono);
  font-variant-ligatures: none;
  color: var(--a-term-fg);
}
.ap-out {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--a-border2) transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ln {
  min-height: 1.45em;
}
.t-dim {
  color: var(--a-t-dim);
}
.t-faint {
  color: var(--a-faint);
}
.t-ok {
  color: var(--a-ok);
}
.t-warn {
  color: var(--a-t-claude);
}
.t-danger {
  color: var(--a-danger);
}
.t-green {
  color: var(--a-t-green);
}
.t-blue {
  color: var(--a-t-blue);
}
.t-accent {
  color: var(--a-accent);
}
.b {
  font-weight: 700;
}
.ln.you {
  margin: 6px 0;
  color: var(--a-dim);
}
.ap-cur {
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--a-fg);
}
.ap-ask {
  margin: 8px 0 4px;
  padding: 6px 10px;
  border: 1px solid var(--a-perm);
  border-radius: 6px;
}
.ap-ask-h {
  color: var(--a-perm);
  font-weight: 700;
}
.ap-ask-cmd {
  margin-top: 6px;
  padding-left: 2ch;
}
.ap-ask-why {
  padding-left: 2ch;
  color: var(--a-dim);
}
.ap-ask-q {
  margin-top: 8px;
}
.ap-ask-opt {
  color: var(--a-fg);
}
.ap-ask-opt.sel {
  color: var(--a-perm);
}
/* Codex draws its prompt without a box: a heading, the command, a › menu. */
.ap-ask.codex {
  padding: 4px 0 0 2ch;
  border: 0;
}
.ap-ask.codex .ap-ask-h {
  color: var(--a-fg);
}
.ap-ask.codex .ap-ask-cmd {
  padding-left: 0;
  margin-top: 8px;
}
.ap-ask.codex .ap-ask-why {
  padding-left: 0;
  margin-bottom: 8px;
}
.ap-ask.codex .ap-ask-opt.sel {
  color: var(--a-accent);
}
.ap-ask-foot {
  margin-top: 8px;
  color: var(--a-dim);
}
.ap-composer.codex {
  border-color: transparent;
  background: var(--a-bg2);
}
.ap-reply {
  position: absolute;
  z-index: 6;
  top: 8px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 24px);
  padding: 4px 6px;
  border: 1px solid var(--a-reply-line);
  border-radius: 6px;
  background: var(--a-reply-bg);
  box-shadow: 0 8px 22px rgb(0 0 0 / 0.28);
  font-family: var(--a-sans);
}
.ap-reply-label {
  margin-right: 4px;
  color: var(--a-dim);
  font-size: 11px;
}
.ap-reply-btn {
  min-width: 32px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--a-border);
  border-radius: 3px;
  background: var(--a-bg3);
  color: var(--a-fg);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.ap-reply-btn:hover {
  background: var(--a-reply-hover);
  border-color: var(--a-reply-hover-line);
}
.ap-reply-btn.danger:hover {
  background: var(--a-reply-danger);
  border-color: var(--a-reply-danger-line);
}
.ap-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid var(--a-rule);
  border-radius: 6px;
}
.ap-caret {
  color: var(--a-fg);
}
.ap-input {
  flex: 1;
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--a-fg);
  font: inherit;
  outline: none;
}
.app .ap-input:focus-visible {
  outline: none;
}
.ap-composer:focus-within {
  border-color: var(--a-rule-hi);
}
.ap-input::placeholder {
  color: var(--a-hint);
}
.ap-input:disabled {
  cursor: default;
}
.ap-hint {
  padding: 3px 2px 0;
  font-size: 11px;
}

/* status bar */
.ap-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-top: 1px solid var(--a-border);
  background: var(--a-bg2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.ap-sl,
.ap-sr {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.ap-sl {
  flex: 1;
}
.ap-sdot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a-dim);
}
.ap-sdot.busy {
  background: var(--a-ok);
}
.ap-sdot.awaiting-input {
  background: var(--a-accent);
}
.ap-sdot.choice-prompt {
  background: var(--a-warn);
}
.ap-path {
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--a-mono);
}
.ap-sep,
.ap-dim {
  color: var(--a-dim);
}
.ap-port {
  color: var(--a-fg);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.ap-ports {
  position: absolute;
  right: 12px;
  bottom: 36px;
  z-index: 8;
  width: min(340px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--a-border2);
  border-radius: 6px;
  background: var(--a-elev);
  box-shadow: var(--a-pop-shadow);
}
.ap-pp-h {
  display: flex;
  justify-content: space-between;
  color: var(--a-dim);
}
.ap-pp-h b {
  color: var(--a-fg);
}
.ap-pp-h label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ap-pp-row {
  display: grid;
  grid-template-columns: 56px auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--a-border);
}
.ap-pp-port {
  color: var(--a-accent);
  text-decoration: underline;
}
.ap-toast {
  position: absolute;
  right: 12px;
  bottom: 40px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 24px);
  padding: 9px 12px;
  border: 1px solid var(--a-border2);
  border-left: 3px solid var(--a-warn);
  border-radius: 6px;
  background: var(--a-elev);
  box-shadow: var(--a-pop-shadow);
}
.ap-toast-go {
  color: var(--a-accent);
  text-decoration: underline;
}
.ap-banner {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 10;
  transform: translate(-50%, -50%);
  padding: 9px 16px;
  border: 1px solid var(--a-border2);
  border-radius: 6px;
  background: var(--a-elev);
  box-shadow: var(--a-pop-shadow);
  font-size: 13px;
  white-space: nowrap;
}
.app.restarting .ap-main,
.app.restarting .ap-side {
  opacity: 0.5;
}
@keyframes ap-pulse {
  50% {
    opacity: 0.55;
  }
}

/* The moment: the window is closed, the sessions are not. */
.desk {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgb(255 255 255 / 0.012) 14px 15px);
  animation: fade-in 0.4s var(--ease) 0.15s both;
}
.desk-body {
  align-self: center;
  justify-self: center;
  width: min(760px, 100%);
  padding: 24px clamp(16px, 5vw, 56px);
}
.desk-cap {
  margin-bottom: 14px;
  color: var(--fg-3);
}
.desk-title {
  font: 650 clamp(1.4rem, 2.6vw, 2rem) / 1.15 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.02em;
}
.desk-sub {
  margin-top: 8px;
  color: var(--fg-2);
}
.desk-act {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.desk-clock {
  font: 500 12px/1 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.taskbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 40px;
  padding: 0 10px;
  border-top: 1px solid var(--line);
  background: rgb(16 18 16 / 0.9);
}
.tray-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: 4px;
}
.tray-btn:hover {
  background: var(--bg-3);
}
.taskbar-clock {
  padding: 0 6px 0 10px;
  font: 500 11px/1 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip-btn {
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 500 12px/1.2 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-2);
  text-align: left;
}
.chip-btn:hover {
  color: var(--fg);
  border-color: var(--fg-3);
}
.chip-btn.on {
  color: var(--fg);
  border-color: var(--acc);
}
@media (max-width: 1180px) {
  .hide-md {
    display: none;
  }
}
@media (hover: none), (max-width: 720px) {
  .btn kbd,
  .try kbd {
    display: none;
  }
}
@media (max-width: 900px) {
  .ap-mid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ap-side {
    display: none;
  }
}
@media (max-width: 720px) {
  .hide-sm,
  .ctl-min,
  .ctl-max {
    display: none;
  }
  .ap-input {
    font-size: 16px;
  }
  .ap-reply {
    position: static;
    margin-bottom: 6px;
    max-width: none;
  }
}

/* ---------- sections ---------- */

.section {
  padding-top: clamp(48px, 5vw, 72px);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 16px 40px;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
h2 {
  font: 600 clamp(1.55rem, 2.9vw, 2.45rem) / 1.12 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 34ch;
}
.section-body {
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 16px 40px;
}
.section-body > :first-child {
  grid-column: 2;
}
.problem .section-body p {
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--fg-2);
}
.problem .section-body p strong {
  color: var(--fg);
  font-weight: 600;
}
@media (max-width: 760px) {
  .section-head,
  .section-body {
    grid-template-columns: 1fr;
  }
  .section-body > :first-child {
    grid-column: auto;
  }
}

/* Features: a spec sheet, each row wired to the live demo. */
.feats {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}
.feat {
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 0.9fr) minmax(0, 1.25fr) 150px;
  gap: 8px 40px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.feat-n {
  font: 500 12px/1 var(--mono);
  color: var(--fg-3);
}
.feat h3 {
  font: 600 16px/1.35 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
}
.feat p {
  color: var(--fg-2);
  font-size: 16px;
}
.feat-try {
  grid-row: 1;
  grid-column: 4;
  justify-self: end;
}
.feat .feat-key {
  grid-column: 3;
  font: 500 12px/1.6 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.feat .feat-key kbd {
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 10.5px;
}
.try {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  font: 500 12px/1 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-2);
  white-space: nowrap;
}
.try:hover {
  color: var(--fg);
  border-color: var(--fg-3);
}
.try kbd {
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 10.5px;
}
@media (max-width: 1100px) {
  .feat {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .feat p,
  .feat .feat-key {
    grid-column: 2 / -1;
  }
  .feat-try {
    grid-row: 1;
    grid-column: 3;
  }
}
@media (max-width: 520px) {
  .feat {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .feat-try {
    grid-row: auto;
    grid-column: 2;
    justify-self: start;
  }
}

/* Account: what works without one, and what a free account adds. */
.tiers {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.tier {
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
}
.tier-acc {
  border-color: var(--acc-line);
  background: var(--acc-soft);
}
.tier h3 {
  font: 600 16px/1.35 var(--mono);
  font-stretch: 87.5%;
}
.tier-sub {
  margin-top: 6px;
  color: var(--fg-3);
  font-size: 15px;
}
.tier ul {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.tier li {
  position: relative;
  padding-left: 20px;
  color: var(--fg-2);
  font-size: 16px;
}
.tier li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--fg-3);
}
.tier-acc li::before {
  background: var(--acc);
}
@media (max-width: 760px) {
  .tiers {
    grid-template-columns: 1fr;
  }
}

/* How it works: three steps on one rail. */
.steps {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding: 26px 28px 0 0;
  border-top: 2px solid var(--line-2);
}
.step:last-child {
  border-top-color: var(--acc);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -13px;
  left: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-2);
  font: 600 11px/1 var(--mono);
  color: var(--fg-2);
}
.step:last-child::before {
  border-color: var(--acc);
  color: var(--acc);
}
.step h3 {
  font: 600 16px/1.35 var(--mono);
  font-stretch: 87.5%;
}
.step p {
  margin-top: 6px;
  color: var(--fg-2);
  font-size: 16px;
}
.works {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
}
.works ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.works li {
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font: 500 12.5px/1 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg);
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* Free during beta: the closing call to action. */
.beta {
  margin-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: var(--bg-1);
}
.beta .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 56px;
  align-items: center;
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(40px, 6vw, 64px);
}
.beta p {
  margin-top: 12px;
  max-width: 58ch;
  color: var(--fg-2);
}
.beta .dl {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 860px) {
  .beta .wrap {
    grid-template-columns: 1fr;
  }
}

/* FAQ: everything open, two columns. Straight answers need no accordions. */
.faq {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 56px;
}
.faq > div {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  break-inside: avoid;
}
.faq dt {
  font: 600 15px/1.4 var(--mono);
  font-stretch: 87.5%;
}
.faq dd {
  margin-top: 8px;
  color: var(--fg-2);
  font-size: 16px;
}
.faq dd strong {
  color: var(--fg);
}
.faq dd code {
  font: 500 0.86em var(--mono);
  color: var(--fg);
  overflow-wrap: anywhere;
}
@media (max-width: 860px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* ---------- footer ---------- */

.site-footer {
  margin-top: clamp(56px, 7vw, 88px);
  border-top: 1px solid var(--line);
}
main:has(> .beta:last-child) + .site-footer {
  margin-top: 0;
  border-top: 0;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  padding-top: 28px;
  padding-bottom: 40px;
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.site-footer a {
  text-decoration: none;
  color: var(--fg-2);
}
.site-footer a:hover {
  color: var(--acc);
}

/* ---------- shortcuts dialog ---------- */

.help {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--fg);
  box-shadow: 0 40px 80px -20px rgb(0 0 0 / 0.9);
}
.help::backdrop {
  background: rgb(0 0 0 / 0.6);
}
.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.help-head h2 {
  font-size: 15px;
  letter-spacing: 0;
}
.help-close {
  font: 500 12px/1 var(--mono);
  color: var(--fg-3);
  padding: 6px;
}
.help dl {
  padding: 8px 18px;
}
.help dl > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.help dl > div:last-child {
  border-bottom: 0;
}
.help dt {
  color: var(--fg-2);
}
.help dd kbd {
  margin-left: 4px;
  background: var(--bg-3);
  color: var(--fg);
}
.help-sub {
  padding: 12px 18px 0;
  border-top: 1px solid var(--line);
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.help-app {
  display: block;
  font: 500 11px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.help-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--fg-3);
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-2);
  cursor: pointer;
}
.switch input {
  appearance: none;
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.switch input::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fg-3);
  transition: transform 0.15s var(--ease);
}
.switch input:checked {
  background: var(--acc);
  border-color: var(--acc);
}
.switch input:checked::after {
  transform: translateX(14px);
  background: var(--acc-ink);
}

/* ---------- download page ---------- */

.dlp {
  padding-top: clamp(32px, 5vw, 64px);
}
.dlp-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 500px);
  gap: 32px 64px;
  align-items: start;
}
.dlp h1 {
  font-size: clamp(2rem, 4vw, 3.4rem);
}
.dlp-top .lede {
  margin-top: 16px;
  max-width: 46ch;
}
.dlp-top .dl {
  margin-top: 28px;
}
.spec {
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
  overflow: hidden;
  font: 400 13px/1.4 var(--mono);
  font-stretch: 87.5%;
}
.spec-head {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-3);
  font-size: 12px;
}
.spec dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.spec dl > div:last-child {
  border-bottom: 0;
}
.spec dt {
  color: var(--fg-3);
}
.spec dd {
  color: var(--fg);
  overflow-wrap: anywhere;
}
.hash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.hash code {
  flex: 1;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.copy {
  flex: none;
  height: 26px;
  padding: 0 9px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  font: 500 11.5px/1 var(--mono);
  color: var(--fg-2);
}
.copy:hover {
  color: var(--fg);
  border-color: var(--fg-3);
}
.copy[data-copied='true'] {
  color: var(--acc-ink);
  background: var(--acc);
  border-color: var(--acc);
}
.spec .note {
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  color: var(--fg-3);
  font-size: 12px;
  line-height: 1.6;
}
.spec .note:empty {
  display: none;
}
.spec .note code {
  color: var(--fg-2);
}

.install {
  margin-top: clamp(56px, 8vw, 96px);
}
.install-steps {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.istep {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  padding: 20px;
  background: var(--bg);
}
.istep h3 {
  font: 600 15px/1.3 var(--mono);
  font-stretch: 87.5%;
}
.istep p {
  color: var(--fg-2);
  font-size: 15px;
}
.istep p code {
  font-size: 0.9em;
  color: var(--fg);
}
.istep p strong {
  color: var(--fg);
}
.istep-n {
  font: 500 12px/1 var(--mono);
  color: var(--fg-3);
}
.istep-wide {
  grid-column: span 2;
}
.istep-hl .istep-n {
  color: var(--acc);
}
.install[data-started='true'] [data-install-label] {
  color: var(--acc);
}
.spec .note .copy {
  margin: 0 0 0 6px;
  vertical-align: middle;
}
@media (max-width: 1000px) {
  .dlp-top {
    grid-template-columns: 1fr;
  }
  .install-steps {
    grid-template-columns: 1fr;
  }
  .istep-wide {
    grid-column: auto;
  }
}
@media (max-width: 480px) {
  .ss {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 620px) {
  .install-steps {
    grid-template-columns: 1fr;
  }
  .istep-wide {
    grid-column: auto;
  }
}

/* SmartScreen, drawn schematically: what you will see, and where to click. */
.ss {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-self: end;
}
.ss-frame {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 118px;
  padding: 12px;
  border-radius: 4px;
  background: #1f4e8c;
  color: #fff;
  font: 400 11px/1.35 var(--sans);
}
.ss-frame b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}
.ss-bars {
  display: grid;
  align-content: start;
  gap: 5px;
}
.ss-bars i {
  height: 4px;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.35);
}
.ss-bars i:nth-child(2) {
  width: 80%;
}
.ss-bars i:nth-child(3) {
  width: 55%;
}
.ss-link {
  justify-self: start;
  text-decoration: underline;
}
.ss-btns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.ss-btn {
  white-space: nowrap;
  padding: 4px 8px;
  border: 1px solid rgb(255 255 255 / 0.7);
  font-size: 10.5px;
}
.ss-target {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}
.ss-cap {
  font: 500 11px/1.3 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
  margin-top: 6px;
}
.ss-cap b {
  color: var(--acc);
  font-weight: 600;
}
.term {
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  font: 400 13px/1.7 var(--mono);
  font-stretch: 81%;
  color: var(--fg);
  align-self: end;
}
.term .ps {
  color: var(--fg-3);
}
.chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  border: 1px solid var(--acc-line);
  color: var(--fg);
  font: 500 0.88em/1.5 var(--mono);
  font-stretch: 87.5%;
  white-space: nowrap;
}
.other-os {
  margin-top: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: 16px 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.other-os p {
  color: var(--fg-2);
}
@media (max-width: 760px) {
  .other-os {
    grid-template-columns: 1fr;
  }
}

/* ---------- legal pages ---------- */

.legal {
  max-width: 760px;
  padding-top: clamp(32px, 5vw, 64px);
}
.legal h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
.legal .updated {
  margin-top: 14px;
  color: var(--fg-3);
  font-size: 15px;
}
.legal h2 {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  letter-spacing: -0.01em;
  max-width: none;
}
.legal p,
.legal ul {
  margin-top: 14px;
  color: var(--fg-2);
}
.legal ul {
  display: grid;
  gap: 10px;
}
.legal li {
  position: relative;
  padding-left: 20px;
}
.legal li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 6px;
  height: 1px;
  background: var(--fg-3);
}
.legal strong {
  color: var(--fg);
  font-weight: 600;
}
.legal code {
  font-size: 0.86em;
  color: var(--fg);
}
.legal .short {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
}
.legal .short h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- help pages (built on the legal layout) ---------- */

.helpdoc .crumb {
  margin-bottom: 14px;
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.helpdoc .crumb a {
  color: var(--fg-2);
}
.helpdoc .lede {
  margin-top: 14px;
}
.helpdoc ol.help-steps {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  color: var(--fg-2);
  counter-reset: step;
}
.helpdoc ol.help-steps > li {
  position: relative;
  padding-left: 34px;
  counter-increment: step;
}
.helpdoc ol.help-steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  font: 600 11px/1 var(--mono);
  color: var(--fg);
  background: none;
}
.helpdoc li ul {
  margin-top: 10px;
  margin-bottom: 10px;
}
.helpdoc a {
  color: var(--fg);
}
.helpdoc a:hover {
  color: var(--acc);
}
.helpdoc kbd {
  margin: 0 1px;
  vertical-align: 0.1em;
}

/* Install commands: one card per agent, a row per shell. */
.cmds {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}
.cmds section {
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
}
.cmds h3 {
  font-size: 15px;
}
.cmds dl {
  margin-top: 6px;
  display: grid;
}
.cmds dl > div {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.cmds dt {
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.cmds dd {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cmds code {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* Problem / fix rows. */
.fixes {
  margin-top: 28px;
  border-top: 1px solid var(--line-2);
}
.fixes-head,
.fix {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 6px 24px;
}
.fixes-head {
  padding: 14px 0 8px;
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.fix {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.fix h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.legal .fix p {
  margin-top: 0;
}
@media (max-width: 640px) {
  .fixes-head {
    display: none;
  }
  .fix {
    grid-template-columns: 1fr;
  }
}

/* Shortcuts. */
.keys {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
  border-top: 1px solid var(--line-2);
}
.keys th {
  padding: 14px 24px 8px 0;
  text-align: left;
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.keys td {
  padding: 11px 24px 11px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg-2);
}
.keys td:first-child {
  white-space: nowrap;
  color: var(--fg);
}
@media (max-width: 520px) {
  .keys td,
  .keys th {
    padding-right: 12px;
  }
  .keys td:first-child {
    white-space: normal;
  }
}

/* The help index. */
.legal .help-topics > li {
  padding-left: 0;
}
.legal .help-topics > li::before {
  content: none;
}
.help-topics {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}
.help-topics a {
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
  text-decoration: none;
  transition: border-color 0.15s;
}
.help-topics a:hover {
  border-color: var(--acc-line);
  color: var(--fg);
}
.help-topics strong {
  font-size: 17px;
  line-height: 1.35;
}
.help-topics span:last-child {
  color: var(--fg-2);
  font-size: 15px;
}
.help-n {
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg-3);
}
.legal .help-still {
  margin-top: 32px;
}

.help-pager {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font: 500 13px/1.5 var(--mono);
  font-stretch: 87.5%;
}
.helpdoc .help-pager a {
  text-decoration: none;
  color: var(--fg-2);
}
.helpdoc .help-pager a:hover {
  color: var(--acc);
}
.help-pager a:last-child {
  text-align: right;
}

.legal .help-mail {
  margin-top: 18px;
}
.help-mail .btn {
  white-space: normal;
  height: auto;
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow-wrap: anywhere;
}
.helpdoc .help-mail .btn,
.helpdoc .help-mail .btn:hover {
  color: var(--acc-ink);
}

/* ---------- motion ---------- */

@keyframes pulse {
  50% {
    opacity: 0.25;
  }
}
@keyframes line-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- v3: not on Windows, flags, strengths ---------- */

/* Not on Windows: send the link to yourself. A mailto and the clipboard only:
   no form, nothing stored, no request. */
.elsewhere {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--fg-2);
  font-size: 15px;
}
.elsewhere-act {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}
.elsewhere-act .btn {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--fg);
}
.elsewhere-act .btn[data-copied='true'] {
  border-color: var(--acc-line);
  color: var(--acc);
}
.elsewhere-act .fine {
  margin-top: 0;
}
.elsewhere-url {
  margin-top: 10px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.elsewhere-url code {
  user-select: all;
  -webkit-user-select: all;
  color: var(--fg-2);
}

.ap-pane.choice-prompt .ap-reply {
  border-color: var(--a-reply-live);
  box-shadow:
    0 0 0 1px var(--a-reply-live-ring),
    0 8px 22px rgb(0 0 0 / 0.28);
}

.feat h3 kbd,
.feat p kbd {
  background: var(--bg-3);
  color: var(--fg-2);
  font-size: 0.75em;
}
.turn-chip {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--bg-2);
  font: 500 13px/1.5 var(--mono);
  font-stretch: 87.5%;
  color: var(--fg);
  white-space: nowrap;
}
.feat-media {
  grid-column: 3 / -1;
  margin-top: 14px;
  max-width: 420px;
}
.feats-also {
  margin-top: 20px;
  color: var(--fg-3);
  font-size: 15px;
}
.steps h3 code,
.steps-note code {
  font: 500 0.92em var(--mono);
  color: var(--acc);
}
.step h3 a {
  color: inherit;
}
.steps-note {
  margin-top: 28px;
  color: var(--fg-3);
  font-size: 15px;
}
@media (max-width: 1100px) {
  .feat-media {
    grid-column: 2 / -1;
  }
}


/* ---------- v4: agent collaboration ---------- */

.elsewhere-act:first-child {
  margin-top: 0;
}

/* The app's turn readout in a pane header (PaneTurnChip): the last finished
   turn, "Δ 1 file · +12 −7 · 4m ago" or "done just now"; "new" while unseen. */
.ap-turn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid var(--a-border);
  border-radius: 10px;
  background: var(--a-bg3);
  color: var(--a-dim);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ap-turn.changed {
  color: var(--a-fg);
  border-color: var(--a-turn-line);
}
.ap-turn.unseen {
  color: var(--a-fg);
  background: var(--a-turn-unseen);
  border-color: var(--a-accent2);
}
.ap-turn-new {
  margin-right: 3px;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--a-new-bg);
  color: var(--a-on-new);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ap-turn .diff-a {
  color: var(--a-ok);
}
.ap-turn .diff-r {
  color: var(--a-danger);
}
@media (max-width: 520px) {
  .ap-turn.done:not(.unseen) {
    display: none;
  }
}


/* Without / with: two columns, the "with" side in the page's own colour. */
.vs {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--line-2);
  font-size: 16px;
}
.vs th {
  padding: 18px 24px 10px 0;
  text-align: left;
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.vs th + th {
  color: var(--acc);
}
.vs td {
  width: 50%;
  padding: 12px 24px 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--fg-3);
}
.vs td + td {
  color: var(--fg);
}
@media (max-width: 520px) {
  .vs {
    font-size: 15px;
  }
  .vs th,
  .vs td {
    padding-right: 14px;
  }
}

/* More it does: a compact grid, one short line each. */
.more {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.more li {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  font: 500 14px/1.45 var(--mono);
  font-stretch: 87.5%;
}
@media (max-width: 960px) {
  .more {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .more {
    grid-template-columns: 1fr;
  }
}
/* Free-account copy is wrapped for the guardrail check, not for layout. */
.feat-acc {
  display: contents;
}
/* v4: each reason is an outcome; its proof sits under it in small type. */
.feat p.feat-proof {
  color: var(--fg-3);
  font-size: 14.5px;
  line-height: 1.5;
}
/* The hero's second line: between the H1 and the body in size, same face. */
.h1-sub {
  margin-top: 12px;
  font: 600 clamp(1.2rem, 2.2vw, 1.8rem) / 1.2 var(--mono);
  font-stretch: 81%;
  letter-spacing: -0.02em;
  color: var(--fg-2);
  text-wrap: balance;
}

/* ---------- v5: one guided demo ---------- */

/* Chapter tabs above the window, with Pause / Play / Replay beside them. */
.demo-bar {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}
.demo-tabs {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.demo-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
  color: var(--fg-3);
  font: 500 13px/1.25 var(--mono);
  font-stretch: 87.5%;
}
.demo-tab:hover {
  color: var(--fg-2);
  border-color: var(--fg-3);
}
.demo-tab[aria-selected='true'] {
  color: var(--fg);
  border-color: var(--acc-line);
  background: var(--acc-soft);
}
.demo-tab-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
}
.demo-tab[aria-selected='true'] .demo-tab-n {
  border-color: var(--acc);
  background: var(--acc);
  color: var(--acc-ink);
}
.demo-tab-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
.demo-tab-bar i {
  display: block;
  height: 100%;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
}
.demo-tab.done .demo-tab-bar i {
  background: var(--fg-3);
}
.demo-play {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--fg-2);
  font: 500 13px/1 var(--mono);
  font-stretch: 87.5%;
}
.demo-play:hover {
  color: var(--fg);
  border-color: var(--fg-3);
}
.demo-play-ic {
  width: 10px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.demo-play[data-mode='play'] .demo-play-ic {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent currentColor;
}
.demo-play[data-mode='replay'] .demo-play-ic {
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

/* A fixed stage: the page never jumps while the story plays. */
.stage {
  height: clamp(480px, calc(100svh - 330px), 620px);
}
.demo-foot {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.demo-narr {
  min-height: 3em;
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.5;
}
.demo-narr-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--fg-3);
  font: 500 11.5px/1.7 var(--mono);
  font-stretch: 87.5%;
  white-space: nowrap;
}
.demo-try {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  min-height: 34px;
}
/* Hidden but still holding its space, so nothing below moves. */
.demo-try[hidden] {
  display: flex !important;
  visibility: hidden;
}
.demo-try-h {
  flex: none;
  color: var(--fg);
  font: 600 13px/1 var(--mono);
  font-stretch: 87.5%;
}
.demo-try .chips {
  min-width: 0;
}

/* ---- the app window, as 0.0.1208 draws it ---- */
.ap-top {
  align-items: center;
  gap: 8px;
}
.ap-logo .mark {
  width: 15px;
  height: 15px;
}
.ap-icon {
  width: 14px;
  height: 11px;
  border: 1.5px solid var(--a-dim);
  border-radius: 2px;
  box-shadow: inset 4px 0 0 -2.5px var(--a-dim);
}
.ap-ctx {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border: 1px solid var(--a-border);
  border-radius: 5px;
  background: var(--a-bg2);
  color: var(--a-fg);
  white-space: nowrap;
}
.ap-ctx-bolt {
  color: var(--a-dim);
  font-size: 10px;
}
.ap-wsname {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  white-space: nowrap;
}
.ap-layers {
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--a-dim);
  border-radius: 2px;
  transform: rotate(45deg) scaleY(0.6);
}
.ap-tb {
  cursor: default;
}
.ap-tb.on {
  color: var(--a-warn);
}
/* The demo's own Dark/Light switch (not part of the app's title bar): it
   flips the window to the app's light theme and leaves the page dark. The
   change is instant, with no transition. */
.ap-theme {
  display: inline-flex;
  gap: 2px;
  padding: 1px;
  border: 1px solid var(--a-border);
  border-radius: 5px;
  background: var(--a-bg2);
}
.ap-theme-btn {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--a-dim);
  font: 500 11px/22px var(--a-sans);
  cursor: pointer;
}
.ap-theme-btn:hover {
  color: var(--a-fg);
}
.ap-theme-btn[aria-pressed='true'] {
  background: var(--a-elev);
  color: var(--a-fg);
  box-shadow: 0 0 0 1px var(--a-border2);
}
.app .ap-theme-btn:focus-visible {
  outline-offset: 1px;
}
.ctl {
  align-self: stretch;
}
.ap-side-h,
.ap-side-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ap-side-n {
  padding: 0 5px;
  border-radius: 7px;
  background: var(--a-bg3);
  font-size: 9.5px;
  letter-spacing: 0;
}
.ap-side-plus {
  margin-left: auto;
  font-size: 13px;
  font-weight: 400;
}
.ap-side {
  display: flex;
  flex-direction: column;
}
.ap-side-foot {
  margin-top: auto;
  padding: 8px;
  border-top: 1px solid var(--a-border);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a-dim);
}
.ap-ws-row {
  align-items: flex-start;
  cursor: default;
}
.ap-ws-row .ap-dot {
  margin-top: 4px;
}
.ap-ws-text {
  display: grid;
  min-width: 0;
  flex: 1;
}
.ap-ws-row .ap-ws-meta {
  margin-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10.5px;
}
.ap-ws-row .ap-ws-badge {
  flex: none;
}
.ap-main {
  display: flex;
  flex-direction: column;
}
.ap-nojs {
  padding: 24px;
  color: var(--a-dim);
}
.ap-nojs a {
  color: var(--a-accent);
}

/* Three panes: Claude Code on the left, Codex and a second Claude session
   stacked on the right; the diff tile splits in beside pane 1. */
.ap-ws {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}
.ap-ws > [data-pane='c1'] {
  grid-column: 1;
  grid-row: 1 / 3;
}
.ap-ws > [data-pane='cx'] {
  grid-column: 2;
  grid-row: 1;
}
.ap-ws > [data-pane='c3'] {
  grid-column: 2;
  grid-row: 2;
}
.ap-ws.with-diff {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.8fr);
}
.ap-ws.with-diff > .ap-diff {
  grid-column: 2;
  grid-row: 1 / 3;
}
.ap-ws.with-diff > [data-pane='cx'],
.ap-ws.with-diff > [data-pane='c3'] {
  grid-column: 3;
}
.ap-switch {
  display: none;
}
.ap-head {
  gap: 6px;
}
.ap-badge {
  padding: 0 4px;
  border: 1px solid var(--a-border);
  border-radius: 3px;
  color: var(--a-faint);
  font: 10px/14px var(--a-mono);
}
.ap-resume {
  border-color: var(--a-resume-line);
  color: var(--a-ok);
}
.ap-mem {
  color: var(--a-dim);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.ap-icons {
  display: flex;
  gap: 2px;
}
.ap-icons .ap-ic {
  width: 16px;
  font-size: 12px;
}
.ap-max::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 1px;
}
.ap-last {
  display: flex;
  gap: 6px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--a-border);
  background: var(--a-bg1);
  color: var(--a-dim);
  font: 10.5px/1.5 var(--a-mono);
  white-space: nowrap;
}
.ap-last-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-body {
  font-size: 12px;
}
.t-fg {
  color: var(--a-fg);
}
.ln.you {
  margin: 4px 0 6px;
  padding: 1px 4px;
  background: var(--a-you-bg);
  color: var(--a-term-fg);
}
.ln.you.codex {
  padding: 6px 8px;
  background: var(--a-codex-bg);
}
.ap-spin {
  margin-top: 4px;
}
.ap-composer.claude {
  margin-top: 6px;
  padding: 3px 2px;
  border: 0;
  border-top: 1px solid var(--a-rule);
  border-bottom: 1px solid var(--a-rule);
  border-radius: 0;
}
.ap-composer.codex {
  padding: 6px 8px;
  border: 0;
  border-radius: 0;
  background: var(--a-codex-bg);
}
/* Claude Code's and Codex's prompts draw no focus of their own, so a focused
   prompt gets the app's focus blue around it, visible from the keyboard. */
.app .ap-composer:focus-within {
  outline: 1px solid var(--a-accent2);
  outline-offset: 2px;
}
.ap-hint {
  color: var(--a-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-composer.claude ~ .ap-hint {
  color: var(--a-t-mode);
}
.ap-pane[data-pane='c3'] .ap-hint {
  color: var(--a-dim);
}
.ap-status .ap-sl {
  gap: 8px;
}

/* Claude Code's folded run of tool calls: ctrl+o (here, a click) opens it. */
.fold-line {
  display: block;
  width: 100%;
  text-align: left;
  white-space: pre-wrap;
  font: inherit;
  color: var(--a-fg);
  cursor: pointer;
}
.fold-line:hover .t-dim {
  color: var(--a-fg);
}
.fold-line .b {
  font-weight: 700;
}
.fold-detail {
  margin: 2px 0 4px 2ch;
  padding-left: 1ch;
  border-left: 1px solid var(--a-border);
}
.fold {
  margin: 4px 0;
}

/* Turn chip: a button that opens the turn's diff. */
.ap-turn {
  cursor: pointer;
  font-family: inherit;
}
.ap-turn:disabled {
  cursor: default;
}
.ap-turn:not(:disabled):hover {
  border-color: var(--a-accent2);
}
.is-pressed {
  box-shadow:
    0 0 0 2px var(--a-bg),
    0 0 0 4px var(--a-accent);
}
.ap-reply-btn.is-pressed {
  background: var(--a-reply-pressed);
  border-color: var(--a-warn);
}

/* The app's approval colour is its yellow --warn; the focused pane keeps its
   blue focus ring (only unfocused panes light up), as in the app. */
.ap-ask {
  border-color: var(--a-perm);
}
.ap-ask-foot {
  color: var(--a-dim);
}

/* The diff tile (DiffTile). */
.ap-diff {
  min-width: 0;
}
.ap-dhead,
.ap-dnav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 3px 8px;
  border-bottom: 1px solid var(--a-border);
  background: var(--a-bg2);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
}
.ap-dhead .ap-path {
  color: var(--a-fg);
  font-weight: 600;
}
.ap-dbranch {
  padding: 0 5px;
  border-radius: 3px;
  background: var(--a-bg3);
  color: var(--a-accent);
  font-family: var(--a-mono);
  font-size: 10.5px;
}
.ap-dhead .diff-a,
.ap-dl.add .ap-dsign,
.ap-dfile .diff-a {
  color: var(--a-ok);
}
.ap-dhead .diff-r,
.ap-dl.del .ap-dsign,
.ap-dfile .diff-r {
  color: var(--a-danger);
}
.ap-dnav {
  background: var(--a-bg1);
}
.ap-dbtn {
  color: var(--a-fg);
}
.ap-dbtn.dis {
  color: var(--a-faint);
}
.ap-dturn {
  color: var(--a-dim);
}
.ap-dclose {
  flex: none;
}
.ap-dnote {
  padding: 4px 8px;
  border-bottom: 1px solid var(--a-border);
  color: var(--a-dim);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-dfiles {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 6px 0;
  font: 11.5px/1.5 var(--a-mono);
  scrollbar-width: thin;
  scrollbar-color: var(--a-border2) transparent;
}
.ap-dfile {
  margin: 6px 0 2px;
  padding: 2px 8px;
  color: var(--a-fg);
}
.ap-dfile:first-child {
  margin-top: 0;
}
.ap-dl {
  display: flex;
  padding: 0 8px;
  white-space: pre;
}
.ap-dsign {
  flex: none;
  width: 2ch;
}
.ap-dl.add {
  background: var(--a-add-bg);
  color: var(--a-add-fg);
}
.ap-dl.del {
  background: var(--a-del-bg);
  color: var(--a-del-fg);
}
.ap-dl.hunk {
  color: var(--a-accent);
  opacity: 0.8;
}

/* The in-app alert: the app's bell toast. */
.ap-toast {
  border-left-color: var(--a-warn);
  font-size: 12px;
}
.ap-toast-ic {
  flex: none;
  color: var(--a-warn);
}

/* Window closed: the desktop, the one-time tray notice, the tray icon. */
.desk {
  border-style: solid;
}
.desk-body {
  display: grid;
  justify-items: start;
  gap: 18px;
}
.notice {
  position: absolute;
  right: 12px;
  bottom: 52px;
  width: min(360px, calc(100% - 24px));
  padding: 12px 14px;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  background: #202020;
  color: #f3f3f3;
  font: 400 13px/1.45 'Segoe UI', var(--sans);
  box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.9);
}
.notice-app {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c8c8c8;
  font-size: 12px;
}
.notice-app .mark,
.push-app .mark {
  width: 14px;
  height: 14px;
}
.notice-title {
  margin-top: 8px;
  font-weight: 600;
}
.notice-body {
  margin-top: 2px;
  color: #d0d0d0;
}
.tray-btn {
  cursor: pointer;
}
.tray-btn.is-pressed {
  background: var(--bg-3);
}

/* Phone push (free account), in the stage's corner. */
.push {
  position: absolute;
  top: 44px;
  right: 14px;
  z-index: 12;
  width: min(300px, calc(100% - 28px));
}
.push-tag {
  width: fit-content;
  margin: 0 0 6px auto;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--bg-2);
  color: var(--fg-3);
  font: 500 11px/1.3 var(--mono);
  font-stretch: 87.5%;
}
.push-card {
  padding: 10px 12px 12px;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 16px;
  background: rgb(38 40 44 / 0.96);
  color: #f2f2f2;
  font: 400 13px/1.4 var(--sans);
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.85);
}
.push-app {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #b9bcc2;
  font-size: 11.5px;
}
.push-now {
  margin-left: auto;
}
.push-title {
  margin-top: 6px;
  font-weight: 600;
}
.push-body {
  color: #d6d8dc;
}
@media (prefers-reduced-motion: no-preference) {
  .push:not([hidden]) {
    animation: toast-in 0.35s var(--ease);
  }
  .notice:not([hidden]) {
    animation: fade-in 0.35s var(--ease);
  }
}

/* Under the window. */
.demo-cap {
  color: var(--fg-3);
}

/* ---- phones: one pane at a time, chapters as a swipeable strip ---- */
@media (max-width: 720px) {
  .demo-bar {
    flex-direction: column;
    gap: 8px;
  }
  .demo-tabs {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
  }
  .demo-tabs::-webkit-scrollbar {
    display: none;
  }
  .demo-tab {
    flex: 0 0 auto;
    max-width: 78%;
    scroll-snap-align: start;
  }
  .demo-play {
    align-self: flex-start;
    height: 34px;
  }
  .stage {
    height: 540px;
  }
  .ap-wsname,
  .ap-icon {
    display: none;
  }
  .ap-switch {
    display: flex;
    gap: 4px;
    padding: 4px 3px 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ap-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: 1px solid var(--a-border);
    border-radius: 4px;
    color: var(--a-dim);
    font-size: 11px;
    white-space: nowrap;
  }
  .ap-switch-btn.on {
    color: var(--a-fg);
    border-color: var(--a-accent2);
  }
  .ap-ws,
  .ap-ws.with-diff {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .ap-ws > .ap-pane,
  .ap-ws.with-diff > .ap-pane {
    grid-column: 1;
    grid-row: 1;
  }
  .ap-ws > .ap-pane:not(.spot) {
    display: none;
  }
  .ap-badge,
  .ap-mem,
  .ap-icons {
    display: none;
  }
  .push {
    top: auto;
    bottom: 36px;
    right: 10px;
  }
  /* The phone push tells this part on a phone; the in-app toast would cover it. */
  .ap-toast {
    display: none;
  }
  .notice {
    left: 12px;
    width: auto;
  }
  .demo-try {
    flex-direction: column;
    align-items: stretch;
    min-height: 60px;
    min-width: 0;
  }
  .demo-try .chips {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .demo-try .chip-btn {
    flex: none;
    white-space: nowrap;
  }
  .demo-narr {
    min-height: 4.5em;
  }
}
@media (max-width: 380px) {
  .ap-ctx {
    display: none;
  }
}
@media (max-width: 900px) {
  .ap-side {
    display: none;
  }
}

/* ---- polish: one heading system, the grid footnote, under the hood ---- */
.more sup a {
  text-decoration: none;
  color: var(--fg-3);
}
.more-note {
  margin-top: 12px;
  color: var(--fg-3);
  font: 500 12px/1.4 var(--mono);
  font-stretch: 87.5%;
}
.hood {
  margin-top: clamp(40px, 4vw, 56px);
  color: var(--fg-3);
  font-size: 14px;
  line-height: 1.6;
}
.hood-h {
  margin-bottom: 4px;
}
.link-btn {
  color: var(--fg-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link-btn:hover {
  color: var(--acc);
}
.link-btn[data-copied='true'] {
  color: var(--acc);
}
.elsewhere-line {
  margin-top: 8px;
}
.beta h2 {
  max-width: none;
}
.beta .dl {
  flex-direction: row;
  align-items: center;
}
.beta .fine {
  margin-top: 0;
}

/* The real-app recording, opened from the FAQ. */
.video-dlg {
  width: min(1040px, calc(100% - 32px));
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--bg-1);
  color: var(--fg);
}
.video-dlg::backdrop {
  background: rgb(0 0 0 / 0.75);
}
.video-dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 14px;
}
.video-dlg video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

/* ---------- v5.1: Watch the tour / Try it yourself ---------- */
.demo-bar {
  align-items: center;
  justify-content: space-between;
}
.demo-mode {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--bg-1);
}
.demo-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 5px;
  color: var(--fg-2);
  font: 600 13.5px/1 var(--mono);
  font-stretch: 87.5%;
  white-space: nowrap;
}
.demo-mode-btn:hover {
  color: var(--fg);
}
.demo-mode-btn[aria-pressed='true'] {
  background: var(--acc);
  color: var(--acc-ink);
}
.demo-play {
  height: 40px;
}
.demo-play.off {
  visibility: hidden;
}
.demo-tabs {
  margin-bottom: 12px;
}
.demo[data-mode='try'] .demo-tab[aria-selected='true'] {
  color: var(--fg-3);
  border-color: var(--line-2);
  background: none;
}
.demo-yourturn {
  position: absolute;
  left: 50%;
  bottom: 56px;
  z-index: 14;
  transform: translateX(-50%);
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--acc);
  color: var(--acc-ink);
  font: 650 17px/1.2 var(--mono);
  font-stretch: 87.5%;
  white-space: nowrap;
  box-shadow: 0 24px 60px -12px rgb(0 0 0 / 0.9);
}
.demo-yourturn:hover {
  background: #e2ff7a;
}
.demo-toast {
  position: absolute;
  left: 50%;
  top: 44px;
  z-index: 14;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 1px solid var(--acc-line);
  border-radius: 6px;
  background: var(--bg-2);
  color: var(--fg);
  font: 500 13px/1.3 var(--mono);
  font-stretch: 87.5%;
  white-space: nowrap;
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.9);
}
.demo-toast button {
  color: var(--acc);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .demo-yourturn:not([hidden]),
  .demo-toast:not([hidden]) {
    animation: fade-in 0.3s var(--ease);
  }
}
@media (max-width: 720px) {
  .demo-bar {
    flex-direction: row;
  }
  .demo-mode {
    flex: 1;
    min-width: 0;
  }
  .demo-mode-btn {
    flex: 1;
    justify-content: center;
    padding: 0 6px;
    font-size: 12.5px;
  }
  .demo-play {
    align-self: auto;
    height: 40px;
    padding: 0 10px;
  }
  .demo-play [data-play-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .demo-yourturn {
    font-size: 15px;
    padding: 12px 16px;
  }
  .demo-toast {
    top: 76px;
    font-size: 12px;
  }
}
@media (max-width: 360px) {
  .demo-mode-btn span {
    display: none;
  }
}

/* v5.1: the free-account table and its call to action. */
.vs.acct {
  margin-top: 20px;
}
.vs.acct td:first-child {
  color: var(--fg-2);
}
.acct-cta {
  margin-top: 18px;
  color: var(--fg);
  font: 600 15px/1.5 var(--mono);
  font-stretch: 87.5%;
}
/* Free-account copy is wrapped for the guardrail check, not for layout. */
.step-acc {
  display: contents;
}

/* Get started: the header carries only the two ways in, a quiet "Sign in"
   and the primary "Get started". Both fit beside the brand down to 320 px. */
.nav-signin {
  margin-left: auto;
  color: var(--fg-2);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-signin:hover {
  color: var(--fg);
}
.site-nav + .nav-signin {
  margin-left: 0;
}
.site-header .nav-signin + .nav-start {
  margin-left: -10px;
}
/* The hero and closing call to action: the button, then one small line under it. */
.dl-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.beta .dl.dl-stack {
  flex-direction: column;
  align-items: flex-start;
}
.hero-row .dl-account {
  margin-top: 12px;
  color: var(--fg-2);
}
.dlp-account {
  max-width: 52ch;
}
@media (max-width: 760px) {
  .site-header .nav-signin {
    margin-left: auto;
    font-size: 14px;
  }
  .site-header .nav-signin + .nav-start {
    margin-left: 4px;
  }
}
/* Small phones: the beta tag goes first, then spacing. */
@media (max-width: 420px) {
  .brand .tag {
    display: none;
  }
  .site-header .nav-start {
    padding: 0 12px;
    font-size: 14px;
  }
}
@media (max-width: 359px) {
  .site-header .wrap {
    gap: 8px;
  }
  .brand {
    gap: 8px;
    font-size: 13px;
  }
  .site-header .nav-signin {
    font-size: 13px;
  }
  .site-header .nav-start {
    padding: 0 10px;
    font-size: 13px;
  }
}

/* Phones: small print that is read rather than scanned like a label (the
   footnote and the footer) keeps 14px. */
@media (max-width: 520px) {
  .more-note,
  .site-footer .wrap {
    font-size: 14px;
  }
}