/* The website appearance is separate from the apps shown in its demonstrations. */
:root {
  --nav-surface:#eff2f7;
  --nav-glass:rgba(239,242,247,.62);
  --nav-ink:#202c3f;
  --nav-hover:#0f2c4d;
  --toggle-hover:#52607814;
  --primary-fill:#2869ed;
  --primary-hover:#1b59d1;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --section-base:#14171c;
  --section-tint:#1b2027;
  --paper:#14171c;
  --ink:#edf2fa;
  --muted:#b2becf;
  --subtle:#95a4b8;
  --blue:#80b1ff;
  --line:#35404e;
  --soft:#232a34;
  --surface:#232a34;
  --surface-raised:#2b3441;
  --nav-surface:#20262e;
  --nav-glass:rgba(32,38,46,.76);
  --nav-ink:#e0e7f1;
  --nav-hover:#fff;
  --toggle-hover:#e2ebfa12;
  color:var(--ink);
  background:var(--section-base);
}
.site-header { background:var(--nav-surface); }
.site-header .nav-links { margin-right:0; color:var(--nav-ink); }
.site-header .nav-links a:hover { color:var(--nav-hover); }
.nav-actions { display:flex; align-items:center; gap:12px; flex:none; }
.theme-toggle {
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  flex:none;
  padding:0;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--nav-ink);
  transition:background .15s, color .15s;
}
.theme-toggle:hover { background:var(--toggle-hover); color:var(--nav-hover); }
.theme-toggle .icon { width:19px; height:19px; }
.theme-icon-sun { display:none; }
[data-theme="dark"] .theme-icon-sun { display:block; }
[data-theme="dark"] .theme-icon-moon { display:none; }
.button-blue { background:var(--primary-fill); }
.button-blue:hover { background:var(--primary-hover); }
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header { background:var(--nav-glass); }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .site-header { background:var(--nav-surface); }
}
@media (max-width:850px) {
  .nav-shell { gap:20px; }
  .site-header .nav-links { gap:16px; }
  .nav-actions { gap:8px; }
}
@media (max-width:680px) {
  .site-header .nav-links { display:none; }
  .nav-actions { margin-left:auto; }
}
@media (max-width:540px) { .nav-shell { gap:12px; } }
@media (prefers-reduced-motion:reduce) { .theme-toggle { transition:none; } }

[data-theme="dark"] .site-header {
  border-color:#ffffff0d;
  box-shadow:0 1px 8px #00000014,inset 0 1px 0 #ffffff05;
}
[data-theme="dark"] .button-dark { background:#dce7f7; color:#182438; }
[data-theme="dark"] .button-dark:hover { background:#edf3fc; }
[data-theme="dark"] .button-blue { box-shadow:0 5px 16px #0003,inset 0 1px 0 #ffffff1f; }
[data-theme="dark"] .skip-link { background:var(--surface); color:var(--ink); }
[data-theme="dark"] :focus-visible { outline-color:var(--blue); }
[data-theme="dark"] ::selection { background:#325c91; color:#fff; }
[data-theme="dark"] :is(.eyebrow,.section-number,.hero-description,.section-heading>p,.source-copy>p,.source-how li,.space-copy>p,.detail-item p,.privacy-section p,.faq-list p,dialog>p) { color:var(--muted); }
[data-theme="dark"] :is(.hero-footnote,.source-index,.tiny-label,.source-hint,.controls-note,.space-copy .quiet-note,.detail-footnote,.closing-section>p,.site-footer>p,.site-footer>span,dialog .dialog-note) { color:var(--subtle); }
[data-theme="dark"] .hero-footnote .icon { color:#8cc7a3; }
[data-theme="dark"] .hero-scene-wrap { box-shadow:0 28px 65px -27px #0009,0 0 0 1px #ffffff16; }
[data-theme="dark"] .hero-scenario { color:var(--subtle); }
[data-theme="dark"] .hero-scenario:is(.is-active,:hover) { color:var(--ink); }
[data-theme="dark"] .hero-scenario-track { background:#3a4658; }
[data-theme="dark"] .source-tabs { background:#12171e; }
[data-theme="dark"] .source-tab { color:var(--muted); }
[data-theme="dark"] .source-tab:hover { color:var(--blue); }
[data-theme="dark"] .source-tab.is-active {
  background:var(--surface-raised);
  color:var(--blue);
  --icon-fill:var(--surface-raised);
  box-shadow:0 2px 5px #0003,0 0 0 1px #ffffff0a;
}
[data-theme="dark"] .source-panel { background:var(--surface); box-shadow:0 8px 30px #0002; }
[data-theme="dark"] .source-visual { background:#202730; }
[data-theme="dark"] .source-visual .demo-stage { box-shadow:0 8px 22px #0003,0 0 0 1px #ffffff0b; }
[data-theme="dark"] .source-how li::before { border-color:#4a586c; color:var(--muted); }
[data-theme="dark"] :is(.source-stage-footer,.opacity-control,.fps-control,.try-intro) { color:var(--muted); }
[data-theme="dark"] .source-stage-footer button { color:var(--blue); }
[data-theme="dark"] .source-stage-footer button:hover { color:#b5d2ff; }
[data-theme="dark"] .try-controls { background:var(--surface); }
[data-theme="dark"] .opacity-control input { accent-color:var(--blue); }
[data-theme="dark"] .fps-control select { background:var(--surface-raised); border-color:#4a586c; color:var(--ink); }
[data-theme="dark"] .pause-control { color:#b7d4ff; background:#293e5c; }
[data-theme="dark"] .pause-control:hover { background:#354e70; }
[data-theme="dark"] .detail-footnote .icon { color:#8dafe0; }
[data-theme="dark"] .privacy-icon { border-color:var(--line); background:linear-gradient(#2b3441,#202730); box-shadow:0 5px 15px #0002; }
[data-theme="dark"] .privacy-icon .icon { color:#9cbbe4; }
[data-theme="dark"] .privacy-mark { color:var(--subtle); }
[data-theme="dark"] .faq-list summary { color:#d3dce9; }
[data-theme="dark"] .faq-list summary .icon { color:var(--subtle); }
[data-theme="dark"] .closing-section>img { filter:drop-shadow(0 9px 16px #0005); }
[data-theme="dark"] dialog { background:var(--surface); border-color:#445165; box-shadow:0 30px 90px #0007; }
[data-theme="dark"] dialog::backdrop { background:#05090fb3; }