:root {
  --bg: #0B0B0C;
  --surface: #171718;
  --surface-2: #1E1E20;
  --surface-3: #262628;
  --line: #29292C;
  --line-hi: #3A3A3E;
  --ink: #F3F3F2;
  --dim: #A7A7AA;
  --faint: #858589;
  --teal: #D0D0D2;
  --teal-ink: #1E1E20;
  --teal-wash: rgba(208, 208, 210, .1);
  --sand: #B8B8BC;
  --danger: #A7A7AA;
  --sans: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --serif: Fraunces, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --nav-h: 54px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  min-height: 100vh;
  margin: 0;
  padding-top: var(--nav-h);
  background:
    radial-gradient(circle at 84% 0%, rgba(208, 208, 210, .07), transparent 28rem),
    radial-gradient(circle at 15% 13%, rgba(184, 184, 188, .045), transparent 26rem),
    var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
::selection { background: var(--teal); color: var(--teal-ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
nav.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 15px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background: rgba(11, 11, 12, .84);
  backdrop-filter: blur(20px) saturate(1.15);
}
nav.nav .nav-links { display: flex; align-items: center; gap: 2px; }
nav.nav .nav-links a {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--dim);
  text-decoration: none;
  font-size: 12px;
  font-weight: 550;
}
nav.nav .nav-links a:hover { background: rgba(255, 255, 255, .05); color: var(--ink); }
nav.nav .nav-links a.active { background: var(--ink); color: #171718; }
nav.nav .nav-right { display: flex; align-items: center; margin-left: auto; }
/* 🔴 Do NOT `display:none` the Create launcher on this page. nav.css gives
   .saga-create the margin-left:auto that is the SINGLE auto margin in the bar, and
   pairs it with `.saga-create + .nav-right { margin-left: 0 !important }` so the two
   do not split the free space. A display:none element still matches that sibling
   selector, so hiding the launcher left the override in force with nothing to push
   against: Sign out and the balance chip collapsed 708px to the left, flush against
   the links, with 721px dead to their right (measured 1440px — chip left edge 612
   here vs 1320 on home / image / library / director). Keeping it visible is also what
   gives this page a route into the Creation Desk. */
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .025);
  color: var(--dim);
  cursor: pointer;
  font: 600 10px/1 var(--mono);
}
.nav-button:hover { border-color: var(--line-hi); color: var(--ink); }
.nav-button svg { width: 13px; }
main { width: min(1440px, 100%); margin: 0 auto; padding: 46px 28px 90px; }
.platform-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 550px);
  align-items: end;
  gap: 70px;
  min-height: 280px;
  padding: 22px 8px 44px;
}
.eyebrow {
  margin: 0 0 12px;
  color: var(--teal);
  font: 700 9px/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
h1, h2 { font-family: var(--serif); font-weight: 540; }
h1 { max-width: 760px; margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: .98; letter-spacing: -.045em; }
.hero-copy { max-width: 670px; margin: 22px 0 0; color: var(--dim); font-size: 16px; line-height: 1.65; }
.platform-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.platform-stats article { min-width: 0; padding: 22px 16px; border-right: 1px solid var(--line); }
.platform-stats article:last-child { border-right: 0; }
.platform-stats strong, .platform-stats span, .platform-stats small { display: block; }
.platform-stats strong { margin-bottom: 14px; color: var(--teal); font: 500 31px/1 var(--serif); }
.platform-stats span { font-weight: 650; }
.platform-stats small { margin-top: 3px; overflow: hidden; color: var(--faint); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.platform-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .012);
  list-style: none;
}
.platform-flow li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 3px 10px;
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid var(--line);
}
.platform-flow li:last-child { border-right: 0; }
.platform-flow li > span { grid-row: 1 / 3; color: var(--teal); font: 700 8px var(--mono); }
.platform-flow strong { font-size: 11px; }
.platform-flow small { overflow: hidden; color: var(--faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.platform-tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  padding: 1px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  background: rgba(41, 41, 44, .65);
  backdrop-filter: blur(18px);
}
.platform-tabs button {
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 15px 18px;
  border: 0;
  border-radius: 15px;
  background: var(--surface);
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.platform-tabs button[aria-selected="true"] { background: var(--ink); color: #171718; }
.platform-tabs button > svg { width: 22px; }
.platform-tabs button > span { display: grid; gap: 2px; }
.platform-tabs strong { font-size: 13px; }
.platform-tabs small { color: inherit; font: 8px var(--mono); opacity: .62; }
.platform-panel {
  min-height: 620px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  background: rgba(16, 16, 17, .74);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .24);
}
.agents-panel { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
.agent-sidebar { min-width: 0; padding: 20px 14px; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
.panel-title, .editor-heading, .runner-head, .setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.panel-title { padding: 0 6px 16px; }
.panel-title > span, .runner-head > span:first-child, .setup-head > span { display: grid; gap: 3px; }
.panel-title small, .runner-head small, .setup-head small { color: var(--faint); font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.panel-title strong, .runner-head strong, .setup-head strong { font-size: 13px; }
.icon-button, .quiet-button, .primary-button, .copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 650;
}
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface-2); }
.icon-button svg, .quiet-button svg, .primary-button svg, .copy-button svg { width: 14px; height: 14px; }
.agent-list { display: grid; gap: 5px; }
.agent-card {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--dim);
  text-align: left;
  cursor: pointer;
}
.agent-card:hover { background: rgba(255, 255, 255, .035); }
.agent-card.selected { border-color: rgba(208, 208, 210, .22); background: var(--teal-wash); color: var(--ink); }
.agent-card strong, .agent-card small { display: block; overflow: hidden; text-overflow: ellipsis; }
.agent-card strong { margin-bottom: 4px; font-size: 12px; white-space: nowrap; }
.agent-card small { color: var(--faint); font-size: 10px; line-height: 1.35; }
.agent-card b { display: inline-block; margin-top: 8px; color: var(--teal); font: 700 7px var(--mono); letter-spacing: .08em; }
.agent-editor { min-width: 0; padding: 28px 32px 40px; }
.editor-heading { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.editor-heading h2 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.editor-actions { display: flex; gap: 8px; }
.quiet-button, .primary-button, .copy-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); background: var(--surface-2); font-size: 11px; }
.quiet-button:hover, .copy-button:hover { border-color: var(--line-hi); background: var(--surface-3); }
.quiet-button.danger { color: var(--danger); }
.primary-button { border-color: var(--teal); background: var(--teal); color: var(--teal-ink); }
.primary-button:hover { filter: brightness(1.06); }
.primary-button:disabled, .quiet-button:disabled { cursor: wait; opacity: .48; }
.primary-button.wide { width: 100%; }
form { display: grid; gap: 18px; padding: 24px 0; }
/* 🔴 minmax(0, …), not minmax(180px, …). A track minimum is a HARD floor, so these two
   demanded 180 + 260 + 14 = 454px however narrow the column got. .agents-panel stays
   two-column down to 720px and leaves the editor 369px at 721 — measured 24px of
   horizontal scroll on the document at 721px, 15px at 730, 5px at 740. Flooring at 0
   keeps the .8/1.2 split everywhere it already fits and simply lets it shrink where it
   does not, so no future panel width can reintroduce this. Same defect as the create
   sheet and the home hero: a grid track's automatic minimum is min-content. */
