/* tesserane site: a live surface. The page is a tesserane window that the scroll operates; Ana's
   panel holds the copy; the phone comes forward at the peak. scrollcraft.css (the engine's floor) loads
   first; this file themes its tokens and draws everything else. Colours are the app's own tokens. */

@font-face {
  font-family: Inter;
  src: url('assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* The product's own face (tesserane-studio/font/dist): the wordmark and Ana's headings. */
@font-face {
  font-family: 'tesserane Sans';
  src: url('assets/fonts/TesseraneSans-Medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

:root {
  color-scheme: dark;
  /* the engine's six roles */
  --sc-canvas: #0B090D;
  --sc-surface: #141217;
  --sc-ink: #F3EEF0;
  --sc-ink-soft: #B3A8B1;
  --sc-accent: #F2B6CA;
  --sc-accent-ink: #24151E;
  --sc-font-display: 'tesserane Sans', Inter, system-ui, sans-serif;
  --sc-font-text: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sc-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --sc-shadow-color: 300 25% 2%;

  /* the app's tokens (src/index.css), as RGB triplets so alpha composes */
  --ground: 10 10 12; --chrome: 19 19 22; --surface: 14 14 17; --line: 39 39 44; --line-strong: 60 60 67;
  --text: 237 237 240; --muted: 161 161 170; --faint: 128 128 138;
  --accent: 242 182 202; --accent-strong: 255 212 227; --brand: 216 141 167;
  --ok: 74 222 128; --warn: 251 191 36; --danger: 248 113 113;
  /* working: the app's --c-info, sky. Each status colour has one meaning: gold needs you, red failed, blue working,
     green done, grey the rest; rose is the brand, never a status */
  --info: 56 189 248;
  /* a page in Ana’s browser: lumen before its dark mode switch, so a light page */
  --page: 236 233 235; --page-ink: 38 34 38; --page-line: 214 209 212;
  --t-fg: #EDEDF0; --t-red: #F87171; --t-green: #4ADE80; --t-cyan: #22D3EE; --t-blue: #7AA5FF;

  --g: clamp(16px, 3.9vw, 56px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rose-line: #3A2F36;
  /* the crisp line round a card (the plans, the download's cards, an answer): one colour, the page has no light theme */
  --card-edge: #2A2429;
  /* the site bar's height, and what a link or the keyboard keeps clear of the top once it is stuck: the bar and a
     little air, so a focus ring is never half behind it */
  --bar-h: 52px;
  --bar-clear: calc(var(--bar-h) + 8px);
}

/* A link's target and the keyboard's focus both keep clear of the site bar once it is stuck (WCAG 2.2 2.4.11).
   The tour has no bar over it, and the bar is not behind itself: what is inside either cancels this, so the
   tour's own anchors and links place exactly and the keyboard reaching the bar moves nothing. */
html { scroll-padding-top: var(--bar-clear); }
.tour, .tour *, .site-bar, .site-bar * { scroll-margin-top: calc(-1 * var(--bar-clear)); }
body {
  background: var(--sc-canvas);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  font-synthesis: none;
}
main { position: relative; z-index: 1; }
.sc-grain { z-index: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.face { width: 22px; height: 22px; flex: none; overflow: visible; }
.wordmark { font-family: 'tesserane Sans', Inter, sans-serif; font-weight: 500; letter-spacing: 0; }
code { font-family: var(--sc-font-mono); font-size: 0.92em; }

.skip-link {
  position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 8px;
  background: var(--sc-accent); color: var(--sc-accent-ink); font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-160%); transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: none; }

/* Ana's orb, as the app draws her: a dark glass shell, a rose lens, a dark pupil, one highlight. No halo. */
.orb {
  display: inline-block; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background:
    radial-gradient(circle at 33% 27%, rgb(255 255 255 / 0.85) 0 5%, transparent 13%),
    radial-gradient(circle at 50% 50%, #0A0A0C 0 13%, transparent 14.5%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 17%, rgb(var(--ground) / 0.28) 18% 19%, transparent 20% 23%),
    radial-gradient(circle at 50% 50%, rgb(var(--accent-strong)) 0 18%, rgb(var(--accent)) 32%, rgb(var(--brand)) 44%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 45%, #2A2228 48%, #141216 62%, #050506 72%);
  box-shadow: 0 0 0 1px rgb(var(--brand) / 0.5), 0 2px 6px rgb(0 0 0 / 0.5);
}
.orb-sm { width: 16px; height: 16px; }
.orb-lg { width: 44px; height: 44px; }

.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: rgb(var(--faint)); }
.dot-ok { background: rgb(var(--ok)); }
.dot-warn { background: rgb(var(--warn)); }
.dot-info { background: rgb(var(--info)); }
.dot-bad { background: var(--t-red); }
.dot-word { background: rgb(var(--text)); }
.ring { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--faint)); }
.ok { color: rgb(var(--ok)); }
.info { color: rgb(var(--info)); }
.warn { color: rgb(var(--warn)) !important; }
.r { color: var(--t-red); }
.g { color: var(--t-green); }
.b { color: var(--t-fg); }
.c { color: var(--t-cyan); }
.faint { color: rgb(var(--faint)); }

.btn-accent, .btn-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 8px;
  font: 500 12.5px/1 var(--sc-font-text); border: 0; white-space: nowrap;
}
.btn-accent { background: rgb(var(--accent)); color: var(--sc-accent-ink); }
.btn-quiet { background: rgb(var(--line) / 0.7); color: rgb(var(--text)); }
button.btn-accent, button.btn-quiet { cursor: pointer; transition: transform 120ms var(--ease), background-color 160ms var(--ease); }
button.btn-accent:hover { background: rgb(var(--accent-strong)); }
button.btn-quiet:hover { background: rgb(var(--line-strong)); }
button.btn-accent:active, button.btn-quiet:active { transform: scale(0.97); }

/* ======================================================================= the tour === */
.tour { position: relative; }
.beat-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.tour-stage {
  /* the composition: the window on the left, Ana's panel overlapping its right edge */
  /* --vw is the stage's own width (site.js), so a classic scrollbar never shifts the composition */
  --comp: min(calc(var(--vw, 100vw) - 2 * var(--g)), 1680px);
  --left: calc((var(--vw, 100vw) - var(--comp)) / 2);
  --top: clamp(18px, 4.2svh, 40px);
  --panel: clamp(340px, 28vw, 430px);
  --win-w: min(1320px, calc(var(--comp) - var(--panel) + 72px));
  /* how much of the window Ana's panel covers: the Commands strip sits under it, and what must stay
     readable keeps clear of the rest (--overlap-in, past the strip's 56 px) */
  --overlap: max(0px, calc(var(--win-w) - var(--comp) + var(--panel) + 12px));
  --overlap-in: max(0px, calc(var(--overlap) - 56px));
  --win-h: calc(100svh - 2 * var(--top));
  isolation: isolate;
}

/* MID PLANE */
.desk {
  position: absolute; z-index: 1; left: var(--left); top: var(--top); width: var(--win-w); height: var(--win-h);
  transform-origin: 46% 42%; will-change: transform;
}
.desk-dim { position: absolute; inset: -2px; border-radius: 16px; background: var(--sc-canvas); opacity: 0; pointer-events: none; }

.win {
  /* a size container: the window's own height, as well as its width, decides what each beat keeps */
  container-type: size; container-name: win;
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden;
  border-radius: 14px; background: rgb(var(--ground)); color: rgb(var(--text));
  font: 400 13px/1.45 var(--sc-font-text); -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 0 1px var(--rose-line), 0 2px 4px hsl(var(--sc-shadow-color) / 0.4), 0 30px 70px -20px hsl(var(--sc-shadow-color) / 0.75);
}
.win a { color: inherit; text-decoration: none; }

.win-chrome {
  flex: none; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 10px 0 16px;
  background: rgb(var(--chrome)); border-bottom: 1px solid rgb(var(--line)); font-size: 12px; color: rgb(var(--muted));
}
.win-dots { display: flex; gap: 7px; flex: none; }
.win-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--line-strong)); }
.win-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.win-demo {
  flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap;
  color: rgb(var(--accent-strong)); background: rgb(var(--accent) / 0.12); box-shadow: inset 0 0 0 1px rgb(var(--accent) / 0.35);
}
.win-links { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.win-links a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 7px; white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.win-links a:hover { background: rgb(var(--line) / 0.7); color: rgb(var(--text)); }
/* Start free is the button; Try it yourself, the demo's label, is its quieter pair (a crisp line, no fill). */
.win-links .win-start { margin-left: 4px; background: rgb(var(--accent)); color: var(--sc-accent-ink); font-weight: 600; }
.win-links .win-start:hover { background: rgb(var(--accent-strong)); color: var(--sc-accent-ink); }
.win-links .win-try { box-shadow: inset 0 0 0 1px rgb(var(--accent) / 0.55); color: rgb(var(--accent-strong)); font-weight: 600; }
.win-links .win-try:hover { background: rgb(var(--accent) / 0.14); color: rgb(var(--accent-strong)); }

/* As the app draws it: the name, the view switch right beside it, the rest at the right. */
.win-bar {
  flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px;
  height: 52px; padding: 0 12px;
}
.win-brand { display: inline-flex; align-items: center; gap: 9px; padding-left: 4px; font-size: 16px; }
.win-brand img { width: 22px; height: 22px; }

.switch {
  position: relative; display: inline-flex; align-items: center; padding: 2px; border-radius: 10px;
  background: rgb(var(--line) / 0.45); box-shadow: inset 0 0 0 1px rgb(var(--line) / 0.7);
}
.switch-thumb {
  position: absolute; left: 2px; top: 2px; bottom: 2px; width: 100px; border-radius: 8px; background: rgb(var(--chrome));
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(var(--line-strong) / 0.55);
  transform: translateX(var(--thumb-x, 100px)); transition: transform 240ms var(--ease);
}
.switch-tab {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100px; height: 28px; border-radius: 8px; font-size: 12px; font-weight: 500; color: rgb(var(--muted)); white-space: nowrap;
  transition: color 180ms var(--ease);
}
.switch-tab .i { width: 14px; height: 14px; }
.switch-tab:hover, .switch-tab.is-on { color: rgb(var(--text)); }
.switch-sep { width: 1px; height: 14px; background: rgb(var(--line-strong) / 0.8); position: relative; z-index: 1; margin: 0 -0.5px; }

.win-bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
/* The agents pill: one chip per state that has any; "need you" is the only loud one. */
.pill { display: inline-flex; align-items: center; gap: 2px; height: 28px; padding: 0 4px; border-radius: 9px; font-size: 11.5px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(var(--line-strong) / 0.7); color: rgb(var(--muted)); }
.pill-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border-radius: 6px; }
.pill-chip b { font-weight: 500; font-variant-numeric: tabular-nums; }
.pill-chip[hidden] { display: none; }
.pill-need { color: rgb(var(--warn)); font-weight: 600; }
.pill-need b { font-weight: 600; }
.pill-idle { color: rgb(var(--faint)); }
.switch-dot { margin-left: 1px; }
.bell, .orb-link { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: rgb(var(--muted)); }
.bell:hover { background: rgb(var(--line) / 0.7); color: rgb(var(--text)); }
.bell .badge {
  position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: rgb(var(--accent)); color: var(--sc-accent-ink); font-size: 9.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.orb-link .orb { width: 24px; height: 24px; transition: transform 180ms var(--ease); }
.orb-link:hover .orb { transform: scale(1.08); }
.new-session {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px;
  background: rgb(var(--accent)); color: var(--sc-accent-ink) !important; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.new-session:hover { background: rgb(var(--accent-strong)); }
.new-session .i { width: 14px; height: 14px; }
.win :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

.win-body { position: relative; flex: 1; min-height: 0; }
.view { position: absolute; inset: 0 10px 0 10px; display: flex; gap: 10px; visibility: hidden; opacity: 0; transition: opacity 220ms var(--ease), visibility 0s 220ms; }
.tour-stage[data-view='code'] .view-code,
.tour-stage[data-view='agent'] .view-agent,
.tour-stage[data-view='local'] .view-local,
.tour-stage[data-view='ana'] .view-ana { visibility: visible; opacity: 1; transition: opacity 220ms var(--ease), visibility 0s; }

.rail {
  flex: none; width: 232px; display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; overflow: hidden;
  border-radius: 12px; background: rgb(var(--chrome) / 0.55); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95);
}
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px; color: rgb(var(--muted)); font-size: 12.5px; }
.rail-head small { margin-left: 6px; color: rgb(var(--faint)); }
.rail-head .i { width: 14px; height: 14px; }
.rail-label { padding: 6px 8px 4px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--faint)); }
.rail-ws { display: flex; align-items: center; gap: 6px; padding: 6px 8px; font-weight: 500; }
.rail-ws .i { width: 13px; height: 13px; color: rgb(var(--faint)); }
.rail-ws.is-closed { margin-top: 6px; color: rgb(var(--muted)); }
.rail-ws.is-current { border-radius: 8px; background: rgb(var(--line) / 0.7); }
.rail-new { padding: 0 0 8px; }
.rail-new-btn { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 12.5px; }
.rail-new-btn .i { width: 14px; height: 14px; }
.rail-group { display: flex; flex-direction: column; gap: 1px; }
.rail-item { display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 18px; border-radius: 8px; min-width: 0; }
.view-agent .rail-item, .view-ana .rail-item { padding-left: 8px; }
.rail-item.is-active { background: rgb(var(--line) / 0.7); }
.rail-item .i { width: 14px; height: 14px; color: rgb(var(--muted)); }
.rail-item > span:not(.orb) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rail-item b, .member b { font-weight: 450; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item small, .member small { font-size: 11px; color: rgb(var(--faint)); white-space: nowrap; }
.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 8px 2px; border-top: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: 12px; }
.rail-foot span { display: flex; align-items: center; gap: 8px; }
.rail-count { justify-content: space-between; }
.rail-count b { min-width: 18px; height: 16px; padding: 0 5px; border-radius: 999px; background: rgb(var(--line)); font-size: 10.5px; font-weight: 500; text-align: center; line-height: 16px; }
.member { display: flex; align-items: center; gap: 10px; padding: 5px 8px; min-width: 0; }
.member > span { display: flex; flex-direction: column; min-width: 0; }
.rail-pipe { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 10px; background: rgb(var(--line) / 0.4); font-size: 12px; color: rgb(var(--muted)); }
.rail-pipe small { margin-left: 6px; color: rgb(var(--faint)); }
.pipe-faces { display: flex; gap: 6px; }
.pipe-faces .face { width: 18px; height: 18px; }

