/* Stage 24 additive theme layer. Tokens and selectors are adapted from prototype2.0. */

html[data-theme="bright"] {
  --ink: #172033;
  --ink-deep: #ffffff;
  --ink-soft: #edf1f5;
  --surface: #ffffff;
  --surface-strong: #f7f8fa;
  --surface-dark: #f1f3f5;
  --line: rgba(23, 32, 51, 0.15);
  --line-hot: rgba(245, 129, 16, 0.62);
  --pink: #f58110;
  --coral: #f06201;
  --lavender: #455064;
  --muted: #536174;
  --white: #172033;
  --shadow-card: 0 20px 40px rgba(23, 32, 51, 0.12);
  --shadow-button: 0 10px 30px rgba(240, 98, 1, 0.22);
  --shadow-cta: 0 15px 40px rgba(240, 98, 1, 0.28);
  --gradient: linear-gradient(135deg, #f58110, #f06201);
  color-scheme: light;
}

html[data-theme="dark"] {
  --ink: #f5efff;
  --ink-deep: #050509;
  --ink-soft: #17111f;
  --surface: rgba(255, 255, 255, 0.075);
  --surface-strong: rgba(255, 255, 255, 0.13);
  --surface-dark: rgba(8, 7, 13, 0.84);
  --line: rgba(224, 203, 255, 0.2);
  --line-hot: rgba(192, 132, 252, 0.78);
  --pink: #c084fc;
  --coral: #f0abff;
  --lavender: #ddd1ef;
  --muted: #b8acc9;
  --white: #fbf8ff;
  --shadow-card: 0 22px 46px rgba(0, 0, 0, 0.5), 0 0 1.6rem rgba(192, 132, 252, 0.18);
  --shadow-button: 0 10px 30px rgba(192, 132, 252, 0.28);
  --shadow-cta: 0 15px 40px rgba(192, 132, 252, 0.32);
  --gradient: linear-gradient(135deg, #c084fc, #8b5cf6);
  color-scheme: dark;
}

html[data-theme="bright"] body {
  color: var(--white);
  background: #fff;
}

html[data-theme="bright"] .ambient-a,
html[data-theme="bright"] .ambient-b {
  opacity: 0.12;
  mix-blend-mode: multiply;
  filter: blur(32px);
}

html[data-theme="bright"] .ambient-a { background: radial-gradient(circle, rgba(245, 129, 16, 0.24), transparent 68%); }
html[data-theme="bright"] .ambient-b { background: radial-gradient(circle, rgba(23, 32, 51, 0.16), transparent 68%); }
html[data-theme="bright"] .grain { opacity: 0.018; }

html[data-theme="dark"] body {
  color: var(--white);
  background:
    radial-gradient(circle at 14% 8%, rgba(139, 92, 246, 0.18), transparent 28rem),
    radial-gradient(circle at 88% 22%, rgba(192, 132, 252, 0.1), transparent 30rem),
    #050509;
}

html[data-theme="dark"] .ambient-a { background: radial-gradient(circle, rgba(139, 92, 246, 0.56), transparent 68%); }
html[data-theme="dark"] .ambient-b { background: radial-gradient(circle, rgba(192, 132, 252, 0.32), transparent 68%); }

/* Existing header, logo scroll state and navigation geometry stay intact. */
html[data-theme="bright"] .site-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: rgba(23, 32, 51, 0.1);
}
html[data-theme="bright"] .site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 30px rgba(23, 32, 51, 0.12);
}
html[data-theme="bright"] .site-header .logo-light,
html[data-theme="bright"] .site-header.scrolled .logo-light { opacity: 0; }
html[data-theme="bright"] .site-header .logo-color,
html[data-theme="bright"] .site-header.scrolled .logo-color { opacity: 1; }
html[data-theme="bright"] .brand-mark:hover .brand-logo { filter: drop-shadow(0 0 13px rgba(245, 129, 16, 0.38)); }
html[data-theme="bright"] .nav-link { color: rgba(23, 32, 51, 0.78); }
html[data-theme="bright"] .nav-link:hover,
html[data-theme="bright"] .nav-link.is-active { color: var(--ink); }
html[data-theme="bright"] .nav-link::after { background: var(--gradient); }
html[data-theme="bright"] .menu-icon span { background: var(--gradient); }

