/* Shared controls and the yellow-on-black Flowstate option. */
.theme-toggle {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--heading);
  background: var(--base);
  box-shadow: 0 4px 20px #0003;
}
.theme-toggle:hover { background: var(--panel); border-color: var(--gold); }
.theme-toggle svg { width: 22px; height: 22px; }
/* Leave room beside the homepage's bottom links for the floating control. */
.hero-bottom { padding-right: 72px; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] {
  --base: #04050c;
  --heading: #eef0f6;
  --muted: #b9becf;
  --gold: #fedf0a;
  --gold-deep: #f8c901;
  --gold-light: #ffe109;
  --line: #ffffff21;
  --glass: #0a0c16b8;
  --button-fill: #fedf0a;
  --panel: #12141f;
  color-scheme: dark;
  background: var(--base);
  scrollbar-color: var(--gold) var(--base);
}
html[data-theme="dark"].site-booting { background: #04050c; }
html[data-theme="dark"] .scrim {
  background: radial-gradient(115% 95% at 50% 46%, #04050cc2 0%, #04050cb8 24%, #04050c94 52%, #04050c47 100%);
}
html[data-theme="dark"] .site-header { background: #04050cd9; }
html[data-theme="dark"] .languages { border-color: var(--line); }
html[data-theme="dark"] .languages button { color: var(--muted); }
html[data-theme="dark"] .languages button:hover { color: var(--heading); background: var(--panel); }
html[data-theme="dark"] .languages button.active { color: #111000; background: var(--gold); }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .header-cta,
html[data-theme="dark"] .portfolio-case-link,
html[data-theme="dark"] .project-arrow { background: var(--gold); border-color: var(--gold); color: #111000; }
html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .header-cta:hover,
html[data-theme="dark"] .portfolio-case-link:hover { background: #ffe955; border-color: #ffe955; color: #111000; }
html[data-theme="dark"] .secondary { background: #ffffff0b; border-color: #ffffff38; }
html[data-theme="dark"] .secondary:hover { background: var(--panel); border-color: var(--gold); }
html[data-theme="dark"] .hero-badge { background: #ffffff0a; }
html[data-theme="dark"] .hero-line.accent,
html[data-theme="dark"] em,
html[data-theme="dark"] .portfolio-head h2 em { color: var(--gold); }
html[data-theme="dark"] .section,
html[data-theme="dark"] .page-hero { background: #04050c33; }
html[data-theme="dark"] .slide-dot span { background: #ffffff40; }
html[data-theme="dark"] .slide-dot.active span { background: var(--gold); }
html[data-theme="dark"] .status-dot { box-shadow: 0 0 12px #fedf0a80; }
html[data-theme="dark"] .service-card:hover { border-color: var(--gold); }
html[data-theme="dark"] .service-icon,
html[data-theme="dark"] .service-tag,
html[data-theme="dark"] .phone-selected-icon { border-color: #fedf0a45; }
html[data-theme="dark"] .card-index,
html[data-theme="dark"] .process-num { color: #fedf0a99; }
html[data-theme="dark"] .window-dots i { background: #ffffff40; }
html[data-theme="dark"] .process-card { border-color: #fedf0a66; }
html[data-theme="dark"] .visual-node.center,
html[data-theme="dark"] .system-tabs button[aria-selected="true"],
html[data-theme="dark"] .phone-selection-tabs button[aria-pressed="true"] { background: #fedf0a14; border-color: var(--gold); color: var(--gold); }
html[data-theme="dark"] .concept-tag { background: #04050ccc; }
html[data-theme="dark"] .filters button.active { background: var(--gold); border-color: var(--gold); color: #111000; }
html[data-theme="dark"] dialog::backdrop { background: #000c; }
html[data-theme="dark"] .contact-form input::placeholder,
html[data-theme="dark"] .contact-form textarea::placeholder { color: #9b9fae; }
html[data-theme="dark"] .contact-select-popup { border-color: #fedf0a55; box-shadow: 0 18px 45px #0009; }
html[data-theme="dark"] .contact-option-check { border-color: #ffffff40; }
html[data-theme="dark"] .contact-select-option[aria-selected="true"] .contact-option-check { background: var(--gold); border-color: var(--gold); color: #111000; }
html[data-theme="dark"] .contact-form .contact-select-option[aria-selected="true"],
html[data-theme="dark"] .contact-form .contact-select-chip,
html[data-theme="dark"] .contact-form .contact-select-done { background: #fedf0a14; color: var(--gold); border-color: #fedf0a40; }
html[data-theme="dark"] .contact-form .contact-select-trigger:hover,
html[data-theme="dark"] .contact-form .contact-select-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px #fedf0a12; }
html[data-theme="dark"] .portfolio-section { background: #04050c33; }
html[data-theme="dark"] .portfolio-window { scrollbar-color: #fedf0a55 transparent; }
html[data-theme="dark"] .portfolio-card { background: linear-gradient(135deg, #0a0c16cc, #0a0c1699); box-shadow: 0 30px 70px #0008; }
html[data-theme="dark"] .portfolio-pinned .portfolio-card { border-color: rgb(254 223 10 / calc(.1 + var(--center-glow, 0) * .22)); box-shadow: 0 30px 70px #0008, 0 0 65px rgb(254 223 10 / calc(var(--center-glow, 0) * .12)); }
html[data-theme="dark"] .portfolio-card:after { box-shadow: inset 0 0 38px rgb(254 223 10 / calc(var(--center-glow, 0) * .12)); }
html[data-theme="dark"] .portfolio-card:hover,
html[data-theme="dark"] .portfolio-card:focus-within { border-color: #fedf0a70; }
html[data-theme="dark"] .portfolio-card-index { background: #04050ccc; border-color: var(--line); }
html[data-theme="dark"] .portfolio-meter { background: #ffffff20; }
html[data-theme="dark"] .portfolio-meter span { box-shadow: 0 0 12px #fedf0a60; }
html[data-theme="dark"] .site-footer { background: #04050ce6; }
html[data-theme="dark"]::-webkit-scrollbar-thumb { background: #fedf0a99; }
html[data-theme="dark"]::-webkit-scrollbar-thumb:hover { background: var(--gold); }
/* Keep the floating button easy to reach, including on phones with safe areas. */
@media (max-width: 520px) {
  .theme-toggle {
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
}