/* ---------------------------------------------------------------------------
 * taskwraith.dev — site styles
 *
 * Design tokens are COPIED BY VALUE from the TaskWraith app
 * (src/renderer/src/styles/theme.css). Nothing here imports from the app: this
 * site is a standalone nested repo and must stay independently deployable.
 * If the app palette changes, re-copy the values below deliberately.
 *
 * NOTE: an earlier revision vendored four app stylesheets so the page could
 * render the app's real component classes. That showcase was removed when the
 * site was refocused on download + onboarding; the vendored CSS went with it.
 * The full showcase is recoverable at nested commit 0d29b05 if it is ever
 * wanted again.
 * ------------------------------------------------------------------------- */

/* ---- Tokens: dark (TaskWraith default) ---------------------------------- */
:root {
  /* Canonical neutral ramp — TRUE NEUTRAL (R=G=B), copied verbatim from
   * theme.css. Do not re-tint these: a blue-tinted ramp puts every surface on
   * a different hue from the app and is the exact "does not match TaskWraith"
   * failure. */
  --app-bg: #141414;
  --app-bg-elevated: #1c1c1c;
  --app-bg-sunken: #0e0e0e;
  --surface-1: #1c1c20;
  --surface-2: #24242a;
  --surface-3: #2e2e36;
  --surface-hover: var(--surface-3);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.55);
  --text-tertiary: rgba(255, 255, 255, 0.35);
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-border-subtle: rgba(255, 255, 255, 0.04);
  --accent: #5a8cff;
  --success: #4cc38a;
  --warning: #f5a623;
  --danger: #e54d4d;

  /* Derived tints use the app's own color-mix idiom rather than hardcoded
   * rgba, so they follow --accent/--success automatically and need no
   * duplicate definition per theme. */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-border: color-mix(in srgb, var(--accent) 32%, transparent);
  --panel-border-focus: color-mix(in srgb, var(--accent) 45%, transparent);
  --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
  --focus-ring: color-mix(in srgb, var(--accent) 82%, white);

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --font-sans: "SF Pro", "SF Pro Text", "SF Pro Display", -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Monaco,
    "Courier New", ui-monospace, monospace;

  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --shell-max: 1040px;
  --gutter: 24px;
}

/* ---- Provider ink + diff-stat tokens -------------------------------------
 * COPIED BY VALUE from the app's theme.css (--provider-*-color / --diff-*).
 * The app defines provider ink ONCE for every theme (grok really is #757575
 * on light and dark alike), so these live at :root with no light override.
 * The Model Catalogue rules below already resolve through var(--provider-X-color,
 * fallback); defining the vars here makes that one table the single source
 * for every provider-tinted surface on the page, including the USP stages. */
:root {
  --provider-gemini-color: #346eec;
  --provider-codex-color: #705aff;
  --provider-claude-color: #b16105;
  --provider-kimi-color: #0073e6;
  --provider-grok-color: #757575;
  --provider-cursor-color: #8c7508;
  --provider-ollama-color: #976c52;
  --provider-antigravity-color: #308713;
  --provider-pi-color: #68768c;
  --provider-muse-color: #1671ea;
  --provider-mistral-color: #d44404;
  --provider-devin-color: #4878ae;
  --provider-ensemble-color: #986781;
  --provider-alibaba-color: #8c52ef;
  --provider-qwen-color: var(--provider-alibaba-color);
  --provider-google-color: var(--provider-antigravity-color);
  --provider-deep-reinforce-color: #be5809;
  --provider-ibm-color: #3079bc;
  --provider-liquid-color: #d72d82;
  --provider-meta-color: #1671ea;
  --provider-cohere-color: #5e7c6f;
  --provider-essential-color: #8462ca;
  --provider-nvidia-color: #538200;
  --provider-openai-color: var(--provider-codex-color);
  --provider-openbmb-color: #e22b17;
  --provider-poolside-color: #0c8194;
  --provider-deepseek-color: #4e6aee;
  --provider-zai-color: #177daa;
  --provider-minimax-color: #c044a4;
  --provider-xiaomi-color: #008844;
  --provider-openrouter-color: #e02948;
  --provider-cerebras-color: #bb584a;
  --provider-groq-color: #088482;
  --provider-thinkingmachines-color: #c24e68;
  --provider-tencent-color: #4e73ca;
  --provider-inception-color: #7c5be9;
  --provider-nexagi-color: #747a42;
  --provider-sakana-color: #ea0c2d;
  --provider-stealth-color: #9e6c00;
  --provider-unbiased-color: #b85a35;
  --provider-typesafe-color: #c700e4;
  --provider-inclusionai-color: #2c8468;
  --provider-apodex-color: #757b00;
  --provider-bespoke-color: #9d5cb0;
  --provider-cloudflare-color: #9c6b34;
  --provider-together-color: #6d6fb1;

  /* Diff-stat ink, dark values. The app re-inks these per light theme; the
   * light overrides below carry the app's exact light values. */
  --diff-add-bg: rgba(76, 195, 138, 0.1);
  --diff-add-text: #6ddfa8;
  --diff-del-bg: rgba(229, 77, 77, 0.1);
  --diff-del-text: #f08080;
}

/* One inherited ink channel per provider class. Defining a custom property is
 * inert until a rule consumes var(--provider-ink), so this cannot restyle
 * existing chips — only the USP stages read it. */
.provider-claude { --provider-ink: var(--provider-claude-color); }
.provider-codex { --provider-ink: var(--provider-codex-color); }
.provider-kimi { --provider-ink: var(--provider-kimi-color); }
.provider-grok { --provider-ink: var(--provider-grok-color); }
.provider-cursor { --provider-ink: var(--provider-cursor-color); }
.provider-ollama { --provider-ink: var(--provider-ollama-color); }
.provider-antigravity { --provider-ink: var(--provider-antigravity-color); }
.provider-pi { --provider-ink: var(--provider-pi-color); }
.provider-muse { --provider-ink: var(--provider-muse-color); }
.provider-mistral { --provider-ink: var(--provider-mistral-color); }
.provider-devin { --provider-ink: var(--provider-devin-color); }
.provider-ensemble { --provider-ink: var(--provider-ensemble-color); }
.provider-xiaomi { --provider-ink: var(--provider-xiaomi-color); }
.provider-qwen { --provider-ink: var(--provider-qwen-color); }
.provider-deepseek { --provider-ink: var(--provider-deepseek-color); }
.provider-cerebras { --provider-ink: var(--provider-cerebras-color); }

/* ---- Tokens: light ------------------------------------------------------- */
/* Canonical light palette. --accent is deliberately NOT overridden: theme.css
 * keeps #5a8cff in light mode, and every derived tint above is color-mix based,
 * so it re-resolves here with no duplicate declarations. */
[data-theme="light"] {
  --app-bg: #f8fafc;
  --app-bg-elevated: #ffffff;
  --app-bg-sunken: #e9edf2;
  --surface-1: #ffffff;
  --surface-2: #f1f1f4;
  --surface-3: #e7e7ec;
  --text-primary: rgba(18, 21, 27, 0.92);
  --text-secondary: rgba(18, 21, 27, 0.62);
  --text-tertiary: rgba(18, 21, 27, 0.45);
  --panel-border: rgba(18, 21, 27, 0.1);
  --panel-border-subtle: rgba(18, 21, 27, 0.05);
  /* App light-theme diff ink: dark text on faint tints. */
  --diff-add-bg: rgba(12, 132, 82, 0.16);
  --diff-add-text: #0a7f50;
  --diff-del-bg: rgba(198, 52, 66, 0.16);
  --diff-del-text: #bc2e3d;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --app-bg: #f8fafc;
    --app-bg-elevated: #ffffff;
    --app-bg-sunken: #e9edf2;
    --surface-1: #ffffff;
    --surface-2: #f1f1f4;
    --surface-3: #e7e7ec;
    --text-primary: rgba(18, 21, 27, 0.92);
    --text-secondary: rgba(18, 21, 27, 0.62);
    --text-tertiary: rgba(18, 21, 27, 0.45);
    --panel-border: rgba(18, 21, 27, 0.1);
    --panel-border-subtle: rgba(18, 21, 27, 0.05);
    /* App light-theme diff ink: dark text on faint tints. */
    --diff-add-bg: rgba(12, 132, 82, 0.16);
    --diff-add-text: #0a7f50;
    --diff-del-bg: rgba(198, 52, 66, 0.16);
    --diff-del-text: #bc2e3d;
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0;
  font-weight: 600;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --focus-ring is the canonical focus colour (a brighter mix than raw accent,
 * so the ring reads against accent-tinted surfaces). Wiring it here is the
 * rider held back from the previous pass. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.tw-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* ---- Header -------------------------------------------------------------- */
.tw-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--app-bg) 84%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--panel-border);
}

.tw-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 58px;
}

.tw-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 650;
  font-size: 16px;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.tw-brand .tw-mark {
  width: 26px;
  height: 26px;
}

.tw-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tw-nav a {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-nav a:hover {
  color: var(--text-primary);
  background: var(--accent-soft);
}

/* ---- Buttons & Controls -------------------------------------------------- */
.tw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 550;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease-out),
    border-color var(--motion-fast) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out),
    box-shadow var(--motion-fast) var(--motion-ease-out);
}

.tw-btn:active {
  transform: translateY(1px);
}

.tw-btn--primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}

.tw-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, #ffffff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
}

.tw-btn--ghost {
  background: var(--surface-1);
  border-color: var(--panel-border);
  color: var(--text-primary);
}

.tw-btn--ghost:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
}

.tw-btn--small {
  padding: 6px 12px;
  font-size: 13px;
}

.tw-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out),
    border-color var(--motion-fast) var(--motion-ease-out);
}

.tw-iconbtn:hover {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: var(--accent-border);
}

/* ---- Pills & Badges ------------------------------------------------------ */
.tw-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
  color: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tw-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
  white-space: nowrap;
}


.tw-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform var(--motion-base) var(--motion-ease-out),
    color var(--motion-fast) var(--motion-ease-out);
}

details[open] > summary .tw-chevron {
  transform: rotate(180deg);
  color: var(--accent);
}

/* ---- Sections ------------------------------------------------------------ */
.tw-section {
  padding: 84px 0;
  border-top: 1px solid var(--panel-border);
}

.tw-section:first-child {
  border-top: 0;
}

.tw-section h2 {
  font-size: clamp(28px, 3.8vw, 38px);
  margin-bottom: 12px;
}

.tw-lede {
  color: var(--text-secondary);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 62ch;
}

/* ---- Hero ---------------------------------------------------------------- */
.tw-hero {
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
  /* The aura is wider than a narrow viewport, so clip it horizontally or it
   * creates a phantom horizontal scrollbar. `clip` NOT `hidden`: hidden on one
   * axis forces the other to compute to `auto`, which would make this a scroll
   * container and clip the aura's soft top edge into a hard line. */
  overflow-x: clip;
}

/* The old full-width hero treatment stays gone. A compact wisp now gives the
 * monoline mark a little atmosphere without becoming another subject. */

.tw-hero .tw-shell {
  position: relative;
  z-index: 1;
}

/* ---- Hero ghost + local wisp ---------------------------------------------
 * Two low-contrast gradient clouds sit directly behind the mark. Their blobs
 * overlap asymmetrically and blur together, so the result reads as a small
 * breath of haze rather than a horizontal stream or another silk ribbon. */
.tw-hero__mark-wrap {
  position: relative;
  display: inline-flex;
  isolation: isolate;
  margin-bottom: 26px;
}