.main {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 12px; background: rgb(var(--surface)); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95);
}
.ws-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid rgb(var(--line)); }
.crumbs { display: flex; gap: 7px; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden; }
.crumbs b { color: rgb(var(--text)); font-weight: 500; }
.crumbs > :not(:last-child) { flex: none; }
.crumbs > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-meta { color: rgb(var(--faint)); font-size: 12px; white-space: nowrap; }
.ws-tabs { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: rgb(var(--line) / 0.45); }
.ws-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; color: rgb(var(--muted)); }
.ws-tabs span.is-on { background: rgb(var(--chrome)); color: rgb(var(--text)); box-shadow: 0 0 0 1px rgb(var(--line-strong) / 0.55); }
.ws-tabs .i { width: 13px; height: 13px; }

/* CODE: the grid of terminals */
.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 8px; padding: 8px; }
.pane { container-type: inline-size; min-width: 0; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; background: rgb(var(--ground)); box-shadow: 0 0 0 1px rgb(var(--line)); overflow: hidden; }
.pane.is-focused { box-shadow: 0 0 0 1px rgb(var(--accent) / 0.55); }
.pane-head {
  flex: none; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; font-size: 12px;
  border-bottom: 1px solid rgb(var(--line)); background: rgb(var(--chrome) / 0.6); white-space: nowrap; overflow: hidden;
}
.pane-head b { flex: 0 100 auto; font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 3.2em; }
.pane-head .grip { width: 12px; height: 12px; color: rgb(var(--faint)); }
.pane-head .branch { display: inline-flex; align-items: center; gap: 3px; flex: 0 1 auto; min-width: 5.5em; max-width: 10rem; overflow: hidden; }
.pane-head .branch > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* uncommitted changes: a plain mark, never gold (SessionGrid.tsx, PanelGitMarker) */
.branch-dot { flex: none; width: 5px; height: 5px; margin-left: 1px; border-radius: 50%; background: rgb(var(--muted)); }
/* a session in its own worktree: the mark beside its branch, which opens Land, Remove and the rest */
.wt-mark { flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-left: -3px; border-radius: 5px; }
.pane-head .wt-mark .i { width: 12px; height: 12px; }
.pane-head .branch .i { width: 11px; height: 11px; }
.agent-badge { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: rgb(var(--muted)); background: rgb(var(--line) / 0.6); }
.agent-badge.is-working { color: rgb(var(--info)); background: rgb(var(--info) / 0.13); }
.agent-badge.is-done { color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
/* The header's own controls, as the app's (SessionGrid.tsx): +, the Terminal view toggle (agent panels), zoom, close. */
.pane-tools { flex: none; margin-left: auto; display: flex; gap: 1px; }
.tool { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; color: rgb(var(--faint)); }
.tool .i { width: 13px; height: 13px; }
.pane.in-term .tool-term { background: rgb(var(--line)); color: rgb(var(--text)); }
.tool-plus { color: rgb(var(--muted)); }
.pane-head .i { width: 13px; height: 13px; color: rgb(var(--muted)); }
.pane-head .i-claude { color: #D97757; }
.pane-head .i-done { color: rgb(var(--ok)); }
.pane-n { color: rgb(var(--faint)); font-variant-numeric: tabular-nums; }
.branch { padding: 0 5px; border-radius: 4px; font: 11px var(--sc-font-mono); color: rgb(var(--faint)); background: rgb(var(--line) / 0.6); }
.ready { margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
.pane-body { position: relative; flex: 1; min-height: 0; }
.term {
  position: absolute; inset: 0; overflow: hidden; padding: 10px 12px;
  font: 11.5px/1.55 var(--sc-font-mono); color: var(--t-fg); overflow-wrap: anywhere;
}
.ln { min-height: 1.55em; }
.ln.sub { padding-left: 14px; }
.ln.diff { padding: 0 8px; border-radius: 3px; margin-left: 14px; }
.ln.add { background: rgb(var(--ok) / 0.13); }
.ln.del { background: rgb(var(--danger) / 0.13); }
.ln.diff .faint { margin-right: 6px; }
.cc-box { display: inline-block; margin-bottom: 8px; padding: 6px 10px; border: 1px solid #D97757; border-radius: 6px; }
.cc-star { color: #D97757; }
.cx-box { display: inline-block; margin-bottom: 8px; padding: 6px 10px; border: 1px solid rgb(var(--line-strong)); border-radius: 6px; }
.cc-input { margin-top: 8px; padding: 1px 2px; border-top: 1px solid rgb(var(--line-strong)); border-bottom: 1px solid rgb(var(--line-strong)); }
.cc-status { padding: 2px 2px 0; color: rgb(var(--faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-you { margin: 2px 0 6px; padding: 3px 8px; border-radius: 4px; background: rgb(var(--line) / 0.55); color: rgb(var(--text)); }
.caret { display: inline-block; width: 7px; height: 1.15em; vertical-align: -0.2em; background: rgb(var(--accent-strong)); animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* AGENT: the thread and the pipeline */
/* A thread reads from the composer up, as chats do: its latest entries sit just above the box. */
.thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 14px 0 12px; overflow: hidden; }
.msg-you { align-self: flex-end; max-width: min(560px, 80%); margin: 0 16px; padding: 10px 13px; border-radius: 12px; background: rgb(var(--line) / 0.6); }
.msg-you .who { display: block; font-size: 11.5px; color: rgb(var(--muted)); margin-bottom: 3px; }
.msg-you .who small { color: rgb(var(--faint)); font-size: 11px; margin-left: 4px; }
.msg-you p { margin: 0; }
.route { display: flex; align-items: center; gap: 8px; margin: 0 16px; font-size: 12px; color: rgb(var(--faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route .i { width: 14px; height: 14px; }
.pipe { flex: none; overflow: hidden; padding: 2px 16px; }
.criteria { flex: none; margin: 0 16px; padding: 10px 12px 11px; border-radius: 12px; background: rgb(var(--chrome) / 0.55); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95); }
.crit-label { margin: 0 0 6px; font-size: 11.5px; color: rgb(var(--muted)); }
.crit-sum { display: none; margin: 0; font-size: 12px; color: rgb(var(--muted)); }
.crit-late { display: none !important; }
.criteria ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.criteria li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
.crit-id { flex: none; font: 600 10.5px var(--sc-font-mono); color: rgb(var(--muted)); }
.crit-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crit-chips { flex: none; display: flex; gap: 4px; }
.crit-chip { padding: 1px 6px; border-radius: 4px; font: 600 9.5px/1.6 var(--sc-font-mono); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: rgb(var(--faint)); box-shadow: inset 0 0 0 1px rgb(var(--line-strong) / 0.8); }
.crit-chip.is-passed { color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); box-shadow: none; }
.pipe-strip { position: relative; display: flex; gap: 12px; align-items: flex-start; will-change: transform; }
.step {
  flex: none; width: clamp(240px, 31cqw, 300px); display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; overflow: hidden;
  border-radius: 12px; background: rgb(var(--chrome) / 0.55); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95), 0 1px 3px rgb(0 0 0 / 0.35);
  transition: opacity 260ms var(--ease);
}
.step header { display: flex; align-items: center; gap: 9px; }
.step header > span:not(.chip) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.step header b { font-weight: 500; font-size: 13px; }
.step header small { font-size: 11px; color: rgb(var(--faint)); }
.step .face { width: 26px; height: 26px; }
.step ol, .step ul { margin: 0; padding-left: 18px; color: rgb(var(--muted)); font-size: 12.5px; }
.step ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.step ul li { position: relative; padding-left: 16px; font-size: 12px; color: rgb(var(--muted)); }
.step ul li::before { content: ''; position: absolute; left: 3px; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--ok) / 0.8); }
.step p { margin: 0; color: rgb(var(--muted)); font-size: 12.5px; }
.step p.small { color: rgb(var(--ok)); font-size: 12px; }
.chip { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; color: rgb(var(--muted)); background: rgb(var(--line) / 0.75); }
.chip.ok { color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
.chip.info { color: rgb(var(--info)); background: rgb(var(--info) / 0.13); }
.chip.warn { background: rgb(var(--warn) / 0.12); }
.ask, .handoff-desk {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border-radius: 10px;
  background: #1E1A12; box-shadow: inset 0 0 0 1px rgb(var(--warn) / 0.4);
}
.ask > span, .handoff-desk > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ask b, .handoff-desk b { font-weight: 500; font-size: 12.5px; color: rgb(var(--text)); }
.ask code, .handoff-desk code { align-self: flex-start; padding: 1px 6px; border-radius: 5px; background: rgb(var(--line) / 0.8); font-size: 11.5px; color: rgb(var(--text)); }
.ask small, .handoff-desk small { font-size: 11.5px; color: rgb(var(--muted)); line-height: 1.4; }
.ask .face, .handoff-desk .face { width: 22px; height: 22px; margin-top: 1px; }
.ask.is-lifted { visibility: hidden; }
.tour-stage.is-asking .step:not(.is-build) { opacity: 0.35; }
.tour-stage.is-asking .view-agent .rail { opacity: 0.45; transition: opacity 260ms var(--ease); }
.try-row { display: flex; align-items: center; gap: 6px; margin: 0 16px; font-size: 12px; color: rgb(var(--faint)); white-space: nowrap; overflow: hidden; }
.try-chip { padding: 3px 10px; border-radius: 999px; border: 1px dashed rgb(var(--line-strong)); color: rgb(var(--muted)); }
.composer {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 12px 12px; padding: 12px 12px 12px 14px;
  border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--line-strong) / 0.8); color: rgb(var(--faint)); font-size: 12.5px;
}
.composer-go { flex: none; padding: 6px 11px; border-radius: 8px; background: rgb(var(--accent) / 0.35); color: rgb(var(--accent-strong)); font-size: 12px; font-weight: 600; }

/* ANA: her tab */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; width: min(640px, 100%); margin: 0 auto; padding: 18px 18px 8px; overflow: hidden; }
.say-ana { display: flex; gap: 10px; align-items: flex-start; }
.say-ana .orb { width: 22px; height: 22px; margin-top: 1px; }
.say-ana p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.say-you { align-self: flex-end; max-width: 80%; padding: 9px 13px; border-radius: 12px; background: rgb(var(--line) / 0.6); }
.say-you p { margin: 0; font-size: 13.5px; }
.plan { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; border-radius: 12px; background: rgb(var(--chrome) / 0.55); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95); }
.plan header { display: flex; gap: 10px; align-items: baseline; }
.plan header b { font-weight: 600; font-size: 13px; }
.plan header span { color: rgb(var(--faint)); font-size: 12px; }
.plan ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: rgb(var(--muted)); }
.plan footer { display: flex; flex-wrap: wrap; gap: 8px; }
/* An answered plan says so in plain words, as the app's card does (PlanCard.tsx): no status colour. */
.plan-state { margin: 0; font-size: 12px; color: rgb(var(--faint)); }
.ana-box { flex: none; display: flex; align-items: center; gap: 4px; width: min(640px, calc(100% - 24px)); margin: 0 auto 14px; padding: 12px 14px; border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--accent) / 0.45); color: rgb(var(--faint)); font-size: 13px; }
.ana-box .caret { height: 1.1em; width: 2px; margin-right: 6px; }

.win-status {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 30px; padding: 0 14px;
  font-size: 11.5px; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden;
}
.stop-all { display: inline-flex; align-items: center; gap: 6px; color: var(--t-red); }
.stop-all .i { width: 13px; height: 13px; }

/* NEAR PLANE: Ana's panel */
.ana-panel {
  position: absolute; z-index: 20; left: calc(var(--left) + var(--comp) - var(--panel)); top: calc(var(--top) + 15svh); width: var(--panel);
  display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 24px; border-radius: 18px;
  background: #141217; color: var(--sc-ink);
  box-shadow: 0 0 0 1px #2F282E, 0 4px 8px hsl(var(--sc-shadow-color) / 0.3), 0 26px 60px -12px hsl(var(--sc-shadow-color) / 0.7);
  will-change: transform;
}
.ana-head { display: grid; }
.ana-head > .head { grid-area: 1 / 1; display: flex; align-items: center; gap: 11px; }
.head-brand img { width: 38px; height: 38px; }
.head-brand .wordmark { font-size: 36px; line-height: 1; color: var(--sc-ink); }
.ana-head .orb { width: 34px; height: 34px; }
.head-ana > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.ana-head b { font-size: 14px; font-weight: 600; }
.ana-head small { font-size: 12px; color: var(--sc-ink-soft); }
.notes { display: grid; }
.note { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; }
.note h1, .note h2 {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: 30px; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance;
}
.note h2 { font-size: 26px; }
.note p { margin: 0; font-size: 16px; line-height: 1.58; color: #CFC5CD; text-wrap: pretty; }
.note .note-tag { margin-top: -2px; font-size: 16px; font-weight: 500; color: var(--sc-accent); }
.note .note-small { font-size: 13px; color: var(--sc-ink-soft); }
.note .note-guide { display: flex; align-items: center; gap: 9px; margin-top: 4px; padding-top: 12px; border-top: 1px solid #2F282E; font-size: 14px; color: var(--sc-ink-soft); }
.note-guide .orb { flex: none; }
.note .note-try { font-size: 15px; color: var(--sc-accent); }
.note-actions { display: flex; gap: 8px; margin-top: 4px; }
.note-actions .btn-accent, .note-actions .btn-quiet { height: 34px; padding: 0 16px; font-size: 13.5px; }

/* FOREGROUND PLANE: the phone */
.phone {
  position: absolute; z-index: 25; left: calc(var(--left) + clamp(40px, 6vw, 110px)); bottom: -120px; width: 300px; height: 620px;
  padding: 9px; border-radius: 54px; background: #050506;
  box-shadow: 0 0 0 1px #2A2529, inset 0 0 0 1px #1C191D, 0 8px 18px hsl(var(--sc-shadow-color) / 0.5), 0 50px 90px -20px hsl(var(--sc-shadow-color) / 0.9);
  transform: translate3d(0, 120%, 0); transform-origin: 0 100%; will-change: transform;
}
.phone-screen {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 14px 12px; border-radius: 46px; overflow: hidden;
  background: linear-gradient(180deg, #17121A 0%, #0D0B10 55%, #120D13 100%); color: #F5F0F3;
}
.phone-status { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; height: 26px; font-size: 13px; }
.phone-island { position: absolute; left: 50%; top: 13px; width: 92px; height: 26px; border-radius: 999px; background: #000; transform: translateX(-50%); }
.phone-icons { display: flex; align-items: center; gap: 4px; }
.phone-icons .i { width: 15px; height: 15px; stroke-width: 2.2; }
.phone-icons .i-battery { width: 22px; height: 22px; stroke-width: 1.6; }
.phone-lock { width: 18px; height: 18px; margin-top: 18px; opacity: 0.9; }
.phone-date { margin: 8px 0 0; font-size: 15px; font-weight: 500; color: #E6DEE3; }
.phone-time { margin: -4px 0 0; font: 200 72px/1.05 var(--sc-font-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.phone-slot { width: 100%; height: 222px; margin-top: 18px; flex: none; }
.phone-older { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: 18px; background: rgb(44 40 48 / 0.72); font-size: 12px; opacity: 0.8; }
.phone-older > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.phone-older b { font-weight: 600; }
.phone-older small { color: #B9AEB6; font-size: 11px; }
.phone-home { position: absolute; bottom: 9px; left: 50%; width: 110px; height: 4px; border-radius: 4px; background: #F5F0F3; transform: translateX(-50%); }
.app-tile { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0F0D11; box-shadow: inset 0 0 0 1px #3A3138; flex: none; }
.app-tile img { width: 14px; height: 14px; }
.banner-slot { display: none; }

/* THE HAND-OFF */
.handoff { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.handoff > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.handoff-desk { box-shadow: inset 0 0 0 1px rgb(var(--warn) / 0.5), 0 14px 30px -8px hsl(var(--sc-shadow-color) / 0.8); }
.handoff-phone {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 13px; border-radius: 22px;
  background: #2B2730; color: #F7F2F5; box-shadow: 0 10px 30px -10px hsl(var(--sc-shadow-color) / 0.9);
  font-family: var(--sc-font-text);
}
.handoff.is-live .handoff-phone { pointer-events: auto; }
.note-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #CFC4CB; }
.note-top .app-tile { width: 20px; height: 20px; border-radius: 5px; }
.note-top small { margin-left: auto; font-size: 11.5px; color: #A79CA4; }
.note-app { font-weight: 500; }
.note-title { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.note-body { margin: 0; font-size: 13px; line-height: 1.4; color: #DCD2D8; }
/* The actions take no room until the notification opens, as a long press opens one. */
.note-actions-phone { display: none; flex-direction: column; margin-top: 10px; border-top: 1px solid #47404A; }
.handoff.is-open .note-actions-phone { display: flex; animation: open-actions 220ms var(--ease) both; }
@keyframes open-actions { from { opacity: 0; transform: translateY(-6px); } }
.note-actions-phone button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 42px; padding: 0 4px; border: 0; background: none;
  font: 500 14px var(--sc-font-text); color: #F7F2F5; cursor: pointer; text-align: left; border-radius: 8px;
}
.note-actions-phone button + button { border-top: 1px solid #47404A; border-radius: 0 0 8px 8px; }
.note-actions-phone button .i { order: 2; width: 18px; height: 18px; color: #CFC4CB; }
.note-actions-phone button:hover { background: rgb(255 255 255 / 0.05); }
.note-actions-phone button:active { transform: scale(0.98); }
.note-actions-phone .deny { color: #FF7B7B; }
.note-actions-phone button:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; }
.faceid { display: none; align-items: center; justify-content: center; gap: 8px; height: 84px; color: #F7F2F5; font-size: 13px; }
.faceid .i { width: 34px; height: 34px; stroke-width: 1.4; stroke-dasharray: 60; stroke-dashoffset: 60; animation: faceid 620ms var(--ease) forwards; }
.tour-stage[data-faceid='on'] .faceid { display: flex; }
.tour-stage[data-faceid='on'] .note-actions-phone { display: none; }
@keyframes faceid { to { stroke-dashoffset: 0; } }

/* CODE: a zoomed panel fills the grid, as the app's zoom does */
.grid.is-zoomed { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.grid.is-zoomed .pane:not(:first-child) { display: none; }

/* THE DESKTOP VIEW: the agent's work drawn as a conversation over its terminal, revealed top to bottom */
.pv {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: rgb(var(--surface));
  clip-path: inset(0 0 calc((1 - var(--pv, 0)) * 100%) 0);
}
.pv-log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 12px 16px 4px; font-size: 13px; line-height: 1.55; }
.grid.is-zoomed .pv-log { justify-content: flex-start; width: min(100%, 46rem); margin: 0 auto; padding-top: 18px; }
.pv-you { align-self: flex-end; max-width: 78%; margin: 0 0 6px; padding: 8px 13px; border-radius: 14px; background: rgb(var(--line) / 0.6); }
.pv-turn { display: flex; align-items: center; gap: 5px; margin: 0; padding: 8px 0 9px; border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--muted)); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.pv-turn .i { width: 12px; height: 12px; }
.pv-turn b { color: rgb(var(--text)); font-weight: 500; }
.pv-count { margin-left: auto; padding-left: 10px; font: 11px var(--sc-font-mono); color: rgb(var(--faint)); }
.pv-rows { margin: 4px 0 0; padding: 0; list-style: none; }
.pv-rows li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.pv-rows li > .dot { margin-top: 0.55em; }
.pv-group { color: rgb(var(--muted)); }
.pv-group b { color: rgb(var(--text)); font-weight: 500; }
.pv-group u { margin-left: 4px; color: rgb(var(--faint)); font-size: 11.5px; text-underline-offset: 2px; }
.pv-step { padding-left: 20px !important; }
.pv-step > span { display: flex; flex-direction: column; min-width: 0; }
/* A narrow panel's header keeps its branch readable, up to the app's 10rem: the session's name is cut first (the
   rail still says it whole), the agent's word, the grip, the number and Ready give way, then the zoom button; very
   narrow, the branch goes first. */
@container (max-width: 400px) {
  .pane-head { gap: 4px; padding: 0 8px; }
  .pane-head .agent-badge, .pane-head .grip, .pane-head .pane-n, .pane-head .ready { display: none; }
}
@container (max-width: 340px) { .pane-head .tool-max { display: none; } }
@container (max-width: 300px) { .pane-head .branch, .pane-head .wt-mark { display: none; } }
.pv-step code { font-size: 11.5px; color: rgb(var(--text)); }
.pv-step small { font: 11px var(--sc-font-mono); color: rgb(var(--faint)); }
.pv-answer { margin: 8px 0 6px; }
.pv-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px 18px; align-items: center; margin-bottom: 6px; padding: 11px 14px; border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--line)); font-size: 12px; }
.pv-k { color: rgb(var(--muted)); }
.pv-file { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; box-shadow: 0 0 0 1px rgb(var(--line-strong)); }
.pv-file .i { width: 12px; height: 12px; }
.pv-cmd { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; }
.pv-cmd code { color: rgb(var(--text)); }
.pv-box { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 8px; margin: 6px 12px 12px; padding: 10px 10px 10px 14px; border-radius: 14px; box-shadow: 0 0 0 1px rgb(var(--line-strong) / 0.9); }
.grid.is-zoomed .pv-box { width: min(calc(100% - 24px), 46rem); margin: 6px auto 14px; }
.pv-ph { grid-column: 1 / -1; color: rgb(var(--faint)); font-size: 13px; }
.pv-chips { display: flex; gap: 6px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.pv-chips > span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 11px; color: rgb(var(--muted)); white-space: nowrap; }
.pv-chips .i { width: 10px; height: 10px; }
.pv-usage i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(var(--muted)); clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 50% 100%); }
.pv-send { align-self: end; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgb(var(--accent) / 0.35); color: rgb(var(--accent-strong)); }
.pv-send .i { width: 15px; height: 15px; }

/* LOCAL AI */
.view-local .main { overflow: hidden; }
.lai-rail .rail-item { padding-left: 10px; }
.lai-rail .rail-item b { font-weight: 450; }
.tour-stage[data-lai='models'] .lai-nav[data-lai='models'], .tour-stage[data-lai='run'] .lai-nav[data-lai='run'] { background: rgb(var(--line) / 0.7); }
.lai-status { flex: none; display: flex; align-items: center; min-height: 46px; padding: 0 12px 0 14px; border-bottom: 1px solid rgb(var(--line)); font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.lai-st { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; }
.lai-st b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lai-st code { font-size: 11.5px; color: rgb(var(--muted)); }
.lai-ready { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
.lai-stop { margin-left: auto; flex: none; padding: 4px 11px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 12px; }
.lai-engine { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: rgb(var(--ok)); background: rgb(var(--ok) / 0.1); white-space: nowrap; }
.lai-page { flex: 1; min-height: 0; overflow: hidden; display: none; flex-direction: column; gap: 10px; padding: 18px 22px; }
.tour-stage[data-lai='models'] .lai-models, .tour-stage[data-lai='run'] .lai-run { display: flex; }
.lai-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.lai-page h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.lai-page p { margin: 0; }
.lai-model { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--line)); transition: box-shadow 220ms var(--ease), background-color 220ms var(--ease); }
.lai-model > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.lai-model b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lai-model small { font-size: 11.5px; color: rgb(var(--faint)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tour-stage.lai-picked .lai-model.is-pick { box-shadow: 0 0 0 1px rgb(var(--accent) / 0.6); background: rgb(var(--accent) / 0.05); }
.lai-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lai-model .lai-tags { flex-wrap: nowrap; flex: none; }
.tag { padding: 2px 7px; border-radius: 6px; font-size: 11px; color: rgb(var(--muted)); background: rgb(var(--line) / 0.8); white-space: nowrap; }
.tag-ok { color: rgb(var(--ok)); background: rgb(var(--ok) / 0.12); }
.tag-warn { color: rgb(var(--warn)); background: rgb(var(--warn) / 0.12); }
.tag-bad { color: rgb(var(--danger)); background: rgb(var(--danger) / 0.12); }
.lai-start { padding: 4px 11px; border-radius: 7px; background: rgb(var(--accent)); color: var(--sc-accent-ink); font-size: 12px; font-weight: 600; }
.lai-btn { flex: none; padding: 5px 11px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 12px; }
.lai-find { display: flex; flex-direction: column; gap: 3px; margin-top: 8px !important; font-size: 12.5px; }
.lai-card { display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border-radius: 12px; box-shadow: 0 0 0 1px rgb(var(--line)); font-size: 12.5px; }
.lai-k { color: rgb(var(--muted)); font-size: 12px; }
.lai-bar { height: 10px; border-radius: 999px; background: rgb(var(--line) / 0.9); overflow: hidden; }
.lai-bar i { display: block; width: 56%; height: 100%; background: linear-gradient(90deg, rgb(var(--brand)) 0 86%, rgb(var(--accent-strong)) 86%); transform-origin: 0 50%; transform: scaleX(var(--fill, 0)); }
.lai-select { display: flex; justify-content: space-between; align-items: center; max-width: 420px; padding: 8px 11px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); }
.lai-select .i { width: 12px; height: 12px; }
.lai-cmd code { font-size: 11px; line-height: 1.6; color: rgb(var(--muted)); word-break: break-all; }

/* ANA: the model her session runs on, and her box's chips */
.ana-model { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: rgb(var(--muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-model .i { width: 13px; height: 13px; flex: none; }
.ana-model > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ana-chips { margin-left: auto; display: flex; gap: 6px; }
.ana-chips span { padding: 2px 8px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); font-size: 11px; }

.ws-end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-toggle { flex: none; display: grid; place-items: center; width: 26px; height: 24px; border-radius: 6px; background: rgb(var(--line) / 0.6); color: rgb(var(--text)); }
.ab-toggle .i { width: 14px; height: 14px; }
/* The browser folded away, as a narrow Ana tab may keep it: the same toggle, not pressed. */
.ab-toggle.is-off { display: none; background: none; color: rgb(var(--muted)); }
/* As the app's column above the conversation (stage.css): at most 45% of the height, and it gives up height before
   her conversation does, which keeps room for a whole message. */
.ana-browser { flex: 0 1 auto; min-height: 0; max-height: 45%; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 8px; border-bottom: 1px solid rgb(var(--line)); }
.ana-browser > :not(.ab-page) { flex: none; }
.view-ana .chat { min-height: 130px; }
.ab-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ab-tab { min-width: 0; padding: 3px 10px; border-radius: 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgb(var(--chrome)); box-shadow: 0 0 0 1px rgb(var(--line-strong) / 0.55); }
.ab-btns { flex: none; margin-left: auto; display: flex; gap: 6px; }
.ab-btn { padding: 3px 10px; font-size: 11.5px; }
.ab-page { flex: 0 1 126px; min-height: 34px; overflow: hidden; border-radius: 8px; background: rgb(var(--page)); color: rgb(var(--page-ink)); box-shadow: 0 0 0 1px rgb(var(--line)); }
.ab-app { display: flex; align-items: center; gap: 10px; height: 26px; padding: 0 12px; border-bottom: 1px solid rgb(var(--page-line)); font-size: 11.5px; }
.ab-app i { width: 34px; height: 5px; border-radius: 3px; background: rgb(var(--page-line)); }
.ab-body { display: flex; flex-direction: column; gap: 6px; max-width: 420px; padding: 8px 14px; }
.ab-h { margin: 0; font-size: 13px; font-weight: 600; }
.ab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.ab-row > i { height: 6px; border-radius: 3px; background: rgb(var(--page-line)); }
.ab-seg { display: flex; gap: 2px; padding: 2px; border-radius: 6px; background: rgb(var(--page-line)); }
.ab-seg b { padding: 1px 7px; border-radius: 4px; font-weight: 500; font-size: 10.5px; }
.ab-seg b.is-on { background: rgb(var(--page)); }
.ab-status { margin: 0; font-size: 11.5px; color: rgb(var(--faint)); }
.ana-step { display: flex; align-items: baseline; gap: 10px; padding-left: 32px; font-size: 13px; color: rgb(var(--muted)); }
.ana-step .dot { align-self: center; }
.ana-step b { color: rgb(var(--text)); font-weight: 500; }
.ana-step code { font-size: 12px; color: rgb(var(--text)); }
.ana-step small { font-size: 12px; }
.ana-dock { flex: none; display: flex; flex-direction: column; gap: 10px; width: min(640px, calc(100% - 24px)); margin: 0 auto 14px; padding: 14px 16px 12px; border-radius: 16px; background: rgb(var(--chrome)); box-shadow: 0 0 0 1px rgb(var(--warn) / 0.55); }
.ana-dock p { margin: 0; }
.ana-dock-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.ana-dock-head b { font-weight: 600; }
.ana-dock-head .faint { margin-left: auto; font-size: 12px; }
.ana-dock code { padding: 10px 12px; border-radius: 10px; background: rgb(var(--ground)); box-shadow: 0 0 0 1px rgb(var(--line)); font-size: 12.5px; }
.ana-dock-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.ana-dock-btns kbd { margin-left: 6px; padding: 0 5px; border-radius: 4px; font: 10.5px var(--sc-font-mono); background: rgb(0 0 0 / 0.18); }
.ana-dock-btns .btn-quiet kbd { background: rgb(var(--line-strong) / 0.7); }
.ana-stop { margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(var(--line-strong)); }
.ana-stop i { width: 9px; height: 9px; border-radius: 2px; background: rgb(var(--text)); }
.ana-dock-instead { padding-top: 9px; border-top: 1px solid rgb(var(--line)); font-size: 12.5px; color: rgb(var(--faint)); }

/* THE COMMANDS STRIP, folded at the window's right edge in the Code and Agent views; every view keeps
   clear of it, and of the part of the window Ana's panel covers */
.view { right: 56px; }
.view > .main { margin-right: var(--overlap-in, 0px); }
.cmd-strip {
  position: absolute; top: 0; bottom: 0; right: 10px; width: 36px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px;
  border-radius: 12px; background: rgb(var(--chrome) / 0.55); box-shadow: 0 0 0 1px rgb(var(--line) / 0.95); color: rgb(var(--faint)); font-size: 11px;
  transition: opacity 220ms var(--ease);
}
.cmd-strip .i { width: 14px; height: 14px; }
.cmd-strip span { writing-mode: vertical-rl; letter-spacing: 0.02em; }
.tour-stage[data-view='local'] .cmd-strip, .tour-stage[data-view='ana'] .cmd-strip { opacity: 0; }

/* THE SCROLL CUE, at the right: what moves the tour, and how far it has come */
.scroll-cue {
  position: absolute; z-index: 40; top: 50%; right: max(8px, calc(var(--left) / 2 - 8px)); display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: var(--sc-ink-soft); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; pointer-events: none;
  transform: translateY(-50%); transition: opacity 300ms var(--ease);
}
.scroll-cue span { writing-mode: vertical-rl; }
.scroll-cue .i { width: 15px; height: 15px; animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.scroll-track { display: block; width: 2px; height: 72px; border-radius: 2px; background: #2C252B; overflow: hidden; }
.scroll-track b { display: block; width: 100%; height: 100%; background: var(--sc-accent); transform-origin: 50% 0; transform: scaleY(var(--tour-p, 0)); }

/* What the scroll turns on: lines, states and messages. Off is gone from the layout; on arrives. */
.js .tour [data-t]:not(.on) { display: none !important; }
.js .tour [data-t].on { animation: arrive 200ms var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(3px); } }
.js .note, .js .ana-head > .head { opacity: 0; visibility: hidden; }
.tour-stage:not([data-decision='approved']) .if-approved,
.tour-stage:not([data-decision='denied']) .if-denied,
.tour-stage[data-decision='none'] .if-decided,
.tour-stage:not([data-decision='none']) .if-none { display: none !important; }

/* ================================================================ the questions === */
.answers {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start;
  max-width: 1280px; margin: 0 auto; padding: clamp(96px, 13vw, 180px) var(--g) clamp(56px, 7vw, 100px);
}
.answers-head { position: sticky; top: calc(var(--bar-h) + 24px); display: flex; flex-direction: column; gap: 14px; }
.answers-head h2, .close-head h2, .band-head h2 { margin: 0; font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.answers-head p { margin: 0; max-width: 34ch; color: var(--sc-ink-soft); font-size: 16.5px; }
.answers-list { display: flex; flex-direction: column; gap: clamp(30px, 3.6vw, 44px); }
/* Five groups, each its heading and its questions: the heading is quiet ink in the product's face, no colour of a state. */
.qa-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.qa-group h3 {
  margin: 0 0 4px; padding-bottom: 8px; align-self: stretch; border-bottom: 1px solid rgb(var(--line));
  font-family: var(--sc-font-display); font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.005em; color: var(--sc-ink-soft);
}
.qa { width: 100%; }
.qa summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px; border-radius: 999px; cursor: pointer; list-style: none;
  border: 1px dashed rgb(var(--line-strong)); color: var(--sc-ink); font-size: 15.5px; font-weight: 450;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.6; transition: transform 180ms var(--ease); }
.qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.qa summary:hover { border-color: rgb(var(--accent) / 0.7); background: rgb(var(--accent) / 0.06); }
.qa[open] summary { border-style: solid; border-color: rgb(var(--accent) / 0.55); }
.qa-a { display: flex; gap: 12px; margin: 12px 0 8px; padding: 14px 18px; border-radius: 16px; background: var(--sc-surface); box-shadow: 0 0 0 1px var(--card-edge); max-width: 62ch; }
.qa-a::before {
  content: ''; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: radial-gradient(circle at 33% 27%, rgb(255 255 255 / 0.85) 0 5%, transparent 13%), radial-gradient(circle at 50% 50%, #0A0A0C 0 13%, transparent 14.5%), radial-gradient(circle at 50% 50%, rgb(var(--accent-strong)) 0 18%, rgb(var(--accent)) 32%, rgb(var(--brand)) 44%, transparent 46%), radial-gradient(circle at 50% 50%, transparent 45%, #2A2228 48%, #141216 62%, #050506 72%);
  box-shadow: 0 0 0 1px rgb(var(--brand) / 0.5);
}
.qa-a p { margin: 0; color: #D6CCD3; font-size: 15.5px; line-height: 1.62; }
.qa-a a { color: var(--sc-accent); text-underline-offset: 3px; }

/* ============================================================================ the site bar === */
/* It stays at the top once the tour has ended, drawn like the app's title bar: flat on the ground, the name
   at the left in tesserane Sans, the links and one button at the right. Pure HTML and CSS. Everything after
   the tour keeps the bar's height and a little air clear (html's scroll-padding-top) when a link lands on it
   or the keyboard reaches it. */
.site-bar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 4px; height: var(--bar-h);
  padding: 0 max(var(--g), calc((100% - 1420px) / 2 + var(--g)));
  background: rgb(var(--ground)); border-bottom: 1px solid rgb(var(--line)); color: rgb(var(--text));
  font: 400 13.5px/1.45 var(--sc-font-text); -webkit-font-smoothing: antialiased;
}
.site-bar a { color: inherit; text-decoration: none; }
.site-bar :focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 8px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; font-size: 18px; white-space: nowrap; }
.site-brand img { width: 26px; height: 26px; flex: none; }
.site-links { display: flex; align-items: center; gap: 2px; }
.site-links a, .site-menu nav a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 8px; white-space: nowrap;
  color: rgb(var(--muted)); font-weight: 500; transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.site-links a:hover, .site-menu nav a:hover { background: rgb(var(--line) / 0.7); color: rgb(var(--text)); }
.site-bar .site-start {
  display: inline-flex; align-items: center; height: 32px; margin-left: 6px; padding: 0 14px; border-radius: 8px; white-space: nowrap;
  background: rgb(var(--accent)); color: var(--sc-accent-ink); font-weight: 600; transition: background-color 160ms var(--ease);
}
.site-bar .site-start:hover { background: rgb(var(--accent-strong)); }
.site-menu { display: none; }
.site-menu summary {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; cursor: pointer;
  list-style: none; color: rgb(var(--muted)); transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary:hover, .site-menu[open] summary { background: rgb(var(--line) / 0.7); color: rgb(var(--text)); }
.site-menu summary .i { width: 18px; height: 18px; }
.site-menu .i-menu-close, .site-menu[open] .i-menu { display: none; }
.site-menu[open] .i-menu-close { display: block; }
/* The open menu is a small card under the bar, over the page: a line and a shadow that only darkens. */
.site-menu nav {
  position: absolute; top: calc(100% + 6px); right: max(8px, var(--g)); width: min(260px, calc(100% - 16px)); display: flex; flex-direction: column;
  padding: 6px; border-radius: 12px; background: rgb(var(--chrome));
  box-shadow: 0 0 0 1px rgb(var(--line-strong) / 0.7), 0 14px 30px -12px rgb(0 0 0 / 0.75);
}
.site-menu nav a { height: 44px; font-size: 15px; color: rgb(var(--text)); }
@media (max-width: 719px) {
  .site-links { display: none; }
  .site-menu { display: block; }
  .site-start { margin-left: 0; }
}

/* ===================================================== the sections after the demo === */
.band { max-width: 1280px; margin: 0 auto; padding: clamp(72px, 9vw, 130px) var(--g) clamp(24px, 3vw, 48px); }
.band-head { display: flex; flex-direction: column; gap: 14px; }
.band-head h2 { margin: 0; }

/* ================================================================== the prices === */
/* (The tour's own `.plan`, Ana's plan card, is a different thing: these rules sit under `.plans`.)
   Three plans, the Enterprise strip and the United States line. A card's edge is a crisp line (Max's is rose);
   the ticks are ink and the plus marks rose, never green (green is "done"). One price of each pair shows, by the
   section's data-billing; with no script it stays on "month" and the switch is hidden. */
.pricing .band-head { margin-bottom: 28px; }
.pricing .band-head p { margin: 0; max-width: 62ch; color: var(--sc-ink-soft); font-size: 16.5px; }
.billing {
  display: flex; width: fit-content; max-width: 100%; margin: 0 0 22px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--card-edge);
}
.billing button {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--sc-ink-soft); font: 500 13.5px/1.2 var(--sc-font-text); white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.billing button:hover { color: var(--sc-ink); }
.billing button[aria-pressed='true'] { background: rgb(var(--line) / 0.7); color: var(--sc-ink); }
.billing :focus-visible, .plan-cta:focus-visible, .plans-ent a:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.no-js .billing { display: none; }
.pricing[data-billing='month'] .p-year, .pricing[data-billing='year'] .p-month { display: none; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.plans .plan {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 14px;
  background: var(--sc-surface); border: 1px solid var(--card-edge); box-shadow: none;
}
.plans .plan[data-plan='max'] { border-color: rgb(var(--accent)); }
.plan-name { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.plan-badge { padding: 2px 9px; border-radius: 999px; background: rgb(var(--accent)); color: var(--sc-accent-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.plan-price { margin: 0; font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.plan-price small { color: var(--sc-ink-soft); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.plan-what { margin: 0; color: var(--sc-ink-soft); font-size: 14.5px; line-height: 1.45; }
.plan-list { display: grid; align-content: start; gap: 9px; margin: 6px 0 12px; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.45; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; }
.plan-list .i { width: 14px; height: 14px; margin-top: 3px; stroke-width: 2; color: var(--sc-ink-soft); }
.plan-list .plus .i { color: var(--sc-accent); }
.plan-cta {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; padding: 0 16px; border-radius: 10px;
  border: 1px solid rgb(var(--line-strong)); color: var(--sc-ink); font: 600 14.5px/1.25 var(--sc-font-text); text-align: center; text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.plan-cta:hover { background: rgb(var(--line) / 0.7); }
.plans .plan[data-plan='max'] .plan-cta { background: rgb(var(--accent)); border-color: rgb(var(--accent)); color: var(--sc-accent-ink); }
.plans .plan[data-plan='max'] .plan-cta:hover { background: rgb(var(--accent-strong)); border-color: rgb(var(--accent-strong)); }
.plan-trial { margin: -2px 0 0; color: rgb(var(--muted)); font-size: 13px; line-height: 1.4; text-align: center; text-wrap: balance; }
/* The trial has no AI, so the line under it offers Max paid at once, with the month's AI from the first day. */
.plan-now { display: block; margin-top: 4px; }
.plan-now a { color: var(--sc-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.plan-now a:hover { color: rgb(var(--accent-strong)); }
.plan-now a:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 4px; }

/* Wide enough for three across, the cards share their rows (name, price, line, list, button, trial line), so every
   button stands at the same height whatever its list. A browser without subgrid keeps the button at each card's foot. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 820px) {
    .plans { grid-template-rows: auto auto auto 1fr auto auto; }
    .plans .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 10px; }
    .plan-cta { margin-top: 0; }
    .plan-list { margin-bottom: 4px; }
  }
}

.plans-ent {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; margin-top: 14px; padding: 14px 22px;
  border-radius: 14px; border: 1px dashed rgb(var(--line-strong)); color: var(--sc-ink-soft); font-size: 15px;
}
.plans-ent p { margin: 0; text-wrap: balance; }
.plans-ent strong { color: var(--sc-ink); font-weight: 600; }
.plans-ent a {
  display: inline-flex; align-items: center; min-height: 36px; color: var(--sc-ink); font-weight: 600; text-decoration: underline;
  text-decoration-color: #4A3F47; text-underline-offset: 4px; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}
.plans-ent a:hover { color: var(--sc-accent); text-decoration-color: currentColor; }
.plans-note { display: grid; gap: 2px; margin: 18px 0 0; color: var(--sc-ink-soft); font-size: 14px; line-height: 1.5; }
.plans-note span { text-wrap: balance; }
.plans-note span:last-child { color: rgb(var(--faint)); font-size: 13px; }
@media (max-width: 819px) {
  .plans { grid-template-columns: 1fr; }
}

/* ================================================================ the download === */
/* A card for each computer and the iPhone, a rose button for each way to get it (the .deb, the second way for
   Linux, is quiet). A platform wears no status colour and nothing glows: the card's edge is a crisp line.
   Wide enough for two across the cards share their rows (name, line, buttons), so the buttons start at the same
   height whatever a line's length; a browser without subgrid keeps the buttons at each card's foot. Four across
   from 1100 px, two from 560, one column under that. */
.download .band-head { margin-bottom: 28px; }
.download .band-head p { margin: 0; max-width: 62ch; color: var(--sc-ink-soft); font-size: 16.5px; }
.dl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dl {
  display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; border-radius: 14px;
  background: var(--sc-surface); border: 1px solid var(--card-edge); box-shadow: none;
}
.dl-name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.dl-what { margin: 0 0 6px; color: var(--sc-ink-soft); font-size: 14.5px; line-height: 1.45; text-wrap: balance; }
.dl-nb { white-space: nowrap; }
.dl-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.dl-btn {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid rgb(var(--accent)); background: rgb(var(--accent)); color: var(--sc-accent-ink);
  font: 600 14.5px/1.25 var(--sc-font-text); text-align: center; text-decoration: none;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.dl-btn:hover { background: rgb(var(--accent-strong)); border-color: rgb(var(--accent-strong)); }
.dl-btn-quiet { border-color: rgb(var(--line-strong)); background: transparent; color: var(--sc-ink); }
.dl-btn-quiet:hover { border-color: rgb(var(--line-strong)); background: rgb(var(--line) / 0.7); }
.dl-btn:focus-visible, .dl-note a:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
.dl-version { margin: 18px 0 0; color: var(--sc-ink-soft); font-size: 14px; line-height: 1.5; }
.dl-note { margin: 18px 0 0; color: var(--sc-ink-soft); font-size: 14px; line-height: 1.5; }
.dl-version:not([hidden]) + .dl-note { margin-top: 4px; }
.dl-note a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: #4A3F47; text-underline-offset: 4px; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
.dl-note a:hover { color: var(--sc-accent); text-decoration-color: currentColor; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 560px) {
    .dl { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
    .dl-actions { margin-top: 0; }
  }
}
@media (max-width: 1099px) {
  .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .dl-grid { grid-template-columns: 1fr; }
}

/* =================================================================== your turn === */
.close { max-width: 1420px; margin: 0 auto; padding: clamp(24px, 4vw, 60px) var(--g) 0; }
.close-head { display: flex; gap: 16px; align-items: flex-start; margin: 0 0 22px; }
.close-head .orb { margin-top: 4px; }
.close-head p { margin: 8px 0 0; max-width: 60ch; color: var(--sc-ink-soft); font-size: 16.5px; }
.close-head code { padding: 1px 6px; border-radius: 5px; background: #221D22; color: var(--sc-ink); }
.demo-frame {
  position: relative; height: clamp(560px, 84svh, 880px); border-radius: 14px; overflow: hidden; background: rgb(var(--ground));
  box-shadow: 0 0 0 1px var(--rose-line), 0 30px 70px -24px hsl(var(--sc-shadow-color) / 0.8);
}
.demo-placeholder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 0.3em; height: 100%; margin: 0; padding: 24px; text-align: center; color: var(--sc-ink-soft); font-size: 14px; }
.demo-placeholder a { color: var(--sc-accent); text-underline-offset: 4px; }
.close-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; font-size: 14px; }
.close-links a { color: var(--sc-ink-soft); text-decoration: underline; text-decoration-color: #4A3F47; text-underline-offset: 4px; transition: color 160ms var(--ease); }
.close-links a:hover { color: var(--sc-ink); }
/* The footer, the same on every page (the legal pages load this file too): the name, the five pages, the company. */
.site-footer { width: 100%; max-width: 1420px; margin: clamp(48px, 7vw, 90px) auto 0; padding: 0 var(--g); }
.site-footer-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  padding: 22px 0 34px; border-top: 1px solid #241F24; color: var(--sc-ink-soft); font-size: 13px;
}
.foot-brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--sc-ink); font-size: 16px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--sc-ink-soft); text-decoration: none; transition: color 160ms var(--ease); }
.foot-links a:hover, .foot-links a[aria-current='page'] { color: var(--sc-ink); }
.foot-links a:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; border-radius: 4px; }
.foot-copy { margin: 0; }
@media (max-width: 719px) {
  .site-footer-in { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================== compact window === */
@container win (max-width: 1000px) {
  .switch-tab, .switch-thumb { width: 88px; }
  .new-session span { display: none; }
  .new-session { width: 32px; padding: 0; justify-content: center; }
}
@container win (max-width: 900px) {
  .view-code .rail { display: none; }
}
/* The window's top bar keeps what fits: the name of the window gives way first, then the traffic lights, then
   the three text links (Start free and Try it yourself stay). */
@container win (max-width: 830px) {
  .win-title { display: none; }
  .win-links a { padding: 0 8px; }
}
@container win (max-width: 710px) {
  .win-dots { display: none; }
}
@container win (max-width: 650px) {
  .win-links a:not(.win-start):not(.win-try) { display: none; }
}
@container win (max-width: 820px) {
  .rail, .cmd-strip { display: none; }
  .view { inset: 0 8px; }
  .pane-head .agent-badge { display: none; }
  .lai-model small, .lai-find span { display: none; }
  .lai-page { padding: 12px 14px; }
  .lai-status .lai-more { display: none; }
  .win-bar { grid-template-columns: auto 1fr auto; }
  .win-bar-end .pill { display: none; }
  .switch { justify-self: end; }
}
@container win (max-width: 620px) {
  .win-chrome { gap: 10px; padding-left: 12px; }
  .switch-tab { width: 38px; }
  .switch-tab span { display: none; }
  .switch-thumb { width: 38px; }
  .grid { grid-template-columns: 1fr; grid-template-rows: 1.3fr 1fr; }
  .grid .pane:nth-child(n+3) { display: none; }
  .ws-tabs span:not(.is-on) { display: none; }
  .win-status > span:first-child { display: none; }
  .win-status { justify-content: flex-end; }
  .route { display: none; }
  .msg-you { max-width: 92%; font-size: 12.5px; }
  .composer span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container win (max-width: 420px) {
  .win-bar-end .new-session, .win-bar-end .orb-link { display: none; }
  .win-dots { display: none; }
  .win-chrome { gap: 8px; padding-right: 6px; }
  /* "Demo · answers are scripted" stays whole on a phone: on two lines, beside the two buttons. */
  .win-demo { max-width: 96px; padding: 3px 8px; border-radius: 12px; font-size: 10.5px; line-height: 1.15; text-align: center; white-space: normal; }
  .win-links a { padding: 0 9px; }
  .win-brand .wordmark { font-size: 15px; }
  .term { font-size: 10.5px; padding: 8px 10px; }
  /* A phone's window keeps the conversation: the feature's criteria and Ana's browser fold away, as the
     app's narrow layouts let them (the browser behind its toggle, not pressed). */
  .criteria, .ana-browser, .ab-toggle:not(.is-off) { display: none; }
  .ab-toggle.is-off { display: grid; }
}
/* (after the 420px rules, so the narrower window wins) */
@container win (max-width: 340px) {
  .win-brand .wordmark { display: none; }
  .win-links a { padding: 0 7px; font-size: 11.5px; }
  .win-links .win-start { margin-left: 2px; }
}

/* ===================================================================== short window === */
/* A short window keeps each beat's room: the request stays whole as the team takes it and as the build asks, and
   her question's buttons stay in the window under a whole message. The Criteria fold to the one line the Features
   panel shows (criteriaSummary): in a mid-height window from the ask on, in a short one from the start; the
   thread's quieter rows give way; Ana's browser folds behind its toggle, not pressed, where her conversation has
   no height to give it. */
@container win (max-height: 820px) {
  .crit-late.on ~ .crit-label, .crit-late.on ~ ul { display: none; }
  .crit-late.on ~ .crit-sum { display: block; }
  .criteria:has(> .crit-late.on) { padding: 7px 12px; }
}
@container win (max-height: 700px) {
  .route, .try-row { display: none; }
}
@container win (max-height: 650px) {
  .criteria { padding: 7px 12px; }
  .crit-label, .criteria ul { display: none; }
  .crit-sum { display: block; }
}
@container win (max-height: 640px) {
  .ana-browser, .ab-toggle:not(.is-off) { display: none; }
  .ab-toggle.is-off { display: grid; }
  .view-ana .chat { min-height: 0; }
}
@container win (max-height: 620px) {
  .thread { gap: 8px; padding: 10px 0 8px; }
  .step ol li:nth-child(n+3) { display: none; }
  .step > p:not(.small) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  /* while the build asks, its card holds the question, not the steps before it */
  .tour-stage[data-decision='none'] .step.is-build:has(> .ask.on) > .steps { display: none; }
}
@container win (max-height: 480px) {
  .criteria { display: none; }
  .step ol li:nth-child(n+2) { display: none; }
}

/* ===================================================================== layouts === */
/* Under 1100px wide (or short of height), the window takes the top and Ana's panel is a sheet below
   it, overlapping its lower edge. At the peak on a phone there is no phone in front of a desk: the
   visitor is holding the phone, so the request drops in from the top of their own screen. A narrow
   window with the height for it (a tablet, a browser window half the screen wide) keeps the phone. */
@media (max-width: 1099px), (max-height: 600px) {
  .scroll-cue { top: auto; bottom: 12px; right: 14px; flex-direction: row; transform: none; }
  .scroll-cue span { writing-mode: horizontal-tb; }
  .scroll-track { width: 44px; height: 2px; }
  .scroll-track b { transform-origin: 0 50%; transform: scaleX(var(--tour-p, 0)); }
  /* the sheet's zone is a fixed height below the window; the sheet overlaps the window's foot */
  .tour-stage { --top: 10px; --sheet: clamp(240px, 33svh, 320px); --win-h: max(200px, calc(100svh - var(--sheet) - var(--top))); --overlap: 0px; }
  .desk { left: max(10px, var(--g)); right: max(10px, var(--g)); width: auto; height: var(--win-h); transform-origin: 50% 30%; }
  .ana-panel {
    left: max(8px, calc(var(--g) - 4px)); right: max(8px, calc(var(--g) - 4px)); top: calc(var(--top) + var(--win-h) - 20px); width: auto; max-width: 720px; margin: 0 auto;
    padding: 14px 18px 18px; gap: 10px; max-height: calc(var(--sheet) + 10px); overflow: hidden;
  }
  .ana-head .orb { width: 28px; height: 28px; }
  .head-brand img { width: 30px; height: 30px; }
  .head-brand .wordmark { font-size: 28px; }
  .note h1 { font-size: clamp(22px, 5.6vw, 28px); }
  .note h2 { font-size: clamp(20px, 5vw, 24px); }
  .note p { font-size: 15px; line-height: 1.5; }
  .phone { display: none; }
  .banner-slot { display: block; position: absolute; top: 8px; left: 8px; right: 8px; max-width: 420px; margin: 0 auto; height: 170px; pointer-events: none; }
}
/* Under 720px the tour window's bar keeps Start free and Try it yourself; the other links are in the site bar's menu below. */
@media (max-width: 719px) {
  .win-links a:not(.win-start):not(.win-try) { display: none; }
}
/* A phone on its side: the window on the left, Ana's panel beside it. */
@media (max-height: 520px) and (min-width: 560px) {
  .scroll-cue { display: none; }
  .tour-stage { --win-h: calc(100svh - 20px); }
  .desk { right: auto; width: calc(58% - 16px); }
  .ana-panel { left: auto; right: 10px; top: 10px; width: calc(42% - 14px); max-height: calc(100svh - 20px); overflow: auto; }
  .banner-slot { left: 10px; right: auto; width: calc(58% - 16px); max-width: none; margin: 0; }
}
/* The phone in the narrow layout: it rises from behind Ana's sheet, in front of the window, over the
   team list; site.js sets its place and size from the room above the sheet. */
@media (min-width: 700px) and (max-width: 1099px) and (min-height: 700px) {
  .phone { display: block; z-index: 15; bottom: auto; transform-origin: 0 0; }
  .handoff { z-index: 17; }
  .banner-slot { display: none; }
}
@media (max-height: 640px) and (max-width: 559px) {
  .tour-stage { --sheet: 52svh; }
}
@media (max-height: 700px) and (max-width: 1099px), (max-height: 600px) {
  .note h1 { font-size: 21px; }
  .note h2 { font-size: 19px; }
  .note p { font-size: 14px; }
  .ana-head small { display: none; }
}

/* Where the sheet is short, Ana's hello gives way: her name heads the panel from the first beat. */
@media (max-width: 559px), (max-height: 700px) and (max-width: 1099px), (max-height: 600px) {
  .note .note-guide { display: none; }
}

@media (max-width: 760px) {
  .answers { grid-template-columns: 1fr; padding-top: 72px; }
  .answers-head { position: static; }
  .qa-group h3 { font-size: 17px; }
  .qa summary { font-size: 15px; text-align: left; border-radius: 22px; }
  .qa-a { padding: 12px 14px; }
  .qa-a p { font-size: 15px; }
  .demo-frame { height: min(700px, 86svh); min-height: 520px; border-radius: 12px; margin: 0 -6px; }
  .close-head .orb { display: none; }
}

/* ============================================================ reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .js .tour [data-t].on { animation: none; }
  .caret, .scroll-cue .i { animation: none; }
  .switch-thumb { transition: none; }
  .pipe { overflow: hidden; }
  .pipe-strip { flex-direction: column; gap: 8px; transform: none !important; height: auto; }
  .step { width: auto; flex-direction: column; padding: 9px 12px; gap: 6px; }
  .step ol { display: none; }
  .step > p { font-size: 12px; }
  .step ul li:not(:last-child) { display: none; }
  .step.is-ahead { opacity: 0.55; }
  .pv { clip-path: none; opacity: var(--pv, 0); }
  .faceid .i { animation: none; stroke-dashoffset: 0; }
  .handoff.is-open .note-actions-phone { animation: none; }
}

/* ===================================================================== no script === */
.no-js .tour-stage { position: relative; height: auto; display: flex; flex-direction: column; gap: 24px; padding: 24px var(--g) 0; }
.no-js .desk { position: relative; left: auto; top: auto; width: 100%; height: 720px; transform: none; }
.no-js .ana-panel { position: relative; left: auto; top: auto; bottom: auto; width: auto; max-width: 720px; max-height: none; }
.no-js .notes { display: flex; flex-direction: column; gap: 28px; }
.no-js .head-ana { display: none; }
.no-js .note.if-approved, .no-js .note.if-denied, .no-js .note.if-none { display: none; }
.no-js .phone, .no-js .handoff, .no-js .banner-slot, .no-js .view-agent, .no-js .view-ana, .no-js .view-local, .no-js .pv, .no-js .scroll-cue { display: none; }
.no-js .view-code { visibility: visible; opacity: 1; }
/* Without a script the window holds its opening state, and what the engine would fade in is simply there. */
.no-js .tour [data-t]:not([data-t='0']) { display: none; }
.no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }