/* Frameo API docs, in the frameo.ai page design system (frameo-ai-com blocks.css):
   zinc greys on a near-black ground, no 1px borders (depth comes from surface steps and soft
   shadow), Geist for everything and Geist Mono only for routes and code, and one primary colour,
   Frameo indigo, reserved for the main action, focus and the live signal. */

:root {
  /* Surfaces: zinc scale, ground to raised */
  --bg: #09090b;
  --surface-1: #18181b;
  --surface-2: #27272a;
  --surface-3: #3f3f46;
  --surface-hover: #1f1f23;

  /* Text */
  --text-1: #fafafa;
  --text-2: #d4d4d8;
  --text-3: #a1a1aa;
  --text-4: #909099;
  --text-5: #52525b;

  /* Primary, the only chromatic colour; the hover tint doubles as its readable text colour */
  --primary: #423be5;
  --primary-hover: #7070e5;
  --primary-soft: rgba(66, 59, 229, 0.14);
  --ring: rgba(66, 59, 229, 0.45);

  /* Semantic, used sparingly */
  --danger: #f87171;
  --warning: #fbbf24;

  /* Shape */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation: shadow only */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.5);

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

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 220ms;
  --top-h: 64px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-soft); color: #fff; }

a {
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: rgba(250, 250, 250, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
a:hover { text-decoration-color: var(--text-1); }

:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); border-radius: var(--r-xs); }

.skip { position: absolute; left: -999px; top: 12px; }
.skip:focus { left: 16px; z-index: 10; background: var(--surface-2); color: var(--text-1); padding: 8px 14px; border-radius: var(--r-pill); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.875em; }
:not(pre) > code {
  background: var(--surface-1);
  color: var(--text-2);
  padding: 0.12em 0.42em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

/* ---------- top bar: the overlay glass ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--top-h);
  padding: 0 24px;
  background: rgba(9, 9, 11, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-1);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand img { width: 22px; height: 22px; display: block; }
.brand span { color: var(--text-4); font-weight: 500; }

.top-nav { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.top-nav::-webkit-scrollbar { display: none; }
.top-nav a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.top-nav a:hover { color: var(--text-1); }
.top-nav a[aria-current="page"] { color: var(--text-1); background: var(--surface-1); }

/* Links into the Frameo app, filled in from /docs/site.json */
.app-links { display: flex; align-items: center; gap: 4px; }
.app-links[hidden] { display: none; }
.app-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.app-link.quiet-link { color: var(--text-3); font-weight: 500; }
.app-link.quiet-link:hover { color: var(--text-1); }
.app-link.primary-link { padding: 0 16px; background: var(--primary); color: #fff; }
.app-link.primary-link:hover { background: var(--primary-hover); }
.app-link.primary-link:active { transform: scale(0.98); }
.app-link:focus-visible { border-radius: var(--r-pill); }

.key { position: relative; }
.key-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.key-button:hover { background: var(--surface-3); }
.key-button:active { transform: scale(0.98); }
.key-button:focus-visible { border-radius: var(--r-pill); }
.key-button.has-key::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-hover);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.key-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(380px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 18px;
  background: var(--surface-1);
  box-shadow: var(--shadow-3);
}
.key-panel > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.key-panel input[type="password"] { font-family: var(--font-mono); font-size: 13px; }
.key-panel .check { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; font-weight: 400; color: var(--text-2); cursor: pointer; }
.key-panel .hint { margin: 12px 0 16px; font-size: 13px; color: var(--text-4); }
.key-panel .hint.key-get { margin-top: -8px; }
.key-panel .hint.key-get[hidden] { display: none; }
.key-actions { display: flex; gap: 8px; }
.key-status { min-height: 1.2em; margin: 12px 0 0; font-size: 13px; color: var(--text-3); }

/* ---------- controls ---------- */

input[type="text"], input[type="password"], input[type="url"], input[type="number"], select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
  outline: none;
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--text-4); }
input:focus, select:focus, textarea:focus { background: var(--surface-3); box-shadow: 0 0 0 2px rgba(250, 250, 250, 0.35); border-radius: var(--r-sm); }
textarea { resize: vertical; min-height: 104px; }
select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* A switch, as the design system's: off is zinc, on is white with a dark knob */
.switch, .check input[type="checkbox"] {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--dur) var(--ease);
}
.switch::after, .check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.switch[aria-checked="true"], .check input[type="checkbox"]:checked { background: var(--text-1); }
.switch[aria-checked="true"]::after, .check input[type="checkbox"]:checked::after { background: var(--bg); transform: translateX(14px); }
.switch:focus-visible, .check input[type="checkbox"]:focus-visible { border-radius: var(--r-pill); }
.switch-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }

button { font: inherit; cursor: pointer; }
button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
button.primary:hover { background: var(--primary-hover); }
button.primary:active { transform: scale(0.98); }
button.primary:focus-visible { border-radius: var(--r-pill); }
button.primary:disabled { opacity: 0.45; cursor: not-allowed; transform: none; background: var(--primary); }
.key-actions button.primary { height: 36px; padding: 0 16px; font-size: 14px; }

button.quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
button.quiet:hover { background: var(--surface-3); }
button.quiet:active { transform: scale(0.98); }
button.quiet:focus-visible { border-radius: var(--r-pill); }
button.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-1);
  text-decoration: underline;
  text-decoration-color: rgba(250, 250, 250, 0.3);
  text-underline-offset: 3px;
}
button.link:hover { text-decoration-color: var(--text-1); }

/* ---------- reading layout ---------- */

.frame { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: calc(100vh - var(--top-h)); }
.frame.full { grid-template-columns: minmax(0, 1fr); }
.frame.full .side { display: none; }

.side {
  position: sticky;
  top: var(--top-h);
  height: calc(100vh - var(--top-h));
  padding: 24px 14px 40px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-2) transparent;
}
.side h2 { margin: 24px 10px 6px; font-size: 13px; font-weight: 500; color: var(--text-4); letter-spacing: 0; }
.side h2:first-child { margin-top: 0; }
.side a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px;
  overflow-wrap: anywhere;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.side a:hover { color: var(--text-1); background: var(--surface-1); }
.side a[aria-current="page"] { color: var(--text-1); background: var(--surface-1); font-weight: 500; }

main { min-width: 0; padding: 48px 56px 120px; }
main:focus { outline: none; box-shadow: none; }

.doc { display: grid; grid-template-columns: minmax(0, 70ch) minmax(0, 1fr); gap: 56px; align-items: start; }
.doc > .prose { min-width: 0; }
.doc > .aside { position: sticky; top: calc(var(--top-h) + 40px); min-width: 0; }

.prose h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--text-1);
}
.prose .lede { margin: 0 0 40px; max-width: 62ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text-3); text-wrap: pretty; }
.prose h2 { margin: 52px 0 12px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-1); }
.prose h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); }
.prose h4 { margin: 22px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-1); }
.prose h4 a, .op td a { font-family: var(--font-mono); font-size: 0.92em; }
.prose p, .prose li { color: var(--text-3); text-wrap: pretty; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--text-5); }
.prose strong { color: var(--text-1); font-weight: 600; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; margin: 0 0 24px; padding-left: 46px; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.steps > li > strong { display: block; margin-bottom: 2px; font-size: 17px; letter-spacing: -0.01em; color: var(--text-1); }

/* ---------- tables: tiles separated by the ground, not lines ---------- */

.table-wrap { margin: 0 0 24px; overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; text-align: left; }
th { padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text-4); white-space: nowrap; vertical-align: bottom; }
td { padding: 14px 16px; background: var(--surface-1); color: var(--text-3); vertical-align: top; transition: background var(--dur) var(--ease); }
td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--text-2); }
td:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
td:only-child { border-radius: var(--r-sm); }
tbody tr + tr td { border-top: 4px solid var(--bg); }
td .name { font-family: var(--font-mono); font-size: 13px; color: var(--text-1); }
td .req { margin-left: 8px; font-size: 12px; color: var(--text-4); }
.values { display: flex; flex-wrap: wrap; gap: 4px; }
.values code, td .values code { background: var(--surface-2); color: var(--text-2); font-size: 12px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; overflow-wrap: normal; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-hover); }

/* ---------- code ---------- */

.code { margin: 0 0 24px; border-radius: var(--r-md); background: var(--surface-1); overflow: hidden; }
.code-tabs { display: flex; align-items: center; gap: 2px; padding: 8px 8px 0; }
.code-tabs button {
  height: 28px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.code-tabs button:hover { color: var(--text-1); }
.code-tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--text-1); box-shadow: var(--shadow-1); }
.code-tabs .copy { margin-left: auto; color: var(--text-4); }
.code pre { margin: 0; padding: 14px 18px 18px; color: var(--text-2); font-size: 13px; line-height: 1.6; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.code .caption { margin: 0; padding: 10px 18px 0; font-size: 13px; color: var(--text-4); }

/* ---------- callouts ---------- */

.note { margin: 0 0 20px; padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-1); color: var(--text-3); font-size: 15px; }
.note.warn { background: rgba(251, 191, 36, 0.08); }

/* ---------- models ---------- */

.model-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.model-head h1 { margin: 0; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-1); color: var(--text-2); font-size: 13px; font-weight: 500; }
.chip.plain { color: var(--text-3); }
.endpoint { margin: 0 0 20px; font-family: var(--font-mono); font-size: 14px; color: var(--text-3); overflow-wrap: anywhere; }
.endpoint b { margin-right: 8px; color: var(--text-1); font-weight: 600; }
.price-line { margin: 0 0 24px; padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-1); color: var(--text-3); font-size: 15px; }

/* ---------- reference ---------- */

.op { padding: 36px 0 4px; }
.op h3 { margin: 0 0 8px; font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: 0; overflow-wrap: anywhere; }
.method { display: inline-block; min-width: 60px; font-weight: 600; color: var(--text-1); }

/* ---------- playground ---------- */

/* Two panes, each scrolling on its own so Generate and the result stay on screen: controls on
   the raised surface, the result on the ground. */
.play { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); height: calc(100vh - var(--top-h)); margin: -48px -56px -120px; }

.play-form { padding: 28px 24px 0; background: var(--surface-1); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
.play-form h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.play-form .sub { margin: 0 0 22px; font-size: 14px; color: var(--text-4); }

.field { margin: 0 0 18px; }
.field > label, .field > .label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.field .hint { font-size: 12px; font-weight: 400; color: var(--text-4); }
.field .help { margin: 7px 0 0; font-size: 12.5px; color: var(--text-4); }
.counter { font-size: 12px; font-weight: 400; color: var(--text-4); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--danger); }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-sm); background: var(--surface-2); }
.segmented button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented button:hover { color: var(--text-1); }
.segmented button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: var(--shadow-1); }

.media-row { display: flex; gap: 8px; align-items: center; }
.media-row input { flex: 1; min-width: 0; }
.media-row .upload { position: relative; overflow: hidden; flex: none; border-radius: var(--r-pill); }
.media-row .upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-row .upload:focus-within button { box-shadow: 0 0 0 3px var(--ring); }
.refs { display: grid; gap: 8px; }

.ruler { padding-top: 2px; }
.ruler input[type="range"] { width: 100%; margin: 6px 0 0; accent-color: var(--text-1); }
.ticks { display: flex; justify-content: space-between; margin-top: 2px; font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }

details.advanced { margin: 6px 0 18px; }
details.advanced summary { margin-bottom: 14px; font-size: 13px; font-weight: 500; color: var(--text-3); cursor: pointer; }
details.advanced summary:hover { color: var(--text-1); }

.run-bar {
  position: sticky;
  bottom: 0;
  margin: 8px -24px 0;
  padding: 24px;
  background: linear-gradient(to bottom, rgba(24, 24, 27, 0), var(--surface-1) 22px);
}
.cost { min-height: 1.4em; margin: 0 0 12px; font-size: 13.5px; color: var(--text-3); }
.cost b { color: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.cost.error { color: var(--danger); }
.run-bar button.primary { width: 100%; }

/* The stage: the result on the ground, in a screen without a bezel that takes the shape of the
   frame asked for. */
.stage { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 32px 32px; background: var(--bg); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--surface-2) transparent; }
.viewfinder-wrap { display: grid; place-items: center; width: 100%; }
/* Sized from script to the requested aspect ratio; these are the fallback before it runs. */
.viewfinder {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 640px);
  height: 360px;
  border-radius: var(--r-lg);
  background: var(--surface-1);
  overflow: hidden;
}
/* Animated only after the first layout, so the screen reshapes but doesn't grow in on load. */
.viewfinder.ready { transition: width 320ms var(--ease), height 320ms var(--ease); }
.viewfinder video, .viewfinder img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.frame-label { padding: 0 20px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-4); }
.frame-label b { display: block; margin-bottom: 6px; font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); }

/* The live signal: the one place the stage uses the primary colour. */
.rec {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 500;
}
.rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-hover); box-shadow: 0 0 0 3px var(--primary-soft); animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* Length: one tick a second up to the model's longest, filled to the length asked for. */
.timeline { display: flex; align-items: center; gap: 14px; max-width: 100%; margin: -4px auto 0; }
.timeline[hidden] { display: none; }
.ruler-track {
  position: relative;
  flex: 1;
  height: 10px;
  background-image: linear-gradient(to right, var(--surface-3) 1px, transparent 1px);
  background-repeat: repeat-x;
  background-position: left center;
}
.timeline-fill { position: absolute; left: 0; top: 4px; height: 2px; width: 0; border-radius: 2px; background: var(--text-2); transition: width 220ms var(--ease); }
.timecode { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--text-4); font-variant-numeric: tabular-nums; }

#pg-error:empty, .outputs-meta:empty, .recent:empty { display: none; }

.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13.5px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.status-line .state { color: var(--text-1); font-weight: 600; }
.status-line .state.running, .status-line .state.queued { color: var(--primary-hover); }
.status-line .state.failed, .status-line .state.cancelled { color: var(--danger); }
.status-line code { padding: 0; background: transparent; color: var(--text-4); }
.stage-error { padding: 12px 14px; border-radius: var(--r-sm); background: rgba(248, 113, 113, 0.1); color: var(--text-1); font-size: 14px; }
.outputs-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--text-4); }

.recent h2 { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--text-4); }
.recent ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.recent button {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 13.5px;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.recent button:hover { background: var(--surface-1); }
.recent .muted { color: var(--text-4); }
.empty { font-size: 13.5px; color: var(--text-4); }

.noscript { padding: 24px; color: var(--text-3); }

/* ---------- small screens ---------- */

@media (max-width: 1180px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .doc > .aside { position: static; }
}

@media (max-width: 860px) {
  .top { flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; height: auto; padding: 10px 16px 0; }
  .top-nav { order: 3; flex-basis: 100%; margin: 0 -14px; padding-bottom: 8px; }
  .app-links { margin-left: auto; }
  .app-links .quiet-link { display: none; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  main { padding: 32px 16px 80px; }
  .play { grid-template-columns: minmax(0, 1fr); height: auto; margin: -32px -16px -80px; }
  .play-form { overflow: visible; }
  .stage { overflow: visible; padding: 24px 16px 32px; }
  .run-bar { position: static; }
  .prose h1 { font-size: 32px; }
}

/* A phone has room for the brand and the key control: the key panel offers the "Get one" link. */
@media (max-width: 520px) {
  .app-links { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .viewfinder.ready, .timeline-fill, .switch, .switch::after { transition: none; }
  .rec::before { animation: none; }
}