/* ============================================================================
   assemblelabs.ai — LIGHT (day) MODE THEME
   Every rule here is gated on html.light-mode, which only the theme-toggle click
   ever sets (the site always boots dark). It used to be ~250 KB of inline
   <style> in index.html sitting BEFORE the hero, so every first paint paid for
   CSS that could never apply. It is now linked from the very same spot in
   index.html (cascade position unchanged — later rules in index.html that
   override these by source order still do) as a non-render-blocking sheet.
   Source order below = the original 10 <style> blocks, in order. Edit here for
   light-mode work; tools/build.mjs minifies this file into dist/ as well.
   ============================================================================ */

/* ======================= <style id="assemble-light-mode"> ======================= */

/* ---- CSS variables (rule 10): redefine all :root dark vars for light mode ---- */
html.light-mode {
    color-scheme: light; /* flips UA scrollbars/controls with the theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #ececef;
    --border: #d2d2d7;
    --border-hover: rgba(0, 0, 0, 0.16);
    --text-primary: #1d1d1f;
    --text-secondary: #515154;
    --text-tertiary: #6e6e73;
    --accent: #6d28d9;
    --accent-light: #7c3aed;
    --gradient: linear-gradient(180deg, rgba(109, 64, 207, 0.10), rgba(124, 102, 220, 0.05));
    --gradient-subtle: linear-gradient(180deg, rgba(109, 64, 207, 0.05), rgba(124, 102, 220, 0.03));
}

/* ---- body: flat white page, dark text ---- */
html.light-mode body {
    background: #ffffff;
    color: #1d1d1f;
}

/* ---- Animations with colored/dark glows: neutralize the keyframe box-shadows ---- */
/* cursorWindowGlow: purple halo -> neutral soft shadow, no pulsing color */
html.light-mode .cursor-window,

/* ---- Skip link: dark navy chip + purple border -> light surface ---- */
html.light-mode .skip-link {
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}
html.light-mode .skip-link:focus {
    outline: 2px solid rgba(0, 0, 0, 0.4);
}

/* ---- Navigation bar: white surface, hairline border, neutral shadow ---- */
html.light-mode nav {
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* nav tint pseudo-element: dark rgba(11,11,12,*) -> light frosted white */
html.light-mode nav::before {
    background: rgba(255, 255, 255, 0.6);
}
html.light-mode nav.floating {
    border-color: #d2d2d7;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
html.light-mode nav.floating::before {
    background: rgba(255, 255, 255, 0.85);
}
html.light-mode nav:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
html.light-mode nav:hover::before {
    background: rgba(255, 255, 255, 0.7);
}
html.light-mode nav.floating:hover {
    border-color: rgba(0, 0, 0, 0.16);
}

/* nav separators/dividers driven by --border var already flip; explicit for safety */
html.light-mode .nav-separator,
html.light-mode .nav-divider {
    background-color: #d2d2d7;
}

/* ---- logoGlow keyframe (purple bloom on .logo-icon) -> remove, no glow ---- */
html.light-mode .logo-icon {
    box-shadow: none;
    animation: none;
}

/* ---- Logo wordmarks: white->grey clip-text gradients -> solid dark ---- */
html.light-mode .logo {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
    animation: none;
}

/* Day-mode wordmark: dark metallic (lit from above) with the same occasional
   glint sweep as dark mode; the highlight is capped below pure white so the
   letters never wash out against the light nav bar */
html.light-mode .logo-text {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(to bottom, #4a4a50 0%, #17171a 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1d1d1f;
}

/* ---- Nav links: light-grey text -> secondary dark ---- */
html.light-mode .nav-links a {
    color: #515154;
}
html.light-mode .nav-links a:hover {
    color: #1d1d1f;
}
/* Primary CTA inside nav keeps white text on its dark accent button -> see .btn-primary below */

/* ---- Buttons ---- */
/* Primary: dark navy fill + purple glow -> brand-purple solid fill, white text, no glow */
html.light-mode .btn-primary {
    background: #6d28d9;
    border: 1px solid #6d28d9;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 20px rgba(147, 51, 234, 0.4);
}
html.light-mode .btn-primary:hover {
    background: #7c3aed;
    border: 1px solid #7c3aed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 30px rgba(147, 51, 234, 0.6);
}
/* Inline-style override on primary buttons that carry a glow box-shadow */
html.light-mode .btn-primary[style*="box-shadow"]:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06), 0 0 30px rgba(147, 51, 234, 0.6) !important;
}
/* Nav primary: near-black text on the light-purple fill (2026-07-30) */
html.light-mode .nav-links .btn-primary,
html.light-mode .nav-links .btn-primary:hover {
    color: #1d1d1f !important;
}
/* Nav + drawer "Get Started": match the light-mode "Schedule a Call" CTA
   (solid brand purple, static on hover like the CTA) */
html.light-mode .nav-links .btn-primary,
html.light-mode .nav-links .btn-primary:hover,
html.light-mode .mobile-menu-buttons .btn-primary,
html.light-mode .mobile-menu-buttons .btn-primary:hover {
    background: #8b5cf6;
    border: 1px solid #8b5cf6;
}

/* Ghost button: white-alpha hover fill -> dark text + light-grey hover */
html.light-mode .btn-ghost {
    color: #515154;
}
html.light-mode .btn-ghost:hover {
    color: #1d1d1f;
    background: #f5f5f7;
}

/* ---- Floating scroll-to-top button: dark frosted chip -> white surface ---- */
html.light-mode .floating-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}
html.light-mode .floating-btn:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
html.light-mode .floating-btn svg {
    color: #515154;
}
html.light-mode .floating-btn:hover svg {
    color: #1d1d1f;
}

/* ---- Hero heading: white->grey clip-text gradient -> solid dark ---- */
html.light-mode .hero-content h1 {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
}
/* hero-content p uses --text-secondary var -> flips automatically */

/* ---- Terminal: monospace mini-window in the hero visual ---- */
html.light-mode .terminal {
    color: #1d1d1f;
}
/* macOS traffic-light dots stay saturated as small indicator fills (rule allows LED dots) */

/* ---- LLM box hover: remove purple glow + purple border ---- */
html.light-mode .llm-box:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ---- Code-token colors (light syntax theme) ---- */
html.light-mode .comment {
    color: #008000;
}

html.light-mode .keyword {
    color: #af00db;
}

html.light-mode .string {
    /* dark-theme light-green string -> VS Code light string */
    color: #a31515;
}

/* ---- Section header clip-text gradient heading -> solid dark ---- */
html.light-mode .section-header h2 {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
}

html.light-mode .section-header p {
    color: #515154;
}

/* ---- Cursor window: keep the purple halo (light-tuned), no pulsing animation ---- */
html.light-mode .cursor-window {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow:
        0 20px 40px -20px rgba(0, 0, 0, 0.18),
        0 0 23px rgba(147, 51, 234, 0.33),
        0 0 46px rgba(147, 51, 234, 0.17);
    animation: none;
}

html.light-mode .window-header {
    background: #f5f5f7;
    border-bottom: 1px solid #d2d2d7;
}

html.light-mode .window-title {
    color: #515154;
}

/* ---- Code editor surface + light scrollbars ---- */
html.light-mode .code-editor {
    background: #ffffff;
    color: #000000;
}

html.light-mode .code-editor::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html.light-mode .code-editor::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

html.light-mode .code-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ---- AI panel (nested instrument-like panel) ---- */
html.light-mode .ai-panel {
    background: #f5f5f7;
    border-left: 1px solid #d2d2d7;
}

html.light-mode .ai-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html.light-mode .ai-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
}

html.light-mode .ai-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

html.light-mode .ai-title {
    color: #1d1d1f;
}

/* ---- Context card / suggestion / code-suggestion panels ---- */
html.light-mode .context-card {
    background: #ffffff;
    border: 1px solid #d2d2d7;
}

html.light-mode .context-title {
    color: #1d1d1f;
}

html.light-mode .context-items {
    color: #6e6e73;
}

html.light-mode .suggestion-card {
    border-left: 2px solid #6d28d9;
}

html.light-mode .suggestion-text {
    color: #515154;
}

html.light-mode .code-suggestion {
    background: #f5f5f7;
    border: 1px solid #d2d2d7;
    color: #1d1d1f;
}

/* ---- Apply button: light CTA purple, black text (see the !important rule
        in the later block, which wins the cascade) ---- */
html.light-mode .apply-btn {
    background: #c4b5fd;
    color: #000000;
}

html.light-mode .apply-btn:hover {
    background: #b7a2fb;
}

/* ---- Status bar ---- */
html.light-mode .status-bar {
    background: #f5f5f7;
    border-top: 1px solid #d2d2d7;
    color: #6e6e73;
}

/* status LED dot may stay saturated (small indicator) */
html.light-mode .status-indicator {
    background: #16a34a;
}

/* ---- Feature card + hover (remove purple glow) ---- */
html.light-mode .feature-card {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04);
}

html.light-mode .feature-card:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04);
}

/* ---- Setup box hover (remove heavy purple glow) ---- */
html.light-mode .setup-box:hover {
    border-color: rgba(0, 0, 0, 0.16) !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* ---- Feature icon tile ---- */
html.light-mode .feature-icon {
    background: linear-gradient(180deg, rgba(109, 64, 207, 0.05), rgba(124, 102, 220, 0.03));
    border: 1px solid #d2d2d7;
}

/* ---- Dashboard sidebar/menu ---- */
html.light-mode .sidebar .sidebar-item.active {
    background: rgba(94, 106, 210, 0.12);
    color: #1d1d1f;
    border: 1px solid #6d28d9;
}

html.light-mode .sidebar-item {
    color: #515154;
}

html.light-mode .sidebar-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

html.light-mode .sidebar-item.active {
    background: rgba(94, 106, 210, 0.12);
    color: #1d1d1f;
}

/* ---- Main panel inline code: light-grey -> dark ---- */
html.light-mode .main-panel code {
    color: #1d1d1f;
}

/* ---- Project card / panels ---- */
html.light-mode .project-card {
    background: #ffffff;
    border: 1px solid #d2d2d7;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04);
}

html.light-mode .panel-description {
    color: #515154;
}

html.light-mode .user-email {
    color: #515154;
}

/* ---- Project status pill (green) -> readable green text on light fill ---- */
html.light-mode .project-status {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

html.light-mode .stat-value {
    color: #1d1d1f;
}

html.light-mode .stat-label {
    color: #6e6e73;
}

/* ---- Integration code block ---- */
html.light-mode .integration-code {
    background: #f5f5f7;
    border: 1px solid #d2d2d7;
    color: #1d1d1f;
}

/* ---- Copy button ---- */
html.light-mode .copy-btn {
    background: #ffffff;
    color: #515154;
    border: 1px solid #d2d2d7;
}

html.light-mode .copy-btn:hover {
    background: #f5f5f7;
    color: #1d1d1f;
}

/* ---- Upload zone (dashed) + hover ---- */
html.light-mode .upload-zone {
    border: 2px dashed #d2d2d7;
    background: linear-gradient(180deg, rgba(109, 64, 207, 0.05), rgba(124, 102, 220, 0.03));
}

html.light-mode .upload-zone:hover {
    border-color: rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.03);
}

html.light-mode .upload-subtitle {
    color: #6e6e73;
}

/* ---- Team image hover: remove purple glow ---- */
html.light-mode a.team-image-link:hover img,
html.light-mode .team-image:hover {
    border: 2px solid #d2d2d7 !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 0 20px rgba(147, 51, 234, 0.3),
        0 0 40px rgba(147, 51, 234, 0.15) !important;
}

/* ---- Backed-by box hover: remove purple glow ---- */
html.light-mode .backed-by-box:hover {
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04),
        0 0 20px rgba(147, 51, 234, 0.4),
        0 0 40px rgba(147, 51, 234, 0.2);
}

/* --- CSS variables: flip the whole var-driven theme (line 1551-1564) --- */
html.light-mode {
    color-scheme: light; /* flips UA scrollbars/controls with the theme */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #ececef;
    --border: #d2d2d7;
    --border-hover: rgba(0, 0, 0, 0.16);
    --text-primary: #1d1d1f;
    --text-secondary: #515154;
    --text-tertiary: #6e6e73;
    --accent: #6d28d9;
    --accent-light: #7c3aed;
    --gradient: linear-gradient(180deg, rgba(109, 64, 207, 0.10), rgba(124, 102, 220, 0.05));
    --gradient-subtle: linear-gradient(180deg, rgba(109, 64, 207, 0.05), rgba(124, 102, 220, 0.03));
}

/* --- body (line 1566): var-driven; force flat white page --- */
html.light-mode body {
    background: #ffffff;
    color: #1d1d1f;
}

/* --- Floating-island nav (line 1590): dark translucent -> light translucent --- */
html.light-mode nav {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* --- nav.floating (line 1628): darker glassy state -> light glassy --- */
html.light-mode nav.floating {
    background: rgba(255, 255, 255, 0.88);
    border-color: #d2d2d7;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* --- Hamburger focus ring (line 1658): white outline -> dark hairline --- */
html.light-mode .hamburger:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.4);
}

/* --- Hamburger bars (line 1664): var-driven (--text-primary now dark) --- */
html.light-mode .hamburger span {
    background: #1d1d1f;
}

/* --- Mobile menu drawer (line 1687): dark panel -> white panel --- */
html.light-mode .mobile-menu {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #d2d2d7;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
}

/* --- Mobile menu item active (line 1739): white-on-dark -> dark-on-light --- */
html.light-mode .mobile-menu-item:active {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

/* --- Menu overlay (line 1758): keep a scrim but lighten so light UI reads --- */
html.light-mode .menu-overlay {
    background: rgba(0, 0, 0, 0.25);
}

/* --- Logo wordmark / .logo-text (lines 1784, 1827, 1883, 1909): white clip-text gradient -> solid dark --- */
html.light-mode .logo {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
    animation: none;
}

/* Day-mode wordmark: dark metallic (lit from above) with the same occasional
   glint sweep as dark mode; the highlight is capped below pure white so the
   letters never wash out against the light nav bar */
html.light-mode .logo-text {
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(to bottom, #4a4a50 0%, #17171a 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1d1d1f;
}

/* --- Logo icon glow (line 1800) + logoGlow keyframes (line 1817): purple bloom -> none --- */
html.light-mode .logo-icon {
    filter: none;
    animation: none;
}

/* --- nav-links anchors (line 1843, 1925): var-driven; ensure dark --- */
html.light-mode .nav-links a {
    color: #515154;
}
html.light-mode .nav-links a:hover {
    color: #1d1d1f;
}

/* --- nav divider (line 1867): var-driven border (now #d2d2d7) — explicit for safety --- */
html.light-mode .nav-divider {
    background-color: #d2d2d7;
}

/* --- Primary button (line 1963): dark tile + purple glow -> solid purple, no glow --- */
html.light-mode .btn-primary {
    background: #6d28d9;
    border: 1px solid #6d28d9;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 20px rgba(147, 51, 234, 0.4);
}

html.light-mode .btn-primary:hover {
    background: #7c3aed;
    border: 1px solid #7c3aed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 30px rgba(147, 51, 234, 0.6);
}

/* Inline-style glow override on the primary button (line 1976): neutralize the colored glow */
html.light-mode .btn-primary[style*="box-shadow"]:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 30px rgba(147, 51, 234, 0.6) !important;
}

/* nav CTA text: near-black on the light-purple fill (2026-07-30) */
html.light-mode .nav-links .btn-primary,
html.light-mode .nav-links .btn-primary:hover {
    color: #1d1d1f !important;
}

/* --- Ghost button (line 1980): var-driven text + white-on-dark hover -> dark-on-light hover --- */
html.light-mode .btn-ghost {
    color: #515154;
}
html.light-mode .btn-ghost:hover {
    color: #1d1d1f;
    background: rgba(0, 0, 0, 0.05);
}

/* --- Floating scroll-to-top button (line 1991): dark glassy circle -> white --- */
html.light-mode .floating-btn {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

html.light-mode .floating-btn:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 20px rgba(0, 0, 0, 0.06);
}

html.light-mode .floating-btn svg {
    color: #515154;
}
html.light-mode .floating-btn:hover svg {
    color: #1d1d1f;
}

/* --- Hero H1 (line 2052): white->grey clip-text gradient -> solid dark --- */
html.light-mode .hero-content h1 {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
}

/* --- Hero paragraph (line 2064): var-driven secondary text — explicit for safety --- */
html.light-mode .hero-content p {
    color: #515154;
}

/* --- Terminal traffic-light dots (lines 2115-2124): small indicator fills, keep saturated (read fine on white) --- */
/* left intentionally unchanged: tiny LED-style dots remain visible on light surfaces */

/* --- LLM box hover: remove purple glow, use neutral soft shadow + hairline border --- */
html.light-mode .llm-box:hover {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* --- Code token: light-green string -> VS Code light string red --- */
html.light-mode .string {
    color: #a31515;
}

/* --- Section header heading: white->grey clip-text gradient -> solid dark --- */
html.light-mode .section-header h2 {
    background: none;
    -webkit-text-fill-color: #1d1d1f;
    color: #1d1d1f;
}

/* --- Cursor window: keep the purple halo (light-tuned), no pulsing animation --- */
html.light-mode .cursor-window {
    border-color: #d2d2d7;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.18), 0 0 23px rgba(147, 51, 234, 0.33), 0 0 46px rgba(147, 51, 234, 0.17);
    animation: none !important;
}

/* --- Code editor scrollbar: white-on-dark -> dark-on-light --- */
html.light-mode .code-editor::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html.light-mode .code-editor::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

html.light-mode .code-editor::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
}

/* --- AI panel scrollbar: white-on-dark -> dark-on-light --- */
html.light-mode .ai-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

html.light-mode .ai-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
}

html.light-mode .ai-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
    background-clip: padding-box;
}

/* --- Apply button: black text on the light CTA purple (winner is the
       !important rule in a later block) --- */
html.light-mode .apply-btn {
    color: #000000;
}

/* --- Status indicator LED dot: keep saturated green (reads as a dot on light) --- */
html.light-mode .status-indicator {
    background: #16a34a;
}

/* --- Feature card active: remove purple glow, neutral soft shadow + hairline --- */
html.light-mode .feature-card:active {
    border-color: rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* --- Setup box active: remove purple glow, neutral soft shadow + hairline --- */
html.light-mode .setup-box:active {
    border-color: rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* --- Sidebar active item: light accent tint bg, dark text (was white) --- */
html.light-mode .sidebar .sidebar-item.active {
    background: rgba(109, 64, 207, 0.08);
    color: #1d1d1f;
    border-color: #6d28d9;
}

html.light-mode .sidebar-item.active {
    background: rgba(109, 64, 207, 0.08);
    color: #1d1d1f;
}

/* --- Sidebar item hover: white-on-dark wash -> dark-on-light wash --- */
html.light-mode .sidebar-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #1d1d1f;
}

/* --- Main panel inline code: light-grey text -> dark primary --- */
html.light-mode .main-panel code {
    color: #1d1d1f;
}

/* --- Project status pill: light green tint + darkened green text for contrast --- */
html.light-mode .project-status {
    background: rgba(22, 163, 74, 0.1);
    color: #15803d;
}

/* --- Upload zone hover: white border + dark wash -> hairline + light grey fill --- */
html.light-mode .upload-zone:hover {
    border-color: rgba(0, 0, 0, 0.16);
    background: #f5f5f7;
}

/* --- Team image hover: remove purple glow, neutral soft shadow --- */
html.light-mode a.team-image-link:hover img,
html.light-mode .team-image:hover {
    border: 2px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 20px rgba(147, 51, 234, 0.3), 0 0 40px rgba(147, 51, 234, 0.15) !important;
}

/* --- Backed-by box hover: remove purple glow, neutral soft shadow --- */
html.light-mode .backed-by-box:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 20px rgba(147, 51, 234, 0.4), 0 0 40px rgba(147, 51, 234, 0.2);
}

/* ===================== Global Announcement Banner ===================== */
/* dark purple translucent bar + white text + purple glow -> light grey bar, dark text, neutral shadow */
html.light-mode .announcement-banner{
  background:#eae1fb;       /* deepened purple tint (~3% more violet than #f3effc) -> clearer light-themed purple banner */
  color:#1d1d1f;
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 15px rgba(139, 92, 246, 0.3);
  border-bottom:1px solid #ddd0f5;   /* divider deepened to match the stronger purple tint */
}
html.light-mode .announcement-link{
  color:#6d28d9;            /* light-purple link text -> readable purple on white */
}
html.light-mode .announcement-link:hover{
  color:#7c3aed;
}

/* mobile logo "glow" -> remove the purple drop-shadow bloom entirely */
@media (max-width:1024px){
  html.light-mode #mobile-version .logo-icon{
    animation:none;
    filter:none;
  }
}

/* ===================== Mobile scroll-to-top button ===================== */
/* near-black glassy circle, white border, dark shadow, grey glyph -> white chip, hairline, dark glyph */
@media (max-width:1024px){
  html.light-mode #scrollToTopMobile{
    border:1px solid #d2d2d7;
    background:rgba(255,255,255,0.92);
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
    color:#1d1d1f;
  }
}