.field-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.field-grid.long { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Not overflowing is not the same as usable: at 721-759 the two tracks resolve to about
   148px and 221px, which is not a form you can fill in. Stack for exactly the band where
   the two-column panel leaves the editor too narrow — below 721 the ≤720 block already
   stacks it, and from 760 up the side-by-side pair fits properly. */
@media (min-width: 721px) and (max-width: 759px) {
  .field-grid, .field-grid.long { grid-template-columns: minmax(0, 1fr); }
}
label { display: grid; gap: 7px; min-width: 0; }
label > span, fieldset legend { color: var(--dim); font: 650 10px var(--mono); }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: var(--surface);
  color: var(--ink);
}
input { height: 42px; padding: 0 12px; }
textarea { min-height: 94px; padding: 11px 12px; resize: vertical; line-height: 1.55; }
input:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(208, 208, 210, .06); }
input::placeholder, textarea::placeholder { color: #58585E; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset > p { margin: 5px 0 10px; color: var(--faint); font-size: 11px; }
.tool-checks { display: flex; flex-wrap: wrap; gap: 7px; }
.tool-check, .scope-check {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.tool-check { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.tool-check:has(input:checked) { border-color: rgba(208, 208, 210, .4); background: var(--teal-wash); color: var(--teal); }
.tool-check input, .scope-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.tool-check span { color: inherit; text-transform: capitalize; }
.skill-fieldset {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(208, 208, 210, .025);
}
.skill-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 5px 0 12px;
}
.skill-heading p { max-width: 620px; margin: 0; color: var(--faint); font-size: 11px; line-height: 1.5; }
.skill-heading b {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal);
  font: 700 7px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.skill-card {
  position: relative;
  display: grid;
  grid-template-columns: 16px 32px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s, background .16s, opacity .16s;
}
.skill-card:hover { border-color: var(--line-hi); }
.skill-card:has(input:checked) { border-color: rgba(208, 208, 210, .45); background: var(--teal-wash); }
.skill-card:has(input:disabled) { cursor: not-allowed; opacity: .42; }
.skill-card input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.skill-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .018);
  color: var(--faint);
}
.skill-card:has(input:checked) .skill-icon { border-color: rgba(208, 208, 210, .32); color: var(--teal); }
.skill-icon svg { width: 15px; height: 15px; }
.skill-copy { display: grid; gap: 3px; min-width: 0; }
.skill-copy strong { color: var(--ink); font-size: 11px; }
.skill-copy small { color: var(--faint); font-size: 9px; line-height: 1.4; }
.skill-check { color: var(--teal); opacity: 0; }
.skill-card:has(input:checked) .skill-check { opacity: 1; }
.skill-check svg { width: 13px; height: 13px; }
.skill-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 11px 0 0;
  color: var(--faint);
  font-size: 9px;
}
.skill-note svg { width: 13px; height: 13px; color: var(--teal); }
.team-fieldset {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(208, 208, 210, .025);
}
.collaborator-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.collaborator-card {
  position: relative;
  display: grid;
  grid-template-columns: 18px 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 66px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.collaborator-card:has(input:checked) {
  border-color: rgba(208, 208, 210, .45);
  background: var(--teal-wash);
}
.collaborator-card.unavailable { opacity: .45; cursor: not-allowed; }
.collaborator-card input { width: 15px; height: 15px; margin: 0; accent-color: var(--teal); }
.collaborator-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(208, 208, 210, .2);
  border-radius: 10px;
  background: rgba(208, 208, 210, .08);
  color: var(--teal);
  font: 700 9px var(--mono);
}
.collaborator-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.collaborator-copy strong,
.collaborator-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collaborator-copy strong { color: var(--ink); font-size: 11px; }
.collaborator-copy small { color: var(--faint); font-size: 9px; }
.collaborator-card > b {
  position: absolute;
  top: 7px;
  right: 7px;
  color: var(--teal);
  font: 700 6px var(--mono);
  letter-spacing: .07em;
}
.team-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0 !important;
  color: var(--teal) !important;
  font: 650 8px var(--mono);
}
.team-note svg { width: 12px; height: 12px; }
.team-empty {
  grid-column: 1 / -1;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 9px;
  color: var(--faint);
  font-size: 10px;
  text-align: center;
}
.knowledge-fieldset {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .012);
}
.knowledge-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.knowledge-heading > span { display: grid; gap: 3px; }
.knowledge-heading strong { color: var(--ink); font-size: 11px; }
.knowledge-heading small { color: var(--faint); font-size: 9px; }
.knowledge-heading > b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--teal);
  font: 700 7px var(--mono);
  letter-spacing: .06em;
}
.knowledge-heading > b svg { width: 12px; height: 12px; }
.knowledge-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 76px;
  padding: 13px;
  border: 1px dashed var(--line-hi);
  border-radius: 10px;
  background: var(--bg);
  color: var(--dim);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.knowledge-drop:hover,