.tw-hero__mark-wrap::before,
.tw-hero__mark-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.tw-hero__mark-wrap::before {
  width: 330px;
  height: 190px;
  background:
    radial-gradient(
      ellipse 43% 38% at 34% 56%,
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 31%, transparent) 0%,
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 11%, transparent) 46%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 38% 43% at 61% 45%,
      color-mix(in srgb, var(--tw-cycle-b, #705aff) 25%, transparent) 0%,
      color-mix(in srgb, var(--tw-cycle-b, #705aff) 8%, transparent) 48%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 30% 25% at 73% 62%,
      color-mix(in srgb, var(--tw-cycle-e, #986781) 18%, transparent) 0%,
      transparent 76%
    );
  opacity: 0.38;
  filter: blur(26px) saturate(106%);
  transform: translate(-52%, -49%) rotate(-4deg) scale(0.96);
  animation: tw-hero-wisp 15s ease-in-out infinite alternate;
}

.tw-hero__mark-wrap::after {
  width: 220px;
  height: 116px;
  background:
    radial-gradient(
      ellipse 42% 34% at 37% 52%,
      color-mix(in srgb, var(--tw-cycle-b, #705aff) 18%, transparent) 0%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 36% 29% at 67% 48%,
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 16%, transparent) 0%,
      transparent 74%
    );
  opacity: 0.24;
  filter: blur(16px);
  transform: translate(-48%, -52%) rotate(3deg) scale(1.04);
  animation: tw-hero-wisp 19s ease-in-out infinite alternate-reverse;
}

@keyframes tw-hero-wisp {
  from {
    transform: translate(-52%, -49%) rotate(-4deg) scale(0.96);
  }
  to {
    transform: translate(-48%, -52%) rotate(3deg) scale(1.06);
  }
}

[data-theme="light"] .tw-hero__mark-wrap::before,
:root:not([data-theme]) .tw-hero__mark-wrap::before {
  opacity: 0.18;
  filter: blur(29px) saturate(102%);
}

[data-theme="light"] .tw-hero__mark-wrap::after,
:root:not([data-theme]) .tw-hero__mark-wrap::after {
  opacity: 0.12;
  filter: blur(19px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tw-hero__mark-wrap::before {
    opacity: 0.38;
    filter: blur(26px) saturate(106%);
  }

  :root:not([data-theme]) .tw-hero__mark-wrap::after {
    opacity: 0.24;
    filter: blur(16px);
  }
}

.tw-silk-field {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 0 solid var(--tw-cycle-b, #705aff);
  pointer-events: none;
  user-select: none;
}

.tw-hero .tw-mark {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  color: var(--text-primary);
}

.tw-hero h1 {
  font-size: clamp(34px, 5.2vw, 54px);
  margin-bottom: 18px;
  max-width: 22ch;
  margin-inline: auto;
  letter-spacing: -0.03em;
}

.tw-hero .tw-lede {
  margin-inline: auto;
  font-size: 17.5px;
  max-width: 58ch;
}

.tw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.tw-hero__note {
  margin-top: 20px;
  color: var(--text-tertiary);
  font-size: 12.5px;
  max-width: 60ch;
  margin-inline: auto;
}

/* ---- Hero product shot ---------------------------------------------------
 * One canonical light/dark screenshot pair, presented as a single responsive
 * image. JS changes only the active src, so the inactive theme is not fetched
 * until it is actually requested.
 * ------------------------------------------------------------------------- */
.tw-shot {
  margin: 44px auto 0;
  width: 100%;
  max-width: 1120px;
}

.tw-shot__img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  user-select: none;
}

.tw-shot__caption {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ---- Three beats ---------------------------------------------------------
 * Stacked, generously spaced, no borders and no grid. The reference pages all
 * do this: short claims in plain language, nothing boxed.
 * ------------------------------------------------------------------------- */
.tw-beats .tw-shell {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 640px;
}

.tw-beat__title {
  font-size: clamp(19px, 2.4vw, 23px);
  margin-bottom: 8px;
}

.tw-beat__body {
  color: var(--text-secondary);
  font-size: 15.5px;
}

/* ---- Expandable Accordion ------------------------------------------------ */
.tw-accordion {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-accordion__item {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  transition: border-color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
  overflow: hidden;
}

.tw-accordion__item:hover {
  border-color: var(--accent-border);
  background: var(--surface-2);
}

.tw-accordion__summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.tw-accordion__summary::-webkit-details-marker {
  display: none;
}

.tw-accordion__summary .tw-chevron {
  margin-top: 4px;
}

.tw-accordion__title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

.tw-accordion__title {
  font-size: 16px;
  font-weight: 600;
}

.tw-accordion__summary-text {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 14px;
  color: var(--text-secondary);
}

.tw-accordion__body {
  padding: 12px 20px 18px 48px;
  border-top: 1px solid var(--panel-border-subtle);
  background: color-mix(in srgb, var(--surface-1) 60%, var(--app-bg-sunken));
  font-size: 14.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---- Expandable Providers List ------------------------------------------- */
.tw-provider-list {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tw-provider-item {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
  transition: border-color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-provider-item:hover {
  border-color: var(--accent-border);
  background: var(--surface-2);
}

.tw-provider-item__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.tw-provider-item__summary::-webkit-details-marker {
  display: none;
}

.tw-provider-item__primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tw-provider-item__name {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-primary);
}

.tw-provider-item__cat {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-tertiary);
}

.tw-provider-item__blurb {
  flex-basis: 100%;
  margin-left: 26px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.tw-provider-item__details {
  padding: 12px 18px 14px 44px;
  border-top: 1px solid var(--panel-border-subtle);
  background: color-mix(in srgb, var(--surface-1) 50%, var(--app-bg-sunken));
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-provider-spec {
  display: flex;
  gap: 10px;
  font-size: 13px;
}

.tw-provider-spec__k {
  font-family: var(--font-mono);
  color: var(--text-tertiary);
  min-width: 90px;
}

.tw-provider-spec__v {
  color: var(--text-secondary);
}

/* ---- Model Catalogue — the app's grouped provider/model notice format -------
 * VENDORED BY VALUE from:
 *   src/renderer/src/assets/css/03-composer-welcome-activity.css:14744-14947
 *     (notification-card--bare, the icon/text seam, the newadditions list,
 *      and the FULL provider hue table)
 *   src/renderer/src/assets/css/12-live-activity-viewport.css:10-254
 *     (viewport scroll, edge-fade masks, footer controls)
 *   src/renderer/src/assets/css/02-transcript-messages-fx.css:3416-3470
 *     (provider-brand-logo + the light/dark theme-pair switch)
 *
 * The hue table is what makes this exact: a model name gets a provider-<id>
 * class and is coloured HERE, never from JS. One palette source, no drift.
 * Every colour below is the app's own token with the app's own hex fallback.
 * ------------------------------------------------------------------------- */

/* Chromeless BY DESIGN. The app's comment on this rule: "boxing a list that
 * already reads as its own block just adds a frame around the pane's own
 * background." That is the same law as the banned edge-inset callout. */
.notification-card.notification-card--bare {
  display: flex;
  gap: 8px;
  margin-top: 24px;
  padding: 0;
  border-color: transparent;
  background: none;
  background-image: none;
  box-shadow: none;
}

.notification-card-icon {
  flex: 0 0 18px;
  display: inline-grid;
  width: 18px;
  height: 20px;
  place-items: center;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1;
  color: var(--notification-accent, var(--provider-ensemble-color, #986781));
}

.notification-card-text {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
}

.notification-card-text strong {
  color: var(--text-primary, inherit);
  font-size: 14px;
}

/* Provider heading + its newly-added models. The heading and model NAME are
 * bold and hued; the blurb is neutral secondary text — hue signposts identity,
 * the description reads as plain body copy. */
.notification-newadditions-viewport {
  --live-activity-edge-fade-size: 34px;
  margin: 2px 0 0;
}

.notification-newadditions-viewport .live-activity-viewport-scroll {
  border-radius: 8px;
}

.notification-newadditions-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.notification-newadditions-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notification-newadditions-provider {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 720;
  font-size: 12px;
}

/* Provider identity signpost next to each group heading. */
.notification-newadditions-provider :is(.tw-provider-glyph, .provider-brand-logo) {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.notification-newadditions-models {
  list-style: none;
  margin: 0;
  padding: 0;
}

.notification-newadditions-model-row {
  padding-left: 1em;
  text-indent: -1em;
  font-size: 13px;
  line-height: 1.55;
}

.notification-newadditions-model-row::before {
  content: '\2022  ';
}

.notification-newadditions-model {
  font-weight: 700;
}

.notification-newadditions-blurb {
  font-weight: 400;
  color: var(--text-secondary);
}

/* Provider hue table — verbatim, tokens with the app's own hex fallbacks. */
.notification-newadditions-provider.provider-claude,
.notification-newadditions-model.provider-claude {
  color: var(--provider-claude-color, #b16105);
}
.notification-newadditions-provider.provider-codex,
.notification-newadditions-model.provider-codex {
  color: var(--provider-codex-color, #705aff);
}
.notification-newadditions-provider.provider-kimi,
.notification-newadditions-model.provider-kimi {
  color: var(--provider-kimi-color, #0073e6);
}
.notification-newadditions-provider.provider-antigravity,
.notification-newadditions-model.provider-antigravity {
  color: var(--provider-antigravity-color, #308713);
}
.notification-newadditions-provider.provider-cursor,
.notification-newadditions-model.provider-cursor {
  color: var(--provider-cursor-color, #8c7508);
}
.notification-newadditions-provider.provider-grok,
.notification-newadditions-model.provider-grok {
  color: var(--provider-grok-color, var(--text-primary));
}
.notification-newadditions-provider.provider-ollama,
.notification-newadditions-model.provider-ollama {
  color: var(--provider-ollama-color, #976c52);
}
.notification-newadditions-provider.provider-mistral {
  color: var(--provider-mistral-color, #d44404);
}
.notification-newadditions-provider.provider-muse,
.notification-newadditions-model.provider-muse {
  color: var(--provider-muse-color, #1671ea);
}
.notification-newadditions-provider.provider-devin,
.notification-newadditions-model.provider-devin {
  color: var(--provider-devin-color, #4878ae);
}
/* Ollama-backed models wear their upstream brand hue (set per-model via
 * accentProvider) — so a model name reads in its brand colour instead of
 * generic Ollama green. The "Ollama" group heading stays green above. */
.notification-newadditions-model.provider-deep-reinforce {
  color: var(--provider-deep-reinforce-color, #be5809);
}
.notification-newadditions-model.provider-alibaba {
  color: var(--provider-alibaba-color, #8c52ef);
}
.notification-newadditions-model.provider-openai {
  color: var(--provider-openai-color, #705aff);
}
.notification-newadditions-model.provider-ibm {
  color: var(--provider-ibm-color, #3079bc);
}
.notification-newadditions-model.provider-openbmb {
  color: var(--provider-openbmb-color, #e22b17);
}
.notification-newadditions-model.provider-liquid {
  color: var(--provider-liquid-color, #d72d82);
}
.notification-newadditions-model.provider-meta {
  color: var(--provider-meta-color, #1671ea);
}
.notification-newadditions-model.provider-nvidia {
  color: var(--provider-nvidia-color, #538200);
}
.notification-newadditions-model.provider-cohere {
  color: var(--provider-cohere-color, #5e7c6f);
}
.notification-newadditions-model.provider-essential {
  color: var(--provider-essential-color, #8462ca);
}
.notification-newadditions-model.provider-poolside {
  color: var(--provider-poolside-color, #0c8194);
}
.notification-newadditions-model.provider-google {
  color: var(--provider-google-color, #308713);
}
/* Pi's group heading stays the seat colour; each model name wears the hue of
 * the BYOK upstream that serves it. */
.notification-newadditions-provider.provider-pi,
.notification-newadditions-model.provider-pi {
  color: var(--provider-pi-color, #68768c);
}
.notification-newadditions-model.provider-deepseek {
  color: var(--provider-deepseek-color, #4e6aee);
}
.notification-newadditions-model.provider-zai {
  color: var(--provider-zai-color, #177daa);
}
.notification-newadditions-model.provider-minimax {
  color: var(--provider-minimax-color, #c044a4);
}
.notification-newadditions-model.provider-mistral {
  color: var(--provider-mistral-color, #d44404);
}
.notification-newadditions-model.provider-qwen {
  color: var(--provider-qwen-color, #8c52ef);
}
.notification-newadditions-model.provider-xiaomi {
  color: var(--provider-xiaomi-color, #008844);
}
.notification-newadditions-model.provider-openrouter {
  color: var(--provider-openrouter-color, #e02948);
}
.notification-newadditions-model.provider-groq {
  color: var(--provider-groq-color, #088482);
}
.notification-newadditions-model.provider-cerebras {
  color: var(--provider-cerebras-color, #bb584a);
}
.notification-newadditions-model.provider-thinkingmachines {
  color: var(--provider-thinkingmachines-color, #c24e68);
}
.notification-newadditions-model.provider-tencent {
  color: var(--provider-tencent-color, #4e73ca);
}
.notification-newadditions-model.provider-inception {
  color: var(--provider-inception-color, #7c5be9);
}
.notification-newadditions-model.provider-nexagi {
  color: var(--provider-nexagi-color, #747a42);
}
.notification-newadditions-model.provider-sakana {
  color: var(--provider-sakana-color, #ea0c2d);
}

.notification-newadditions-model.provider-stealth {
  color: var(--provider-stealth-color, #9e6c00);
}
.notification-newadditions-model.provider-unbiased {
  color: var(--provider-unbiased-color, #b85a35);
}
.notification-newadditions-model.provider-typesafe {
  color: var(--provider-typesafe-color, #c700e4);
}
.notification-newadditions-model.provider-inclusionai {
  color: var(--provider-inclusionai-color, #2c8468);
}
.notification-newadditions-model.provider-apodex {
  color: var(--provider-apodex-color, #757b00);
}
.notification-newadditions-model.provider-bespoke {
  color: var(--provider-bespoke-color, #9d5cb0);
}
.notification-newadditions-model.provider-cloudflare {
  color: var(--provider-cloudflare-color, #9c6b34);
}
.notification-newadditions-model.provider-together {
  color: var(--provider-together-color, #6d6fb1);
}

/* ---- LiveActivityViewport chrome ----------------------------------------- */
.live-activity-viewport {
  position: relative;
  margin: 2px 0 6px;
  padding-left: 0;
  --live-activity-edge-fade-size: 52px;
}

/* Left rail intentionally hidden; rows carry their own visual anchors. */
.live-activity-viewport-rail {
  display: none;
}

.live-activity-viewport-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: max-height 180ms ease;
}

.live-activity-viewport-scroll::-webkit-scrollbar {
  display: none;
}

.live-activity-viewport-scroll:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.live-activity-viewport.is-collapsed .live-activity-viewport-scroll {
  max-height: 300px;
}

/* Edge fades appear only where there IS more content — driven by real scroll
 * position in site.js, never painted on permanently. */
.live-activity-viewport.is-collapsed.has-fade-top .live-activity-viewport-scroll {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) 10px,
    rgba(0, 0, 0, 0.72) 32px,
    #000 var(--live-activity-edge-fade-size),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) 10px,
    rgba(0, 0, 0, 0.72) 32px,
    #000 var(--live-activity-edge-fade-size),
    #000 100%
  );
}

.live-activity-viewport.is-collapsed.has-fade-bottom .live-activity-viewport-scroll {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--live-activity-edge-fade-size)),
    rgba(0, 0, 0, 0.72) calc(100% - 32px),
    rgba(0, 0, 0, 0.18) calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--live-activity-edge-fade-size)),
    rgba(0, 0, 0, 0.72) calc(100% - 32px),
    rgba(0, 0, 0, 0.18) calc(100% - 10px),
    transparent 100%
  );
}

.live-activity-viewport.is-collapsed.has-fade-top.has-fade-bottom
  .live-activity-viewport-scroll {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) 10px,
    rgba(0, 0, 0, 0.72) 32px,
    #000 var(--live-activity-edge-fade-size),
    #000 calc(100% - var(--live-activity-edge-fade-size)),
    rgba(0, 0, 0, 0.72) calc(100% - 32px),
    rgba(0, 0, 0, 0.18) calc(100% - 10px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0, 0, 0, 0.18) 10px,
    rgba(0, 0, 0, 0.72) 32px,
    #000 var(--live-activity-edge-fade-size),
    #000 calc(100% - var(--live-activity-edge-fade-size)),
    rgba(0, 0, 0, 0.72) calc(100% - 32px),
    rgba(0, 0, 0, 0.18) calc(100% - 10px),
    transparent 100%
  );
}

/* Footer controls stay quiet until the region is hovered or focused. */
.live-activity-viewport-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 140ms ease;
}

.live-activity-viewport:hover .live-activity-viewport-controls,
.live-activity-viewport:focus-within .live-activity-viewport-controls {
  opacity: 1;
}

.live-activity-viewport-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted, #8a8f98);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease;
}

.live-activity-viewport-toggle:hover {
  color: var(--text-primary, #e6e6e6);
  background: var(--surface-hover, rgba(127, 127, 127, 0.12));
}

.live-activity-viewport-toggle-chevron {
  width: 12px;
  height: 12px;
  transition: transform 160ms ease;
}

.live-activity-viewport-toggle-chevron.is-open {
  transform: rotate(180deg);
}

/* ---- Provider brand logos ------------------------------------------------
 * The app ships BOTH theme variants and lets CSS choose, so a theme flip
 * costs no request and never flashes. Site theme model is auto/light/dark, so
 * the app's multi-theme :is() list is reduced to that — same logic, our
 * three states. Dark is the default, matching the app. */
.provider-brand-logo {
  --provider-brand-logo-scale: 1;
  position: relative;
  width: 1em;
  height: 1em;
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  pointer-events: none;
}

.provider-brand-logo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scale(var(--provider-brand-logo-scale));
  transform-origin: center;
  user-select: none;
}

/* Leading-crop wordmarks: show the square at the wordmark's LEFT edge (the
 * brand glyph), the same crop LLMUsageCounter's usage rows draw. `contain`
 * would letterbox these into slivers. */
.provider-brand-logo.is-leading-crop .provider-brand-logo-image {
  object-fit: cover;
  object-position: left center;
}

.provider-brand-logo.has-theme-pair .provider-brand-logo-image-light {
  display: none;
}

.provider-brand-logo.has-theme-pair .provider-brand-logo-image-dark {
  display: block;
}

[data-theme='light'] .provider-brand-logo.has-theme-pair .provider-brand-logo-image-light {
  display: block;
}

[data-theme='light'] .provider-brand-logo.has-theme-pair .provider-brand-logo-image-dark {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .provider-brand-logo.has-theme-pair .provider-brand-logo-image-light {
    display: block;
  }

  :root:not([data-theme]) .provider-brand-logo.has-theme-pair .provider-brand-logo-image-dark {
    display: none;
  }
}


/* ---- USP section-spanning carousel ---------------------------------------
 * One full-width plane per slide: copy on the left and a miniature of a real
 * app surface on the right. The carousel itself is deliberately NOT a card.
 * It reaches the section edges; only its readable content stays shell-aligned.
 *
 * Per-slide provider-cycle phases are mapped from data-visual HERE, not in
 * content.json: copy is editable, structure is not (the same split the logo
 * table uses). Each pane starts near its old colour family, then walks the
 * complete provider/branding-override track used by the approval showcase.
 * ------------------------------------------------------------------------- */
@property --tw-progress {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 20%;
}

.tw-carousel {
  padding: 0;
  overflow-x: clip;
}

.tw-carousel:has(h2),
.tw-carousel:has(.tw-lede) {
  padding-top: 72px;
}

.tw-carousel > .tw-shell {
  max-width: none;
  padding-inline: 0;
}

.tw-carousel > .tw-shell > h2,
.tw-carousel > .tw-shell > .tw-lede {
  padding-inline: max(
    var(--gutter),
    calc((100vw - var(--shell-max)) / 2 + var(--gutter))
  );
  max-width: calc(
    var(--shell-max) +
    2 * max(var(--gutter), calc((100vw - var(--shell-max)) / 2 + var(--gutter)))
  );
  box-sizing: border-box;
}

.tw-carousel__viewport {
  position: relative;
  margin-top: 0;
}

.tw-carousel__scene {
  position: relative;
  isolation: isolate;
}

.tw-carousel > .tw-shell > :not(.tw-carousel__viewport) ~ .tw-carousel__viewport {
  margin-top: 28px;
}

.tw-carousel__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tw-carousel__track::-webkit-scrollbar {
  display: none;
}

.tw-carousel__track:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: 0;
}

.tw-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  min-width: 0;
}

/* The phase offsets land on exact six-second stops in the 168s provider track.
 * Resting accents are also provider hues, so reduced motion keeps five
 * intentional branded panes rather than falling back to one generic blue. */
.tw-carousel [data-visual="ensemble"] {
  --tw-carousel-rest-accent: var(--provider-ensemble-color);
  --tw-carousel-cycle-phase: -66s;
}

.tw-carousel [data-visual="ledger"] {
  --tw-carousel-rest-accent: var(--provider-ollama-color);
  --tw-carousel-cycle-phase: -36s;
}

.tw-carousel [data-visual="themes"] {
  --tw-carousel-rest-accent: var(--provider-alibaba-color);
  --tw-carousel-cycle-phase: -72s;
}

.tw-carousel [data-visual="quota"] {
  --tw-carousel-rest-accent: var(--provider-mistral-color);
  --tw-carousel-cycle-phase: -60s;
}

.tw-carousel [data-visual="ux"] {
  --tw-carousel-rest-accent: var(--provider-kimi-color);
  --tw-carousel-cycle-phase: -18s;
}

.tw-carousel__page {
  --slide-accent: var(--tw-carousel-rest-accent, var(--provider-gemini-color));
  position: relative;
  isolation: isolate;
  display: grid;
  /* One ratio for every slide (the Ensemble's), so the copy column and stage
   * width sit identically across the whole strip. */
  grid-template-columns: minmax(250px, 8fr) minmax(0, 13fr);
  gap: clamp(40px, 5vw, 68px);
  align-items: center;
  min-height: clamp(560px, 72vh, 720px);
  padding-block: clamp(44px, 6vw, 76px);
  padding-inline: max(
    var(--gutter),
    calc((100vw - var(--shell-max)) / 2 + var(--gutter))
  );
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transform: scale(1);
  transform-origin: center center;
  box-shadow: none;
  transition:
    opacity var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
}

/* One field spans the whole carousel so its two ribbons stay spatially
 * continuous while the five panes move above it. The Canvas renderer samples
 * these resolved colours and eases between them when the active pane changes. */
.tw-silk-field--carousel {
  --tw-approval-accent: var(--tw-carousel-rest-accent, var(--provider-gemini-color));
  left: 0;
  top: 2%;
  z-index: 0;
  width: 100%;
  height: 97%;
  color: var(--tw-approval-accent);
  border-top-color: var(--tw-cycle-b, #705aff);
  opacity: 0.78;
  filter: blur(8px) saturate(112%);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.86) 8%,
    #000 18%,
    #000 82%,
    rgba(0, 0, 0, 0.86) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.86) 8%,
    #000 18%,
    #000 82%,
    rgba(0, 0, 0, 0.86) 92%,
    transparent 100%
  );
  animation: tw-approval-provider-fade 168s linear infinite;
  animation-delay: var(--tw-carousel-cycle-phase, 0s);
}

[data-theme='light'] .tw-silk-field--carousel {
  opacity: 0.42;
  filter: blur(9px) saturate(102%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tw-silk-field--carousel {
    opacity: 0.42;
    filter: blur(9px) saturate(102%);
  }
}

@media (forced-colors: active) {
  .tw-silk-field,
  .tw-hero__mark-wrap::before,
  .tw-hero__mark-wrap::after {
    display: none;
  }
}

.tw-carousel__page--stage-only {
  grid-template-columns: minmax(0, 1fr);
}

.tw-carousel__slide.is-active .tw-carousel__page {
  opacity: 1;
  transform: scale(1);
  box-shadow: none;
}

/* Neighbours recede: scale stays <= 1 so the track never gains overflow. */
.tw-carousel__slide:not(.is-active) .tw-carousel__page {
  opacity: 0.4;
  transform: scale(0.975);
  box-shadow: none;
}

/* ---- Page copy column ---------------------------------------------------- */
.tw-carousel__copy,
.tw-carousel__stage-slot {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.tw-carousel__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--slide-accent) 78%, var(--text-primary));
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-carousel__index {
  flex: 0 0 auto;
  min-width: 2ch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.tw-carousel__copy h3 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.tw-carousel__body {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tw-carousel__points {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, var(--panel-border));
  list-style: none;
}

.tw-carousel__points li {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0 11px;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, var(--panel-border));
  color: color-mix(in srgb, var(--text-secondary) 72%, var(--text-primary));
  font-size: 13.5px;
  line-height: 1.48;
}

.tw-carousel__points li::before {
  content: '';
  position: relative;
  top: 0.55em;
  display: block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text-secondary) 62%, var(--text-primary));
  box-shadow: 0 0 8px color-mix(in srgb, var(--text-primary) 12%, transparent);
  transform: rotate(45deg);
}

/* The main copy is an editorial anchor over the atmosphere, not another
 * surface. Direct-child scoping matters: the Themes mock reuses
 * .tw-carousel__copy for its own miniature header. */
.tw-carousel__page > .tw-carousel__copy {
  --tw-carousel-copy-gray: color-mix(in srgb, var(--text-secondary) 42%, var(--text-primary));
  --tw-carousel-copy-gray-muted: color-mix(
    in srgb,
    var(--text-secondary) 72%,
    var(--text-primary)
  );
  align-self: center;
  width: 100%;
  max-width: 31rem;
  padding: 20px 0 clamp(6px, 1vw, 12px);
}

.tw-carousel__page > .tw-carousel__copy::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--tw-carousel-copy-gray-muted),
    color-mix(in srgb, var(--text-primary) 18%, transparent),
    transparent
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.tw-carousel__page > .tw-carousel__copy > .tw-carousel__kicker {
  display: grid;
  grid-template-columns: auto auto minmax(28px, 1fr);
  align-items: center;
  column-gap: 12px;
  margin-bottom: 22px;
  color: var(--tw-carousel-copy-gray-muted);
}

.tw-carousel__page > .tw-carousel__copy > .tw-carousel__kicker::after {
  content: '';
  height: 1px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--text-primary) 16%, transparent),
    transparent
  );
}

.tw-carousel__page > .tw-carousel__copy .tw-carousel__index {
  min-width: auto;
  color: var(--tw-carousel-copy-gray-muted);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.07em;
  line-height: 0.8;
  opacity: 0.66;
}

.tw-carousel__page > .tw-carousel__copy .tw-carousel__kicker-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.16em;
  line-height: 1.25;
}

.tw-carousel__page > .tw-carousel__copy h3 {
  max-width: 12ch;
  margin: 0 0 18px;
  color: var(--tw-carousel-copy-gray);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.03;
  text-wrap: balance;
  text-shadow: none;
}

.tw-carousel__page > .tw-carousel__copy > .tw-carousel__body {
  max-width: 40ch;
  color: color-mix(in srgb, var(--text-secondary) 68%, var(--text-primary));
  font-size: clamp(16px, 1.45vw, 17px);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---- Stage: real app fragments, without a containing card ---------------- */
.tw-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.tw-stage__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--panel-border-subtle);
}

.tw-stage__title {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-primary);
}

.tw-stage__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

.tw-stage__dot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.tw-stage__dot .provider-brand-logo,
.tw-stage__dot .tw-provider-glyph {
  width: 14px;
  height: 14px;
}

/* Providers without first-party artwork keep the neutral glyph, tinted with
 * their real ink instead of the generic accent. */
.tw-stage .tw-provider-glyph {
  color: var(--provider-ink, var(--accent));
}

/* ---- Stage: Ensemble ------------------------------------------------------ */
.tw-stage__seatstrip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 0.5vw, 8px);
  min-width: 0;
}

.tw-stage__seat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.tw-stage__seat .tw-stage__dot {
  width: 12px;
  height: 12px;
  border-radius: 0;
}

.tw-stage__seat .tw-stage__dot .provider-brand-logo,
.tw-stage__seat .tw-stage__dot .tw-provider-glyph {
  width: 12px;
  height: 12px;
}

.tw-stage__seat-name {
  font-size: 10.25px;
  font-weight: 650;
  color: color-mix(in srgb, var(--provider-ink, var(--accent)) 72%, var(--text-primary));
}

.tw-stage__transcript-scroll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  height: clamp(400px, 55vh, 560px);
  max-height: none;
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border) transparent;
}

.tw-stage__transcript-scroll:focus-visible {
  outline: 1px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 0;
}

.tw-stage__transcript-scroll::-webkit-scrollbar {
  width: 6px;
}

.tw-stage__transcript-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.tw-stage__transcript-scroll::-webkit-scrollbar-thumb {
  border-radius: 0;
  background: var(--panel-border);
}

.tw-stage__assistant-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 4px 2px 12px;
}

.tw-stage__assistant-message.is-before {
  border-bottom: 1px solid var(--panel-border-subtle);
}

.tw-stage__assistant-message.is-after {
  padding-block: 12px 4px;
  border-top: 1px solid var(--panel-border-subtle);
}

.tw-stage__assistant-message.is-between {
  padding-block: 10px;
  border-top: 1px solid var(--panel-border-subtle);
}

.tw-stage__assistant-head {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 10.25px;
  line-height: 1.3;
}

.tw-stage__assistant-head .tw-stage__dot,
.tw-stage__assistant-head .tw-stage__dot :is(.provider-brand-logo, .tw-provider-glyph) {
  width: 12px;
  height: 12px;
}

.tw-stage__assistant-provider,
.tw-stage__assistant-effort {
  color: var(--provider-ink);
  font-weight: 650;
}

.tw-stage__assistant-model {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__assistant-effort {
  margin-left: auto;
}

.tw-stage__assistant-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 17px;
}

/* These are the one intentional cards inside the de-carded carousel: they
 * depict the app's real fan-out result unit. The border is uniform — never a
 * coloured left edge — so the banned edge-inset pattern cannot reappear. */
.tw-stage__fanout-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 96px;
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--provider-ink) 34%, var(--panel-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--provider-ink) 5%, var(--surface-1));
}

.tw-stage__fanout-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  font-size: 9.75px;
  line-height: 1.3;
}

.tw-stage__fanout-head .tw-stage__dot {
  width: 12px;
  height: 12px;
}

.tw-stage__fanout-head .tw-stage__dot :is(.provider-brand-logo, .tw-provider-glyph) {
  width: 11px;
  height: 11px;
}

.tw-stage__fanout-role {
  color: var(--text-tertiary);
}

.tw-stage__fanout-lane,
.tw-stage__fanout-provider,
.tw-stage__fanout-effort {
  color: var(--provider-ink);
  font-weight: 650;
}

.tw-stage__fanout-provider {
  flex-basis: auto;
}

.tw-stage__fanout-model {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__fanout-effort {
  margin-left: auto;
}

.tw-stage__fanout-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tw-stage__fake-line {
  display: block;
  width: var(--fake-line-width, 80%);
  max-width: 100%;
  height: 5px;
  border-radius: 1px;
  background: var(--text-tertiary);
  opacity: 0.52;
}

/* Real transcript text rows beside the skeleton fills. */
.tw-stage__msg-text {
  display: block;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* A still-streaming line: the skeleton picks up a provider-hued sweep. */
.tw-stage__fake-line.is-streaming {
  opacity: 1;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--provider-ink, var(--accent)) 25%, var(--surface-3)),
    color-mix(in srgb, var(--provider-ink, var(--accent)) 70%, var(--surface-3)) 50%,
    color-mix(in srgb, var(--provider-ink, var(--accent)) 25%, var(--surface-3))
  );
  background-size: 240% 100%;
  animation: tw-text-shimmer-sweep 2.4s linear infinite;
}

.tw-stage__live-dot {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--provider-ink, var(--accent));
  animation: tw-live-pulse 1.6s ease-in-out infinite;
}

@keyframes tw-live-pulse {
  50% {
    opacity: 0.3;
  }
}

.tw-stage__fanout-card.is-live {
  border-color: color-mix(in srgb, var(--provider-ink, var(--accent)) 45%, var(--panel-border));
  box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--provider-ink, var(--accent)) 60%, transparent);
}

/* The app's collapsed tool-call summary, spanning both transcript columns. */
.tw-stage__activity {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 4px;
  font-size: 9.5px;
  color: var(--text-tertiary);
}

.tw-stage__activity strong {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

.tw-stage__activity strong.is-add { color: var(--diff-add-text); }
.tw-stage__activity strong.is-del { color: var(--diff-del-text); }

/* ---- Stage: Approval Ledger ---------------------------------------------- */
.tw-stage__ledger {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tw-stage__ledger-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--panel-border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  font-size: 12px;
}

.tw-stage__ledger-row.status-pending {
  border-color: var(--accent-border);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-1));
}

.tw-stage__ledger-row.status-rejected {
  border-color: color-mix(in srgb, var(--danger) 22%, var(--panel-border));
}

.tw-stage__ledger-status {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.tw-stage__ledger-row.status-approved .tw-stage__ledger-status {
  background: var(--success-soft);
  color: var(--success);
}

.tw-stage__ledger-row.status-rejected .tw-stage__ledger-status {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

.tw-stage__ledger-row.status-pending .tw-stage__ledger-status {
  background: var(--accent-soft);
  color: var(--accent);
}

.tw-stage__ledger-kind {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-primary);
}

.tw-stage__ledger-cmd {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.tw-stage__diffstat {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 5px;
}

.tw-stage__diffstat-add,
.tw-stage__diffstat-del {
  padding: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
}

.tw-stage__diffstat-add {
  background: none;
  color: var(--diff-add-text);
}

.tw-stage__diffstat-del {
  background: none;
  color: var(--diff-del-text);
}

.tw-stage__ledger-note {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.tw-stage__miniacts {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 6px;
}

.tw-stage__miniact {
  padding: 0;
  border-radius: 0;
  font-size: 10.5px;
  font-weight: 650;
}

.tw-stage__miniact.is-approve {
  border: 0;
  background: none;
  color: var(--success);
}

.tw-stage__miniact.is-reject {
  border: 0;
  background: none;
  color: var(--danger);
}

/* ---- Approval Ledger: real pending approval card -------------------------
 * Lifted from the app's composer permission-card + approval-preview rules.
 * It stays inert here (set dressing inside an aria-hidden stage), but keeps
 * the real hierarchy, glass, preview, note, action spacing and pending rim.
 *
 * The app normally pins one requesting provider hue. This showcase instead
 * walks the canonical palette's 28 UNIQUE colour values in a fixed order.
 * Aliases/branding overrides share their source value: Codex/OpenAI,
 * AntiGravity/Google, Muse/Meta, Alibaba/Qwen, Deep Reinforce/Ornith and
 * Xiaomi/MiMo. The registered colour property makes each step fade rather
 * than jump; the rim angle runs independently as the slow chase. */
@property --tw-approval-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #346eec;
}

@property --tw-approval-rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 318deg;
}

@keyframes tw-approval-provider-fade {
  0% { --tw-approval-accent: #346eec; } /* Gemini */
  3.57% { --tw-approval-accent: #705aff; } /* Codex / OpenAI */
  7.14% { --tw-approval-accent: #b16105; } /* Claude */
  10.71% { --tw-approval-accent: #0073e6; } /* Kimi */
  14.29% { --tw-approval-accent: #757575; } /* Grok */
  17.86% { --tw-approval-accent: #8c7508; } /* Cursor */
  21.43% { --tw-approval-accent: #976c52; } /* Ollama */
  25% { --tw-approval-accent: #308713; } /* AntiGravity / Google */
  28.57% { --tw-approval-accent: #68768c; } /* Pi */
  32.14% { --tw-approval-accent: #1671ea; } /* Muse / Meta */
  35.71% { --tw-approval-accent: #d44404; } /* Mistral */
  39.29% { --tw-approval-accent: #986781; } /* Ensemble */
  42.86% { --tw-approval-accent: #8c52ef; } /* Alibaba / Qwen */
  46.43% { --tw-approval-accent: #be5809; } /* Deep Reinforce / Ornith */
  50% { --tw-approval-accent: #3079bc; } /* IBM */
  53.57% { --tw-approval-accent: #d72d82; } /* Liquid */
  57.14% { --tw-approval-accent: #5e7c6f; } /* Cohere */
  60.71% { --tw-approval-accent: #8462ca; } /* Essential AI */
  64.29% { --tw-approval-accent: #538200; } /* NVIDIA */
  67.86% { --tw-approval-accent: #e22b17; } /* OpenBMB */
  71.43% { --tw-approval-accent: #0c8194; } /* Poolside */
  75% { --tw-approval-accent: #4e6aee; } /* DeepSeek */
  78.57% { --tw-approval-accent: #177daa; } /* Z.ai */
  82.14% { --tw-approval-accent: #c044a4; } /* MiniMax */
  85.71% { --tw-approval-accent: #008844; } /* Xiaomi / MiMo */
  89.29% { --tw-approval-accent: #e02948; } /* OpenRouter */
  92.86% { --tw-approval-accent: #bb584a; } /* Cerebras */
  96.43% { --tw-approval-accent: #088482; } /* Groq */
  100% { --tw-approval-accent: #346eec; }
}

@keyframes tw-approval-rim-chase {
  to { --tw-approval-rim-angle: 678deg; }
}

.tw-approval-card {
  --tw-approval-accent-border-alpha: 30%;
  --tw-approval-accent-wash-alpha: 12%;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 12px;
  overflow: hidden;
  border: 1px solid color-mix(
    in srgb,
    var(--tw-approval-accent) var(--tw-approval-accent-border-alpha),
    transparent
  );
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--tw-approval-accent) var(--tw-approval-accent-wash-alpha),
        transparent
      ),
      transparent 52%
    ),
    color-mix(in srgb, var(--surface-1) 94%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-primary) 10%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  animation: tw-approval-provider-fade 168s linear infinite;
}

.tw-approval-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--tw-approval-rim-angle),
    transparent 0deg,
    transparent 186deg,
    color-mix(in srgb, var(--tw-approval-accent) 26%, transparent) 268deg,
    color-mix(in srgb, var(--tw-approval-accent) 62%, transparent) 330deg,
    color-mix(in srgb, var(--tw-approval-accent) 92%, transparent) 353deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: tw-approval-rim-chase 4.8s linear infinite;
}

.tw-approval-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--tw-approval-accent) 22%, transparent);
  pointer-events: none;
}

.tw-approval-card > * {
  position: relative;
  z-index: 2;
}

.tw-approval-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.tw-approval-title-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tw-approval-title-copy::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tw-approval-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tw-approval-accent) 65%, transparent);
}

.tw-approval-countdown.is-late {
  color: color-mix(in srgb, var(--danger) 82%, var(--text-primary));
}

.tw-approval-countdown {
  color: var(--warning);
  font-size: 11px;
  font-weight: 550;
}

.tw-approval-message,
.tw-approval-explainer {
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.38;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tw-approval-explainer {
  color: var(--text-tertiary);
}

.tw-approval-preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--tw-approval-accent) 28%, var(--panel-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 84%, transparent);
}

.tw-approval-preview-header {
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
}

.tw-approval-preview-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tw-approval-preview-label {
  color: var(--text-tertiary);
  font-size: 9.5px;
}

.tw-approval-preview-row code {
  display: block;
  padding: 6px 8px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-approval-note {
  display: block;
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-tertiary);
  font-size: 10.5px;
}

.tw-approval-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.tw-approval-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 2px 9px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.tw-approval-action.is-primary {
  border-color: color-mix(in srgb, var(--tw-approval-accent) 64%, var(--panel-border));
  background: color-mix(in srgb, var(--tw-approval-accent) 18%, var(--surface-1));
  color: color-mix(in srgb, var(--tw-approval-accent) 78%, var(--text-primary));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tw-approval-accent) 28%, transparent);
}

.tw-approval-action.is-secondary {
  border-color: color-mix(in srgb, var(--tw-approval-accent) 38%, var(--panel-border));
}

.tw-approval-action.is-danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--panel-border));
  color: var(--danger);
}

[data-theme='light'] .tw-approval-card {
  --tw-approval-accent-border-alpha: 44%;
  --tw-approval-accent-wash-alpha: 26%;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tw-approval-card {
    --tw-approval-accent-border-alpha: 44%;
    --tw-approval-accent-wash-alpha: 26%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tw-approval-card,
  .tw-approval-card::before {
    animation: none;
  }

  .tw-carousel__page,
  .tw-silk-field,
  .tw-carousel__tab,
  .tw-carousel__tab::after,
  .tw-carousel__tab-fx,
  .tw-carousel__tab-pulse::before,
  .tw-carousel__tab-shimmer-band,
  .tw-carousel__tab-sparkle,
  .tw-carousel__tab-num,
  .tw-carousel__arrow,
  .tw-carousel__progress,
  .tw-carousel__progress-bar,
  .tw-carousel__progress-shimmer {
    transition: none !important;
    animation: none !important;
  }

  .tw-carousel__track {
    scroll-behavior: auto;
  }
}

/* ---- Stage: exact isolated Appearance preview ----------------------------- */
.tw-appearance-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'composer';
  /* Single column: the diff-stat colours module is gone, so the composer
   * preview occupies the full stage width at every breakpoint. */
  align-items: stretch;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.tw-composer-preview-frame {
  grid-area: composer;
  display: block;
  width: 100%;
  height: 440px;
  border: 0;
  background: transparent;
  color-scheme: light dark;
}

.tw-appearance-module {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.tw-appearance-module h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 650;
}

.tw-appearance-diff {
  grid-area: diff;
}

.tw-appearance-color-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.tw-appearance-color-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid color-mix(in srgb, currentColor 18%, var(--panel-border));
  border-radius: 7px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.tw-appearance-color-name {
  min-width: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-appearance-color-input {
  width: 24px;
  height: 22px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.tw-appearance-color-control code {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 9.25px;
}

.tw-appearance-reset {
  padding: 2px 6px;
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.tw-diff-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--panel-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.tw-diff-demo-primary,
.tw-diff-demo-activity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 9.5px;
}

.tw-diff-demo-primary strong {
  font-family: var(--font-mono);
  font-size: 14px;
}

.tw-diff-demo-activity {
  padding-top: 8px;
  border-top: 1px solid var(--panel-border);
}

.tw-diff-demo-activity > :first-child {
  flex-basis: 100%;
  color: var(--text-tertiary);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The demo numbers consume the live picker values, exactly like the app's
 * composer diff pill consumes --diff-stat-add/del-color. Without these the
 * strongs inherit --text-secondary and the whole demo reads greyed out. */
.tw-diff-demo .is-add { color: var(--tw-demo-add); }
.tw-diff-demo .is-del { color: var(--tw-demo-del); }

.tw-appearance-diff .tw-appearance-color-control:first-child {
  color: var(--tw-demo-add);
  border-color: color-mix(in srgb, var(--tw-demo-add) 36%, var(--panel-border));
}

.tw-appearance-diff .tw-appearance-color-control:nth-child(2) {
  color: var(--tw-demo-del);
  border-color: color-mix(in srgb, var(--tw-demo-del) 36%, var(--panel-border));
}

@media (max-width: 620px) {
  .tw-appearance-settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'composer';
  }

  .tw-composer-preview-frame {
    width: 100%;
  }
}

/* ---- Stage: API Usage ----------------------------------------------------- */
.tw-stage__quota {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tw-stage__quota-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tw-stage__quota-label {
  flex: 0 0 74px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Plan tag beside the label, echoing the app's Model Usage rows. */
.tw-stage__quota-plan {
  flex: 0 0 auto;
  max-width: 92px;
  overflow: hidden;
  font-size: 9.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--provider-ink, var(--accent)) 55%, var(--text-tertiary));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__quota-bar {
  flex: 1 1 auto;
  position: relative;
  height: 9px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}

.tw-stage__quota-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  width: calc(var(--quota) * 100%);
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--provider-ink, var(--accent)) 72%, transparent),
    var(--provider-ink, var(--accent))
  );
}

.tw-stage__quota-value {
  flex: 0 0 38px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
}

/* ---- Stage: Multiview ----------------------------------------------------- */
.tw-stage__mv-picker {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-stage__mv-layout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 27px;
  padding: 4px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-stage__mv-layout:hover {
  border-color: var(--accent-border);
  background: var(--surface-2);
}

.tw-stage__mv-layout.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border));
  background: var(--accent-soft);
}

.tw-stage__mv-thumb {
  display: grid;
  width: 100%;
  height: 100%;
  gap: 2px;
}

.tw-stage__mv-thumb-cell {
  border-radius: 1.5px;
  background: var(--text-tertiary);
}

.tw-stage__mv-layout.is-active .tw-stage__mv-thumb-cell {
  background: var(--accent);
}

/* Fixed-height grid so switching layouts re-flows the panes, not the page. */
.tw-stage__multiview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  height: clamp(300px, 40vh, 430px);
}

.tw-stage__pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  overflow: hidden;
}

.tw-stage__pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tw-stage__pane-title {
  font-size: 10px;
  font-weight: 650;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tw-stage__pane-note {
  font-size: 9px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* Transcript pane: provider identity stays in the real logo/name ink. Message
 * surfaces keep one uniform border; coloured edge insets are banned. */
.tw-stage__mv-msg {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--panel-border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.tw-stage__mv-msg .tw-stage__dot {
  width: 13px;
  height: 13px;
}

.tw-stage__mv-msg .tw-stage__dot .provider-brand-logo,
.tw-stage__mv-msg .tw-stage__dot .tw-provider-glyph {
  width: 12px;
  height: 12px;
}

.tw-stage__mv-msg-lines {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-top: 1px;
}

.tw-stage__mv-msg-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tw-stage__mv-msg-name {
  font-size: 9px;
  font-weight: 650;
  color: var(--provider-ink, var(--text-secondary));
}

.tw-stage__mv-msg-text {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--text-secondary);
}

.tw-stage__mv-edit {
  overflow: hidden;
  font-size: 9.5px;
  color: var(--text-tertiary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__mv-edit code {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-secondary);
}

.tw-stage__mv-edit strong {
  margin-left: 5px;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

.tw-stage__mv-edit strong.is-add { color: var(--diff-add-text); }
.tw-stage__mv-edit strong.is-del { color: var(--diff-del-text); }

.tw-stage__goal-line {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tw-stage__goal-tick {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 8px;
  font-weight: 700;
}

.tw-stage__goal-tick.is-open {
  background: var(--accent-soft);
  color: var(--accent);
}

.tw-stage__goal-text {
  overflow: hidden;
  font-size: 11px;
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__goal-text.is-open {
  color: var(--text-primary);
}

/* Canvas pane: the TidePool tide curve, tokens only. */
.tw-stage__mv-tide {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.tw-stage__mv-tide-fill {
  fill: color-mix(in srgb, var(--accent) 14%, transparent);
}

.tw-stage__mv-tide-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tw-stage__mv-tide-dot {
  fill: var(--warning);
}

.tw-stage__mv-canvas-caption {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Canvas mode chips + the slot the mode artwork swaps inside. */
.tw-stage__mv-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tw-stage__mv-mode {
  padding: 2px 8px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-stage__mv-mode:hover {
  border-color: var(--accent-border);
}

.tw-stage__mv-mode.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-border));
  background: var(--accent-soft);
  color: var(--text-primary);
}

.tw-stage__mv-canvas-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.tw-stage__mv-canvas-slot > * {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}

.tw-stage__mv-canvas-art {
  height: 100%;
}

.tw-stage__mv-sketch-hull {
  fill: none;
  stroke: var(--warning);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tw-stage__mv-sketch-sail {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.tw-stage__mv-sketch-wave {
  fill: none;
  stroke: var(--success);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.tw-stage__mv-mesh-wire {
  fill: none;
  stroke: color-mix(in srgb, var(--text-tertiary) 75%, transparent);
  stroke-width: 0.8;
}

.tw-stage__mv-mesh-node {
  fill: var(--accent);
}

.tw-stage__mv-browser {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}

.tw-stage__mv-browser-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border-bottom: 1px solid var(--panel-border-subtle);
}

.tw-stage__mv-browser-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
  opacity: 0.6;
}

.tw-stage__mv-browser-url {
  flex: 1 1 auto;
  margin-left: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-stage__mv-browser-page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 9px;
}

.tw-stage__mv-sim {
  display: grid;
  place-items: center;
}

.tw-stage__mv-sim-phone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 58px;
  padding: 7px 6px 6px;
  border: 1.5px solid var(--text-tertiary);
  border-radius: 10px;
  background: var(--surface-2);
}

.tw-stage__mv-sim-notch {
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: var(--text-tertiary);
  opacity: 0.7;
}

.tw-stage__mv-sim-title {
  font-size: 7.5px;
  font-weight: 650;
  color: var(--text-secondary);
}

.tw-stage__mv-sim-wave {
  width: 100%;
  height: 22px;
}

.tw-stage__mv-sim-bar {
  width: 70%;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Terminal interior: TerminalWorkbench's REAL xterm palette
 * (TUI_TERMINAL_THEME), vendored by value and deliberately theme-immune —
 * the app's terminal stays this navy on the light theme too. */
.tw-stage__pane.is-terminal {
  gap: 6px;
}

.tw-stage__term {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(216, 230, 255, 0.08);
  border-radius: var(--radius-sm);
  background: #05080d;
  overflow: hidden;
}

.tw-stage__term-tabs {
  display: flex;
  gap: 2px;
  padding: 5px 6px 0;
}

.tw-stage__term-tab {
  padding: 2px 8px 3px;
  border-radius: 4px 4px 0 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(216, 230, 255, 0.42);
}

.tw-stage__term-tab.is-active {
  background: rgba(90, 140, 255, 0.14);
  color: #d8e6ff;
}

.tw-stage__term-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(216, 230, 255, 0.06);
}

.tw-stage__term .tw-stage__terminal-line {
  color: #d8e6ff;
}

.tw-stage__term .tw-stage__prompt {
  color: #5a8cff;
}

.tw-stage__term .tw-stage__terminal-dim {
  color: rgba(216, 230, 255, 0.45);
}

.tw-stage__term .tw-stage__terminal-ok {
  color: #4cc38a;
}

.tw-stage__term .tw-stage__caret {
  background: #d8e6ff;
}

.tw-stage__terminal-line {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  white-space: pre;
}

.tw-stage__prompt {
  color: var(--slide-accent, var(--accent));
}

.tw-stage__terminal-dim {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-tertiary);
}

.tw-stage__terminal-ok {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
}

.tw-stage__caret {
  display: inline-block;
  width: 6px;
  height: 11px;
  margin-left: 6px;
  vertical-align: text-bottom;
  background: var(--text-secondary);
  animation: tw-mv-caret 1.1s steps(1) infinite;
}

@keyframes tw-mv-caret {
  50% {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .tw-stage__multiview {
    height: clamp(300px, 52vh, 400px);
  }

  .tw-stage__mv-picker {
    flex-wrap: wrap;
  }
}

/* ---- Controls: numbered rail + contained arrows + progress --------------- */
.tw-carousel__controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  column-gap: 12px;
  row-gap: 10px;
  margin-top: 0;
  padding: 12px max(
    var(--gutter),
    calc((100vw - var(--shell-max)) / 2 + var(--gutter))
  ) 24px;
  border-top: 1px solid var(--panel-border);
}

.tw-carousel__arrow {
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out),
    border-color var(--motion-fast) var(--motion-ease-out),
    box-shadow var(--motion-fast) var(--motion-ease-out),
    transform var(--motion-fast) var(--motion-ease-out),
    opacity var(--motion-fast) var(--motion-ease-out);
}

.tw-carousel__arrow:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tw-carousel__arrow:active:not(:disabled) {
  transform: translateY(1px);
}

.tw-carousel__arrow:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.tw-carousel__arrow:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.tw-carousel__arrow::before {
  content: '';
  width: 8px;
  height: 8px;
  border-style: solid;
  border-width: 2px 2px 0 0;
  transform: rotate(-135deg);
}

.tw-carousel__arrow--next::before {
  transform: rotate(45deg);
}

.tw-carousel__tabs {
  grid-row: 1;
  display: flex;
  gap: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tw-carousel__tab {
  --tw-approval-accent: var(--tw-carousel-rest-accent, var(--provider-gemini-color));
  --tw-carousel-slider-accent: var(--tw-approval-accent);
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 6px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  animation: tw-approval-provider-fade 168s linear infinite;
  animation-delay: var(--tw-carousel-cycle-phase, 0s);
  transition:
    color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-carousel__tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.18),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
  transition: background var(--motion-fast) var(--motion-ease-out);
}

.tw-carousel__tab:hover {
  color: var(--text-primary);
  background: transparent;
}

.tw-carousel__tab:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.tw-carousel__tab.is-active {
  color: var(--text-primary);
  background: transparent;
}

.tw-carousel__tab-fx {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 4px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.24s ease-out;
}

.tw-carousel__tab.is-active .tw-carousel__tab-fx {
  opacity: 1;
  animation: tw-carousel-ladder-emerge 0.3s ease-out;
}

/* The app's vertical reasoning-ladder fill, rotated into a horizontal five-
 * pane rail. Neutral lives at the left; provider hue and white-hot shimmer
 * strengthen toward the active edge. */
.tw-carousel__tab-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    rgba(158, 158, 158, 0.4) 0%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 16%, rgba(143, 143, 143, 0.55)) 16.66%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 32%, rgba(132, 132, 138, 0.72)) 33.33%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 50%, rgba(150, 150, 158, 0.82)) 50%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 68%, #ffffff) 66.66%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 86%, #ffffff) 83.33%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 88%, #ffffff) 100%
  );
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.12);
}

.tw-carousel__tab-pulse,
.tw-carousel__tab-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.55) 38%,
    #000 100%
  );
}

.tw-carousel__tab-pulse::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 9%, transparent),
    color-mix(in srgb, var(--tw-carousel-slider-accent) 26%, transparent)
  );
  box-shadow: 0 0 7px color-mix(in srgb, var(--tw-carousel-slider-accent) 44%, transparent);
  transform-origin: left center;
  animation: tw-carousel-ladder-provider-pulse 3.6s ease-in-out infinite;
}

@keyframes tw-carousel-ladder-provider-pulse {
  0%,
  100% {
    opacity: 0.26;
    transform: scaleY(0.94);
  }
  50% {
    opacity: 0.72;
    transform: scaleY(1.04);
  }
}

.tw-carousel__tab-shimmer-band {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  min-width: 9px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 78%, #ffffff) 50%,
    transparent 100%
  );
  animation: tw-carousel-ladder-shimmer 3.2s linear infinite;
}

@keyframes tw-carousel-ladder-shimmer {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(560%);
  }
}

.tw-carousel__tab-sparkles {
  position: absolute;
  left: 0;
  right: 0;
  top: -5px;
  bottom: -5px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.72) 48%,
    #000 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.14) 0%,
    rgba(0, 0, 0, 0.72) 48%,
    #000 100%
  );
}

.tw-carousel__tab-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 3px 1px color-mix(in srgb, var(--tw-carousel-slider-accent) 85%, #ffffff),
    0 0 6px 2px color-mix(in srgb, var(--tw-carousel-slider-accent) 55%, transparent);
  opacity: 0;
  transform: scale(0.3);
  animation: tw-carousel-ladder-sparkle 3.6s ease-in-out infinite;
}

@keyframes tw-carousel-ladder-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.5;
    transform: scale(1);
  }
}

@keyframes tw-carousel-ladder-emerge {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.tw-carousel__tab:not(.is-active) .tw-carousel__tab-pulse::before,
.tw-carousel__tab:not(.is-active) .tw-carousel__tab-shimmer-band,
.tw-carousel__tab:not(.is-active) .tw-carousel__tab-sparkle {
  animation-play-state: paused;
}

.tw-carousel__tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--tw-carousel-slider-accent) 38%, var(--text-tertiary));
  transition:
    color var(--motion-fast) var(--motion-ease-out),
    background var(--motion-fast) var(--motion-ease-out);
}

.tw-carousel__tab.is-active .tw-carousel__tab-num {
  background: transparent;
  color: color-mix(in srgb, var(--tw-carousel-slider-accent) 60%, var(--text-primary));
  box-shadow: none;
}

.tw-carousel__tab-label {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.22;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.tw-carousel__tab.is-active .tw-carousel__tab-label {
  font-weight: 700;
}

.tw-carousel__progress {
  --tw-progress: 20%;
  --tw-approval-accent: var(--tw-carousel-rest-accent, var(--provider-gemini-color));
  --tw-carousel-slider-accent: var(--tw-approval-accent);
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--text-primary) 9%, transparent);
  box-shadow:
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.18),
    inset 0 0 5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: tw-approval-provider-fade 168s linear infinite;
  animation-delay: var(--tw-carousel-cycle-phase, 0s);
}

.tw-carousel__progress-bar {
  position: relative;
  width: var(--tw-progress, 20%);
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(
    to right,
    rgba(158, 158, 158, 0.4) 0%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 32%, rgba(132, 132, 138, 0.72)) 34%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 68%, #ffffff) 68%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 88%, #ffffff) 100%
  );
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.12);
  transition:
    width var(--motion-base) var(--motion-ease-out),
    background var(--motion-base) var(--motion-ease-out);
}

.tw-carousel__progress-shimmer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22%;
  min-width: 9px;
  border-radius: 4px;
  background: linear-gradient(
    to right,
    transparent 0%,
    color-mix(in srgb, var(--tw-carousel-slider-accent) 78%, #ffffff) 50%,
    transparent 100%
  );
  animation: tw-carousel-ladder-shimmer 3.2s linear infinite;
  animation-delay: -1.6s;
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 880px) {
  .tw-carousel__page {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    min-height: 0;
    padding-block: clamp(28px, 5vw, 48px);
    padding-inline: var(--gutter);
  }

  .tw-carousel__body {
    max-width: none;
  }

  .tw-carousel__page > .tw-carousel__copy {
    max-width: 44rem;
    padding: 20px 0 clamp(6px, 1vw, 12px);
  }

  .tw-carousel__page > .tw-carousel__copy h3 {
    max-width: 16ch;
  }

  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__body {
    max-width: 54ch;
  }

  .tw-carousel__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    border-bottom: 0;
  }

  .tw-carousel__points li {
    padding-right: 6px;
  }

  .tw-carousel__page[data-visual="ensemble"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-carousel__page[data-visual="themes"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .tw-carousel__controls {
    column-gap: 8px;
    padding-inline: var(--gutter);
  }

  .tw-carousel__tab {
    align-items: flex-start;
    padding: 8px 4px 14px;
    gap: 4px;
  }

  .tw-carousel__tab-label {
    display: block;
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .tw-carousel__tab::after {
    left: 0;
    right: 0;
  }
}

@media (max-width: 560px) {
  .tw-carousel__page {
    min-height: 0;
    padding-block: 24px;
    gap: 18px;
  }

  .tw-carousel__page > .tw-carousel__copy {
    max-width: none;
    padding: 18px 0 0;
  }

  .tw-carousel__page > .tw-carousel__copy::before {
    top: 0;
    bottom: auto;
    width: 44px;
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--tw-carousel-copy-gray-muted),
      color-mix(in srgb, var(--text-primary) 18%, transparent),
      transparent
    );
  }

  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__kicker {
    column-gap: 10px;
    margin-bottom: 18px;
  }

  .tw-carousel__page > .tw-carousel__copy .tw-carousel__index {
    font-size: clamp(28px, 10vw, 36px);
  }

  .tw-carousel__page > .tw-carousel__copy h3 {
    max-width: 14ch;
    margin-bottom: 14px;
    font-size: clamp(30px, 9vw, 38px);
  }

  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__body {
    max-width: none;
    font-size: 15.5px;
    line-height: 1.6;
  }

  .tw-carousel__points {
    display: flex;
    gap: 0;
    margin-top: 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, var(--panel-border));
  }

  .tw-carousel__points li {
    padding: 9px 0 10px;
  }

  .tw-carousel__arrow {
    width: 36px;
    height: 36px;
  }

  .tw-carousel__tabs {
    gap: 4px;
    padding: 0;
  }

  .tw-carousel__tab {
    align-items: center;
    padding: 8px 2px 14px;
    text-align: center;
  }

  .tw-carousel__tab-label {
    /* The numbered rail fits narrow screens; retain the full tab name for
       assistive technology without squeezing it into vertical fragments. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tw-carousel__tab::after {
    left: 0;
    right: 0;
  }

  .tw-carousel__tab-sparkle:nth-child(n + 4) {
    display: none;
  }

  .tw-stage {
    padding: 0;
  }

  .tw-stage__seatstrip {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .tw-stage__transcript-scroll {
    grid-template-columns: minmax(0, 1fr);
    height: 250px;
    max-height: 250px;
  }

  .tw-stage__themegrid .theme-appearance-preview-window {
    min-height: 76px;
  }
}

@media (forced-colors: active) {
  .tw-carousel__page > .tw-carousel__copy::before {
    background: Highlight;
    box-shadow: none;
  }

  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__kicker,
  .tw-carousel__page > .tw-carousel__copy .tw-carousel__index,
  .tw-carousel__page > .tw-carousel__copy .tw-carousel__kicker-text,
  .tw-carousel__page > .tw-carousel__copy h3,
  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__body,
  .tw-carousel__points li {
    color: CanvasText;
    text-shadow: none;
  }

  .tw-carousel__page > .tw-carousel__copy > .tw-carousel__kicker::after,
  .tw-carousel__points li::before,
  .tw-carousel__tab-fx::before,
  .tw-carousel__progress-bar {
    background: Highlight;
    box-shadow: none;
  }

  .tw-carousel__tab::after {
    background: CanvasText;
    box-shadow: none;
  }

  .tw-carousel__tab,
  .tw-carousel__progress {
    animation: none !important;
  }

  .tw-carousel__tab-pulse,
  .tw-carousel__tab-shimmer,
  .tw-carousel__tab-sparkles,
  .tw-carousel__progress-shimmer {
    display: none;
  }

  .tw-carousel__tab.is-active .tw-carousel__tab-num {
    color: Highlight;
  }
}

.tw-provider-glyph {
  width: 14px; height: 14px;
  color: var(--accent);
}

/* ---- Download ------------------------------------------------------------ */
.tw-download {
  text-align: center;
}

.tw-download .tw-lede {
  margin-inline: auto;
}

.tw-download__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* DESIGN LAW (user ruling): the edge-inset callout — a boxed note with a
 * coloured left-edge bar — is BANNED SITEWIDE. Notes and asides are plain
 * quiet text: muted colour, small size, no box, no background, no border,
 * no edge bar. This mirrors .tw-hero__note, which is the house pattern.
 * When lifting any app component, de-chrome its callout treatment or drop
 * it — never vendor the chrome. */
.tw-callout {
  margin: 24px auto 0;
  max-width: 62ch;
  margin-inline: auto;
  color: var(--text-tertiary);
  font-size: 12.5px;
}

/* The content-load failure is a genuine error, not an aside, so it keeps a
 * legible colour rather than whispering at tertiary. It still takes no box,
 * border, bar or fill — the ban is about chrome, not about contrast. */
.tw-callout--error {
  color: var(--warning);
  font-size: 13.5px;
}

/* ---- Footer -------------------------------------------------------------- */
.tw-footer {
  padding: 48px 0 56px;
  border-top: 1px solid var(--panel-border);
  color: var(--text-secondary);
  font-size: 13.5px;
}

.tw-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 16px;
}

.tw-footer__links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--motion-fast) var(--motion-ease-out);
}

.tw-footer__links a:hover {
  color: var(--text-primary);
}

.tw-footer__text {
  max-width: 68ch;
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ---- Dev / editor drawer -------------------------------------------------- */
.tw-dev {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  height: 100dvh;
  background: var(--app-bg-elevated);
  border-left: 1px solid var(--panel-border);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--motion-base) var(--motion-ease-out),
    visibility var(--motion-base) var(--motion-ease-out);
}

.tw-dev.is-open {
  transform: translateX(0);
  visibility: visible;
}

.tw-dev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--panel-border);
}

.tw-dev__title {
  font-size: 14px;
  font-weight: 600;
}

.tw-dev__hint {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.tw-dev__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px 20px;
}

.tw-dev__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--panel-border);
  background: var(--surface-1);
}

.tw-dev__status {
  flex-basis: 100%;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  min-height: 14px;
}

.tw-devsec {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  background: var(--surface-1);
  margin-bottom: 10px;
  overflow: hidden;
}

.tw-devsec__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}

.tw-devsec__name {
  flex: 1;
  font-size: 13.5px;
  font-weight: 600;
}

.tw-devsec__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.tw-devsec__fields {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tw-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tw-field label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.tw-field input,
.tw-field textarea {
  width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--panel-border);
  background: var(--app-bg-sunken);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  outline: none;
}

.tw-field input:focus,
.tw-field textarea:focus {
  border-color: var(--panel-border-focus);
}

.tw-field.is-dirty label {
  color: var(--warning);
}

.tw-field.is-dirty input,
.tw-field.is-dirty textarea {
  border-color: color-mix(in srgb, var(--warning) 60%, transparent);
}

.tw-devsec.is-disabled {
  opacity: 0.45;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 680px) {
  .tw-hero__mark-wrap::before {
    width: 280px;
    height: 164px;
  }

  .tw-hero__mark-wrap::after {
    width: 188px;
    height: 100px;
  }

  .tw-header__inner {
    height: 52px;
  }
  .tw-nav#site-nav {
    display: none;
  }
  .tw-section {
    padding: 60px 0;
  }
  .tw-hero {
    padding: 64px 0 54px;
  }
  .tw-accordion__summary,
  .tw-provider-item__summary {
    padding: 12px 14px;
  }
  .tw-accordion__body,
  .tw-provider-item__details {
    padding-left: 20px;
  }
}