/* ===================== ts-comparison root vars ===================== */
/* the fallback values baked into these var() calls are all dark-theme; flip them to light */
html.light-mode .ts-comparison-root{
  --tc-line:var(--border,#d2d2d7);
  --tc-line-soft:rgba(0,0,0,0.06);
  --tc-line-hover:var(--border-hover,rgba(0,0,0,0.16));
  --tc-txt:var(--text-primary,#1d1d1f);
  --tc-txt-2:var(--text-secondary,#515154);
  --tc-txt-3:var(--text-tertiary,#6e6e73);
  --tc-accent:var(--accent,#6d28d9);
  --tc-accent-2:var(--accent-light,#7c3aed);
}

/* ===================== comparison rows (cards) ===================== */
/* dark card bg + white inset hairline + dark drop shadow -> white card, hairline border, neutral shadow */
html.light-mode .ts-comparison-row{
  background:var(--bg-secondary,#ffffff);
  box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
/* header row stays box-less; keep transparent */
html.light-mode .ts-comparison-row-head{
  background:transparent;
  box-shadow:none;
}

/* AssembleAI header chip + body column tint: dark purple -> faint light purple fill */
html.light-mode .ts-comparison-assemble-head{
  background:rgba(124,102,220,0.10);
}
html.light-mode .ts-comparison-body-row .ts-comparison-assemble{
  background:rgba(124,102,220,0.08);
}
/* AssembleAI sub text was white-translucent -> secondary dark */
html.light-mode .ts-comparison-assemble-head .ts-comparison-col-sub{
  color:#515154;
}
/* AssembleAI column title: same dark-metal glint remap as the big headings
   (white metallic would vanish on the light panel) */
html.light-mode .ts-comparison-assemble-head .ts-comparison-col-title{
  background-image:
      linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(to bottom, #1d1d1f 0%, #6e6e73 100%);
  background-size: 250% 100%, 100% 100%;
  background-position: var(--glintX) 0, 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* line-style marks: cross (red) softened, check (green) recolored for white bg */
html.light-mode .ts-comparison-mark-cross svg path{
  stroke:rgba(220,38,38,0.7);
}
html.light-mode .ts-comparison-mark-check svg path{
  stroke:#16a34a;
}

/* ---- whole-row hover: dark purple + colored glow -> light purple wash + neutral shadow ---- */
@media (hover:hover){
  html.light-mode .ts-comparison-body-row:hover{
    background:#f0ecfb;                              /* light purple wash replacing #221a3f */
    border-color:rgba(124,102,220,0.38);
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06), 0 12px 34px -14px rgba(91,74,193,0.5), 0 0 0 1px rgba(124,102,220,0.22);
  }
  /* hover clears the column tint (unchanged behavior, but ensure it stays transparent on light) */
  html.light-mode .ts-comparison-body-row:hover .ts-comparison-assemble{
    background:transparent;
  }
}

/* ================= MOBILE stacked cards ================= */
@media (max-width:1024px){
  /* low-alpha-white separators -> soft dark hairlines (var --tc-line-soft already flipped above,
     but the label border uses --tc-line which is flipped too; nothing extra needed for those).
     Reassert flat transparent tint cards stay flat on light (color comes from text vars). */
  html.light-mode .ts-comparison-body-row .ts-comparison-assemble{
    background:transparent;
  }
}

/* ───────────────────────── HERO SECTION ───────────────────────── */
/* Hero wrapper background set inline as background:#0C0A10 -> pure white */
html.light-mode .hero[style*="#0C0A10"]{
  background: #ffffff !important;
}

/* Hero copy: h1 / p read dark on white (in case any clip-text gradient applies) */
html.light-mode .hero h1{
  -webkit-text-fill-color: #1d1d1f;
  background: none;
  color: #1d1d1f;
}
html.light-mode .hero p{
  color: #515154;
}

/* Footer logo: soften the purple bloom on white so it reads as a halo, not a
   smear; the pulse swaps to its light-tuned keyframes on the same clock */
html.light-mode .footer-logo{
  box-shadow:
    0 0 4.5px rgba(88, 27, 141, 0.81),
    0 0 12px rgba(88, 27, 141, 0.54),
    0 0 23px rgba(88, 27, 141, 0.40);
  animation-name: heroLogoPulse;
}

/* ───────────────────────── HIL NODES (cards) ───────────────────────── */
/* .hil-node: dark translucent frosted surface -> frosted white card (same
   blur(10px) frost as dark mode, owner request 2026-08-04) */
html.light-mode .hil-node{
  background: rgba(247,247,248,0.72);   /* translucent warm-neutral so the frost reads on white */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid #d2d2d7;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
/* generic glow hover -> neutral soft shadow */
html.light-mode .hil-node:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 40px rgba(139, 92, 246, 0.4);
}

/* Per-node colored borders carried over from night mode (blue / red / green),
   slightly higher alpha so they read on white; soft neutral day shadows kept.
   Hover = same matching-color bloom as dark mode (glow parity), border stays
   at its resting value — no border brighten (2026-08-04). */
html.light-mode .node-vscode{
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 40px rgba(59, 130, 246, 0.15);
}
html.light-mode .node-vscode:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 12px rgba(59, 130, 246, 0.5), 0 0 28px rgba(59, 130, 246, 0.3), 0 0 56px rgba(59, 130, 246, 0.18);
}
html.light-mode .node-saleae{
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 40px rgba(239, 68, 68, 0.15);
}
html.light-mode .node-saleae:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 12px rgba(239, 68, 68, 0.5), 0 0 28px rgba(239, 68, 68, 0.3), 0 0 56px rgba(239, 68, 68, 0.18);
}
html.light-mode .node-pcb{
  border-color: rgba(26, 154, 74, 0.5);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 40px rgba(26, 154, 74, 0.12);
}
html.light-mode .node-pcb:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 12px rgba(26, 154, 74, 0.45), 0 0 28px rgba(26, 154, 74, 0.27), 0 0 56px rgba(26, 154, 74, 0.16);
}

html.light-mode .node-label{
  color: #1d1d1f;
}

/* ═══════════ FIRMWARE EDITOR SVG (#fwqPanel / #fwqBar) ═══════════ */
/* Editor body + title-bar dark gradient stops -> light editor / gutter strip */
html.light-mode #fwqPanel stop[offset="0"]{ stop-color: #ffffff; }
html.light-mode #fwqPanel stop[offset="1"]{ stop-color: #ffffff; }
html.light-mode #fwqBar stop[offset="0"]{ stop-color: #f5f5f7; }
html.light-mode #fwqBar stop[offset="1"]{ stop-color: #f5f5f7; }
/* accent chevron gradient -> readable blue (kept as accent stroke) */
html.light-mode #fwqAccent stop[offset="0"]{ stop-color: #2563eb; }
html.light-mode #fwqAccent stop[offset="1"]{ stop-color: #2563eb; }

/* Panel frame: dark stroke + low-alpha-white inner stroke -> hairline borders */
html.light-mode .node-vscode svg rect[fill="url(#fwqPanel)"]{
  stroke: #d2d2d7;
}
html.light-mode .node-vscode svg rect[stroke="#ffffff"]{
  stroke: #d2d2d7;
  stroke-opacity: 0.6;
}
/* title-bar underline + gutter divider lines */
html.light-mode .node-vscode svg line[stroke="#243250"]{ stroke: #d2d2d7; }
html.light-mode .node-vscode svg line[stroke="#1c2840"]{ stroke: #d2d2d7; }
/* gutter (line-number strip) fill */
html.light-mode .node-vscode svg rect[fill="#141d33"]{ fill: #f5f5f7; }
/* title-bar dots: keep one active LED accent (blue), neutralize the dead dots */
html.light-mode .node-vscode svg circle[fill="#62a1ff"]{ fill: #2563eb; }
html.light-mode .node-vscode svg circle[fill="#34425f"]{ fill: #c7c7cc; }
html.light-mode .node-vscode svg circle[fill="#2b384f"]{ fill: #c7c7cc; }

/* Code syntax tokens -> VS Code light theme mapping */
html.light-mode .node-vscode svg .fwqKw{ fill: #af00db; }   /* keyword -> light purple */
html.light-mode .node-vscode svg .fwqVar{ fill: #001080; }  /* variable/property -> dark blue */
html.light-mode .node-vscode svg .fwqVal{ fill: #000000; }  /* plain/value text -> black */
html.light-mode .node-vscode svg .fwqGut{ fill: #6e6e73; }  /* gutter line numbers -> muted */
/* caret -> readable blue */
html.light-mode .node-vscode svg .fwqCaret{ fill: #0000ff; }

/* ═══════════ OSCILLOSCOPE SVG (#scpScreenBg / #scpBezel) ═══════════ */
/* Screen radial bg (dark red) -> flat light inset screen */
html.light-mode #scpScreenBg stop[offset="0%"]{ stop-color: #f5f5f7; }
html.light-mode #scpScreenBg stop[offset="100%"]{ stop-color: #ececef; }
/* Bezel gradient (near-black) -> light grey bezel */
html.light-mode #scpBezel stop[offset="0%"]{ stop-color: #ffffff; }
html.light-mode #scpBezel stop[offset="100%"]{ stop-color: #ececef; }
/* Vignette: drop the dark bottom shading so the screen stays light */
html.light-mode #scpVign stop[offset="0%"]{ stop-color: #ffffff; stop-opacity: 0; }
html.light-mode #scpVign stop[offset="55%"]{ stop-color: #ffffff; stop-opacity: 0; }
html.light-mode #scpVign stop[offset="100%"]{ stop-color: #ffffff; stop-opacity: 0; }

/* Bezel frame stroke -> hairline */
html.light-mode .node-saleae svg rect[fill="url(#scpBezel)"]{ stroke: #d2d2d7; }
/* Remove the green-ish glow filter bloom on the trace (structural-ish but reads as halo) */

/* Graticule gridlines -> light hairline, slightly more visible on white */
html.light-mode .node-saleae svg g[stroke="#9a8c8c"]{ stroke: #d2d2d7; }
html.light-mode .node-saleae svg g[stroke="#9a8c8c"] line{ stroke-opacity: 0.7 !important; }
/* dashed center crosshair */
html.light-mode .node-saleae svg g[stroke="#c08a8a"]{ stroke: #c7c7cc; stroke-opacity: 0.7 !important; }

/* Signal traces / scan / trigger -> keep red but darkened readable variant */
html.light-mode .node-saleae svg path[stroke="#ef4444"]{ stroke: #dc2626; }
html.light-mode .node-saleae svg line[stroke="#ef4444"]{ stroke: #dc2626; }
html.light-mode .node-saleae svg path[stroke="#cc3a3a"]{ stroke: #dc2626; }
html.light-mode .node-saleae svg .scpTrig[fill="#ef4444"]{ fill: #dc2626; }
/* scan dot: darken the soft halo circle + keep a readable core */
/* CH1 micro label -> muted dark */
html.light-mode .node-saleae svg text[fill="#c79a9a"]{ fill: #6e6e73; fill-opacity: 0.9; }

/* ═══════════ DUT / PCB SVG (#dutBoard) ═══════════ */
/* Board radial (dark green) -> flat light inset screen surface */
html.light-mode #dutBoard stop[offset="0%"]{ stop-color: #f5f5f7; }
html.light-mode #dutBoard stop[offset="58%"]{ stop-color: #ececef; }
html.light-mode #dutBoard stop[offset="100%"]{ stop-color: #e2e2e6; }
/* Chip body gradient (near-black) -> light grey component fill */
html.light-mode #dutChip stop[offset="0%"]{ stop-color: #e2e2e6; }
html.light-mode #dutChip stop[offset="100%"]{ stop-color: #d2d2d7; }

/* Board outer + inner frame strokes -> hairline */
html.light-mode .node-pcb svg rect[fill="url(#dutBoard)"]{ stroke: #d2d2d7; }
html.light-mode .node-pcb svg rect[stroke="#3aa862"]{ stroke: #d2d2d7; }

/* Traces / routing: green kept but darkened to readable green; drop flow glow */
html.light-mode .node-pcb svg .dutTrace{ stroke: #16a34a; opacity: 0.45; }
html.light-mode .node-pcb svg .dutFlow{ stroke: #16a34a; }
html.light-mode .node-pcb svg .dutFlowStub{ stroke: #16a34a; }
/* pads / nodes -> readable green fills, drop node glow */
html.light-mode .node-pcb svg .dutPadRing{ fill: #d2d2d7; stroke: #16a34a; }
html.light-mode .node-pcb svg .dutNode{ fill: #16a34a; filter: none; }
/* silk / labels -> muted dark so they read on light board */
html.light-mode .node-pcb svg .dutSilk{ stroke: #a3a3a8; opacity: 0.6; }
html.light-mode .node-pcb svg .dutLabel{ fill: #6e6e73; opacity: 0.8; }
/* SMD / caps / endcaps -> light fills with hairline strokes */
html.light-mode .node-pcb svg .dutSmd{ fill: #e2e2e6; stroke: #16a34a; }
html.light-mode .node-pcb svg .dutCap{ fill: #d7e9dd; stroke: #16a34a; }
html.light-mode .node-pcb svg .dutEndcap{ fill: #a3a3a8; }
/* discrete pin/lead strokes + connector pins + via dots */
html.light-mode .node-pcb svg g[stroke="#2c8f51"]{ stroke: #16a34a; }
html.light-mode .node-pcb svg line[stroke="#7d8a82"]{ stroke: #a3a3a8; }
html.light-mode .node-pcb svg rect[fill="#9aa79e"]{ fill: #a3a3a8; }
html.light-mode .node-pcb svg circle[fill="#2a8f50"]{ fill: #16a34a; }
html.light-mode .node-pcb svg rect[fill="url(#dutChip)"]{ stroke: #16a34a; }
/* status LED (top-right): keep saturated green dot, drop its blur halo */

html.light-mode .node-pcb svg .dutLedCore{ filter: none; }

/* ═══════════ CONNECTION ARCS (#path1..3 + glow paths) ═══════════ */
/* Blurred purple glow arcs behind the main paths -> remove entirely */

/* Main connection arcs: purple -> readable purple accent stroke */
html.light-mode .hil-connections .connection-path{ stroke: #7c3aed; opacity: 0.5; }
/* arrowhead marker keeps brand purple fill (small glyph) -> ok, but darken for white */

/* ═══════════ BRAIN CHIP (center) ═══════════ */
/* Rainbow conic blur-glow halo div -> remove */

/* Outer chip svg drop-shadow glow -> none */


/* --- Day mode: opaque chip centre. A faint-purple backing sized to the chip
   PACKAGE only (rim rect spans 115..285 of the 400 viewBox = 42.5%), layered
   above the rainbow halo and below the chip svg, so the package interior
   reads solid while the halo still glows through the lead gaps and around
   the chip. Night mode untouched. --- */
html.light-mode .hero-brain-chip::after,
html.light-mode .hero-brain-chip-mobile::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 42.5%;
    height: 42.5%;
    background: #ede9f4;
    border-radius: 9px;
    z-index: 1;
    pointer-events: none;
}
html.light-mode .hero-brain-chip > svg,
html.light-mode .hero-brain-chip-mobile > svg {
    position: relative;
    z-index: 2;
}

/* Chip body / bevel / rim dark-purple gradients -> light grey package */
html.light-mode #hChipBodyGrad stop[offset="0%"]{ stop-color: #f5f5f7; }
html.light-mode #hChipBodyGrad stop[offset="50%"]{ stop-color: #ececef; }
html.light-mode #hChipBodyGrad stop[offset="100%"]{ stop-color: #e2e2e6; }
html.light-mode #hChipBevelGrad stop[offset="0%"]{ stop-color: #ffffff; }
html.light-mode #hChipBevelGrad stop[offset="30%"]{ stop-color: #f5f5f7; }
html.light-mode #hChipBevelGrad stop[offset="70%"]{ stop-color: #ececef; }
html.light-mode #hChipBevelGrad stop[offset="100%"]{ stop-color: #e2e2e6; }
html.light-mode #hChipRimGrad stop[offset="0%"]{ stop-color: #ffffff; }
html.light-mode #hChipRimGrad stop[offset="50%"]{ stop-color: #f5f5f7; }
html.light-mode #hChipRimGrad stop[offset="100%"]{ stop-color: #ececef; }
/* Pin gradient (purple metal) -> grey pins */
html.light-mode #hPinGrad stop[offset="0%"]{ stop-color: #c7c7cc; }
html.light-mode #hPinGrad stop[offset="50%"]{ stop-color: #b0b0b5; }
html.light-mode #hPinGrad stop[offset="100%"]{ stop-color: #a3a3a8; }
/* Lead-pulse gradient (purple/white streak) -> subtle purple accent streak */
html.light-mode #hLeadGrad stop[offset="0%"]{ stop-color: #7c3aed; stop-opacity: 0; }
html.light-mode #hLeadGrad stop[offset="25%"]{ stop-color: #7c3aed; stop-opacity: 0.5; }
html.light-mode #hLeadGrad stop[offset="50%"]{ stop-color: #6d28d9; stop-opacity: 0.85; }
html.light-mode #hLeadGrad stop[offset="75%"]{ stop-color: #7c3aed; stop-opacity: 0.5; }
html.light-mode #hLeadGrad stop[offset="100%"]{ stop-color: #7c3aed; stop-opacity: 0; }
/* Center text gradient (white->grey) -> solid dark */
html.light-mode #hTextGrad stop[offset="0%"]{ stop-color: #1d1d1f; }
html.light-mode #hTextGrad stop[offset="100%"]{ stop-color: #1d1d1f; }

/* Chip artwork strokes / fills (all dark purple) -> hairline / light grey */
html.light-mode .hero-brain-chip svg .circuit-traces path[stroke="#3a2a5a"]{ stroke: #c7c7cc; }
html.light-mode .hero-brain-chip svg rect[stroke="#4a3a6a"]{ stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg rect[stroke="#3a2a5a"]{ stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg rect[stroke="#2d1f4a"]{ stroke: #d2d2d7; }
/* semiconductor die dark fills -> light inset surfaces */
html.light-mode .hero-brain-chip svg rect[fill="#1a1228"]{ fill: #ececef; stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg rect[fill="#0f0a18"]{ fill: #e2e2e6; }
html.light-mode .hero-brain-chip svg rect[fill="#2a1f3d"]{ fill: #d7d0e6; stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg rect[fill="#1f1830"]{ fill: #ececef; stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg rect[stroke="#5a4a8a"]{ stroke: #b6a8d8; }
/* die routing strokes */
html.light-mode .hero-brain-chip svg g[stroke="#3a2a5a"]{ stroke: #c7c7cc; }
html.light-mode .hero-brain-chip svg g[stroke="#2d1f4a"]{ stroke: #d2d2d7; }
html.light-mode .hero-brain-chip svg g[stroke="#4a3a6a"]{ stroke: #c7c7cc; }
/* small pad blocks + bond pads + die-activity dots -> readable purple accents */
html.light-mode .hero-brain-chip svg g[fill="#2d1f4a"]{ fill: #b6a8d8; }
html.light-mode .hero-brain-chip svg g[fill="#5a4a8a"]{ fill: #8b5cf6; }
html.light-mode .hero-brain-chip svg .die-activity circle[fill="#7a6aaa"]{ fill: #8b5cf6; }
/* pulsing outer ring stroke (purple rgba) -> subtle purple accent */

/* center label drop-shadow halo -> none */


/* ═══════════ HIL CONTENT COPY (inline-styled) ═══════════ */
/* Lead line set inline color:#ffffff -> primary dark */
html.light-mode .security-copy > div[style*="color: #ffffff"]{ color: #1d1d1f !important; }
/* Brand purple bullet dots: keep as small fills but darken for white bg */
html.light-mode .security-point > div[style*="color: #8b5cf6"]{ color: #7c3aed !important; }

/* ═══════════ NEXT SECTION (#spec-to-tests dark bg) ═══════════ */
/* Section bg set inline background:#0C0A10 -> white; border-top hairline */
html.light-mode #spec-to-tests[style*="#0C0A10"]{
  background: #ffffff !important;
  border-top-color: #d2d2d7 !important;
}

/* ─── Right-column copy: inline white intro text + purple bullet dots ─────── */
/* Inline style="color:#ffffff" intro line on the .security-copy panel */
html.light-mode #spec-to-tests .security-copy > div[style*="#ffffff"] {
    color: #1d1d1f !important;
}
/* Purple bullet dots (inline color:#8b5cf6) — keep as small brand fill, readable on white */
html.light-mode #spec-to-tests .security-point > div[style*="#8b5cf6"] {
    color: #8b5cf6 !important;
}

/* ─── Bottom callout: dark rainbow-glow banner ─────────────────────────────── */
/* Inline style="background: rgba(30, 26, 46, 1)" dark callout chip */
html.light-mode .security-callout-centered[style*="rgba(30, 26, 46, 1)"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 20px rgba(147, 51, 234, 0.2) !important;
    color: #1d1d1f !important;
}
/* Kill the colored rainbow glow wrapper around the bottom callout */
html.light-mode .rainbow-glow-wrapper {
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
}


/* ─── The instrument "screen": .s2t-display ────────────────────────────────── */
/* Flip screen to light-grey, hairline border, neutral soft shadow, no glow */
html.light-mode .s2t-display {
    background: #f5f5f7;
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 20px rgba(139, 92, 246, 0.17);
}
/* Neutralize the border-glow keyframes (used by .s2t-display) */
html.light-mode .s2t-display {
    will-change: auto;
}

/* Screen header strip */
html.light-mode .s2t-display-header {
    background: #ececef;
    border-bottom: 1px solid #d2d2d7;
}
html.light-mode .s2t-display-title {
    color: #515154;
}

/* Status dot — keep as small saturated indicator, but drop the glow halo */
html.light-mode .s2t-status-dot {
    background: #8b5cf6;
}
/* Status text (was light-purple #c4b5fd) -> dark purple readable on white */
html.light-mode .s2t-status-text {
    color: #6d28d9;
}

/* ─── Inner boxes (Requirements / Tests panels) ────────────────────────────── */
html.light-mode .s2t-box {
    background: #ffffff;
    border: 1px solid #d2d2d7;
}
/* Drop the inset colored glows on the two boxes; restate thin tinted borders darker */
html.light-mode .s2t-box-reqs {
    border-color: rgba(109,64,207,0.30);
}
html.light-mode .s2t-box-tests {
    border-color: rgba(22,163,74,0.30);
}

/* Box header strips */
html.light-mode .s2t-box-header {
    background: #ececef;
    border-bottom: 1px solid #d2d2d7;
}
html.light-mode .s2t-box-title {
    color: #515154;
}


/* ─── Requirement rows ─────────────────────────────────────────────────────── */
/* Base row fill: was low-alpha white on dark -> light inset grey */
html.light-mode .s2t-req-row {
    background: #f5f5f7;
}
/* REQ id chip (was light-purple #c4b5fd text) */
html.light-mode .s2t-req-id {
    color: #6d28d9;
    background: rgba(109,64,207,0.10);
    border: 1px solid rgba(109,64,207,0.28);
}
html.light-mode .s2t-req-text {
    color: #515154;
}

/* ─── Test rows ────────────────────────────────────────────────────────────── */
html.light-mode .s2t-test-row {
    background: #f5f5f7;
}
/* TC id chip (was light-green) -> readable green on white */
html.light-mode .s2t-test-id {
    color: #15803d;
    background: rgba(22,163,74,0.10);
    border: 1px solid rgba(22,163,74,0.28);
}
/* Test name (was rgba(255,255,255,0.88) white) -> dark primary */
html.light-mode .s2t-test-name {
    color: #1d1d1f;
}
/* PASS status pill */
html.light-mode .s2t-test-status {
    color: #15803d;
    background: rgba(22,163,74,0.10);
    border: 1px solid rgba(22,163,74,0.30);
}

/* ─── Pipe: dashed connector lines, arrowheads, traveling particle ─────────── */
/* Static dashed line (defined inline on .s2t-pipe-line) -> darker purple dashes */
html.light-mode .s2t-pipe-line {
    background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%);
}
/* Arrowhead toward test box */
html.light-mode .s2t-pipe-row::after {
    border-color: transparent transparent transparent rgba(109,64,207,0.55);
}
/* Traveling particle dot — keep small purple fill, REMOVE the glow halo */
html.light-mode .s2t-pipe-particle {
    background: #8b5cf6;
}

/* ─── Keyframe re-theme: REQ row highlight (purple flashes -> dark-readable) ── */
/* All 5 s2tReqN keyframes share the same color recipe; redefine each so the
   animated background/border/box-shadow read on a white panel with no glow. */
html.light-mode .s2t-req-row.s2t-row-1 { animation-name: s2tReq1Light; }
html.light-mode .s2t-req-row.s2t-row-2 { animation-name: s2tReq2Light; }
html.light-mode .s2t-req-row.s2t-row-3 { animation-name: s2tReq3Light; }
html.light-mode .s2t-req-row.s2t-row-4 { animation-name: s2tReq4Light; }
html.light-mode .s2t-req-row.s2t-row-5 { animation-name: s2tReq5Light; }

@keyframes s2tReq1Light {
    0% { background: #f5f5f7; box-shadow: none; border-color: transparent; color: #515154; }
    1% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.30); box-shadow: none; }
    3% { background: rgba(139,92,246,0.12); border-color: rgba(109,64,207,0.55); box-shadow: none; }
    6% { background: rgba(139,92,246,0.09); border-color: rgba(109,64,207,0.40); box-shadow: none; }
    9% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    95% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    98%, 100% { background: #f5f5f7; border-color: transparent; box-shadow: none; }
}
@keyframes s2tReq2Light {
    0%, 10% { background: #f5f5f7; box-shadow: none; border-color: transparent; color: #515154; }
    11% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.30); box-shadow: none; }
    13% { background: rgba(139,92,246,0.12); border-color: rgba(109,64,207,0.55); box-shadow: none; }
    16% { background: rgba(139,92,246,0.09); border-color: rgba(109,64,207,0.40); box-shadow: none; }
    19% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    95% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    98%, 100% { background: #f5f5f7; border-color: transparent; box-shadow: none; }
}
@keyframes s2tReq3Light {
    0%, 20% { background: #f5f5f7; box-shadow: none; border-color: transparent; color: #515154; }
    21% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.30); box-shadow: none; }
    23% { background: rgba(139,92,246,0.12); border-color: rgba(109,64,207,0.55); box-shadow: none; }
    26% { background: rgba(139,92,246,0.09); border-color: rgba(109,64,207,0.40); box-shadow: none; }
    29% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    95% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    98%, 100% { background: #f5f5f7; border-color: transparent; box-shadow: none; }
}
@keyframes s2tReq4Light {
    0%, 30% { background: #f5f5f7; box-shadow: none; border-color: transparent; color: #515154; }
    31% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.30); box-shadow: none; }
    33% { background: rgba(139,92,246,0.12); border-color: rgba(109,64,207,0.55); box-shadow: none; }
    36% { background: rgba(139,92,246,0.09); border-color: rgba(109,64,207,0.40); box-shadow: none; }
    39% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    95% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    98%, 100% { background: #f5f5f7; border-color: transparent; box-shadow: none; }
}
@keyframes s2tReq5Light {
    0%, 40% { background: #f5f5f7; box-shadow: none; border-color: transparent; color: #515154; }
    41% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.30); box-shadow: none; }
    43% { background: rgba(139,92,246,0.12); border-color: rgba(109,64,207,0.55); box-shadow: none; }
    46% { background: rgba(139,92,246,0.09); border-color: rgba(109,64,207,0.40); box-shadow: none; }
    49% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    95% { background: rgba(139,92,246,0.06); border-color: rgba(109,64,207,0.28); box-shadow: none; }
    98%, 100% { background: #f5f5f7; border-color: transparent; box-shadow: none; }
}
/* ─── Keyframe re-theme: connector line pulses (purple alpha on white) ─────── */
html.light-mode .s2t-pipe-row.s2t-row-1 .s2t-pipe-line { animation-name: s2tLine1Light; }
html.light-mode .s2t-pipe-row.s2t-row-2 .s2t-pipe-line { animation-name: s2tLine2Light; }
html.light-mode .s2t-pipe-row.s2t-row-3 .s2t-pipe-line { animation-name: s2tLine3Light; }
html.light-mode .s2t-pipe-row.s2t-row-4 .s2t-pipe-line { animation-name: s2tLine4Light; }
html.light-mode .s2t-pipe-row.s2t-row-5 .s2t-pipe-line { animation-name: s2tLine5Light; }

@keyframes s2tLine1Light {
    0% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
    1% { opacity: 0.85; background-image: linear-gradient(to right, rgba(109,64,207,0.60) 50%, rgba(109,64,207,0.0) 0%); }
    6% { opacity: 0.95; background-image: linear-gradient(to right, rgba(109,64,207,0.70) 50%, rgba(109,64,207,0.0) 0%); }
    9% { opacity: 0.70; background-image: linear-gradient(to right, rgba(109,64,207,0.50) 50%, rgba(109,64,207,0.0) 0%); }
    95% { opacity: 0.70; }
    98%, 100% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
}
@keyframes s2tLine2Light {
    0%, 10% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
    11% { opacity: 0.85; background-image: linear-gradient(to right, rgba(109,64,207,0.60) 50%, rgba(109,64,207,0.0) 0%); }
    16% { opacity: 0.95; background-image: linear-gradient(to right, rgba(109,64,207,0.70) 50%, rgba(109,64,207,0.0) 0%); }
    19% { opacity: 0.70; background-image: linear-gradient(to right, rgba(109,64,207,0.50) 50%, rgba(109,64,207,0.0) 0%); }
    95% { opacity: 0.70; }
    98%, 100% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
}
@keyframes s2tLine3Light {
    0%, 20% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
    21% { opacity: 0.85; background-image: linear-gradient(to right, rgba(109,64,207,0.60) 50%, rgba(109,64,207,0.0) 0%); }
    26% { opacity: 0.95; background-image: linear-gradient(to right, rgba(109,64,207,0.70) 50%, rgba(109,64,207,0.0) 0%); }
    29% { opacity: 0.70; background-image: linear-gradient(to right, rgba(109,64,207,0.50) 50%, rgba(109,64,207,0.0) 0%); }
    95% { opacity: 0.70; }
    98%, 100% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
}
@keyframes s2tLine4Light {
    0%, 30% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
    31% { opacity: 0.85; background-image: linear-gradient(to right, rgba(109,64,207,0.60) 50%, rgba(109,64,207,0.0) 0%); }
    36% { opacity: 0.95; background-image: linear-gradient(to right, rgba(109,64,207,0.70) 50%, rgba(109,64,207,0.0) 0%); }
    39% { opacity: 0.70; background-image: linear-gradient(to right, rgba(109,64,207,0.50) 50%, rgba(109,64,207,0.0) 0%); }
    95% { opacity: 0.70; }
    98%, 100% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
}
@keyframes s2tLine5Light {
    0%, 40% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
    41% { opacity: 0.85; background-image: linear-gradient(to right, rgba(109,64,207,0.60) 50%, rgba(109,64,207,0.0) 0%); }
    46% { opacity: 0.95; background-image: linear-gradient(to right, rgba(109,64,207,0.70) 50%, rgba(109,64,207,0.0) 0%); }
    49% { opacity: 0.70; background-image: linear-gradient(to right, rgba(109,64,207,0.50) 50%, rgba(109,64,207,0.0) 0%); }
    95% { opacity: 0.70; }
    98%, 100% { opacity: 0.55; background-image: linear-gradient(to right, rgba(109,64,207,0.40) 50%, rgba(109,64,207,0.0) 0%); }
}
/* ─── Keyframe re-theme: test rows appearing (green-tinted, no white base) ──── */
/* Only background/border keyframe values need re-theming; the original white
   base fill rgba(255,255,255,0.015) -> #f5f5f7 light inset. opacity/transform/
   filter(blur) are structural reveal effects and are intentionally left as-is. */
html.light-mode .s2t-test-row.s2t-row-1 { animation-name: s2tTest1Light; }
html.light-mode .s2t-test-row.s2t-row-2 { animation-name: s2tTest2Light; }
html.light-mode .s2t-test-row.s2t-row-3 { animation-name: s2tTest3Light; }
html.light-mode .s2t-test-row.s2t-row-4 { animation-name: s2tTest4Light; }
html.light-mode .s2t-test-row.s2t-row-5 { animation-name: s2tTest5Light; }

@keyframes s2tTest1Light {
    0%, 5% { opacity: 0; transform: translateX(-6px); filter: blur(3px); background: #f5f5f7; border-color: transparent; }
    7% { opacity: 0.6; transform: translateX(-2px); filter: blur(1.2px); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); }
    9% { opacity: 1; transform: translateX(0); filter: blur(0); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.24); }
    12% { opacity: 1; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
    95% { opacity: 1; transform: translateX(0); filter: blur(0); }
    98%, 100% { opacity: 0; transform: translateX(-6px); filter: blur(3px); }
}
@keyframes s2tTest2Light {
    0%, 15% { opacity: 0; transform: translateX(-6px); filter: blur(3px); background: #f5f5f7; border-color: transparent; }
    17% { opacity: 0.6; transform: translateX(-2px); filter: blur(1.2px); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); }
    19% { opacity: 1; transform: translateX(0); filter: blur(0); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.24); }
    22% { opacity: 1; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
    95% { opacity: 1; transform: translateX(0); filter: blur(0); }
    98%, 100% { opacity: 0; transform: translateX(-6px); filter: blur(3px); }
}
@keyframes s2tTest3Light {
    0%, 25% { opacity: 0; transform: translateX(-6px); filter: blur(3px); background: #f5f5f7; border-color: transparent; }
    27% { opacity: 0.6; transform: translateX(-2px); filter: blur(1.2px); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); }
    29% { opacity: 1; transform: translateX(0); filter: blur(0); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.24); }
    32% { opacity: 1; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
    95% { opacity: 1; transform: translateX(0); filter: blur(0); }
    98%, 100% { opacity: 0; transform: translateX(-6px); filter: blur(3px); }
}
@keyframes s2tTest4Light {
    0%, 35% { opacity: 0; transform: translateX(-6px); filter: blur(3px); background: #f5f5f7; border-color: transparent; }
    37% { opacity: 0.6; transform: translateX(-2px); filter: blur(1.2px); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); }
    39% { opacity: 1; transform: translateX(0); filter: blur(0); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.24); }
    42% { opacity: 1; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
    95% { opacity: 1; transform: translateX(0); filter: blur(0); }
    98%, 100% { opacity: 0; transform: translateX(-6px); filter: blur(3px); }
}
@keyframes s2tTest5Light {
    0%, 45% { opacity: 0; transform: translateX(-6px); filter: blur(3px); background: #f5f5f7; border-color: transparent; }
    47% { opacity: 0.6; transform: translateX(-2px); filter: blur(1.2px); background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.28); }
    49% { opacity: 1; transform: translateX(0); filter: blur(0); background: rgba(22,163,74,0.08); border-color: rgba(22,163,74,0.24); }
    52% { opacity: 1; background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
    95% { opacity: 1; transform: translateX(0); filter: blur(0); }
    98%, 100% { opacity: 0; transform: translateX(-6px); filter: blur(3px); }
}
/* ─── Phase row (footer-ish strip) ─────────────────────────────────────────── */
html.light-mode .s2t-phase {
    background: #f5f5f7;
    border-top: 1px solid #d2d2d7;
}
/* Phase dot — small brand fill, no glow halo */
html.light-mode .s2t-phase-dot {
    background: #8b5cf6;
}
html.light-mode .s2t-phase-text {
    color: #515154;
}

/* ─── Metrics bar ──────────────────────────────────────────────────────────── */
html.light-mode .s2t-metrics {
    background: #ececef;
    border-top: 1px solid #d2d2d7;
}
html.light-mode .s2t-metric {
    border-right: 1px solid #d2d2d7;
}
/* Metric value (was #ffffff) -> dark primary */
html.light-mode .s2t-metric-val {
    color: #1d1d1f;
}
/* Metric label (was low-alpha white) -> muted dark */
html.light-mode .s2t-metric-lbl {
    color: #6e6e73;
}

/* ─── Keyframe re-theme: animated metric counter text colors ───────────────── */
/* The ::before injected count/coverage text animates color through #ffffff /
   low-alpha white -> remap to dark-on-light with a green finish state. */
html.light-mode .s2t-metric-count::before { animation-name: s2tCountTextLight; }
html.light-mode .s2t-metric-coverage::before { animation-name: s2tCoverageTextLight; }

@keyframes s2tCountTextLight {
    0%, 8% { content: '0 / 5'; color: #6e6e73; }
    9%, 18% { content: '1 / 5'; color: #1d1d1f; }
    19%, 28% { content: '2 / 5'; color: #1d1d1f; }
    29%, 38% { content: '3 / 5'; color: #1d1d1f; }
    39%, 48% { content: '4 / 5'; color: #1d1d1f; }
    49%, 96% { content: '5 / 5'; color: #15803d; }
    97%, 100% { content: '0 / 5'; color: #6e6e73; }
}
@keyframes s2tCoverageTextLight {
    0%, 8% { content: '0%'; color: #6e6e73; }
    9%, 18% { content: '20%'; color: #1d1d1f; }
    19%, 28% { content: '40%'; color: #1d1d1f; }
    29%, 38% { content: '60%'; color: #1d1d1f; }
    39%, 48% { content: '80%'; color: #1d1d1f; }
    49%, 96% { content: '100%'; color: #15803d; }
    97%, 100% { content: '0%'; color: #6e6e73; }
}

/* ─── Power Optimization section opener (boundary at end of slice) ──────────── */
/* Inline style="background: #0C0A10" on <section id="power-optimization"> */
html.light-mode #power-optimization[style*="#0C0A10"] {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* =============================================================================
   POWER OPTIMIZATION SECTION (#power-optimization)
   ============================================================================= */

/* --- Section heading "Catch Every Power Regression" (inline color:#ffffff) --- */
html.light-mode #power-optimization > .container > div[style*="color:#ffffff"],
html.light-mode #power-optimization div[style*="font-size:17px"][style*="color:#ffffff"] {
    color: #1d1d1f !important;
}

/* =============================================================================
   .power-profiler-display — the SMU instrument "screen"
   dark bg rgba(10,10,14,0.95) + purple glow shadow + colored border pulse
   Flip screen to light-grey, kill the glow, neutralize the border pulse anim.
   ============================================================================= */
html.light-mode .power-profiler-display {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 20px rgba(139, 92, 246, 0.15) !important;
}

/* Profiler header strip (dark rgba(20,20,24,0.95)) -> inset light */
html.light-mode .profiler-header {
    background: #ececef !important;
    border-bottom: 1px solid #d2d2d7 !important;
}

/* Profiler title text (var-based secondary text already remapped via :root, but be explicit) */
html.light-mode .profiler-title {
    color: #515154 !important;
}

/* Metrics bar (dark rgba(15,15,20,0.6)) -> inset light */
html.light-mode .profiler-metrics-bar {
    background: #ececef !important;
    border-top: 1px solid #d2d2d7 !important;
}

html.light-mode .pwr-metric {
    border-right: 1px solid #d2d2d7 !important;
}
html.light-mode .pwr-metric:last-child {
    border-right: none !important;
}

html.light-mode .pwr-metric-lbl {
    color: #6e6e73 !important;
}

/* Phase labels — secondary text */
html.light-mode .pwr-phase-label {
    color: #515154 !important;
}

/* --- Status dots / pulse animations: kill the colored box-shadow glow --- */


/* Diagnose pulse keyframes use glow box-shadow; neutralize the animation glow */


/* --- Status item TEXT colors (inline color) recolored for contrast on white --- */
/* Measuring (yellow #eab308) -> amber text #a16207 */
html.light-mode .profiler-status-item.pwr-phase-baseline span[style*="color: #eab308"],
html.light-mode .pwr-metric-val[style*="color: #eab308"],
html.light-mode .pwr-phase-label.pwr-phase-baseline span[style*="color: #eab308"] {
    color: #a16207 !important;
}
/* Regression (red #ef4444) -> red text #dc2626 */
html.light-mode .profiler-status-item.pwr-phase-regression span[style*="color: #ef4444"],
html.light-mode .pwr-metric-val[style*="color: #ef4444"],
html.light-mode .pwr-phase-label.pwr-phase-regression span[style*="color: #ef4444"] {
    color: #dc2626 !important;
}
/* Verified / Fix (green #22c55e) -> green text #16a34a */
html.light-mode .profiler-status-item.pwr-phase-fix span[style*="color: #22c55e"],
html.light-mode .pwr-metric-val[style*="color: #22c55e"],
html.light-mode .pwr-phase-label.pwr-phase-fix span[style*="color: #22c55e"] {
    color: #15803d !important;
}
/* Analyzing / Diagnose (blue #3b82f6) -> blue text #2563eb */
html.light-mode .profiler-status-item.pwr-phase-diagnose span[style*="color: #3b82f6"],
html.light-mode .pwr-metric-val[style*="color: #3b82f6"],
html.light-mode .pwr-phase-label.pwr-phase-diagnose span[style*="color: #3b82f6"] {
    color: #2563eb !important;
}

/* Status-dot inline LED fills (kept saturated but they read as small dots;
   only drop the glow which is handled above). Phase-label glyph spans (●/⚠/◉/✓)
   are recolored by the rules above since they share the same color: values. */

/* =============================================================================
   PROFILER CHART SVG (.profiler-chart) — flip screen content to read on light
   ============================================================================= */

/* Gridlines: white-on-dark hairlines -> light hairline #d2d2d7 */
html.light-mode .profiler-chart line[stroke^="rgba(255,255,255"] {
    stroke: #d2d2d7 !important;
}

/* Y-axis labels (white-alpha text) -> muted dark */
html.light-mode .profiler-chart text[fill^="rgba(255,255,255"] {
    fill: #6e6e73 !important;
}

/* Trace glow filters (traceGlowGreen / traceGlowRed) — remove the bloom */


/* Signal traces: keep but darken to readable variants on light */
html.light-mode .pwr-trace-regression[stroke="#ef4444"] {
    stroke: #dc2626 !important;
}
html.light-mode .pwr-trace-fix[stroke="#22c55e"] {
    stroke: #16a34a !important;
}

/* Measuring overlay (yellow) — wash rects/strokes/text on light */
html.light-mode .pwr-measuring-overlay rect[fill="rgba(234, 179, 8, 0.05)"] {
    fill: rgba(161, 98, 7, 0.06) !important;
}
html.light-mode .pwr-measuring-overlay rect[fill="rgba(234, 179, 8, 0.08)"] {
    fill: rgba(161, 98, 7, 0.08) !important;
    stroke: rgba(161, 98, 7, 0.30) !important;
}
html.light-mode .pwr-measuring-overlay text[fill="rgba(234, 179, 8, 0.8)"] {
    fill: #a16207 !important;
}
html.light-mode .pwr-measuring-overlay text[fill="rgba(234, 179, 8, 0.4)"] {
    fill: #6e6e73 !important;
}

/* Diagnosis overlay — dark inset card rgba(10,10,20,0.92) -> light inset panel */
html.light-mode .pwr-diagnosis-overlay rect[fill="rgba(10,10,20,0.92)"] {
    fill: #ffffff !important;
    stroke: #d2d2d7 !important;
}
/* Header label (blue) */
html.light-mode .pwr-diagnosis-overlay text[fill="rgba(59,130,246,0.9)"] {
    fill: #2563eb !important;
}
/* Divider lines (blue tint) -> light hairline */
html.light-mode .pwr-diagnosis-overlay line[stroke="rgba(59,130,246,0.15)"] {
    stroke: #d2d2d7 !important;
}
/* Root-cause code (red) -> readable red */
html.light-mode .pwr-diagnosis-overlay text[fill="rgba(239,68,68,0.8)"] {
    fill: #dc2626 !important;
}
/* Sub-descriptions (white-alpha) -> muted dark */
html.light-mode .pwr-diagnosis-overlay text[fill="rgba(255,255,255,0.5)"] {
    fill: #6e6e73 !important;
}
/* FIX line (green) -> readable green */
html.light-mode .pwr-diagnosis-overlay text[fill="rgba(34,197,94,0.9)"] {
    fill: #16a34a !important;
}

/* ── SMU bench upgrades: baseline trace / sweep / budget line / annotation / scan ── */
html.light-mode .pwr-dut-box {
    background: #ffffff !important;
    border-color: #d2d2d7;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08), 0 0 15px rgba(139, 92, 246, 0.12) !important;
}
html.light-mode .pwr-dut-header {
    background: #ececef !important;
}
html.light-mode .pwr-dut-title {
    color: #515154 !important;
}
html.light-mode .pwr-lead-up,
html.light-mode .pwr-lead-dn {
    stroke: rgba(91, 33, 182, 0.28) !important;
}
html.light-mode .lead-node-round {
    fill: #6d28d9 !important;
}
html.light-mode .lead-node-flat {
    fill: rgba(109, 40, 217, 0.85) !important;
}

html.light-mode #mProtoPinSCL[style*="rgba(139,92,246"],
html.light-mode #mProtoPinSDA[style*="rgba(139,92,246"],
html.light-mode #mProtoPinGND[style*="rgba(139,92,246"],
html.light-mode #mPrbSCL[style*="#8b5cf6"],
html.light-mode #mPrbSDA[style*="#8b5cf6"],
html.light-mode #mPrbGND[style*="#8b5cf6"] {
    background: #6d28d9 !important;
}
html.light-mode .pwr-budget-pill {
    fill: #ffffff !important;
    stroke: rgba(161, 98, 7, 0.45) !important;
}
html.light-mode .pwr-readout-row {
    color: #a16207 !important;
}
html.light-mode .pwr-budget-line {
    stroke: rgba(161, 98, 7, 0.55) !important;
}
html.light-mode .pwr-budget-alert {
    stroke: rgba(220, 38, 38, 0.6) !important;
}
html.light-mode .pwr-budget-label {
    fill: #a16207 !important;
}
html.light-mode .pwr-annot-box,
html.light-mode .pwr-annot-lead {
    stroke: rgba(220, 38, 38, 0.65) !important;
}
html.light-mode .pwr-annot-pill {
    fill: #ffffff !important;
    stroke: rgba(220, 38, 38, 0.45) !important;
}
html.light-mode .pwr-annot-text {
    fill: #dc2626 !important;
}
html.light-mode .pwr-scan-line {
    stroke: rgba(37, 99, 235, 0.45) !important;
}
html.light-mode .pwr-readout {
    fill: #a16207 !important;
}
html.light-mode .pwr-readout-dim {
    fill: #6e6e73 !important;
}

/* =============================================================================
   AssembleAI controller box (#smuAiBox) + rainbow-glow-wrapper + divider
   ============================================================================= */
/* Center divider line (white-alpha) inside the AI box -> soft dark hairline */
html.light-mode #smuAiBox div[style*="background: rgba(255,255,255,0.10)"],
html.light-mode #mSmuAiBox div[style*="background: rgba(255,255,255,0.10)"] {
    background: rgba(0, 0, 0, 0.10) !important;
}

/* =============================================================================
   POWER CONTENT COPY (.power-content / .security-copy in this section)
   ============================================================================= */
/* Intro line "Autonomously validate power draw..." (inline #ffffff) */
html.light-mode .power-content .security-copy > div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}
/* Purple bullet dots (#8b5cf6) — small fills, keep brand purple per rulebook */
/* (no override needed; #8b5cf6 small fill reads on white) */

/* =============================================================================
   TIMING VERIFICATION SECTION (#timing-verification) — inline styles + SVG
   only (the .tmg and .scope CSS classes are defined past line 6740).
   ============================================================================= */

/* --- Section background #0C0A10 -> white --- */
html.light-mode #timing-verification {
    background: #ffffff !important;
}

/* Section heading "Correct Every Timing Issue" (inline #ffffff) */
html.light-mode #timing-verification > .container > div[style*="color:#ffffff"] {
    color: #1d1d1f !important;
}

/* Timing content intro line (inline #ffffff) */
html.light-mode .timing-content .security-copy > div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* =============================================================================
   DUT PCB SVG (.tmg-dut-svg) — flip the dark FR4 board to a light board
   so nothing reads dark; recolor white-on-dark labels/components.
   ============================================================================= */

/* FR4 board + ground plane (dark fills) -> light surfaces */
html.light-mode .tmg-dut-svg rect[fill="rgba(12, 12, 16, 0.97)"] {
    fill: #ececef !important;
}
html.light-mode .tmg-dut-svg rect[fill="rgba(18,18,24,0.4)"] {
    fill: rgba(0, 0, 0, 0.03) !important;
}
/* Board outline stroke (white-alpha) -> hairline */
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.06)"] {
    stroke: #d2d2d7 !important;
}

/* IC packages (dark rgba(16,16,20,0.97)) -> light chip bodies w/ hairline */
html.light-mode .tmg-dut-svg rect[fill="rgba(16,16,20,0.97)"] {
    fill: #ffffff !important;
    stroke: rgba(0, 0, 0, 0.16) !important;
}
/* Connector / SWD / misc dark housings (circle variants: electrolytic cap bodies on the power board) */
html.light-mode .tmg-dut-svg rect[fill="rgba(25,25,30,0.95)"],
html.light-mode .tmg-dut-svg circle[fill="rgba(25,25,30,0.95)"],
html.light-mode .tmg-dut-svg rect[fill="rgba(28,28,32,0.95)"] {
    fill: #e2e2e6 !important;
    stroke: rgba(0, 0, 0, 0.16) !important;
}
/* USB-C shell (medium grey) -> light metal (circle variant: coin-cell holder on the power board) */
html.light-mode .tmg-dut-svg rect[fill="rgba(55,55,60,0.9)"],
html.light-mode .tmg-dut-svg circle[fill="rgba(55,55,60,0.9)"] {
    fill: #d2d2d7 !important;
    stroke: rgba(0, 0, 0, 0.16) !important;
}
html.light-mode .tmg-dut-svg rect[fill="rgba(38,38,42,0.95)"],
html.light-mode .tmg-dut-svg circle[fill="rgba(38,38,42,0.95)"] {
    fill: #b4b4bb !important;
}

/* Mounting holes / vias (near-black fills) -> mid grey so they read on light */
html.light-mode .tmg-dut-svg circle[fill="rgba(8,8,12,0.95)"] {
    fill: #c7c7cc !important;
}

/* Copper traces / power planes / pads (warm-gold low-alpha) -> darker gold
   so they read on the light board. Match the actual fill/stroke alpha forms. */
html.light-mode .tmg-dut-svg line[stroke^="rgba(180,140,60"] {
    stroke: rgba(146, 110, 30, 0.75) !important;
}
html.light-mode .tmg-dut-svg rect[fill^="rgba(180,140,60"] {
    fill: rgba(146, 110, 30, 0.70) !important;
}
html.light-mode .tmg-dut-svg circle[stroke^="rgba(180,140,60"] {
    stroke: rgba(146, 110, 30, 0.70) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(180,140,60,0.40)"] {
    fill: rgba(146, 110, 30, 0.85) !important;
}
/* PCB-antenna trace */
html.light-mode .tmg-dut-svg path[stroke^="rgba(180,140,60"] {
    stroke: rgba(146, 110, 30, 0.70) !important;
}

/* Passives — decoupling caps / resistors (dark warm tan bodies) -> readable tan */
html.light-mode .tmg-dut-svg rect[fill="rgba(60,50,30,0.8)"] {
    fill: rgba(120, 100, 60, 0.45) !important;
    stroke: rgba(146, 110, 30, 0.25) !important;
}
html.light-mode .tmg-dut-svg rect[fill="rgba(55,45,35,0.8)"] {
    fill: rgba(120, 95, 60, 0.45) !important;
    stroke: rgba(146, 110, 30, 0.25) !important;
}
html.light-mode .tmg-dut-svg rect[fill="rgba(50,45,35,0.65)"] {
    fill: rgba(120, 100, 60, 0.42) !important;
    stroke: rgba(146, 110, 30, 0.28) !important;
}
/* Inductors (dark warm) */
html.light-mode .tmg-dut-svg rect[fill="rgba(40,35,25,0.8)"] {
    fill: rgba(110, 90, 55, 0.45) !important;
    stroke: rgba(146, 110, 30, 0.28) !important;
}
/* Crystals (light glassy tile) -> keep light but give a readable border */
html.light-mode .tmg-dut-svg rect[fill="rgba(200,200,210,0.10)"],
html.light-mode .tmg-dut-svg rect[fill="rgba(200,200,210,0.08)"] {
    fill: #e2e2e6 !important;
    stroke: rgba(0, 0, 0, 0.12) !important;
}
/* Y1 crystal oscillator (timing DUT, desktop + mobile): silver can -> light grey,
   etched schematic symbol + label -> dark muted so they read on the light can */
html.light-mode .xtl-can { fill: #d8d8dc !important; stroke: #b8b8bd !important; }
html.light-mode .xtl-sym { stroke: #55555a !important; }
html.light-mode .xtl-lbl { fill: #6e6e73 !important; }

/* Silkscreen / chip-label / pin-1 text (white-alpha) -> dark muted so it reads */
html.light-mode .tmg-dut-svg text[fill^="rgba(255,255,255"] {
    fill: #6e6e73 !important;
}
/* Pin-1 dot (white-alpha circle) */
html.light-mode .tmg-dut-svg circle[fill="rgba(255,255,255,0.12)"],
html.light-mode .tmg-dut-svg circle[fill="rgba(255,255,255,0.18)"] {
    fill: #86868b !important;
}
/* Test-point rings/centers (white-alpha); 0.12 variant = coin-cell rim on the power board */
html.light-mode .tmg-dut-svg circle[stroke="rgba(255,255,255,0.10)"],
html.light-mode .tmg-dut-svg circle[stroke="rgba(255,255,255,0.12)"] {
    stroke: rgba(0, 0, 0, 0.18) !important;
}
/* RF shield can outline (white-alpha dashed) */
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.04)"] {
    stroke: rgba(0, 0, 0, 0.12) !important;
}
/* MCU body outline / IC outlines that use white-alpha strokes */
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.09)"],
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.08)"],
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.10)"],
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.12)"],
html.light-mode .tmg-dut-svg rect[stroke="rgba(255,255,255,0.06)"] {
    stroke: rgba(0, 0, 0, 0.16) !important;
}

/* Status-LED fills/strokes on the board — keep hue but make them read on light.
   These are small indicator dots; bump saturation slightly. The SVG <animate>
   targets keep their values; we only set the static fill/stroke. */
html.light-mode .tmg-dut-svg circle[fill="rgba(34,197,94,0.12)"] {
    fill: rgba(22, 163, 74, 0.55) !important;
    stroke: rgba(22, 163, 74, 0.6) !important;
}
html.light-mode .tmg-dut-svg circle[stroke="rgba(34,197,94,0.06)"] {
    stroke: rgba(22, 163, 74, 0.18) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(245,158,11,0.10)"] {
    fill: rgba(180, 83, 9, 0.55) !important;
    stroke: rgba(180, 83, 9, 0.6) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(59,130,246,0.10)"] {
    fill: rgba(37, 99, 235, 0.55) !important;
    stroke: rgba(37, 99, 235, 0.6) !important;
}
html.light-mode .tmg-dut-svg circle[stroke="rgba(59,130,246,0.06)"],
html.light-mode .tmg-dut-svg circle[stroke="rgba(59,130,246,0.05)"] {
    stroke: rgba(37, 99, 235, 0.18) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(239,68,68,0.12)"] {
    fill: rgba(220, 38, 38, 0.55) !important;
    stroke: rgba(220, 38, 38, 0.6) !important;
}
html.light-mode .tmg-dut-svg circle[stroke="rgba(239,68,68,0.06)"] {
    stroke: rgba(220, 38, 38, 0.18) !important;
}
/* Amber test-point rings (kept as indicators) */
html.light-mode .tmg-dut-svg circle[stroke="rgba(245,158,11,0.45)"] {
    stroke: rgba(180, 83, 9, 0.55) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(245,158,11,0.60)"] {
    fill: rgba(180, 83, 9, 0.85) !important;
}

/* ── Status-LED DAY-MODE pulse. In light mode the !important LED fills above
   (cascade level 5) freeze the SVG <animate fill> pulse (level 4), so in day
   mode the LEDs sat static + faint. Re-drive them with a CSS OPACITY pulse
   (opacity is NOT pinned by those rules) and brighter saturated cores, staggered
   per colour. Covers BOTH the desktop (.tmg-dut-svg) and mobile (#mTmgDutBox)
   timing-DUT boards. Light-mode only — dark mode keeps its native SMIL pulse. ── */
@keyframes lmDutLedPulse { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.7; } }

html.light-mode .tmg-dut-svg circle[fill="rgba(34,197,94,0.12)"],
html.light-mode #mTmgDutBox svg circle[fill="rgba(34,197,94,0.12)"] {
    fill: rgba(22, 163, 74, 0.92) !important;
    animation: lmDutLedPulse 2s linear infinite;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(245,158,11,0.10)"],
html.light-mode #mTmgDutBox svg circle[fill="rgba(245,158,11,0.10)"] {
    /* no pulse: the dark-mode amber LED is static (no SMIL animate) */
    fill: rgba(217, 119, 6, 0.95) !important;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(59,130,246,0.10)"],
html.light-mode #mTmgDutBox svg circle[fill="rgba(59,130,246,0.10)"] {
    fill: rgba(37, 99, 235, 0.95) !important;
    animation: lmDutLedPulse 1.8s linear infinite 0.6s;
}
html.light-mode .tmg-dut-svg circle[fill="rgba(239,68,68,0.12)"],
html.light-mode #mTmgDutBox svg circle[fill="rgba(239,68,68,0.12)"] {
    fill: rgba(220, 38, 38, 0.95) !important;
    animation: lmDutLedPulse 3s linear infinite;
}
/* the desktop green LED has an id rule #tmgDutLed { animation: tmgDutLedBlink } that
   blinks via FILL — frozen by the !important fill above in light mode. Override with the
   opacity pulse (higher specificity than #tmgDutLed) so it blinks in day mode too. */
html.light-mode #tmgDutLed {
    animation: lmDutLedPulse 2.8s ease-in-out infinite !important;
}

/* =============================================================================
   OSCILLOSCOPE INSTRUMENT (.scope-screen SVG + #scopeDisplay)
   Flip the dark phosphor screen to a light inset; darken graticule & traces.
   ============================================================================= */

/* Scope screen background (dark phosphor rgba(3,12,8,0.97)) -> light inset */
html.light-mode .scope-screen rect[fill="rgba(3, 12, 8, 0.97)"] {
    fill: #f5f5f7 !important;
}

/* Scanline pattern overlay rects (transparent + dark stripe) -> drop the dark stripe */
html.light-mode .scope-screen pattern#scopeScanlines rect[fill="rgba(0,0,0,0.06)"] {
    fill: rgba(0, 0, 0, 0) !important;
}

/* Graticule lines / ticks / crosshair (green-tint) -> light hairline */
html.light-mode .scope-screen line[stroke^="rgba(80,180,120"] {
    stroke: #d2d2d7 !important;
}

/* Trigger arrow (amber) */
html.light-mode .scope-screen polygon[fill="rgba(245,158,11,0.50)"] {
    fill: rgba(180, 83, 9, 0.7) !important;
}


/* Spec trace (cyan-on-dark) -> darkened cyan */
html.light-mode #scopeSpecTrace[stroke="rgba(0,210,210,0.30)"] {
    stroke: rgba(14, 116, 144, 0.6) !important;
}
/* Error trace (red) -> readable red */
html.light-mode #scopeErrorTrace[stroke="#ef4444"] {
    stroke: #dc2626 !important;
}
/* Fix trace (green) -> readable green */
html.light-mode #scopeFixTrace[stroke="#22c55e"] {
    stroke: #16a34a !important;
}

/* Error annotation (red box/label/arrow) */
html.light-mode #scopeErrBox[stroke="rgba(239,68,68,0.45)"] {
    stroke: rgba(220, 38, 38, 0.6) !important;
}
html.light-mode #scopeErrLabel[fill="rgba(239,68,68,0.95)"] {
    fill: #dc2626 !important;
}
html.light-mode #scopeErrArrow[stroke="rgba(239,68,68,0.35)"] {
    stroke: rgba(220, 38, 38, 0.5) !important;
}

/* Capturing overlay (amber wash) */
html.light-mode #scopeCaptureOverlay rect[fill="rgba(245,158,11,0.03)"] {
    fill: rgba(180, 83, 9, 0.05) !important;
}
html.light-mode #scopeCaptureOverlay rect[fill="rgba(245,158,11,0.06)"] {
    fill: rgba(180, 83, 9, 0.07) !important;
    stroke: rgba(180, 83, 9, 0.3) !important;
}
html.light-mode #scopeCaptureOverlay text[fill="rgba(245,158,11,0.80)"] {
    fill: #b45309 !important;
}
html.light-mode #scopeCaptureOverlay text[fill="rgba(245,158,11,0.40)"] {
    fill: #6e6e73 !important;
}

/* Analysis overlay — dark inset card rgba(10,10,20,0.95) -> light panel */
html.light-mode #scopeAnalysisOverlay rect[fill="rgba(10,10,20,0.95)"] {
    fill: #ffffff !important;
    stroke: rgba(109, 40, 217, 0.35) !important;
}
/* Purple heading / dividers */
html.light-mode #scopeAnalysisOverlay text[fill="rgba(139,92,246,0.95)"] {
    fill: #6d28d9 !important;
}
html.light-mode #scopeAnalysisOverlay line[stroke="rgba(139,92,246,0.20)"] {
    stroke: #d2d2d7 !important;
}
html.light-mode #scopeAnalysisOverlay text[fill="rgba(139,92,246,0.50)"] {
    fill: #6e6e73 !important;
}
/* Violation code (red) / fix line (green) / descriptions (white-alpha) */
html.light-mode #scopeAnalysisOverlay text[fill="rgba(239,68,68,0.90)"] {
    fill: #dc2626 !important;
}
html.light-mode #scopeAnalysisOverlay text[fill="rgba(34,197,94,0.90)"] {
    fill: #16a34a !important;
}
html.light-mode #scopeAnalysisOverlay text[fill="rgba(255,255,255,0.55)"] {
    fill: #6e6e73 !important;
}

/* Info readout row: CH1 (amber), V/div + t/div (white-alpha), Trig'd (yellow) */
html.light-mode .scope-screen text[fill="rgba(245,158,11,0.60)"] {
    fill: #b45309 !important;
}
html.light-mode .scope-screen text[fill="rgba(255,255,255,0.28)"] {
    fill: #6e6e73 !important;
}
html.light-mode .scope-screen text[fill="rgba(234,179,8,0.45)"] {
    fill: #a16207 !important;
}

/* Scope header status dot/text inline styles (amber) */

html.light-mode #scopeStatusText[style*="color:#f59e0b"] {
    color: #b45309 !important;
}
/* Scope metric values (inline color:#f59e0b) */
html.light-mode .scope-metric-val[style*="color:#f59e0b"] {
    color: #b45309 !important;
}
/* Scope phase-label problem dot (inline color:#f59e0b) */
html.light-mode #scopeProblemDot[style*="color:#f59e0b"] {
    color: #b45309 !important;
}

/* =============================================================================
   TIMING BEAMS SVG (#tmgBeamsSvg) — purple wires + glow filters + lead-glow grad
   Remove the bloom; recolor the wire stroke to readable purple; make the
   white-hot beam-pulse gradient a subtle purple so it reads on white.
   ============================================================================= */

/* Curved wires use a purple-glow bloom filter -> drop the filter */
html.light-mode #tmgBeamsSvg path[filter="url(#beamGlow)"] {
    stroke: rgba(91, 33, 182, 0.28) !important;
}

/* Lead gradient: white-hot core (#ffffff @ 0.9) reads as nothing on white.
   Recolor the stops to a visible purple so the moving pulse stays legible. */
html.light-mode #tmgLeadGrad stop[stop-color="#c4b5fd"] {
    stop-color: #7c3aed !important;
}
html.light-mode #tmgLeadGrad stop[stop-color="#e9d5ff"] {
    stop-color: #8b5cf6 !important;
}
html.light-mode #tmgLeadGrad stop[stop-color="#ffffff"] {
    stop-color: #6d28d9 !important;
}

/* AI box center divider line (white-alpha) inside #tmgAiBox */
html.light-mode #tmgAiBox div[style*="background: rgba(255,255,255,0.10)"] {
    background: rgba(0, 0, 0, 0.10) !important;
}

/* ───────────────────────────────────────────────────────────────
 *  SCOPE INSTRUMENT — flip the "oscilloscope" screen/panel to light.
 *  Owner requirement: NO screen may stay dark. Background -> light-grey,
 *  remove the purple glow, recolor white-on-dark text/borders for light.
 * ─────────────────────────────────────────────────────────────── */

/* .scope-display — the oscilloscope instrument shell */
html.light-mode .scope-display {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 15px rgba(139,92,246,0.12) !important;
}

/* .scope-header — instrument title bar */
html.light-mode .scope-header {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}

html.light-mode .scope-title {
    color: #515154 !important;
}

/* status row hairline */
html.light-mode .scope-status-row {
    border-top: 1px solid rgba(0,0,0,0.08) !important;
}

html.light-mode .scope-phase-label {
    color: #515154 !important;
}

/* ── phase pills ── */
html.light-mode .scope-pill {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    color: #6e6e73 !important;
}

/* active pill — keep purple identity but readable on white */
html.light-mode .scope-pill-active {
    background: rgba(139,92,246,0.12) !important;
    border-color: rgba(109,64,207,0.40) !important;
    color: #6d28d9 !important;
}

/* done pill — green label readable on white */
html.light-mode .scope-pill-done {
    background: rgba(22,163,74,0.08) !important;
    border-color: rgba(22,163,74,0.30) !important;
    color: #15803d !important;
}

/* ── metrics bar (deeper inset strip below the screen) ── */
html.light-mode .scope-metrics-bar {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7 !important;
}

html.light-mode .scope-metric {
    border-right: 1px solid #d2d2d7 !important;
}

html.light-mode .scope-metric:last-child {
    border-right: none !important;
}

html.light-mode .scope-metric-lbl {
    color: #6e6e73 !important;
}

/* ───────────────────────────────────────────────────────────────
 *  AI CONTROLLER BOX — re-theme the dark chip to a white card.
 * ─────────────────────────────────────────────────────────────── */
html.light-mode .tmg-ai-box {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

html.light-mode .tmg-ai-label {
    color: #1d1d1f !important;
}

html.light-mode .tmg-ai-status {
    color: #6e6e73 !important;
}

html.light-mode .tmg-ai-status-dot {
    background: #eab308 !important;
}

/* ───────────────────────────────────────────────────────────────
 *  DUT BOX — flip the dark device-under-test panel to a white card,
 *  remove purple glow, recolor header/title.
 * ─────────────────────────────────────────────────────────────── */
html.light-mode .tmg-dut-box {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 15px rgba(139,92,246,0.12) !important;
}

html.light-mode .tmg-dut-header {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}

html.light-mode .tmg-dut-title {
    color: #515154 !important;
}

/* DUT PCB SVG was brightened (filter:brightness(1.3)) to glow against a
 * dark panel; on a white card neutralize that boost so it reads. */
html.light-mode .tmg-dut-svg {
    filter: brightness(1.0) saturate(1.0) !important;
}

/* ───────────────────────────────────────────────────────────────
   #protocol-debugging — section heading + intro copy (white text)
   line 7562 (heading), 7568 (lead line)
   ─────────────────────────────────────────────────────────────── */
html.light-mode #protocol-debugging > .container > div[style*="color:#ffffff"],
html.light-mode #protocol-debugging .security-copy > div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* purple bullet dots (●) — keep as small brand fill but darken to readable purple on white
   lines 7572, 7579, 7586, 7900, 7907, 7914 */
html.light-mode #protocol-debugging .security-point > div[style*="color: #8b5cf6"],
html.light-mode #autonomous-root-cause .security-point > div[style*="color: #8b5cf6"] {
    color: #7c3aed !important;
}

/* ───────────────────────────────────────────────────────────────
   .proto-hw-box / .proto-hw-header — DUT + Logic-Analyzer chassis
   lines 7743, 7746–7748
   Dark chassis -> white panel, neutral border + soft shadow, NO glow.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .proto-hw-box {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 15px rgba(139,92,246,0.12) !important;
}
html.light-mode .proto-hw-header {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}
html.light-mode .proto-hw-title {
    color: #515154 !important;
}
/* idle DUT LED dot — keep readable on white */
html.light-mode .proto-dut-led {
    background: rgba(220,38,38,0.55) !important;
}

/* ───────────────────────────────────────────────────────────────
   DUT "screen": the proto-dut-board SVG (lines 7609–7673)
   This is an instrument screen — flip to light inset, darken content.
   The board SVG sits in .proto-dut-board; give it a light inset bg and
   drop the brightness/saturate boost (which was tuned for a dark board).
   ─────────────────────────────────────────────────────────────── */
html.light-mode .proto-dut-board {
    background: #f5f5f7 !important;
}
html.light-mode .proto-dut-board > svg[style*="brightness"] {
    filter: none !important;
}
/* Board substrate rects (rgba(12,12,16,*) / rgba(18,18,24,*) / #0a0a0c 7-seg window)
   -> light inset surfaces */
html.light-mode .proto-dut-board svg rect[fill="rgba(12, 12, 16, 0.97)"] {
    fill: #ececef !important;
}
html.light-mode .proto-dut-board svg rect[fill="rgba(18,18,24,0.4)"] {
    fill: rgba(0, 0, 0, 0.03) !important;
}
html.light-mode .proto-dut-board svg rect[fill="#0a0a0c"] {
    fill: #e2e2e6 !important;
    stroke: #d2d2d7 !important;
}
/* board outline + framing strokes (white-on-dark hairlines) -> neutral hairline */
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.06)"],
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.08)"],
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.09)"],
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.07)"],
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.05)"],
html.light-mode .proto-dut-board svg rect[stroke="rgba(255,255,255,0.06)"] {
    stroke: #d2d2d7 !important;
}
/* mounting holes + vias (near-black fills with gold ring) -> light fill, neutral ring */
html.light-mode .proto-dut-board svg circle[fill="rgba(8,8,12,0.95)"] {
    fill: #c7c7cc !important;
    stroke: rgba(146, 110, 30, 0.70) !important;
}
/* component packages (MCU/RTC/BLE/flash/DAC/op-amp/level-shifter/header) -> light grey chips */
html.light-mode .proto-dut-board svg rect[fill="rgba(16,16,20,0.97)"] {
    fill: #ffffff !important;
    stroke: rgba(0, 0, 0, 0.16) !important;
}
/* passive caps / crystal / inductor (faint white fills) -> light grey */
html.light-mode .proto-dut-board svg rect[fill="rgba(200,200,210,0.10)"],
html.light-mode .proto-dut-board svg rect[fill="rgba(200,200,210,0.08)"],
html.light-mode .proto-dut-board svg rect[fill="rgba(200,200,210,0.06)"] {
    fill: #e2e2e6 !important;
    stroke: rgba(0, 0, 0, 0.12) !important;
}
/* MCU corner-dot marker (faint white) -> readable grey */
html.light-mode .proto-dut-board svg circle[fill="rgba(255,255,255,0.12)"] {
    fill: #86868b !important;
}
/* silkscreen part labels (white-on-dak text) -> dark secondary text.
   These use varying alpha whites; darken them all. */
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.20)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.15)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.14)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.12)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.10)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.08)"],
html.light-mode .proto-dut-board svg text[fill="rgba(255,255,255,0.07)"] {
    fill: #6e6e73 !important;
}
/* copper traces / pads / gold rings stay gold-ish but darken so they read on light grey.
   The gold rgba(180,140,60,*) reads fine over #f5f5f7; bump opacity isn't possible per-attr,
   so leave traces as-is (they already read). The 7-seg OFF segments (#1a0505) -> inset grey. */
html.light-mode .proto-dut-board svg rect[fill="#1a0505"],
html.light-mode .proto-dut-board svg circle[fill="#1a0505"] {
    fill: #d2d2d7 !important;
}
/* status LED on board (green) stays a saturated dot — fine on light */

/* ── MATCH the "Correct Every Timing Issue" DUT board: that board (.tmg-dut-svg)
   maps its amber rgba(180,140,60,*) copper to darker GOLD in light mode
   (rgba(146,110,30,*), see lines ~5423-5438). The desktop protocol board's
   copper was previously left raw amber; map it to the SAME gold so the two
   boards read identical. Colour only — trace pattern/positions unchanged.
   (Mobile already matches: #mProtoDutBox copper is #b45309, same as #mTmgDutBox.) ── */
html.light-mode .proto-dut-board svg line[stroke^="rgba(180,140,60"],
html.light-mode .proto-dut-board svg circle[stroke^="rgba(180,140,60"] {
    stroke: rgba(146,110,30,0.75) !important;
}
html.light-mode .proto-dut-board svg rect[fill^="rgba(180,140,60"],
html.light-mode .proto-dut-board svg circle[fill^="rgba(180,140,60"] {
    fill: rgba(146,110,30,0.70) !important;
}

/* ───────────────────────────────────────────────────────────────
   DUT edge pin markers (HTML) — lines 7606–7608
   Saturated low-alpha fills; keep hue but bump for readability on white.
   ─────────────────────────────────────────────────────────────── */
html.light-mode #protoPinSCLhtml[style*="rgba(139,92,246"],
html.light-mode #protoPinSDAhtml[style*="rgba(139,92,246"],
html.light-mode #protoPinGNDhtml[style*="rgba(139,92,246"] { background: rgba(109,40,217,0.85) !important; }

/* ───────────────────────────────────────────────────────────────
   Logic-Analyzer screen — .proto-la-body + #protoLaDisplay
   lines 7697–7717.  This is an instrument screen: light inset bg,
   darken in-screen text / gridlines, keep darkened trace colors.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .proto-la-body {
    background: #f5f5f7 !important;
    border-radius: 0 0 11px 11px;
}
/* channel labels (yellow/blue low-alpha) -> darkened readable variants */
html.light-mode #protoLaDisplay text[fill="rgba(234,179,8,0.6)"] { fill: #a16207 !important; }
html.light-mode #protoLaDisplay text[fill="rgba(59,130,246,0.6)"] { fill: #2563eb !important; }
/* faint white gridlines -> neutral hairline */
html.light-mode #protoLaDisplay line[stroke="rgba(255,255,255,0.03)"],
html.light-mode #protoLaDisplay line[stroke="rgba(255,255,255,0.05)"] {
    stroke: #d2d2d7 !important;
}
/* signal traces — SCL (amber) / SDA (blue) -> darkened readable on light */
html.light-mode #protoLaDisplay path[stroke="rgba(234,179,8,0.5)"] { stroke: #a16207 !important; }
html.light-mode #protoLaDisplay path[stroke="rgba(59,130,246,0.5)"] { stroke: #2563eb !important; }
/* error-highlight overlay (red) -> readable red wash on light */
html.light-mode #protoLaDisplay rect[fill="rgba(239,68,68,0.06)"] {
    fill: rgba(220,38,38,0.08) !important;
    stroke: rgba(220,38,38,0.35) !important;
}
/* decoded-text readouts (white low-alpha) -> dark text */
html.light-mode #protoLaDisplay text[fill="rgba(255,255,255,0.45)"],
html.light-mode #protoLaDisplay text[fill="rgba(255,255,255,0.40)"] {
    fill: #1d1d1f !important;
}
/* decode status line (purple) -> readable purple on white */
html.light-mode #protoLaDisplay text[fill="rgba(139,92,246,0.6)"] {
    fill: #7c3aed !important;
}
/* LA probe dots (lines 7699–7701) — saturated fill for light; halo + opacity kept identical to dark */
html.light-mode #prbSCL,
html.light-mode #prbSDA,
html.light-mode #prbGND { background: #6d28d9 !important; }

/* ───────────────────────────────────────────────────────────────
   Wire SVG glow filters + lead gradient — lines 7681–7688
   #protoBeamGlow / #protoSoftGlow are colored blooms; the lead
   gradient runs to pure white (#ffffff) which is invisible on light.
   Darken the wire strokes and recolor the lead gradient stops.
   ─────────────────────────────────────────────────────────────── */
/* wire strokes (lines 7685–7687) -> darkened readable hues, keep glow filter
   but its bloom is faint so it won't read as a halo on light; recolor strokes. */
html.light-mode #pwSCL[stroke="rgba(139,92,246,0.45)"],
html.light-mode #pwSDA[stroke="rgba(139,92,246,0.45)"],
html.light-mode #pwGND[stroke="rgba(139,92,246,0.45)"] { stroke: rgba(91, 33, 182, 0.28) !important; }
/* lead-pulse gradient: white core -> darkened purple so the moving bead reads on white */
html.light-mode #protoLeadGrad stop[stop-color="#ffffff"] { stop-color: #6d28d9 !important; }
html.light-mode #protoLeadGrad stop[stop-color="#e9d5ff"] { stop-color: #7c3aed !important; }
html.light-mode #protoLeadGrad stop[stop-color="#c4b5fd"] { stop-color: #8b5cf6 !important; }

/* ───────────────────────────────────────────────────────────────
   AssembleAI controller row — lines 7721–7732
   rainbow-glow-wrapper + tmg-ai-box + center divider (white-on-dark)
   ─────────────────────────────────────────────────────────────── */
html.light-mode #protoAiBox .tmg-ai-label[style*="right: calc(50% + 28px)"] {
    color: #1d1d1f !important;
}
/* center divider line (white low-alpha) -> neutral hairline */
html.light-mode #protoAiBox > div[style*="background: rgba(255,255,255,0.10)"] {
    background: #d2d2d7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   #autonomous-root-cause — section bg + ARCA frame HALO + V-diagram
   ═══════════════════════════════════════════════════════════════ */

/* section bg #0C0A10 (line 7821) -> page white */
html.light-mode #autonomous-root-cause[style*="background: #0C0A10"] {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* section heading + paragraph (.section-header inside arca) */
html.light-mode #autonomous-root-cause .section-header h2 { color: #1d1d1f !important; }
html.light-mode #autonomous-root-cause .section-header p { color: #515154 !important; }

/* ───────────────────────────────────────────────────────────────
   .arca-frame — THE HALO (line 7831): radial-gradient + linear-gradient
   bg, purple border, layered purple/outer glow box-shadow + inset.
   Flatten to a light-grey panel, neutral border, soft shadow, no glow.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .arca-frame[style*="radial-gradient"] {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 0 1px rgba(109, 64, 207, 0.06), 0 0 28px rgba(109, 64, 207, 0.16), 0 0 70px rgba(60, 30, 130, 0.14), inset 0 0 50px rgba(25, 10, 55, 0.22) !important;
}


/* ───────────────────────────────────────────────────────────────
   .arca-image-holder — V-diagram frame (line 7837)
   Dark #2e2e2e holder + purple glow shadow + brightness/contrast
   filter + white screen-blend overlay.  This is a PHOTOGRAPHIC
   technical diagram: keep ORIGINAL image colors (no invert), just
   put it in a light frame, drop the glow + the darkening filter + wash.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .arca-image-holder[style*="background: #383838"] {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 18px rgba(139, 92, 246, 0.18) !important;
}
/* the V-diagram <img> (line 7842) is a black-background raster figure. The
   owner requires light image backgrounds, so flip it with the standard
   dark-image filter: invert luminance (black bg -> white, white text/lines ->
   black) then hue-rotate 180 so the NASA logo + blue boxes keep ~real hues. */
html.light-mode .arca-image-holder img[style*="brightness(0.88)"],
html.light-mode .arca-image-holder img[alt="System Engineering V-Diagram"] {
    filter: none !important; /* new image is already a light-mode figure */
}
/* white screen-blend wash overlay (line 7843) — on light this would lift
   the image to near-white; neutralize it. */
html.light-mode .arca-image-holder > div[aria-hidden="true"][style*="rgba(255, 255, 255, 0.08)"] {
    background: none !important;
    mix-blend-mode: normal !important;
}
/* trapezoid interior tint (line 7872) — faint purple, reads fine; keep.
   Rotating rainbow stroke is decorative-structural; keep as-is. */

/* NASA source link (line 7890) — tertiary text on light */
html.light-mode .arca-source-link-desktop[style*="color: var(--text-tertiary)"] {
    color: #6e6e73 !important;
}

/* ───────────────────────────────────────────────────────────────
   .arca-bullet-box / .arca-bullet-title — lines 7926–7927
   bullet box uses var(--bg-secondary)/var(--border) (handled by var flip
   elsewhere) but title is hard #ffffff -> dark text.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .arca-bullet-box {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
html.light-mode .arca-bullet-title {
    color: #1d1d1f !important;
}
html.light-mode #autonomous-root-cause .security-point div[style*="var(--text-tertiary)"] {
    color: #6e6e73 !important;
}

/* ───────────────────────────────────────────────────────────────
   DAY-MODE 3-BULLET CARD HARMONIZATION (owner directive 2026-08-13):
   in light mode every bullet copy card — hero/HIL, spec→tests, power,
   timing, protocol, security, ARCA — carries the ARCA card's exact
   white recipe (#ffffff, #d2d2d7 hairline, soft neutral shadow), both
   trees. Desktop: one rule covers all six .security-copy cards (the
   class exists only in the desktop tree); mobile cards are inline-
   styled and get per-section [style*=] rules in the mobile slices
   below. Keep all of these in lockstep with .arca-bullet-box above.
   ─────────────────────────────────────────────────────────────── */
html.light-mode .security-copy {
    background: #ffffff;
    border-color: #d2d2d7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

/* ───────────────────────────────────────────────────────────────
   #how-it-works / .cursor-demo section opening — lines 7937–7938
   inline bg #0C0A10 (start of next section, present in this slice)
   ─────────────────────────────────────────────────────────────── */
html.light-mode .cursor-demo[style*="background: #0C0A10"] {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* ---------------------------------------------------------------------------
   SECTION SURFACES (#how-it-works .cursor-demo + ts-comparison) -> light
   The .cursor-demo section inline bg #0C0A10 lives on line 7938 (just above this
   slice); the ts-comparison inline bg #0C0A10 (line 8257) IS in-range.
--------------------------------------------------------------------------- */
html.light-mode section.cursor-demo#how-it-works {
    background: #ffffff !important;
    border-top-color: #d2d2d7 !important;
}
html.light-mode section#ts-comparison.ts-comparison-root[style*="#0C0A10"] {
    background: #f9f7fd !important;
    border-top-color: #d2d2d7 !important;
}

/* ---------------------------------------------------------------------------
   INTEGRATION CARDS — inline bg rgba(22, 22, 24, 0.6) -> white card
--------------------------------------------------------------------------- */
html.light-mode .integration-card[style*="rgba(22, 22, 24, 0.6)"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* Group-label header hairlines: rgba(255,255,255,0.15) -> hairline */
html.light-mode .container [style*="border-bottom: 1px solid rgba(255, 255, 255, 0.15)"] {
    border-bottom-color: #d2d2d7 !important;
}

/* Vertical separators (LLM/IDE, IDE/OS): rgba(255,255,255,0.2) -> hairline fill */
html.light-mode .container [style*="width: 3px"][style*="rgba(255, 255, 255, 0.2)"] {
    background: #d2d2d7 !important;
}

/* Mac (Apple) SVG glyph — white fill -> primary dark so it reads on white */
html.light-mode .integration-card svg[fill="white"] path {
    fill: #1d1d1f !important;
}
html.light-mode .integration-card svg[fill="white"] {
    fill: #1d1d1f !important;
}
/* Windows logo is a colored brand mark (#00ADEF) and reads on white — left as-is. */

/* ---------------------------------------------------------------------------
   GLASS DEMO CONTAINER — bg rgba(0,0,0,0.3) + rgba(255,255,255,0.1) border
--------------------------------------------------------------------------- */
html.light-mode [style*="background: rgba(0, 0, 0, 0.3)"][style*="backdrop-filter: blur(10px)"] {
    background: #f5f5f7 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* ---------------------------------------------------------------------------
   DEMO TABS — white text on transparent/translucent; active = purple tint
--------------------------------------------------------------------------- */
html.light-mode .demo-tab {
    color: #1d1d1f !important;
}
html.light-mode .demo-tab.active[style*="rgba(94, 106, 210, 0.1)"] {
    background: rgba(109,64,207,0.10) !important;
    border-color: #6d28d9 !important;
    color: #6d28d9 !important;
}
html.light-mode .demo-tab[style*="background: transparent"] {
    background: transparent !important;
    border-color: #d2d2d7 !important;
    color: #1d1d1f !important;
}

/* ---------------------------------------------------------------------------
   CURSOR WINDOW chrome (defined elsewhere; only re-theme to be safe via class)
--------------------------------------------------------------------------- */
html.light-mode .cursor-window {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    /* purple halo: exact dark-mode glow layers over the light neutral drop */
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.18), 0 0 23px rgba(147, 51, 234, 0.33), 0 0 46px rgba(147, 51, 234, 0.17) !important;
}
html.light-mode .window-header {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}
html.light-mode .window-title,
html.light-mode .window-title span {
    color: #1d1d1f !important;
}
/* Cursor "dark" wordmark png in the header — recolor white/dark mark to black */
html.light-mode .window-title img[src*="dark/cursor"] {
    filter: brightness(0) !important;
}

/* ---------------------------------------------------------------------------
   CODE EDITOR — VS Code DARK -> LIGHT theme
--------------------------------------------------------------------------- */
html.light-mode .editor-container {
    background: #ffffff !important;
}
html.light-mode .code-editor {
    background: #ffffff !important;
    color: #000000 !important;
}
/* Gutter / line-number strip: rgba(255,255,255,0.02) -> light grey strip */
html.light-mode .code-editor [style*="background: rgba(255, 255, 255, 0.02)"] {
    background: #f5f5f7 !important;
    border-right: 1px solid #d2d2d7 !important;
    color: #6e6e73 !important;
}

/* Plain code text container -> black */
html.light-mode #codeContent {
    color: #000000 !important;
}
/* Comment lines use var(--text-tertiary): re-color to VS Code light comment green */
html.light-mode #codeContent > div[style*="color: var(--text-tertiary)"] {
    color: #008000 !important;
}

/* Syntax token remap (inline color:) — applies in #codeContent and .code-suggestion */
html.light-mode #codeContent span[style*="#c586c0"],
html.light-mode .code-suggestion span[style*="#c586c0"] {
    color: #af00db !important;            /* keyword */
}
html.light-mode #codeContent span[style*="#ce9178"],
html.light-mode .code-suggestion span[style*="#ce9178"] {
    color: #a31515 !important;            /* string */
}
html.light-mode #codeContent span[style*="#b5cea8"],
html.light-mode .code-suggestion span[style*="#b5cea8"] {
    color: #098658 !important;            /* number/constant */
}
html.light-mode #codeContent span[style*="#dcdcaa"],
html.light-mode .code-suggestion span[style*="#dcdcaa"] {
    color: #795e26 !important;            /* function */
}
html.light-mode #codeContent span[style*="#9cdcfe"],
html.light-mode .code-suggestion span[style*="#9cdcfe"] {
    color: #001080 !important;            /* variable/param/property */
}
html.light-mode #codeContent span[style*="#4ec9b0"],
html.light-mode .code-suggestion span[style*="#4ec9b0"] {
    color: #267f99 !important;            /* type/class */
}
/* var(--accent-light) used as a keyword/type color in code -> VS Code light type */
html.light-mode #codeContent span[style*="color: var(--accent-light)"] {
    color: #0000ff !important;            /* storage/type keyword */
}

/* ---------------------------------------------------------------------------
   INLINE WARNING chip — amber on dark -> amber-on-light readable
--------------------------------------------------------------------------- */
html.light-mode #inlineWarning [style*="rgba(251, 191, 36, 0.1)"] {
    background: rgba(180, 83, 9, 0.08) !important;
    border-left: 2px solid #b45309 !important;
    color: #b45309 !important;
}

/* ---------------------------------------------------------------------------
   AI PANEL
--------------------------------------------------------------------------- */
html.light-mode .ai-panel {
    background: #f5f5f7 !important;
    border-left: 1px solid #d2d2d7 !important;
}
html.light-mode .ai-header,
html.light-mode .ai-title {
    color: #1d1d1f !important;
}
/* "Testing" green status pill */
html.light-mode .ai-header [style*="rgba(34, 197, 94, 0.1)"] {
    background: rgba(22,163,74,0.10) !important;
    color: #15803d !important;
}
/* Context card */
html.light-mode .context-card {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode .context-title,
html.light-mode .context-items {
    color: #515154 !important;
}
html.light-mode .context-items span[style*="color: var(--text-primary)"] {
    color: #1d1d1f !important;
}
/* Test Strategy green callout (rgba(34,197,94,0.1) bg + #22c55e border + #fff text) */
html.light-mode .ai-panel [style*="rgba(34, 197, 94, 0.1)"][style*="border: 1px solid #22c55e"] {
    background: rgba(22,163,74,0.08) !important;
    border: 1px solid #16a34a !important;
}
html.light-mode .ai-panel [style*="rgba(34, 197, 94, 0.1)"][style*="border: 1px solid #22c55e"] [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}
/* Suggestion card + bullet labels */
html.light-mode .suggestion-card {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode .suggestion-text {
    color: #515154 !important;
}
html.light-mode .suggestion-text strong {
    color: #1d1d1f !important;
}
html.light-mode .suggestion-text span[style*="#22c55e"] {
    color: #15803d !important;
}

/* Code-suggestion block + its copy button + comment line */
html.light-mode .code-suggestion {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    color: #000000 !important;
}
html.light-mode .code-suggestion button[style*="background: var(--bg-tertiary)"] {
    background: #ececef !important;
    border: 1px solid #d2d2d7 !important;
    color: #515154 !important;
}
html.light-mode .code-suggestion > div[style*="color: var(--text-tertiary)"] {
    color: #008000 !important;            /* comment */
}

/* Apply / Run-Tests / Continue-investigation primary buttons: the light
   Get-Started purple with black text (2026-07-30, owner — was #6d28d9/white,
   "too dark" next to the recolored CTAs); hover matches the CTA hover */
html.light-mode .apply-btn {
    background: #c4b5fd !important;
    color: #000000 !important;
    border: 1px solid #c4b5fd !important;
}
html.light-mode .apply-btn:hover {
    background: #b7a2fb !important;
}
html.light-mode .ai-panel button[style*="background: transparent"][style*="color: var(--text-primary)"] {
    background: transparent !important;
    color: #1d1d1f !important;
    border: 1px solid #d2d2d7 !important;
}

/* Test Resources links: var(--bg-secondary) chips */
html.light-mode .ai-panel a[style*="background: var(--bg-secondary)"] {
    background: #f5f5f7 !important;
    color: #515154 !important;
}
html.light-mode .ai-panel [style*="border-top: 1px solid var(--border)"] {
    border-top-color: #d2d2d7 !important;
}

/* ---------------------------------------------------------------------------
   STATUS BAR
--------------------------------------------------------------------------- */
html.light-mode .status-bar {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7 !important;
    color: #515154 !important;
}
html.light-mode .status-item,
html.light-mode .status-item span {
    color: #515154 !important;
}
html.light-mode .status-item span[style*="color: var(--text-tertiary)"] {
    color: #6e6e73 !important;
}

/* ---------------------------------------------------------------------------
   "WORKS WITH YOUR EQUIPMENT" heading — clip-text white->grey gradient -> solid dark
--------------------------------------------------------------------------- */
html.light-mode h3[style*="linear-gradient(to bottom, #ffffff 0%, #999999 100%)"] {
    background: none !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color: #1d1d1f !important;
}

/* ---------------------------------------------------------------------------
   EQUIPMENT LOGO BADGES (.llm-badge) -> light tiles
--------------------------------------------------------------------------- */
html.light-mode .llm-badge {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
html.light-mode .llm-badge span {
    color: #1d1d1f !important;
}
/* Saleae logo is forced white via filter: invert(1); drop the invert -> render dark mark */
html.light-mode .llm-badge img[alt="Saleae"][style*="invert(1)"] {
    filter: none !important;
}

/* "Don't see your equipment listed?" — white text -> dark */
html.light-mode [style*="font-size: 14px"][style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* ---------------------------------------------------------------------------
   ts-comparison glow div (line 8258) is background:transparent already — no-op,
   but neutralize any decorative glow defensively.
--------------------------------------------------------------------------- */
html.light-mode #ts-comparison > div[aria-hidden="true"][style*="transparent"] {
    background: none !important;
}


/* ── GLOW / HALO KEYFRAMES & ANIMATION RULES (lines 8390-9108) ──────────────
   These keyframes emit purple/rainbow/colored box-shadows (glows) and a
   colored heroImage drop-shadow. In light mode every glow must be removed.
   We neutralize the animation-bearing classes directly (keyframes themselves
   can't be re-targeted, but the elements that run them can). All concrete
   selectors defined in this <style> block are re-themed below. */



/* lightBeam hover glow carrier (lines 8697-8703) -> no colored beam */
html.light-mode .light-beam-glow:hover {
  animation: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* demo-tab active / hover (lines 8705-8730) — dark fills, white text, purple glow */
html.light-mode .demo-tab.active {
  background: rgba(109,64,207,0.10) !important;
  border-color: #6d28d9 !important;
  color: #1d1d1f !important;
}
html.light-mode .demo-tab:hover {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}



/* pro-tier-glow surface (lines 8990-8998): dark #1e1a2e fill + purple border +
   backdrop blur -> white card with hairline border */
html.light-mode .pro-tier-glow {
  background: #ffffff !important;
  border: 1px solid #d2d2d7 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* the ::after dark inset (rgba(22,22,24,0.95), line 8790) is already display:none
   per lines 9000-9004, but neutralize its fill defensively */
html.light-mode .pro-tier-glow::after {
  background: #ffffff !important;
}
/* the conic rainbow ::before (lines 8761-8781) is display:none per 9000-9004;
   neutralize its colored fill defensively */
html.light-mode .pro-tier-glow::before {
  background: none !important;
  opacity: 0 !important;
}
html.light-mode .pro-tier-inner {
  background: transparent !important;
}

/* rainbow-border-box (lines 8833-8875): rotating conic rainbow ::before over a
   near-black rgba(15,15,15,0.95) inset ::after -> neutralize both */
html.light-mode .rainbow-border-box::before {
  background: none !important;
  opacity: 0 !important;
  animation: none !important;
}
html.light-mode .rainbow-border-box::after {
  background: #ffffff !important;
}



/* setup-flow-line (lines 9022-9035): low-alpha purple bar with triple purple
   glow box-shadow -> flat hairline, no glow */
html.light-mode .setup-flow-line {
  background: rgba(109,64,207,0.18) !important;
  box-shadow: none !important;
}
/* its animated sweep ::after (lines 9037-9055) carries purple glow + gradient */
html.light-mode .setup-flow-line::after {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(109,64,207,0.25) 20%,
      rgba(124,102,220,0.40) 50%,
      rgba(109,64,207,0.25) 80%,
      transparent 100%) !important;
  box-shadow: none !important;
}

/* ── SECURITY & PRIVACY SECTION (lines 9111-9116) ───────────────────────────
   Section opens here with an inline dark background and a (currently
   transparent) absolutely-positioned glow holder div. Re-theme the dark
   section bg to white; neutralize the glow holder defensively. */
html.light-mode #security-privacy.security-section[style*="#0C0A10"] {
  background: #f9f7fd !important;
  border-top: 1px solid #d2d2d7 !important;
}
/* the 800x800 absolutely-positioned holder div (lines 9114-9116) is
   background:transparent today; force off any halo defensively */
html.light-mode #security-privacy.security-section > div[style*="800px"] {
  background: none !important;
}

/* ============================================================
   #security-privacy
   ============================================================ */

/* Intro white inline text (9126) "Your data never leaves..." */
html.light-mode #security-privacy .security-copy > div[style*="color: #ffffff"]{
    color:#1d1d1f !important;
}

/* Security copy card -> white surface, hairline border, neutral soft shadow */
html.light-mode #security-privacy .security-copy{
    background:#ffffff;
    border:1px solid #d2d2d7;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}

/* security-point bullet dot — keep brand purple fill (small dot, reads on white) */
html.light-mode #security-privacy .security-point > div[style*="color: #8b5cf6"]{
    color:#8b5cf6 !important;
}

/* "your servers" green inline highlight (9163) -> readable green text on white */
html.light-mode #security-privacy .perimeter-label-top span[style*="color: #22c55e"]{
    color:#15803d !important;
}

/* LLM badges — dark chip + near-white text -> white tile, dark text, hairline */
html.light-mode #security-privacy .llm-badge{
    background:#ffffff;
    border:1px solid #d2d2d7;
    color:#1d1d1f;
}
html.light-mode #security-privacy .llm-badge:hover{
    border-color:rgba(0,0,0,0.16);
}

/* Perimeter ring — green halo glow -> flat ring, no glow, no glow animation */
html.light-mode #security-privacy .perimeter-ring{
    border:3px solid #16a34a;
    box-shadow:none;
    animation:none;
}

/* Perimeter core — dark fill + purple border -> light inset, no glow.
   Drop the radial-gradient orb halo + tracing glow (9315). */
html.light-mode #security-privacy .perimeter-core{
    background:#ececef;
    border:2px solid #d2d2d7;
}
html.light-mode #security-privacy .perimeter-core::before{
    background:#8b5cf6;     /* small tracing dot fill kept (reads on light) */
    filter:none;
    box-shadow:none;
}

/* "Your Data" white inline label (9173) inside core -> dark text */
html.light-mode #security-privacy .perimeter-core > div[style*="color: #ffffff"]{
    color:#1d1d1f !important;
}

/* Server rows — dark gradient + inset black shadow -> light inset chip */
html.light-mode #security-privacy .server-row{
    background:#e2e2e6;
    border:1px solid #d2d2d7;
    box-shadow:inset 0 0 4px rgba(0,0,0,0.06);
}
/* Server-row LED — keep purple fill (small dot), drop the glow halo */
html.light-mode #security-privacy .server-row::after{
    background:#8b5cf6;
    box-shadow:0 0 10px rgba(139, 92, 246, 0.8);
}

