:root {
  color-scheme: dark;
  --bg-0: #000000;
  --bg-1: #000000;
  --bg-2: #16181c;
  --bg-3: #1e2126;
  --bg-4: #273340;
  --line: #2f3336;
  --line-strong: #3e444a;
  --text: #e7e9ea;
  --text-muted: #8b98a5;
  /* 4.9:1 on --bg-2 and 4.5:1 on --bg-3; #71767b was 3.9:1 and 3.5:1 at 8–9 px (#16). */
  --text-dim: #8a9097;
  --accent: #1d9bf0;
  --accent-hover: #4ab3ff;
  --accent-soft: rgb(29 155 240 / 16%);
  --bubble: #0a84ff;
  --bubble-hover: #3395ff;
  --bubble-text: #ffffff;
  --bubble-agent: #26252a;
  --ok: #00ba7c;
  --ok-soft: rgb(0 186 124 / 16%);
  --warn: #ffd400;
  --warn-soft: rgb(255 212 0 / 14%);
  --error: #f4212e;
  --error-soft: rgb(244 33 46 / 14%);
  --info: #1d9bf0;
  --shadow: 0 12px 40px rgb(0 0 0 / 55%);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --topbar-height: 52px;
  --mobile-nav-height: 52px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --control-h: 32px;
  --chip-h: 28px;
  --row-h: 32px;
  --panel-header-h: 52px;
  --section-pad: 8px 12px;
  --font-size-ui: 13px;
  --mode-btn-h: 24px;
  --qty-strip-h: 22px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

.app-shell[data-density="compact"] {
  --control-h: 26px;
  --chip-h: 24px;
  --row-h: 26px;
  --panel-header-h: 40px;
  --section-pad: 6px 10px;
  --font-size-ui: 12px;
  --mode-btn-h: 22px;
  --topbar-height: 44px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
}

body {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-ui);
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
select,
input[type="range"],
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--accent);
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tree-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  color: var(--bubble-text);
  background: var(--bubble);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  min-height: 32px;
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: #3e444a;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #536471;
  background-clip: padding-box;
}

.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;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  color: var(--bubble-text);
  background: var(--bubble);
  border-radius: var(--radius-pill);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 120ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: grid;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  background: var(--bg-1);
}

.topbar {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--topbar-height);
  padding: 0 var(--space-3);
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  background: rgb(0 0 0 / 72%);
  box-shadow: none;
}

.workspace-group {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-1);
}

.workspace-name {
  max-width: 320px;
  overflow: hidden;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
}

.workspace-name:hover {
  background: var(--bg-3);
}

.topbar-examples {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.topbar-examples button {
  min-height: 24px;
  padding: 2px 9px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(255 255 255 / 5%);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.topbar-examples button:hover,
.topbar-examples button:focus-visible {
  color: var(--text);
  border-color: rgb(10 132 255 / 50%);
  background: var(--accent-soft);
}

.workspace-menu-host {
  position: relative;
  display: inline-flex;
}

.workspace-menu-button {
  width: 22px;
  min-height: 22px;
  border: 0;
  background: transparent;
}

.workspace-menu-button span {
  display: inline-block;
  transform: rotate(90deg);
}

.workspace-menu-button[aria-expanded="true"] {
  color: var(--text);
  background: var(--bg-3);
}

.workspace-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  min-width: 224px;
  padding: var(--space-1);
  gap: 1px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

.menu-item {
  display: block;
  min-height: var(--control-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
}

.menu-item:hover,
.menu-item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.menu-item:disabled {
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.55;
}

.menu-separator {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--line);
}

.palette-button {
  color: var(--text-dim);
  font-size: 14px;
}

.toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.toolbar-spacer {
  flex: 1;
  min-width: 8px;
}

.workspace-menu[hidden] {
  display: none;
}

.tool-button,
.icon-button,
.toggle-button,
.chip,
.segmented-button,
.small-button {
  min-height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: var(--bg-2);
  cursor: pointer;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease;
}

.tool-button {
  padding: 0 14px;
  font-size: 13px;
  font-weight: 650;
}

.icon-button {
  display: inline-grid;
  width: 32px;
  padding: 0;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
}

.toggle-button,
.small-button {
  padding: 0 var(--space-2);
  font-size: 11px;
  font-weight: 650;
}

.tool-button:hover,
.icon-button:hover,
.toggle-button:hover,
.chip:hover,
.segmented-button:hover,
.small-button:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--bg-3);
}

.tool-button:disabled,
.icon-button:disabled,
.toggle-button:disabled,
.chip:disabled,
.segmented-button:disabled,
.small-button:disabled {
  color: var(--text-dim);
  border-color: var(--line);
  opacity: 0.48;
  cursor: not-allowed;
}

.toggle-button[aria-pressed="true"],
.segmented-button[aria-pressed="true"],
.chip[aria-pressed="true"] {
  color: var(--text);
  border-color: rgb(10 132 255 / 56%);
  background: var(--accent-soft);
}

.accent-button {
  color: var(--bubble-text);
  border-color: var(--bubble);
  background: var(--bubble);
}

.accent-button:hover {
  color: var(--bubble-text);
  border-color: var(--bubble-hover);
  background: var(--bubble-hover);
}


.transport-primary {
  color: var(--bubble-text);
  border-color: var(--bubble);
  background: var(--bubble);
}

.compact-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-dim);
  font-size: 11px;
}

select,
input[type="text"],
input[type="number"],
input[type="search"],
textarea {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-2);
}

select {
  padding: 0 28px 0 10px;
}

input[type="text"],
input[type="number"],
input[type="search"],
textarea {
  width: 100%;
  padding: 8px 12px;
}

textarea {
  min-height: 72px;
  resize: vertical;
}

.save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 128px;
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  content: "";
}

.save-status[data-status="saving"]::before {
  background: var(--warn);
}

.save-status[data-status="error"]::before {
  background: var(--error);
}

.save-status[data-status="pending"]::before,
.save-status[data-status="booting"]::before {
  background: var(--warn);
}

.save-status[data-status="saving"]::before {
  animation: status-pulse 1.2s ease-in-out infinite;
}

.studio-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.app-shell[data-mode="generate"] .studio-grid {
  grid-template-columns: minmax(0, 1fr);
}

.stage-column,
.left-dock {
  min-height: 0;
}

.stage-column {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

.app-shell[data-mode="generate"] .stage-column,
.app-shell[data-mode="motion"] .stage-column {
  display: block;
}

.left-dock {
  position: absolute;
  z-index: 24;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  width: min(320px, 34vw);
  max-height: min(46vh, 400px);
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.left-dock > * {
  pointer-events: auto;
}

.left-dock .left-panel {
  flex: 1 1 auto;
  min-height: 0;
}

.control-deck {
  position: absolute;
  z-index: 22;
  right: 10px;
  bottom: 10px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(380px, 36vw);
  max-height: min(50vh, 460px);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(47 51 54 / 45%);
  border-radius: 12px;
  background: rgb(0 0 0 / 46%);
}

.mode-rail {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 0;
  padding: 0 2px;
  gap: 0;
  overflow: auto hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg-1);
}

.mode-button {
  position: relative;
  display: flex;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: var(--mode-btn-h);
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-dim);
  background: transparent;
  cursor: pointer;
}

.mode-button::before {
  position: absolute;
  top: auto;
  right: 8px;
  bottom: 0;
  left: 8px;
  width: auto;
  height: 2px;
  border-radius: 0;
  background: transparent;
  content: "";
}

.mode-button:hover {
  color: var(--text);
  background: rgb(231 233 234 / 8%);
}

.mode-button[aria-current="page"] {
  color: var(--text);
  background: var(--accent-soft);
}

.mode-button[aria-current="page"]::before {
  background: var(--bubble);
}

.mode-glyph {
  display: none;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.mode-button[aria-current="page"] .mode-glyph {
  color: var(--bubble-text);
  background: var(--bubble);
}

.mode-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.panel-surface {
  color: var(--text);
  background: var(--bg-1);
}

.left-panel,
.inspector {
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* Mode switches replace these panels' subtrees wholesale; containment keeps
     the resulting style/layout pass scoped to the panel, and a stable gutter
     stops content shifting when a scrollbar appears. */
  contain: layout paint style;
  scrollbar-gutter: stable;
}

.inspector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  gap: 0;
  background: var(--bg-1);
}

.mode-workbench {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-content: start;
  min-width: 0;
  border-bottom: 1px solid var(--line);
}

.mode-workbench > .panel-header {
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 4px 10px;
}

.mode-workbench > .panel-section,
.mode-workbench > .mode-outliner {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.mode-outliner {
  max-height: 280px;
  overflow: hidden auto;
}

.inspector > .panel-header {
  position: sticky;
  top: 0;
  z-index: 5;
  grid-column: 1 / -1;
  min-height: 32px;
  padding: 4px 10px;
  flex-wrap: wrap;
}

.inspector .eyebrow {
  display: none;
}

.inspector .panel-title {
  font-size: 13px;
  letter-spacing: -0.02em;
}

.inspector > .panel-section {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.inspector > .panel-section.is-wide,
.inspector > .inspector-wide-stack {
  grid-column: 1 / -1;
  border-right: 0;
}

.inspector-wide-stack {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  min-width: 0;
}

.inspector-wide-stack > .panel-section {
  min-width: 0;
  border-right: 1px solid var(--line);
}

.inspector .tool-button,
.inspector .toggle-button,
.inspector .chip,
.inspector .small-button,
.inspector .segmented-button {
  border-radius: 6px;
}

.inspector select,
.inspector input[type="text"],
.inspector input[type="number"],
.inspector textarea {
  min-height: 26px;
  border-radius: 6px;
}

.app-shell[data-density="compact"] .section-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.panel-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  min-height: var(--panel-header-h);
  padding: 6px 10px;
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
  /* Sticky inside a scrolling panel: a blur here is re-filtered on every
     scroll frame, so the header is opaque instead (#17). */
  background: rgb(12 13 15 / 94%);
}

.panel-header-main {
  min-width: 0;
  flex: 1;
}

.eyebrow {
  margin: 0 0 2px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.panel-title,
.section-title {
  margin: 0;
  font-weight: 680;
}

.panel-title {
  overflow: hidden;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-title {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.panel-body {
  padding: var(--space-2);
}

.panel-section {
  padding: var(--section-pad);
  border-bottom: 1px solid var(--line);
}

.panel-section:last-child {
  border-bottom: 0;
}

.section-header {
  display: flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: var(--space-2);
  gap: var(--space-2);
}

.section-header .section-title {
  flex: 1;
}

.section-toggle {
  min-height: 20px;
  min-width: 20px;
  padding: 0;
  border: 0;
  background: transparent;
}

.section-toggle span {
  display: inline-block;
  transition: transform 140ms ease;
  transform: rotate(90deg);
}

.panel-section[data-collapsed="true"] .section-toggle span {
  transform: rotate(0deg);
}

.panel-section[data-collapsed="true"] .section-header {
  margin-bottom: 0;
}

.section-note,
.muted,
.field-hint {
  color: var(--text-dim);
}

.section-note {
  margin: 0 0 var(--space-3);
  font-size: 11px;
  line-height: 1.5;
  text-wrap: pretty;
}

.field-hint {
  display: block;
  margin-top: 3px;
  font-size: 10px;
}

.toolbar-row,
.button-row,
.chip-row,
.segmented,
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.button-row > .tool-button,
.button-row > .small-button {
  flex: 1 1 auto;
}

.stack-top {
  margin-top: var(--space-2);
}

.stack-bottom {
  margin-bottom: var(--space-2);
}

.block-button {
  width: 100%;
  margin-top: var(--space-2);
}

.segmented {
  flex-wrap: nowrap;
  gap: 0;
}
.segmented-button {
  min-width: 0;
  flex: 1;
  padding: 0 4px;
  border-radius: 0;
  overflow: hidden;
  font-size: 11.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.segmented-button:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.segmented-button:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.segmented-button + .segmented-button {
  border-left: 0;
}

.chip {
  min-height: var(--chip-h);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 650;
}

.property-list {
  display: grid;
  gap: var(--space-2);
}

.property-row {
  display: grid;
  grid-template-columns: minmax(88px, 0.8fr) minmax(116px, 1.2fr);
  align-items: center;
  min-height: var(--row-h);
  gap: var(--space-3);
}

.property-row > label,
.property-label {
  overflow: hidden;
  min-width: 0;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.property-value {
  min-width: 0;
}

.range-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: var(--space-2);
}

input[type="range"] {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0 var(--range-fill, 0%), var(--line-strong) var(--range-fill, 0%) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 2px solid var(--bg-2);
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 0 1px var(--accent);
  appearance: none;
}

input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}

input[type="range"]::-moz-range-progress {
  height: 3px;
  background: var(--accent);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--bg-2);
  border-radius: 50%;
  background: var(--accent-hover);
}

.numeric-output,
.numeric-input,
.timecode,
.metric-value,
.budget-numbers {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.numeric-output {
  min-width: 42px;
  color: var(--text-muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.switch-row {
  display: flex;
  align-items: center;
  min-height: var(--row-h);
  gap: var(--space-2);
}

.switch-row > span:first-child {
  min-width: 0;
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
}

.switch {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 20px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.switch-track {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius-pill);
  background: #39393d;
  transition: background-color 180ms ease;
}

.switch-track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  content: "";
  transition:
    transform 180ms ease,
    background-color 180ms ease;
}

.switch input:checked + .switch-track {
  border-color: transparent;
  background: #30d158;
}

.switch input:checked + .switch-track::after {
  background: #ffffff;
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workspace {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-0);
}

.viewport-stage {
  position: relative;
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgb(10 132 255 / 18%), transparent 42%),
    #000000;
}

/* Desktop tools live in the canvas grid track itself. This gives the floating
   panels a real containing boundary instead of asking each panel to duplicate
   the combined heights of viewport chrome and the quantity strip. */
.viewport-overlay-plane {
  position: relative;
  z-index: 20;
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.viewport-overlay-plane > .control-deck,
.viewport-overlay-plane > .timeline {
  pointer-events: auto;
}

#viewport {
  display: block;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  outline: 0;
  touch-action: none;
}

/* The rail is chrome pinned to the top of the stage, so it may never grow
   downward over the copies it names: the chips scroll in one row and the
   unused tints sit in a popover (#18). The row width is the rail's own
   ceiling, not the viewport's, so the canvas keeps its pointer events
   everywhere the rail does not actually draw. */
.compare-rail {
  position: absolute;
  z-index: 8;
  top: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: max-content;
  max-width: min(620px, calc(100% - 16px));
  padding: 3px 4px;
  gap: 3px 4px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 12px;
  background: rgb(0 0 0 / 44%);
}

.compare-legend {
  grid-column: 1 / -1;
  margin: 0 2px 1px;
  overflow: hidden;
  color: rgb(255 255 255 / 78%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  padding-bottom: 1px;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.compare-strip::-webkit-scrollbar {
  height: 0;
}

.compare-strip[data-scrollable="true"] {
  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
}

.compare-add {
  position: relative;
  flex: 0 0 auto;
}

.compare-add-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  gap: 4px;
  border: 1px dashed rgb(255 255 255 / 26%);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(0 0 0 / 28%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.compare-add-toggle:hover:not(:disabled),
.compare-add-toggle[aria-expanded="true"] {
  color: var(--text);
  border-color: rgb(255 255 255 / 46%);
}

.compare-add-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.compare-palette {
  position: absolute;
  z-index: 9;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: max-content;
  max-width: 260px;
  padding: 6px;
  gap: 4px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 14px;
  background: rgb(27 27 30 / 96%);
  box-shadow: 0 16px 40px rgb(0 0 0 / 48%);
}

.compare-palette[hidden] {
  display: none;
}

.compare-slot,
.compare-swatch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 7px;
  gap: 4px;
  white-space: nowrap;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  color: var(--text);
  background: rgb(0 0 0 / 28%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.compare-slot[aria-current="true"] {
  border-color: rgb(10 132 255 / 70%);
  background: var(--accent-soft);
}

.compare-slot[data-component-selected="true"] {
  box-shadow: 0 0 0 2px rgb(255 255 255 / 72%);
}

.component-context {
  position: absolute;
  z-index: 48;
  display: grid;
  width: min(318px, calc(100% - 16px));
  padding: 10px;
  gap: 9px;
  border: 1px solid rgb(255 255 255 / 17%);
  border-radius: 20px;
  color: var(--text);
  background: rgb(27 27 30 / 94%);
  box-shadow: 0 18px 48px rgb(0 0 0 / 52%), inset 0 1px rgb(255 255 255 / 8%);
  backdrop-filter: blur(20px) saturate(1.2);
  pointer-events: auto;
  animation: component-context-in 140ms cubic-bezier(.2,.8,.2,1);
}

.component-context[hidden] {
  display: none;
}

.component-context::before {
  position: absolute;
  top: -5px;
  left: 20px;
  width: 11px;
  height: 11px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-width: 1px 0 0 1px;
  background: rgb(27 27 30 / 94%);
  content: "";
  transform: rotate(45deg);
}

@keyframes component-context-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(.98);
  }
}

.component-context-head,
.component-chat-action,
.component-handoff {
  display: flex;
  align-items: center;
}

.component-context-head {
  min-width: 0;
  gap: 8px;
}

.component-context-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--swatch, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch, var(--accent)) 24%, transparent);
}

.component-context-title {
  display: grid;
  min-width: 0;
  flex: 1;
}

.component-context-title strong {
  overflow: hidden;
  font-size: 14px;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-context-title small,
.component-chat-action small,
.component-handoff small {
  color: var(--text-dim);
  font-size: 10px;
}

.component-context-close,
.component-handoff > button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--text-dim);
  background: rgb(255 255 255 / 8%);
  cursor: pointer;
}

.component-models,
.component-context-actions,
.component-agent-picker {
  display: flex;
  gap: 4px;
}

.component-models {
  overflow: auto hidden;
  scrollbar-width: none;
}

.component-models button,
.component-context-actions button,
.component-agent-picker button {
  min-height: 28px;
  flex: 1;
  padding: 3px 8px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(255 255 255 / 5%);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.component-models button {
  display: inline-flex;
  min-width: max-content;
  align-items: center;
  gap: 5px;
}

.component-models button > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--swatch);
}

.component-models button[aria-pressed="true"],
.component-agent-picker button[aria-pressed="true"] {
  color: var(--text);
  border-color: rgb(10 132 255 / 56%);
  background: var(--accent-soft);
}

.component-context-actions button {
  min-height: 32px;
  border-radius: 10px;
  color: var(--text);
  background: rgb(255 255 255 / 8%);
}

.component-chat-action {
  width: 100%;
  min-height: 46px;
  padding: 6px 8px;
  gap: 8px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: var(--bubble);
  text-align: left;
  cursor: pointer;
}

.component-chat-action:hover {
  background: var(--bubble-hover);
}

.component-chat-action > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
}

