/* Shared logo palette; existing components and semantic states keep their roles. */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --paper: #f7f5f1;
  --brand-surface: #fefbf6;
  --white: #ffffff;
  --ink: #242337;
  --muted: #625f70;
  --line: #d7d3df;
  --surface-2: #efedf5;
  --surface-3: #e7e2f3;
  --control-border: #85808f;
  --accent: #5043c9;
  --accent-ink: #ffffff;
  --accent-hover: #4035a7;
  --coral: #b34431;
  --focus: #5043c9;
  --green: var(--accent);
  --studio-page-focus: var(--focus);
  --scene-center: #efedf5;
  --scene-edge: #f7f5f1;
  --platform-top: #e0d9eb;
  --platform-side: #c7bed9;
  --brand-grid: #5043c90a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #19191f;
  --brand-surface: #00082e;
  --white: #23232d;
  --ink: #f2f0f7;
  --muted: #bfb9cd;
  --line: #44404f;
  --surface-2: #2c2935;
  --surface-3: #393342;
  --control-border: #8b8499;
  --accent: #c3b6ff;
  --accent-ink: #221a40;
  --accent-hover: #d7ceff;
  --coral: #ffae99;
  --focus: #d1c5ff;
  --green: var(--accent);
  --studio-page-focus: var(--focus);
  --scene-center: #322a42;
  --scene-edge: #19191f;
  --platform-top: #514660;
  --platform-side: #211d2b;
  --brand-grid: #c3b6ff0d;
}
.sidebar { background: var(--paper); }
/* Match the complete branding surfaces to the original opaque logo crops. */
:root[data-theme] :is(.header, .footer, .model-page-footer, .author-page-footer) { background: var(--brand-surface); }
.header .brand { padding-inline: 12px; gap: 0; }
.header .brand-logo { width: 186px; height: auto; max-width: 100%; aspect-ratio: 400 / 141; object-fit: contain; }
.footer-brand .brand-logo { width: 150px; height: auto; max-width: 100%; aspect-ratio: 400 / 141; object-fit: contain; }
:root[data-theme] .button.dark, :root[data-theme] .studio-open { border-color: var(--accent); }
:root .button.dark:hover:not(:disabled):not([aria-disabled="true"]), :root .studio-open:hover {
  background: var(--accent-hover); color: var(--accent-ink); border-color: var(--accent-hover);
}
:root[data-theme] .studio-thumbnail[aria-pressed="true"] .studio-thumbnail-image { border-color: var(--focus); }
.studio-information .eyebrow, #divider-page .box-intro .eyebrow, #box-page .box-intro .eyebrow { color: var(--coral); }
.box-page .box-stage {
  background-color: var(--surface-2); border-color: var(--line);
  background-image: linear-gradient(var(--brand-grid) 1px,transparent 1px),linear-gradient(90deg,var(--brand-grid) 1px,transparent 1px);
}
.box-page .box-badge { background: var(--surface-3); border-color: var(--line); color: var(--ink); }
.box-page .box-gesture { color: var(--muted); border-color: var(--line); }
#divider-page .divider-mode-card:has(input:checked) { background: var(--surface-3); border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
:is(a,button,input,textarea,select,summary,canvas):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
:root :is(button:disabled,input:disabled,select:disabled,textarea:disabled,.button[aria-disabled="true"],.catalog-pagination button:disabled),
:root :is(.model-page,.author-page,.box-page,.workshop-page,#model-dialog,#about-dialog,#concept-dialog) :is(button:disabled,input:disabled,select:disabled,textarea:disabled,[aria-disabled="true"]) {
  opacity: 1; color: var(--muted); background: var(--surface-2); border-color: var(--control-border); cursor: not-allowed;
}
@media (max-width: 900px) {
  .header .brand { padding-inline: 0; }
}
@media (max-width: 600px) {
  .header { padding-inline: 14px; column-gap: 8px; }
  .header .brand-logo { width: 150px; height: auto; }
  .header-end { gap: 6px; min-width: 0; }
  .header-end .theme-picker select { width: 94px; max-width: 94px; padding-inline: 6px; }
  .header-end .language-picker select { width: 55px; min-width: 55px; padding-inline: 6px; }
}
@media (max-width: 360px) {
  .header { column-gap: 6px; }
  .header-end .theme-picker select { width: 78px; max-width: 78px; padding-inline: 4px; font-size: 11px; }
  .header-end .language-picker select { width: 50px; min-width: 50px; padding-inline: 4px; font-size: 11px; }
}