/* Data pills — purple-on-dark -> light purple tint, readable purple text */
html.light-mode #security-privacy .data-pill{
    color:#6d28d9;
    border:1px solid rgba(109,64,207,0.25);
    background:rgba(139,92,246,0.08);
}

/* Security callout — dark glassy bg + purple glow + white text -> white card */
html.light-mode #security-privacy .security-callout-centered{
    /* subtle transparent purple tint - matches the mobile badge treatment */
    background:rgba(139, 92, 246, 0.08);
    border:1px solid #d2d2d7;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 20px rgba(147, 51, 234, 0.2);
    color:#1d1d1f;
}

/* Green status dot — keep saturated green fill (LED dot), drop glow + animation */
html.light-mode #security-privacy .green-status-dot{
    background:#22c55e;
}

/* ============================================================
   #team
   ============================================================ */

/* Section background dark -> white */
html.light-mode #team[style*="background: #0C0A10"]{
    background:#ffffff !important;
    border-top:1px solid #d2d2d7 !important;
}

/* Section heading clip-text (white->grey gradient) -> solid dark */
html.light-mode #team h2[style*="-webkit-text-fill-color: transparent"]{
    background:none !important;
    -webkit-text-fill-color:#1d1d1f !important;
    color:#1d1d1f !important;
}