.component-chat-action small {
  color: rgb(255 255 255 / 74%);
}

.compare-slot > button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  gap: 5px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.compare-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--swatch, #0a84ff);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
}

.compare-swatch {
  min-width: 22px;
  padding: 0 8px;
  color: var(--text-dim);
  background: rgb(255 255 255 / 6%);
}

.compare-swatch:hover,
.compare-slot:hover {
  color: var(--text);
  border-color: rgb(255 255 255 / 28%);
}

.compare-swatch:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.compare-remove,
.compare-quick {
  margin-left: 2px;
  padding: 0;
  border: 0;
  color: var(--text-dim);
  background: transparent;
  font-size: 11px;
  cursor: pointer;
}

.compare-quick {
  font-size: 10px;
  line-height: 1;
}

.compare-quick:hover,
.compare-quick[aria-expanded="true"] {
  color: var(--text);
}

/* The quick edit hangs off the rail rather than replacing it: the person can
   still see which copy they are addressing while they type. */
.compare-quick-edit {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  gap: 7px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-left: 2px solid var(--swatch, var(--accent));
  border-radius: 16px;
  color: var(--text);
  background: rgb(27 27 30 / 96%);
  box-shadow: 0 18px 44px rgb(0 0 0 / 52%);
  animation: component-context-in 140ms cubic-bezier(.2, .8, .2, 1);
}

.compare-quick-head {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.compare-quick-head .agent-avatar {
  width: 24px;
  height: 24px;
}

.compare-quick-title {
  display: grid;
  min-width: 0;
  flex: 1;
}

.compare-quick-title strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-quick-title small {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-quick-close {
  padding: 0 2px;
  border: 0;
  color: var(--text-dim);
  background: transparent;
  font-size: 14px;
  cursor: pointer;
}

.compare-quick-close:hover {
  color: var(--text);
}

.compare-quick-intents {
  display: flex;
}

.compare-quick-intents button {
  min-width: 0;
  flex: 1;
  min-height: 24px;
  padding: 0 6px;
  border: 1px solid var(--line);
  color: var(--text-dim);
  background: rgb(255 255 255 / 4%);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.compare-quick-intents button:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.compare-quick-intents button:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.compare-quick-intents button + button {
  border-left: 0;
}

.compare-quick-intents button[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--text);
  background: var(--accent-soft);
}

.compare-quick-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.compare-quick-examples button {
  min-height: 20px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
}

.compare-quick-examples button:hover {
  color: var(--text);
  border-color: rgb(255 255 255 / 30%);
}

.compare-quick-composer {
  padding: 4px;
  background: rgb(0 0 0 / 32%);
}

.compare-quick-composer .send-button {
  width: 28px;
  height: 28px;
}

.compare-quick-note {
  margin: 0 2px;
  color: var(--text-dim);
  font-size: 9.5px;
  line-height: 1.35;
}

.panel-floating {
  border: 1px solid rgb(47 51 54 / 80%);
  border-radius: var(--radius-lg);
  /* Floats over the live canvas, which repaints every animated frame; a blur
     here is a full re-filter per frame (#17). Opaque enough to read on its own. */
  background: rgb(22 24 28 / 90%);
  box-shadow: 0 8px 28px rgb(0 0 0 / 40%);
}

.viewport-chrome {
  display: flex;
  grid-row: 2;
  grid-column: 1;
  align-items: center;
  min-width: 0;
  min-height: 28px;
  padding: 2px 4px;
  gap: 6px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 78%);
  /* The one-row ladder below is keyed on this strip's own width: the dock
     beside it changes with density and mode, so a viewport breakpoint would
     be wrong for half the layouts. */
  container-type: inline-size;
  container-name: viewport-chrome;
}

.viewport-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
  padding: 0;
  gap: 2px;
}

.viewport-transport {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  gap: 2px;
}

.viewport-transport .icon-button {
  width: 28px;
  min-height: 24px;
  border-color: transparent;
  background: transparent;
}

.viewport-transport .transport-primary {
  color: var(--bubble-text);
  border-color: var(--bubble);
  background: var(--bubble);
}

.viewport-toolbar select {
  min-height: 24px;
  padding: 0 16px 0 6px;
  border-color: transparent;
  background: transparent;
}

.viewport-toolbar [data-action="viewport:set-buffer"] {
  max-width: 7.5rem;
}

.viewport-toolbar [data-action="viewport:set-environment"] {
  max-width: 6.5rem;
}

.viewport-view {
  position: relative;
  display: flex;
  align-items: center;
}

.viewport-view-dialog {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 6;
  display: grid;
  min-width: 11.5rem;
  padding: 8px;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  box-shadow: var(--shadow);
}

.viewport-view-dialog[hidden] {
  display: none;
}

.viewport-view-dialog .compact-field {
  display: grid;
  gap: 2px;
}

