/* Shared color system for every page. Light values mirror the existing site. */
:root {
  color-scheme: light;
  /* Keep fixed utilities immediately outside the site's content card when the
     viewport has room. Individual layouts refine this shared card width. */
  --control-card-width: 980px;
  --control-card-inset: 18px;
  --control-card-gap: 12px;
  --theme-control-width: 104px;
  --bg-color: #ffffff;
  --text-color: #24292f;
  --card-color: #ffffff;
  --surface-color: #f6f8fa;
  --muted-color: #57606a;
  --border-color: #d0d7de;
  --link-color: #0969da;
  --button-bg: rgba(255, 255, 255, 0.94);
  --shadow-color: rgba(31, 35, 40, 0.12);
  --heading-color: #111827;
  --link-hover-color: #0757b9;
  --control-border-color: #d0d7de;
  --control-surface-color: rgba(255, 255, 255, 0.82);
  --control-text-color: #24292f;
  --focus-color: #0969da;
  --selection-bg: #b6d7ff;
  --selection-text: #111827;
  --theme-transition-duration: .2s;
  --theme-transition-easing: ease;
  --members-ink: #0f172a;
  --members-muted: #56627a;
  --members-line: #dce4f4;
  --members-panel: rgba(255, 255, 255, .88);
  --members-page-bg: transparent;
  --members-card-bg: linear-gradient(145deg, rgba(255,255,255,.98), rgba(242,246,255,.94));
  --members-tag-bg: #f1f5ff;
  --members-tag-text: #3f5d9e;
  --members-tag-border: #dee6fb;
  --members-workflow-bg: linear-gradient(110deg, rgba(237,244,255,.94), rgba(249,245,255,.96));
  --members-icon-bg: #ffffff;
  --members-icon-border: #d6e0fb;
  /* Canonical Members-page pale blue feature-card treatment (light mode only). */
  --pale-blue-card-color: #e8f0ff;
  --pale-blue-card-surface: linear-gradient(180deg, #e8f0ff 0%, #dde6ff 100%);
  --pale-blue-card-border: #c6d6ff;
  --pale-blue-card-shadow: 0 10px 30px rgba(66,133,244,.08);
  --pale-blue-card-text: #0f172a;
  --pale-blue-card-muted: #334155;
  --pale-blue-card-accent: #3b82f6;
}

/* Paint the viewport and document canvas from the same theme variables. This is
   especially important for iOS overscroll areas, which Safari paints from html. */
html {
  background-color: var(--bg-color);
  color: var(--text-color);
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #081220;
  --text-color: #e6edf7;
  --card-color: #111a2b;
  --surface-color: #16233a;
  --muted-color: #a8b4c7;
  --border-color: #2b4055;
  --link-color: #6ea8fe;
  --button-bg: rgba(16, 27, 44, 0.94);
  --shadow-color: rgba(0, 5, 14, 0.5);
  --heading-color: #f0f5fc;
  --link-hover-color: #9bc3ff;
  --control-border-color: #31475e;
  --control-surface-color: rgba(18, 32, 51, .82);
  --control-text-color: #dce8f7;
  --focus-color: #79aff5;
  --selection-bg: #28568d;
  --selection-text: #ffffff;
  --members-ink: #edf4ff;
  --members-muted: #b0bed2;
  --members-line: #293d5d;
  --members-panel: rgba(14, 26, 45, .9);
  --members-page-bg: #07101c;
  --members-card-bg: linear-gradient(145deg, #15243b, #0c1728);
  --members-tag-bg: #122947;
  --members-tag-text: #a9c8ff;
  --members-tag-border: #294668;
  --members-workflow-bg: linear-gradient(110deg, #101e34, #251d3f);
  --members-icon-bg: #172943;
  --members-icon-border: #365172;
  /* Canonical metallic silver treatment shared with the Members feature cards. */
  --metallic-card-color: #1d2635;
  --metallic-card-surface:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 22%, rgba(0,0,0,.28) 100%),
    linear-gradient(115deg, #a7adb6 0%, #8f98a5 24%, #707c8b 48%, #4c596b 74%, #1d2635 100%);
  --metallic-card-border: rgba(255,255,255,.18);
  --metallic-card-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.45);
  --metallic-card-highlight: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,0) 58%);
  --metallic-card-text: #e6ebf4;
  --metallic-card-muted: #c8cfda;
  --metallic-card-accent: #4f7dff;
}

.theme-toggle {
  position: fixed;
  z-index: 10000;
  top: max(12px, env(safe-area-inset-top));
  right: auto;
  left: clamp(
    var(--control-card-inset),
    calc(50% + var(--control-card-width) / 2 + var(--control-card-gap)),
    calc(100vw - var(--theme-control-width) - max(var(--control-card-inset), env(safe-area-inset-right)))
  );
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--button-bg);
  box-shadow: 0 2px 8px var(--shadow-color);
  color: var(--text-color);
  font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Shared page-width map for every layout that loads the theme controls. */
:root:has(body.members-page),
:root:has(.metrics) { --control-card-width: 980px; }
:root:has(.gallery-grid) { --control-card-width: 1100px; }
:root:has(body > article) { --control-card-width: 840px; }
.theme-toggle:hover {
  border-color: var(--link-color);
  color: var(--link-color);
  box-shadow: 0 5px 18px var(--shadow-color);
}
.theme-toggle:focus-visible { outline: 2px solid var(--link-color); outline-offset: 2px; }

/* This final shared layer translates legacy page colors without changing layout. */
[data-theme="dark"] body {
  background:
    radial-gradient(900px 560px at 12% -8%, rgba(55, 116, 181, .13), transparent 62%),
    radial-gradient(800px 500px at 88% 4%, rgba(43, 86, 143, .10), transparent 60%),
    linear-gradient(180deg, #08111e 0%, var(--bg-color) 52%, #07101c 100%) !important;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.72;
  letter-spacing: .003em;
}
[data-theme="dark"] body::before {
  opacity: .2;
  mix-blend-mode: screen;
}
[data-theme="dark"] :is(article, section, header, footer, main, aside, details, .card, .box, .panel, .section, .hero, .profile, .profile-card, .art-card, .assistant-card, .outputs-grid li, .research-notice, .stat-card, .metric-card, .output-stat, .faq-item) {
  border-color: var(--border-color) !important;
}
[data-theme="dark"] :is(article, .hero, .card, .box, .panel, .section, .profile, .profile-card, .art-card, .assistant-card, .outputs-grid li, .research-notice, .stat-card, .metric-card, .output-stat, details) {
  background-color: rgba(17, 26, 43, .9) !important;
  background-image: linear-gradient(145deg, rgba(24, 38, 61, .88), rgba(12, 23, 39, .94)) !important;
  color: var(--text-color) !important;
  box-shadow: 0 12px 34px rgba(0, 5, 14, .26), inset 0 1px rgba(255, 255, 255, .025) !important;
}
[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, summary, figcaption, .lead, .art-title, .profile-body, .notes li, .philosophy-hero) {
  color: inherit !important;
  border-color: var(--border-color) !important;
}
[data-theme="dark"] :is(.muted, .meta, .subtitle, .note, .updated, .metric-card span, .dialog-meta, .dialog-stats dt, footer, .footer, small) { color: var(--muted-color) !important; }
[data-theme="dark"] a { color: var(--link-color) !important; }
[data-theme="dark"] .outputs-grid .output-draft { color: var(--link-color) !important; }
/* Keep the GitHub Pages label distinct from the surrounding muted note. */
[data-theme="dark"] .note .kbd {
  background: rgba(56, 139, 253, .12);
  border-color: rgba(110, 168, 254, .72);
  color: var(--link-color) !important;
  font-weight: 700;
}
[data-theme="dark"] a:not(.btn):hover {
  color: var(--link-hover-color) !important;
  text-decoration-color: currentColor;
}
[data-theme="dark"] :is(h1, h2, h3, h4, summary, strong) {
  color: var(--heading-color) !important;
  letter-spacing: .01em;
}
[data-theme="dark"] :is(.topnav a, .tag, .pill, .profile-links a, .btn, .assistant-button) {
  border-color: var(--control-border-color) !important;
  background: var(--control-surface-color) !important;
  color: var(--control-text-color) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 5px 16px rgba(0, 5, 14, .18);
}
[data-theme="dark"] :is(.topnav a, .tag, .profile-links a, .btn, .assistant-button):hover {
  border-color: #5684b6 !important;
  background: #172941 !important;
  color: #82b5ff !important;
  box-shadow: 0 8px 22px rgba(0, 7, 18, .34), 0 0 0 1px rgba(110, 168, 254, .06);
}
[data-theme="dark"] .topnav .orientation-link {
  border-color: #5684b6 !important;
  background: rgba(43, 100, 255, .2) !important;
  color: #9cc5ff !important;
}
[data-theme="dark"] .topnav .orientation-link:hover {
  border-color: #75a6dd !important;
  background: rgba(43, 100, 255, .3) !important;
}
[data-theme="dark"] .pill {
  background: rgba(82, 139, 207, .2) !important;
  color: #8bb9f5 !important;
}
[data-theme="dark"] :is(.card, .outputs-grid li, .profile-card) {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] :is(.card, .outputs-grid li, .profile-card):hover {
  border-color: #466b91 !important;
  box-shadow: 0 16px 38px rgba(0, 5, 14, .38), inset 0 1px rgba(255, 255, 255, .04) !important;
}
[data-theme="dark"] .lab-hero-image {
  opacity: 1;
  border: 1px solid #49637c;
  box-shadow: 0 12px 30px rgba(0, 5, 14, .34);
}
[data-theme="dark"] .hero::after { opacity: .18; }
[data-theme="dark"] :is(.philosophy-hero, .lead, .profile-body, .card p) { color: #c2ccda !important; }
[data-theme="dark"] .lead strong {
  color: #8dbdff !important;
  border-color: rgba(110, 168, 254, .5);
}
[data-theme="dark"] details > summary {
  padding-block: 2px;
  color: #edf4fd !important;
}
[data-theme="dark"] hr { border-color: var(--border-color); }
::selection { background: var(--selection-bg); color: var(--selection-text); }
[data-theme="dark"] :focus-visible { outline: 2px solid var(--focus-color) !important; outline-offset: 3px; }
[data-theme="dark"] :is(input, select, textarea, button:not(.theme-toggle)) {
  background-color: var(--surface-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
[data-theme="dark"] :is(.research-statement, .contact-policy, .faq-grid > div, details > div) {
  background-color: transparent !important;
  color: var(--text-color) !important;
}
[data-theme="dark"] [style*="background:#fafafa"],
[data-theme="dark"] [style*="background-color:#f5f7fb"],
[data-theme="dark"] [style*="background:#eef4ff"] {
  background: rgba(13, 25, 42, .76) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
[data-theme="dark"] :is(code, pre, blockquote, table, thead, tbody, tr, th, td) {
  background-color: var(--surface-color) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}
[data-theme="dark"] :is(thead, th) { background-color: #21262d !important; }
[data-theme="dark"] tbody tr:nth-child(even) { background-color: rgba(177, 186, 196, 0.06) !important; }
[data-theme="dark"] blockquote {
  border-inline-start: 4px solid var(--muted-color) !important;
  color: var(--muted-color) !important;
}
:is(pre, .highlight, .code-block) {
  overflow-x: auto;
  border: 1px solid var(--border-color);
}
:not(pre) > code {
  padding: .12em .35em;
  border-radius: 4px;
  background-color: var(--surface-color);
}
:is(.math, .MathJax, mjx-container) { color: var(--text-color) !important; }
:is(.MathJax, mjx-container) svg { fill: currentColor !important; stroke: currentColor; }
:is(iframe, embed, object)[src*=".pdf" i],
:is(iframe, embed, object)[type="application/pdf"] {
  max-width: 100%;
  border: 1px solid var(--border-color);
  background-color: var(--surface-color);
  color-scheme: light dark;
}
[data-theme="dark"] img { opacity: 0.92; }
[data-theme="dark"] :is(.github-logo, .synapse-logo) { filter: brightness(0) invert(1); }

/* Keep linked artwork visually stable while preserving the text-link hover treatment. */
a img { cursor: pointer; }
a:hover img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
[data-theme="dark"] a:hover img { opacity: 0.92 !important; }
[data-theme="dark"] a:hover :is(.github-logo, .synapse-logo) { filter: brightness(0) invert(1) !important; }

/* Reusable themed surfaces (dashboard and future feature cards). */
.pale-blue-surface {
  background-color: var(--pale-blue-card-color);
  background-image: var(--pale-blue-card-surface);
  border: 1px solid var(--pale-blue-card-border);
  box-shadow: var(--pale-blue-card-shadow);
  color: var(--pale-blue-card-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pale-blue-surface :is(h1, strong) { color: var(--pale-blue-card-text); }
.pale-blue-surface :is(.muted, .updated, span) { color: var(--pale-blue-card-muted); }
.pale-blue-surface .delta { color: var(--pale-blue-card-accent) !important; }
[data-theme="dark"] .metallic-surface {
  position: relative;
  overflow: hidden;
  background-color: var(--metallic-card-color) !important;
  background-image: var(--metallic-card-surface) !important;
  border-color: var(--metallic-card-border) !important;
  box-shadow: var(--metallic-card-shadow) !important;
  color: var(--metallic-card-text) !important;
}
[data-theme="dark"] .metallic-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--metallic-card-highlight);
}
[data-theme="dark"] .metallic-surface > * { position: relative; z-index: 1; }
[data-theme="dark"] .metallic-surface :is(h1, strong) { color: var(--metallic-card-text) !important; }
[data-theme="dark"] .metallic-surface :is(.muted, .updated, span) { color: var(--metallic-card-muted) !important; }
[data-theme="dark"] .metallic-surface .delta { color: var(--metallic-card-accent) !important; }

/* Theme changes animate; initial page rendering does not. */
.theme-ready body,
.theme-ready :is(article, section, header, footer, main, aside, details, .card, .box, .panel, .hero, .profile, .profile-card, .art-card, .assistant-card, .outputs-grid li, .research-notice, .stat-card, .metric-card, .output-stat, .faq-item, .architecture-card, .member-card, .workflow-panel, .workflow-step .icon, .about-panel, .tag, .pill, table, thead, tbody, tr, th, td, pre, code, blockquote, input, select, textarea, button) {
  transition: background-color var(--theme-transition-duration) var(--theme-transition-easing), color var(--theme-transition-duration) var(--theme-transition-easing), border-color var(--theme-transition-duration) var(--theme-transition-easing), box-shadow var(--theme-transition-duration) var(--theme-transition-easing);
}
.theme-ready :is(.math, .MathJax, mjx-container, svg, svg *, img) {
  transition: color var(--theme-transition-duration) var(--theme-transition-easing), fill var(--theme-transition-duration) var(--theme-transition-easing), stroke var(--theme-transition-duration) var(--theme-transition-easing), filter var(--theme-transition-duration) var(--theme-transition-easing), opacity var(--theme-transition-duration) var(--theme-transition-easing);
}

/* Safari can schedule transitions for composited descendants independently,
   exposing the old theme underneath new gradients for a frame. theme.js applies
   this before changing data-theme and removes it only after the unified paint. */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
  transition-delay: 0s !important;
}

@media (max-width: 600px) {
  :root { --control-card-inset: 8px; }
  .theme-toggle { top: max(8px, env(safe-area-inset-top)); padding: 6px 10px; min-height: 34px; }
}
@media (prefers-reduced-motion: no-preference) {
  .theme-toggle { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-ready *, .theme-ready *::before, .theme-ready *::after { transition-duration: .01ms !important; }
}