.knowledge-drop.dragover {
  border-color: var(--teal);
  background: var(--teal-wash);
  color: var(--ink);
}
.knowledge-drop > svg { width: 20px; color: var(--teal); }
.knowledge-drop > span { display: grid; gap: 3px; }
.knowledge-drop strong { font-size: 10px; }
.knowledge-drop small { color: var(--faint); font: 8px var(--mono); }
.knowledge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.knowledge-file {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
}
.knowledge-file.pending { border-style: dashed; }
.knowledge-file > svg {
  width: 16px;
  height: 16px;
  margin: 0 auto;
  color: var(--teal);
}
.knowledge-file > span { display: grid; gap: 2px; min-width: 0; }
.knowledge-file strong,
.knowledge-file small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledge-file strong { font-size: 10px; }
.knowledge-file small { color: var(--faint); font: 7px var(--mono); }
.knowledge-file button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}
.knowledge-file button:hover { border-color: var(--line); color: var(--danger); }
.knowledge-file button svg { width: 13px; height: 13px; }
.knowledge-usage {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--faint);
  font: 7px var(--mono);
}
.knowledge-usage span:first-child { color: var(--teal); }
.agent-runner { overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.no-spend { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font: 650 8px var(--mono); }
.no-spend svg { width: 13px; }
.agent-thread {
  display: grid;
  gap: 12px;
  max-height: 610px;
  min-height: 260px;
  margin-top: 16px;
  padding: 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    radial-gradient(circle at 82% 0, rgba(208, 208, 210, .055), transparent 34%),
    var(--bg);
  scroll-behavior: smooth;
  scrollbar-color: var(--line-hi) transparent;
}
.thread-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 220px;
  color: var(--faint);
  text-align: center;
}
.thread-empty > svg { width: 25px; height: 25px; margin-bottom: 11px; color: var(--teal); }
.thread-empty strong { color: var(--ink); font-size: 12px; }
.thread-empty small { max-width: 410px; margin-top: 5px; font-size: 9px; line-height: 1.5; }
.thread-empty.loading > svg { animation: agent-spin .85s linear infinite; }
.agent-turn {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  max-width: min(86%, 760px);
}
.agent-turn.user-turn { justify-self: end; grid-template-columns: minmax(0, 1fr) 34px; }
.agent-turn.user-turn .turn-avatar { grid-column: 2; }
.agent-turn.user-turn .turn-body { grid-row: 1; grid-column: 1; background: rgba(255, 255, 255, .052); }
.agent-turn.assistant-turn { justify-self: start; }
.turn-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(208, 208, 210, .22);
  border-radius: 10px;
  background: var(--teal-wash);
  color: var(--teal);
  font: 750 8px var(--mono);
}
.user-turn .turn-avatar { border-color: var(--line-hi); background: var(--surface-2); color: var(--dim); }
.turn-body {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(208, 208, 210, .17);
  border-radius: 4px 12px 12px;
  background: var(--teal-wash);
}
.user-turn .turn-body { border-color: var(--line); border-radius: 12px 4px 12px 12px; }
.assistant-turn.failed .turn-body { border-color: rgba(167, 167, 170, .22); background: rgba(167, 167, 170, .045); }
.turn-body > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.turn-body > header strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.turn-body > header time { flex: 0 0 auto; color: var(--faint); font: 7px var(--mono); text-transform: uppercase; }
.turn-body > p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.58; white-space: pre-wrap; }
.thinking-line { display: flex; align-items: center; gap: 5px; min-height: 24px; color: var(--faint); font-size: 9px; }
.thinking-line i { width: 5px; height: 5px; border-radius: 50%; background: var(--teal); animation: agent-pulse 1.1s ease-in-out infinite; }
.thinking-line i:nth-child(2) { animation-delay: .16s; }
.thinking-line i:nth-child(3) { animation-delay: .32s; }
.thinking-line span { margin-left: 5px; }
.agent-composer { display: block; margin-top: 12px; }
.agent-runner textarea { min-height: 92px; margin: 0; background: var(--bg); }
.runner-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 10px; }
#agentStatus { margin-right: auto; color: var(--faint); font: 9px var(--mono); }
.send-hint { color: var(--faint); font: 8px var(--mono); }
.send-hint kbd { padding: 3px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--dim); font: inherit; }
.team-output {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(208, 208, 210, .16);
}
.team-output > header {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
}
.team-output > header > svg { width: 17px; color: var(--teal); }
.team-output > header > span { display: grid; gap: 2px; }
.team-output > header strong { font-size: 11px; }
.team-output > header small { color: var(--faint); font-size: 9px; }
.team-output details {
  border: 1px solid rgba(208, 208, 210, .14);
  border-radius: 9px;
  background: rgba(11, 11, 12, .32);
}
.team-output summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  cursor: pointer;
  list-style: none;
}
.team-output summary::-webkit-details-marker { display: none; }
.team-output summary > span:not(.collaborator-avatar) { display: grid; gap: 2px; min-width: 0; }
.team-output summary strong { font-size: 10px; }
.team-output summary small { color: var(--faint); font-size: 8px; }
.team-output details > p {
  padding: 0 11px 11px 53px;
  color: var(--dim);
  font-size: 10px;
  line-height: 1.5;
}
.recipe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(208, 208, 210, .15); }
.recipe code { color: var(--teal); font: 9px var(--mono); text-transform: uppercase; }
@keyframes agent-spin { to { transform: rotate(360deg); } }
@keyframes agent-pulse { 0%, 65%, 100% { opacity: .28; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-2px); } }
.connection-panel { grid-template-columns: minmax(0, 1fr) minmax(400px, 610px); }
.connection-panel:not([hidden]) { display: grid; }
.connection-copy { padding: 54px clamp(28px, 5vw, 74px); border-right: 1px solid var(--line); }
.connection-copy h2 { max-width: 650px; margin: 0; font-size: clamp(31px, 4vw, 51px); line-height: 1.05; letter-spacing: -.035em; }
.connection-copy > p:not(.eyebrow) { max-width: 640px; margin: 18px 0 0; color: var(--dim); font-size: 15px; line-height: 1.65; }
.endpoint { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 34px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.endpoint > span { display: grid; gap: 6px; min-width: 0; }
.endpoint small { color: var(--faint); font: 700 8px var(--mono); text-transform: uppercase; }
.endpoint code { overflow: hidden; color: var(--teal); font: 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.copy-button { min-height: 33px; padding: 0 10px; flex: 0 0 auto; color: var(--dim); font-size: 9px; }
.safety-flow { display: grid; gap: 0; margin: 34px 0 0; padding: 0; list-style: none; }
.safety-flow li { display: grid; grid-template-columns: 48px 1fr; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.safety-flow li > span { color: var(--teal); font: 9px var(--mono); }
.safety-flow p { display: grid; gap: 2px; margin: 0; color: var(--faint); font-size: 11px; }
.safety-flow strong { color: var(--ink); font-size: 13px; }
.connection-setup { display: grid; align-content: start; gap: 12px; padding: 34px 28px; background: rgba(255, 255, 255, .012); }
.setup-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.setup-card > label { margin-top: 18px; }
.live-badge, .beta-badge { padding: 5px 8px; border-radius: 999px; color: var(--teal); background: var(--teal-wash); font: 750 7px var(--mono); letter-spacing: .08em; }
.beta-badge { color: var(--sand); background: rgba(184, 184, 188, .1); }
.scope-fieldset { margin: 18px 0; }
.scope-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.scope-check { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.scope-check span { overflow: hidden; color: var(--dim); font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.secret-result { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid rgba(208, 208, 210, .28); border-radius: 10px; background: var(--teal-wash); }
.secret-result > div { display: grid; gap: 2px; }
.secret-result small { color: var(--dim); font-size: 10px; }
.secret-result code { overflow: hidden; padding: 9px; border-radius: 7px; background: rgba(0, 0, 0, .25); color: var(--teal); font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
pre { overflow: auto; margin: 18px 0 11px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: #D0D0D2; font: 10px/1.65 var(--mono); white-space: pre; }
.bridge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.bridge-grid article { display: grid; grid-template-columns: 28px 1fr; gap: 4px 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.bridge-grid svg { grid-row: 1 / 3; width: 20px; color: var(--teal); }
.bridge-grid strong { font-size: 12px; }
.bridge-grid small { color: var(--faint); font-size: 9px; }
.token-list { display: grid; gap: 7px; margin-top: 16px; }
.signature-example {
  margin-top: 26px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.signature-example pre { margin: 13px 0 9px; }
.signature-example > small { color: var(--faint); font-size: 9px; line-height: 1.5; }
.reliability-example { margin-top: 18px; }
.reliability-example pre { white-space: pre-wrap; }
.webhook-event-list .scope-check span { font-size: 7px; }
.webhook-list,
.delivery-list { display: grid; gap: 8px; margin-top: 16px; }
.webhook-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.webhook-row.disabled { opacity: .58; }
.webhook-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.webhook-row-main > span { display: grid; gap: 3px; min-width: 0; }
.webhook-row-main strong,
.webhook-row-main code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.webhook-row-main strong { font-size: 11px; }
.webhook-row-main code { color: var(--faint); font: 8px var(--mono); }
.webhook-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal);
  font: 700 7px var(--mono);
  text-transform: uppercase;
}
.webhook-state::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.webhook-row.disabled .webhook-state { background: rgba(255, 255, 255, .05); color: var(--faint); }
.webhook-event-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.webhook-event-chips span {
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--faint);
  font: 7px var(--mono);
}
.webhook-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.webhook-actions button {
  min-height: 29px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font: 8px var(--mono);
}
.webhook-actions button:hover { border-color: var(--line-hi); color: var(--ink); }
.webhook-actions button[data-delete-webhook] { color: var(--danger); }
.delivery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}
.delivery-row > span:first-child { display: grid; gap: 3px; min-width: 0; }
.delivery-row strong,
.delivery-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.delivery-row strong { font: 9px var(--mono); }
.delivery-row small { color: var(--faint); font-size: 8px; }
.delivery-status {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(184, 184, 188, .1);
  color: var(--sand);
  font: 700 7px var(--mono);
  text-transform: uppercase;
}
.delivery-status.delivered { background: var(--teal-wash); color: var(--teal); }
.delivery-status.exhausted { background: rgba(167, 167, 170, .09); color: var(--danger); }
.delivery-row button {
  grid-column: 2;
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  font: 7px var(--mono);
}
.plugin-download-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.plugin-download-grid article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
}
.plugin-download-grid article > span { display: grid; min-width: 0; }
.plugin-download-grid article > span strong { font-size: 11px; }
.plugin-download-grid article > span small { overflow: hidden; color: var(--faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.plugin-download-grid .package-version {
  grid-column: 1 / -1;
  display: block;
  color: var(--faint);
  font: 8px var(--mono);
  letter-spacing: .04em;
}
.editor-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  font: 750 12px var(--mono);
}
.figma-mark { color: #D0D0D2; background: rgba(208, 208, 210, .08); }
.photoshop-mark { color: #B8B8BC; background: rgba(167, 167, 170, .09); }
.premiere-mark { color: #B8B8BC; background: rgba(133, 133, 137, .1); }
.after-effects-mark { color: #B8B8BC; background: rgba(133, 133, 137, .11); }
.resolve-mark { color: #D0D0D2; background: rgba(167, 167, 170, .09); }
.final-cut-mark { color: #B8B8BC; background: rgba(133, 133, 137, .09); }
.download-button {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--dim);
  font: 650 9px var(--mono);
  text-decoration: none;
}
.download-button svg { width: 12px; height: 12px; margin-right: 6px; }
.download-button:hover { border-color: var(--teal); color: var(--teal); }
.preview-note { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; color: var(--faint); font-size: 9px; }
.preview-note svg { flex: 0 0 auto; width: 13px; color: var(--teal); }
.plugin-download-grid details {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.plugin-download-grid summary {
  color: var(--dim);
  cursor: pointer;
  font: 650 9px var(--mono);
  list-style-position: inside;
}
.install-steps {
  display: grid;
  gap: 7px;
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
}
.install-steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: start;
}
.install-steps li > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--teal);
  font: 700 8px var(--mono);
}
.install-steps p { display: grid; gap: 2px; margin: 0; color: var(--dim); font-size: 9px; }
.install-steps p strong { color: var(--ink); font-size: 10px; }
.install-steps p small { color: var(--faint); font-size: 9px; }
.install-steps code { color: var(--teal); font: 9px var(--mono); }
.install-steps.compact { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.token-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.token-row > span { display: grid; gap: 2px; min-width: 0; }
.token-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.token-row small { color: var(--faint); font: 8px var(--mono); }
.token-row button { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--danger); cursor: pointer; font: 8px var(--mono); }
.empty { padding: 18px; color: var(--faint); font-size: 11px; text-align: center; }
/* ── MCP panel ──────────────────────────────────────────────────────────────
   Same tokens and components as the other panels; different composition,
   because this one is a two-step setup rather than reference copy beside a
   form. Order is load-bearing: the key has to exist before the snippet in
   step 2 is worth copying, so the steps read left to right. */
.mcp-panel:not([hidden]) { display: block; }
.mcp-panel { padding: 40px clamp(18px, 3vw, 44px) 34px; }
.mcp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 470px);
  align-items: end;
  gap: 20px 48px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.mcp-head > div { min-width: 0; }
.mcp-head h2 { max-width: 620px; margin: 0; font-size: clamp(28px, 3.1vw, 43px); line-height: 1.04; letter-spacing: -.035em; }
.mcp-head p { max-width: 640px; margin: 14px 0 0; color: var(--dim); font-size: 14px; line-height: 1.62; }
.mcp-head .endpoint { margin-top: 0; }
.mcp-clients { display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 18px; }
.mcp-clients button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--dim);
  cursor: pointer;
  text-align: left;
}
.mcp-clients button:hover { border-color: var(--line-hi); color: var(--ink); }
.mcp-clients button[aria-selected="true"] { border-color: rgba(208, 208, 210, .45); background: var(--teal-wash); color: var(--ink); }
.mcp-clients b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid var(--line-hi);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  color: var(--teal);
  font: 700 11px var(--mono);
}
.mcp-clients button[aria-selected="true"] b { border-color: rgba(208, 208, 210, .4); background: rgba(208, 208, 210, .12); }
.mcp-clients button > span { display: grid; gap: 2px; min-width: 0; }
.mcp-clients strong { font-size: 12px; }
.mcp-clients small { color: var(--faint); font: 8px var(--mono); letter-spacing: .04em; }
/* start, not stretch: step 2 is a snippet and a copy button, step 1 is a form
   with ten permission rows. Stretching the short card to the tall card's height
   just prints 300px of empty panel under the command. */
.mcp-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; gap: 12px; }
.step-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
}
.step-head { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding-bottom: 18px; }
.step-head > b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(208, 208, 210, .35);
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal);
  font: 700 11px var(--mono);
}
.step-head > span { display: grid; gap: 4px; min-width: 0; }
.step-head strong { font-size: 14px; }
.step-head small { color: var(--faint); font-size: 10px; line-height: 1.5; }
.step-card > label { margin-top: 0; }
.step-card .scope-fieldset { margin: 16px 0; }
.step-card .preview-note { margin-bottom: 14px; }
.step-card .primary-button { margin-top: auto; }
/* 🔴 Every client's snippet is a different height (one CLI line vs an 11-line
   JSON block). Stacking them all in ONE grid cell makes the card as tall as the
   tallest variant, so switching clients moves nothing. `hidden` stays on the
   markup so a page whose JS never ran shows only the first pane — but inside
   this cell it resolves to `visibility`, not `display:none`, or the reserved
   slot collapses and the whole card jumps on every pick. visibility:hidden also
   keeps the inactive Copy buttons out of the tab order. */