.viewport-view-dialog .compact-field > span {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.viewport-view-dialog select {
  max-width: none;
  width: 100%;
}

/* Keep the chrome to one row at every desktop width. The toolbar grew by a
   lighting select and a turntable toggle (#51) and started wrapping at 1440
   px, pushing the stage down 26 px. The diagnostics strip yields first -- it
   is telemetry, not a control -- then paddings, then the strip goes away.
   Selectors carry the .viewport-chrome prefix so they beat the base rules
   below regardless of source order. */
@container viewport-chrome (max-width: 1100px) {
  .viewport-chrome .viewport-stats span:nth-child(3),
  .viewport-chrome .viewport-stats span:nth-child(4) {
    display: none; /* body, cloth */
  }
}

@container viewport-chrome (max-width: 1000px) {
  .viewport-chrome .viewport-stats span:nth-child(5),
  .viewport-chrome .viewport-stats span:nth-child(7) {
    display: none; /* draws, xsect */
  }
}

@container viewport-chrome (max-width: 900px) {
  .viewport-chrome .viewport-toolbar .toggle-button {
    padding-inline: 5px;
  }

  .viewport-chrome .viewport-stats {
    gap: 6px;
  }
}

@container viewport-chrome (max-width: 840px) {
  .viewport-chrome .viewport-stats span:nth-child(2),
  .viewport-chrome .viewport-stats span:nth-child(6) {
    display: none; /* tris, ms */
  }
}

@container viewport-chrome (max-width: 760px) {
  .viewport-chrome .viewport-stats {
    display: none;
  }
}

@container viewport-chrome (max-width: 660px) {
  .viewport-chrome .viewport-toolbar .toggle-button {
    padding-inline: 4px;
    font-size: 10px;
  }

  .viewport-chrome .viewport-toolbar select {
    padding: 0 18px 0 6px;
  }

  .viewport-chrome .viewport-transport [data-action="ui:toggle-density"] {
    display: none; /* still in the command palette */
  }

  .viewport-chrome .selection-breadcrumb {
    display: none; /* a 49 px "Avat…" here; the outliner shows the selection in full */
  }
}

@container viewport-chrome (max-width: 580px) {
  .viewport-chrome {
    padding-inline: 2px;
    gap: 4px;
  }

  .viewport-chrome .viewport-toolbar {
    gap: 1px;
  }

  .viewport-chrome .viewport-toolbar select {
    padding: 0 16px 0 4px;
  }

  .viewport-chrome .viewport-toolbar [data-action="viewport:focus"] {
    display: none; /* F still focuses the selection */
  }
}

.viewport-toolbar .icon-button,
.viewport-toolbar .toggle-button {
  min-height: 24px;
  border-color: transparent;
  background: transparent;
}

.viewport-toolbar .toggle-button[aria-pressed="true"] {
  color: var(--text);
  border-color: rgb(10 132 255 / 56%);
  background: var(--accent-soft);
}

.viewport-stats {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
  padding: 0 4px;
  gap: 8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.viewport-stats b {
  color: var(--text);
  font-weight: 650;
}

.selection-breadcrumb {
  max-width: 140px;
  padding: 0 8px;
  overflow: hidden;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qty-strip {
  display: grid;
  grid-row: 2;
  grid-column: 1;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: var(--qty-strip-h);
  align-items: center;
  min-height: var(--qty-strip-h);
  margin: 0;
  padding: 0 4px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}

.qty-strip > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 4px;
  min-width: 0;
  height: 100%;
  padding: 0 5px;
  border-right: 1px solid var(--line);
}

.qty-strip > div:last-child {
  border-right: 0;
}

.qty-strip dt {
  overflow: hidden;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qty-strip dd {
  overflow: hidden;
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qty-strip dd[data-level="ok"] {
  color: var(--ok);
}

.qty-strip dd[data-level="warn"] {
  color: var(--warn);
}

.qty-strip dd[data-level="error"] {
  color: var(--error);
}

.qty-strip .qty-seed dd {
  display: flex;
  align-items: center;
  gap: 2px;
}

.qty-strip .qty-input {
  width: 7ch;
  min-width: 3ch;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.qty-strip .qty-input:focus {
  outline: none;
}

.qty-strip .qty-roll {
  flex: 0 0 auto;
  width: 14px;
  min-height: 14px;
  padding: 0;
  border: 0;
  color: var(--text-dim);
  background: transparent;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}

.qty-strip .qty-roll:hover,
.qty-strip .qty-roll:focus-visible {
  color: var(--text);
}

.qty-strip > .qty-seed {
  min-width: 0;
}

.qty-strip > .qty-more {
  max-width: none;
}

.qty-more-toggle {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--text-dim);
  background: transparent;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.qty-more-toggle:hover,
.qty-more-toggle:focus-visible {
  color: var(--text);
}

.viewport-message {
  z-index: 5;
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: center;
  min-width: 220px;
  padding: 10px 12px;
  gap: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  background: rgb(22 24 28 / 92%);
  box-shadow: var(--shadow);
  place-self: center;
}

.viewport-chrome .panel-floating {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.viewport-chrome .icon-button,
.viewport-chrome .toggle-button,
.viewport-chrome select {
  min-height: 24px;
  border-color: transparent;
  background: transparent;
}

.viewport-chrome .toggle-button[aria-pressed="true"] {
  color: var(--text);
  border-color: rgb(10 132 255 / 56%);
  background: var(--accent-soft);
}

.matrix-case-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  gap: 4px;
}

.progress-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 720ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* The timeline earns its row in Motion. Other modes keep playback in the
   compact viewport chrome so generate/inspect stay a 3D-plus-controls stack. */
@media (min-width: 821px) {
  .app-shell:not([data-mode="motion"]) .timeline {
    display: none;
  }

  .timeline {
    height: clamp(108px, 17vh, 240px);
  }

  /* Desktop seed lives in the quantity strip under the 3D view. Mobile keeps
     the inspector row because the strip is hidden below 821px. */
  .inspector .seed-row {
    display: none;
  }
}

.timeline {
  position: absolute;
  z-index: 21;
  right: calc(min(380px, 36vw) + 18px);
  bottom: 10px;
  left: calc(min(320px, 34vw) + 18px);
  max-height: 148px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgb(47 51 54 / 45%);
  border-radius: 12px;
  background: rgb(0 0 0 / 46%);
  contain: layout paint style;
}

@media (min-width: 821px) {
  .app-shell:not([data-mode="motion"]) .timeline {
    display: none;
  }

  .thread-header-copy small {
    display: none;
  }

  .thread-header-copy strong {
    font-size: 12px;
  }

  .inspector {
    background: transparent;
  }
}

.timeline-head {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  align-items: center;
  min-height: 32px;
  padding: 2px var(--space-2);
  gap: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.timeline-transport {
  display: flex;
  align-items: center;
  gap: 4px;
}

.timeline-scrub {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.timeline-body {
  display: grid;
  grid-template-columns: 132px minmax(220px, 1fr);
  min-width: 0;
  height: calc(100% - 32px);
  overflow: hidden;
}

.filmstrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  padding: var(--space-2);
  gap: 4px;
  overflow: auto;
  border-right: 1px solid var(--line);
}

.filmstrip-button {
  position: relative;
  min-height: 32px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: var(--bg-1);
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.filmstrip-button:hover {
  border-color: var(--line-strong);
  background: var(--bg-3);
}

.filmstrip-button[aria-pressed="true"] {
  color: var(--accent-hover);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.filmstrip-type {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.dopesheet {
  position: relative;
  min-width: 0;
  overflow: auto;
  background-image: linear-gradient(90deg, transparent calc(12.5% - 1px), rgb(59 72 86 / 34%) 12.5%);
  background-size: 12.5% 100%;
}

.track-row {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(200px, 1fr);
  align-items: center;
  min-width: 340px;
  height: 22px;
  border-bottom: 1px solid rgb(41 52 64 / 58%);
}

.track-label {
  height: 100%;
  padding: 5px 8px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  color: var(--text-dim);
  background: rgb(16 22 29 / 90%);
  font-family: var(--font-mono);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.track-keys {
  position: relative;
  height: 100%;
}

.key-dot {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid #07111a;
  border-radius: 1px;
  background: var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
  cursor: pointer;
}

.playhead {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: var(--playhead, 0%);
  width: 1px;
  background: var(--warn);
  pointer-events: none;
}

.playhead::before {
  position: absolute;
  top: 0;
  left: -4px;
  width: 9px;
  height: 7px;
  border-radius: 0 0 4px 4px;
  background: var(--warn);
  content: "";
}

.outliner {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
}

.outliner-heading {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-3) var(--space-2);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

.tree-group > details > summary {
  list-style: none;
}

.tree-group > details > summary::-webkit-details-marker {
  display: none;
}

.tree-group > details > summary::before {
  display: inline-block;
  width: 12px;
  color: var(--text-dim);
  content: "›";
  transform-origin: 42% 50%;
  transition: transform 80ms ease;
}

.tree-group > details[open] > summary::before {
  transform: rotate(90deg);
}

.tree-row,
.tree-summary {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 22px;
  padding: 1px 6px 1px calc(6px + var(--tree-depth, 0) * 12px);
  gap: 4px;
  border: 0;
  color: var(--text-muted);
  background: transparent;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.tree-row:hover,
.tree-summary:hover {
  color: var(--text);
  background: var(--bg-3);
}

.tree-row[aria-selected="true"] {
  color: var(--accent-hover);
  background: var(--accent-soft);
}

.tree-icon {
  display: inline-grid;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.tree-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text-dim);
  background: var(--bg-1);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status-badge[data-level="ok"] {
  color: var(--ok);
  border-color: rgb(99 215 160 / 44%);
  background: var(--ok-soft);
}

.status-badge[data-level="warn"] {
  color: var(--warn);
  border-color: rgb(245 196 81 / 44%);
  background: var(--warn-soft);
}

.status-badge[data-level="error"] {
  color: var(--error);
  border-color: rgb(255 113 133 / 44%);
  background: var(--error-soft);
}

.card-list {
  display: grid;
  gap: var(--space-2);
}

.item-card {
  padding: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}

.item-card[data-selected="true"] {
  border-color: rgb(10 132 255 / 58%);
  box-shadow: 0 0 0 1px rgb(10 132 255 / 16%) inset;
}

.item-card-head {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: var(--space-2);
}

.item-card-title {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-card-meta {
  margin-top: 3px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.marketplace-item[data-level="warn"] {
  border-color: rgb(245 196 81 / 36%);
}

.marketplace-prerequisite,
.marketplace-source-links {
  margin: var(--space-2) 0 0;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.5;
}

.marketplace-check-list {
  display: grid;
  gap: 5px;
  margin-top: var(--space-2);
}

.marketplace-check {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding-top: 5px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 10px;
}

.marketplace-check span:first-child {
  min-width: 0;
}

.marketplace-check strong,
.marketplace-check small {
  display: block;
}

.marketplace-check small {
  margin-top: 2px;
  color: var(--text-dim);
  line-height: 1.4;
}

.marketplace-source-links a {
  color: var(--accent);
  text-decoration: none;
}

.marketplace-source-links a:hover,
.marketplace-source-links a:focus-visible {
  text-decoration: underline;
}

.marketplace-policy-sources {
  overflow-wrap: anywhere;
}

.item-card-controls {
  display: flex;
  margin-top: var(--space-2);
  gap: 4px;
}

.empty-state {
  display: grid;
  min-height: 52px;
  padding: var(--space-2);
  place-content: center;
  gap: var(--space-1);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-dim);
  background: rgb(22 24 28 / 40%);
  font-size: 11px;
  text-align: center;
}

.empty-state .tool-button {
  justify-self: center;
}

.foundry-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 8px 6px;
}

.foundry-examples button {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  background: rgb(0 0 0 / 28%);
  font-size: 10px;
  font-weight: 700;
}

.assemblage-library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}

.assemblage-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 52px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgb(0 0 0 / 28%);
  text-align: left;
}

.assemblage-card[aria-current="true"] {
  border-color: var(--accent);
}

.assemblage-card:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.assemblage-issues {
  margin: 6px 0 0;
  padding-left: 1.1em;
  color: var(--text-dim);
  font-size: 11px;
}

.assemblage-issues [data-level="error"] {
  color: var(--danger, #f07178);
}

.foundry-map {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 10px;
  background: rgb(0 0 0 / 42%);
}

.foundry-map-shell {
  position: relative;
  width: min(100%, 320px);
  margin: 0 auto;
}

.foundry-map-shell .foundry-map {
  max-width: none;
  margin: 0;
}

.foundry-map-node {
  position: absolute;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 2px solid rgb(255 255 255 / 92%);
  border-radius: 999px;
  background: var(--node-color, #ff9f0a);
  box-shadow: 0 0 0 3px rgb(255 159 10 / 28%);
  transform: translate(-50%, -50%);
  cursor: crosshair;
}

.foundry-map-node:hover,
.foundry-map-node:focus-visible {
  z-index: 1;
  outline: 2px solid #ff9f0a;
  outline-offset: 3px;
  transform: translate(-50%, -50%) scale(1.22);
}

.assemblage-placement-evidence {
  margin-top: 8px;
}

.foundry-map-empty {
  min-height: 88px;
}

.foundry-lookbook .lookbook-card-select {
  min-height: 72px;
}

.lookbook-empty {
  min-height: 88px;
  padding: var(--space-3) var(--space-2);
}

.lookbook-silhouette {
  justify-self: center;
  width: 36px;
  height: 42px;
  color: var(--text-dim);
}

.lookbook-empty strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.overlay-legend {
  position: absolute;
  z-index: 12;
  left: 10px;
  bottom: 42px;
  top: auto;
  display: grid;
  min-width: 220px;
  max-width: min(280px, 70vw);
  padding: 8px 10px;
  gap: 6px;
}

.overlay-legend[hidden] {
  display: none;
}

.overlay-legend p {
  margin: 0;
  font-size: 11px;
}

.overlay-legend dl {
  display: grid;
  margin: 0;
  gap: 2px;
}

.overlay-legend dl > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 6px;
  align-items: baseline;
}

.overlay-legend dt {
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
}

.overlay-legend dd {
  margin: 0;
  color: var(--text-dim);
  font-size: 11px;
}

.overlay-legend-hint {
  color: var(--text-dim);
}

.validation-copy small {
  display: block;
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 11px;
}

.facs-group {
  border-top: 1px solid var(--line);
}

.facs-group:first-child {
  border-top: 0;
}

.facs-group > summary {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

.facs-group > summary::after {
  margin-left: auto;
  color: var(--text-dim);
  content: "+";
}

.facs-group[open] > summary::after {
  content: "−";
}

.facs-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 var(--space-4) var(--space-3);
  gap: var(--space-1) var(--space-3);
}

@media (max-width: 1100px) {
  .facs-controls {
    grid-template-columns: 1fr;
  }
}

.facs-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center;
  gap: var(--space-2);
}

.facs-control > label {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.facs-control .range-control {
  grid-template-columns: minmax(0, 1fr) 30px;
}

.makeup-layer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: var(--space-2);
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.layer-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--swatch, var(--accent));
}

.prompt-box {
  min-height: 36px;
  max-height: 120px;
  padding: 8px 14px;
  border: 0;
  border-radius: 20px;
  line-height: 1.35;
  background: var(--bg-3);
  field-sizing: content;
}

.field-label {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.generation-locks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1) var(--space-3);
}

.left-panel.thread-surface,
.thread-surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Explicit shrinkable column: the implicit `auto` track sized rows to their
     max-content, letting long bubbles push the thread wider than the panel. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: transparent;
}

.thread-header {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 6px;
  gap: 6px;
  border-bottom: 0;
  background: transparent;
}

.thread-header-faces {
  display: flex;
  padding-right: 8px;
}

.thread-header-faces .agent-avatar {
  margin-right: -8px;
  box-shadow: 0 0 0 2px #000;
}

.thread-header-copy {
  min-width: 0;
  flex: 1;
}

.thread-header-copy strong,
.thread-header-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-header-copy strong {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.thread-header-copy small {
  margin-top: 1px;
  color: var(--text-dim);
  font-size: 11px;
}

.thread-log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  padding: 4px 4px 6px;
  overflow: hidden auto;
  overscroll-behavior: contain;
  gap: 2px;
}

.thread-stamp {
  margin: 6px 0 12px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-align: center;
}

.bubble-row {
  display: flex;
  align-items: flex-end;
  max-width: 100%;
  margin: 3px 2px;
  gap: 8px;
  /* Long conversations only lay out the bubbles near the scroll window. */
  content-visibility: auto;
  contain-intrinsic-size: auto 56px;
}

.bubble-row[data-tone="you"] {
  flex-direction: row-reverse;
}

.bubble-stack {
  display: grid;
  max-width: calc(100% - 40px);
  justify-items: start;
  gap: 3px;
}

.bubble-row[data-tone="you"] .bubble-stack {
  justify-items: end;
}

.bubble-name {
  padding: 0 10px;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
}

.bubble {
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 14px;
  color: var(--text);
  background: rgb(38 37 42 / 78%);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.bubble p {
  margin: 0;
}

.bubble p + p {
  margin-top: 6px;
}

.bubble-row[data-from="you"] .bubble {
  color: var(--bubble-text);
  background: var(--bubble);
  border-bottom-right-radius: 5px;
}

.bubble-row[data-from="planner"] .bubble,
.bubble-row[data-from="builder"] .bubble,
.bubble-row[data-from="validator"] .bubble {
  border-bottom-left-radius: 5px;
}

.bubble-row[data-from="planner"] .agent-avatar {
  background: #1d9bf0;
}

.bubble-row[data-from="builder"] .agent-avatar {
  background: #7c5cff;
}

.bubble-row[data-from="validator"] .agent-avatar {
  background: #00ba7c;
}

.bubble-meta {
  color: rgb(231 233 234 / 72%);
  font-size: 12px;
}

.bubble-row[data-from="you"] .bubble-meta {
  color: rgb(255 255 255 / 78%);
}

.bubble-scope {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 3px 7px;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  color: rgb(255 255 255 / 82%);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bubble-time {
  padding: 0 10px;
  color: var(--text-dim);
  font-size: 10px;
}

.agent-avatar {
  display: inline-grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.agent-avatar[data-agent="you"] {
  background: var(--bubble);
}

.agent-avatar[data-agent="planner"] {
  background: #1d9bf0;
}

.agent-avatar[data-agent="builder"] {
  background: #7c5cff;
}

.agent-avatar[data-agent="validator"] {
  background: #00ba7c;
}

.bubble.is-typing {
  display: inline-flex;
  min-width: 52px;
  padding: 12px 14px;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8e8e93;
  animation: typing-dot 1.05s ease-in-out infinite;
}

.typing-dots i:nth-child(2) {
  animation-delay: 0.14s;
}

.typing-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes typing-dot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.composer-examples {
  display: flex;
  flex-wrap: wrap;
  padding: 0 6px 4px;
  gap: 4px;
}

.composer-examples .chip {
  min-height: 20px;
  padding: 0 7px;
  font-size: 10px;
}

.component-handoff {
  margin: 0 6px 5px;
  padding: 6px 8px;
  gap: 8px;
  border: 1px solid rgb(10 132 255 / 34%);
  border-radius: 13px;
  background: var(--accent-soft);
}

.component-handoff > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
}

.component-handoff strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.component-handoff .agent-avatar {
  width: 24px;
  height: 24px;
}

.composer {
  z-index: 3;
  display: flex;
  align-items: flex-end;
  padding: 4px 6px 6px;
  gap: 6px;
  border-top: 0;
  background: rgb(0 0 0 / 36%);
  border-radius: 14px;
}

.composer .prompt-box {
  flex: 1;
  min-height: 28px;
  max-height: 64px;
  margin: 0;
  overflow: auto;
  resize: none;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The composer floats over the stage, which is right for someone who knows it
   is there and invisible to someone who does not. Three slow breaths of the
   accent ring while the workflow is idle and the prompt is empty, then it
   stops: the studio asks once and then gets out of the way. The global
   reduced-motion rule above collapses this to a single frame. */
.composer[data-awaiting="true"] {
  animation: composer-await 2.4s ease-in-out 3;
}

@keyframes composer-await {
  0%, 100% { box-shadow: 0 0 0 0 rgb(29 155 240 / 0%); }
  50% { box-shadow: 0 0 0 3px var(--accent-soft); }
}

/* `.thread-region` is `display: contents`, so the thread header and the card
   would auto-place as two items into a three-row grid — the card would take
   the log's flexible row and push the composer into an implicit one. While the
   card exists the header region becomes one block item again, keeping the
   panel exactly three rows. The card sizes itself and the thread log — the
   flexible row — yields: a dismiss button below the fold is worse than a
   shorter first-run thread, and the log scrolls. */
.thread-region:has(.first-run-card) {
  display: block;
}

.first-run-card {
  display: grid;
  margin: 6px;
  padding: 9px 11px;
  gap: 6px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--accent-soft);
  font-size: 11px;
  line-height: 1.45;
}

.first-run-card p,
.first-run-card ul {
  margin: 0;
}

.first-run-card ul {
  display: grid;
  padding-left: 15px;
  gap: 3px;
  color: var(--text-dim);
}

.first-run-card b {
  color: var(--text);
}

.first-run-card .tool-button {
  justify-self: start;
}

.bubble .chip {
  min-height: 24px;
  margin-top: 4px;
  color: var(--text);
  border-color: rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 8%);
}

.composer .prompt-box:focus {
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--bubble);
}

.send-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin-bottom: 1px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--bubble);
  cursor: pointer;
}

.send-button:hover:not(:disabled) {
  background: var(--bubble-hover);
}

.send-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.send-button svg {
  display: block;
}

.chip-button {
  display: inline-block;
  min-height: 26px;
  margin: 6px 6px 0 0;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #1d9bf0;
  cursor: pointer;
  border: 1px solid #1d9bf0;
  border-radius: 999px;
  background: transparent;
}

.chip-button:hover {
  background: rgb(29 155 240 / 15%);
}

.bubble-choices {
  margin-top: 6px;
}

.bubble-issues {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: rgb(231 233 234 / 80%);
}

.bubble-thumb {
  display: block;
  max-width: 96px;
  max-height: 96px;
  margin-bottom: 6px;
  border-radius: 12px;
}

.attach-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin-bottom: 1px;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  color: #71767b;
  cursor: pointer;
  border: 1px solid #2f3336;
  border-radius: 50%;
  background: transparent;
}

.attach-button:hover {
  color: var(--text);
  border-color: rgb(255 255 255 / 32%);
}

.composer-attachment {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 0;
  border-top: 1px solid var(--line);
  background: rgb(0 0 0 / 78%);
}

.composer-attachment + .composer {
  border-top: 0;
}

.composer-thumb {
  display: block;
  max-width: 64px;
  max-height: 64px;
  border-radius: 10px;
}

.preset-list {
  display: grid;
  gap: 6px;
  margin-top: var(--space-2);
}

.preset-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.preset-copy {
  display: grid;
  min-width: 0;
}

.preset-copy small {
  overflow: hidden;
  color: rgb(231 233 234 / 60%);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.template-row {
  align-items: flex-start;
}

.template-box {
  min-height: 48px;
  resize: vertical;
  box-shadow: inset 0 0 0 1px var(--line);
}

.agent-strip {
  display: flex;
  align-items: center;
  min-height: var(--row-h);
  gap: var(--space-2);
}

.agent-strip .agent-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.agent-strip .agent-avatar + .agent-avatar {
  margin-left: -12px;
}

.agent-strip-status {
  overflow: hidden;
  margin-left: var(--space-1);
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}

.lookbook-card {
  position: relative;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.lookbook-card[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lookbook-card-select {
  display: grid;
  width: 100%;
  padding: var(--space-2);
  gap: 4px;
  border: 0;
  background: transparent;
  text-align: left;
}

.lookbook-card-select img,
.lookbook-card-select .history-glyph {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 6px;
}

.lookbook-card-select strong,
.lookbook-card-select small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookbook-card-select small {
  color: var(--text-dim);
  font-size: 10px;
}

.lookbook-compare-toggle {
  width: calc(100% - var(--space-4));
  min-height: 22px;
  margin: 0 var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-0);
  color: var(--text-muted);
  font-size: 10px;
}

.lookbook-compare-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

.lookbook-comparison {
  display: grid;
  margin-top: var(--space-2);
  padding: var(--space-2);
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-0);
}

.lookbook-comparison > header {
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-size: 11px;
}

.lookbook-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--space-2);
}

.lookbook-comparison-grid article {
  display: grid;
  min-width: 0;
  padding: 6px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-1);
}

.lookbook-comparison-grid article[data-level="error"] { border-color: var(--error); }
.lookbook-comparison-grid article[data-level="warn"] { border-color: var(--warn); }

.lookbook-comparison-grid article[aria-current="true"] {
  outline: 1px solid var(--accent);
  background: var(--accent-soft);
}

.lookbook-comparison-select {
  display: grid;
  min-width: 0;
  padding: 0;
  gap: 3px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.lookbook-comparison-grid img,
.lookbook-comparison-grid .history-glyph {
  width: 100%;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
}

.lookbook-comparison-grid strong,
.lookbook-comparison-grid span,
.lookbook-comparison-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookbook-comparison-grid span,
.lookbook-comparison-grid small {
  color: var(--text-dim);
  font-size: 9px;
}

.lookbook-candidate-deltas {
  display: grid;
  margin: 3px 0 0;
  gap: 2px;
}

.lookbook-candidate-deltas > div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 3px;
  color: var(--text-dim);
  font-size: 9px;
}

.lookbook-candidate-deltas dt,
.lookbook-candidate-deltas dd {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lookbook-candidate-deltas div[data-changed="true"] dd,
.lookbook-candidate-deltas div[data-changed="true"] span {
  color: var(--accent);
}

.lookbook-dismiss {
  position: absolute;
  top: 2px;
  right: 2px;
}

.lookbook-collection-ref {
  margin: var(--space-2) 0 0;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 10px;
}

.concept-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 var(--space-2) var(--space-2);
}

.concept-chip {
  display: grid;
  width: 64px;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg-0);
}

