/* Arkey-inspired dark surfaces. Layout and media geometry stay in each page. */
:root {
  --ui-bg: #080808;
  --ui-surface: #1d1d1f;
  --ui-surface-hover: #2a2a2d;
  --ui-text: #f5f5f7;
  --ui-muted: #a1a1a6;
  --ui-line: rgba(255, 255, 255, 0.10);
  --ui-line-strong: rgba(255, 255, 255, 0.18);
  --ui-blue: #0071e3;
  --ui-blue-hover: #1686f5;
  --ui-link: #2997ff;
  --ui-radius: 26px;
  --ui-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "PingFang SC", sans-serif;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[data-page] {
  color-scheme: dark;
  background: var(--ui-bg);
}
html[data-page] body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
html[data-page] ::selection { background: var(--ui-blue); color: #fff; }
html[data-page] :is(a, button) {
  transition: color 200ms, background-color 200ms, border-color 200ms, box-shadow 200ms;
}
html[data-page] :is(a, button):focus-visible {
  outline: 3px solid var(--ui-link);
  outline-offset: 4px;
}
html[data-page] :is(.nav, .topbar) {
  background: rgba(18, 18, 20, 0.82);
  border-bottom-color: var(--ui-line);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
html[data-page] :is(.dot, .status-dot) {
  background: var(--ui-link);
  box-shadow: none;
}
/* Homepage: retain transparent media wrappers to avoid cropping existing videos. */
html[data-page="home"] {
  --bg: var(--ui-bg);
  --bg-card: var(--ui-surface);
  --bg-card-soft: var(--ui-surface-hover);
  --fg: var(--ui-text);
  --fg-muted: var(--ui-muted);
  --fg-dim: var(--ui-muted);
  --line: var(--ui-line);
  --line-strong: var(--ui-line-strong);
  --accent: var(--ui-link);
  --radius: var(--ui-radius);
  --font-ui: var(--ui-font);
  --ease: var(--ui-ease);
}
html[data-page="home"] .hero::before,
html[data-page="home"] .hero::after { content: none; }
html[data-page="home"] :is(.coming-pill, .lang-switch, .closing-pill) {
  background: var(--ui-surface);
  border-color: var(--ui-line);
}
html[data-page="home"] .coming-pill { padding-block: 8px; }
html[data-page="home"] .lang-switch { padding: 4px; gap: 4px; }
html[data-page="home"] .lang-switch button:not(.is-active):hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
html[data-page="home"] .lang-switch button.is-active {
  background: var(--ui-text);
  color: var(--ui-bg);
}
html[data-page="home"] .hero-cta {
  background: var(--ui-blue);
  box-shadow: none;
  gap: 8px;
  transition: background-color 200ms, transform 200ms var(--ui-ease);
}
html[data-page="home"] .hero-cta:hover { background: var(--ui-blue-hover); transform: none; }
html[data-page="home"] .hero-cta:active { transform: scale(0.98); }
html[data-page="home"] .closing-card {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
html[data-page="home"] .footer { border-color: var(--ui-line); }
html[data-page="home"] .footer-links a:hover { color: var(--ui-link); }
/* Bilingual privacy document. */
html[data-page="privacy"] {
  --bg: var(--ui-bg);
  --panel: var(--ui-surface);
  --panel-strong: var(--ui-surface-hover);
  --line: var(--ui-line);
  --line-strong: var(--ui-line-strong);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --dim: var(--ui-muted);
  --blue: var(--ui-link);
  --radius: var(--ui-radius);
  --shadow: none;
  --font-sans: var(--ui-font);
}
html[data-page="privacy"] body::before { content: none; }
html[data-page="privacy"] a { color: var(--ui-link); }
html[data-page="privacy"] .brand { color: var(--ui-text); }
html[data-page="privacy"] :is(.sidebar, .callout) {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
html[data-page="privacy"] .callout { color: var(--ui-muted); }
html[data-page="privacy"] :is(.lang-toggle, .pill) {
  background: var(--ui-surface);
  border-color: var(--ui-line);
}
html[data-page="privacy"] .lang-toggle { padding: 4px; gap: 4px; }
html[data-page="privacy"] .lang-toggle button[aria-pressed="true"] {
  background: var(--ui-text);
  color: var(--ui-bg);
  box-shadow: none;
}
html[data-page="privacy"] .lang-toggle button[aria-pressed="false"]:hover {
  background: var(--ui-surface-hover);
  color: var(--ui-text);
}
html[data-page="privacy"] .toc a { color: var(--ui-muted); }
html[data-page="privacy"] .toc a:hover { background: var(--ui-surface-hover); color: var(--ui-text); }
html[data-page="privacy"] .toc a.active {
  color: var(--ui-link);
  background: rgba(41, 151, 255, 0.12);
}
html[data-page="privacy"] li::before { background: var(--ui-link); }
html[data-page="privacy"] .pill { color: var(--ui-muted); padding: 8px 12px; }
/* Historical English route retains its content and card-based structure. */
html[data-page="privacy-legacy"] {
  --bg: var(--ui-bg);
  --paper: var(--ui-surface);
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --accent: var(--ui-link);
  --accent-soft: var(--ui-surface-hover);
  --shadow: none;
}
html[data-page="privacy-legacy"] :is(.hero, section, .foot) {
  background: var(--ui-surface);
  border-color: var(--ui-line);
  border-radius: var(--ui-radius);
  box-shadow: none;
}
html[data-page="privacy-legacy"] .eyebrow { font-family: var(--ui-font); }
html[data-page="privacy-legacy"] .meta span {
  background: var(--ui-surface-hover);
  color: var(--ui-muted);
}
html[data-page="privacy-legacy"] :is(p, li) { color: var(--ui-muted); }
@media (prefers-reduced-motion: reduce) {
  html[data-page] { scroll-behavior: auto; }
  html[data-page] :is(a, button, .reveal) { transition: none; }
}