:root {
  --page: #f1f4f7;
  --surface: #ffffff;
  --surface-soft: #f7f9fb;
  --ink: #0f172a;
  --muted: #526176;
  --line: #cbd5e1;
  --sky: #0ea5e9;
  --rose: #f43f5e;
  --rose-text: #be123c;
  --accent-text: #036a9a;
  --on-strong: #ffffff;
  --faint: var(--muted);
  --accent-soft: #e0f2fe;
  --accent-halo: rgba(14, 165, 233, .07);
  --rose-soft: #ffe4e6;
  --nav-surface: rgba(255, 255, 255, .92);
  --shadow: rgba(15, 23, 42, .09);
  --product-stage: #ffffff;
  --snow: var(--surface-soft);
  color-scheme: light;
}

:root[data-theme='dark'] {
  --page: #1c1c1e;
  --surface: #232325;
  --surface-soft: #2a2a2d;
  --ink: #f5f5f7;
  --muted: #b5b5ba;
  --line: #454548;
  --rose-text: #d6c1c6;
  --accent-text: #dedee2;
  --on-strong: #1c1c1e;
  --faint: var(--muted);
  --accent-soft: #363638;
  --accent-halo: rgba(255, 255, 255, .07);
  --rose-soft: #393537;
  --nav-surface: rgba(31, 31, 33, .9);
  --shadow: rgba(0, 0, 0, .34);
  --product-stage: #ededf0;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --page: #1c1c1e;
    --surface: #232325;
    --surface-soft: #2a2a2d;
    --ink: #f5f5f7;
    --muted: #b5b5ba;
    --line: #454548;
    --rose-text: #d6c1c6;
    --accent-text: #dedee2;
    --on-strong: #1c1c1e;
    --faint: var(--muted);
    --accent-soft: #363638;
    --accent-halo: rgba(255, 255, 255, .07);
    --rose-soft: #393537;
    --nav-surface: rgba(31, 31, 33, .9);
    --shadow: rgba(0, 0, 0, .34);
    --product-stage: #ededf0;
    color-scheme: dark;
  }
}

html { background: var(--page); }
body { background: var(--page); color: var(--ink); }
.skip-link { background: var(--surface); color: var(--ink); }