/* ---- Day/night sky banner -------------------------------------------------
 * VENDORED BY VALUE from the app's SkyWeatherVisual:
 *   - wrapper mask + film grain: 02-transcript-messages-fx.css:777-839
 *   - .sky-gradient 4-stop zenith->horizon + ink/paper mix: :1052-1081
 *   - light-theme ink/paper keys: :1422-1440
 *   - palettes: lib/skyScene.ts:129-174 (PALETTE spine, e=-30 night / e=35 day)
 *
 * HONEST SCOPE: palettes remain the app's visual mechanism. Sun/moon disc
 * positions, opacity, scale, and lunar brightness are driven by JS contract
 * props on this container (--sky-sun-*, --sky-moon-x/y/--sky-moon-bright,
 * --sky-stars, --sky-glow-*), matching SkyWeatherVisual / computeSkyScene.
 * CSS does not compute astronomy.
 *
 * Deliberately quieter than the app (opacity 0.55 vs its 0.9): the provider
 * silk stays the hero's chromatic subject.
 * ------------------------------------------------------------------------- */
@property --sky-moon-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 78;
}
@property --sky-moon-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 26;
}
@property --sky-glow-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 76;
}
@property --sky-glow-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --sky-glow-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff9448;
}
@property --sky-sun-x {
  syntax: "<number>";
  inherits: true;
  initial-value: 76;
}
@property --sky-sun-y {
  syntax: "<number>";
  inherits: true;
  initial-value: 30;
}
@property --sky-sun-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@property --sky-sun-opacity {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --sky-sun-core {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --sky-sun-mid {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffe9a8;
}
@property --sky-sun-edge {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffd24a;
}
@property --sky-sun-rays {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --sky-moon-bright {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --sky-stars {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

.tw-sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(62vh, 560px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.55;
  isolation: isolate;
  transition:
    --sky-sun-x 28s linear,
    --sky-sun-y 28s linear,
    --sky-sun-scale 2600ms linear,
    --sky-sun-opacity 2600ms linear,
    --sky-sun-core 2600ms linear,
    --sky-sun-mid 2600ms linear,
    --sky-sun-edge 2600ms linear,
    --sky-sun-rays 2600ms linear,
    --sky-moon-x 28s linear,
    --sky-moon-y 28s linear,
    --sky-moon-bright 2600ms linear,
    --sky-stars 2600ms linear,
    --sky-glow-x 28s linear,
    --sky-glow-opacity 2600ms linear,
    --sky-glow-color 2600ms linear;
  /* Long eased dissolve, verbatim from the app — a short ramp reads as a hard
   * band where the bright horizon meets the tail. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0.97) 40%,
    rgba(0, 0, 0, 0.9) 55%,
    rgba(0, 0, 0, 0.78) 66%,
    rgba(0, 0, 0, 0.62) 75%,
    rgba(0, 0, 0, 0.45) 82%,
    rgba(0, 0, 0, 0.3) 88%,
    rgba(0, 0, 0, 0.17) 93%,
    rgba(0, 0, 0, 0.07) 97%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1),
    rgba(0, 0, 0, 0.97) 40%,
    rgba(0, 0, 0, 0.9) 55%,
    rgba(0, 0, 0, 0.78) 66%,
    rgba(0, 0, 0, 0.62) 75%,
    rgba(0, 0, 0, 0.45) 82%,
    rgba(0, 0, 0, 0.3) 88%,
    rgba(0, 0, 0, 0.17) 93%,
    rgba(0, 0, 0, 0.07) 97%,
    transparent 100%
  );
}

/* Shared with the DMG artwork: a transparent, deterministic constellation of
 * real TaskWraith identicons and tool-family glyphs. The source artwork is
 * already low-alpha; this second restraint keeps it as texture, never content. */
.tw-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: image-set(
    url('../assets/swarm-field.png') 1x,
    url('../assets/swarm-field@2x.png') 2x
  );
  background-position: center -28px;
  background-repeat: no-repeat;
  background-size: min(960px, 100vw) auto;
  opacity: 0.62;
  filter: saturate(0.82);
}

[data-theme='light'] .tw-sky::before {
  opacity: 0.4;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tw-sky::before {
    opacity: 0.4;
  }
}

@media (forced-colors: active) {
  .tw-sky::before {
    display: none;
  }
}

/* Static film grain — dithers the wide soft gradient so it does not band on
 * 8-bit displays. Verbatim technique; painted once, never animated. */
.tw-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0.05;
}

/* Night is the default so the markup renders correctly before script runs. */
.tw-sky.sky-night {
  --sky-top: #020613;
  --sky-upper: #050b1e;
  --sky-mid: #0a1530;
  --sky-horizon: #10203f;
}

.tw-sky.sky-day {
  --sky-top: #2b6fd3;
  --sky-upper: #4f97e6;
  --sky-mid: #93c6f4;
  --sky-horizon: #cfe9fc;
}

.tw-sky__gradient {
  --sg-top: color-mix(in srgb, var(--sky-top) var(--sky-ink, 100%), var(--sky-paper, transparent));
  --sg-upper: color-mix(in srgb, var(--sky-upper) var(--sky-ink, 100%), var(--sky-paper, transparent));
  --sg-mid: color-mix(in srgb, var(--sky-mid) var(--sky-ink, 100%), var(--sky-paper, transparent));
  --sg-horizon: color-mix(in srgb, var(--sky-horizon) var(--sky-ink, 100%), var(--sky-paper, transparent));
  position: absolute;
  inset: -6% -2% -4%;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--sg-top),
    var(--sg-upper) 30%,
    var(--sg-mid) 56%,
    var(--sg-horizon) 74%,
    color-mix(in srgb, var(--sg-horizon) 72%, transparent) 84%,
    color-mix(in srgb, var(--sg-horizon) 38%, transparent) 92%,
    transparent 100%
  );
  opacity: 0.94;
  mix-blend-mode: screen;
  filter: saturate(1.144) brightness(1.108);
}

/* Light themes: the app mixes the sky toward a fixed paper instead of
 * screen-blending it, or the pastels blow out over a bright page. */
[data-theme="light"] .tw-sky__gradient,
:root:not([data-theme]) .tw-sky__gradient {
  --sky-paper: #f8fbfe;
  --sky-ink: 72%;
  mix-blend-mode: normal;
  filter: saturate(1.07) brightness(1.01);
}

[data-theme="light"] .tw-sky.sky-day .tw-sky__gradient,
:root:not([data-theme]) .tw-sky.sky-day .tw-sky__gradient {
  --sky-ink: 80%;
}

/* Light themes also pull the WHOLE scene well back (0.55 -> 0.3): over a
 * bright page the milky sky competes with the silk highlight, and a much
 * quieter scene lets the ribbon and the sky breathe around each other. */
[data-theme="light"] .tw-sky,
:root:not([data-theme]) .tw-sky {
  opacity: 0.3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .tw-sky {
    opacity: 0.55;
  }

  :root:not([data-theme]) .tw-sky__gradient {
    --sky-paper: transparent;
    --sky-ink: 100%;
    mix-blend-mode: screen;
    filter: saturate(1.144) brightness(1.108);
  }
}

/* ---- Sky astronomy stars (catalog + dust), clouds, orbs + diffs ----------
 * VENDORED BY VALUE (structure + technique) from:
 *   02-transcript-messages-fx.css:1281-1378 (starfield, catalog, twinkle)
 *   :1471-1593 (cloud puffs, drift, cover bands)
 *   :1080-1258 (glow, sun disc, phased moon) + :1686-1750 (diff cloud)
 * Adapted to .tw-sky context; colours ride the Work1 --sky-* contract.
 * ------------------------------------------------------------------------- */
.tw-sky__starfield,
.tw-sky__catalog {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--sky-stars, 1);
}

.tw-sky__starfield {
  z-index: 1;
}

.tw-sky__catalog {
  z-index: 2;
}

/* Dust: deterministic seeded field (seed 0x5eb0) — faint filler behind
 * catalog constellations. Rendered always at night, dimmed when catalog is
 * present so constellations blaze over it. */
.sky-real-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(239, 247, 255, 0.98);
  box-shadow: 0 0 5px rgba(172, 211, 255, 0.72), 0 0 12px rgba(120, 178, 255, 0.28);
  animation: skyStarTwinkle var(--st-dur, 7s) ease-in-out infinite;
  animation-delay: var(--st-delay, 0s);
}