/* Team member name clip-text headings -> solid dark */
html.light-mode #team h3[style*="-webkit-text-fill-color: transparent"]{
    background:none !important;
    -webkit-text-fill-color:#1d1d1f !important;
    color:#1d1d1f !important;
}

/* Team photo frames — dark border + heavy black shadow -> hairline + soft shadow */
html.light-mode #team img.team-image[style*="border: 2px solid #1F203A"]{
    border:2px solid #d2d2d7 !important;
    /* faint footer-logo purple halo, light-tuned like the footer's own light variant */
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 10px rgba(88,27,141,0.28), 0 0 22px rgba(88,27,141,0.14) !important;
}

/* Day mode: the headshot rasters bake a black inscribed circle over dark
   corners. Paint ONLY the corner regions light grey via an overlay on the
   link wrapper (the hover scale lives on the wrapper, so the overlay tracks
   it 1:1). The circle, box, borders and every size are untouched; the
   gradient is transparent inside the inscribed circle (measured: the baked
   circle radius equals closest-side exactly). */
html.light-mode #team a.team-image-link {
    position: relative;
}
html.light-mode #team a.team-image-link::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    aspect-ratio: 1 / 1;
    /* 10px = the frame's inner curve (12px radius minus the 2px border);
       anything smaller paints square-ish grey corners that pinch the frame */
    border-radius: 10px;
    background: radial-gradient(circle closest-side at 50% 50%, rgba(232,232,237,0) 98.5%, #e8e8ed 100%);
    pointer-events: none;
}

/* Company badge tiles (Google/Meta/Apple/Amazon) — match the "Backed By" /
   "Part Of" white cards (same bg + border + soft shadow).
   Apple logo is white SVG -> recolor to black so it reads on the light tile. */
html.light-mode #team div[style*="background: rgba(22, 22, 24, 0.6)"]{
    background:#ffffff !important;
    border:1px solid #d2d2d7 !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
html.light-mode #team div[style*="background: rgba(22, 22, 24, 0.6)"] span{
    color:#1d1d1f;
}
/* Apple mark is a pure-white SVG -> recolor to black so it reads on the light
   tile. Selector keys on the self-hosted filename (assets/logo-apple-white.svg);
   keep it in sync if that asset is ever renamed. */
html.light-mode #team img[src*="logo-apple-white.svg"]{
    filter:brightness(0) !important;
}

/* "Backed By" / "Part Of" lockups — dark tint bg + blue border -> white card */
html.light-mode #team .backed-by-box[style*="background: rgba(20, 20, 30, 0.12)"]{
    background:#ffffff !important;
    border:1px solid #d2d2d7 !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
/* "Backed By" / "Part Of" labels (white->grey clip text) -> solid dark */
html.light-mode #team .backed-by-box p[style*="-webkit-text-fill-color: transparent"]{
    background:none !important;
    -webkit-text-fill-color:#1d1d1f !important;
    color:#1d1d1f !important;
}
/* Vertical divider in "Part Of" lockup — white line on dark -> hairline */
html.light-mode #team .backed-by-box div[style*="background: rgba(255, 255, 255, 0.15)"]{
    background:#d2d2d7 !important;
}

/* ============================================================
   #pricing
   ============================================================ */

/* Section background dark -> white */
html.light-mode #pricing[style*="background: #0C0A10"]{
    background:#ffffff !important;
    border-top:1px solid #d2d2d7 !important;
}

/* Pricing card — dark fill #0e0a12 + purple border + glow -> white panel */
html.light-mode #pricing .pricing-card[style*="background: #0e0a12"]{
    background:#ffffff !important;
    border:1px solid #d2d2d7 !important;
}
html.light-mode #pricing .pricing-card.pro-tier-glow{
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* "How We Work With You" eyebrow label (white inline) -> muted dark */
html.light-mode #pricing .pro-tier-inner p[style*="color: #fff"]{
    color:#6e6e73 !important;
}

/* Phase names Demo/Pilot/Scale (white inline) -> primary dark */
html.light-mode #pricing .pro-tier-inner div[style*="color: #fff"]{
    color:#1d1d1f !important;
}

/* Vertical ticks — white-on-dark -> dark hairline */
html.light-mode #pricing div[style*="background: rgba(255, 255, 255, 0.5)"]{
    background:#86868b !important;
}

/* Engagement circles:
   - hollow nodes (dark center #0E0A12 + white ring) -> white center + dark ring
   - filled node (white) -> dark fill so it reads on white */
html.light-mode #pricing div[style*="background: #0E0A12"][style*="border: 4px solid #fff"]{
    background:#ffffff !important;
    border-color:#1d1d1f !important;
}
html.light-mode #pricing div[style*="background: #0E0A12"][style*="border: 8px solid #fff"]{
    background:#ffffff !important;
    border-color:#1d1d1f !important;
}
html.light-mode #pricing div[style*="width: 32px"][style*="background: #fff"]{
    background:#1d1d1f !important;
}

/* Connecting line between nodes — white-on-dark -> dark hairline */
html.light-mode #pricing div[style*="background: rgba(255, 255, 255, 0.95)"]{
    background:#86868b !important;
}

/* Phase descriptions (white .85 alpha) -> secondary dark */
html.light-mode #pricing div[style*="color: rgba(255, 255, 255, 0.85)"]{
    color:#515154 !important;
}

/* (the two BOTH-modes #pricing z-index rules that used to sit here stay inline in index.html — they must apply in dark mode at first paint) */

/* Engagement-timeline beam: node glow rings + traveling beam (filter-free
   HTML divs since 2026-08-04; formerly an svg). Keep the glows in light mode. */
html.light-mode #pricing .hww-glow{
    border-color:#a855f7;   /* keep the blurred soft glow ring */
}
html.light-mode #pricing .hww-orb-el{
    opacity:0.9;      /* keep the soft beam glow (multiplies the fade animation on the inner div) */
}
/* Beam core is already readable purple (#8b5cf6 radial gradient) on white — no override needed */

/* CTA "Schedule a Call" button — dark gradient -> light purple solid, near-black text */
html.light-mode #pricing a.btn-primary[style*="linear-gradient(135deg, #2a1a4d, #1c1237)"]{
    background:#c4b5fd !important;
    border:1px solid #c4b5fd !important;
    color:#1d1d1f !important;
}

/* ============================================================
   Footer
   ============================================================ */

/* Footer background dark -> light-grey surface */
html.light-mode footer[style*="background: #0C0A10"]{
    background:#f5f5f7 !important;
    border-top:1px solid #d2d2d7 !important;
}

/* Footer text spans use var(--text-secondary)/var(--text-tertiary) — flip via vars
   in the global :root override; nothing literal to do here. */

/* Thin dividers between footer rows — white-on-dark -> hairline */
html.light-mode footer div[style*="background: rgba(255, 255, 255, 0.28)"]{
    background:#d2d2d7 !important;
}

/* Social / Ask-AI buttons — transparent w/ low-alpha-white border + dark drop
   shadow -> light chip, hairline border, neutral soft shadow */
html.light-mode footer a.social-btn{
    border:1px solid #d2d2d7 !important;
    box-shadow:0 1px 2px rgba(0,0,0,0.05) !important;
}

/* White-mark monochrome icons (brightness(0) invert(1) -> white) -> black */
html.light-mode footer a.social-btn img[style*="brightness(0) invert(1)"]{
    filter:brightness(0) !important;
}

/* PitchBook icon uses mix-blend-mode:screen to show on dark — that hides it on
   white. Drop the blend and darken so the mark reads on the light chip. */
html.light-mode footer a.social-btn img[style*="mix-blend-mode: screen"]{
    mix-blend-mode:normal !important;
    filter:brightness(0) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   MOBILE HERO SECTION  (line 9901: style="background: #0C0A10")
   Flip the dark hero page background to pure white.
─────────────────────────────────────────────────────────────────────────── */
html.light-mode #mobile-version #landing .hero[style*="#0C0A10"]{
    background:#ffffff !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   HIL LOOP NODE TILES (VS Code / Lab Instruments / Device Under Test)
   line 9919 / 10073 / 10220: dark rgba(22,22,24,0.9) tiles with colored
   border + colored 0 0 40px glow shadow. Flip to white cards, hairline
   border, neutral soft shadow, drop the colored glow & backdrop blur.
─────────────────────────────────────────────────────────────────────────── */
html.light-mode #mobile-version #hardware-loop-mobile div[style*="rgba(22, 22, 24, 0.9)"]{
    background:#f7f7f8 !important;   /* match desktop .hil-node: faint grey, not pure white */
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    /* border-color override removed: the tiles' inline colored borders
       (blue / red / green) now show in day mode, matching night. */
}

/* node caption labels under each tile use var(--text-primary); ensure dark text */
html.light-mode #mobile-version #hardware-loop-mobile div[style*="color: var(--text-primary)"]{
    color:#1d1d1f !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   FIRMWARE EDITOR SVG (id prefix fwqm) — VS Code "screen" node
   Convert dark editor panel to a light VS Code theme: panel #ffffff,
   gutter #f5f5f7, syntax tokens mapped to light, gridlines/borders hairline.
─────────────────────────────────────────────────────────────────────────── */
/* panel & title-bar gradient stops -> light editor surfaces */
html.light-mode #fwqmPanel stop[offset="0"]{ stop-color:#ffffff !important; }
html.light-mode #fwqmPanel stop[offset="1"]{ stop-color:#ffffff !important; }
html.light-mode #fwqmBar stop[offset="0"]{ stop-color:#f5f5f7 !important; }
html.light-mode #fwqmBar stop[offset="1"]{ stop-color:#f5f5f7 !important; }
/* accent chevron gradient -> readable purple-ish blue accent */
html.light-mode #fwqmAccent stop[offset="0"]{ stop-color:#2563eb !important; }
html.light-mode #fwqmAccent stop[offset="1"]{ stop-color:#1d4ed8 !important; }

/* panel outer rect: dark fill via gradient (handled above); stroke -> hairline */
html.light-mode svg[aria-label="Firmware editor typing code"] rect[stroke="#2a3a5c"]{
    stroke:#d2d2d7 !important;
}
/* inner faint white inset stroke -> soft dark hairline */
html.light-mode svg[aria-label="Firmware editor typing code"] rect[stroke="#ffffff"]{
    stroke:#d2d2d7 !important;
    stroke-opacity:0.5 !important;
}
/* title-bar separator line */
html.light-mode svg[aria-label="Firmware editor typing code"] line[stroke="#243250"]{
    stroke:#d2d2d7 !important;
}
/* gutter strip + gutter divider */
html.light-mode svg[aria-label="Firmware editor typing code"] rect[fill="#141d33"]{
    fill:#f5f5f7 !important;
}
html.light-mode svg[aria-label="Firmware editor typing code"] line[stroke="#1c2840"]{
    stroke:#d2d2d7 !important;
}
/* title-bar dim "window" dots */
html.light-mode svg[aria-label="Firmware editor typing code"] circle[fill="#34425f"]{
    fill:#c7c7cc !important;
}
html.light-mode svg[aria-label="Firmware editor typing code"] circle[fill="#2b384f"]{
    fill:#d2d2d7 !important;
}
/* active LED dot + caret: keep a saturated readable blue */
html.light-mode svg[aria-label="Firmware editor typing code"] circle[fill="#62a1ff"]{
    fill:#2563eb !important;
}
/* syntax token classes -> VS Code Light: keyword, var/property, value, gutter, caret */
html.light-mode .fwqmKw{  fill:#0000ff !important; }   /* def/return/set_clk keyword */
html.light-mode .fwqmVar{ fill:#001080 !important; }   /* identifiers / properties */
html.light-mode .fwqmVal{ fill:#000000 !important; }   /* punctuation / plain */
html.light-mode .fwqmGut{ fill:#6e6e73 !important; }   /* line numbers */
html.light-mode .fwqmCaret{ fill:#2563eb !important; } /* caret */

/* ───────────────────────────────────────────────────────────────────────────
   OSCILLOSCOPE SVG (id prefix scpm) — Lab Instruments "screen"
   Owner rule: NO dark screens. Flip screen bg to light inset, recolor
   bezel/gridlines, darken trace red to readable, remove the bloom glow.
─────────────────────────────────────────────────────────────────────────── */
/* screen background radial -> flat light inset */
html.light-mode #scpmScreenBg stop[offset="0%"]{ stop-color:#f5f5f7 !important; }
html.light-mode #scpmScreenBg stop[offset="100%"]{ stop-color:#ececef !important; }
/* bezel gradient -> light grey frame */
html.light-mode #scpmBezel stop[offset="0%"]{ stop-color:#ffffff !important; }
html.light-mode #scpmBezel stop[offset="100%"]{ stop-color:#ececef !important; }
/* vignette overlay: kill the dark bottom + white top sheen */
html.light-mode #scpmVign stop[offset="0%"]{ stop-color:#ffffff !important; stop-opacity:0 !important; }
html.light-mode #scpmVign stop[offset="55%"]{ stop-color:#ffffff !important; stop-opacity:0 !important; }
html.light-mode #scpmVign stop[offset="100%"]{ stop-color:#000000 !important; stop-opacity:0.04 !important; }
/* bezel stroke -> hairline */
html.light-mode svg[aria-label*="Oscilloscope"] rect[stroke="#2a2a2c"]{
    stroke:#d2d2d7 !important;
}
/* graticule grid lines -> hairline, slightly stronger so they read on light */
html.light-mode svg[aria-label*="Oscilloscope"] g[stroke="#9a8c8c"]{
    stroke:#d2d2d7 !important;
}
html.light-mode svg[aria-label*="Oscilloscope"] g[stroke="#9a8c8c"] line{
    stroke-opacity:0.6 !important;
}
/* dashed center crosshair */
html.light-mode svg[aria-label*="Oscilloscope"] g[stroke="#c08a8a"]{
    stroke:#bcbcc2 !important;
    stroke-opacity:0.7 !important;
}
/* red reference baseline + scan line + trigger arrow + dot -> darkened red trace */
html.light-mode svg[aria-label*="Oscilloscope"] path[stroke="#ef4444"]{
    stroke:#dc2626 !important;
}
html.light-mode svg[aria-label*="Oscilloscope"] line[stroke="#ef4444"]{
    stroke:#dc2626 !important;
}
html.light-mode svg[aria-label*="Oscilloscope"] path[fill="#ef4444"]{
    fill:#dc2626 !important;
}
/* primary glowing sine trace: darken & strip the bloom filter */
html.light-mode #scpmWavePath{
    stroke:#dc2626 !important;
}
/* scan dot: drop the blurred halo circle, keep crisp core readable */

html.light-mode svg[aria-label*="Oscilloscope"] .scpmDot circle[fill="#fff5f5"]{
    fill:#dc2626 !important;
}
/* CH1 micro label -> muted dark */
html.light-mode svg[aria-label*="Oscilloscope"] text[fill="#c79a9a"]{
    fill:#6e6e73 !important;
    fill-opacity:0.9 !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   DUT / PCB SVG (id prefix dutm) — Device Under Test "screen"
   This is a green PCB board. Owner rule: no dark screens, everything light.
   Flip the board surface to a light inset, darken traces/flows/labels to
   readable green, remove the green glow blooms.
─────────────────────────────────────────────────────────────────────────── */
/* board radial -> flat light inset (no dark green) */
html.light-mode #dutmBoard stop[offset="0%"]{ stop-color:#f5f5f7 !important; }
html.light-mode #dutmBoard stop[offset="58%"]{ stop-color:#ececef !important; }
html.light-mode #dutmBoard stop[offset="100%"]{ stop-color:#e2e2e6 !important; }
/* chip body gradient -> light grey component */
html.light-mode #dutmChip stop[offset="0%"]{ stop-color:#e2e2e6 !important; }
html.light-mode #dutmChip stop[offset="100%"]{ stop-color:#d2d2d7 !important; }
/* board outer rect stroke + inner inset stroke -> hairline */
html.light-mode svg[aria-label*="Device under test"] rect[stroke="#082c16"]{
    stroke:#d2d2d7 !important;
}
html.light-mode svg[aria-label*="Device under test"] rect[stroke="#3aa862"]{
    stroke:#d2d2d7 !important;
}
/* strip the green bloom filter from board elements that use dutmGlow */

/* static copper traces -> readable green */
html.light-mode .dutmTrace{ stroke:#16a34a !important; opacity:0.45 !important; }
/* animated current flows -> readable green */
html.light-mode .dutmFlow,
html.light-mode .dutmFlowStub{ stroke:#15803d !important; }
/* pad rings */
html.light-mode .dutmPadRing{ fill:#e2e2e6 !important; stroke:#16a34a !important; }
/* flashing nodes (animated via keyframes -> base stroke darkened; LED dot may stay) */
html.light-mode .dutmNode{ fill:#16a34a !important; }
/* silkscreen outlines + reference labels */
html.light-mode .dutmSilk{ stroke:#16a34a !important; opacity:0.5 !important; }
html.light-mode .dutmLabel{ fill:#15803d !important; opacity:0.7 !important; }
/* SMD bodies + capacitors */
html.light-mode .dutmSmd{ fill:#e2e2e6 !important; stroke:#16a34a !important; }
html.light-mode .dutmCap{ fill:#e2e2e6 !important; stroke:#16a34a !important; }
/* metal endcaps */
html.light-mode .dutmEndcap{ fill:#a8a8ad !important; }
/* die corner dots inside chips */
html.light-mode svg[aria-label*="Device under test"] circle[fill="#2a8f50"]{
    fill:#15803d !important;
}
/* chip pin tabs -> mid grey so they read on light */
html.light-mode svg[aria-label*="Device under test"] rect[fill="#9aa79e"]{
    fill:#a8a8ad !important;
}
/* metal connector lead lines */
html.light-mode svg[aria-label*="Device under test"] line[stroke="#7d8a82"]{
    stroke:#a8a8ad !important;
}
/* pin connector stub groups stroked green */
html.light-mode svg[aria-label*="Device under test"] g[stroke="#2c8f51"]{
    stroke:#16a34a !important;
}
/* corner status LED: keep saturated as small indicator dot, drop bloom halo */

/* (LED core keeps url(#dutmLed) green gradient — small dot, reads on white) */

/* ───────────────────────────────────────────────────────────────────────────
   CONNECTING-LINES SVG (the orbit loop)
   line 10423: mobileCircleGlow blur; 10429 glow circle stroke #6d5bb5.
   Remove the blurred glow circle, keep the main ring as a soft accent.
─────────────────────────────────────────────────────────────────────────── */
/* the blurred glow ring (has the filter applied) -> hide it */

/* the main thin ring -> readable purple accent */
html.light-mode #hardware-loop-mobile circle[stroke="#6d5bb5"]{
    stroke:#7c3aed !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   BRAIN CHIP SVG (center of mobile loop)  lines 10476-10594
   Drop the conic-gradient blur halo + drop-shadow blooms; flip the dark
   purple chip body/bevel/die to light grey; recolor text gradient to dark.
─────────────────────────────────────────────────────────────────────────── */
/* soft animated rainbow halo behind the chip -> keep it, matching desktop (.hero-brain-chip glow at line 8607) */

/* the wrapper SVG has filter: drop-shadow(...) inline -> strip the bloom */

/* AssembleAI text node has inline drop-shadow glow -> strip it */


/* chip body gradient stops -> light greys */
html.light-mode #mChipBodyGrad stop[offset="0%"]{ stop-color:#e6e6ec !important; }
html.light-mode #mChipBodyGrad stop[offset="50%"]{ stop-color:#d9d9e0 !important; }
html.light-mode #mChipBodyGrad stop[offset="100%"]{ stop-color:#cccdd4 !important; }
/* bevel gradient stops */
html.light-mode #mChipBevelGrad stop[offset="0%"]{ stop-color:#efeff3 !important; }
html.light-mode #mChipBevelGrad stop[offset="30%"]{ stop-color:#e4e4ea !important; }
html.light-mode #mChipBevelGrad stop[offset="70%"]{ stop-color:#d6d6dd !important; }
html.light-mode #mChipBevelGrad stop[offset="100%"]{ stop-color:#cacad2 !important; }
/* rim gradient stops */
html.light-mode #mChipRimGrad stop[offset="0%"]{ stop-color:#cdced5 !important; }
html.light-mode #mChipRimGrad stop[offset="50%"]{ stop-color:#bfc0c8 !important; }
html.light-mode #mChipRimGrad stop[offset="100%"]{ stop-color:#b2b3bb !important; }
/* pin gradient stops -> mid greys so pins read on light */
html.light-mode #mPinGrad stop[offset="0%"]{ stop-color:#c7c7cc !important; }
html.light-mode #mPinGrad stop[offset="50%"]{ stop-color:#b0b0b5 !important; }
html.light-mode #mPinGrad stop[offset="100%"]{ stop-color:#a3a3a8 !important; }
/* center wordmark text gradient -> solid dark */
html.light-mode #mTextGrad stop[offset="0%"]{ stop-color:#1d1d1f !important; }
html.light-mode #mTextGrad stop[offset="100%"]{ stop-color:#1d1d1f !important; }

/* chip outline strokes -> hairlines */
html.light-mode .hero-brain-chip-mobile rect[stroke="#4a3a6a"]{ stroke:#d2d2d7 !important; }
html.light-mode .hero-brain-chip-mobile rect[stroke="#3a2a5a"]{ stroke:#d2d2d7 !important; }
html.light-mode .hero-brain-chip-mobile rect[stroke="#2d1f4a"]{ stroke:#d2d2d7 !important; }
html.light-mode .hero-brain-chip-mobile rect[stroke="#5a4a8a"]{ stroke:#b6a8d8 !important; }

/* semiconductor die plates (dark purple fills) -> light inset greys */
html.light-mode .hero-brain-chip-mobile rect[fill="#1a1228"]{ fill:#ececef !important; }
html.light-mode .hero-brain-chip-mobile rect[fill="#0f0a18"]{ fill:#e2e2e6 !important; }
html.light-mode .hero-brain-chip-mobile rect[fill="#2a1f3d"]{ fill:#dad3e8 !important; }
html.light-mode .hero-brain-chip-mobile rect[fill="#1f1830"]{ fill:#ececef !important; }
/* die activity dots -> readable purple accent */
html.light-mode .hero-brain-chip-mobile circle[fill="#7a6aaa"]{ fill:#8b5cf6 !important; }
/* tiny lead wires stroked dark purple -> hairline grey */
html.light-mode .hero-brain-chip-mobile g.tiny-wires[stroke="#4a3a6a"]{ stroke:#c7c7cc !important; }
/* pulsing breathing ring stroke (rgba purple, NO spaces in SVG attr) */


/* lead-pulse gradient: white/lavender beads on dark — keep as soft purple
   so they read as faint motion against the now-light chip */


/* ───────────────────────────────────────────────────────────────────────────
   MOBILE HIL CONTENT CARD  (lines 10601-10625)
   uses var(--bg-secondary)/var(--border) (flips via vars) BUT the heading
   text is hardcoded white (#ffffff) and bullets use #8b5cf6. Card itself
   should read as a white panel; give the var-based panel an explicit
   white surface + neutral shadow, dark heading text, darkened bullet dots.
─────────────────────────────────────────────────────────────────────────── */
html.light-mode #hardware-loop-mobile div[style*="background: var(--bg-secondary)"][style*="border-radius: 12px"]{
    background:#ffffff !important;
    border-color:#d2d2d7 !important;
    box-shadow:0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
/* hardcoded white heading inside the card -> dark primary */
html.light-mode #hardware-loop-mobile div[style*="color: #ffffff"]{
    color:#1d1d1f !important;
}
/* purple bullet dots -> keep brand fill but darken slightly for white bg */
html.light-mode #hardware-loop-mobile div[style*="color: #8b5cf6"]{
    color:#7c3aed !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   SPEC → TESTS SECTION (Mobile)  line 10640: background: #0C0A10
   Flip the dark section to alternating light-grey; hairline top border.
   The 800x800 decorative overlay div is already background:transparent —
   leave it; but defensively flatten any radial it might carry.
─────────────────────────────────────────────────────────────────────────── */
html.light-mode #spec-to-tests-mobile{
    background:#ffffff !important;
    border-top-color:#d2d2d7 !important;
}
html.light-mode #spec-to-tests-mobile > div[style*="width: 800px"]{
    background:transparent !important;
}

/* ─────────────────────────────────────────────────────────────
   #spec-to-tests-mobile — Spec → Tests instrument display (screen)
   ───────────────────────────────────────────────────────────── */

/* Instrument "screen" surface: flip dark -> light, kill glow + border-glow anim */
html.light-mode #spec-to-tests-mobile .s2tm-display {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 20px rgba(139, 92, 246, 0.17) !important;
}

/* Screen header strip -> light inset */
html.light-mode #spec-to-tests-mobile .s2tm-display-header {
    background: #ececef !important;
    border-bottom: 1px solid #d2d2d7 !important;
}

html.light-mode #spec-to-tests-mobile .s2tm-display-title {
    color: #515154 !important;
}

/* Purple mono status text -> readable purple-on-white */
html.light-mode #spec-to-tests-mobile .s2tm-status-text {
    color: #6d28d9 !important;
}

/* ─────────────────────────────────────────────────────────────
   Spec → Tests mobile content card + bullets (inline styles)
   ───────────────────────────────────────────────────────────── */

/* "Autonomously creates test cases..." white text -> dark primary.
   This div uses inline color:#ffffff; target the content card's intro line. */
html.light-mode #spec-to-tests-mobile + style + * [style*="color: #ffffff"],
html.light-mode #spec-to-tests-mobile [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* Purple bullet dots stay as a small brand fill (#8b5cf6) — readable on white, leave. */

/* ─────────────────────────────────────────────────────────────
   Bottom callout chip — dark glass chip w/ purple glow + white text
   (lines 10834-10838)  rgba(30, 26, 46, 1) inline
   ───────────────────────────────────────────────────────────── */
html.light-mode [style*="rgba(30, 26, 46, 1)"] {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 20px rgba(147, 51, 234, 0.2) !important;
    color: #1d1d1f !important;
}
/* Rainbow glow wrapper halo: identical to dark (hueShift + rainbowGlowStrength
   cascade through untouched for glow parity) */
/* Green LED dot keeps a saturated readable green, drop its glow shadow */


/* ─────────────────────────────────────────────────────────────
   #power-optimization-mobile — section + profiler instrument screen
   ───────────────────────────────────────────────────────────── */

/* Section background #0C0A10 -> alternating light fill */
html.light-mode #power-optimization-mobile {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Section title / subhead inline white text -> dark */
html.light-mode #power-optimization-mobile h2 {
    color: #1d1d1f !important;
}
html.light-mode #power-optimization-mobile [style*="color:#ffffff"],
html.light-mode #power-optimization-mobile [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* Power Profiler "screen" panel: dark -> light inset.
   The panel uses inline background rgba(10, 10, 14, 0.95). */
html.light-mode #power-optimization-mobile [style*="rgba(10, 10, 14, 0.95)"] {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7;
}
/* Profiler header strip rgba(20, 20, 24, 0.95) -> deeper inset */
html.light-mode #power-optimization-mobile [style*="rgba(20, 20, 24, 0.95)"] {
    background: #ececef !important;
    border-bottom: 1px solid #d2d2d7 !important;
}
/* Metrics bar footer rgba(15, 15, 20, 0.6) -> light inset */
html.light-mode #power-optimization-mobile [style*="rgba(15, 15, 20, 0.6)"] {
    background: #ececef !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* ── Profiler SVG: gridlines, glows, overlays, traces ── */

/* Gridlines (white-on-dark) -> hairline grey */
html.light-mode #power-optimization-mobile line[stroke="rgba(255,255,255,0.04)"],
html.light-mode #power-optimization-mobile line[stroke="rgba(255,255,255,0.06)"] {
    stroke: #d2d2d7 !important;
}

/* Trace glow filters — neutralize the bloom (structural feMerge -> keep geometry, remove halo)
   We can't easily strip the filter attr; instead drop the filter via CSS on the paths. */

/* Trace stroke colors darkened to readable variants on light */
html.light-mode #power-optimization-mobile .pwr-trace-regression {
    stroke: #dc2626 !important;
}
html.light-mode #power-optimization-mobile .pwr-trace-fix {
    stroke: #16a34a !important;
}

/* MEASURING (baseline) overlay — amber tints on light */
html.light-mode #power-optimization-mobile .pwr-measuring-overlay rect[fill="rgba(234, 179, 8, 0.05)"] {
    fill: rgba(234, 179, 8, 0.10) !important;
}
html.light-mode #power-optimization-mobile .pwr-measuring-overlay rect[fill="rgba(234, 179, 8, 0.08)"] {
    fill: rgba(234, 179, 8, 0.14) !important;
    stroke: rgba(180, 83, 9, 0.35) !important;
}
html.light-mode #power-optimization-mobile .pwr-measuring-overlay rect[stroke="rgba(234, 179, 8, 0.2)"] {
    stroke: rgba(180, 83, 9, 0.35) !important;
}
html.light-mode #power-optimization-mobile .pwr-measuring-overlay text[fill="rgba(234, 179, 8, 0.8)"] {
    fill: #b45309 !important;
}
html.light-mode #power-optimization-mobile .pwr-measuring-overlay text[fill="rgba(234, 179, 8, 0.4)"] {
    fill: #6e6e73 !important;
}

/* Diagnosis overlay — dark panel rgba(10,10,20,0.92) -> light, recolor inner text */
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay rect[fill="rgba(10,10,20,0.92)"] {
    fill: #ffffff !important;
    stroke: #d2d2d7 !important;
}
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay line[stroke="rgba(59,130,246,0.15)"] {
    stroke: #d2d2d7 !important;
}
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay text[fill="rgba(59,130,246,0.9)"] {
    fill: #2563eb !important;
}
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay text[fill="rgba(239,68,68,0.8)"] {
    fill: #dc2626 !important;
}
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay text[fill="rgba(34,197,94,0.9)"] {
    fill: #16a34a !important;
}
/* white-on-dark descriptive text in diagnosis overlay -> muted dark */
html.light-mode #power-optimization-mobile .pwr-diagnosis-overlay text[fill="rgba(255,255,255,0.5)"] {
    fill: #6e6e73 !important;
}

/* ── Phase labels (below chart) ── */
html.light-mode #power-optimization-mobile .pwr-phase-label {
    color: #515154 !important;
}
/* Phase-label status glyph colors (inline) darkened where used as text accents.
   Amber dot, red warn, blue, green check — recolor for contrast on white. */
html.light-mode #power-optimization-mobile .pwr-phase-label [style*="color: #eab308"] {
    color: #b45309 !important;
}
html.light-mode #power-optimization-mobile .pwr-phase-label [style*="color: #ef4444"] {
    color: #dc2626 !important;
}
html.light-mode #power-optimization-mobile .pwr-phase-label [style*="color: #3b82f6"] {
    color: #2563eb !important;
}
html.light-mode #power-optimization-mobile .pwr-phase-label [style*="color: #22c55e"] {
    color: #15803d !important;
}

/* ── Metrics bar values (inline colored mono text) -> readable variants ── */
html.light-mode #power-optimization-mobile .pwr-metric-set [style*="color: #eab308"] {
    color: #b45309 !important;
}
html.light-mode #power-optimization-mobile .pwr-metric-set [style*="color: #ef4444"] {
    color: #dc2626 !important;
}
html.light-mode #power-optimization-mobile .pwr-metric-set [style*="color: #3b82f6"] {
    color: #2563eb !important;
}
html.light-mode #power-optimization-mobile .pwr-metric-set [style*="color: #22c55e"] {
    color: #15803d !important;
}
/* metric divider borders use var(--border) -> handled by var flip globally */

/* Power content card intro white text -> dark (covered by #ffffff rule above,
   but the card bg uses var(--bg-secondary) which flips via vars). */

/* ─────────────────────────────────────────────────────────────
   #timing-verification-mobile — section start (DUT + Scope begins here)
   ───────────────────────────────────────────────────────────── */

/* Section background #0C0A10 -> page white (alternates after the f5 above) */
html.light-mode #timing-verification-mobile {
    background: #ffffff !important;
}
/* Section subhead inline white text -> dark */
html.light-mode #timing-verification-mobile [style*="color:#ffffff"],
html.light-mode #timing-verification-mobile [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* ============================================================================
   TIMING VERIFICATION (MOBILE) — DUT box + Oscilloscope screen
   ============================================================================ */

/* --- DUT Box (mobile timing) #mTmgDutBox — dark card -> white panel, kill glow --- */
html.light-mode #mTmgDutBox {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 10px rgba(139,92,246,0.10) !important;
}
/* DUT header strip (rgba(20,20,24,0.95)) -> light inset */
html.light-mode #mTmgDutBox > div:first-child {
    background: #f5f5f7 !important;
    border-bottom-color: #d2d2d7 !important;
}

/* DUT PCB SVG: flip the dark board substrate to a light-grey "screen", and
   darken the copper traces / silkscreen text so they read on light.
   The brightness(1.3) filter would blow out a light board, so neutralize it. */
html.light-mode #mTmgDutBox svg { filter: none !important; }
/* board substrate fills — canonical .tmg-dut-svg palette (matches desktop timing/power) */
html.light-mode #mTmgDutBox svg rect[fill^="rgba(12, 12, 16"] {
    fill: #ececef !important;
}
html.light-mode #mTmgDutBox svg rect[fill^="rgba(18,18,24"] {
    fill: rgba(0, 0, 0, 0.03) !important;
}
/* connector / SWD housings */
html.light-mode #mTmgDutBox svg rect[fill^="rgba(16,16,20"],
html.light-mode #mTmgDutBox svg rect[fill^="rgba(25,25,30"],
html.light-mode #mTmgDutBox svg rect[fill^="rgba(28,28,32"] {
    fill: #e2e2e6 !important;
}
/* USB-C shell + inner slot */
html.light-mode #mTmgDutBox svg rect[fill^="rgba(55,55,60"] { fill: #d2d2d7 !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(38,38,42"] { fill: #b4b4bb !important; }
/* via / pad / mounting-hole dark dots (rgba(8,8,12,0.95)) -> mid grey */
html.light-mode #mTmgDutBox svg circle[fill="rgba(8,8,12,0.95)"] { fill: #c7c7cc !important; }
/* board outline / inner-frame thin strokes (white-on-dark) -> hairline */
html.light-mode #mTmgDutBox svg rect[stroke^="rgba(255,255,255"],
html.light-mode #mTmgDutBox svg circle[stroke^="rgba(255,255,255"] { stroke: #d2d2d7 !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(255,255,255"],
html.light-mode #mTmgDutBox svg circle[fill^="rgba(255,255,255"] { fill: #c7c7cc !important; }
/* IC body chips: white with dark hairline (matches desktop boards); pin-1 dot readable */
html.light-mode #mTmgDutBox svg rect[fill="rgba(16,16,20,0.97)"] { fill: #ffffff !important; stroke: rgba(0, 0, 0, 0.16) !important; }
html.light-mode #mTmgDutBox svg circle[fill="rgba(255,255,255,0.12)"] { fill: #86868b !important; }
/* copper traces / pads / silkscreen amber (rgba(180,140,60,*)) -> canonical darker gold */
html.light-mode #mTmgDutBox svg line[stroke^="rgba(180,140,60"],
html.light-mode #mTmgDutBox svg path[stroke^="rgba(180,140,60"],
html.light-mode #mTmgDutBox svg circle[stroke^="rgba(180,140,60"] { stroke: rgba(146, 110, 30, 0.75) !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(180,140,60"],
html.light-mode #mTmgDutBox svg circle[fill^="rgba(180,140,60"] { fill: rgba(146, 110, 30, 0.70) !important; }
/* chip silkscreen labels (white-on-dark text) -> muted dark */
html.light-mode #mTmgDutBox svg text[fill^="rgba(255,255,255"] { fill: #6e6e73 !important; }
/* passive caps/resistors/inductors warm-brown fills -> canonical readable tans */
html.light-mode #mTmgDutBox svg rect[fill^="rgba(60,50,30"] { fill: rgba(120, 100, 60, 0.45) !important; stroke: rgba(146, 110, 30, 0.25) !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(55,45,35"] { fill: rgba(120, 95, 60, 0.45) !important; stroke: rgba(146, 110, 30, 0.25) !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(50,45,35"] { fill: rgba(120, 100, 60, 0.42) !important; stroke: rgba(146, 110, 30, 0.28) !important; }
html.light-mode #mTmgDutBox svg rect[fill^="rgba(40,35,25"] { fill: rgba(110, 90, 55, 0.45) !important; stroke: rgba(146, 110, 30, 0.28) !important; }
/* light-grey crystal/connector fills (rgba(200,200,210,*)) -> light tile w/ readable border */
html.light-mode #mTmgDutBox svg rect[fill^="rgba(200,200,210"] { fill: #e2e2e6 !important; stroke: rgba(0, 0, 0, 0.12) !important; }
/* amber test-point ring kept readable (same hue/alpha as desktop boards) */
html.light-mode #mTmgDutBox svg circle[stroke="rgba(245,158,11,0.45)"] { stroke: rgba(180, 83, 9, 0.55) !important; }
html.light-mode #mTmgDutBox svg circle[fill="rgba(245,158,11,0.60)"] { fill: rgba(180, 83, 9, 0.85) !important; }
/* LED indicator dots: keep saturated status hues (small dots read on white) */

/* --- Oscilloscope display (mobile) #scopeDisplayMobile --- */
html.light-mode #scopeDisplayMobile {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
/* scope header bar (rgba(20,20,24,0.95)) */
html.light-mode #scopeDisplayMobile > div:first-child {
    background: #f5f5f7 !important;
    border-bottom-color: #d2d2d7 !important;
}
/* Scope "screen" SVG: dark green CRT -> light-grey screen. Owner requires NO dark screens. */
html.light-mode #scopeDisplayMobile svg rect[fill="rgba(3, 12, 8, 0.97)"] { fill: #f5f5f7 !important; }
/* graticule gridlines (green-tinted low alpha) -> hairline grey */
html.light-mode #scopeDisplayMobile svg line[stroke^="rgba(80,180,120"] { stroke: #d2d2d7 !important; }
/* CRT scanline pattern overlay rects -> neutralize (no dark banding on light) */
html.light-mode #mScopeScanlines rect[fill="rgba(0,0,0,0.06)"] { fill: rgba(0,0,0,0) !important; }
/* scope glow filters bloom on traces — neutralize the blur halos */

/* spec trace cyan -> darkened cyan readable on light */
html.light-mode #mScopeSpecTrace { stroke: #0e7490 !important; }
/* error trace red kept but use contrast red */
html.light-mode #mScopeErrorTrace { stroke: #dc2626 !important; }
/* fix trace green -> contrast green */
html.light-mode #mScopeFixTrace { stroke: #16a34a !important; }
/* trigger arrow amber -> contrast amber */
html.light-mode #scopeDisplayMobile svg polygon[fill="rgba(234,179,8,0.55)"] { fill: #b45309 !important; }
/* error annotation box / label / arrow (red, on light) */
html.light-mode #mScopeErrBox { stroke: #dc2626 !important; }
html.light-mode #mScopeErrLabel { fill: #dc2626 !important; }
html.light-mode #mScopeErrArrow { stroke: #dc2626 !important; }
/* Capturing overlay: amber tints -> light fills + contrast amber text */
html.light-mode #mScopeCaptureOverlay rect[fill="rgba(234,179,8,0.04)"] { fill: rgba(180,83,9,0.06) !important; }
html.light-mode #mScopeCaptureOverlay rect[fill="rgba(234,179,8,0.07)"] { fill: #f5f5f7 !important; stroke: #d2d2d7 !important; }
html.light-mode #mScopeCaptureOverlay text[fill="rgba(234,179,8,0.80)"] { fill: #b45309 !important; }
html.light-mode #mScopeCaptureOverlay text[fill="rgba(234,179,8,0.40)"] { fill: #6e6e73 !important; }
/* Analysis overlay: dark panel rgba(10,10,20,0.95) -> light, purple frame kept readable */
html.light-mode #mScopeAnalysisOverlay rect[fill="rgba(10,10,20,0.95)"] { fill: #ffffff !important; stroke: #d2d2d7 !important; }
html.light-mode #mScopeAnalysisOverlay line[stroke="rgba(139,92,246,0.20)"] { stroke: #d2d2d7 !important; }
html.light-mode #mScopeAnalysisOverlay text[fill="rgba(139,92,246,0.95)"] { fill: #6d28d9 !important; }
html.light-mode #mScopeAnalysisOverlay text[fill="rgba(139,92,246,0.50)"] { fill: #7c3aed !important; }
html.light-mode #mScopeAnalysisCode[fill="rgba(239,68,68,0.65)"] { fill: #dc2626 !important; }
html.light-mode #mScopeAnalysisFix[fill="rgba(34,197,94,0.90)"] { fill: #16a34a !important; }
/* analysis desc white-on-dark text -> muted dark */
html.light-mode #mScopeAnalysisDesc[fill="rgba(255,255,255,0.50)"],
html.light-mode #mScopeAnalysisFixDesc[fill="rgba(255,255,255,0.50)"] { fill: #6e6e73 !important; }
/* scope footer info text: CH1 amber / white-on-dark labels / Trig'd amber */
html.light-mode #scopeDisplayMobile svg text[fill="rgba(245,158,11,0.60)"] { fill: #b45309 !important; }
html.light-mode #scopeDisplayMobile svg text[fill="rgba(255,255,255,0.28)"] { fill: #6e6e73 !important; }
html.light-mode #scopeDisplayMobile svg text[fill="rgba(234,179,8,0.45)"] { fill: #b45309 !important; }
/* Metrics bar dark fill rgba(15,15,20,0.6) -> light inset */
html.light-mode #scopeDisplayMobile > div:last-child {
    background: #f5f5f7 !important;
    border-top-color: #d2d2d7 !important;
}
html.light-mode #scopeDisplayMobile > div:last-child > div { border-right-color: #d2d2d7 !important; }
/* scope status dot amber glow -> drop the halo (dot fill stays saturated, small) */

html.light-mode #mScopeStatusText { color: #b45309 !important; }

/* --- Mobile beams (purple wires) #timing-verification-mobile lead wires --- */
/* purple beam strokes + glow filter -> drop glow, keep a soft purple line */
html.light-mode #timing-verification-mobile path[stroke="rgba(139,92,246,0.45)"] { stroke: rgba(91, 33, 182, 0.28) !important; }

/* white/lilac moving-lead gradient stops -> tone to readable purple on light so the spark isn't an invisible white blob */
html.light-mode #mTmgLeadGrad stop[stop-color="#ffffff"] { stop-color: #6d28d9 !important; }
html.light-mode #mTmgLeadGrad stop[stop-color="#e9d5ff"] { stop-color: #7c3aed !important; }
html.light-mode #mTmgLeadGrad stop[stop-color="#c4b5fd"] { stop-color: #7c3aed !important; }

/* --- Mobile AssembleAI divider boxes (timing + protocol share identical markup) --- */
html.light-mode #timing-verification-mobile .rainbow-glow-wrapper > div,
html.light-mode #protocol-debugging-mobile .rainbow-glow-wrapper > div {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
/* "AssembleAI" wordmark white-on-dark -> dark primary */
html.light-mode #timing-verification-mobile .rainbow-glow-wrapper > div > div[style*="rgba(255, 255, 255, 0.90)"],
html.light-mode #protocol-debugging-mobile .rainbow-glow-wrapper > div > div[style*="rgba(255, 255, 255, 0.90)"] { color: #1d1d1f !important; }
/* vertical divider hairline (white low-alpha) -> grey */
html.light-mode #timing-verification-mobile .rainbow-glow-wrapper > div > div[style*="background: rgba(255,255,255,0.10)"] { background: rgba(0, 0, 0, 0.10) !important; }
html.light-mode #protocol-debugging-mobile .rainbow-glow-wrapper > div > div[style*="background: rgba(255,255,255,0.10)"] { background: #d2d2d7 !important; }
/* AI status dots: drop colored glow halo (dot fill stays) */

html.light-mode #mTmgAiStatusText { color: #6e6e73 !important; }

/* --- Mobile Timing Content card (var-based bg-secondary) — heading + bullets ---
   white recipe: day-mode 3-bullet cards all match .arca-bullet-box */
html.light-mode #timing-verification-mobile > div > div > div[style*="--bg-secondary"],
html.light-mode #timing-verification-mobile div[style*="background: var(--bg-secondary)"] {
    background: #ffffff !important;
    border-color: #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
/* white heading text in the content card -> dark primary */
html.light-mode #timing-verification-mobile div[style*="color: #ffffff"] { color: #1d1d1f !important; }
/* purple bullet dots: small fill, keep brand purple but use the on-white variant */
html.light-mode #timing-verification-mobile div[style*="color: #8b5cf6"] { color: #6d28d9 !important; }

/* ============================================================================
   PROTOCOL DEBUGGING (MOBILE) — section bg, DUT box, Logic Analyzer screen
   ============================================================================ */

/* section background #0C0A10 -> page white */
html.light-mode #protocol-debugging-mobile { background: #ffffff !important; }
/* section heading white text -> dark */
html.light-mode #protocol-debugging-mobile > .container > div[style*="color:#ffffff"] { color: #1d1d1f !important; }

/* --- Proto DUT Box #mProtoDutBox --- */
html.light-mode #mProtoDutBox {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 10px rgba(139,92,246,0.10) !important;
}
html.light-mode #mProtoDutBox > div:first-of-type {
    background: #f5f5f7 !important;
    border-bottom-color: #d2d2d7 !important;
}
/* SCL/SDA/GND pin dots — drop the colored glow halos, fills stay (small LEDs) */


/* Proto DUT PCB SVG: same treatment as timing DUT (canonical .tmg-dut-svg palette) */
html.light-mode #mProtoDutBox svg { filter: none !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(12, 12, 16"] { fill: #ececef !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(18,18,24"] { fill: rgba(0, 0, 0, 0.03) !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(8,8,12"] { fill: #c7c7cc !important; }
html.light-mode #mProtoDutBox svg rect[stroke^="rgba(255,255,255"],
html.light-mode #mProtoDutBox svg circle[stroke^="rgba(255,255,255"] { stroke: #d2d2d7 !important; }
html.light-mode #mProtoDutBox svg line[stroke^="rgba(255,255,255"] { stroke: #d2d2d7 !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(255,255,255"],
html.light-mode #mProtoDutBox svg circle[fill^="rgba(255,255,255"] { fill: #c7c7cc !important; }
html.light-mode #mProtoDutBox svg rect[fill="rgba(16,16,20,0.97)"] { fill: #ffffff !important; stroke: rgba(0, 0, 0, 0.16) !important; }
html.light-mode #mProtoDutBox svg circle[fill="rgba(8,8,12,0.95)"] { fill: #c7c7cc !important; }
html.light-mode #mProtoDutBox svg circle[fill="rgba(255,255,255,0.12)"] { fill: #86868b !important; }
html.light-mode #mProtoDutBox svg line[stroke^="rgba(180,140,60"],
html.light-mode #mProtoDutBox svg circle[stroke^="rgba(180,140,60"] { stroke: rgba(146, 110, 30, 0.75) !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(180,140,60"],
html.light-mode #mProtoDutBox svg circle[fill^="rgba(180,140,60"] { fill: rgba(146, 110, 30, 0.70) !important; }
html.light-mode #mProtoDutBox svg text[fill^="rgba(255,255,255"] { fill: #6e6e73 !important; }
html.light-mode #mProtoDutBox svg rect[fill^="rgba(200,200,210"] { fill: #e2e2e6 !important; stroke: rgba(0, 0, 0, 0.12) !important; }
/* amber test-point rings */
html.light-mode #mProtoDutBox svg circle[stroke="rgba(180,140,60,0.25)"] { stroke: rgba(146, 110, 30, 0.70) !important; }
/* 7-segment display housing #0a0a0c -> light inset screen */
html.light-mode #mProtoDutBox svg rect[fill="#0a0a0c"] { fill: #e2e2e6 !important; }
html.light-mode #mProtoDutBox svg .seg[fill="#1a0505"] { fill: #d2d2d7 !important; }
html.light-mode #mProtoColon circle[fill="#1a0505"] { fill: #d2d2d7 !important; }
/* DUT green LED indicator kept (small dot) */

/* --- Proto wire area (DUT<->LA) wires + beams --- */
/* colored wires: drop the glow halos (keep the saturated line color, it reads as a probe wire) */

/* purple/lilac/white moving-bead gradient -> readable purple on light */
html.light-mode #mProtoWireGrad stop[stop-color="#ffffff"] { stop-color: #6d28d9 !important; }
html.light-mode #mProtoWireGrad stop[stop-color="#e9d5ff"] { stop-color: #7c3aed !important; }
html.light-mode #mProtoWireGrad stop[stop-color="#c4b5fd"] { stop-color: #7c3aed !important; }
html.light-mode #mProtoWireArea div[style*="background:rgba(139,92,246,0.45)"] { background: rgba(91, 33, 182, 0.28) !important; box-shadow: 0 0 9px rgba(91, 33, 182, 0.25) !important; }

/* --- Logic Analyzer Box #mProtoLaBox --- */
html.light-mode #mProtoLaBox {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 10px rgba(139,92,246,0.10) !important;
}
html.light-mode #mProtoLaBox > div:first-of-type {
    background: #f5f5f7 !important;
    border-bottom-color: #d2d2d7 !important;
}
/* LA screen body -> light inset, matching desktop .proto-la-body (#f5f5f7) */
html.light-mode #mProtoLaBox > div:last-of-type {
    background: #f5f5f7 !important;
    border-radius: 0 0 11px 11px !important;
}
/* LA status dot amber glow -> none; text -> contrast amber */

html.light-mode #mProtoLaStatusText { color: #b45309 !important; }
/* LA display SVG — the screen itself has no explicit dark rect (transparent over the white box),
   but its content (channel labels, gridlines, traces, decode text) is white/colored-on-dark. Re-theme to read on light. */
/* faint vertical timing gridlines (white low-alpha) -> hairline grey */
html.light-mode #mProtoLaDisplay line[stroke="rgba(255,255,255,0.03)"],
html.light-mode #mProtoLaDisplay line[stroke="rgba(255,255,255,0.05)"] { stroke: #d2d2d7 !important; }
/* channel labels: CH0 SCL amber / CH1 SDA blue -> darkened readable variants */
html.light-mode #mProtoLaDisplay text[fill="rgba(234,179,8,0.6)"] { fill: #b45309 !important; }
html.light-mode #mProtoLaDisplay text[fill="rgba(59,130,246,0.6)"] { fill: #2563eb !important; }
html.light-mode #mProtoSCLWave[stroke="rgba(234,179,8,0.5)"] { stroke: #b45309 !important; }
html.light-mode #mProtoSDAWave[stroke="rgba(59,130,246,0.5)"] { stroke: #2563eb !important; }
/* error-highlight overlay rect (red wash) -> keep a subtle red tint that reads on light */
html.light-mode #mProtoErrHL { fill: rgba(220,38,38,0.06) !important; stroke: #dc2626 !important; }
/* decoded text rows (white-on-dark) -> dark; status row purple -> on-white purple */
html.light-mode #mProtoDec1[fill="rgba(255,255,255,0.45)"] { fill: #1d1d1f !important; }
html.light-mode #mProtoDec2[fill="rgba(255,255,255,0.40)"],
html.light-mode #mProtoDec3[fill="rgba(255,255,255,0.40)"] { fill: #515154 !important; }
html.light-mode #mProtoDecSt[fill="rgba(139,92,246,0.6)"] { fill: #6d28d9 !important; }

/* --- Mobile Protocol AI status text --- */
html.light-mode #mProtoAiText { color: #6e6e73 !important; }

/* --- Mobile Protocol Content card (var bg-secondary) — heading + bullets ---
   white recipe: day-mode 3-bullet cards all match .arca-bullet-box */
html.light-mode #protocol-debugging-mobile div[style*="background: var(--bg-secondary)"] {
    background: #ffffff !important;
    border-color: #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
/* --- Spec→Tests / Power / Security mobile cards: same inline var-based
   pattern, no per-section rule existed — same white recipe as above so
   every day-mode 3-bullet card matches the ARCA card exactly --- */
html.light-mode #spec-to-tests-mobile div[style*="background: var(--bg-secondary)"][style*="border-radius: 12px"],
html.light-mode #power-optimization-mobile div[style*="background: var(--bg-secondary)"][style*="border-radius: 12px"],
html.light-mode #security-privacy-mobile div[style*="background: var(--bg-secondary)"][style*="border-radius: 12px"] {
    background: #ffffff !important;
    border-color: #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}
html.light-mode #protocol-debugging-mobile div[style*="color: #ffffff"] { color: #1d1d1f !important; }
html.light-mode #protocol-debugging-mobile div[style*="color: #8b5cf6"] { color: #6d28d9 !important; }

/* ============================================================================
   AUTONOMOUS ROOT CAUSE (MOBILE) — section opener (start of slice tail)
   ============================================================================ */
/* section background #0C0A10 -> white; top hairline border stays via --border (redefined globally) */
html.light-mode #autonomous-root-cause-mobile { background: #ffffff !important; }

/* ───────────────────────────────────────────────────────────────
   #autonomous-root-cause-mobile : ARCA frame (V-diagram holder)
   line 11993: radial-gradient purple halo + dark linear-gradient bg
   + purple ring/glow box-shadow + purple border
─────────────────────────────────────────────────────────────── */
html.light-mode .arca-frame-mobile[style*="radial-gradient"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 0 1px rgba(109, 64, 207, 0.06), 0 0 28px rgba(109, 64, 207, 0.16), 0 0 70px rgba(60, 30, 130, 0.14), inset 0 0 50px rgba(25, 10, 55, 0.22) !important;
}

/* line 11994-11996: absolutely-positioned blurred purple glow divs inside frame.
   Kill the decorative radial glow blobs entirely. */


/* line 11999: image holder — dark #2e2e2e bg + black drop + purple glow shadow */
html.light-mode .arca-image-holder-mobile[style*="background: #383838"] {
    background: #f5f5f7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04), 0 0 18px rgba(139, 92, 246, 0.18) !important;
    border: 1px solid #d2d2d7 !important;
}

/* line 12005: V-diagram raster img is darkened (brightness 0.88) for the dark UI.
   This is a photographic technical diagram — keep ORIGINAL colors, just lift the
   artificial darkening so it reads on a light frame. */
html.light-mode .arca-image-holder-mobile img[alt="System Engineering V-Diagram"] {
    filter: none !important; /* new image is already a light-mode figure */
}

/* line 12006: white screen-blend sheen overlay on the diagram — remove on light */
html.light-mode .arca-image-holder-mobile [aria-hidden="true"][style*="mix-blend-mode: screen"] {
    background: none !important;
    mix-blend-mode: normal !important;
}

/* ───────────────────────────────────────────────────────────────
   ARCA description card (lines 12052-12074)
─────────────────────────────────────────────────────────────── */
/* line 12052: card already uses var(--bg-secondary)/var(--border) so it flips
   via the :root override emitted elsewhere; only the hard #ffffff heading text
   inside needs darkening. line 12053 */
html.light-mode section#autonomous-root-cause-mobile div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}
/* ARCA bullet card: match desktop .arca-bullet-box (white card, not the flipped --bg-secondary grey) */
html.light-mode section#autonomous-root-cause-mobile div[style*="background: var(--bg-secondary)"][style*="margin-top: 44px"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* lines 12057,12063,12069: purple bullet dots — small fills, keep brand purple */
html.light-mode section#autonomous-root-cause-mobile div[style*="color: #8b5cf6"] {
    color: #8b5cf6 !important;
}

/* ───────────────────────────────────────────────────────────────
   Cursor Demo section (#cursor-demo)
   line 12086: page-dark #0C0A10 bg
─────────────────────────────────────────────────────────────── */
html.light-mode section.cursor-demo#cursor-demo[style*="background: #0C0A10"] {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* line 12099,12106,12119,12128,12130,12136,12143,12151: small caps labels +
   sub-labels use var(--text-tertiary) -> flips via var override. */

/* Integration cards (lines 12101,12114,12123,12138,12146): dark translucent bg */
html.light-mode .integration-card[style*="background: rgba(22, 22, 24, 0.6)"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* line 12140: macOS Apple glyph SVG is fill="white" -> recolor to dark */
html.light-mode #cursor-demo svg[viewBox="0 0 384 512"][fill="white"] path {
    fill: #1d1d1f !important;
}
html.light-mode #cursor-demo svg[viewBox="0 0 384 512"][fill="white"] {
    fill: #1d1d1f !important;
}
/* line 12148: Windows logo keeps its brand cyan #00ADEF — saturated brand fill,
   reads fine on white; leave as-is. */

/* line 12158: glass demo container — rgba(0,0,0,0.3) + low-alpha white border */
html.light-mode #cursor-demo div[style*="background: rgba(0, 0, 0, 0.3)"][style*="backdrop-filter"] {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* Demo tabs (lines 12162-12172): active tab purple tint + #fff text; inactive
   transparent + #fff text. */
html.light-mode .demo-tab[style*="background: rgba(94, 106, 210, 0.1)"] {
    background: rgba(109,64,207,0.10) !important;
    border: 1px solid #6d28d9 !important;
    color: #1d1d1f !important;
}
html.light-mode .demo-tab[style*="background: transparent"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    color: #515154 !important;
}

/* ───────────────────────────────────────────────────────────────
   CODE EDITOR (cursor-window) — switch to VS Code LIGHT theme
─────────────────────────────────────────────────────────────── */
/* line 12202: line-number gutter — low-alpha white strip + var border/tertiary */
html.light-mode #mobileLineNumbers[style*="background: rgba(255, 255, 255, 0.02)"] {
    background: #f5f5f7 !important;
    border-right: 1px solid #d2d2d7 !important;
    color: #6e6e73 !important;
}

/* lines 12209,12210,12219,12224,12227,12229: code comments use var(--text-tertiary)
   which would become muted grey; in a light editor comments should be green. Target
   the comment <div>/<span> via their inline tertiary color within the code content. */
html.light-mode #codeContent > div[style*="color: var(--text-tertiary)"],
html.light-mode #codeContent span[style*="color: var(--text-tertiary)"] {
    color: #008000 !important;
}

/* Syntax tokens — inline color: values inside the editor and AI suggestion blocks.
   keyword #c586c0 -> #af00db (line 12211-12214 #include) */
html.light-mode #cursor-demo span[style*="color: #c586c0"] {
    color: #af00db !important;
}
/* string #ce9178 -> #a31515 (lines 12211-12214 header names) */
html.light-mode #cursor-demo span[style*="color: #ce9178"] {
    color: #a31515 !important;
}
/* number/constant #b5cea8 -> #098658 (lines 12215,12221,12223,12297,12305) */
html.light-mode #cursor-demo span[style*="color: #b5cea8"] {
    color: #098658 !important;
}
/* function #dcdcaa -> #795e26 (line 12218 board_bringup_sequence) */
html.light-mode #cursor-demo span[style*="color: #dcdcaa"] {
    color: #795e26 !important;
}
/* variable/param/property #9cdcfe -> #001080 (lines 12220,12222,12225,12226,12228,12294,12295,12298,12304) */
html.light-mode #cursor-demo span[style*="color: #9cdcfe"] {
    color: #001080 !important;
}
/* constant/enum #4fc1ff -> #0070c1 (lines 12220,12222,12225,12226,12228,12296,12299,12300,12301) */
html.light-mode #cursor-demo span[style*="color: #4fc1ff"] {
    color: #0070c1 !important;
}
/* keyword/type via var(--accent-light) (lines 12215-12218 static/uint8_t/void).
   On light, --accent-light = #7c3aed which still reads on white — keep as a
   distinct keyword color but tie it to the light VS Code keyword hue for clarity. */
html.light-mode #cursor-demo #codeContent span[style*="color: var(--accent-light)"] {
    color: #af00db !important;
}

/* line 12233-12239: inline warning — amber tinted bg + amber border + amber text */
html.light-mode #inlineWarning > div[style*="background: rgba(251, 191, 36, 0.1)"] {
    background: #f5f5f7 !important;
    border-left: 2px solid #b45309 !important;
    color: #b45309 !important;
}

/* ───────────────────────────────────────────────────────────────
   AI panel suggestion (lines 12242-12337)
─────────────────────────────────────────────────────────────── */
/* line 12246: "Connected" pill — purple-tint bg + #8b7bd8 text */
html.light-mode #cursor-demo span[style*="background: rgba(91, 74, 193, 0.15)"][style*="color: #8b7bd8"] {
    background: rgba(109,64,207,0.10) !important;
    color: #6d28d9 !important;
}

/* line 12270-12272: "Intelligent Suggestion" block uses var(--gradient-subtle)
   bg (flips via var override) + var(--accent) border; only the hard #ffffff
   heading needs darkening. line 12272 */
html.light-mode #cursor-demo div[style*="color: #ffffff"][style*="Intelligent"],
html.light-mode #cursor-demo div[style*="margin-top: 24px"][style*="background: var(--gradient-subtle)"] > div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* lines 12281-12283: green pin labels PA0/PA1/PA2 #4ade80 -> readable green text */
html.light-mode #cursor-demo span[style*="color: #4ade80"] {
    color: #15803d !important;
}
/* line 12284: amber R12 label #fbbf24 -> readable amber text on white */
html.light-mode #cursor-demo span[style*="color: #fbbf24"] {
    color: #b45309 !important;
}


/* ───────────────────────────────────────────────────────────────
   "Works with Your Equipment" (mobile) — lines 12356-12415
─────────────────────────────────────────────────────────────── */
/* line 12359: clip-text heading (white->grey gradient) -> solid dark */
html.light-mode #cursor-demo h3[style*="-webkit-text-fill-color: transparent"] {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color: #1d1d1f !important;
}

html.light-mode .llm-badge-mobile img[alt="Saleae"][style*="invert(1)"] {
    filter: brightness(0) !important;
}

/* line 12413: "Don't see your equipment listed?" — hard #ffffff body text */
html.light-mode #cursor-demo p[style*="color: #ffffff"] {
    color: #515154 !important;
}

/* ───────────────────────────────────────────────────────────────
   ts-comparison (mobile) section — line 12421: page-dark #0C0A10 bg
─────────────────────────────────────────────────────────────── */
html.light-mode section#ts-comparison-m.ts-comparison-root[style*="background: #0C0A10"] {
    background: #f9f7fd !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* ----------------------------------------------------------------------------
   This slice is the tail of a large <style> block (decorative glow keyframes,
   rainbow-border wrappers, demo-tab states, setup-flow line) plus the opening
   of the #security-privacy-mobile section. The owner requires NO glows/halos
   and NO dark surfaces in light mode. All purple/colored box-shadow keyframes
   are neutralized to the neutral soft shadow (or none), dark inner panels are
   flipped to white/#f5f5f7, and white-on-dark text is darkened.
   ---------------------------------------------------------------------------- */

/* --- Decorative glow element: the rainbow halo wrapper. Kill the blurred bloom. --- */




/* --- light-beam-glow: remove the animated purple beam halo on hover. --- */
html.light-mode .light-beam-glow:hover {
    animation: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}

/* --- demo-tab states: white-on-dark text + purple fills + glow shadows. --- */
html.light-mode .demo-tab.active {
    background: rgba(109, 64, 207, 0.10) !important;
    border-color: #6d28d9 !important;
    color: #1d1d1f !important;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.25), 0 0 24px rgba(147, 51, 234, 0.15);
    animation: activeTabGlow 2s ease-in-out infinite alternate;
}

html.light-mode .demo-tab:hover {
    background: #f5f5f7;
    color: #1d1d1f !important;
    box-shadow: 0 0 15px rgba(147, 51, 234, 0.3), 0 0 30px rgba(147, 51, 234, 0.2);
}

/* --- pro-tier-glow: rotating rainbow conic border + dark inner fill -> light. --- */


html.light-mode .pro-tier-glow::before {
    background: none;
    animation: none;
    opacity: 0;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

html.light-mode .pro-tier-glow::after {
    background: #ffffff;
}

/* --- rainbow-border-box: rotating conic border + dark inner panel -> light. --- */
html.light-mode .rainbow-border-box::before {
    background: none;
    animation: none;
    opacity: 0;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

html.light-mode .rainbow-border-box::after {
    background: #ffffff;
}

/* --- rainbow-btn-box: rotating conic border + dark #161618 inner -> light. --- */
html.light-mode .rainbow-btn-box::before {
    background: none;
    animation: none;
    opacity: 0;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

html.light-mode .rainbow-btn-box::after {
    background: #ffffff;
}

/* --- setup-flow-line: purple connector bar + animated purple glow sweep. --- */
html.light-mode .setup-flow-line {
    background: rgba(109, 64, 207, 0.18);
    box-shadow: none;
}

html.light-mode .setup-flow-line::after {
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(109, 64, 207, 0.25) 20%,
            rgba(124, 102, 220, 0.40) 50%,
            rgba(109, 64, 207, 0.25) 80%,
            transparent 100%);
    box-shadow: none;
}

/* --- #security-privacy-mobile section: dark #0C0A10 page bg set via inline style. --- */
html.light-mode #security-privacy-mobile.security-section-mobile,
html.light-mode .security-section-mobile[style*="background: #0C0A10"] {
    background: #f9f7fd !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* ============================================================
   #security-privacy-mobile — Maximum Security and Privacy
   ============================================================ */

/* "Runs on your servers" green accent text -> readable green on white */
html.light-mode #security-privacy-mobile span[style*="color: #22c55e"] {
    color: #15803d !important;
}

/* "Your Data" white label inside the core */
html.light-mode #security-privacy-mobile [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}

/* Perimeter ring: flatten the green halo glow, keep a soft green hairline ring */
html.light-mode .perimeter-ring-mobile {
    border: 3px solid #16a34a !important;
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.38), 0 0 70px rgba(34, 197, 94, 0.18) !important;
    background: transparent !important;
}

/* Kill the pulsing green glow overlay entirely */


/* Perimeter core: dark inset screen -> light inset panel */
html.light-mode .perimeter-core-mobile {
    background: #f9f7fd !important;
    border: 2px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* Tracing orb: keep brand purple but neutralize the bloom/halo */


/* Data bars: dark gradient fills + inset shadow -> light inset slots */
html.light-mode #security-privacy-mobile [style*="linear-gradient(90deg, rgba(30, 30, 40"] {
    background: #e2e2e6 !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Purple LED dots on the bars: keep saturated fill, drop the glow halo */


/* Schematics / Firmware / Component datasheet pills: purple-on-tint -> readable */
html.light-mode #security-privacy-mobile [style*="color: #c4b5fd"] {
    color: #6d28d9 !important;
    border: 1px solid rgba(109, 64, 207, 0.30) !important;
    background: rgba(139, 92, 246, 0.08) !important;
}

/* "Data never leaves your servers" badge: tinted panel + light-purple text + green glowing dot */
html.light-mode #security-privacy-mobile [style*="color: #e9d5ff"] {
    background: rgba(139, 92, 246, 0.08) !important;
    border: 1px solid rgba(109, 64, 207, 0.30) !important;
    color: #6d28d9 !important;
}
html.light-mode #security-privacy-mobile [style*="background: #22c55e"][style*="greenGlow"] {
    background: #16a34a !important;
}

/* Security bullet-points card: var-based bg already flips; force white text dark + purple dots stay readable */
html.light-mode #security-privacy-mobile [style*="background: var(--bg-secondary)"] {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
html.light-mode #security-privacy-mobile [style*="color: #ffffff"][style*="line-height: 1.7"] {
    color: #1d1d1f !important;
}
/* Purple bullet dots (the ● glyphs) -> brand purple readable on white */
html.light-mode #security-privacy-mobile [style*="color: #8b5cf6"][style*="font-size: 7px"] {
    color: #6d28d9 !important;
}

/* llm-badge text (defined in this slice's <style>) */
html.light-mode .llm-badge-mobile {
    color: #1d1d1f !important;
}

/* ============================================================
   #team — Built by Hardware Experts
   ============================================================ */

/* Section dark background -> alternating light fill */
html.light-mode section.team#team {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Section heading clip-text gradient (white->grey) -> solid dark */
html.light-mode section.team#team h2[style*="-webkit-text-fill-color: transparent"],
html.light-mode section.team#team h3[style*="-webkit-text-fill-color: transparent"] {
    background: none !important;
    -webkit-text-fill-color: #1d1d1f !important;
    color: #1d1d1f !important;
}

/* Team founder photos: dark border + dark drop shadow -> hairline + neutral soft shadow */
html.light-mode section.team#team img.team-image {
    border: 2px solid #d2d2d7 !important;
}

/* "Backed By" lockup tiles: dark rgba(22,22,24,0.6) chips -> light tiles with hairline */
html.light-mode section.team#team a[style*="background: rgba(22, 22, 24, 0.6)"],
html.light-mode section.team#team div[style*="background: rgba(22, 22, 24, 0.6)"] {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
}

/* ============================================================
   #pricing — Get Started Today
   ============================================================ */

/* Section dark background -> page white (sits between f5f5f7 team and footer) */
html.light-mode section#pricing.pricing {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Pricing card: dark #0e0a12 panel with purple border -> white panel, neutral shadow */
html.light-mode section#pricing .pricing-card.pro-tier-glow {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
    box-shadow: 0 0 32px rgba(120, 90, 210, 0.13), 0 0 65px rgba(120, 90, 210, 0.07) !important;
}

/* "How We Work With You" label + Demo/Pilot/Scale labels: white text -> dark */
html.light-mode section#pricing [style*="color: #fff"] {
    color: #1d1d1f !important;
}

/* Timeline node circles: filled-dark (#0E0A12) hollow rings -> light fill with dark ring;
   white-filled "Scale" node -> dark ring on white */
html.light-mode section#pricing [style*="background: #0E0A12"],
html.light-mode section#pricing [style*="background: #0e0a12"][style*="border-radius: 50%"] {
    background: #ffffff !important;
    border-color: #1d1d1f !important;
}
html.light-mode section#pricing [style*="background: #fff"][style*="border-radius: 50%"] {
    background: #1d1d1f !important;
}

/* Engagement-timeline (mobile): white connector lines -> dark hairlines
   (filter-free HTML divs since 2026-08-04; formerly svg <line>/<circle>) */
html.light-mode section#pricing .hwwm-line {
    background: #86868b !important;
}

/* Node glow rings: keep the blurred soft purple glow */
html.light-mode section#pricing .hwwm-glow {
    border-color: #a855f7 !important;
}

/* Travelling beam orb: keep the soft-glow bloom */


/* "Schedule a Call" button: dark purple gradient + white text -> light purple button,
   near-black text (2026-07-30). */
html.light-mode section#pricing a.btn.btn-primary[style*="linear-gradient(135deg, #2a1a4d"] {
    background: #c4b5fd !important;
    color: #1d1d1f !important;
    border: 1px solid #c4b5fd !important;
}

/* ============================================================
   Footer
   ============================================================ */

/* Footer dark background -> alternating light fill */
html.light-mode footer[style*="background: #0C0A10"] {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Footer label text uses var(--text-secondary)/--text-tertiary -> flips via root vars. */

/* Thin divider: white-on-dark hairline -> light hairline */
html.light-mode footer [style*="background: rgba(255, 255, 255, 0.28)"] {
    background: #d2d2d7 !important;
}

/* Social / AI buttons: transparent with white-alpha border + dark drop shadow.
   -> hairline border, neutral soft shadow. */
html.light-mode footer a.social-btn {
    border: 0.5px solid #d2d2d7 !important;
}

/* Monochrome WHITE icons forced white via brightness(0) invert(1) -> recolor to black.
   These are ChatGPT, Claude, Google AI, Grok, Perplexity, Threads marks. */
html.light-mode footer a.social-btn img[style*="brightness(0) invert(1)"] {
    filter: brightness(0) !important;
}

/* ---------------------------------------------------------------------------
   SCROLL-TO-TOP BUTTONS
   #scrollToTopDesktop carries dark glass via inline style:
     background:rgba(11,11,12,0.6); border:1px solid rgba(255,255,255,0.08);
     color:#b4b4b4; box-shadow:0 4px 16px rgba(0,0,0,0.1)
   JS mutates opacity/transform/borderColor/boxShadow on hover but NOT the
   background hue, so an attribute-targeted !important wins for surface+text.
   #scrollToTopMobile is styled by a class elsewhere; give it the same light
   glass treatment defensively.
--------------------------------------------------------------------------- */
html.light-mode #scrollToTopDesktop,
html.light-mode #scrollToTopDesktop[style*="rgba(11,11,12"] {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #d2d2d7 !important;
    color: #515154 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
}
html.light-mode #scrollToTopDesktop:hover {
    border-color: rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 6px 20px rgba(0, 0, 0, 0.06) !important;
    color: #1d1d1f !important;
}
html.light-mode #scrollToTopDesktop svg,
html.light-mode #scrollToTopMobile svg {
    stroke: currentColor !important;
}
html.light-mode #scrollToTopMobile {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #d2d2d7 !important;
    color: #515154 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
}
html.light-mode #scrollToTopMobile:hover {
    border-color: rgba(0, 0, 0, 0.16) !important;
    color: #1d1d1f !important;
}

/* ---------------------------------------------------------------------------
   JS-INJECTED CODE-EDITOR + AI-PANEL CONTENT (innerHTML, inline color: spans)
   The demo code (getBringupContent / getDebugContent / getDriverContent /
   getTestPlanContent / getSDKContent) and the AI context panels are written
   into .code-content / .ai-panel at runtime. The syntax tokens carry LITERAL
   inline hex colors that beat class CSS, so we map them to the VS Code LIGHT
   theme with attribute selectors + !important. var()-based tokens
   (--accent-light, --text-tertiary, --text-primary) flip via the variable
   block other slices define; we still pin them here for safety inside the
   editor surface so nothing reads as light-on-light.
   These selectors are scoped to the editor/AI containers to avoid bleeding
   the syntax palette into unrelated purple/green/blue UI elsewhere.
--------------------------------------------------------------------------- */

/* keyword  #c586c0 -> #af00db */
html.light-mode #codeContent span[style*="color: #c586c0"],
html.light-mode .ai-panel span[style*="color: #c586c0"],
html.light-mode .code-suggestion span[style*="color: #c586c0"] {
    color: #af00db !important;
}
/* string  #ce9178 -> #a31515 */
html.light-mode #codeContent span[style*="color: #ce9178"],
html.light-mode .ai-panel span[style*="color: #ce9178"],
html.light-mode .code-suggestion span[style*="color: #ce9178"] {
    color: #a31515 !important;
}
/* number/constant  #b5cea8 -> #098658 */
html.light-mode #codeContent span[style*="color: #b5cea8"],
html.light-mode .ai-panel span[style*="color: #b5cea8"],
html.light-mode .code-suggestion span[style*="color: #b5cea8"] {
    color: #098658 !important;
}
/* function  #dcdcaa -> #795e26 */
html.light-mode #codeContent span[style*="color: #dcdcaa"],
html.light-mode .ai-panel span[style*="color: #dcdcaa"],
html.light-mode .code-suggestion span[style*="color: #dcdcaa"] {
    color: #795e26 !important;
}
/* variable/param/property  #9cdcfe -> #001080 */
html.light-mode #codeContent span[style*="color: #9cdcfe"],
html.light-mode .ai-panel span[style*="color: #9cdcfe"],
html.light-mode .code-suggestion span[style*="color: #9cdcfe"] {
    color: #001080 !important;
}
/* constant/enum  #4fc1ff -> #0070c1 */
html.light-mode #codeContent span[style*="color: #4fc1ff"],
html.light-mode .ai-panel span[style*="color: #4fc1ff"],
html.light-mode .code-suggestion span[style*="color: #4fc1ff"] {
    color: #0070c1 !important;
}
/* type/class  #4ec9b0 -> #267f99 */
html.light-mode #codeContent span[style*="color: #4ec9b0"],
html.light-mode .ai-panel span[style*="color: #4ec9b0"],
html.light-mode .code-suggestion span[style*="color: #4ec9b0"] {
    color: #267f99 !important;
}

/* AI-panel data values originally var(--text-primary) (light-on-dark) read as
   #1d1d1f via the variable flip; pin explicitly so the right-hand stat values
   stay crisp. The label spans inherit panel text. */
html.light-mode .ai-panel span[style*="color: var(--text-primary)"] {
    color: #1d1d1f !important;
}

/* AI-panel "Connected/Debugging/Driver/Testing/SDK" status pills + the
   highlight callout boxes use saturated brand/status fills behind WHITE text
   (color:#ffffff). On light, recolor that white text to dark, lighten the
   tinted fill to a soft wash, and turn the thin status border into a readable
   stroke so the callout boxes don't sit dark-on-light. */
html.light-mode .ai-panel div[style*="background: var(--gradient-subtle)"] {
    background: linear-gradient(180deg, rgba(109, 64, 207, 0.06), rgba(124, 102, 220, 0.03)) !important;
    border-color: #d2d2d7 !important;
}
html.light-mode .ai-panel div[style*="background: rgba(251, 191, 36, 0.1)"] {
    background: rgba(180, 83, 9, 0.08) !important;
    border-color: #b45309 !important;
}
html.light-mode .ai-panel div[style*="background: rgba(59, 130, 246, 0.1)"] {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: #2563eb !important;
}
html.light-mode .ai-panel div[style*="background: rgba(34, 197, 94, 0.1)"] {
    background: rgba(22, 163, 74, 0.08) !important;
    border-color: #15803d !important;
}
html.light-mode .ai-panel div[style*="background: rgba(91, 74, 193, 0.15)"] {
    background: rgba(109, 64, 207, 0.10) !important;
    color: #6d28d9 !important;
}
/* white callout titles inside the tinted boxes -> dark */
html.light-mode .ai-panel div[style*="color: #ffffff"] {
    color: #1d1d1f !important;
}
/* status pill text colors recolored for contrast on the lightened pills */
html.light-mode .ai-panel span[style*="color: #8b7bd8"] { color: #6d28d9 !important; }
html.light-mode .ai-panel span[style*="color: #fbbf24"] { color: #b45309 !important; }
html.light-mode .ai-panel span[style*="color: #3b82f6"] { color: #2563eb !important; }
html.light-mode .ai-panel span[style*="color: #22c55e"] { color: #15803d !important; }
html.light-mode .ai-panel span[style*="color: #f87171"] { color: #dc2626 !important; }
/* schematic-connection accent labels (green/amber/blue) -> readable on white */
html.light-mode .ai-panel span[style*="color: #4ade80"] { color: #15803d !important; }
html.light-mode .ai-panel a[style*="color: #4ade80"]    { color: #15803d !important; }

/* AI-panel "Generate Config / Apply Changes" green chip buttons:
   tinted fill + #22c55e border + #22c55e text -> readable green on a soft wash */
html.light-mode .ai-panel button[style*="border: 1px solid #22c55e"] {
    background: rgba(22, 163, 74, 0.08) !important;
    border-color: #15803d !important;
    color: #15803d !important;
}
/* AI-panel "Resources" inset (background: rgba(20,20,30,0.6)) -> light inset */
html.light-mode .ai-panel div[style*="background: rgba(20, 20, 30, 0.6)"] {
    background: #ececef !important;
}
/* AI-panel ghost buttons (transparent + var(--border)) keep their JS hover
   that sets background to rgba(255,255,255,0.05); make that wash read on light. */
html.light-mode .ai-panel button[style*="background: transparent"] {
    color: #1d1d1f !important;
    border-color: #d2d2d7 !important;
}
/* code-suggestion "Copy" button chips use var(--bg-tertiary) -> light inset */
html.light-mode .ai-panel button[style*="background: var(--bg-tertiary)"] {
    background: #ececef !important;
    border-color: #d2d2d7 !important;
    color: #6e6e73 !important;
}
/* AI-panel "Related Documentation" links sit on var(--bg-secondary) chips;
   JS hover swaps to rgba(94,106,210,0.1). Keep the resting chip light. */
html.light-mode .ai-panel a[style*="background: var(--bg-secondary)"] {
    background: #f5f5f7 !important;
    color: #515154 !important;
}

/* ---------------------------------------------------------------------------
   TOAST UTILITY (window.__showToast, JS-injected inline cssText)
   Saturated success/info/warning gradients with white text + a heavy dark
   drop shadow. Transient + readable, but the shadow is a dark bloom; soften
   it. White text on the saturated gradient is intentional and reads fine, so
   we leave the gradient/text and only neutralize the shadow.
--------------------------------------------------------------------------- */
/* glow parity: toast keeps its JS-injected 0 10px 40px rgba(0,0,0,0.3) shadow in light mode (softening rule removed) */

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED VS CODE DEMO (#vsd-win desktop · #vsm-win mobile) — light mode.
   Base chrome (.cursor-window, .window-header, .code-editor, .ai-panel,
   .status-bar, .context-card, .suggestion-card, .code-suggestion, .apply-btn)
   is already themed by the class rules above; below are the vsd-/vsm- pieces.
--------------------------------------------------------------------------- */
/* Typed code area: same treatment as #codeContent (black text, green comments,
   VS Code light syntax remap of the inline span colors) */
html.light-mode #vsd-code,
html.light-mode #vsm-code {
    color: #000000 !important;
}
html.light-mode #vsd-code > div[style*="color: var(--text-tertiary"],
html.light-mode #vsm-code > div[style*="color: var(--text-tertiary"] {
    color: #008000 !important;
}
html.light-mode #vsd-code span[style*="#c586c0"],
html.light-mode #vsm-code span[style*="#c586c0"] {
    color: #af00db !important;            /* keyword */
}
html.light-mode #vsd-code span[style*="#ce9178"],
html.light-mode #vsm-code span[style*="#ce9178"] {
    color: #a31515 !important;            /* string */
}
html.light-mode #vsd-code span[style*="#b5cea8"],
html.light-mode #vsm-code span[style*="#b5cea8"] {
    color: #098658 !important;            /* number/constant */
}
html.light-mode #vsd-code span[style*="#dcdcaa"],
html.light-mode #vsm-code span[style*="#dcdcaa"] {
    color: #795e26 !important;            /* function */
}
html.light-mode #vsd-code span[style*="#9cdcfe"],
html.light-mode #vsm-code span[style*="#9cdcfe"] {
    color: #001080 !important;            /* variable/call */
}
html.light-mode #vsd-code span[style*="#4ec9b0"],
html.light-mode #vsm-code span[style*="#4ec9b0"] {
    color: #267f99 !important;            /* type/class */
}
/* kw() emits color:var(--accent-light,#5e4db8) — no space, with fallback */
html.light-mode #vsd-code span[style*="var(--accent-light"],
html.light-mode #vsm-code span[style*="var(--accent-light"] {
    color: #0000ff !important;            /* storage/type keyword */
}
/* Typing caret: light editor uses a dark caret */
html.light-mode #vsd-win .vsd-caret,
html.light-mode #vsm-win .vsm-caret {
    background: #555659 !important;
}
/* "VS Code with AssembleAI" header chip masks the file tabs behind it */
html.light-mode #vsd-win .window-title[style*="--bg-tertiary"],
html.light-mode #vsm-win .window-title[style*="--bg-tertiary"] {
    background: #f5f5f7 !important;
}

/* Integrated terminal strip: dark slab -> light panel, remapped stream colors */
html.light-mode #vsd-win .vsd-term,
html.light-mode #vsm-win .vsm-term {
    background: #f5f5f7 !important;
    border-top: 1px solid #d2d2d7 !important;
}
html.light-mode #vsd-win .vsd-term-head,
html.light-mode #vsm-win .vsm-term-head {
    border-bottom: 1px solid #d2d2d7 !important;
}
html.light-mode #vsd-win .vsd-tg, html.light-mode #vsm-win .vsm-tg { color: #15803d !important; }
html.light-mode #vsd-win .vsd-ty, html.light-mode #vsm-win .vsm-ty { color: #b45309 !important; }
html.light-mode #vsd-win .vsd-tr, html.light-mode #vsm-win .vsm-tr { color: #dc2626 !important; }
html.light-mode #vsd-win .vsd-tp, html.light-mode #vsm-win .vsm-tp { color: #6d28d9 !important; }

/* Terminal-body scrollbar: default dark thumb -> light grey on the light panel
   (dark mode untouched — no scrollbar pseudo-elements are defined there) */
html.light-mode #vsd-win .vsd-term-body::-webkit-scrollbar,
html.light-mode #vsm-win .vsm-term-body::-webkit-scrollbar {
    width: 10px;
}
html.light-mode #vsd-win .vsd-term-body::-webkit-scrollbar-track,
html.light-mode #vsm-win .vsm-term-body::-webkit-scrollbar-track {
    background: transparent !important;
}
html.light-mode #vsd-win .vsd-term-body::-webkit-scrollbar-thumb,
html.light-mode #vsm-win .vsm-term-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html.light-mode #vsd-win .vsd-term-body::-webkit-scrollbar-thumb:hover,
html.light-mode #vsm-win .vsm-term-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    background-clip: padding-box;
}

/* Agent status chip (busy amber / done green) */
html.light-mode #vsd-win .vsd-chip-busy,
html.light-mode #vsm-win .vsm-chip-busy {
    background: rgba(180, 83, 9, 0.10) !important;
    color: #b45309 !important;
}
html.light-mode #vsd-win .vsd-chip-ok,
html.light-mode #vsm-win .vsm-chip-ok {
    background: rgba(22, 163, 74, 0.10) !important;
    color: #15803d !important;
}

/* Working bar under the panel header */
html.light-mode #vsd-win .vsd-wbar,
html.light-mode #vsm-win .vsm-wbar {
    background: rgba(0, 0, 0, 0.08) !important;
}
html.light-mode #vsd-win .vsd-wbar.vsd-ok,
html.light-mode #vsm-win .vsm-wbar.vsm-ok {
    background: #16a34a !important;
}

/* Agent tool-call rows */
html.light-mode #vsd-win .vsd-trow,
html.light-mode #vsm-win .vsm-trow {
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
}
html.light-mode #vsd-win #vsd-verify.vsd-tdone,
html.light-mode #vsm-win #vsm-verify.vsm-tdone {
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    background: rgba(22, 163, 74, 0.07) !important;
}
/* tool-row spinner ring + amber arc + green check (JS-built inline SVGs) */
html.light-mode #vsd-win circle[stroke="rgba(255,255,255,0.14)"],
html.light-mode #vsm-win circle[stroke="rgba(255,255,255,0.14)"] {
    stroke: rgba(0, 0, 0, 0.15) !important;
}
html.light-mode #vsd-win .vsd-tspin path[stroke="#fbbf24"],
html.light-mode #vsm-win .vsm-tspin path[stroke="#fbbf24"] {
    stroke: #b45309 !important;
}
html.light-mode #vsd-win path[stroke="#34d399"],
html.light-mode #vsm-win path[stroke="#34d399"] {
    stroke: #15803d !important;
}

/* Hardware test checklist rows */
html.light-mode #vsd-win .vsd-pend,
html.light-mode #vsm-win .vsm-pend {
    border: 1px solid rgba(0, 0, 0, 0.25) !important;
}
html.light-mode #vsd-win .vsd-row.vsd-done .vsd-rname,
html.light-mode #vsm-win .vsm-row.vsm-done .vsm-rname {
    color: #1d1d1f !important;
}
html.light-mode #vsd-win .vsd-rms,
html.light-mode #vsm-win .vsm-rms {
    color: #15803d !important;
}

/* Customize button hover (white-alpha -> black-alpha) */
html.light-mode #vsd-win .vsd-btn2:hover,
html.light-mode #vsm-win .vsm-btn2:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

/* Status-bar build chip (span-level too: the generic .status-item span rule
   above would otherwise pin the inner text grey) */
html.light-mode #vsd-win .vsd-build, html.light-mode #vsm-win .vsm-build,
html.light-mode #vsd-win .vsd-build span, html.light-mode #vsm-win .vsm-build span { color: #b45309 !important; }
html.light-mode #vsd-win .vsd-build.vsd-ok, html.light-mode #vsm-win .vsm-build.vsm-ok,
html.light-mode #vsd-win .vsd-build.vsd-ok span, html.light-mode #vsm-win .vsm-build.vsm-ok span { color: #15803d !important; }
html.light-mode #vsd-win .vsd-spin,
html.light-mode #vsm-win .vsm-spin {
    border: 1.5px solid rgba(180, 83, 9, 0.25) !important;
    border-top-color: #b45309 !important;
}

/* Measurement chart card (JS-built SVG): grid, axis labels, status text */
html.light-mode #vsd-win .vsd-ch-st, html.light-mode #vsm-win .vsm-ch-st { color: #b45309 !important; }
html.light-mode #vsd-win .vsd-ch-st.vsd-stG, html.light-mode #vsm-win .vsm-ch-st.vsm-stG { color: #15803d !important; }
html.light-mode #vsd-win .vsd-ch-st.vsd-stR, html.light-mode #vsm-win .vsm-ch-st.vsm-stR { color: #dc2626 !important; }
html.light-mode #vsd-win g[stroke="rgba(255,255,255,0.06)"],
html.light-mode #vsm-win g[stroke="rgba(255,255,255,0.06)"] {
    stroke: rgba(0, 0, 0, 0.08) !important;
}
html.light-mode #vsd-win g[fill="rgba(168,168,173,0.85)"],
html.light-mode #vsm-win g[fill="rgba(168,168,173,0.85)"] {
    fill: #6e6e73 !important;
}
html.light-mode #vsd-win text[fill="#f87171"],
html.light-mode #vsm-win text[fill="#f87171"] {
    fill: #dc2626 !important;
}

/* Proposed-fix diff card */
html.light-mode #vsd-win .vsd-diffcard,
html.light-mode #vsm-win .vsm-diffcard {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode #vsd-win .vsd-diff-head,
html.light-mode #vsm-win .vsm-diff-head {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}
html.light-mode #vsd-win .vsd-del, html.light-mode #vsm-win .vsm-del {
    background: rgba(220, 38, 38, 0.07) !important;
    color: #dc2626 !important;
}
html.light-mode #vsd-win .vsd-add, html.light-mode #vsm-win .vsm-add {
    background: rgba(22, 163, 74, 0.08) !important;
    color: #15803d !important;
}
html.light-mode #vsd-win .vsd-diff-note, html.light-mode #vsm-win .vsm-diff-note {
    color: #b45309 !important;
    border-top: 1px solid #d2d2d7 !important;
}

/* Final summary card (inline green tint + white title; vsm has no .ai-panel
   ancestor so the .ai-panel rules above never reach it) */
html.light-mode #vsd-c6, html.light-mode #vsm-c6 {
    background: rgba(22, 163, 74, 0.08) !important;
    border: 1px solid rgba(22, 163, 74, 0.5) !important;
}
html.light-mode #vsd-c6 [style*="color: #ffffff"],
html.light-mode #vsm-c6 [style*="color: #ffffff"] {
    color: #1d1d1f !important;
}
/* Mobile feed shares .ai-panel-less markup: re-theme its seed/context text */
html.light-mode #vsm-win .vsm-feed .suggestion-text { color: #515154 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   AWB WORKBENCH (#vsd-win desktop internals, 2026-07-11 rework) — light mode.
   The desktop demo window now shows the AssembleAI workbench (specification
   table, probe map, data graph, agent feed). Classes are awb-*, all
   colors set via CSS classes (no [style*=] needed). Instrument hues drop to
   readable-on-white variants; panels go white with hairline borders.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Panels + labels */
html.light-mode .awb-contract,
html.light-mode .awb-pm,
html.light-mode .awb-graph {
    background: #ffffff;
    border-color: #d2d2d7;
}
html.light-mode .awb-lab,
html.light-mode .awb-hint,
html.light-mode .awb-step-dur,
html.light-mode .awb-gaxis,
html.light-mode .awb-gright { color: #6e6e73; }

/* Firmware editor column (syntax spans are remapped by the legacy
   #vsd-code light rules above; below is the column chrome) */
html.light-mode .awb-codecol { border-right-color: #d2d2d7; }
html.light-mode .awb-tabbar {
    background: #f4f4f6;
    border-bottom-color: #e5e5ea;
}
html.light-mode .awb-tab {
    color: #6e6e73;
    border-right-color: #e5e5ea;
}
html.light-mode .awb-tab-on {
    background: #ffffff;
    color: #1d1d1f;
}
html.light-mode .awb-tab-dot { background: #6e6e73; }
html.light-mode .awb-crumbs { color: #6e6e73; }
html.light-mode .awb-gut {
    color: #6e6e73;
    border-right-color: #e5e5ea;
}
html.light-mode .awb-edel { background: rgba(239, 68, 68, 0.1); }
html.light-mode .awb-eadd { background: rgba(34, 197, 94, 0.12); }

/* Project row */
html.light-mode .awb-proj { color: #1d1d1f; }
html.light-mode .awb-projchip {
    color: #6d28d9;
    background: rgba(109, 64, 207, 0.08);
    border-color: rgba(109, 64, 207, 0.35);
}
html.light-mode .awb-vchip {
    color: #3a3a3c;
    background: #f4f4f6;
    border-color: #d2d2d7;
}
html.light-mode .awb-vchip-on {
    color: #6d28d9;
    background: rgba(109, 64, 207, 0.12);
    border-color: rgba(109, 64, 207, 0.5);
}

/* Specification table */
html.light-mode .awb-chead { color: #515154; }
html.light-mode .awb-chead b { color: #1d1d1f; }
html.light-mode .awb-crow-h { color: #6e6e73; border-bottom-color: #e5e5ea; }
html.light-mode .awb-cid { color: #1d1d1f; }
html.light-mode .awb-cdot { background: #16a34a; }
html.light-mode .awb-cthr { color: #3a3a3c; }
html.light-mode .awb-cval { color: #6e6e73; }
html.light-mode .awb-cval.awb-ok { color: #15803d; }
html.light-mode .awb-cval.awb-bad { color: #dc2626; }
html.light-mode .awb-cspin {
    border-color: rgba(180, 83, 9, 0.25);
    border-top-color: #b45309;
}

/* Probe map SVG */
html.light-mode .awb-griddot { fill: rgba(0, 0, 0, 0.07); }
html.light-mode .awb-dut rect { fill: #f9f7fd; stroke: #b6a8d8; }
html.light-mode .awb-dut-t { fill: #1d1d1f; }
html.light-mode .awb-dut-s { fill: #6e6e73; }
html.light-mode .awb-node rect { fill: #ffffff; }
html.light-mode .awb-node .awb-ns { fill: #6e6e73; }
html.light-mode .awb-n-smu rect { stroke: rgba(180, 83, 9, 0.6); }
html.light-mode .awb-n-smu .awb-nt { fill: #b45309; }
html.light-mode .awb-n-la rect { stroke: rgba(220, 38, 38, 0.55); }
html.light-mode .awb-n-la .awb-nt { fill: #dc2626; }
html.light-mode .awb-n-osc rect { stroke: rgba(3, 105, 161, 0.55); }
html.light-mode .awb-n-osc .awb-nt { fill: #0369a1; }
html.light-mode .awb-w-smu { stroke: #b45309; }
html.light-mode .awb-w-la1 { stroke: #dc2626; }
html.light-mode .awb-w-osc1 { stroke: #0284c7; }
html.light-mode .awb-p-smu { fill: #b45309; }
html.light-mode .awb-p-la1 { fill: #dc2626; }
html.light-mode .awb-p-osc1 { fill: #0284c7; }
html.light-mode .awb-pinlab { fill: #475569; }

/* Data graph */
html.light-mode .awb-gr-thr { stroke: rgba(220, 38, 38, 0.55); }
html.light-mode .awb-gr-ax { stroke: rgba(0, 0, 0, 0.15); }
html.light-mode .awb-trace { stroke: #b45309; }
html.light-mode .awb-glab { color: #1d1d1f; }
html.light-mode .awb-gtag {
    color: #15803d;
    background: rgba(21, 128, 61, 0.08);
    border-color: rgba(21, 128, 61, 0.35);
}
html.light-mode .awb-gmeas {
    color: #b45309;
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.4);
}

/* Agent feed cards */
html.light-mode .awb-step { background: #ffffff; border-color: #d2d2d7; }
html.light-mode .awb-step-head { color: #1d1d1f; }
html.light-mode .awb-step-snip {
    color: #6d28d9;
    background: rgba(109, 64, 207, 0.06);
    border-color: rgba(109, 64, 207, 0.22);
}
html.light-mode .awb-think { color: #515154; border-left-color: rgba(109, 64, 207, 0.45); }
html.light-mode .awb-think .awb-think-tag { color: #6e6e73; }
html.light-mode .awb-needs { background: rgba(251, 191, 36, 0.1); border-color: rgba(180, 83, 9, 0.45); }
html.light-mode .awb-needs-txt { color: #3a3a3c; }
html.light-mode .awb-codecard { background: #ffffff; border-color: #d2d2d7; }
html.light-mode .awb-code-head {
    color: #6e6e73;
    background: #f4f4f6;
    border-bottom-color: #e5e5ea;
}
html.light-mode .awb-code-add { background: rgba(34, 197, 94, 0.12); color: #166534; }
html.light-mode .awb-code-del { background: rgba(239, 68, 68, 0.1); color: #b91c1c; }
html.light-mode .awb-final {
    color: #15803d;
    background: rgba(21, 128, 61, 0.06);
    border-color: rgba(21, 128, 61, 0.35);
}
html.light-mode .awb-tspin circle { stroke: rgba(0, 0, 0, 0.12); }

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM CONTEXT (#team-context desktop · #team-context-m mobile) — light mode.
   Replay stage: white panels, hairline borders, light terminals; purple/
   green/blue/amber accents remapped to the light palette used above.
--------------------------------------------------------------------------- */
html.light-mode #team-context[style*="background: #0C0A10"],
html.light-mode #team-context-m[style*="background: #0C0A10"] {
    background: #ffffff !important;
    border-top: 1px solid #d2d2d7 !important;
}
html.light-mode #team-context .section-header h2,
html.light-mode #team-context-m .section-header h2 { color: #1d1d1f !important; }
html.light-mode #team-context .section-header p,
html.light-mode #team-context-m .section-header p { color: #515154 !important; }

/* Stage shell: border is var-driven; body bg is a hard dark hex, so restate light */
html.light-mode #team-context .atc-stage,
html.light-mode #team-context-m .atcm-stage {
    background: #f5f5f7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04), 0 0 23px rgba(147, 51, 234, 0.33), 0 0 46px rgba(147, 51, 234, 0.17) !important;
}
html.light-mode #team-context .atc-head,
html.light-mode #team-context-m .atcm-head,
html.light-mode #team-context .atc-head {
    background: #f5f5f7 !important;
    border-bottom: 1px solid #d2d2d7 !important;
}
html.light-mode #team-context .atc-head-title,
html.light-mode #team-context-m .atcm-head-title { color: #1d1d1f !important; }

/* Narration line */
html.light-mode #team-context .atc-nline,
html.light-mode #team-context-m .atcm-nline { color: #1d1d1f !important; }

/* Panes (TODAY purple-tinted · 3-MONTHS-LATER green-tinted) */
html.light-mode #team-context .atc-pane,
html.light-mode #team-context-m .atcm-pane {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode #team-context .atc-pane-l,
html.light-mode #team-context-m .atcm-pane-l {
    border-top: 2px solid rgba(109, 64, 207, 0.45) !important;
    background: linear-gradient(180deg, rgba(109, 64, 207, 0.06), #ffffff 40%) !important;
}
html.light-mode #team-context .atc-pane-r,
html.light-mode #team-context-m .atcm-pane-r {
    border-top: 2px solid rgba(22, 163, 74, 0.4) !important;
    background: linear-gradient(180deg, rgba(22, 163, 74, 0.05), #ffffff 40%) !important;
}
html.light-mode #team-context .atc-when-l,
html.light-mode #team-context-m .atcm-when-l {
    color: #6d28d9 !important;
    background: rgba(109, 64, 207, 0.10) !important;
    border: 1px solid rgba(109, 64, 207, 0.35) !important;
}
html.light-mode #team-context .atc-when-c,
html.light-mode #team-context-m .atcm-when-c {
    color: #1d4ed8 !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
}
html.light-mode #team-context .atc-when-r,
html.light-mode #team-context-m .atcm-when-r {
    color: #15803d !important;
    background: rgba(22, 163, 74, 0.08) !important;
    border: 1px solid rgba(22, 163, 74, 0.32) !important;
}

/* Engineer avatars: solid brand chips with white initials */
html.light-mode #team-context .atc-av-l,
html.light-mode #team-context-m .atcm-av-l {
    background: #6d28d9 !important;
    border: 1px solid #6d28d9 !important;
}
html.light-mode #team-context .atc-av-r,
html.light-mode #team-context-m .atcm-av-r {
    background: #16a34a !important;
    border: 1px solid #16a34a !important;
}
html.light-mode #team-context .atc-av-j,
html.light-mode #team-context-m .atcm-av-j {
    background: rgba(22, 163, 74, 0.06) !important;
    border: 1px dashed rgba(22, 163, 74, 0.4) !important;
    color: #15803d !important;
}
html.light-mode #team-context .atc-av-j.atc-on,
html.light-mode #team-context-m .atcm-av-j.atcm-on {
    border-color: rgba(22, 163, 74, 0.65) !important;
    background: rgba(22, 163, 74, 0.15) !important;
}

/* Pane status chip (idle / problem / measuring / pushed) */
html.light-mode #team-context .atc-pst,
html.light-mode #team-context-m .atcm-pst {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode #team-context .atc-pst-r,
html.light-mode #team-context-m .atcm-pst-r {
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.45) !important;
    background: rgba(220, 38, 38, 0.06) !important;
}
html.light-mode #team-context .atc-pst-y,
html.light-mode #team-context-m .atcm-pst-y {
    color: #b45309 !important;
    border-color: rgba(180, 83, 9, 0.4) !important;
    background: rgba(180, 83, 9, 0.06) !important;
}
html.light-mode #team-context .atc-pst-g,
html.light-mode #team-context-m .atcm-pst-g {
    color: #15803d !important;
    border-color: rgba(22, 163, 74, 0.45) !important;
    background: rgba(22, 163, 74, 0.07) !important;
}

/* Terminals (investigation, dormant prompt, mobile clone box) */
html.light-mode #team-context .atc-term,
html.light-mode #team-context-m .atcm-term,
html.light-mode #team-context-m .atcm-clone {
    background: #f5f5f7 !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode #team-context .atc-tcmd,
html.light-mode #team-context-m .atcm-tcmd,
html.light-mode #team-context-m .atcm-clone { color: #1d1d1f !important; }
html.light-mode #team-context .atc-dorm-cmd,
html.light-mode #team-context-m .atcm-dorm-cmd { color: #1d1d1f !important; }
html.light-mode #team-context .atc-dorm-tag,
html.light-mode #team-context-m .atcm-dorm-tag {
    color: #15803d !important;
    border: 1px solid rgba(22, 163, 74, 0.4) !important;
    background: rgba(22, 163, 74, 0.07) !important;
}
html.light-mode #team-context .atc-caret { color: #6d28d9 !important; }
html.light-mode #team-context-m .atcm-caret { color: #2563eb !important; }

/* Artifact rows */
html.light-mode #team-context .atc-art,
html.light-mode #team-context-m .atcm-art {
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
    background: rgba(0, 0, 0, 0.02) !important;
}
html.light-mode #team-context .atc-art.atc-live,
html.light-mode #team-context-m .atcm-art.atcm-live {
    border-color: rgba(109, 64, 207, 0.55) !important;
    background: rgba(109, 64, 207, 0.08) !important;
}
html.light-mode #team-context .atc-art.atc-live .atc-aname,
html.light-mode #team-context-m .atcm-art.atcm-live .atcm-aname { color: #1d1d1f !important; }
html.light-mode #team-context .atc-pane-r .atc-art.atc-got .atc-aname,
html.light-mode #team-context-m .atcm-pane-r .atcm-art.atcm-got .atcm-aname { color: #1d1d1f !important; }
html.light-mode #team-context .atc-pane-r .atc-art.atc-hit,
html.light-mode #team-context-m .atcm-pane-r .atcm-art.atcm-hit {
    border-color: rgba(22, 163, 74, 0.55) !important;
    background: rgba(22, 163, 74, 0.08) !important;
}
html.light-mode #team-context .atc-cache,
html.light-mode #team-context-m .atcm-cache { color: #15803d !important; }

/* Flyout preview card + measurement chart */
html.light-mode #team-context .atc-fly,
html.light-mode #team-context-m .atcm-fly {
    background: #ffffff !important;
    border: 1px solid rgba(109, 64, 207, 0.45) !important;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.18) !important;
}
html.light-mode #team-context .atc-fly-tag,
html.light-mode #team-context-m .atcm-fly-tag { color: #6d28d9 !important; }
html.light-mode #team-context .atc-fly-t,
html.light-mode #team-context-m .atcm-fly-t { color: #1d1d1f !important; }
html.light-mode #team-context .atc-fly-conc,
html.light-mode #team-context-m .atcm-fly-conc { color: #15803d !important; }
html.light-mode #team-context .atc-ref,
html.light-mode #team-context-m .atcm-ref {
    color: #6d28d9 !important;
    border: 1px solid rgba(109, 64, 207, 0.4) !important;
    background: rgba(109, 64, 207, 0.08) !important;
}
html.light-mode #team-context .atc-fly-div,
html.light-mode #team-context-m .atcm-fly-div {
    background: rgba(109, 64, 207, 0.25) !important;
}
html.light-mode #team-context .atc-chart,
html.light-mode #team-context-m .atcm-chart {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.10) !important;
}
html.light-mode #team-context .atc-chart-file,
html.light-mode #team-context-m .atcm-chart-file { color: #1d1d1f !important; }
html.light-mode #team-context .atc-chart-tag,
html.light-mode #team-context-m .atcm-chart-tag { color: #6d28d9 !important; }
html.light-mode #team-context .atc-chart-ya, html.light-mode #team-context .atc-chart-avg,
html.light-mode #team-context .atc-chart-min,
html.light-mode #team-context-m .atcm-chart-ya, html.light-mode #team-context-m .atcm-chart-avg,
html.light-mode #team-context-m .atcm-chart-min {
    background: rgba(255, 255, 255, 0.85) !important;
}
html.light-mode #team-context .atc-chart-avg,
html.light-mode #team-context-m .atcm-chart-avg { color: #6d28d9 !important; }
html.light-mode #team-context .atc-chart-min,
html.light-mode #team-context-m .atcm-chart-min { color: #15803d !important; }
html.light-mode #team-context .atc-chart-lim,
html.light-mode #team-context-m .atcm-chart-lim {
    color: #b45309 !important;
    background: rgba(180, 83, 9, 0.08) !important;
    border: 1px solid rgba(180, 83, 9, 0.35) !important;
}
html.light-mode #team-context .atc-wcap,
html.light-mode #team-context-m .atcm-wcap {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* chart SVG internals (attribute-styled): white-alpha grid + lilac legend */
html.light-mode #team-context path[stroke="rgba(255,255,255,0.07)"],
html.light-mode #team-context-m path[stroke="rgba(255,255,255,0.07)"] {
    stroke: rgba(0, 0, 0, 0.10) !important;
}
html.light-mode #team-context path[stroke="rgba(255,255,255,0.05)"],
html.light-mode #team-context-m path[stroke="rgba(255,255,255,0.05)"] {
    stroke: rgba(0, 0, 0, 0.07) !important;
}
html.light-mode #team-context path[stroke="#c4b5fd"],
html.light-mode #team-context-m path[stroke="#c4b5fd"] {
    stroke: #6d28d9 !important;
}
html.light-mode #team-context path[stroke="rgba(251,191,36,0.55)"],
html.light-mode #team-context-m path[stroke="rgba(251,191,36,0.55)"] {
    stroke: rgba(180, 83, 9, 0.55) !important;
}

/* Artifact checkmark icons + green header status dot: raw #22c55e washes out
   on white — remap to the convention greens used everywhere else on light */
html.light-mode #team-context path[stroke="#22c55e"],
html.light-mode #team-context-m path[stroke="#22c55e"] {
    stroke: #15803d !important;
}
html.light-mode #team-context .atc-dot-g,
html.light-mode #team-context-m .atcm-dot-g {
    background: #16a34a !important;
    box-shadow: 0 0 8px rgba(34,197,94,0.8) !important;
}

/* Commit stamp */
html.light-mode #team-context .atc-stamp,
html.light-mode #team-context-m .atcm-stamp {
    color: #1d4ed8 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(37, 99, 235, 0.55) !important;
}

/* Elapsed timers */
html.light-mode #team-context .atc-timer {
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
html.light-mode #team-context .atc-tval,
html.light-mode #team-context-m .atcm-tval { color: #1d1d1f !important; }
html.light-mode #team-context .atc-main.atc-cmp .atc-pane-l .atc-tval { color: #1d1d1f !important; }
html.light-mode #team-context .atc-main.atc-cmp .atc-pane-r .atc-tval { color: #15803d !important; }
html.light-mode #team-context-m .atcm-tcell {
    border: 1px solid #d2d2d7 !important;
    background: #ffffff !important;
}
html.light-mode #team-context-m .atcm-tcell-l { border-top: 2px solid rgba(109, 64, 207, 0.45) !important; }
html.light-mode #team-context-m .atcm-tcell-r { border-top: 2px solid rgba(22, 163, 74, 0.4) !important; }
html.light-mode #team-context-m .atcm-timers.atcm-cmp .atcm-tcell-l .atcm-tval { color: #1d1d1f !important; }
html.light-mode #team-context-m .atcm-timers.atcm-cmp .atcm-tcell-r .atcm-tval { color: #15803d !important; }

/* Repo spine (git tree + log) */
html.light-mode #team-context .atc-spine,
html.light-mode #team-context-m .atcm-spine {
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.4) !important;
}
html.light-mode #team-context .atc-spine-head,
html.light-mode #team-context-m .atcm-spine-head {
    border-bottom: 1px solid rgba(37, 99, 235, 0.25) !important;
}
html.light-mode #team-context .atc-spine-title,
html.light-mode #team-context-m .atcm-spine-title { color: #2563eb !important; }
html.light-mode #team-context circle[stroke="#62a1ff"],
html.light-mode #team-context path[stroke="#62a1ff"],
html.light-mode #team-context-m circle[stroke="#62a1ff"],
html.light-mode #team-context-m path[stroke="#62a1ff"] {
    stroke: #2563eb !important;
}
html.light-mode #team-context .atc-tdot { background: rgba(0, 0, 0, 0.18) !important; }
html.light-mode #team-context .atc-trow.atc-lit {
    color: #1d1d1f !important;
    background: rgba(37, 99, 235, 0.10) !important;
}
html.light-mode #team-context .atc-trow.atc-lit .atc-tdot {
    background: #2563eb !important;
    box-shadow: 0 0 6px rgba(59,130,246,0.8) !important;
}
html.light-mode #team-context .atc-trow-fw .atc-tdot { background: rgba(0, 0, 0, 0.35) !important; }
html.light-mode #team-context .atc-ttag { border: 1px solid rgba(0, 0, 0, 0.12) !important; }
html.light-mode #team-context .atc-tdiv { background: rgba(0, 0, 0, 0.08) !important; }
html.light-mode #team-context .atc-tgrp,
html.light-mode #team-context .atc-log-h,
html.light-mode #team-context-m .atcm-log-h { color: #6e6e73 !important; }
html.light-mode #team-context .atc-logh,
html.light-mode #team-context-m .atcm-logh { color: #2563eb !important; }
html.light-mode #team-context .atc-logm,
html.light-mode #team-context-m .atcm-logm { color: #6e6e73 !important; }
html.light-mode #team-context .atc-log-new .atc-logh,
html.light-mode #team-context-m .atcm-log-new .atcm-logh { color: #1d4ed8 !important; }
html.light-mode #team-context .atc-log-new .atc-logm,
html.light-mode #team-context-m .atcm-log-new .atcm-logm { color: #1d1d1f !important; }
html.light-mode #team-context .atc-cap,
html.light-mode #team-context-m .atcm-cap { color: #1d1d1f !important; }
/* Benefit cards under the stage: white cards, thin purple frame */
html.light-mode #team-context .atc-ben {
    background: #ffffff !important;
    border: 1px solid rgba(109, 64, 207, 0.35) !important;
}
html.light-mode #team-context .atc-ben-t { color: #1d1d1f !important; }
html.light-mode #team-context .atc-ben-d { color: #515154 !important; }
/* Commit status row at the foot of the repo spine (check icon is covered by
   the path[stroke="#22c55e"] remap above) */
html.light-mode #team-context .atc-gitstat,
html.light-mode #team-context-m .atcm-gitstat { color: #2563eb !important; }
html.light-mode #team-context .atc-gitstat.atc-ok,
html.light-mode #team-context-m .atcm-gitstat.atcm-ok { color: #15803d !important; }
html.light-mode #team-context .atc-gitspin,
html.light-mode #team-context-m .atcm-gitspin {
    border-color: rgba(37, 99, 235, 0.25) !important;
    border-top-color: #2563eb !important;
}
html.light-mode #team-context .atc-ghost {
    color: #1d1d1f !important;
    background: #ffffff !important;
    border: 1px solid rgba(37, 99, 235, 0.5) !important;
}
html.light-mode #team-context-m .atcm-link {
    background: linear-gradient(180deg, rgba(37, 99, 235, 0.5), rgba(37, 99, 235, 0.12)) !important;
}


/* Pane status glows: keep the hue cue, soften for light surfaces */
html.light-mode #team-context .atc-st-r,
html.light-mode #team-context-m .atcm-st-r {
    border-color: rgba(220, 38, 38, 0.5) !important;
}
html.light-mode #team-context .atc-st-r {
    box-shadow: 0 0 22px -5px rgba(248,113,113,0.42), 0 0 7px -3px rgba(248,113,113,0.5) !important;
}
html.light-mode #team-context-m .atcm-st-r {
    box-shadow: 0 0 20px -5px rgba(248,113,113,0.42), 0 0 7px -3px rgba(248,113,113,0.5) !important;
}
html.light-mode #team-context .atc-st-y,
html.light-mode #team-context-m .atcm-st-y {
    border-color: rgba(180, 83, 9, 0.45) !important;
}
html.light-mode #team-context .atc-st-y {
    box-shadow: 0 0 22px -5px rgba(251,191,36,0.4), 0 0 7px -3px rgba(251,191,36,0.48) !important;
}
html.light-mode #team-context-m .atcm-st-y {
    box-shadow: 0 0 20px -5px rgba(251,191,36,0.4), 0 0 7px -3px rgba(251,191,36,0.48) !important;
}
html.light-mode #team-context .atc-st-g,
html.light-mode #team-context-m .atcm-st-g {
    border-color: rgba(22, 163, 74, 0.5) !important;
}
html.light-mode #team-context .atc-st-g {
    box-shadow: 0 0 22px -5px rgba(34,197,94,0.4), 0 0 7px -3px rgba(34,197,94,0.48) !important;
}
html.light-mode #team-context-m .atcm-st-g {
    box-shadow: 0 0 20px -5px rgba(34,197,94,0.4), 0 0 7px -3px rgba(34,197,94,0.48) !important;
}

/* Light-mode corrections (post-audit) */

/* ======================= <style id="assemble-light-mode-fixes"> ======================= */

/* --- 1. The <html> element itself carries inline background:#0C0A10 --- */
html.light-mode { background: #ffffff !important; }

/* --- 2. Any element whose INLINE style sets the page-dark bg -> white
         (covers #protocol-debugging, which never got a base bg rule, plus any
         other section/div that pins the page-dark inline). --- */
html.light-mode [style*="background: #0C0A10"],
html.light-mode [style*="background:#0C0A10"],
html.light-mode [style*="background: #0c0a10"],
html.light-mode [style*="background:#0c0a10"] { background: #ffffff !important; }
html.light-mode #protocol-debugging,
html.light-mode #timing-verification { background: #ffffff !important; }

/* --- 3. Demo state-machine TEXT colors (status labels, metric values,
         diagnosis text). These are set THREE ways and all evade value-exact
         overrides written earlier, so catch every serialization form:
           (a) static inline  color:#hex            (no space)
           (b) JS-set inline  color: rgb(r, g, b)   (Chrome serialization)
           (c) SVG attribute  fill="rgba(r,g,b,a)"
         Saturated DOTS keep their fill (background:) — only TEXT/strokes darken.
         amber #f59e0b/#eab308 -> #a16207 | red #ef4444 -> #dc2626
         green #22c55e/#16a34a -> #15803d | blue #3b82f6 -> #2563eb
         purple #8b5cf6 -> #6d28d9 --- */
/* (a) static inline hex text */
html.light-mode [style*="color:#eab308"],
html.light-mode [style*="color:#f59e0b"] { color: #a16207 !important; }
html.light-mode [style*="color:#ef4444"] { color: #dc2626 !important; }
html.light-mode [style*="color:#22c55e"],
html.light-mode [style*="color:#16a34a"],
html.light-mode [style*="color:#4ade80"] { color: #15803d !important; }
html.light-mode [style*="color:#3b82f6"] { color: #2563eb !important; }
html.light-mode [style*="color:#8b5cf6"] { color: #6d28d9 !important; }
/* (a2) static inline hex text WITH a space after the colon (color: #hex) */
html.light-mode [style*="color: #eab308"],
html.light-mode [style*="color: #f59e0b"] { color: #a16207 !important; }
html.light-mode [style*="color: #ef4444"] { color: #dc2626 !important; }
html.light-mode [style*="color: #22c55e"],
html.light-mode [style*="color: #16a34a"],
html.light-mode [style*="color: #4ade80"] { color: #15803d !important; }
html.light-mode [style*="color: #3b82f6"] { color: #2563eb !important; }
html.light-mode [style*="color: #8b5cf6"] { color: #6d28d9 !important; }
/* (b) JS-set inline rgb() text (Chrome serializes #hex -> rgb(r, g, b)) */
html.light-mode [style*="color: rgb(234, 179, 8)"],
html.light-mode [style*="color: rgb(245, 158, 11)"] { color: #a16207 !important; }
html.light-mode [style*="color: rgb(239, 68, 68)"] { color: #dc2626 !important; }
html.light-mode [style*="color: rgb(34, 197, 94)"],
html.light-mode [style*="color: rgb(74, 222, 128)"] { color: #15803d !important; }
html.light-mode [style*="color: rgb(59, 130, 246)"] { color: #2563eb !important; }
html.light-mode [style*="color: rgb(139, 92, 246)"] { color: #6d28d9 !important; }
/* (c) SVG diagnosis text fills (protocol #protoDecSt etc.) */
html.light-mode [fill="rgba(234,179,8,0.7)"],
html.light-mode [fill="rgba(234,179,8,0.8)"] { fill: #a16207 !important; }
html.light-mode [fill="rgba(239,68,68,0.7)"],
html.light-mode [fill="rgba(239,68,68,0.8)"] { fill: #dc2626 !important; }
html.light-mode [fill="rgba(34,197,94,0.7)"],
html.light-mode [fill="rgba(34,197,94,0.8)"] { fill: #15803d !important; }
html.light-mode [fill="rgba(59,130,246,0.7)"],
html.light-mode [fill="rgba(59,130,246,0.8)"] { fill: #2563eb !important; }

/* --- 4. Green status TEXT that comes from CSS classes (#16a34a) on near-white
         surfaces — darken to a 4.5:1 green. Scoped to known text classes so the
         green PCB/scope strokes (also #16a34a) keep their look. --- */
html.light-mode .s2t-test-id,
html.light-mode .s2t-test-status,
html.light-mode .suggestion-text,
html.light-mode .suggestion-text span,
html.light-mode .ai-header span,
html.light-mode .pwr-phase-fix .pwr-metric-val,
html.light-mode .pwr-metric-set.pwr-phase-fix .pwr-metric-val,
html.light-mode .profiler-status-item.pwr-phase-fix,
html.light-mode .profiler-status-item.pwr-phase-fix span { color: #15803d !important; }

/* --- 5. Remove the small colored GLOWS on demo indicator dots/LEDs
         (both static inline and JS-set on these ids). --- */



/* --- 6. Cursor-demo white brand glyph (svg fill="white") -> black on white --- */
html.light-mode #cursor-demo svg[fill="white"],
html.light-mode #cursor-demo svg[fill="white"] path,
html.light-mode #cursor-demo svg[viewBox="0 0 384 512"][fill="white"],
html.light-mode #cursor-demo svg[viewBox="0 0 384 512"][fill="white"] path { fill: #1d1d1f !important; }

/* --- 7. "Part Of" partner logos (NVIDIA, Google Cloud) are full-colour images
         with WHITE wordmark text that vanishes on the white tile. Render them
         as clean monochrome-black lockups so they stay visible WITHOUT a dark
         chip (keeps the requirement of light backgrounds everywhere). --- */
html.light-mode .backed-by-box img[alt="Partner Logo"] { filter: none !important; }

/* Light-mode corrections round 2 */

/* ======================= <style id="assemble-light-mode-fixes-2"> ======================= */

/* --- HERO BRAIN-CHIP: the package gradients set stop-color via INLINE style=,
       so the earlier (non-!important) overrides lost. Re-declare with !important
       so the chip renders as a light silver package instead of dark purple. --- */
/* one step darker than the original e7e3f1/dad5e6/cdc9da — owner found the
   day-mode package too bright white (2026-08-04) */
html.light-mode #hChipBodyGrad stop[offset="0%"]  { stop-color:#ddd8ea !important; }
html.light-mode #hChipBodyGrad stop[offset="50%"] { stop-color:#cfc9de !important; }
html.light-mode #hChipBodyGrad stop[offset="100%"]{ stop-color:#c2bdd1 !important; }
html.light-mode #hChipBevelGrad stop[offset="0%"]  { stop-color:#f0ecf7 !important; }
html.light-mode #hChipBevelGrad stop[offset="30%"] { stop-color:#e5e0ef !important; }
html.light-mode #hChipBevelGrad stop[offset="70%"] { stop-color:#d7d2e2 !important; }
html.light-mode #hChipBevelGrad stop[offset="100%"]{ stop-color:#cbc6d7 !important; }
html.light-mode #hChipRimGrad stop[offset="0%"]  { stop-color:#cecada !important; }
html.light-mode #hChipRimGrad stop[offset="50%"] { stop-color:#c0bccd !important; }
html.light-mode #hChipRimGrad stop[offset="100%"]{ stop-color:#b3afc0 !important; }
html.light-mode #hPinGrad stop[offset="0%"]  { stop-color:#c7c7cc !important; }
html.light-mode #hPinGrad stop[offset="50%"] { stop-color:#b0b0b5 !important; }
html.light-mode #hPinGrad stop[offset="100%"]{ stop-color:#a3a3a8 !important; }
html.light-mode .hero-brain-chip svg rect[fill="#1a1228"]{ fill:#ede9f4 !important; stroke:#d2d2d7 !important; }
html.light-mode .hero-brain-chip svg rect[fill="#0f0a18"]{ fill:#e4dfee !important; }
html.light-mode .hero-brain-chip svg rect[fill="#2a1f3d"]{ fill:#dad3e8 !important; stroke:#d2d2d7 !important; }
html.light-mode .hero-brain-chip svg rect[fill="#1f1830"]{ fill:#ede9f4 !important; stroke:#d2d2d7 !important; }
/* "AssembleAI" centre label + outer svg keep the purple glows in light mode.
   The label glow is now the SVG filter attribute url(#hChipTextGlow) (Safari-safe),
   which applies in both modes on its own; this rule re-asserts it against any
   future light-mode filter strippers. */
/* (the html.light-mode .hero-brain-chip text filter:url(#hChipTextGlow) rule stays inline in index.html — belt-and-braces: older WebKit resolved fragment url()s in external sheets against the sheet) */
html.light-mode .hero-brain-chip svg[style*="drop-shadow"]{ filter:drop-shadow(0 0 10px rgba(74, 45, 102, 0.4)) !important; }


/* --- TEAM HEADSHOTS: square black photos -> circular avatars on white. --- */
html.light-mode section.team#team img.team-image,
html.light-mode .team img.team-image {
    border-radius: 50% !important;
    border: 2px solid #c7c7cc !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 8px 22px rgba(0,0,0,0.12) !important;
}

/* --- FOOTER: every social / Ask-AI icon -> solid black glyph on a white tile. --- */
html.light-mode footer a.social-btn,
html.light-mode footer .social-btn {
    background: #ffffff !important;
    border: 1px solid #d2d2d7 !important;
}
html.light-mode footer a.social-btn img,
html.light-mode footer .social-btn img {
    filter: brightness(0) !important;
    -webkit-filter: brightness(0) !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

/* --- "Built by Hardware Experts": Amazon company-pill logo -> black --- */
html.light-mode img[alt="Amazon"] { filter: none !important; }

/* --- "PART OF" logos (NVIDIA / Google Cloud), desktop + mobile: hide the baked
       white-text rasters if a dark src is ever restored while light mode is on. --- */
html.light-mode img[src*="1VlMzi-gkRwA"],
html.light-mode img[src*="1z5wyVtVmUtLkr9V"] { display: none !important; }
/* mobile "Part Of" box has a dark tile bg + the divider is a white line */
html.light-mode div[style*="background: rgba(22, 22, 24, 0.6)"] { background: #ffffff !important; border-color: #d2d2d7 !important; }
html.light-mode .backed-by-box div[style*="rgba(255, 255, 255, 0.15)"] { background: #d2d2d7 !important; }

/* Light-mode round 3: glows back */

/* ======================= <style id="assemble-light-mode-fixes-3"> ======================= */

/* Hero: soft animated colour glow behind the AssembleAI chip */


/* Root-cause: soft purple halo around the V-Diagram frame */
html.light-mode .arca-frame[style*="radial-gradient"],
html.light-mode .arca-frame-mobile[style*="radial-gradient"] {
    background: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(139,92,246,0.13) 0%, rgba(124,58,237,0.05) 45%, rgba(255,255,255,0) 78%), #ffffff !important;
    border: 1px solid rgba(139,92,246,0.22) !important;
    box-shadow: 0 0 0 1px rgba(109, 64, 207, 0.06), 0 0 28px rgba(109, 64, 207, 0.16), 0 0 70px rgba(60, 30, 130, 0.14), inset 0 0 50px rgba(25, 10, 55, 0.22) !important;
}
html.light-mode .arca-frame > div[aria-hidden="true"] > div[style*="rgba(139, 92, 246"],
html.light-mode .arca-frame-mobile [aria-hidden="true"] > div[style*="rgba(139, 92, 246"] {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.16) 0%, transparent 65%) !important;
    filter: blur(12px) !important;
    opacity: 1 !important;
    display: block !important;
}
html.light-mode .arca-frame > div[aria-hidden="true"] > div[style*="rgba(168, 85, 247"],
html.light-mode .arca-frame-mobile [aria-hidden="true"] > div[style*="rgba(168, 85, 247"] {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 65%) !important;
    filter: blur(14px) !important;
    opacity: 1 !important;
    display: block !important;
}

/* Pricing "Pro" tier: soft purple glow (not a flat card) */
html.light-mode .pro-tier-glow {
    box-shadow: 0 0 32px rgba(120, 90, 210, 0.13), 0 0 65px rgba(120, 90, 210, 0.07), 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* "Schedule a Call" CTA rainbow halo: no light override — identical to dark
   (glow parity; the animated hueShift/rainbowGlowStrength halo cascades). */

/* Light-mode round 4 */

/* ======================= <style id="assemble-light-mode-fixes-4"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 4 — owner punch-list:
   glows/hues match dark (security beam + green ring, nav CTA), comparison white,
   Part-Of underline/size, Amazon swoosh orange. (Hero untouched — already good.)
   ============================================================================ */

/* --- SECURITY: bring back the green-ring glow + the purple beam orb (same as dark) --- */
html.light-mode #security-privacy .perimeter-ring {
    border: 3px solid rgba(34,197,94,0.6) !important;
    box-shadow: 0 0 32px rgba(34, 197, 94, 0.38), 0 0 75px rgba(34, 197, 94, 0.18) !important;
    /* perimeterGlow only animates box-shadow, which is pinned above -
       the animation ticked with zero visible output. */
    animation: none !important;
}

html.light-mode #security-privacy .perimeter-core::before {
    background: radial-gradient(circle, rgba(139,92,246,1) 0%, rgba(139,92,246,0.8) 30%, transparent 70%) !important;
    filter: blur(3px) !important;
    box-shadow: 0 0 15px rgba(139,92,246,0.8), 0 0 30px rgba(139,92,246,0.5) !important;
}
/* mobile equivalents */
html.light-mode .perimeter-ring-mobile {
    box-shadow: 0 0 32px rgba(34,197,94,0.38), 0 0 70px rgba(34,197,94,0.18) !important;
}
html.light-mode .perimeter-ring-mobile::after {
    box-shadow: 0 0 40px rgba(34,197,94,0.22), 0 0 75px rgba(34,197,94,0.12) !important;
    animation: perimeterGlowPulseMobile 3.2s ease-in-out infinite !important;
    display: block !important;
}
html.light-mode .perimeter-core-mobile::before {
    box-shadow: 0 0 12px rgba(139,92,246,0.8), 0 0 24px rgba(139,92,246,0.5) !important;
    filter: blur(2px) !important;
}

/* --- NAV "Get Started" CTA (and all .btn-primary): restore the purple glow (same as dark) --- */
html.light-mode .btn-primary {
    box-shadow: 0 0 20px rgba(147,51,234,0.4) !important;
}
html.light-mode .btn-primary:hover {
    box-shadow: 0 0 30px rgba(147,51,234,0.6) !important;
}
/* Nav "Get Started" (and the mobile-drawer CTA) hover: same fill as the
   pricing "Schedule a Call" button (#c4b5fd, static on hover); the purple
   hover glow above does the hover work. */
html.light-mode .nav-links .btn-primary:hover,
html.light-mode .mobile-menu-buttons .btn-primary:hover {
    background: #c4b5fd !important;
    border-color: #c4b5fd !important;
}

/* --- COMPARISON: "AssembleAI / Grounded in measurements" column -> white, like the
       Capability / Generic Coding Agents columns (drop the purple tint). --- */
html.light-mode .ts-comparison-assemble-head {
    background: transparent !important;
}
html.light-mode .ts-comparison-body-row .ts-comparison-assemble {
    background: transparent !important;
}

/* --- Backed-by links: no underline on the logo anchors --- */
html.light-mode .backed-by-box a { text-decoration: none !important; }

/* --- AMAZON pill: show the logo in its real colours (orange swoosh); the "Amazon"
       wordmark is the adjacent text span and is already black in light mode. --- */
html.light-mode img[alt="Amazon"] { filter: none !important; }

/* Reduced-motion: the light-mode !important re-adds above would otherwise
   escape the global prefers-reduced-motion containment. */
@media (prefers-reduced-motion: reduce) {
    html.light-mode #tmgDutLed,
    html.light-mode .perimeter-ring-mobile::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Light-mode round 5 */

/* ======================= <style id="assemble-light-mode-fixes-5"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 5 — owner punch-list
   ============================================================================ */

/* --- GLOBAL PURPLE-TINTED BACKGROUND (~4% purple) so every section matches and
       isn't sterile white. Cards/panels stay white for contrast. --- */
html.light-mode,
html.light-mode body { background: #f9f7fd !important; }
/* every section that pins the page-dark inline bg -> the tint (uniform) */
html.light-mode [style*="background: #0C0A10"],
html.light-mode [style*="background:#0C0A10"],
html.light-mode [style*="background: #0c0a10"],
html.light-mode [style*="background:#0c0a10"],
html.light-mode #team,
html.light-mode #pricing,
html.light-mode #timing-verification,
html.light-mode #protocol-debugging,
html.light-mode #spec-to-tests,
html.light-mode #power-optimization,
html.light-mode #autonomous-root-cause,
html.light-mode #security-privacy,
html.light-mode section.cursor-demo,
html.light-mode #ts-comparison,
html.light-mode footer { background: #f9f7fd !important; }
/* security "Your Data" box + the area inside the green ring: match, not bright white */
html.light-mode #security-privacy .perimeter-core { background: #f9f7fd !important; }

/* --- NAV: more transparent frosted glass (was too white) --- */
html.light-mode nav::before { background: rgba(255, 255, 255, 0.18) !important; backdrop-filter: blur(13px) saturate(150%) !important; -webkit-backdrop-filter: blur(13px) saturate(150%) !important; }
html.light-mode nav.floating::before { background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(13px) saturate(160%) !important; -webkit-backdrop-filter: blur(13px) saturate(160%) !important; }
html.light-mode nav:hover::before { background: rgba(255, 255, 255, 0.28) !important; }

/* --- COMPARISON: header stays white; restore the purple bg on the BODY rows
       of the AssembleAI column (a readable light-purple, since text is dark). --- */
html.light-mode .ts-comparison-assemble-head { background: transparent !important; }
html.light-mode .ts-comparison-body-row .ts-comparison-assemble { background: rgba(124, 102, 220, 0.12) !important; }

/* --- CTAs ("Get Started", "Schedule a Call", etc.): LIGHT purple + iPhone-style
       glow. 2026-07-30: owner moved the fill up two steps (#8b5cf6 -> #c4b5fd)
       with near-black text so the buttons match the site's dark-text day
       treatment; hover nudges slightly deeper. --- */
html.light-mode .btn-primary {
    background: #c4b5fd !important;
    border: 1px solid #c4b5fd !important;
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4) !important;
}
html.light-mode .btn-primary:hover {
    background: #b7a2fb !important;
    border: 1px solid #b7a2fb !important;
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.6) !important;
}
/* --- "Get Started" glint label, day mode: PURE-BLACK base + a slight weight
       bump so the label reads bold on the light-purple fill, under the same
       traveling white specular sweep (white flash over black glyphs).
       Dark mode keeps the original white->#999 treatment untouched. --- */
html.light-mode .cta-glint-text {
    /* NO !important on any background-* here: author !important declarations
       beat CSS animations, so an important background/position would freeze
       the logoGlint sweep at 100% (off-glyph) and the glint never shows.
       Specificity alone beats the base .cta-glint-text rule. */
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(to bottom, #000000 0%, #000000 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: logoGlint 4s linear 1.5s infinite;
    /* NO font-weight change: day metrics must stay byte-identical to night
       (a 600 weight widened the label and grew the nav button — reverted) */
}

/* Light-mode round 6 */

/* ======================= <style id="assemble-light-mode-fixes-6"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 6 — square headshots + match Part-Of/Menlo size to night
   ============================================================================ */

/* --- TEAM HEADSHOTS: GRAY square box (rounded-square frame), not a circle.
       Border width MUST match night mode's 2px so the rendered photo is the
       exact same size in day mode and night mode (box-sizing: border-box, so a
       thicker border would shrink the visible image). --- */
html.light-mode section.team#team img.team-image,
html.light-mode .team img.team-image {
    border-radius: 12px !important;
    border: 2px solid #c7c7cc !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 8px 22px rgba(0,0,0,0.12) !important;
}


/* --- MENLO (day swap = Wikimedia): cap to night's width so it isn't larger --- */
html.light-mode img[alt="Menlo Ventures"] { max-width: 92px !important; max-height: 36px !important; }

/* Light-mode round 7 */

/* ======================= <style id="assemble-light-mode-fixes-7"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 7
   ============================================================================ */

/* --- NAV: the nav ELEMENT had an opaque white bg (0.72 / 0.88 floating) that
       masked the frosted ::before. Make the element transparent so the
       blurred ::before (the real frosted glass) shows through. --- */
html.light-mode nav,
html.light-mode nav.floating { background: transparent !important; }

/* --- ALL SECTIONS one identical purple-tinted bg. Uses `section[style]`
       (every section has an inline style) under #desktop/#mobile-version so the
       specificity (1,2,2) beats the per-section `#id[style*="#0C0A10"]` white
       rules (1,2,1). Cards/panels are <div>s, so they stay white. --- */
html.light-mode #desktop-version section[style],
html.light-mode #desktop-version .hero[style],
html.light-mode #mobile-version section[style],
html.light-mode #mobile-version .hero[style],
html.light-mode footer[style] { background: #f9f7fd !important; }

/* Light-mode round 8: headline gradients */

/* ======================= <style id="assemble-light-mode-fixes-8"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 8 — large headlines get the night-mode reflection gradient,
   in a dark tone for light bg (top #1d1d1f fading to grey), plus the same
   glint band the nav wordmark carries (highlight capped at 0.6 alpha like the
   light-mode .logo-text so the letters never wash out). Longhands, not the
   `background` shorthand: an !important shorthand resets background-position
   with importance, which would freeze the sweep; the sweep instead rides
   --glintX (animated by headingGlint), which !important cannot pin.
   Only the BIG headlines (section h2s; hero h1 gets the same dark metal in
   its own band-free rule below); NOT founder names (h3) or
   labels. #desktop/#mobile-version prefix gives specificity (1,2,2) to beat
   the per-heading solid-dark flatten rules (e.g. #team h2[...] at (1,2,1)).
   ============================================================================ */
html.light-mode section.team#team h2,
html.light-mode section.team#team h2[style*="transparent"],
html.light-mode .glint-heading,
html.light-mode #desktop-version .section-header h2,
html.light-mode #desktop-version h2[style*="-webkit-text-fill-color: transparent"],
html.light-mode #mobile-version .section-header h2,
html.light-mode #mobile-version h2[style*="-webkit-text-fill-color: transparent"] {
    background-image:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 58%),
        linear-gradient(to bottom, #1d1d1f 0%, #6e6e73 100%) !important;
    background-size: 250% 100%, 100% 100% !important;
    background-position: var(--glintX) 0, 0 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Hero h1: same dark-metal reflection gradient as the section h2s above, but
   WITHOUT the specular glint band — the hero headline's glint was removed
   2026-09-21 (dark-mode base rules in index.html match). Same specificity +
   !important so it still beats the earlier solid-dark flatten rules. */
html.light-mode #desktop-version .hero-content h1,
html.light-mode #desktop-version .hero h1,
html.light-mode #mobile-version .hero-content h1,
html.light-mode #mobile-version .hero h1 {
    background-image: linear-gradient(to bottom, #1d1d1f 0%, #6e6e73 100%) !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Light-mode round 9: real logo images */

/* ======================= <style id="assemble-light-mode-fixes-9"> ======================= */

/* ============================================================================
   LIGHT-MODE ROUND 9 — new logo images are swapped onto the night <img>
   elements (so they render at the EXACT night dimensions). Retire the HTML
   composites; make sure the (swapped) rasters show in day.
   ============================================================================ */
html.light-mode .backed-by-box a img[alt="Partner Logo"],
html.light-mode .backed-by-box a img[alt="Nvidia"],
html.light-mode .backed-by-box a img[alt="Google Cloud"] { display: inline-block !important; }