/* Shared header controls + light/dark theme. */
:root{
  --control-surface:rgba(237,244,250,.92);
  --control-surface-solid:#edf4fa;
  --control-hover:#dce7f2;
  --control-shadow:0 14px 38px rgba(16,42,67,.13);
  --switch-track:#cfdceb;
  --switch-thumb:#ffffff;
  --switch-icon:#61738a;
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0c1524;
  --ink:#edf4ff;
  --muted:#a7b6ca;
  --accent:#6f98ff;
  --accent-hover:#8aabff;
  --sage:#14223b;
  --line:#263a58;
  --control-surface:rgba(13,23,40,.90);
  --control-surface-solid:#101c31;
  --control-hover:#182945;
  --control-shadow:0 18px 46px rgba(0,0,0,.36);
  --switch-track:#223653;
  --switch-thumb:#eaf1fb;
  --switch-icon:#9eafc5;
}

.header-tools{margin-left:0;display:flex;align-items:center;gap:10px;position:relative;z-index:85;flex:none;opacity:1;visibility:visible;transform:translateX(0);transition:opacity .10s ease,transform .16s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s}
.site-header>nav+.header-tools{margin-left:0}

/* Header controls stay mounted and visible at all times. The drawer sits above them
   in the stacking order, so opening/closing never needs a hide/restore phase. */
.theme-switch,.language-trigger{appearance:none;-webkit-appearance:none;border:0;color:var(--ink);font:inherit}
.theme-switch{position:relative;width:54px;height:30px;padding:0;border-radius:999px;background:var(--switch-track);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 13%,transparent);transition:background-color .28s ease,box-shadow .28s ease}
.theme-switch-track{position:absolute;inset:0;display:block;border-radius:inherit;overflow:hidden}
.theme-switch-thumb{position:absolute;z-index:2;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:var(--switch-thumb);box-shadow:0 2px 8px rgba(0,0,0,.18);transform:translateX(0);transition:transform .34s cubic-bezier(.2,.8,.2,1),background-color .28s ease}
.theme-switch-icon{position:absolute;top:50%;z-index:1;width:18px;height:18px;display:grid;place-items:center;transform:translateY(-50%);color:var(--switch-icon);font:600 14px/1 "Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;font-variant-emoji:text;transition:opacity .22s ease,color .22s ease}
.theme-switch-sun{left:6px;color:#2f56a4;opacity:1}.theme-switch-moon{right:6px;opacity:.58}
html[data-theme="dark"] .theme-switch-thumb{transform:translateX(24px)}
html[data-theme="dark"] .theme-switch-sun{opacity:.48;color:var(--switch-icon)}
html[data-theme="dark"] .theme-switch-moon{opacity:1;color:#b1c0d6}
.theme-switch:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent)}

.language-menu{position:relative;display:flex;align-items:center}
.language-trigger{width:38px;height:38px;display:grid;place-items:center;padding:0;background:transparent;border-radius:50%;transition:background-color .18s ease,color .18s ease}
.language-trigger:hover,.language-trigger[aria-expanded="true"]{background:var(--control-hover)}
.global-icon{display:block;font:400 21px/1 "Segoe UI Symbol","Noto Sans Symbols 2","Arial Unicode MS",sans-serif;font-variant-emoji:text;transform:translateY(-.5px)}
.language-popover{position:absolute;top:calc(100% + 12px);right:0;z-index:120;min-width:178px;padding:7px;background:var(--control-surface);border:1px solid color-mix(in srgb,var(--ink) 13%,transparent);border-radius:13px;box-shadow:var(--control-shadow);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);transform-origin:top right}
.language-popover:not([hidden]){animation:language-pop-in .18s cubic-bezier(.2,.8,.2,1) both}
.language-popover button{width:100%;border:0;border-radius:8px;background:transparent;color:var(--ink);padding:10px 11px;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;font-size:13px;line-height:1.3}
.language-popover button:hover,.language-popover button:focus-visible{background:var(--control-hover)}
.language-popover button[aria-pressed="true"],.language-popover button[aria-checked="true"]{font-weight:700}
.language-check{opacity:0;color:var(--accent);font-size:14px}.language-popover button[aria-pressed="true"] .language-check,.language-popover button[aria-checked="true"] .language-check{opacity:1}
@keyframes language-pop-in{from{opacity:0;transform:translateY(-5px) scale(.97)}to{opacity:1;transform:none}}

/* Smooth theme change without globally animating every element. */
@media (prefers-reduced-motion:no-preference){
  body,.site-header,.hero-art,.mini-browser,.browser-bar,.url,.fact-symbol,.use-tab,.use-stage,.redirect-destination,.purchase-section,.guide-emblem,.drawer-surface,.contact-control{transition:background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease}
  .contact-actions{transition:grid-template-columns .48s cubic-bezier(.2,.8,.2,1),background-color .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease}
}