.concept-chip-preview {
  display: grid;
  min-width: 0;
  padding: 0;
  gap: 2px;
  border: 0;
  background: transparent;
}

.concept-chip-preview img,
.concept-chip-preview .history-glyph {
  width: 100%;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}

.concept-chip-preview small {
  color: var(--text-dim);
  font-size: 9px;
  text-align: center;
}

.concept-chip-remove {
  min-height: 20px;
  padding: 2px 4px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  font-size: 9px;
}

.concept-chip-remove:hover,
.concept-chip-remove:focus-visible {
  background: var(--error-soft);
  color: var(--error);
}

.concept-viewer {
  display: grid;
  gap: var(--space-3);
}

.concept-viewer-frame {
  display: grid;
  min-height: 240px;
  max-height: calc(100vh - 300px);
  margin: 0;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #080b0f;
}

.concept-viewer-media {
  max-width: 100%;
  max-height: calc(100vh - 300px);
  object-fit: contain;
}

.concept-viewer-details {
  display: grid;
  margin: 0;
  gap: 4px;
}

.concept-viewer-details > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--space-2);
}

.concept-viewer-details dt,
.concept-viewer-details dd {
  margin: 0;
  color: var(--text-dim);
  font-size: 11px;
}

.concept-viewer-details dd {
  overflow-wrap: anywhere;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.concept-viewer-actions {
  justify-content: flex-end;
}

.history-list {
  display: grid;
  gap: var(--space-2);
}

.history-entry {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  min-height: var(--row-h);
  gap: var(--space-2);
  justify-content: space-between;
}

.history-entry img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.history-glyph {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
}

.history-copy {
  display: grid;
  min-width: 0;
}

.history-copy strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-copy small {
  color: var(--text-dim);
  font-size: 11px;
}

.history-seed {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Workflow phase dot on the Generate mode button. */
.mode-status {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 160ms ease;
}

.mode-button[data-phase="interpreting"] .mode-status,
.mode-button[data-phase="planning"] .mode-status,
.mode-button[data-phase="repairing"] .mode-status,
.mode-button[data-phase="approved"] .mode-status,
.mode-button[data-phase="committing"] .mode-status {
  background: var(--accent);
  animation: status-pulse 1.2s ease-in-out infinite;
}

.mode-button[data-phase="preview"] .mode-status,
.mode-button[data-phase="choice"] .mode-status {
  background: var(--warn);
}

.mode-button[data-phase="complete"] .mode-status {
  background: var(--ok);
}

.mode-button[data-phase="error"] .mode-status {
  background: var(--error);
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.seed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.swarm-row {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.numeric-property {
  align-items: start;
}

.number-control {
  position: relative;
  min-width: 0;
}

.number-control .numeric-input {
  padding-right: 48px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.number-unit {
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
  pointer-events: none;
  transform: translateY(-50%);
  font-variant-numeric: tabular-nums;
}

.workflow-state {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: var(--space-3);
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}

.workflow-state-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--info);
  font-family: var(--font-mono);
  font-weight: 800;
}

.workflow-state[data-level="ok"] .workflow-state-mark {
  color: var(--ok);
  background: var(--ok-soft);
}

.workflow-state[data-level="warn"] .workflow-state-mark {
  color: var(--warn);
  background: var(--warn-soft);
}

.workflow-state[data-level="error"] .workflow-state-mark {
  color: var(--error);
  background: var(--error-soft);
}

.workflow-state strong,
.workflow-state small {
  display: block;
}

.workflow-state strong {
  font-size: 11px;
}

.workflow-state small {
  margin-top: 2px;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.45;
}

.plan-identity,
.offer-details {
  display: grid;
  margin: 0;
  gap: var(--space-2);
}

.plan-identity > div,
.offer-details > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

.plan-identity dt,
.offer-details dt {
  color: var(--text-dim);
  font-size: 10px;
}

.plan-identity dd,
.offer-details dd {
  min-width: 0;
  margin: 0;
  color: var(--text-muted);
  font-size: 10px;
  text-align: right;
}

.plan-hash,
.plan-command code,
.diff-entry code,
.trust-card code,
.offer-details code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.plan-hash {
  display: block;
  max-height: 76px;
  overflow: auto;
  color: var(--accent-hover);
  text-align: left;
}

.plan-command-list {
  display: grid;
  padding: 0;
  margin: 0;
  gap: var(--space-2);
  list-style: none;
}

.plan-command {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 44px;
  padding: var(--space-2);
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.command-index {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 10px;
}

.command-copy {
  min-width: 0;
}

.command-copy strong,
.command-copy code {
  display: block;
}

.command-copy strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-copy code {
  margin-top: 2px;
  color: var(--text-dim);
}

.plan-ledger {
  display: grid;
  gap: var(--space-3);
}

.component-diff,
.acquisition-list {
  display: grid;
  gap: var(--space-2);
}

.diff-entry,
.acquisition-card {
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-1);
}

.diff-entry header,
.acquisition-card > header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.diff-entry header strong,
.acquisition-card header strong,
.acquisition-card header small {
  display: block;
}

.diff-entry header strong,
.acquisition-card header strong {
  overflow-wrap: anywhere;
  font-size: 10px;
}

.diff-entry p,
.acquisition-card header small {
  margin: 3px 0 0;
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1.45;
}

.diff-values {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  margin-top: var(--space-2);
  align-items: start;
  gap: var(--space-2);
  color: var(--text-dim);
}

.diff-values code {
  max-height: 104px;
  padding: 5px;
  overflow: auto;
  border-radius: 3px;
  color: var(--text-muted);
  background: var(--bg-2);
}

.acquisition-card {
  border-left: 3px solid var(--warn);
}

.acquisition-card .offer-details {
  margin-top: var(--space-3);
}

.policy-issue-list {
  display: grid;
  padding: 0;
  margin: var(--space-3) 0 0;
  gap: var(--space-1);
  color: var(--error);
  font-size: 10px;
  list-style: none;
}

.policy-issue-list li {
  padding: 6px 8px;
  border-left: 2px solid var(--error);
  background: var(--error-soft);
}

.workflow-actions {
  margin-top: var(--space-3);
}

.trust-grid {
  display: grid;
  gap: var(--space-2);
}

.trust-card {
  display: grid;
  min-width: 0;
  padding: var(--space-3);
  gap: 5px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.trust-card[data-level="ok"] {
  border-left-color: var(--ok);
}

.trust-card[data-level="warn"] {
  border-left-color: var(--warn);
}

.trust-card[data-level="error"] {
  border-left-color: var(--error);
}

.trust-card header {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
}

.trust-card header strong {
  font-size: 10px;
}

.trust-mark {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 800;
}

.trust-card[data-level="ok"] .trust-mark {
  color: var(--ok);
}

.trust-card[data-level="warn"] .trust-mark {
  color: var(--warn);
}

.trust-card[data-level="error"] .trust-mark {
  color: var(--error);
}

.trust-card > span {
  color: var(--text-dim);
  font-size: 10px;
}

.trust-card > code {
  color: var(--text-muted);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.metric-card {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}

.metric-label {
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.metric-value {
  display: block;
  margin-top: 1px;
  color: var(--text);
  font-size: 15px;
}

.budget-list {
  display: grid;
  gap: var(--space-3);
}

.budget-head {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  gap: var(--space-2);
}

.budget-label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.budget-numbers {
  color: var(--text-dim);
  font-size: 10px;
}

.meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.meter > span {
  display: block;
  width: min(100%, var(--meter-value, 0%));
  height: 100%;
  border-radius: inherit;
  background: var(--ok);
}

.meter[data-level="warn"] > span {
  background: var(--warn);
}

.meter[data-level="error"] > span {
  background: var(--error);
}

.issue-list {
  display: grid;
  gap: var(--space-2);
}

.issue-button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  width: 100%;
  min-height: 44px;
  padding: 8px;
  align-items: start;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-muted);
  background: var(--bg-1);
  text-align: left;
  cursor: pointer;
}

.issue-button:hover,
.issue-button[aria-current="true"] {
  border-color: var(--line-strong);
  background: var(--bg-3);
}

.issue-symbol {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

.issue-button[data-level="error"] .issue-symbol {
  color: var(--error);
  background: var(--error-soft);
}

.issue-button[data-level="warn"] .issue-symbol {
  color: var(--warn);
  background: var(--warn-soft);
}

.issue-message {
  min-width: 0;
  font-size: 10px;
  line-height: 1.45;
}

.issue-code {
  display: block;
  margin-bottom: 2px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
}

.validation-summary {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}

.validation-light {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgb(99 215 160 / 42%);
  border-radius: 50%;
  color: var(--ok);
  background: var(--ok-soft);
  font-size: 14px;
  font-weight: 800;
}

.validation-summary[data-level="warn"] .validation-light {
  color: var(--warn);
  border-color: rgb(245 196 81 / 42%);
  background: var(--warn-soft);
}

.validation-summary[data-level="error"] .validation-light {
  color: var(--error);
  border-color: rgb(255 113 133 / 42%);
  background: var(--error-soft);
}

.validation-copy {
  min-width: 0;
  flex: 1;
}

.validation-copy b {
  display: block;
  font-size: 12px;
}

.validation-copy span {
  color: var(--text-dim);
  font-size: 10px;
}

.toast-region {
  position: fixed;
  z-index: 200;
  right: var(--space-3);
  bottom: var(--space-3);
  display: grid;
  width: min(280px, calc(100vw - 24px));
  gap: var(--space-1);
  pointer-events: none;
}

.toast {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--text);
  background: rgb(22 24 28 / 92%);
  box-shadow: var(--shadow);
  font-size: 13px;
  animation: toast-in 140ms ease-out;
  pointer-events: auto;
  cursor: pointer;
}

.toast[data-level="error"] {
  border-left: 3px solid var(--error);
}

.toast[data-level="warn"] {
  border-left: 3px solid var(--warn);
}

.toast[data-level="ok"] {
  border-left: 3px solid var(--ok);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.mobile-sheet-nav {
  display: none;
}

.noscript-message {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  padding: 24px;
  place-content: center;
  color: var(--text);
  background: var(--bg-0);
  text-align: center;
}

@media (max-width: 1180px) {
  .workspace-name {
    max-width: 200px;
  }

  .topbar-examples button:nth-child(n + 4) {
    display: none;
  }

  .inspector {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 940px) {
  :root,
  .app-shell[data-density] {
    --topbar-height: 44px;
  }

  .topbar {
    padding-inline: 6px;
  }

  .workspace-name {
    max-width: 148px;
    font-size: 13px;
  }

  .topbar-examples button:nth-child(n + 3) {
    display: none;
  }
}

@media (max-width: 820px) {
  :root,
  .app-shell[data-density] {
    --topbar-height: 36px;
  }

  body {
    overscroll-behavior: none;
  }

  .app-shell {
    padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .topbar {
    gap: 4px;
    overflow: hidden;
  }

  .save-status,
  .palette-button,
  .topbar-examples,
  .viewport-transport [data-action="ui:toggle-density"] {
    display: none;
  }

  .tool-button,
  .icon-button,
  .toggle-button,
  .small-button,
  select,
  input[type="text"],
  input[type="number"] {
    min-height: 32px;
  }

  .transport-primary {
    width: 32px;
  }

  .accent-button {
    min-width: 56px;
    height: 32px;
  }

  .studio-grid {
    position: static;
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .stage-column {
    display: contents;
  }

  .qty-strip {
    display: none;
  }

  .workspace {
    position: absolute;
    inset: var(--topbar-height) 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) 0;
    display: block;
  }

  .viewport-overlay-plane {
    display: contents;
  }

  .viewport-stage {
    display: block;
    width: 100%;
    height: 100%;
  }

  .viewport-chrome {
    display: contents;
  }

  .viewport-chrome .panel-floating {
    border: 1px solid rgb(47 51 54 / 80%);
    border-radius: var(--radius-lg);
    background: rgb(22 24 28 / 90%);
    box-shadow: 0 8px 28px rgb(0 0 0 / 40%);
  }

  .left-dock,
  .control-deck,
  .timeline {
    position: fixed;
    z-index: 90;
    right: 0;
    bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    pointer-events: auto;
    height: min(52dvh, 520px);
    max-height: calc(100dvh - var(--topbar-height) - var(--mobile-nav-height) - env(safe-area-inset-bottom));
    border: 1px solid var(--line-strong);
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -16px 44px rgb(0 0 0 / 40%);
    /* Park inactive sheets fully below the nav, not 12 px under its top edge:
       the nav is 86 % black, so a sheet header left behind it (the timeline's
       timecode, for one) showed through. visibility:hidden also takes the
       sheet's ~80 controls out of the tab order; the delay keeps the slide
       animation, and the active rule below clears the delay on the way in. */
    transform: translateY(calc(100% + var(--mobile-nav-height) + env(safe-area-inset-bottom) + 12px));
    visibility: hidden;
    transition: transform 160ms ease-out, visibility 0s linear 160ms;
  }

  .left-dock {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-1);
  }

  .thread-surface {
    min-height: 0;
    height: 100%;
    background: var(--bg-1);
  }

  .control-deck {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }

  .mode-rail {
    padding: 0 2px;
    gap: 0;
    overflow: hidden;
  }

  .mode-button {
    min-width: 0;
    min-height: 28px;
    padding: 0;
    gap: 0;
  }

  .mode-glyph {
    display: grid;
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .mode-button::before {
    right: 6px;
    bottom: 0;
    left: 6px;
  }

  .mode-label {
    display: none;
  }

  .inspector {
    display: block;
    overflow: hidden auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .inspector .eyebrow {
    display: block;
  }

  .inspector .panel-title {
    font-size: 17px;
  }

  .inspector > .panel-header {
    min-height: var(--panel-header-h);
    padding: 8px var(--space-4);
  }

  .timeline {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .app-shell[data-mobile-sheet="left"] .left-dock,
  .app-shell[data-mobile-sheet="timeline"] .timeline,
  .app-shell[data-mobile-sheet="inspector"] .control-deck {
    transform: translateY(0);
    visibility: visible;
    transition: transform 160ms ease-out, visibility 0s;
  }

  .mobile-sheet-nav {
    position: fixed;
    z-index: 110;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    padding: 2px 4px env(safe-area-inset-bottom);
    gap: 2px;
    border-top: 1px solid var(--line);
    background: rgb(0 0 0 / 86%);
  }

  .mobile-sheet-nav button {
    /* A 44 px target inside the 52 px nav; 32 px was under the touch minimum. */
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    background: transparent;
    font-size: 10px;
    font-weight: 700;
  }

  .mobile-sheet-nav button[aria-pressed="true"] {
    color: var(--accent-hover);
    background: var(--accent-soft);
  }

  .viewport-toolbar {
    position: absolute;
    top: 8px;
    right: 8px;
    left: 8px;
    max-width: none;
    padding: 2px;
  }

  .viewport-toolbar .toggle-button {
    min-width: 52px;
  }

  .viewport-transport {
    position: absolute;
    bottom: 8px;
    left: 50%;
    padding: 2px;
    transform: translateX(-50%);
  }

  .viewport-stats {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 6px 9px;
  }

  .selection-breadcrumb {
    position: absolute;
    bottom: 8px;
    left: 8px;
    max-width: 52%;
    padding: 6px 9px;
    pointer-events: none;
  }

  .viewport-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    place-self: auto;
  }

  .timeline-head {
    grid-template-columns: auto minmax(100px, 1fr);
    min-height: 36px;
  }

  .timeline-head > :last-child {
    display: none;
  }

  .timeline-body {
    grid-template-columns: 112px minmax(220px, 1fr);
    height: calc(100% - 36px);
  }

  .filmstrip {
    grid-template-columns: 1fr;
  }

  .toast-region {
    top: calc(var(--topbar-height) + 8px);
    right: 8px;
    bottom: auto;
  }

  .app-shell[data-mobile-sheet="left"] .left-dock {
    height: min(74dvh, 720px);
  }

  .property-row {
    grid-template-columns: minmax(96px, 0.8fr) minmax(142px, 1.2fr);
  }

  .facs-control {
    grid-template-columns: minmax(0, 1fr) 120px;
    min-height: 28px;
  }

  .facs-control input[type="range"] {
    height: 28px;
  }
}

@media (max-width: 430px) {
  .viewport-toolbar .toggle-button:nth-of-type(n + 3) {
    display: none;
  }

  .viewport-stats span:nth-child(n + 2) {
    display: none;
  }

  .panel-section {
    padding-inline: var(--space-3);
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .generation-locks {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }

  .progress-spinner {
    animation: none;
    border-color: var(--accent);
  }
}

.viewport-message[hidden] {
  display: none !important;
}

#dialog-layer {
  position: relative;
  z-index: 100;
}

.aegis-dialog {
  width: min(680px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--border-strong, #344151);
  border-radius: 10px;
  color: var(--text, #dce7f3);
  background: #111821;
  box-shadow: 0 24px 80px rgb(0 0 0 / 65%);
}

.aegis-dialog.dialog-wide {
  width: min(1040px, calc(100vw - 32px));
}

.aegis-dialog::backdrop {
  background: rgb(3 7 12 / 78%);
}

.dialog-header {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #26323f);
}

.dialog-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .02em;
}

.dialog-body {
  overflow: auto;
  max-height: calc(100vh - 104px);
  padding: 16px;
}

[data-rename] {
  cursor: text;
}

/* A rename trigger is a real button (keyboard reachable) styled as the text it renames. */
.rename-trigger {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  line-height: inherit;
}

/* The left panel's stable regions do not take part in its layout. */
.thread-region {
  display: contents;
}

.inline-rename {
  min-width: 0;
  max-width: 220px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  background: var(--bg-2);
  font: inherit;
}

.project-list {
  display: grid;
  gap: var(--space-2);
}

.project-manager > h3 {
  margin: var(--space-3) 0 var(--space-2);
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-manager > h3:first-child {
  margin-top: 0;
}

.collection-list {
  margin-bottom: var(--space-3);
}

.project-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}

.project-row[data-active="true"] {
  border-color: rgb(29 155 240 / 40%);
  background: var(--accent-soft);
}

.project-copy {
  display: grid;
  min-width: 0;
}

.project-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-copy small {
  color: var(--text-dim);
  font-size: 11px;
}

.project-actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

.generation-list {
  display: grid;
  margin: -2px 0 var(--space-1);
  padding: var(--space-2) var(--space-3);
  gap: var(--space-1);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-1);
}

.generation-row {
  display: flex;
  align-items: center;
  min-height: var(--row-h);
  gap: var(--space-2);
}

.generation-row strong {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.generation-row small {
  flex: 1;
  color: var(--text-dim);
  font-size: 11px;
}

.vault-usage {
  flex: 1;
  align-self: center;
  color: var(--text-dim);
  font-size: 11px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  gap: var(--space-2);
  border-top: 1px solid var(--line);
}

.shortcut-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  margin: 0;
  gap: var(--space-2) var(--space-4);
}

.shortcut-list dt,
.shortcut-list dd {
  margin: 0;
}

.shortcut-list kbd {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

.shortcut-list dd {
  color: var(--text-muted);
  font-size: 12px;
}

.palette-input {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--bg-2);
  font: inherit;
}

.palette-list {
  display: grid;
  max-height: 320px;
  gap: 2px;
  overflow: auto;
}

.palette-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-h);
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.palette-item[data-selected="true"],
.palette-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.palette-item kbd {
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 11px;
}

.texture-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.texture-preview-grid figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--border, #26323f);
  border-radius: 8px;
  background: #0b1017;
}

.texture-preview-grid canvas {
  display: block;
  width: 100%;
  height: auto;
}

.texture-preview-grid figcaption {
  padding: 8px 10px;
  color: var(--text-muted, #8fa0b1);
  font-size: 11px;
}

.classic-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
}

.editor-canvas-stack {
  position: relative;
  align-self: start;
}

.editor-canvas-stack canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border, #26323f);
  background: #0a0f15;
  image-rendering: pixelated;
  touch-action: none;
}

.editor-canvas-stack canvas + canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.editor-controls {
  display: flex;
  align-content: start;
  flex-direction: column;
  gap: 12px;
}

.editor-controls label {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  color: var(--text-muted, #8fa0b1);
  font-size: 12px;
}

.diagnostic-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.diagnostic-table th,
.diagnostic-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #26323f);
  text-align: left;
}

.diagnostic-table th {
  color: var(--text-muted, #8fa0b1);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 700px) {
  .texture-preview-grid,
  .classic-editor {
    grid-template-columns: 1fr;
  }
}

@media (forced-colors: active) {
  .meter > span,
  .save-status::before,
  .validation-light,
  .issue-symbol {
    forced-color-adjust: none;
  }
}

/* The planner's reading of your description, shown before you approve a plan.
   Deliberately quiet: it is context for a decision, not a result in itself. */
.interpretation {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-2);
  padding: var(--space-3);
}

.interpretation-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.interpretation-text {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
}

.interpretation .chip-row {
  margin-top: var(--space-2);
}

/* Read-only provenance chips, unlike the interactive style-tag chips above. */
.interpretation .chip {
  cursor: default;
  color: var(--text-muted);
}

/* Frosted chrome only where nothing repaints beneath it every frame — the
   top bar, the thread's own header and composer, toasts, the mobile sheet
   nav, dialog backdrops — and only for people who have not asked the OS for
   less transparency (#17). The viewport overlays and the sticky panel
   headers are opaque above. */
@media (prefers-reduced-transparency: no-preference) {
  .topbar,
  .thread-header,
  .composer,
  .toast,
  .mobile-sheet-nav {
    backdrop-filter: saturate(180%) blur(20px);
  }

  .aegis-dialog::backdrop {
    backdrop-filter: blur(5px);
  }
}