.sky-real-star.is-soft {
  background: rgba(214, 231, 255, 0.8);
  box-shadow: 0 0 6px rgba(150, 195, 255, 0.5);
}

/* Catalog stars — magnitude-driven size/brightness, sidereal-projected. */
.sky-cat-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(246, 250, 255, 0.98);
  box-shadow: 0 0 4px rgba(186, 218, 255, 0.68), 0 0 10px rgba(126, 182, 255, 0.24);
  animation: skyCatalogTwinkle var(--st-dur, 7s) ease-in-out infinite;
  animation-delay: var(--st-delay, 0s);
}

.sky-cat-star.is-major {
  box-shadow: 0 0 7px rgba(206, 230, 255, 0.9), 0 0 15px rgba(150, 198, 255, 0.46),
    0 0 25px rgba(110, 168, 255, 0.22);
}

@keyframes skyStarTwinkle {
  0%, 100% { transform: scale(0.8); opacity: 0.42; }
  45% { transform: scale(1.45); opacity: 0.95; }
}

@keyframes skyCatalogTwinkle {
  0%, 100% { transform: scale(0.88); opacity: calc(var(--st-bright, 0.8) * 0.55); }
  45% { transform: scale(1.16); opacity: var(--st-bright, 0.9); }
}

.sky-shooting-star {
  position: absolute;
  top: 12%;
  left: 4%;
  width: 74px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(178,214,255,0.4) 55%, transparent);
  opacity: 0;
  transform: rotate(16deg);
  animation: skyShootingStar 46s linear infinite;
}

