:root {
  color-scheme: dark;
  --bg: #11101b;
  --surface: #191827;
  --surface-2: #222034;
  --text: #f5f3ff;
  --muted: #a6a2b8;
  --border: rgba(255, 255, 255, 0.13);
  --focus: #ffb45e;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f5f2;
  --surface: #ffffff;
  --surface-2: #eeeaf1;
  --text: #211d28;
  --muted: #625c6b;
  --border: rgba(39, 31, 47, 0.14);
  --focus: #8a4c13;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--text);
  transition:
    background-color 220ms ease,
    color 220ms ease;
}

.site-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-color: var(--border);
}

.brand-light {
  color: var(--muted);
}

.nav-links a {
  color: var(--muted);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text);
}

.nav-cta,
.icon-btn {
  border-color: var(--border);
}

.icon-btn:hover,
.nav-cta:hover {
  background: var(--surface-2);
}

.theme-toggle .i-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .i-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .i-sun {
  display: block;
}

.btn {
  border-radius: 6px;
}

.btn-primary {
  background: #ffb45e;
  color: #20172a;
}

.btn-primary:hover {
  background: #ffc47e;
}

.skip:focus {
  border-radius: 6px;
}

[data-theme="light"] .announcement {
  background: #ece8f0;
  color: #514a5c;
}

[data-theme="light"] .announcement a {
  color: #704018;
}

[data-theme="light"] .hero-stage {
  background: radial-gradient(ellipse at 74% 48%, #eee4f5 0%, #f7f5f2 54%);
}

[data-theme="light"] .hero-copy h1,
[data-theme="light"] .section-heading h2,
[data-theme="light"] .creator-grid h2 {
  color: #211d28;
}

[data-theme="light"] .eyebrow,
[data-theme="light"] .hero-lead,
[data-theme="light"] .hero-footnote,
[data-theme="light"] .section-aside,
[data-theme="light"] .cap-card p,
[data-theme="light"] .creator-copy .creator-muted {
  color: #625c6b;
}

[data-theme="light"] .hero-footnote b {
  color: #302a38;
}

[data-theme="light"] .hero-orbit {
  border-color: rgba(67, 45, 80, 0.08);
}

[data-theme="light"] .art-ring {
  border-color: rgba(105, 74, 129, 0.2);
}

[data-theme="light"] .floating-chip {
  background: #fff;
  border-color: rgba(39, 31, 47, 0.12);
  color: #211d28;
  box-shadow: 0 15px 40px rgba(37, 26, 48, 0.14);
}

[data-theme="light"] .floating-chip small {
  color: #625c6b;
}

[data-theme="light"] .cap-card {
  background: #fff;
  border-color: var(--border);
  color: #211d28;
  box-shadow: 0 12px 32px rgba(37, 26, 48, 0.045);
}

[data-theme="light"] .cap-card.cap-purple {
  background: #eee6f4;
}

[data-theme="light"] .cap-card.cap-blue {
  background: #e6edf5;
}

[data-theme="light"] .cap-card.cap-wide {
  background: #e9e1f0;
}

[data-theme="light"] .cap-top {
  color: #625c6b;
}

[data-theme="light"] .showcase-section {
  background: #efedf1;
}

[data-theme="light"] .showcase-frame {
  background: #fff;
  border-color: var(--border);
  box-shadow: 0 18px 50px rgba(37, 26, 48, 0.07);
}

[data-theme="light"] .showcase-meta,
[data-theme="light"] .showcase-caption {
  color: #625c6b;
}

[data-theme="light"] .v2-section {
  background: #eee8f3;
}

[data-theme="light"] .v2-copy h2,
[data-theme="light"] .v2-copy > p:not(.eyebrow) {
  color: #211d28;
}

[data-theme="light"] .release-status {
  border-color: var(--border);
}

[data-theme="light"] .release-status small {
  color: #625c6b;
}

[data-theme="light"] .creator-section {
  background: var(--bg);
}

[data-theme="light"] .archive-cta {
  background: #eee8f3;
}

[data-theme="light"] .site-footer {
  background: #eeecef;
  border-top: 1px solid var(--border);
}

[data-theme="light"] .footer-main > p,
[data-theme="light"] .footer-links a,
[data-theme="light"] .footer-bottom,
[data-theme="light"] .site-footer ul a,
[data-theme="light"] .site-footer p {
  color: #625c6b;
}

[data-theme="light"] .page-head {
  background: radial-gradient(ellipse at 80% 10%, #eee4f5, transparent 56%);
  border-color: var(--border);
}

[data-theme="light"] .page-head .lead,
[data-theme="light"] .page-body p {
  color: #625c6b;
}

[data-theme="light"] .dl-card,
[data-theme="light"] .info-card,
[data-theme="light"] .contact-card,
[data-theme="light"] .step,
[data-theme="light"] .info-section,
[data-theme="light"] .doc-content section {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(37, 26, 48, 0.035);
}

[data-theme="light"] .dl-meta dt,
[data-theme="light"] .doc-nav a,
[data-theme="light"] .small-note,
[data-theme="light"] .fine-print {
  color: #625c6b;
}

[data-theme="light"] .btn.secondary {
  border-color: rgba(39, 31, 47, 0.28);
  color: var(--text);
}

[data-theme="light"] .legacy-alert {
  background: #f3edf6;
  color: var(--text);
}

[data-theme="light"] .legacy-version {
  border-color: var(--border);
}

@media (max-width: 1050px) {
  body[data-root=""] .nav-cta {
    display: none;
  }
}

@media (max-width: 760px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .doc-nav {
    position: static;
  }

  #doc-content,
  .doc-sec {
    min-width: 0;
    max-width: 100%;
  }

  .doc-sec {
    overflow-wrap: anywhere;
  }

  .hero-copy,
  .hero-art,
  .v2-inner,
  .creator-grid,
  .v2-inner > *,
  .creator-grid > * {
    min-width: 0;
  }

  .v2-inner,
  .creator-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-links {
    background: var(--bg);
    border-color: var(--border);
  }

  [data-theme="light"] .nav-links a {
    border-color: var(--border);
  }
}

@media (max-width: 480px) {
  .v2-copy h2 {
    font-size: clamp(2.65rem, 13vw, 3.5rem);
  }

  .creator-grid h2 {
    font-size: clamp(2.65rem, 14vw, 3.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }

  .app-window {
    animation: none;
  }
}