.theme-control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}
.theme-control select {
  flex: none;
  min-height: 44px;
  max-width: 126px;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.theme-control select:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

#home,
.story-secretary,
.executive-section { background: var(--surface); color: var(--ink); }
.story-coach,
.devices-section,
.site-footer { background: var(--surface-soft); color: var(--ink); }

.chapter-nav {
  background: var(--nav-surface);
  border-color: var(--line);
  color: var(--ink);
}
.chapter-links,
.chapter-languages,
#home .languages { color: var(--muted); }
.chapter-languages span,
#home .languages i { color: var(--faint); }
.chapter-links a[aria-current='true'],
#home .languages .current { color: var(--ink); }

#home .demo,
.round-link { background: var(--ink); color: var(--on-strong); }
#home .edition,
#home .capability .index,
#home .capability .description,
#home .explore,
#home .footer,
#home .acronym dd,
#home .term-zh { color: var(--muted); }
#home .term-en { color: var(--ink); }
#home .term-divider,
#home .capability .arrow,
#home .explore .down { color: var(--faint); }
#home .acronym,
#home .footer { border-color: var(--line); }
#home .acronym-pair:nth-child(1) dt,
#home .acronym-pair:nth-child(3) dt,
#home .capability:hover .label,
#home .capability:hover .arrow { color: var(--accent-text); }
#home .acronym-pair:nth-child(5) dt,
#home .acronym-pair:nth-child(6) dt { color: var(--rose-text); }

#home .product-art,
.orbit-stage {
  background: var(--product-stage);
  box-shadow: 0 20px 64px var(--shadow);
}
#home .product-art { border-radius: 44% 44% 24% 24% / 22% 22% 12% 12%; overflow: hidden; }
#home .product-art.has-gaze-head { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
#home .has-gaze-head .gaze-body { filter: drop-shadow(0 18px 22px var(--shadow)); }
.orbit-stage { border: 1px solid var(--line); border-radius: 5px 30px 5px 5px; }
#home .product-art > .shell,
.story-shell,
.story-product-art,
#home .gaze-body { mix-blend-mode: normal; filter: none; }

.story-heading .eyebrow > span { color: var(--accent-text); }
.story-coach .story-heading .eyebrow > span { color: var(--rose-text); }
.story-caption,
.story-step > p,
.story-step-trigger,
.step-number,
.step-arrow,
.story-progress,
.story-view-label { color: var(--muted); }
.story-step,
.story-caption,
.story-steps { border-color: var(--line); }
.story-step.is-active .story-step-trigger,
.story-step-trigger h3 { color: var(--ink); }
html[lang] .story-section .story-step-trigger h3 { color: var(--ink); }

.executive-section {
  --executive-ink: var(--ink);
  --executive-snow: var(--surface-soft);
}
.executive-kicker,
.executive-lede,
.executive-tab,
.executive-tab small,
.executive-console-bar,
.executive-project-row em,
.executive-caption,
.executive-idea-path article small,
.executive-memory-map article small,
.executive-memory-core small { color: var(--muted); }
.executive-tab-number,
.executive-tab > span:last-child,
.executive-idea-path > b { color: var(--faint); }
.executive-console-dots i { background: var(--line); }
.executive-panel-head a { border-color: var(--faint); }
.executive-index,
.executive-tab,
.executive-console,
.executive-console-bar,
.executive-demo-label,
.executive-project-list,
.executive-project-row,
.executive-flow span,
.executive-idea-path,
.executive-memory-map { border-color: var(--line); }
.executive-console { background: var(--surface-soft); box-shadow: 0 26px 70px var(--shadow); }
.executive-panel { background: var(--surface-soft); color: var(--ink); }
.executive-tab { background: transparent; color: var(--muted); }
.executive-tab:hover,
.executive-tab.is-active { background: var(--accent-halo); color: var(--ink); }
.executive-console-bar,
.executive-flow span,
.executive-idea-path,
.executive-memory-map { background: var(--surface); }
.executive-demo-label { background: var(--surface-soft); }
.executive-project-row span,
.executive-flow span,
.executive-question p,
.executive-panel blockquote { color: var(--ink); }
.executive-flow i { background: var(--line); }
.executive-flow i::after { border-color: var(--faint); }
.executive-panel-head a:hover,
.executive-flow span.is-current { color: var(--accent-text); }
.executive-memory-core { background: var(--accent-soft); border-color: var(--sky); }
.executive-question span { color: var(--rose-text); }
.executive-kicker span,
.executive-tab.is-active .executive-tab-number,
.executive-overline,
.executive-idea-path article span,
.executive-memory-map article span { color: var(--accent-text); }

.devices-section {
  --devices-ink: var(--ink);
  --devices-snow: var(--surface-soft);
}
.devices-panel { background: var(--surface); color: var(--ink); }
.devices-switcher button { background: transparent; color: var(--muted); }
.devices-switcher button:hover,
.devices-switcher button.is-active { color: var(--ink); }
.devices-kicker,
.devices-heading-copy p,
.devices-heading-copy span,
.devices-switcher button,
.devices-flow-label span,
.device-node small,
.devices-hub small,
.devices-status,
.devices-notes p { color: var(--muted); }
.devices-switcher button span { color: var(--faint); }
.devices-switcher,
.devices-stage,
.devices-flow-label,
.devices-status,
.devices-notes,
.devices-notes article + article { border-color: var(--line); }
.devices-stage { background: var(--surface); box-shadow: 0 28px 72px var(--shadow); }
.device-phone,
.device-watch,
.device-mac,
.device-tv,
.device-car,
.devices-hub { background: var(--surface); }
.device-car::before,
.device-car::after { border-color: var(--surface); }
.device-phone i,
.device-mac i,
.device-tv i { background: linear-gradient(145deg, var(--accent-soft), var(--surface-soft) 62%, var(--rose-soft)); }
.device-car i { background: var(--accent-soft); }
.devices-stream { background: var(--line); }
.devices-hub { border-color: var(--sky); box-shadow: 0 0 0 14px var(--accent-halo), 0 18px 36px var(--shadow); }
.devices-hub::before { border-color: var(--line); }
.devices-kicker span,
.devices-notes span { color: var(--rose-text); }
.devices-switcher button.is-active span { color: var(--accent-text); }

.site-footer { border-top: 1px solid var(--line); }
.footer-bottom { border-color: var(--line); color: var(--muted); }
.pending-section { background: var(--surface); border-color: var(--line); }
.pending-section p { color: var(--muted); }

@media (max-width: 900px) {
  #home .product-art { border-radius: 32% 32% 18% 18% / 18% 18% 10% 10%; }
  #home header { gap: 10px; }
  #home nav { gap: 8px; }
  #home header .theme-control > span { display: none; }
  #home header .theme-control select { width: 92px; min-width: 92px; max-width: 92px; padding: 7px 24px 7px 9px; }
}

@media (max-width: 760px) {
  .chapter-languages .theme-control > span { display: none; }
  .chapter-languages .theme-control select { width: 92px; min-width: 92px; max-width: 92px; padding: 7px 24px 7px 9px; }
}