/* Dark theme: convert the remaining light-only illustration/surface colors. */
html[data-theme="dark"] ::selection{background:#323e4f;color:#f2f4f6}
html[data-theme="dark"] .availability{background:#212833}
html[data-theme="dark"] .hero-art{background-color:#171d25;background-image:linear-gradient(rgba(132,167,145,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(132,167,145,.09) 1px,transparent 1px)}
html[data-theme="dark"] .map-background{opacity:.45;filter:brightness(.52) saturate(.72) contrast(.92)}
html[data-theme="dark"] .art-heading,
html[data-theme="dark"] .connection-lines,
html[data-theme="dark"] .browser-content>.eyebrow,
html[data-theme="dark"] .demo-service,
html[data-theme="dark"] .art-foot,
html[data-theme="dark"] .section-top .eyebrow,
html[data-theme="dark"] .tab-number,
html[data-theme="dark"] .tab-arrow,
html[data-theme="dark"] .stage-content>.eyebrow,
html[data-theme="dark"] .stage-disclaimer,
html[data-theme="dark"] .redirect-demo>.eyebrow,
html[data-theme="dark"] .redirect-flow,
html[data-theme="dark"] .destination-mark,
html[data-theme="dark"] .purchase-layout .eyebrow,
html[data-theme="dark"] .faq-intro>.eyebrow{color:#91a69c}
html[data-theme="dark"] .icon-ring,html[data-theme="dark"] .node-mark{background:#1b212a;border-color:#475467}
html[data-theme="dark"] .mini-browser{background:#14181f;border-color:#3e4858;box-shadow:0 18px 44px rgba(0,0,0,.28)}
html[data-theme="dark"] .browser-bar{background:#1c222b;border-bottom-color:#3e4858}
html[data-theme="dark"] .window-dots i{background:#678175}
html[data-theme="dark"] .url{background:rgba(16,24,21,.72);border-color:#343d4a}
html[data-theme="dark"] .fact-symbol{background:#1c222b}
html[data-theme="dark"] .use-tab[aria-selected="true"]{background:#1a2029}
html[data-theme="dark"] .use-tab:hover{background:#1c222c}
html[data-theme="dark"] .use-stage{background:#151a22;border-color:#29303a}
html[data-theme="dark"] .stage-browser{border-color:#3e4858;box-shadow:0 12px 28px rgba(0,0,0,.22)}
html[data-theme="dark"] .demo-tags span{border-color:#333c49;color:#9caea6}
html[data-theme="dark"] .flow-ring{fill:#151a22;stroke:#4e5c70}
html[data-theme="dark"] .flow-base{stroke:#667d72;color:#82988e}
html[data-theme="dark"] .redirect-destination{background:#161b22;border-color:#3d4858}
html[data-theme="dark"] .purchase-section{background:#161c24;border-color:#2b323d}
html[data-theme="dark"] dialog:not(#guide-drawer){background:var(--paper)}
html[data-theme="dark"] dialog:not(#guide-drawer)::backdrop{background:rgba(2,8,6,.68)}
html[data-theme="dark"] .contact-email{background:#e6e9ee;color:#141a22}
html[data-theme="dark"] .contact-email:hover,html[data-theme="dark"] .contact-email:focus-visible{background:#d8dde4}
html[data-theme="dark"] .contact-copy:hover,html[data-theme="dark"] .contact-copy:focus-visible,html[data-theme="dark"] .is-copied{background:#161b23}
html[data-theme="dark"] .guide-emblem{background:#171d25}

/* Dark frosted drawer: still transparent enough for real backdrop blur. */
html[data-theme="dark"] #guide-drawer::before{background:rgba(0,7,5,.24)}
html[data-theme="dark"] #guide-drawer::backdrop{background:rgba(0,7,5,.24)}
html[data-theme="dark"] .drawer-surface{background:linear-gradient(135deg,rgba(27,40,34,.52),rgba(13,23,19,.42));border-left-color:rgba(232,244,237,.13);box-shadow:-20px 0 58px rgba(0,0,0,.28),inset 1px 0 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(30px) saturate(145%) brightness(.82);backdrop-filter:blur(30px) saturate(145%) brightness(.82)}
html[data-theme="dark"] .drawer-surface::after{background:linear-gradient(105deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.015) 30%,transparent 58%,rgba(255,255,255,.025) 100%)}
html[data-theme="dark"] #guide-drawer nav a{border-bottom-color:rgba(230,241,235,.11)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html[data-theme="dark"] .drawer-surface{background:rgba(18,29,24,.97)}}

@media(max-width:760px){
  .header-tools{margin-left:auto;gap:7px}
  .theme-switch{width:50px;height:28px}
  .theme-switch-thumb{width:20px;height:20px}
  html[data-theme="dark"] .theme-switch-thumb{transform:translateX(22px)}
  .theme-switch-icon{font-size:13px}.theme-switch-sun{left:5px}.theme-switch-moon{right:5px}
  .language-trigger{width:36px;height:36px}.global-icon{font-size:20px}
  .language-popover{right:-2px;min-width:168px}
}
@media(max-width:370px){.header-tools{gap:4px}.theme-switch{width:46px}.theme-switch-moon{right:4px}.theme-switch-sun{left:4px}html[data-theme="dark"] .theme-switch-thumb{transform:translateX(18px)}}
@media(prefers-reduced-motion:reduce){.theme-switch,.theme-switch-thumb,.language-trigger{transition:none}.language-popover:not([hidden]){animation:none}}
html[data-theme="dark"] .copyright{color:var(--muted)}