:root[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #0d1523;
  --theme-surface: #151f30;
  --theme-subtle: #19273c;
  --theme-raised: #24344c;
  --theme-selected: #243958;
  --theme-glass: #151f30f2;
  --theme-foreground: #edf2fa;
  --theme-muted: #b7c5d9;
  --theme-dim: #a2b2ca;
  --theme-link: #a3baff;
  --theme-border: #374861;
  --theme-focus: #8daaff;
  --theme-danger: #ffabb4;
  --theme-success: #8ce1ba;
  --theme-warning: #f2cf91;
  --theme-danger-soft: #382330;
  --theme-warning-soft: #342c24;
  --theme-success-soft: #18382f;
  --tabs-text-muted: var(--theme-muted);
  --tabs-text-active: var(--theme-foreground);
  --tabs-bar-bg: var(--theme-subtle);
  --tabs-pill-bg: var(--theme-surface);
}
.theme-toggle-slot {
  display: inline-flex;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}
.theme-toggle.ui-button {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--theme-border, #dfe6f2);
  border-radius: 10px;
  color: var(--theme-muted, #526782);
  background: var(--theme-surface, #fff);
  cursor: pointer;
  transition:
    background-color 150ms,
    border-color 150ms,
    color 150ms;
}
.theme-toggle.ui-button:hover {
  color: var(--theme-link, #285cf4);
  border-color: var(--theme-focus, #b7c9fa);
  background: var(--theme-subtle, #f3f6ff);
}
.theme-toggle.ui-button:focus-visible {
  outline: 2px solid var(--theme-focus, #285cf4);
  outline-offset: 3px;
}
.theme-toggle svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}
@media (max-width: 400px) {
  .header-actions {
    gap: 4px;
  }
  .theme-toggle.ui-button {
    width: 40px;
    flex-basis: 40px;
  }
}
@view-transition {
  navigation: auto;
}
.public-model-preview > img {
  view-transition-name: model-preview;
}
::view-transition-group(model-preview) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  overflow: clip;
  border-radius: 18px;
}
::view-transition-old(model-preview),
::view-transition-new(model-preview) {
  height: 100%;
  object-fit: contain;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*) {
    animation: none !important;
  }
  .theme-toggle.ui-button {
    transition: none;
  }
}
@media (max-width: 700px) {
  .header-inner .theme-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 44px;
  }
  .header-inner .primary-nav {
    max-width: calc(100% - 52px);
    gap: clamp(12px, 4vw, 24px);
  }
  body > .site-header {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 12px;
  }
  body > .site-header > nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
}

:root[data-theme="dark"] :focus-visible {
  outline-color: var(--theme-focus);
}
.animation-controls select option {
  background: var(--theme-surface, #fff);
  color: var(--theme-foreground, #34445c);
}

/* Tailwind's important utilities take precedence over unlayered rules.
   Keep this inverse label in the earlier theme layer so the existing
   text-white utility cannot erase it on the light selection background. */
@layer theme {
  :root[data-theme="dark"] .earto-pagination [aria-current="page"] {
    color: var(--theme-page) !important;
  }
}
:root[data-theme="dark"] .text-link:hover,
:root[data-theme="dark"] .manual-footer > span:last-child {
  color: var(--theme-link);
}
:root[data-theme="dark"] .manual-error {
  color: var(--theme-danger);
}
:root .manual-editor .manual-danger {
  color: var(--theme-danger, #b6353a);
}
:root .installation-download small {
  color: inherit;
}
/* Motion supplies a positive physical X offset for each page slot.
   Mirror that offset and anchor on the right for RTL number lists. */
:root[dir="rtl"] .earto-pagination > div > div > span {
  left: auto;
  right: 0;
  scale: -1 1;
}
:root[dir="rtl"] .earto-pagination > div > :is(a, button) svg {
  scale: -1 1;
}