html[data-theme="bright"] .hero {
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 50%, rgba(245, 129, 16, 0.1), transparent 42%),
    radial-gradient(circle at 70% 50%, rgba(23, 32, 51, 0.05), transparent 42%),
    linear-gradient(135deg, #fff, #f7f8fa 58%, #eef1f4);
}
html[data-theme="bright"] .page-hero { background: linear-gradient(180deg, rgba(245, 129, 16, 0.12), transparent 78%); }
html[data-theme="bright"] .section-dark { background: linear-gradient(180deg, #f8f9fa, #eef1f4); }
html[data-theme="bright"] .section-soft { background: linear-gradient(135deg, #fff, #f6f7f8); }
html[data-theme="bright"] .gradient-text { color: transparent; background: var(--gradient); background-clip: text; -webkit-background-clip: text; }
html[data-theme="bright"] .eyebrow,
html[data-theme="bright"] .breadcrumb a:hover,
html[data-theme="bright"] .text-link::after { color: var(--coral); }
html[data-theme="bright"] .button-primary,
html[data-theme="bright"] .service-icon { color: #fff; background: var(--gradient); box-shadow: var(--shadow-button); }
html[data-theme="bright"] .button-primary::before { background: linear-gradient(135deg, #f06201, #f58110); }
html[data-theme="bright"] .button-secondary { color: var(--ink); background: #fff; border-color: rgba(23, 32, 51, 0.22); }
html[data-theme="bright"] .button-secondary:hover { border-color: var(--coral); background: #fff8f1; }
html[data-theme="bright"] .case-card,
html[data-theme="bright"] .service-card,
html[data-theme="bright"] .insight-card,
html[data-theme="bright"] .advantage-panel,
html[data-theme="bright"] .cta-card,
html[data-theme="bright"] .detail-side,
html[data-theme="bright"] .contact-form,
html[data-theme="bright"] .capability-card,
html[data-theme="bright"] .process-flow,
html[data-theme="bright"] .article-media-story,
html[data-theme="bright"] .filter-bar {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--line);
  box-shadow: 0 1rem 2.5rem rgba(23, 32, 51, 0.08);
}
html[data-theme="bright"] .case-card:hover,
html[data-theme="bright"] .service-card:hover { border-color: var(--coral); box-shadow: var(--shadow-card); }
html[data-theme="bright"] .case-card::after { background: radial-gradient(circle, rgba(245, 129, 16, 0.2), transparent 68%); }
html[data-theme="bright"] .case-media { background: #eef1f4; }
html[data-theme="bright"] .case-media::after { background: linear-gradient(180deg, transparent 30%, rgba(23, 32, 51, 0.52)); }
html[data-theme="bright"] .service-card { backdrop-filter: none; }
html[data-theme="bright"] .service-card p,
html[data-theme="bright"] .insight-card p,
html[data-theme="bright"] .article-media-story-heading p { color: var(--muted); }
html[data-theme="bright"] .insight-card { border-top-color: rgba(245, 129, 16, 0.68); border-bottom-color: var(--line); }
html[data-theme="bright"] .detail-side .case-client-label,
html[data-theme="bright"] .filter-control label,
html[data-theme="bright"] .filter-search label { color: var(--muted); }
html[data-theme="bright"] .tag { color: var(--muted); border-color: var(--line); background: #f7f8fa; }
html[data-theme="bright"] .text-link,
html[data-theme="bright"] .breadcrumb a { color: var(--white); }
html[data-theme="bright"] .process-card { background: linear-gradient(180deg, #fff, #f7f8fa); border-left-color: var(--coral); }
html[data-theme="bright"] .article-takeaway { background: #fff; border-top-color: rgba(245, 129, 16, 0.7); border-bottom-color: var(--line); }
html[data-theme="bright"] .article-takeaway p,
html[data-theme="bright"] .advantage-list strong { color: var(--white); }
html[data-theme="bright"] .advantage-icon { color: #fff; background: var(--coral); }
html[data-theme="bright"] .custom-select-trigger,
html[data-theme="bright"] select,
html[data-theme="bright"] input,
html[data-theme="bright"] textarea { color: var(--ink); background: #fff; border-color: rgba(23, 32, 51, 0.22); }
html[data-theme="bright"] .custom-select-trigger.is-placeholder { color: var(--muted); }
html[data-theme="bright"] .custom-select-trigger:hover,
html[data-theme="bright"] .custom-select.is-open .custom-select-trigger { border-color: var(--coral); background: #fff8f1; box-shadow: 0 0 1rem rgba(245, 129, 16, 0.14); }
html[data-theme="bright"] .custom-select-menu { background: #fff; border-color: var(--line); box-shadow: 0 1.2rem 3rem rgba(23, 32, 51, 0.14); }
html[data-theme="bright"] .custom-select-option { color: var(--muted); }
html[data-theme="bright"] .custom-select-option:hover,
html[data-theme="bright"] .custom-select-option:focus-visible,
html[data-theme="bright"] .custom-select-option.is-selected { color: var(--ink); background: #fff2e5; }
html[data-theme="bright"] .site-footer { background: #172033; border-top-color: rgba(23, 32, 51, 0.12); }
html[data-theme="bright"] .site-footer .footer-logo-link img { filter: none; }
html[data-theme="bright"] .social-link { color: #f58110; border-color: #f58110; }
html[data-theme="bright"] .social-link:hover,
html[data-theme="bright"] .social-link:focus-visible { color: #fff; border-color: transparent; box-shadow: 0 0.8rem 1.8rem rgba(240, 98, 1, 0.26); }
html[data-theme="bright"] .social-link::before { background: var(--gradient); }
html[data-theme="bright"] .floating-tool-outline { color: var(--coral); border-color: transparent; background: transparent; text-shadow: none; }
html[data-theme="bright"] .floating-tool-outline[aria-expanded="true"],
html[data-theme="bright"] .floating-tool-outline:hover,
html[data-theme="bright"] .floating-tool-outline:focus-visible { color: var(--coral); background: #fff5ea; border-color: rgba(240, 98, 1, 0.42); text-shadow: 0 0 1rem rgba(245, 129, 16, 0.28); }
html[data-theme="bright"] .scroll-top { color: #fff; background: var(--gradient); box-shadow: 0 12px 28px rgba(240, 98, 1, 0.26); }
html[data-theme="bright"] .floating-panel { color: var(--ink); background: rgba(255, 255, 255, 0.96); border-color: rgba(23, 32, 51, 0.18); box-shadow: 0 2rem 5rem rgba(23, 32, 51, 0.18); }
html[data-theme="bright"] .floating-panel-header { border-bottom-color: var(--line); }
html[data-theme="bright"] .floating-panel h2,
html[data-theme="bright"] .floating-panel-close,
html[data-theme="bright"] .floating-chat-starters-title,
html[data-theme="bright"] .floating-chat-form label { color: var(--ink); }
html[data-theme="bright"] .floating-panel-kicker { color: var(--coral); }
html[data-theme="bright"] .floating-chat-content { background: #f7f8fa; }
html[data-theme="bright"] .floating-chat-bubble,
html[data-theme="bright"] .floating-chat-candidates button,
html[data-theme="bright"] .floating-chat-feedback button,
html[data-theme="bright"] .floating-share-options :is(a, button) { color: var(--ink); background: #fff; border-color: var(--line); }
html[data-theme="bright"] .floating-chat-input-row input { color: var(--ink); background: #fff; border-color: var(--line); }
html[data-theme="bright"] .floating-chat-input-row button { color: #fff; background: var(--gradient); box-shadow: 0 0.7rem 1.6rem rgba(240, 98, 1, 0.2); }
html[data-theme="bright"] .floating-chat-starter-icon { color: var(--coral); background: #fff2e5; border-color: rgba(240, 98, 1, 0.32); }
html[data-theme="bright"] .floating-share-options :is(a, button) i { color: var(--coral); }
html[data-theme="bright"] .floating-share-options :is(a[data-selected="true"], button[aria-pressed="true"]) { background: #fff2e5; border-color: rgba(240, 98, 1, 0.5); box-shadow: inset 0 0 0 1px rgba(245, 129, 16, 0.22), 0 0.7rem 1.7rem rgba(23, 32, 51, 0.08); }

/* Dark is intentionally near-black glass, with the purple selected-card highlight. */
html[data-theme="dark"] .hero { background: radial-gradient(circle at 28% 50%, rgba(139, 92, 246, 0.2), transparent 42%), radial-gradient(circle at 76% 50%, rgba(192, 132, 252, 0.11), transparent 42%), linear-gradient(135deg, #050509, #100b18 58%, #1b1027); }
html[data-theme="dark"] .page-hero { background: linear-gradient(180deg, rgba(139, 92, 246, 0.18), transparent 78%); }
html[data-theme="dark"] .section-dark { background: linear-gradient(180deg, rgba(5, 5, 9, 0.1), rgba(5, 5, 9, 0.76)); }
html[data-theme="dark"] .section-soft { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(139, 92, 246, 0.1)); }
html[data-theme="dark"] .site-header.scrolled { background: rgba(5, 5, 9, 0.82); border-bottom-color: var(--line); }
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .insight-card,
html[data-theme="dark"] .advantage-panel,
html[data-theme="dark"] .cta-card,
html[data-theme="dark"] .detail-side,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .capability-card,
html[data-theme="dark"] .process-flow,
html[data-theme="dark"] .article-media-story,
html[data-theme="dark"] .filter-bar { background: rgba(255, 255, 255, 0.055); border-color: rgba(224, 203, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
html[data-theme="dark"] .case-card:hover,
html[data-theme="dark"] .service-card:hover { border-color: var(--pink); box-shadow: var(--shadow-card); }
html[data-theme="dark"] .case-card::after { background: radial-gradient(circle, rgba(192, 132, 252, 0.3), transparent 68%); }
html[data-theme="dark"] .insight-card { border-top-color: rgba(192, 132, 252, 0.78); }
html[data-theme="dark"] .custom-select-menu { background: linear-gradient(145deg, rgba(31, 20, 48, 0.97), rgba(7, 6, 12, 0.98)); border-color: rgba(224, 203, 255, 0.25); box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.62), 0 0 1.5rem rgba(192,132,252,0.18); }
html[data-theme="dark"] .custom-select-option:hover,
html[data-theme="dark"] .custom-select-option:focus-visible,
html[data-theme="dark"] .custom-select-option.is-selected { background: linear-gradient(90deg, rgba(192,132,252,0.25), rgba(139,92,246,0.15)); }
html[data-theme="dark"] .floating-tool-outline[aria-expanded="true"] { background: rgba(192, 132, 252, 0.18); border-color: rgba(224, 203, 255, 0.35); }
html[data-theme="dark"] .floating-panel { background: rgba(10, 8, 15, 0.92); border-color: rgba(224, 203, 255, 0.2); }

/* Selector UI: circles only, equal mobile widths, no page scroll lock. */
.theme-desktop-controls { position: relative; display: flex; align-items: center; margin-left: 0.35rem; }
.theme-trigger { display: grid; place-items: center; width: 2.45rem; height: 2.45rem; padding: 0.3rem; color: var(--white); background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.theme-trigger:hover, .theme-trigger:focus-visible, .theme-trigger[aria-expanded="true"] { border-color: var(--line-hot); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.theme-current-swatch, .theme-option-swatch { display: block; width: 1.35rem; height: 1.35rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 0 0 1px rgba(0,0,0,0.12); }
.theme-current-swatch[data-theme="amicable"], .theme-option-swatch-amicable { background: linear-gradient(135deg, #d946ef, #ff8c42); }
.theme-current-swatch[data-theme="bright"], .theme-option-swatch-bright { background: linear-gradient(135deg, #fff, #f58110); }
.theme-current-swatch[data-theme="dark"], .theme-option-swatch-dark { background: linear-gradient(135deg, #050509, #c084fc); }
.theme-popover { position: absolute; z-index: calc(var(--z-nav) + 2); top: calc(100% + 0.65rem); right: 0; width: 10.8rem; padding: 0.65rem; background: color-mix(in srgb, var(--surface-dark) 92%, transparent); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-card); backdrop-filter: blur(18px); }
.theme-popover[hidden], .theme-first-visit[hidden], .theme-transition-layer[hidden] { display: none; }
.theme-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.theme-option { display: grid; place-items: center; min-width: 0; min-height: 2.6rem; padding: 0.35rem; color: var(--white); background: transparent; border: 1px solid transparent; border-radius: 0.75rem; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.theme-option:hover, .theme-option:focus-visible, .theme-option.is-selected { border-color: var(--line-hot); background: color-mix(in srgb, var(--surface) 84%, transparent); transform: translateY(-1px); }
.theme-option.is-selected .theme-option-swatch { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8), 0 0 0 2px var(--line-hot); }
.theme-mobile-controls { display: none; }
.theme-first-visit { position: fixed; z-index: calc(var(--z-nav) + 5); top: 6.25rem; right: 1rem; width: min(14rem, calc(100vw - 2rem)); padding: 0.85rem; background: color-mix(in srgb, var(--surface-dark) 94%, transparent); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: var(--shadow-card); backdrop-filter: blur(20px); }
.theme-first-visit-close { position: absolute; top: 0.35rem; right: 0.35rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: 50%; cursor: pointer; font-size: 0; line-height: 0; }
.theme-first-visit-close::before,
.theme-first-visit-close::after { position: absolute; top: 50%; left: 50%; width: 0.8rem; height: 1.5px; content: ""; background: currentColor; border-radius: 999px; transform-origin: center; }
.theme-first-visit-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.theme-first-visit-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.theme-first-visit-close:hover, .theme-first-visit-close:focus-visible { color: var(--coral); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.theme-option-grid-card { padding-top: 0.35rem; }
.theme-transition-layer { position: fixed; z-index: calc(var(--z-nav) + 4); inset: 0; pointer-events: none; opacity: 0; background: var(--ink-deep); transition: opacity 280ms ease; }
.theme-transition-layer.is-active { opacity: 1; }

@supports (view-transition-name: root) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 520ms; animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
  ::view-transition-new(root) { clip-path: circle(0 at var(--theme-transition-origin, 50% 50%)); animation-name: themeReveal; }
  @keyframes themeReveal { to { clip-path: circle(150vmax at var(--theme-transition-origin, 50% 50%)); } }
}

@media (max-width: 900px) {
  .theme-desktop-controls { display: none; }
  .theme-mobile-controls { display: block; width: 100%; margin-top: 0.65rem; padding: 0.85rem 1rem 1rem; border-top: 1px solid var(--line); }
  .theme-option-grid-mobile { width: 100%; gap: 0.55rem; }
  .theme-option-grid-mobile .theme-option { min-height: 3rem; }
}

@media (max-width: 560px) {
  .theme-first-visit { top: 5.6rem; right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-transition-layer { transition: none; }
  .theme-option, .theme-trigger { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/*
 * Prototype2.0 parity layer.
 * The formal Razor DOM stays authoritative; these declarations adapt the
 * approved prototype2.0 semantic surfaces to the matching formal selectors.
 */
html[data-theme="bright"] {
  --surface-deep: #ffffff;
  --section-hero: #ffffff;
  --section-soft: #f3f4f6;
  --section-soft-deep: #e9ecef;
  --section-dark: #eceff2;
  --ink: #f7f8fa;
  --ink-deep: #ffffff;
  --ink-soft: #eef1f5;
  --surface: rgba(15,23,42,0.045);
  --surface-strong: rgba(15,23,42,0.075);
  --surface-dark: rgba(15,23,42,0.08);
  --line: rgba(15,23,42,0.15);
  --line-hot: rgba(245,129,16,0.42);
  --pink: #f58110;
  --coral: #f06201;
  --lavender: #374151;
  --muted: #4b5563;
  --white: #15161b;
  --shadow-card: 0 20px 40px rgba(15,23,42,0.1);
  --shadow-button: 0 10px 30px rgba(100,116,139,0.14), 0 0 24px rgba(255,255,255,0.84);
  --shadow-cta: 0 15px 40px rgba(100,116,139,0.16), 0 0 30px rgba(255,255,255,0.9);
  --shadow-floating-panel: 0 2rem 5.5rem rgba(15,23,42,0.16), 0 0.75rem 2.25rem rgba(15,23,42,0.1), 0 0 2.8rem rgba(245,129,16,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
  --bright-section-soft-start: #fbfcfd;
  --bright-section-soft-end: #eef1f4;
  --bright-section-dark-start: #e4e8ed;
  --bright-section-dark-mid: #edf0f3;
  --bright-section-dark-end: #e1e6eb;
  --gradient: linear-gradient(135deg, #f06201, #f58110);
}

html[data-theme="dark"] {
  --surface-deep: #000000;
  --section-hero: #090308;
  --section-soft: #160c1d;
  --section-soft-deep: #100915;
  --section-dark: #050507;
  --ink: #080808;
  --ink-deep: #000000;
  --ink-soft: #151018;
  --surface: rgba(255,255,255,0.065);
  --surface-strong: rgba(255,255,255,0.1);
  --surface-dark: rgba(0,0,0,0.74);
  --line: rgba(255,255,255,0.2);
  --line-hot: rgba(244,114,182,0.62);
  --pink: #f472b6;
  --coral: #c084fc;
  --highlight-purple: rgba(192,132,252,0.82);
  --highlight-purple-glow: rgba(192,132,252,0.24);
  --lavender: #eadcf4;
  --muted: #b7adbe;
  --white: #fffaff;
  --shadow-card: 0 20px 40px rgba(244,114,182,0.2);
  --shadow-button: 0 10px 30px rgba(192,132,252,0.24);
  --shadow-cta: 0 15px 40px rgba(244,114,182,0.28);
  --shadow-floating-panel: 0 2rem 5.5rem rgba(0,0,0,0.88), 0 0.75rem 2.25rem rgba(0,0,0,0.7), 0 0 2.8rem rgba(244,114,182,0.2), inset 0 1px 0 rgba(255,255,255,0.14);
  --gradient: linear-gradient(135deg, #f472b6, #8b5cf6);
}

html[data-theme="bright"] body { color: var(--white); background: #ffffff; }
html[data-theme="bright"] .ambient { opacity: 0.08; mix-blend-mode: multiply; filter: blur(28px); }
html[data-theme="bright"] .ambient-a { background: radial-gradient(circle, rgba(255,255,255,0.96), transparent 68%); }
html[data-theme="bright"] .ambient-b { background: radial-gradient(circle, rgba(148,163,184,0.2), transparent 68%); }
html[data-theme="bright"] .grain { opacity: 0.015; }
html[data-theme="bright"] .site-header { background: transparent; border-bottom-color: rgba(15,23,42,0.08); }
html[data-theme="bright"] .site-header.scrolled { background: rgba(255,255,255,0.88); border-bottom-color: var(--line); box-shadow: 0 4px 30px rgba(15,23,42,0.1); }
html[data-theme="bright"] .site-header:not(.scrolled) .logo-light { opacity: 0; }
html[data-theme="bright"] .site-header:not(.scrolled) .logo-color { opacity: 1; }
html[data-theme="bright"] .brand-mark:hover .brand-logo { filter: drop-shadow(0 0 14px rgba(100,116,139,0.18)); }
html[data-theme="bright"] .nav-link { color: rgba(21,22,27,0.78); }
html[data-theme="bright"] .nav-link:hover,
html[data-theme="bright"] .nav-link.is-active { color: #15161b; }
html[data-theme="bright"] .hero,
html[data-theme="bright"] .page-hero {
  color: var(--white);
  background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.88), transparent 42%), linear-gradient(180deg, var(--section-hero) 0%, var(--section-hero) 70%, #f8fafc 100%);
}
html[data-theme="bright"] .hero-logo-main { filter: drop-shadow(0 16px 32px rgba(100,116,139,0.16)) drop-shadow(0 0 28px rgba(255,255,255,0.9)) !important; }
html[data-theme="bright"] .section-dark { background: radial-gradient(circle at 76% 20%, rgba(255,255,255,0.78), transparent 30%), linear-gradient(180deg, var(--section-dark), #e6e9ec 100%); }
html[data-theme="bright"] .section-soft { background: radial-gradient(circle at 15% 18%, rgba(255,255,255,0.86), transparent 28%), radial-gradient(circle at 84% 78%, rgba(255,255,255,0.62), transparent 32%), linear-gradient(135deg, var(--section-soft) 0%, var(--section-soft-deep) 52%, var(--section-soft) 100%); }
html[data-theme="bright"] body[data-route="/"] #selected-work.section-soft,
html[data-theme="bright"] body[data-route="/"] #how-we-work.section-soft {
  background: radial-gradient(circle at 16% 12%, rgba(255,255,255,0.98), transparent 30%), radial-gradient(circle at 86% 88%, rgba(255,255,255,0.72), transparent 38%), linear-gradient(145deg, var(--bright-section-soft-start) 0%, var(--bright-section-soft-start) 34%, var(--bright-section-soft-end) 100%);
}
html[data-theme="bright"] body[data-route="/"] #services.section-dark,
html[data-theme="bright"] body[data-route="/"] #insights.section-dark {
  background: radial-gradient(circle at 74% 4%, rgba(255,255,255,0.86), transparent 28%), radial-gradient(circle at 18% 82%, rgba(255,255,255,0.34), transparent 34%), linear-gradient(180deg, var(--bright-section-dark-start) 0%, var(--bright-section-dark-mid) 52%, var(--bright-section-dark-end) 100%);
}
html[data-theme="bright"] body[data-route^="/services/"] .section-soft,
html[data-theme="bright"] body[data-route^="/showcase/"] .section-soft,
html[data-theme="bright"] body[data-route^="/insights/"] .section-soft {
  background: radial-gradient(circle at 16% 12%, rgba(255,255,255,0.98), transparent 30%), radial-gradient(circle at 86% 88%, rgba(255,255,255,0.72), transparent 38%), linear-gradient(145deg, var(--bright-section-soft-start) 0%, var(--bright-section-soft-start) 34%, var(--bright-section-soft-end) 100%);
}
html[data-theme="bright"] body[data-route^="/services/"] .section-dark,
html[data-theme="bright"] body[data-route^="/showcase/"] .section-dark,
html[data-theme="bright"] body[data-route^="/insights/"] .section-dark {
  background: radial-gradient(circle at 74% 4%, rgba(255,255,255,0.86), transparent 28%), radial-gradient(circle at 18% 82%, rgba(255,255,255,0.34), transparent 34%), linear-gradient(180deg, var(--bright-section-dark-start) 0%, var(--bright-section-dark-mid) 52%, var(--bright-section-dark-end) 100%);
}
html[data-theme="bright"] body[data-route^="/insights/"] .page-hero { background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.98), transparent 32%), radial-gradient(circle at 84% 82%, rgba(226,232,240,0.28), transparent 34%), linear-gradient(180deg, #ffffff 0%, #ffffff 56%, #f5f7f9 100%); }
html[data-theme="bright"] body[data-route^="/insights/"] .section-soft { background: radial-gradient(circle at 12% 8%, rgba(255,255,255,0.98), transparent 27%), radial-gradient(circle at 86% 86%, rgba(255,255,255,0.7), transparent 34%), linear-gradient(145deg, #f8fafb 0%, #f2f4f6 48%, #e9edf1 100%); }
html[data-theme="bright"] body[data-route^="/insights/"] .section-dark { background: radial-gradient(circle at 76% 6%, rgba(255,255,255,0.78), transparent 28%), radial-gradient(circle at 16% 86%, rgba(255,255,255,0.34), transparent 32%), linear-gradient(180deg, #e0e5ea 0%, #edf0f3 52%, #dce2e8 100%); }

html[data-theme] .progressive-actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
html[data-theme="bright"] .button-primary { color: #ffffff; background: var(--gradient); box-shadow: var(--shadow-button); }
html[data-theme="bright"] .button-secondary { color: #15161b; background: rgba(255,255,255,0.82); border-color: rgba(15,23,42,0.22); }
html[data-theme="bright"] .button-secondary:hover { border-color: var(--pink); background: #ffffff; }
html[data-theme="bright"] .case-card,
html[data-theme="bright"] .service-card { color: var(--white); background: #ffffff; border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 1rem 2rem rgba(15,23,42,0.1); }
html[data-theme="bright"] .case-card:hover,
html[data-theme="bright"] .service-card:hover { background: #ffffff; border-color: var(--pink); box-shadow: 0 1rem 2rem rgba(15,23,42,0.1), 0 0 1.35rem rgba(245,129,16,0.22); }
html[data-theme="bright"] .case-media { background: #eef1f5; }
html[data-theme="bright"] .case-media::after { background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,0.34)); }
html[data-theme="bright"] .case-content h3,
html[data-theme="bright"] .service-card h3,
html[data-theme="bright"] .insight-card h3,
html[data-theme="bright"] .advantage-list strong { color: #15161b; }
html[data-theme="bright"] .tag { color: #403b49; background: rgba(15,23,42,0.035); border-color: rgba(15,23,42,0.15); }
html[data-theme="bright"] .text-link { color: #15161b; }
html[data-theme="bright"] .service-btn { color: #111827; background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gradient) border-box; border-color: transparent; box-shadow: 0 0.5rem 1.4rem rgba(15,23,42,0.08); }
html[data-theme="bright"] .service-btn::before { background: var(--gradient); }
html[data-theme="bright"] .service-btn:hover,
html[data-theme="bright"] .service-btn:focus-visible { color: #ffffff; box-shadow: var(--shadow-button); }
html[data-theme="bright"] .advantage-panel,
html[data-theme="bright"] .cta-card,
html[data-theme="bright"] .contact-form,
html[data-theme="bright"] .capability-card { color: var(--white); background: rgba(255,255,255,0.82); border-color: rgba(15,23,42,0.12); box-shadow: 0 1rem 2rem rgba(15,23,42,0.08); }
html[data-theme="bright"] .service-icon { color: #ffffff; background: var(--gradient); box-shadow: 0 12px 24px rgba(100,116,139,0.16), 0 0 22px rgba(255,255,255,0.72); }
html[data-theme="bright"] .process-card { background: linear-gradient(180deg, #ffffff, #f7f8fa); border-left-color: var(--pink); }
html[data-theme="bright"] .logo-tile { box-shadow: 0 1rem 2.5rem rgba(15,23,42,0.1); }
html[data-theme="bright"] .insight-card { color: var(--white); background: #ffffff; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-top-color: rgba(245,129,16,0.78); box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 1rem 2rem rgba(15,23,42,0.1); }
html[data-theme="bright"] .insight-card:hover { background: #ffffff; }
html[data-theme="bright"] .cta-card::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.92), rgba(203,213,225,0.42), rgba(255,255,255,0.92), transparent); }
html[data-theme="bright"] .filter-bar,
html[data-theme="bright"] .detail-side,
html[data-theme="bright"] .article-media-story,
html[data-theme="bright"] .process-flow,
html[data-theme="bright"] .article-takeaway { color: var(--white); background: #ffffff; border-color: var(--line); }
html[data-theme="bright"] .process-flow { background: linear-gradient(135deg, #ffffff 0%, #ffffff 48%, #f1f3f6 100%); box-shadow: 0 1rem 2.2rem rgba(100,116,139,0.12), inset 0 1px 0 rgba(255,255,255,0.96); }
html[data-theme="bright"] .process-flow::after { background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(203,213,225,0.22) 44%, transparent 70%); filter: blur(1rem); opacity: 0.78; }
html[data-theme="bright"] .process-svg-track { stroke: rgba(15,23,42,0.24); }
html[data-theme="bright"] .process-svg-glow { stroke: rgba(255,255,255,0.92); filter: drop-shadow(0 0 0.55rem rgba(148,163,184,0.3)); }
html[data-theme="bright"] .process-step-dot { box-shadow: 0 0 0.75rem rgba(148,163,184,0.22); }
html[data-theme="bright"] .article-media-block { background: #f4f6f8; border-color: rgba(15,23,42,0.14); box-shadow: 0 1rem 2rem rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.94); }
html[data-theme="bright"] .article-media-caption { color: #334155; background: radial-gradient(circle at 12% 18%, rgba(255,255,255,0.98), transparent 36%), linear-gradient(135deg, #ffffff 0%, #eef1f4 100%); border-top-color: rgba(15,23,42,0.12); }
html[data-theme="bright"] .article-media-kind { color: #f06201; }
html[data-theme="bright"] .article-media-caption a { color: #15161b; }
html[data-theme="bright"] select,
html[data-theme="bright"] input,
html[data-theme="bright"] textarea,
html[data-theme="bright"] .custom-select-trigger { color: #15161b; background: #ffffff; border-color: rgba(15,23,42,0.2); }
html[data-theme="bright"] .custom-select-trigger:hover,
html[data-theme="bright"] .custom-select.is-open .custom-select-trigger { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--gradient) border-box; }
html[data-theme="bright"] .custom-select-menu { background: #ffffff; border-color: rgba(15,23,42,0.16); box-shadow: 0 1.2rem 3rem rgba(15,23,42,0.14); }
html[data-theme="bright"] .custom-select-option { color: #403b49; }
html[data-theme="bright"] .custom-select-option:hover,
html[data-theme="bright"] .custom-select-option:focus-visible,
html[data-theme="bright"] .custom-select-option.is-selected { color: #15161b; background: rgba(245,129,16,0.08); }

html[data-theme="bright"] .site-footer { color: #374151; background: #f7f8fa; border-top-color: rgba(15,23,42,0.1); }
html[data-theme="bright"] .footer-nav a,
html[data-theme="bright"] .footer-partner,
html[data-theme="bright"] .footer-bottom { color: #374151; }
html[data-theme="bright"] .footer-nav a span:first-child { color: var(--pink); }
html[data-theme="bright"] .footer-nav a:hover { color: #15161b; }
html[data-theme="bright"] .footer-bottom { border-top-color: rgba(15,23,42,0.1); }
html[data-theme="bright"] .site-footer .footer-logo-link img,
html[data-theme="bright"] .footer-partner img { filter: brightness(0) saturate(100%); opacity: 0.82; }
html[data-theme="bright"] .footer-brand p { color: #374151; }
html[data-theme="bright"] .social-link { color: #f58110; border-color: rgba(245,129,16,0.6); }
html[data-theme="bright"] .social-link::before { background: var(--gradient); }
html[data-theme="bright"] .social-link:hover,
html[data-theme="bright"] .social-link:focus-visible { color: #ffffff; border-color: transparent; background: var(--gradient); }
html[data-theme="bright"] .floating-tool { color: var(--pink); }
html[data-theme="bright"] .floating-tool-outline { color: var(--pink); border-color: transparent; background: transparent; text-shadow: 0 0 1rem rgba(245,129,16,0.18); }
html[data-theme="bright"] .floating-tool-outline:hover,
html[data-theme="bright"] .floating-tool-outline:focus-visible,
html[data-theme="bright"] .floating-tool-outline[aria-expanded="true"] { color: #f06201; background: rgba(245,129,16,0.1); border-color: rgba(240,98,1,0.52); text-shadow: 0 0 1.15rem rgba(245,129,16,0.28); }
html[data-theme="bright"] .scroll-top { color: #ffffff; border-color: rgba(240,98,1,0.42); background: var(--gradient); box-shadow: 0 0.75rem 1.75rem rgba(100,116,139,0.18), 0 0 1.5rem rgba(255,255,255,0.68); }
html[data-theme="bright"] .floating-panel { color: #15161b; background: rgba(255,255,255,0.94); border-color: rgba(15,23,42,0.16); box-shadow: var(--shadow-floating-panel); }
html[data-theme="bright"] .floating-panel::before { background: linear-gradient(110deg, rgba(245,129,16,0.04), transparent 34%, rgba(240,98,1,0.04)); }
html[data-theme="bright"] .floating-panel h2,
html[data-theme="bright"] .floating-panel-close,
html[data-theme="bright"] .floating-chat-starters-title,
html[data-theme="bright"] .floating-chat-form label,
html[data-theme="bright"] .floating-chat-bubble > p { color: #15161b; }
html[data-theme="bright"] .floating-panel-close,
html[data-theme="bright"] .floating-chat-bubble,
html[data-theme="bright"] .floating-chat-status { background: rgba(15,23,42,0.035); border-color: rgba(15,23,42,0.14); }
html[data-theme="bright"] .floating-chat-content { background: rgba(15,23,42,0.025); }
html[data-theme="bright"] .floating-chat-controls { background: rgba(255,255,255,0.94); border-top-color: rgba(15,23,42,0.12); }
html[data-theme="bright"] .floating-chat-input-row input { color: #15161b; background: #ffffff; border-color: rgba(15,23,42,0.18); }
html[data-theme="bright"] .floating-chat-input-row button { color: #ffffff; background: var(--gradient); }
html[data-theme="bright"] .floating-chat-starter-grid button,
html[data-theme="bright"] .floating-share-options :is(a, button) { color: #15161b; background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(245,129,16,0.08)); border-color: rgba(245,129,16,0.48); }
html[data-theme="bright"] .floating-chat-starter-icon,
html[data-theme="bright"] .floating-share-options :is(a, button) i { color: #f06201; }

html[data-theme="dark"] body { color: var(--white); background: #000000; }
html[data-theme="dark"] .ambient-a { background: radial-gradient(circle, rgba(244,114,182,0.48), transparent 68%); }
html[data-theme="dark"] .ambient-b { background: radial-gradient(circle, rgba(139,92,246,0.36), transparent 68%); }
html[data-theme="dark"] .grain { opacity: 0.008; }
html[data-theme="dark"] .site-header { border-bottom-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .site-header.scrolled { background: rgba(0,0,0,0.78); border-bottom-color: var(--line); box-shadow: 0 4px 30px rgba(0,0,0,0.55); }
html[data-theme="dark"] .hero { background: radial-gradient(circle at 30% 50%, rgba(244,114,182,0.1), transparent 42%), radial-gradient(circle at 70% 50%, rgba(139,92,246,0.1), transparent 42%), var(--section-hero); }
html[data-theme="dark"] .hero-logo-main { filter: drop-shadow(0 15px 35px rgba(244,114,182,0.34)) drop-shadow(0 0 35px rgba(139,92,246,0.26)) !important; }
html[data-theme="dark"] .page-hero { background: linear-gradient(180deg, rgba(244,114,182,0.1), transparent 78%), var(--section-hero); }
html[data-theme="dark"] .section-dark { background: radial-gradient(circle at 78% 18%, rgba(139,92,246,0.07), transparent 30%), linear-gradient(180deg, var(--section-dark), #020204 100%); }
html[data-theme="dark"] .section-soft { background: radial-gradient(circle at 14% 18%, rgba(192,132,252,0.08), transparent 30%), radial-gradient(circle at 84% 76%, rgba(244,114,182,0.06), transparent 34%), linear-gradient(135deg, var(--section-soft) 0%, var(--section-soft-deep) 52%, #1a0f20 100%); }
html[data-theme="dark"] .button-primary { color: #ffffff; background: var(--gradient); }
html[data-theme="dark"] .button-secondary { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.28); }
html[data-theme="dark"] .button-secondary:hover { background: rgba(255,255,255,0.08); }
html[data-theme="dark"] .case-media::after { background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.74)); }
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .advantage-panel,
html[data-theme="dark"] .cta-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .capability-card,
html[data-theme="dark"] .detail-side,
html[data-theme="dark"] .article-media-story,
html[data-theme="dark"] .process-flow,
html[data-theme="dark"] .article-takeaway { background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 48%, rgba(244,114,182,0.035)), rgba(8,8,10,0.78); border-color: rgba(255,255,255,0.2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1.25rem 3rem rgba(0,0,0,0.32), 0 0 0.9rem rgba(244,114,182,0.045); backdrop-filter: blur(18px) saturate(1.12); -webkit-backdrop-filter: blur(18px) saturate(1.12); }
html[data-theme="dark"] .case-card:hover,
html[data-theme="dark"] .service-card:hover { background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.025) 48%, rgba(244,114,182,0.05)), rgba(8,8,10,0.72); border-color: var(--highlight-purple); box-shadow: 0 1.25rem 3rem rgba(0,0,0,0.34), 0 0 1.35rem var(--highlight-purple-glow); }
html[data-theme="dark"] .service-icon { background: var(--gradient); box-shadow: 0 12px 24px rgba(244,114,182,0.18); }
html[data-theme="dark"] .process-card { background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.018)); border-left-color: var(--highlight-purple); }
html[data-theme="dark"] .logo-tile { border-left-color: var(--highlight-purple); }
html[data-theme="dark"] .logo-tile:hover,
html[data-theme="dark"] .logo-tile:focus-within { box-shadow: 0 1rem 2.5rem var(--highlight-purple-glow); }
html[data-theme="dark"] .insight-card { background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.018) 48%, rgba(244,114,182,0.035)), rgba(20,12,22,0.76); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-top: 2px solid var(--highlight-purple); box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 1.25rem 3rem rgba(0,0,0,0.32), 0 0 0.9rem rgba(244,114,182,0.045); backdrop-filter: blur(18px) saturate(1.12); -webkit-backdrop-filter: blur(18px) saturate(1.12); }
html[data-theme="dark"] .cta-card::after { background: linear-gradient(90deg, transparent, rgba(244,114,182,0.22), rgba(139,92,246,0.24), transparent); }
html[data-theme="dark"] .site-footer { background: rgba(0,0,0,0.9); border-top-color: rgba(255,255,255,0.1); }
html[data-theme="dark"] .floating-panel { background: linear-gradient(145deg, rgba(25,15,30,0.96), rgba(0,0,0,0.96)); border-color: rgba(255,255,255,0.2); }
html[data-theme="dark"] .floating-panel::before { background: linear-gradient(110deg, rgba(255,255,255,0.1), transparent 34%, rgba(244,114,182,0.08)); }
html[data-theme="dark"] .custom-select-menu { background: linear-gradient(145deg, rgba(25,15,30,0.97), rgba(0,0,0,0.98)); border-color: rgba(255,255,255,0.2); box-shadow: 0 1.2rem 3rem rgba(0,0,0,0.62), 0 0 1.5rem rgba(192,132,252,0.18); }
html[data-theme="dark"] .custom-select-option:hover,
html[data-theme="dark"] .custom-select-option:focus-visible,
html[data-theme="dark"] .custom-select-option.is-selected { background: linear-gradient(90deg, rgba(192,132,252,0.25), rgba(139,92,246,0.15)); }

/* Contact combines page-hero and section-dark; page-hero is the prototype authority. */
html[data-theme="bright"] .page-hero.section-dark { background: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.88), transparent 42%), linear-gradient(180deg, var(--section-hero) 0%, var(--section-hero) 70%, #f8fafc 100%); }
html[data-theme="dark"] .page-hero.section-dark { background: linear-gradient(180deg, rgba(244,114,182,0.1), transparent 78%), var(--section-hero); }

/* Theme picker geometry and material mirror prototype2.0. */
.theme-desktop-controls { position: relative; display: flex; flex: 0 0 auto; align-items: center; margin: 0.16rem 0 0 0.35rem; }
.theme-trigger { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; color: currentColor; background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; }
.theme-trigger:hover,
.theme-trigger:focus-visible,
.theme-trigger[aria-expanded="true"] { border-color: var(--pink); background: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 18%, transparent); transform: translateY(-1px); }
.theme-current-swatch { width: 1rem; height: 1rem; }
.theme-option-swatch { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.theme-current-swatch,
.theme-option-swatch { display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 1px rgba(255,255,255,0.16); }
.theme-current-swatch[data-theme="amicable"],
.theme-option-swatch-amicable { background: linear-gradient(135deg, #d946ef, #ff8c42); }
.theme-current-swatch[data-theme="bright"],
.theme-option-swatch-bright { background: #ffffff; box-shadow: inset 0 0 0 1px rgba(15,23,42,0.24), 0 0 0 1px rgba(255,255,255,0.32); }
.theme-current-swatch[data-theme="dark"],
.theme-option-swatch-dark { background: #000000; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.26), 0 0 0 1px rgba(255,255,255,0.18); }
.theme-popover { position: absolute; z-index: calc(var(--z-nav) + 2); top: calc(100% + 0.65rem); right: 0; width: 20.9rem; padding: 0.45rem; color: var(--white); background: rgba(16,0,33,0.94); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.85rem; box-shadow: 0 1rem 2.5rem rgba(4,0,12,0.34); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.theme-option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.3rem; }
.theme-option { display: inline-flex; width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.3rem 0.42rem; align-items: center; justify-content: center; gap: 0.38rem; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 0.65rem; font: inherit; font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
.theme-option:hover,
.theme-option:focus-visible,
.theme-option.is-selected { background: color-mix(in srgb, var(--pink) 13%, transparent); border-color: color-mix(in srgb, var(--pink) 56%, transparent); transform: translateY(-1px); }
.theme-option-name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; }
.theme-first-visit { top: auto; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); left: max(1rem, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: center; width: min(30rem, calc(100vw - 2rem)); min-height: 3.8rem; margin-inline: auto; padding: 0.52rem 3.05rem 0.52rem 0.7rem; color: var(--white); background: rgba(16,0,33,0.88); border: 1px solid rgba(255,255,255,0.18); border-radius: 1rem; box-shadow: 0 1.3rem 3.5rem rgba(4,0,12,0.34), 0 0 1.4rem color-mix(in srgb, var(--pink) 18%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); opacity: 0; transform: translateY(0.7rem); transition: opacity 220ms ease, transform 220ms ease; }
.theme-first-visit.is-visible { opacity: 1; transform: none; }
.theme-first-visit .theme-option-grid { width: 100%; gap: 0.4rem; }
.theme-first-visit .theme-option-name { overflow: visible; text-overflow: clip; }
.theme-first-visit-close { top: 0.55rem; right: 0.55rem; width: 1.8rem; height: 1.8rem; color: currentColor; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
.theme-first-visit-close:hover,
.theme-first-visit-close:focus-visible { color: currentColor; background: color-mix(in srgb, var(--pink) 12%, transparent); border-color: var(--pink); transform: rotate(4deg); }
html[data-theme="bright"] .theme-popover,
html[data-theme="bright"] .theme-first-visit { color: #15161b; background: rgba(255,255,255,0.96); border-color: rgba(15,23,42,0.14); box-shadow: 0 1.3rem 3.5rem rgba(15,23,42,0.14), 0 0 1.4rem rgba(245,129,16,0.08); }
html[data-theme="dark"] .theme-popover,
html[data-theme="dark"] .theme-first-visit { background: rgba(0,0,0,0.92); border-color: rgba(255,255,255,0.2); }

@media (max-width: 900px) {
  .theme-desktop-controls { display: none; }
  .theme-mobile-controls { display: block; width: 100%; margin: 0.7rem 0 0; padding: 0.7rem 0 0.7rem; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
  .theme-option-grid-mobile { width: 100%; gap: 0.45rem; }
  .theme-option-grid-mobile .theme-option { width: 100%; min-width: 0; min-height: 2.75rem; padding-inline: 0.15rem; font-size: clamp(0.72rem, 2.6vw, 0.76rem); }
  .theme-option-grid-mobile .theme-option-swatch { width: 1rem; height: 1rem; }
  .theme-option-grid-mobile .theme-option-name { overflow: visible; text-overflow: clip; }
}

@media (max-width: 560px) {
  .theme-first-visit { right: max(0.5rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); left: max(0.5rem, env(safe-area-inset-left)); width: min(30rem, calc(100vw - 1rem)); padding-inline: 0.45rem 2.7rem; }
  .theme-first-visit .theme-option-grid { gap: 0.2rem; }
  .theme-first-visit .theme-option { gap: 0.18rem; padding-inline: 0.1rem; font-size: 0.72rem; }
  .theme-first-visit .theme-option-swatch { width: 1rem; height: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-first-visit,
  .theme-popover,
  .theme-trigger,
  .theme-option,
  .theme-first-visit-close { transition-duration: 0.01ms; }
}