.mcp-setups { display: grid; min-width: 0; }
.mcp-setups > .mcp-setup { grid-area: 1 / 1; min-width: 0; }
.mcp-setups > .mcp-setup[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.mcp-setup pre {
  margin: 0 0 12px;
  padding: 15px;
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mcp-setup-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mcp-setup-foot small { color: var(--faint); font-size: 9px; line-height: 1.5; text-align: right; }
.mcp-setup-foot code { color: var(--teal); font: 9px var(--mono); }
.mcp-foot { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.mcp-safety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.mcp-safety li { display: grid; gap: 5px; min-width: 0; padding: 0 20px; border-left: 1px solid var(--line); }
.mcp-safety li:first-child { padding-left: 0; border-left: 0; }
.mcp-safety strong { font-size: 12px; }
.mcp-safety span { color: var(--faint); font-size: 10px; line-height: 1.5; }
.mcp-note { display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0; color: var(--faint); font-size: 10px; line-height: 1.55; }
.mcp-note svg { flex: 0 0 auto; width: 13px; color: var(--teal); }
.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 14px;
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  background: rgba(23, 23, 24, .96);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .16s, transform .16s;
}
.toast.show { opacity: 1; transform: none; }
@media (max-width: 1000px) {
  .platform-hero { grid-template-columns: 1fr; gap: 35px; }
  .agents-panel { grid-template-columns: 230px minmax(0, 1fr); }
  .connection-panel:not([hidden]) { grid-template-columns: 1fr; }
  .connection-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .mcp-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .mcp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  nav.nav .nav-links { display: none; }
  main { padding: 25px 10px 70px; }
  .platform-hero { min-height: 0; padding: 18px 5px 30px; }
  h1 { font-size: 41px; }
  .platform-stats { grid-template-columns: 1fr 1fr; }
  .platform-stats article { padding: 15px 8px; }
  .platform-stats strong { font-size: 24px; }
  .platform-stats small { display: none; }
  .platform-flow { grid-template-columns: 1fr; }
  .platform-flow li { border-right: 0; border-bottom: 1px solid var(--line); }
  .platform-flow li:last-child { border-bottom: 0; }
  .platform-flow small { white-space: normal; }
  .platform-tabs { top: var(--nav-h); }
  .platform-tabs button { display: flex; justify-content: center; padding: 13px 8px; }
  .platform-tabs button > span small { display: none; }
  .platform-tabs button > svg { width: 18px; }
  .agents-panel { grid-template-columns: 1fr; }
  .agent-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .agent-list { display: flex; overflow-x: auto; }
  .agent-card { flex: 0 0 190px; }
  .agent-editor { padding: 22px 15px 30px; }
  .editor-heading { align-items: flex-start; }
  .editor-actions { flex-direction: column-reverse; }
  .field-grid, .field-grid.long { grid-template-columns: 1fr; }
  .skill-heading { flex-direction: column; }
  .skill-grid { grid-template-columns: 1fr; }
  .collaborator-grid { grid-template-columns: 1fr; }
  .knowledge-list { grid-template-columns: 1fr; }
  .knowledge-heading, .knowledge-usage { align-items: flex-start; flex-direction: column; }
  .runner-head { align-items: flex-start; flex-direction: column; }
  .agent-thread { max-height: 70vh; min-height: 310px; padding: 12px; }
  .agent-turn { max-width: 96%; }
  .runner-actions { align-items: flex-end; flex-wrap: wrap; }
  #agentStatus { width: 100%; }
  .send-hint { margin-right: auto; }
  .connection-copy, .connection-setup { padding: 28px 16px; }
  .scope-list, .bridge-grid, .plugin-download-grid { grid-template-columns: 1fr; }
  .endpoint { align-items: flex-start; flex-direction: column; }
  .platform-tabs button { gap: 6px; }
  .platform-tabs button > span strong { font-size: 10px; }
  .webhook-row-main { grid-template-columns: minmax(0, 1fr); }
  .webhook-state { justify-self: start; }
  .mcp-panel { padding: 26px 15px 28px; }
  .mcp-head h2 { font-size: 28px; }
  .mcp-head p { font-size: 13px; }
  /* The rail scrolls rather than wrapping to four rows on a phone; every
     destination stays reachable, which a clipped nav row would not. */
  .mcp-clients { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .mcp-clients button { flex: 0 0 auto; }
  /* Price the reserved slot per breakpoint. At 1440 the stack costs nothing —
     step 1 is the taller card, so it governs the row and the safety strip below
     never moves whatever step 2 does. At 390 the cards are stacked, so the same
     reserve is a ~400px hole under a two-line command, sized for the Claude
     Desktop JSON. Collapse it here and let each client size its own card. */
  .mcp-setups > .mcp-setup[hidden] { display: none !important; }
  .step-card { padding: 17px; }
  .mcp-setup-foot { align-items: flex-start; flex-direction: column; gap: 9px; }
  .mcp-setup-foot small { text-align: left; }
  .mcp-safety { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .mcp-safety li { padding: 0 0 0 13px; border-left: 1px solid var(--line); }
  .mcp-safety li:first-child { padding-left: 13px; border-left: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }