/* /workspace/try — the page around the demo. Every value is one of the app's
   tokens (tokens.css), as the app's own components are: no literal colours,
   sizes or durations here. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  -webkit-font-smoothing: antialiased;
}

code { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); padding: 0 var(--space-1); border-radius: var(--radius-sm); }

.try {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7) var(--space-4) var(--space-8);
}

/* Its height is the old style button's, so moving the picker beside the preview moves nothing down the page (M-016). */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); min-height: calc(var(--text-sm) * var(--leading-ui) + var(--space-1) * 2 + var(--border-width) * 2); }
.back {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--fg-secondary);
  text-decoration: none;
}
.back:hover { color: var(--fg); }

.head { margin-bottom: var(--space-5); }
.title {
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3);
}
/* The two test headlines are sentences, not a name: a size down, and kept to a readable measure. */
.title[data-headline] { font-size: var(--text-h1); max-width: 22em; text-wrap: balance; }
.lede { font-size: var(--text-prose); line-height: var(--leading-prose); color: var(--fg-secondary); }

/* ── the drop zone ── */
.drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--surface);
  border: var(--border-width) dashed var(--fg-faint);
  border-radius: var(--radius-lg);
  text-align: center;
  cursor: pointer;
}
.drop:hover { background: var(--surface); border-color: var(--fg-secondary); }
.drop:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.drop.over { background: var(--accent-soft); border-color: var(--accent); border-style: solid; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-main { font-size: var(--text-prose); font-weight: var(--weight-medium); }
.drop-main { max-width: 22em; }
.drop-icon { width: var(--space-7); height: var(--space-7); fill: none; stroke: var(--fg-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.drop:hover .drop-icon, .drop.over .drop-icon { stroke: var(--accent); }

.privacy {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}

/* ── a file that could not be read ── */
.failed {
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
.failed-head { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
.failed > p { color: var(--fg-secondary); margin-bottom: var(--space-4); }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

.paste-label { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-2); }
.paste {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: var(--space-3);
}

/* ── warnings, as banners across the top of the demo ── */
.banner {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--warning-bg);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.banner-row { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.banner-text { flex: 1 1 260px; }
.banner-more { margin-top: var(--space-3); }

.small { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: var(--space-2); }
.link {
  font: inherit;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ── the start (M-020): the prompt card is the main action, the centre of the screen; I have my file and Skip below it; the drop zone, normal-sized, once the prompt is copied. The card reads as a prompt being copied, not as a button: its first lines in monospace, fading out, with a copy mark. ── */
.step[hidden] { display: none; }
.prompt-card {
  position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-7) var(--space-4) var(--space-5);
  font: inherit; text-align: left; color: var(--fg-secondary); cursor: copy;
  background: var(--code-bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
}
.prompt-card:hover { border-color: var(--fg-secondary); color: var(--fg); }
.prompt-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.prompt-card-label { font-size: var(--text-prose); font-weight: var(--weight-medium); color: var(--fg); }
.prompt-card-peek {
  display: block; max-height: calc(var(--text-sm) * var(--leading-ui) * 6); overflow: hidden;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-ui); color: var(--fg-secondary); white-space: pre-wrap;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.prompt-card-copy { position: absolute; top: var(--space-4); right: var(--space-4); width: var(--icon-size); height: var(--icon-size); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* The sign-up's questions and button, sliding in under the email once it looks complete (27 Oct 2026). */
.reply-more { margin-top: var(--space-5); animation: step-in 240ms var(--easing) both; }
.reply-more[hidden] { display: none; }
.reply-more .btn-big { margin-top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { .reply-more { animation: none; } }
.start-more { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
/* Step 2: the same centred spot, arriving with a short fade and rise (still under reduced motion). */
.step2 { animation: step-in 240ms var(--easing) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(var(--space-2)); } }
@media (prefers-reduced-motion: reduce) { .step2 { animation: none; } }
.step2-head { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.step2-sub { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--fg-secondary); }
/* The copied screen (Brian, 27 and 28 Oct 2026): "Copied to clipboard" with its clipboard icon, small once settled (try.js scales it up first), the instruction large, then the agents it works with, each a mark (where licensed) and its name. */
.copied-done { display: flex; width: fit-content; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); transform-origin: left center; }
.copied-icon { transform-origin: 50% 60%; width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copied-head { margin-top: var(--space-3); font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.agent-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
/* Named agent-chip, not agent: the replay's box is .agent (demo.css), and a .agent here restyled it (c507211, fixed 27 Oct 2026). */
.agent-mark { display: block; width: calc(var(--icon-size) * 1.25); height: calc(var(--icon-size) * 1.25); flex: none; }
.agent-chip picture { display: contents; }
/* The OpenAI and Grok files carry their own clear space, which their terms keep (OpenAI's about half its box, Grok's less): drawn larger, with the extra taken back by negative margins, so each mark reads at Claude's size and every chip is the same height. */
.agent-mark-spaced { width: calc(var(--icon-size) * 2.5); height: calc(var(--icon-size) * 2.5); margin: calc(var(--icon-size) * -0.625); }
.agent-mark-grok { width: calc(var(--icon-size) * 1.75); height: calc(var(--icon-size) * 1.75); margin: calc(var(--icon-size) * -0.25); }
.agent-chip { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-prose); font-weight: var(--weight-medium); color: var(--fg); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); }
.copied .step2-back { margin-top: var(--space-5); }
.step2 .drop { margin-top: var(--space-4); }
.step2-back { display: block; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--fg-secondary); }
.step2-links { display: flex; gap: var(--space-5); }
.step2-links .step2-back { margin-top: var(--space-4); }
/* The copied screen fading out before the drop screen fades in. */
.step2.leaving { opacity: 0; transition: opacity 240ms var(--easing); }
@media (prefers-reduced-motion: reduce) { .step2.leaving { transition: none; } }
.skip-demo { font-size: var(--text-sm); color: var(--fg-secondary); text-decoration-color: var(--fg-faint); }
.skip-demo:hover { color: var(--fg); }
.get-file-status { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--fg); min-height: 1em; }
.prompt-box { display: block; width: 100%; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg); background: var(--code-bg); border: var(--border-width) solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); resize: vertical; }

.btn {
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--on-accent);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
}
.btn:disabled { opacity: var(--disabled-opacity); cursor: default; }

@media (max-width: 600px) {
  .try { padding-top: var(--space-5); }
  .title { font-size: var(--text-h1); }
  .lede, .drop-main { font-size: var(--text-base); }
  .drop { padding: var(--space-6) var(--space-4); }
  .failed { padding: var(--space-4); }
}

.foot {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-7);
  border-top: var(--border-width) solid var(--border);
  font-size: var(--text-sm);
  color: var(--fg-secondary);
}


/* ── the button at the end ── */
.reply {
  margin-top: calc(var(--space-8) * 2.5);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
.reply-sends { font-size: var(--text-sm); color: var(--fg-secondary); margin-bottom: var(--space-4); }
.reply-question { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-3); }
.reply-field { margin-bottom: var(--space-4); }
.reply-field[hidden] { display: none; }
.reply > .link { display: block; margin-top: var(--space-3); font-size: var(--text-sm); }
.reply-email-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin-bottom: var(--space-1); }
.reply-email {
  width: 100%;
  max-width: 360px;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.reply-status { font-size: var(--text-sm); color: var(--fg-secondary); margin-top: var(--space-3); min-height: 1em; }
.reply-after { font-size: var(--text-prose); line-height: var(--leading-prose); }
.btn-big { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }
.choices { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice {
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg);
  background: var(--bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.choice:hover { background: var(--hover); }
.choice[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.btn-big + .reply-field { margin-top: var(--space-4); }

.btn-quiet { color: var(--fg); background: var(--surface); border: var(--border-width) solid var(--border); }
.banner-sample { background: var(--accent-soft); }
.banner-note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--fg-secondary); }

/* ── on a phone ── */

/* ── the sample's three taps ── */
.taps {
  margin-top: var(--space-7);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
.taps-head { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-5); }
.tap { margin-bottom: var(--space-5); }
.tap-question { font-size: var(--text-base); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.taps .reply { margin-top: 0; padding: 0; border: none; background: none; }

/* ── the share card ── */
.card {
  margin-top: calc(var(--space-8) * 1.5);
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-lg);
}
.card-head { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.card-sub { font-size: var(--text-sm); color: var(--fg-secondary); margin: var(--space-1) 0 var(--space-4); }
.card-canvas { display: block; width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-float); }

/* ── after a file is read: a small way back, with the promise beside it ── */
.loaded { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; font-size: var(--text-sm); }
.loaded[hidden] { display: none; }
.loaded .link { flex: 0 0 auto; }
.loaded .privacy { margin-top: 0; flex: 1 1 320px; }

/* ── the signup, bigger since M-013: "Email me at [box] when it's ready!" and Notify ── */
.reply { padding: var(--space-6); }
.reply-sends { margin-bottom: var(--space-3); }
.reply-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.reply-sentence {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
}
.reply-sentence .reply-email {
  width: 14em; max-width: 100%;
  font-size: var(--text-h3); font-weight: var(--weight-normal);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}
.reply-form .btn-big { font-size: var(--text-h3); padding: var(--space-2) var(--space-6); }
.reply-after { font-size: var(--text-h3); font-weight: var(--weight-medium); }

/* ── the foot: four promises as icons, then one line from Brian ── */
.foot .icon { width: var(--icon-size); height: var(--icon-size); flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.promises { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-4); }
.promises li { display: flex; align-items: center; gap: var(--space-2); color: var(--fg); font-weight: var(--weight-medium); }
.promises .icon { color: var(--accent); }
.promises .promises-lead { color: var(--fg-secondary); font-weight: var(--weight-normal); }
.foot-note { color: var(--fg); margin-bottom: var(--space-2); }

@media (max-width: 600px) {
  .reply { padding: var(--space-4); }
  .reply-sentence { font-size: var(--text-h3); }
  .reply-sentence .reply-email { width: 100%; font-size: var(--text-base); }
  .reply-form .btn-big { width: 100%; }
}

/* ── the style picker (M-016): "Style" and a small square per theme; a row in the top bar, a slim column beside the preview ── */
.style-pick { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.style-label { font-size: var(--text-xs); color: var(--fg-secondary); font-weight: var(--weight-medium); }
.style-square {
  width: var(--space-5); height: var(--space-5); padding: 0; flex: none;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.style-square:hover { border-color: var(--fg-secondary); }
.style-square[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.style-pick.docked {
  position: absolute; top: 0; left: calc(100% + var(--space-4));
  flex-direction: column; flex-wrap: nowrap; gap: var(--space-2);
  padding: var(--space-2); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-md);
}

/* ── the moment after a drop ── */
.loading { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); text-align: center; }
.loading[hidden] { display: none; }
.loading-line { font-size: var(--text-h3); font-weight: var(--weight-medium); color: var(--fg); }
.loading-mark { display: flex; gap: var(--space-2); }
.loading-mark span { width: var(--space-3); height: var(--space-3); border-radius: var(--radius-sm); background: var(--accent); animation: loading-bounce 900ms var(--easing) infinite; }
.loading-mark span:nth-child(2) { animation-delay: 150ms; background: var(--chart-1); }
.loading-mark span:nth-child(3) { animation-delay: 300ms; background: var(--chart-3); }
@keyframes loading-bounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(calc(var(--space-3) * -1)); opacity: 1; } }

/* ── the story, the figures and the agent tools, after the workspace ── */
/* More room between sections (M-015: "white space is available"). */
.story { margin-top: calc(var(--space-8) * 3); text-align: center; }
.story[hidden], .figures[hidden], .agent-tools[hidden], .signup-band[hidden], .roadmap[hidden] { display: none; }
.story-head { font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.story-sub { font-size: var(--text-prose); line-height: var(--leading-prose); color: var(--fg-secondary); max-width: 36em; margin: var(--space-3) auto 0; }
.section-title { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-4); }
.figures, .agent-tools { margin-top: calc(var(--space-8) * 2.5); }
.tool-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.tool-list li { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); font-weight: var(--weight-medium); }
.tool-list .icon { width: var(--space-6); height: var(--space-6); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 600px) {
  .style-square { width: var(--space-5); height: var(--space-5); }
  .topbar { align-items: flex-start; }
  .story-head { font-size: var(--text-h2); }
}

/* With reduced motion nothing moves for longer than a fade (M-014). */
@media (prefers-reduced-motion: reduce) {
  .loading-mark span { animation: none; opacity: 1; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── speed, as bars (M-016): Notion MCP long, Workspace short, a little flame off the Workspace bar ── */
.speed { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.speed-claim { font-size: var(--text-h3); font-weight: var(--weight-medium); margin-bottom: var(--space-3); }
.speed-number { font-size: var(--text-h1); font-weight: var(--weight-semibold); color: var(--accent); }
.speed-bar-row { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--fg-secondary); }
.speed-track { position: relative; height: var(--space-4); background: var(--surface-sunken); border-radius: var(--radius-sm); }
.speed-bar { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--radius-sm); transition: width 1100ms var(--easing); }
.speed-bar.slow { background: var(--fg-faint); }
.speed-bar.fast { background: var(--accent); transition-delay: 250ms; }
.figures.grown .speed-bar { width: var(--to); }
/* The flame (Brian, 29 Oct 2026: "janky"): an inline SVG of layers, a soft glow, an outer flame in the warm chart colours, a brighter inner flame and a pale core near the base, and two embers. It stands upright on the bar's end and burns upward. Each layer moves on its own eased loop, with durations that aren't multiples of each other, so it never visibly repeats; only transform and opacity animate. */
.speed-flame {
  /* 11×16: the room between the bar's middle and the bar above it is about 20px, so even at its tallest stretch the tip stays a couple of pixels clear of the row above. */
  position: absolute; right: -5.5px; bottom: 50%; width: 11px; height: 16px; opacity: 0; pointer-events: none;
}
.speed-flame svg { display: block; width: 100%; height: 100%; overflow: visible; }
.speed-flame svg > * { transform-box: fill-box; transform-origin: 50% 100%; }
.figures.grown .speed-flame { opacity: 1; transition: opacity 300ms var(--easing) 1200ms; }
.figures.grown .flame-outer { animation: flame-sway 1.3s ease-in-out infinite alternate 1.4s; }
.figures.grown .flame-inner { animation: flame-stretch 0.9s ease-in-out infinite alternate 1.4s; }
.figures.grown .flame-core { animation: flame-pulse 0.7s ease-in-out infinite alternate 1.4s; }
.figures.grown .flame-glow { transform-origin: 50% 50%; animation: flame-glow 1.7s ease-in-out infinite alternate 1.4s; }
.flame-ember { opacity: 0; }
.figures.grown .flame-ember.e1 { animation: flame-ember 1.9s ease-out infinite 1.6s; }
.figures.grown .flame-ember.e2 { animation: flame-ember 2.3s ease-out infinite 2.4s; }
@keyframes flame-sway { 0% { transform: rotate(-4deg) scale(1, 0.96); } 100% { transform: rotate(4deg) scale(0.96, 1.06); } }
@keyframes flame-stretch { 0% { transform: rotate(3deg) scale(1.04, 0.92); } 100% { transform: rotate(-3deg) scale(0.94, 1.08); } }
@keyframes flame-pulse { 0% { transform: scale(0.9); opacity: 0.85; } 100% { transform: scale(1.08); opacity: 1; } }
@keyframes flame-glow { 0% { transform: scale(0.9); opacity: 0.7; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes flame-ember { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

/* ── just files on your computer (M-016): a split with a divider ── */
.files { margin-top: calc(var(--space-8) * 2.5); }
.files-line { color: var(--fg-secondary); font-size: var(--text-prose); margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.files-switch { display: inline-flex; gap: var(--space-1); padding: var(--space-1); background: var(--surface-sunken); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.files-tab { font: inherit; font-size: var(--text-sm); color: var(--fg-secondary); background: none; border: none; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); cursor: pointer; }
.files-tab.active { background: var(--surface); color: var(--fg); font-weight: var(--weight-medium); box-shadow: 0 0 0 var(--border-width) var(--border); }
.files-title { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-tight); margin-bottom: var(--space-3); }
.files-path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-secondary); margin-bottom: var(--space-2); }
.files-raw { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-ui); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.files-grid { font-size: var(--text-sm); }
.files-grid .grid-head-cell, .files-grid .grid-cell { flex-basis: 140px; min-height: var(--space-6); }

/* ── the sign-up, the main call to action (M-016): its own band of colour ── */
.signup-band {
  margin-top: calc(var(--space-8) * 2.5);
  width: min(1120px, calc(100vw - var(--space-7)));
  position: relative; left: 50%; transform: translateX(-50%);
  padding: var(--space-7) var(--space-6);
  background: var(--accent-soft);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-lg);
}
.signup-head { font-size: var(--text-h2); font-weight: var(--weight-semibold); line-height: var(--leading-tight); max-width: 26em; margin-bottom: var(--space-5); }
.signup-band .reply, .signup-band .taps { margin-top: 0; background: var(--surface); }

/* ── the roadmap (M-016) ── */
.roadmap { margin-top: calc(var(--space-8) * 2); }

@media (max-width: 760px) {
      .signup-band { padding: var(--space-5) var(--space-4); }
  .signup-head { font-size: var(--text-h3); }
}

@media (prefers-reduced-motion: reduce) {
  .speed-bar { transition: none; width: var(--to); }
  /* A still flame: no flicker and no embers. */
  .speed-flame { opacity: 1; transition: none !important; }
  .speed-flame svg > * { animation: none !important; }
  .flame-ember { display: none; }
}

/* ── the comparison (M-018): both sides at once, side by side; on a phone, one above the other ── */
.files-frame {
  display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; overflow: hidden;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
}
.files-pane { min-width: 0; padding: var(--space-5) var(--space-6); overflow: auto; }
.files-see { background: var(--surface); }
.files-agents { background: var(--code-bg); border-left: var(--border-width) solid var(--border); }
.files-labels { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); }
.files-labels span { padding-left: var(--space-6); }
.files-see .prose { max-width: none; }
@media (max-width: 760px) {
  .files-frame { grid-template-columns: 1fr; }
  .files-agents { border-left: none; border-top: var(--border-width) solid var(--border); }
  .files-labels { display: none; }
  .files-pane::before { content: attr(aria-label); display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-secondary); margin-bottom: var(--space-2); }
}

/* ── agent tools (M-017): a bold feature, then its benefit ── */
.tool-list li strong { display: block; font-size: var(--text-h3); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
.tool-list li span { font-weight: var(--weight-normal); color: var(--fg-secondary); }
.tool-list li strong { color: var(--fg); }

/* ── the sign-up header (M-017) ── */
.signup-head { margin-bottom: var(--space-2); }
.signup-sub { color: var(--fg-secondary); font-size: var(--text-prose); margin-bottom: var(--space-5); }

/* ── the roadmap (M-018), redesigned (Brian, 29 Oct 2026): one vertical journey down a rail. Shipped stages solid, each with a checked dot and a Shipped tag; "You are here" the accent peak; planned stages on a dashed rail, fainter with distance. Each item a row, its emoji first as the icon. ── */
.journey { --rail-x: 15px; --dot: 30px; list-style: none; position: relative; max-width: 44em; padding-left: calc(var(--rail-x) * 2 + var(--space-5)); }
.leg, .here { position: relative; }
/* The rail: solid under shipped stages, dashed from "You are here" on. Each stage draws its own piece, so there is no gap. */
.leg::before, .here::before { content: ''; position: absolute; left: calc(var(--rail-x) * -2 - var(--space-5) + var(--rail-x) - 1px); top: 0; bottom: 0; width: 0; border-left: 2px solid var(--fg-secondary); }
.leg.shipped:first-child::before { top: calc(var(--dot) / 2); }
.leg.next::before, .leg.soon::before, .leg.future::before { border-left-style: dashed; border-left-color: var(--fg-faint); }
.leg.future::before { bottom: auto; height: calc(var(--dot) / 2 + var(--space-1)); }
.leg-head { position: relative; display: flex; align-items: baseline; gap: var(--space-3); min-height: var(--dot); padding-top: 2px; }
.leg-dot { position: absolute; left: calc(var(--rail-x) * -2 - var(--space-5)); top: 0; width: var(--dot); height: var(--dot); border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; background: var(--bg); border: 2px solid var(--fg-faint); }
.leg.shipped .leg-dot { background: var(--fg); border-color: var(--fg); }
.leg-dot svg { width: 16px; height: 16px; fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.leg-name { font-size: var(--text-h3); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--fg); }
.leg-tag { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-secondary); background: var(--surface-sunken); border: var(--border-width) solid var(--border); border-radius: 999px; padding: 1px var(--space-2); }
/* The space after each stage is padding on the stage, not a margin on its list, so the rail beside it runs on unbroken. */
.leg { padding-bottom: var(--space-7); }
.leg-items { list-style: none; display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.leg-items li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--fg); line-height: var(--leading-ui); }
.leg.shipped .leg-items li { background: var(--surface); border: var(--border-width) solid var(--border); }
.item-emoji { flex: none; width: 1.6em; font-size: 1.25em; line-height: 1; text-align: center; }
/* Planned stages fade with distance: Next brightest, Soon quieter, Future faintest. */
.leg.next .leg-items li { color: var(--fg); }
.leg.soon .leg-name, .leg.soon .leg-items li { color: var(--fg-secondary); }
.leg.soon .item-emoji { opacity: 0.8; }
.leg.future .leg-name, .leg.future .leg-items li { color: var(--fg-faint); }
.leg.future .item-emoji { opacity: 0.55; }
.leg.future { padding-bottom: 0; }
/* You are here: an accent pill on the rail with a pulsing dot, where shipped ends and planned begins. */
.here { display: flex; align-items: center; min-height: calc(var(--dot) + var(--space-2)); margin-top: calc(var(--space-3) * -1); padding-bottom: var(--space-6); }
.here-pill { align-self: flex-start; margin-top: calc((var(--dot) + var(--space-2)) / 2 - 0.85em); }
.here::before { border-left-style: dashed; border-left-color: var(--fg-faint); }
.here-dot { position: absolute; left: calc(var(--rail-x) * -2 - var(--space-5) + var(--rail-x) - 7px); top: calc((var(--dot) + var(--space-2)) / 2); width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); animation: here-pulse 2s var(--easing) infinite; }
@keyframes here-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 0 9px var(--accent-soft); } }
.here-pill { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: var(--space-1) var(--space-3); }
/* The reveal: items stagger in once the section is on screen (try.js adds .shown); none under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .roadmap:not(.shown) .leg-items li, .roadmap:not(.shown) .here { opacity: 0; transform: translateY(var(--space-2)); }
  .roadmap.shown .leg-items li, .roadmap.shown .here { transition: opacity 360ms var(--easing), transform 360ms var(--easing); transition-delay: calc(var(--i, 7) * 45ms); }
  .roadmap.shown .here { --i: 7; }
}
@media (prefers-reduced-motion: reduce) { .here-dot { animation: none; } }
@media (max-width: 600px) {
  .journey { --dot: 26px; --rail-x: 13px; padding-left: calc(var(--rail-x) * 2 + var(--space-3)); }
  .leg::before, .here::before { left: calc(var(--rail-x) * -2 - var(--space-3) + var(--rail-x) - 1px); }
  .leg-dot { left: calc(var(--rail-x) * -2 - var(--space-3)); }
  .here-dot { left: calc(var(--rail-x) * -2 - var(--space-3) + var(--rail-x) - 7px); }
  .leg-items li { padding: var(--space-2); }
}

/* ── touch-only devices (a phone or an iPad): two covers in place of the page (Brian, 27 Oct 2026) ── */
.covers { display: none; }
@media (hover: none) and (pointer: coarse) {
  .covers { display: block; }
  .try, .foot { display: none; }
}
/* A fine pointer anywhere (an iPad with a trackpad, a touch laptop) gets the page after all. */
@media (any-pointer: fine) {
  .covers { display: none; }
  .try, .foot { display: block; }
}
.cover { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: var(--space-5) var(--space-5) var(--space-7); text-align: center; background: var(--bg); }
.cover[hidden] { display: none; }
.cover .back { align-self: flex-start; margin-bottom: 0; }
.cover-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); }
.cover-emoji { font-size: 96px; line-height: 1; }
.cover-head { font-size: var(--text-h1); font-weight: var(--weight-semibold); line-height: var(--leading-tight); max-width: 14em; }
.cover-text { font-size: var(--text-prose); line-height: var(--leading-prose); color: var(--fg-secondary); max-width: 22em; }
.cover-link { align-self: center; font-size: var(--text-base); color: var(--fg-secondary); }

/* ── the landing: before a file or the example data is shown, the intro, the prompt card, the drop zone once shown, and the foot fit one screen (Brian, 27 Oct 2026; M-020). The start sits in the middle of the room left. try.js removes "landing" with the intro. ── */
body.landing { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.landing .try { flex: 1; width: 100%; display: flex; flex-direction: column; padding-top: var(--space-6); padding-bottom: var(--space-5); }
body.landing .topbar { margin-bottom: var(--space-5); }
body.landing .intro, body.landing #intake { flex: 1; display: flex; flex-direction: column; }
body.landing #intake { justify-content: center; }
body.landing #intake[hidden] { display: none; }
body.landing .foot { width: 100%; padding-top: var(--space-4); padding-bottom: var(--space-5); }
.foot-legal { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--fg-faint); }
.foot-made { margin-top: var(--space-4); text-align: center; font-size: var(--text-xs); color: var(--fg-faint); }