@keyframes skyShootingStar {
  0%, 97.2%, 100% { transform: translate3d(0,0,0) rotate(16deg) scaleX(0.4); opacity: 0; }
  97.5% { opacity: 0.9; transform: translate3d(14cqw, 34px, 0) rotate(16deg) scaleX(1); }
  98.1% { opacity: 0; transform: translate3d(30cqw, 74px, 0) rotate(16deg) scaleX(0.55); }
}

/* Clouds — five fixed puff shapes with long drift, tinted by --sky-cloud-lit/shade.
 * Rendered day+night; no cover-band gating on site (decorative). */
.tw-sky__clouds {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  container-type: size;
}

.sky-cloud {
  position: absolute;
  width: 178px;
  height: 62px;
  border-radius: 50% 48% 46% 54% / 58% 64% 36% 42%;
  /* The app uses blur(4px) (02-transcript-messages-fx.css:1478) because its
   * clouds sit small and far behind a busy transcript. Here they are large and
   * near the top of a mostly empty hero, where 4px reads as a hard-edged blob.
   * 10px is the deliberate deviation from the vendored value.
   * Trade-off worth knowing before tuning: the cloud gets its form from the
   * five stacked radial puffs above, and blur is what softens them — push this
   * much past ~12px and the puffs smear into one featureless smudge. */
  --sky-cloud-blur: 10px;
  filter: blur(var(--sky-cloud-blur, 10px));
  background:
    radial-gradient(ellipse at 12% 68%, color-mix(in srgb, var(--sky-cloud-lit, #fff) 34%, transparent) 0 15%, transparent 16%),
    radial-gradient(ellipse at 25% 48%, color-mix(in srgb, var(--sky-cloud-lit, #fff) 56%, transparent) 0 23%, transparent 24%),
    radial-gradient(ellipse at 44% 30%, color-mix(in srgb, var(--sky-cloud-lit, #fff) 68%, transparent) 0 31%, transparent 32%),
    radial-gradient(ellipse at 62% 36%, color-mix(in srgb, var(--sky-cloud-lit, #fff) 54%, transparent) 0 26%, transparent 27%),
    radial-gradient(ellipse at 80% 58%, color-mix(in srgb, var(--sky-cloud-lit, #fff) 38%, transparent) 0 20%, transparent 21%),
    linear-gradient(180deg, color-mix(in srgb, var(--sky-cloud-lit, #fff) 50%, transparent), color-mix(in srgb, var(--sky-cloud-shade, #d6e2f0) 24%, transparent) 68%, color-mix(in srgb, var(--sky-cloud-shade, #d6e2f0) 8%, transparent));
  box-shadow: inset 0 -7px 14px color-mix(in srgb, var(--sky-cloud-shade, #d6e2f0) 12%, transparent), inset 0 6px 12px color-mix(in srgb, var(--sky-cloud-lit, #fff) 20%, transparent);
  opacity: 0.62;
  animation: skyCloudDrift 148s linear infinite;
  will-change: transform;
}

.sky-cloud-1 { top: 44px; left: -190px; animation-duration: 148s; }
.sky-cloud-2 { top: 108px; left: 28%; width: 224px; height: 72px; transform: scaleX(1.08); animation-duration: 176s; animation-delay: -72s; opacity: 0.48; }
.sky-cloud-3 { top: 18px; right: -210px; width: 190px; height: 66px; animation-duration: 164s; animation-delay: -112s; opacity: 0.5; }
.sky-cloud-4 { top: 168px; left: -230px; width: 248px; height: 78px; transform: scaleX(1.18); animation-duration: 206s; animation-delay: -38s; opacity: 0.42; }
/* Retained deliberately: the fifth cloud was dropped from index.html to thin
 * the field out. Keeping this rule makes restoring it a one-line markup edit
 * rather than a re-derivation. */
.sky-cloud-5 { top: 84px; right: 18%; width: 126px; height: 44px; transform: scaleX(0.92); animation-duration: 188s; animation-delay: -140s; opacity: 0.44; }

.tw-sky.sky-day .sky-cloud { opacity: 0.42; }
.tw-sky.sky-day .sky-cloud-2 { opacity: 0.32; }

@keyframes skyCloudDrift {
  0% { transform: translate3d(-8vw, 0, 0); }
  100% { transform: translate3d(112vw, 0, 0); }
}

/* Horizon bloom — tracks the sun; JS drives --sky-glow-* on .tw-sky. */
.sky-glow {
  position: absolute;
  inset: -18% -8% 0;
  z-index: 1;
  opacity: var(--sky-glow-opacity, 0);
  pointer-events: none;
  backface-visibility: hidden;
}

.sky-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 58% 44% at calc(var(--sky-glow-x, 76) * 1%) 96%,
      color-mix(in srgb, var(--sky-glow-color, #ff9448) 66%, transparent),
      color-mix(in srgb, var(--sky-glow-color, #ff9448) 24%, transparent) 46%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 120% 34% at calc(var(--sky-glow-x, 76) * 1%) 102%,
      color-mix(in srgb, var(--sky-glow-color, #ff9448) 34%, transparent),
      transparent 68%
    );
  animation: skyGlowDrift 24s ease-in-out infinite alternate;
}

@keyframes skyGlowDrift {
  0% { transform: translate3d(-18px, -4px, 0) scale(1); opacity: 0.82; }
  100% { transform: translate3d(18px, 8px, 0) scale(1.04); opacity: 1; }
}

/* Sun disc — warm glowing orb. Reads Work1's --sky-sun-* names. */
.sky-orb {
  --sky-sun-disc-background:
    radial-gradient(circle at 32% 28%, var(--sky-sun-core, #ffffff) 0 13%, color-mix(in srgb, var(--sky-sun-mid, #ffe9a8) 98%, transparent) 26%, color-mix(in srgb, var(--sky-sun-edge, #ffd24a) 96%, transparent) 58%, color-mix(in srgb, var(--sky-sun-edge, #ffd24a) 78%, transparent) 82%, transparent 84%);
  --sky-sun-disc-shadow:
    0 0 24px color-mix(in srgb, var(--sky-sun-mid, #ffe9a8) 82%, transparent),
    0 0 58px color-mix(in srgb, var(--sky-sun-edge, #ffd24a) 58%, transparent),
    0 0 112px color-mix(in srgb, var(--sky-sun-edge, #ffd24a) 34%, transparent),
    0 0 168px color-mix(in srgb, var(--sky-sun-mid, #ffe9a8) 18%, transparent);
  position: absolute;
  left: calc(var(--sky-sun-x, 76) * 1% - 34px);
  top: calc(var(--sky-sun-y, 30) * 1% - 34px);
  z-index: 3;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  opacity: var(--sky-sun-opacity, 0);
  transform: scale(var(--sky-sun-scale, 1));
  transform-origin: 50% 50%;
  pointer-events: none;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.sky-orb::before,
.sky-orb::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.sky-orb::before {
  z-index: 0;
  inset: -28px;
  background:
    repeating-conic-gradient(from 7deg, color-mix(in srgb, var(--sky-sun-mid, #ffe9a8) 34%, transparent) 0deg 9deg, transparent 9deg 20deg);
  filter: blur(2.6px);
  opacity: calc(var(--sky-sun-rays, 0.42) * 0.72);
  transform-origin: 50% 50%;
  animation: skySunRays 54s linear infinite;
}

.sky-orb::after {
  z-index: 1;
  inset: 0;
  background: var(--sky-sun-disc-background);
  box-shadow: var(--sky-sun-disc-shadow);
  filter: blur(0.75px);
}

@keyframes skySunRays {
  0% { transform: rotate(0deg) scale(0.94); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(0.94); }
}

/* Moon — cool disc; terminator is Work1's SVG mask inside .sky-moon-glyph. */
.sky-moon {
  position: absolute;
  left: calc(var(--sky-moon-x, 78) * 1% - 36px);
  top: calc(var(--sky-moon-y, 26) * 1% - 36px);
  z-index: 3;
  width: 72px;
  height: 72px;
  opacity: var(--sky-moon-bright, 0);
  pointer-events: none;
  filter:
    drop-shadow(0 0 7px rgba(244, 250, 255, 0.72))
    drop-shadow(0 0 22px rgba(178, 220, 255, 0.5))
    drop-shadow(0 0 58px rgba(99, 157, 255, 0.3));
  animation: skyMoonDrift 22s ease-in-out infinite;
}

.sky-moon::before {
  content: "";
  position: absolute;
  inset: -30px -34px -26px -32px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 47%, rgba(235, 247, 255, 0.18), transparent 38%),
    radial-gradient(circle at 44% 48%, rgba(114, 175, 255, 0.14), transparent 62%);
  filter: blur(11px);
  opacity: 0.92;
}

.sky-moon-glyph {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-8deg);
  transform-origin: 50% 50%;
}

.sky-moon-maria ellipse,
.sky-moon-maria circle {
  fill: rgba(104, 122, 152, 0.2);
}

.sky-moon-earthshine {
  opacity: 0.09;
}

@keyframes skyMoonDrift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-8px, 7px, 0) rotate(2deg) scale(1.02); }
}

/* Diff cloud — floating stat card (+additions / -deletions), both day+night. */
.sky-diff-cloud {
  position: absolute; left: 0; top: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: skyDiffCloudFlight var(--sky-diff-duration, 58s) linear both;
  filter: drop-shadow(0 1px 4px rgba(8,14,24,0.18));
}

.sky-diff-cloud-card {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: rgba(249,251,255,0.94);
  font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,0.62), 0 0 7px rgba(255,255,255,0.52), 0 1px 5px rgba(8,14,24,0.22);
}

.sky-diff-cloud-add { color: #2da44e; }
.sky-diff-cloud-delete { color: #cf222e; }
.sky-diff-cloud-mega-delete .sky-diff-cloud-delete { font-size: 11.5px; }

@keyframes skyDiffCloudFlight {
  0% { transform: translate3d(var(--sky-diff-x0, -280px), var(--sky-diff-y0, 60px), 0) rotate(var(--sky-diff-r0, 0deg)) scale(var(--sky-diff-scale, 0.94)); opacity: 0; }
  6% { opacity: 0.7; }
  18% { transform: translate3d(var(--sky-diff-x1, 14cqw), var(--sky-diff-y1, 50px), 0) rotate(var(--sky-diff-r1, 0deg)) scale(calc(var(--sky-diff-scale, 0.94)*1.04)); opacity: 0.78; }
  38% { transform: translate3d(var(--sky-diff-x2, 36cqw), var(--sky-diff-y2, 70px), 0) rotate(var(--sky-diff-r2, 0deg)) scale(calc(var(--sky-diff-scale, 0.94)*0.96)); opacity: 0.72; }
  58% { transform: translate3d(var(--sky-diff-x3, 58cqw), var(--sky-diff-y3, 80px), 0) rotate(var(--sky-diff-r3, 0deg)) scale(calc(var(--sky-diff-scale, 0.94)*1.08)); opacity: 0.8; }
  79% { transform: translate3d(var(--sky-diff-x4, 82cqw), var(--sky-diff-y4, 60px), 0) rotate(var(--sky-diff-r4, 0deg)) scale(calc(var(--sky-diff-scale, 0.94)*0.98)); opacity: 0.68; }
  94% { opacity: 0.56; }
  100% { transform: translate3d(var(--sky-diff-x5, calc(100cqw + 280px)), var(--sky-diff-y5, 50px), 0) rotate(var(--sky-diff-r5, 0deg)) scale(var(--sky-diff-scale, 0.94)); opacity: 0; }
}

/* Content sits above the sky. The sky is positioned with z-index 0, which
 * would otherwise paint over non-positioned in-flow content. */
#site-root {
  position: relative;
  z-index: 1;
}

/* ---- Unified 20s provider-hue cycle ---------------------------------------
 * ONE keyframe track drives five registered colour properties at once, each
 * entering the loop at a different point in the palette. So at any instant the
 * page shows five DIFFERENT canonical hues (the multicolour stays multicolour)
 * while every one of them advances through the full set every 20s.
 *
 * That is why this is one animation and not five staggered ones: a single
 * track cannot drift out of sync with itself.
 *
 * @property registration is what makes colour interpolation possible at all —
 * unregistered custom properties animate as discrete strings and would jump.
 * Every consumer still passes a literal fallback, so a browser without
 * @property renders the palette statically rather than losing the colour.
 * ------------------------------------------------------------------------- */
@property --tw-cycle-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #346eec;
}
@property --tw-cycle-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #705aff;
}
@property --tw-cycle-c {
  syntax: "<color>";
  inherits: true;
  initial-value: #b16105;
}
@property --tw-cycle-d {
  syntax: "<color>";
  inherits: true;
  initial-value: #0073e6;
}
@property --tw-cycle-e {
  syntax: "<color>";
  inherits: true;
  initial-value: #986781;
}

:root {
  animation: tw-hue-cycle 20s linear infinite;
}

@keyframes tw-hue-cycle {
  0%,
  100% {
    --tw-cycle-accent: #346eec;
    --tw-cycle-b: #705aff;
    --tw-cycle-c: #b16105;
    --tw-cycle-d: #0073e6;
    --tw-cycle-e: #986781;
  }
  16.667% {
    --tw-cycle-accent: #705aff;
    --tw-cycle-b: #b16105;
    --tw-cycle-c: #0073e6;
    --tw-cycle-d: #986781;
    --tw-cycle-e: #d44404;
  }
  33.333% {
    --tw-cycle-accent: #b16105;
    --tw-cycle-b: #0073e6;
    --tw-cycle-c: #986781;
    --tw-cycle-d: #d44404;
    --tw-cycle-e: #346eec;
  }
  50% {
    --tw-cycle-accent: #0073e6;
    --tw-cycle-b: #986781;
    --tw-cycle-c: #d44404;
    --tw-cycle-d: #346eec;
    --tw-cycle-e: #705aff;
  }
  66.667% {
    --tw-cycle-accent: #986781;
    --tw-cycle-b: #d44404;
    --tw-cycle-c: #346eec;
    --tw-cycle-d: #705aff;
    --tw-cycle-e: #b16105;
  }
  83.333% {
    --tw-cycle-accent: #d44404;
    --tw-cycle-b: #346eec;
    --tw-cycle-c: #705aff;
    --tw-cycle-d: #b16105;
    --tw-cycle-e: #0073e6;
  }
}

/* ---- CTA rim chase --------------------------------------------------------
 * VENDORED BY VALUE from .ensemble-fanout-result-rim / -rim-sweep
 * (02-transcript-messages-fx.css:6958-7020). Same obsidian-rim-chase
 * technique: a STATIC mask keeps only the rim strip (xor/exclude punches the
 * middle out, or the conic would wash the whole button and fog the label),
 * and a child conic gradient rotates underneath via transform — which stays on
 * a compositor layer instead of repainting a masked gradient every frame.
 *
 * Colour comes from the shared 20s cycle, so the buttons and the silk breathe
 * the same hue together. --accent is deliberately NOT cycled: the filled
 * button keeps a stable background and readable contrast.
 * ------------------------------------------------------------------------- */
.tw-btn {
  --tw-rim-width: 1px;
  --tw-rim-duration: 3.6s;
  position: relative;
  isolation: isolate;
}

.tw-btn__rim {
  position: absolute;
  inset: calc(var(--tw-rim-width) * -1);
  border-radius: calc(var(--radius-md) + var(--tw-rim-width));
  padding: var(--tw-rim-width);
  contain: paint;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.tw-btn__rim-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 186deg,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) var(--tw-rim-low, 26%), transparent) 268deg,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) var(--tw-rim-mid, 62%), transparent) 330deg,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) var(--tw-rim-peak, 92%), transparent) 353deg,
    transparent 360deg
  );
  transform: translateZ(0);
  transform-origin: 50% 50%;
  will-change: transform;
  animation: tw-rim-chase var(--tw-rim-duration) linear infinite;
}

/* The filled primary already carries an accent background and glow, so a
 * full-strength chase on top of it reads busy. The ghost button has nothing
 * competing, so it takes the app's original strengths. */
.tw-btn--primary {
  --tw-rim-low: 14%;
  --tw-rim-mid: 34%;
  --tw-rim-peak: 58%;
}

@keyframes tw-rim-chase {
  to {
    transform: translateZ(0) rotate(360deg);
  }
}

/* ---- Reduced motion ------------------------------------------------------
 * Blanket kill-switch. Every transition/animation on the page is covered by
 * the universal selectors, so a new animated component can never silently
 * escape this guarantee the way it could with a hand-listed exemption set.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Disclosure chevrons still need to show state — they just snap instead of
   * rotating through the motion curve. */
  .tw-chevron {
    transition: none !important;
  }

  .tw-carousel__page,
  .tw-silk-field,
  .tw-carousel__tab,
  .tw-carousel__tab::after,
  .tw-carousel__tab-fx,
  .tw-carousel__tab-pulse::before,
  .tw-carousel__tab-shimmer-band,
  .tw-carousel__tab-sparkle,
  .tw-carousel__tab-num,
  .tw-carousel__arrow,
  .tw-carousel__progress,
  .tw-carousel__progress-bar,
  .tw-carousel__progress-shimmer {
    transition: none !important;
    animation: none !important;
  }

  .tw-carousel__tab.is-active .tw-carousel__tab-fx {
    opacity: 1;
  }

  .tw-carousel__tab-pulse::before {
    opacity: 0.4;
    transform: none !important;
  }

  .tw-carousel__tab-shimmer-band,
  .tw-carousel__progress-shimmer {
    opacity: 0.42;
    transform: translateX(20%) !important;
  }

  .tw-carousel__tab-sparkle {
    opacity: 0.5;
    transform: scale(1) !important;
  }

  .tw-carousel__track {
    scroll-behavior: auto !important;
  }

  /* The rim is a BORDER, not motion. The universal rule above would still
   * rotate it once (0.001ms), which is harmless, but the app's own precedent
   * is to stop the chase and leave the rim lit — so the button keeps its
   * outline and simply stops chasing. */
  .tw-btn__rim-sweep {
    animation: none !important;
    background: linear-gradient(
      120deg,
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 18%, transparent),
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 62%, transparent) 52%,
      color-mix(in srgb, var(--tw-cycle-accent, #346eec) 18%, transparent)
    );
  }

  /* The hue cycle parks on its 0%/100% stop, which is the canonical
   * gemini/codex/claude/kimi/ensemble arrangement — the same five-colour silk
   * palette the page uses in motion. Nothing is lost standing still. */
  :root {
    animation: none !important;
  }

  /* Sky life. Stars, clouds, and orbs rest where they are — a still night sky
   * is still a night sky. */
  .sky-real-star,
  .sky-cat-star,
  .sky-cloud,
  .sky-glow::before,
  .sky-orb::before,
  .sky-moon,
  .sky-diff-cloud,
  .sky-shooting-star {
    animation: none !important;
  }

  /* A diff cloud frozen mid-sky still reads as a bug. */
  .sky-diff-cloud {
    display: none !important;
  }

}

/* ---- Concurrency section + Workspace Stats mock --------------------------
 * Two-column plane: the app's Workspace Stats popover mid-fleet on the left,
 * one paragraph of copy on the right; columns stack copy-first under 880px.
 *
 * The card's inner styles are COPIED BY VALUE from the app's
 * 31-workspace-stats.css and re-expressed in this file's tokens, so both
 * themes come from the same --surface/--text/--panel-border machinery as the
 * rest of the page. App-exact inks that theme.css itself hardcodes (diff
 * green/red, ahead amber, behind blue) keep their app values, including the
 * app's light-theme re-inks for ahead/behind below.
 * ------------------------------------------------------------------------- */
.tw-workspace__layout {
  display: grid;
  grid-template-areas: 'stage copy';
  grid-template-columns: minmax(0, 13fr) minmax(250px, 9fr);
  gap: clamp(28px, 4.5vw, 56px);
  align-items: center;
}

.tw-workspace__stage {
  grid-area: stage;
  min-width: 0;
}

.tw-workspace__copy {
  grid-area: copy;
  min-width: 0;
}

.tw-workspace__kicker {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--provider-ensemble-color) 78%, var(--text-primary));
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tw-workspace__copy h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.tw-workspace__body {
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* The card itself. In the app this sits on the side-chat glass; here it is a
 * plain elevated panel so it reads the same on both themes without vendoring
 * the whole backdrop stack. */
.tw-wstats {
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: 0 24px 56px -28px rgba(0, 0, 0, 0.5);
  font-family: var(--font-sans);
  line-height: 1.35;
}

.tw-wstats .workspace-stats-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}

.tw-wstats .workspace-stats-header h3 {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.tw-wstats .workspace-stats-header p {
  max-width: 320px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-eyebrow {
  color: color-mix(in srgb, var(--accent) 82%, var(--text-primary));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tw-wstats .workspace-stats-close {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-secondary);
  font-size: 12px;
}

.tw-wstats .workspace-stats-observation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 18px;
  color: var(--text-tertiary);
  font-size: 9px;
  letter-spacing: 0.035em;
}

.tw-wstats .workspace-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}

.tw-wstats .workspace-stats-cell {
  min-width: 0;
  min-height: 96px;
  padding: 13px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 68%, transparent);
}

.tw-wstats .workspace-stats-cell:nth-child(odd) {
  border-right: 1px solid color-mix(in srgb, var(--panel-border) 68%, transparent);
}

.tw-wstats .workspace-stats-cell:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.tw-wstats .workspace-stats-cell-label {
  display: block;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tw-wstats .workspace-stats-cell-value {
  display: block;
  min-height: 25px;
  margin-top: 7px;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-cell-detail {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-cell small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.3;
}

.tw-wstats .workspace-stats-diff,
.tw-wstats .workspace-stats-divergence {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

/* App-exact default diff-stat ink; the app does not re-ink these per theme. */
.tw-wstats .workspace-stats-addition {
  color: #2db777;
}

.tw-wstats .workspace-stats-deletion {
  color: #ec3d35;
}

.tw-wstats .workspace-stats-ahead,
.tw-wstats .workspace-stats-behind {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

.tw-wstats .workspace-stats-ahead {
  color: #ffc248;
}

.tw-wstats .workspace-stats-behind {
  color: #6fa4ff;
}

/* App light-theme re-inks for divergence arrows. */
[data-theme='light'] .tw-wstats .workspace-stats-ahead {
  color: #c38b00;
}

[data-theme='light'] .tw-wstats .workspace-stats-behind {
  color: #2f6fd6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tw-wstats .workspace-stats-ahead {
    color: #c38b00;
  }

  :root:not([data-theme]) .tw-wstats .workspace-stats-behind {
    color: #2f6fd6;
  }
}

.tw-wstats .workspace-stats-provenance,
.tw-wstats .workspace-stats-work {
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}

.tw-wstats .workspace-stats-provenance-summary,
.tw-wstats .workspace-stats-lock-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 7px 16px;
  color: var(--text-secondary);
  font-size: 10px;
}

.tw-wstats .workspace-stats-provenance-summary > div,
.tw-wstats .workspace-stats-lock-summary > div,
.tw-wstats .workspace-stats-provenance-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tw-wstats .workspace-stats-provenance-summary strong,
.tw-wstats .workspace-stats-lock-summary strong {
  color: var(--text-primary);
  font-size: 10px;
}

.tw-wstats .workspace-stats-provenance-actions {
  min-width: 0;
  justify-content: flex-end;
}

.tw-wstats .workspace-stats-provenance-refresh {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--panel-border) 88%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 600;
}

.tw-wstats .workspace-stats-provenance-dot,
.tw-wstats .workspace-stats-lock-dot,
.tw-wstats .workspace-stats-work-lane-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2db777;
  box-shadow: 0 0 8px color-mix(in srgb, #2db777 58%, transparent);
}

.tw-wstats .workspace-provenance-list {
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 62%, transparent);
}

.tw-wstats .workspace-provenance-row {
  display: grid;
  grid-template-columns: 54px minmax(150px, 1.3fr) 70px 76px minmax(90px, 1fr) 8px;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 62%, transparent);
}

.tw-wstats .workspace-provenance-row:last-child {
  border-bottom: 0;
}

.tw-wstats .workspace-provenance-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tw-wstats .workspace-provenance-state::before {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--text-tertiary);
  content: '';
}

.tw-wstats .workspace-provenance-row.state-live .workspace-provenance-state::before,
.tw-wstats .workspace-provenance-row.state-runtime .workspace-provenance-state::before {
  background: #2db777;
  box-shadow: 0 0 7px color-mix(in srgb, #2db777 55%, transparent);
}

.tw-wstats .workspace-provenance-row.state-decayed .workspace-provenance-state::before {
  background: #ec3d35;
  box-shadow: 0 0 7px color-mix(in srgb, #ec3d35 45%, transparent);
}

.tw-wstats .workspace-provenance-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tw-wstats .workspace-provenance-identity .tw-stage__dot {
  width: 14px;
  height: 14px;
}

.tw-wstats .workspace-provenance-identity .tw-stage__dot .provider-brand-logo,
.tw-wstats .workspace-provenance-identity .tw-stage__dot .tw-provider-glyph {
  width: 13px;
  height: 13px;
}

.tw-wstats .tw-provider-glyph {
  color: var(--provider-ink, var(--accent));
}

.tw-wstats .workspace-provenance-identity-text {
  min-width: 0;
}

.tw-wstats .workspace-provenance-identity strong,
.tw-wstats .workspace-provenance-identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-provenance-identity strong {
  color: color-mix(in srgb, var(--provider-ink, var(--text-primary)) 66%, var(--text-primary));
  font-size: 10px;
  font-weight: 650;
}

.tw-wstats .workspace-provenance-identity small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.tw-wstats .workspace-provenance-row .workspace-stats-diff {
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tw-wstats .workspace-provenance-confidence {
  overflow: hidden;
  padding-left: 8px;
  border-left: 2px solid var(--text-tertiary);
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-provenance-confidence.confidence-exact {
  border-left-color: #6fa4ff;
  color: color-mix(in srgb, #6fa4ff 86%, var(--text-primary));
}

.tw-wstats .workspace-provenance-confidence.confidence-observed-native {
  border-left-color: #7fd8c1;
  color: color-mix(in srgb, #7fd8c1 80%, var(--text-primary));
}

.tw-wstats .workspace-provenance-confidence.confidence-correlated-claim {
  border-left-color: var(--text-primary);
  color: var(--text-primary);
}

.tw-wstats .workspace-provenance-paths {
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-provenance-disclosure {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--text-tertiary);
  border-bottom: 1px solid var(--text-tertiary);
  transform: rotate(45deg) translateY(-2px);
}

.tw-wstats .workspace-stats-work-lane {
  display: grid;
  grid-template-columns: 8px minmax(128px, 1.1fr) auto minmax(140px, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 62%, transparent);
}

.tw-wstats .workspace-stats-work-lane-owner {
  min-width: 0;
}

.tw-wstats .workspace-stats-work-lane-owner strong,
.tw-wstats .workspace-stats-work-lane-owner small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-work-lane-owner strong {
  color: var(--text-primary);
  font-size: 10px;
}

.tw-wstats .workspace-stats-work-lane-owner small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 9px;
}

.tw-wstats .workspace-stats-work-lane-count {
  color: var(--text-tertiary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-work-lane-targets {
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-wstats .workspace-stats-work-more {
  padding: 6px 16px 8px;
  border-top: 1px solid color-mix(in srgb, var(--panel-border) 48%, transparent);
  color: var(--text-tertiary);
  font-size: 9px;
}

.tw-wstats .workspace-stats-boundary-copy {
  margin: 0;
  padding: 9px 16px 11px;
  color: var(--text-tertiary);
  font-size: 9px;
  line-height: 1.35;
}

@media (max-width: 880px) {
  .tw-workspace__layout {
    grid-template-areas: 'copy' 'stage';
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .tw-workspace__body {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .tw-wstats .workspace-provenance-row {
    grid-template-columns: 60px minmax(0, 1fr) auto 8px;
  }

  .tw-wstats .workspace-provenance-confidence,
  .tw-wstats .workspace-provenance-paths {
    display: none;
  }

  .tw-wstats .workspace-stats-work-lane {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .tw-wstats .workspace-stats-work-lane-targets {
    grid-column: 2 / -1;
  }
}

/* ---- Concurrency sub-blocks + UltraTask shimmer ---------------------------
 * Short annotations under the lead paragraph. The UltraTask title vendors the
 * app's top-tier chip treatment (08-theme-picker-overrides.css: the
 * text-shimmer-sweep gradient + sparkle field) with one substitution: the
 * provider hue is the page's unified 20s cycle (--tw-cycle-accent) instead of
 * a single seat's brand colour — the same override the approval card and the
 * hero haze already ride, so the word cycles through the whole fleet.
 * ------------------------------------------------------------------------- */
.tw-workspace__sub {
  max-width: 46ch;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border-subtle);
}

.tw-workspace__sub-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.tw-workspace__sub-title.is-ultra {
  position: relative;
  display: inline-block;
}

.tw-workspace__sub-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.tw-ultra-word {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) 92%, var(--text-primary) 8%) 0%,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) 92%, var(--text-primary) 8%) 28%,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) 55%, #ffffff) 50%,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) 92%, var(--text-primary) 8%) 72%,
    color-mix(in srgb, var(--tw-cycle-accent, #346eec) 92%, var(--text-primary) 8%) 100%
  );
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 12.8s is the canonical pace (the hero word runs the same figure via
   * hero-ultratask.css); the original 3.2s read as the old fast chip. */
  animation: tw-text-shimmer-sweep 12.8s linear infinite;
}

@keyframes tw-text-shimmer-sweep {
  0% {
    background-position: 220% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

.tw-ultra-sparkles {
  position: absolute;
  inset: -3px -5px;
  pointer-events: none;
}

.tw-ultra-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 2px 0.5px color-mix(in srgb, var(--tw-cycle-accent, #346eec) 85%, #ffffff),
    0 0 5px 1.5px color-mix(in srgb, var(--tw-cycle-accent, #346eec) 55%, transparent);
  opacity: 0;
  transform: scale(0.3);
  animation: tw-ultra-sparkle 3.6s ease-in-out infinite;
}

@keyframes tw-ultra-sparkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.55;
    transform: scale(1);
  }
}

/* Mirror the app's reduce-motion treatment rather than trusting the blanket
 * kill-switch alone: a frozen shimmer gradient reads as a rendering glitch, so
 * the word parks on a solid cycle-hue mix and the sparkles stay dark. */
@media (prefers-reduced-motion: reduce) {
  .tw-ultra-word {
    animation: none !important;
    background-image: none;
    color: color-mix(in srgb, var(--tw-cycle-accent, #346eec) 88%, var(--text-primary) 12%);
    -webkit-text-fill-color: color-mix(
      in srgb,
      var(--tw-cycle-accent, #346eec) 88%,
      var(--text-primary) 12%
    );
  }

  .tw-ultra-sparkle {
    animation: none !important;
    opacity: 0;
  }
}

/* ---- Catalogue slot in the workspace copy column --------------------------
 * The Model Catalogue notice (shared with the additions section type) folded
 * under the UltraTask block. Same divider rhythm as the sub-blocks; the
 * LiveActivityViewport inside keeps its own collapsed height and edge fades. */
.tw-workspace__catalogue {
  max-width: 46ch;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--panel-border-subtle);
}

/* ---- Catalogue sheet ------------------------------------------------------
 * The full model list opens as a native <dialog> panel instead of expanding
 * the page: the catalogue runs to hundreds of rows, and growing the section
 * in place made the page a few thousand pixels taller. Layout is only set on
 * [open] so the closed dialog keeps display:none. */
dialog.tw-sheet {
  width: min(680px, calc(100vw - 32px));
  max-height: min(82vh, 720px);
  padding: 0;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  color: var(--text-primary);
  box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.6);
}

dialog.tw-sheet[open] {
  display: flex;
  flex-direction: column;
}

.tw-sheet::backdrop {
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.tw-sheet__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--panel-border-subtle);
}

.tw-sheet__title {
  font-size: 14px;
  font-weight: 650;
}

.tw-sheet__body {
  overflow-y: auto;
  padding: 14px 18px 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--panel-border) transparent;
}

/* ---- Latest release inside the shared sheet ----------------------------- */
.tw-changelog__release {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0 16px;
}

.tw-changelog__version {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.02em;
}

.tw-changelog__date {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 11px;
}

.tw-changelog__section {
  padding: 18px 0;
  border-top: 1px solid var(--panel-border-subtle);
}

.tw-changelog__section-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
}

.tw-changelog__list {
  display: grid;
  gap: 11px;
  margin: 0;
  padding-left: 18px;
}

.tw-changelog__item {
  padding-left: 2px;
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

.tw-changelog__item-title {
  color: var(--text-primary);
  font-weight: 620;
}

.tw-changelog__item-body::before {
  content: ' ';
}

.tw-changelog__source {
  display: inline-flex;
  margin-top: 2px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.tw-changelog__source:hover {
  text-decoration: underline;
}

@media (max-width: 560px) {
  .tw-changelog__release {
    display: block;
  }

  .tw-changelog__date {
    display: block;
    margin-top: 4px;
  }
}