/* ================================================================
 * Molkit Theme-Aware SVG Styles
 * Shared between ChemAcademy site and svg-viewer.
 *
 * Scoped to .mkit container class for isolation from non-molkit SVGs.
 *
 * Dark triggers:
 *   Site:   body.quarto-dark
 *   Viewer: body.dark
 *
 * Architecture:
 *   Light mode rules are the BASELINE (no body class needed).
 *   They always apply, defeating the SVG's embedded
 *   @media (prefers-color-scheme: dark) when OS is dark but page is light.
 *   Dark mode rules override the baseline when .quarto-dark or .dark is set.
 *
 * !important policy:
 *   - Bond stroke (mk-bond, mk-dash, mk-cap): NO !important
 *     (preserves inline stroke: url(#gradient) for bicolored bonds)
 *   - Element fill colors: YES !important
 *     (must override SVG's embedded @media rules)
 *   - Structural overrides (stroke:none, fill:none): YES !important
 * ================================================================ */


/* ================================================================
 * 1. LIGHT MODE BASELINE
 * ================================================================ */

/* --- 1a. Page background variable + text rendering reset --- */
.mkit { --mk-page-bg: #ffffff; }
/* Prevent inherited page CSS (Bootstrap body font, line-height, spacing)
   from affecting SVG text rendering when inlined in HTML documents. */
.mkit text,
.mkit tspan {
  line-height: normal !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-indent: 0 !important;
  text-transform: none !important;
}

/* --- 1b. Structural elements --- */

/* Bond lines — NO !important (preserves inline gradient url() for bicolored bonds) */
.mkit .mk-bond,
.mkit .mk-dash              { stroke: #000000; }
.mkit .mk-aromatic,
.mkit .mk-deloc-arc         { stroke: #000000 !important; }

/* Bond fills — mk-cap: NO !important (gradient); others: !important */
.mkit .mk-wedge             { fill: #000000 !important; stroke: #000000 !important; }
.mkit .mk-wedge-outline     { stroke: #000000 !important; }
.mkit .mk-double-x,
.mkit .mk-vertex            { fill: #000000 !important; }
.mkit .mk-cap               { fill: #000000; }

/* Lone pairs and radicals */
.mkit .mk-lp,
.mkit .mk-radical           { fill: #000000 !important; }
.mkit line.mk-lp            { stroke: #000000 !important; }
.mkit circle.mk-lp,
.mkit circle.mk-radical     { stroke: none !important; }

/* Charges — structural only (color comes from element classes) */
.mkit .mk-charge-circle         { fill: none !important; }
.mkit text.mk-charge-label      { stroke: none !important; }
.mkit line.mk-charge-label      { fill: none !important; }

/* foreignObject text */
.mkit .mk-fo-text           { color: #1a1a1a !important; }

/* Catch-all for annotations/shapes using default bond color */
.mkit .mk-dflt-fill         { fill: #000000 !important; }
.mkit .mk-dflt-stroke       { stroke: #000000 !important; }

/* --- 1c. Background-dependent elements --- */
.mkit .mk-bg                { fill: #ffffff !important; }
.mkit .mk-underlay          { stroke: #ffffff !important; }
.mkit .mk-halo              { fill: #ffffff !important; }
.mkit .mk-newman-bg         { fill: #ffffff !important; }

/* --- 1d. Element colors (standard light-mode palette) ---
   fill + color only — no stroke on the blanket rule (prevents LP/radical
   circles from getting visible outlines). Line elements (LP bars, charge
   lines) get stroke via separate line.mk-{Element} rules below. */

/* Black elements (C, H) */
.mkit .mk-C,
.mkit .mk-H                 { fill: #000000 !important; color: #000000; }
.mkit line.mk-C,
.mkit line.mk-H              { stroke: #000000 !important; }

/* Core colored elements */
.mkit .mk-O                 { fill: #ff0000 !important; color: #ff0000; }
.mkit line.mk-O              { stroke: #ff0000 !important; }
.mkit .mk-N                 { fill: #0000ff !important; color: #0000ff; }
.mkit line.mk-N              { stroke: #0000ff !important; }
.mkit .mk-S                 { fill: #808000 !important; color: #808000; }
.mkit line.mk-S              { stroke: #808000 !important; }

/* Orange group (P, Fe, Cu, B, Au) */
.mkit .mk-P,
.mkit .mk-Fe,
.mkit .mk-Cu,
.mkit .mk-B,
.mkit .mk-Au                { fill: #ff8000 !important; color: #ff8000; }
.mkit line.mk-P,
.mkit line.mk-Fe,
.mkit line.mk-Cu,
.mkit line.mk-B,
.mkit line.mk-Au             { stroke: #ff8000 !important; }

/* Green group (F, Cl, Mg) */
.mkit .mk-F,
.mkit .mk-Cl,
.mkit .mk-Mg                { fill: #00ff00 !important; color: #00ff00; }
.mkit line.mk-F,
.mkit line.mk-Cl,
.mkit line.mk-Mg             { stroke: #00ff00 !important; }

/* Maroon (Br) */
.mkit .mk-Br                { fill: #800000 !important; color: #800000; }
.mkit line.mk-Br             { stroke: #800000 !important; }

/* Violet group (I, Li, Na, K) */
.mkit .mk-I,
.mkit .mk-Li,
.mkit .mk-Na,
.mkit .mk-K                 { fill: #800080 !important; color: #800080; }
.mkit line.mk-I,
.mkit line.mk-Li,
.mkit line.mk-Na,
.mkit line.mk-K              { stroke: #800080 !important; }

/* Gray group (Ca, Zn, Be, Al, Si, Ag) */
.mkit .mk-Ca,
.mkit .mk-Zn,
.mkit .mk-Be,
.mkit .mk-Al,
.mkit .mk-Si,
.mkit .mk-Ag                { fill: #808080 !important; color: #808080; }
.mkit line.mk-Ca,
.mkit line.mk-Zn,
.mkit line.mk-Be,
.mkit line.mk-Al,
.mkit line.mk-Si,
.mkit line.mk-Ag             { stroke: #808080 !important; }

/* --- 1e. Catch-all for atom labels without a known element color rule ---
   Elements like He, Ne, Ar etc. get mk-{element} classes but no CSS is
   generated for them. This ensures they default to bond color. */
.mkit text.mk-atom          { fill: #000000; }

/* --- 1f. Structural overrides after element colors --- */
.mkit text.atom-label       { stroke: none !important; }
.mkit .lone-pair circle     { stroke: none !important; }

/* --- 1g. Suppress link hover outline on inline SVG elements --- */
.mkit a.svg-link:hover,
.mkit a.svg-link:focus      { outline: none; text-decoration: none; }
a.svg-link:hover svg text,
a.svg-link:focus svg text   { outline: none; }

/* --- 1f. Bond formation glow (warm amber for light backgrounds) --- */
.mkit .mk-glow-flood        { flood-color: #FFB928 !important; }

/* --- 1g. Gradient stop-color force (defeats SVG @media dark remapping) --- */
/* Note: stop selectors do not need .mkit scoping (match within SVG defs) */
.mkit stop[stop-color="#000000"] { stop-color: #000000 !important; }
.mkit stop[stop-color="#ff0000"] { stop-color: #ff0000 !important; }
.mkit stop[stop-color="#0000ff"] { stop-color: #0000ff !important; }
.mkit stop[stop-color="#808000"] { stop-color: #808000 !important; }
.mkit stop[stop-color="#ff8000"] { stop-color: #ff8000 !important; }
.mkit stop[stop-color="#00ff00"] { stop-color: #00ff00 !important; }
.mkit stop[stop-color="#800000"] { stop-color: #800000 !important; }
.mkit stop[stop-color="#800080"] { stop-color: #800080 !important; }
.mkit stop[stop-color="#808080"] { stop-color: #808080 !important; }


/* ================================================================
 * 2. DARK MODE OVERRIDES
 *    Site: body.quarto-dark   Viewer: body.dark
 *    Every rule has dual selectors for both triggers.
 * ================================================================ */

/* --- 2a. Page background variable --- */
body.quarto-dark .mkit,
body.dark .mkit              { --mk-page-bg: #0b0c14; }

/* --- 2b. Inversion guard (prevent blanket filter on molkit SVGs) --- */
body.quarto-dark .mkit:has(.mk-bond),
body.dark .mkit:has(.mk-bond) { filter: none !important; }

/* --- 2c. Structural elements --- */

/* Bond lines — NO !important (preserves inline gradient url()) */
body.quarto-dark .mkit .mk-bond,
body.dark .mkit .mk-bond              { stroke: #e0e0e0; }
body.quarto-dark .mkit .mk-dash,
body.dark .mkit .mk-dash              { stroke: #e0e0e0; }
body.quarto-dark .mkit .mk-aromatic,
body.dark .mkit .mk-aromatic          { stroke: #e0e0e0 !important; }
body.quarto-dark .mkit .mk-deloc-arc,
body.dark .mkit .mk-deloc-arc         { stroke: #e0e0e0 !important; }

/* Bond fills — mk-cap: NO !important (gradient); others: !important */
body.quarto-dark .mkit .mk-wedge,
body.dark .mkit .mk-wedge             { fill: #e0e0e0 !important; stroke: #e0e0e0 !important; }
body.quarto-dark .mkit .mk-wedge-outline,
body.dark .mkit .mk-wedge-outline     { stroke: #e0e0e0 !important; }
body.quarto-dark .mkit .mk-double-x,
body.dark .mkit .mk-double-x         { fill: #e0e0e0 !important; }
body.quarto-dark .mkit .mk-cap,
body.dark .mkit .mk-cap               { fill: #e0e0e0; }
body.quarto-dark .mkit .mk-vertex,
body.dark .mkit .mk-vertex            { fill: #e0e0e0 !important; }

/* Lone pairs and radicals — circles: fill only; lines: stroke */
body.quarto-dark .mkit .mk-lp,
body.dark .mkit .mk-lp,
body.quarto-dark .mkit .mk-radical,
body.dark .mkit .mk-radical           { fill: #e0e0e0 !important; }
body.quarto-dark .mkit line.mk-lp,
body.dark .mkit line.mk-lp            { stroke: #e0e0e0 !important; }
body.quarto-dark .mkit circle.mk-lp,
body.dark .mkit circle.mk-lp,
body.quarto-dark .mkit circle.mk-radical,
body.dark .mkit circle.mk-radical     { stroke: none !important; }

/* Charges — structural only (color comes from element classes) */
body.quarto-dark .mkit .mk-charge-circle,
body.dark .mkit .mk-charge-circle         { fill: none !important; }
body.quarto-dark .mkit text.mk-charge-label,
body.dark .mkit text.mk-charge-label      { stroke: none !important; }
body.quarto-dark .mkit line.mk-charge-label,
body.dark .mkit line.mk-charge-label      { fill: none !important; }

/* foreignObject text */
body.quarto-dark .mkit .mk-fo-text,
body.dark .mkit .mk-fo-text           { color: #f0f0f0 !important; }

/* Catch-all for annotations/shapes using default bond color */
body.quarto-dark .mkit .mk-dflt-fill,
body.dark .mkit .mk-dflt-fill         { fill: #e0e0e0 !important; }
body.quarto-dark .mkit .mk-dflt-stroke,
body.dark .mkit .mk-dflt-stroke       { stroke: #e0e0e0 !important; }

/* --- 2d. Background-dependent elements --- */
body.quarto-dark .mkit .mk-bg,
body.dark .mkit .mk-bg                { fill: transparent !important; }
body.quarto-dark .mkit .mk-underlay,
body.dark .mkit .mk-underlay          { stroke: #0b0c14 !important; }
body.quarto-dark .mkit .mk-halo,
body.dark .mkit .mk-halo              { fill: #0b0c14 !important; }
body.quarto-dark .mkit .mk-newman-bg,
body.dark .mkit .mk-newman-bg         { fill: #0b0c14 !important; }

/* --- 2e. Element colors (Tailwind 500-series for vibrancy on #0b0c14) ---
   fill + color only — stroke scoped to line elements (same pattern as light mode). */

/* Black -> near-white (C, H) */
body.quarto-dark .mkit .mk-C,
body.dark .mkit .mk-C,
body.quarto-dark .mkit .mk-H,
body.dark .mkit .mk-H                 { fill: #e0e0e0 !important; color: #e0e0e0; }
body.quarto-dark .mkit line.mk-C,
body.dark .mkit line.mk-C,
body.quarto-dark .mkit line.mk-H,
body.dark .mkit line.mk-H              { stroke: #e0e0e0 !important; }

/* Core colored elements */
body.quarto-dark .mkit .mk-O,
body.dark .mkit .mk-O                 { fill: #ef4444 !important; color: #ef4444; }
body.quarto-dark .mkit line.mk-O,
body.dark .mkit line.mk-O              { stroke: #ef4444 !important; }
body.quarto-dark .mkit .mk-N,
body.dark .mkit .mk-N                 { fill: #3b82f6 !important; color: #3b82f6; }
body.quarto-dark .mkit line.mk-N,
body.dark .mkit line.mk-N              { stroke: #3b82f6 !important; }
body.quarto-dark .mkit .mk-S,
body.dark .mkit .mk-S                 { fill: #eab308 !important; color: #eab308; }
body.quarto-dark .mkit line.mk-S,
body.dark .mkit line.mk-S              { stroke: #eab308 !important; }

/* Orange group (P, Fe, Cu, B, Au) */
body.quarto-dark .mkit .mk-P,
body.dark .mkit .mk-P,
body.quarto-dark .mkit .mk-Fe,
body.dark .mkit .mk-Fe,
body.quarto-dark .mkit .mk-Cu,
body.dark .mkit .mk-Cu,
body.quarto-dark .mkit .mk-B,
body.dark .mkit .mk-B,
body.quarto-dark .mkit .mk-Au,
body.dark .mkit .mk-Au                { fill: #f97316 !important; color: #f97316; }
body.quarto-dark .mkit line.mk-P,
body.dark .mkit line.mk-P,
body.quarto-dark .mkit line.mk-Fe,
body.dark .mkit line.mk-Fe,
body.quarto-dark .mkit line.mk-Cu,
body.dark .mkit line.mk-Cu,
body.quarto-dark .mkit line.mk-B,
body.dark .mkit line.mk-B,
body.quarto-dark .mkit line.mk-Au,
body.dark .mkit line.mk-Au             { stroke: #f97316 !important; }

/* Green group (F, Cl, Mg) */
body.quarto-dark .mkit .mk-F,
body.dark .mkit .mk-F,
body.quarto-dark .mkit .mk-Cl,
body.dark .mkit .mk-Cl,
body.quarto-dark .mkit .mk-Mg,
body.dark .mkit .mk-Mg                { fill: #22c55e !important; color: #22c55e; }
body.quarto-dark .mkit line.mk-F,
body.dark .mkit line.mk-F,
body.quarto-dark .mkit line.mk-Cl,
body.dark .mkit line.mk-Cl,
body.quarto-dark .mkit line.mk-Mg,
body.dark .mkit line.mk-Mg             { stroke: #22c55e !important; }

/* Maroon -> burnt orange (Br) */
body.quarto-dark .mkit .mk-Br,
body.dark .mkit .mk-Br                { fill: #ea580c !important; color: #ea580c; }
body.quarto-dark .mkit line.mk-Br,
body.dark .mkit line.mk-Br             { stroke: #ea580c !important; }

/* Violet group (I, Li, Na, K) */
body.quarto-dark .mkit .mk-I,
body.dark .mkit .mk-I,
body.quarto-dark .mkit .mk-Li,
body.dark .mkit .mk-Li,
body.quarto-dark .mkit .mk-Na,
body.dark .mkit .mk-Na,
body.quarto-dark .mkit .mk-K,
body.dark .mkit .mk-K                 { fill: #8b5cf6 !important; color: #8b5cf6; }
body.quarto-dark .mkit line.mk-I,
body.dark .mkit line.mk-I,
body.quarto-dark .mkit line.mk-Li,
body.dark .mkit line.mk-Li,
body.quarto-dark .mkit line.mk-Na,
body.dark .mkit line.mk-Na,
body.quarto-dark .mkit line.mk-K,
body.dark .mkit line.mk-K              { stroke: #8b5cf6 !important; }

/* Gray group (Ca, Zn, Be, Al, Si, Ag) — gray-300 for visibility */
body.quarto-dark .mkit .mk-Ca,
body.dark .mkit .mk-Ca,
body.quarto-dark .mkit .mk-Zn,
body.dark .mkit .mk-Zn,
body.quarto-dark .mkit .mk-Be,
body.dark .mkit .mk-Be,
body.quarto-dark .mkit .mk-Al,
body.dark .mkit .mk-Al,
body.quarto-dark .mkit .mk-Si,
body.dark .mkit .mk-Si,
body.quarto-dark .mkit .mk-Ag,
body.dark .mkit .mk-Ag                { fill: #d1d5db !important; color: #d1d5db; }
body.quarto-dark .mkit line.mk-Ca,
body.dark .mkit line.mk-Ca,
body.quarto-dark .mkit line.mk-Zn,
body.dark .mkit line.mk-Zn,
body.quarto-dark .mkit line.mk-Be,
body.dark .mkit line.mk-Be,
body.quarto-dark .mkit line.mk-Al,
body.dark .mkit line.mk-Al,
body.quarto-dark .mkit line.mk-Si,
body.dark .mkit line.mk-Si,
body.quarto-dark .mkit line.mk-Ag,
body.dark .mkit line.mk-Ag             { stroke: #d1d5db !important; }

/* --- 2f. Catch-all for atom labels without a known element color rule ---
   Elements not in DEFAULT_ELEMENT_COLORS (He, Ne, Ar, etc.) default to
   near-white in dark mode so they're readable on dark backgrounds. */
body.quarto-dark .mkit text.mk-atom,
body.dark .mkit text.mk-atom          { fill: #e0e0e0; }

/* --- 2g. Structural overrides after element colors --- */
body.quarto-dark .mkit text.atom-label,
body.dark .mkit text.atom-label       { stroke: none !important; }
body.quarto-dark .mkit .lone-pair circle,
body.dark .mkit .lone-pair circle     { stroke: none !important; }

/* --- 2g. Bond formation glow (brighter amber for dark background) --- */
body.quarto-dark .mkit .mk-glow-flood,
body.dark .mkit .mk-glow-flood        { flood-color: #FBBF24 !important; }

/* --- 2h. Gradient stop-color remapping (Tailwind 500-series) ---
   Remaps gradient stop colors so bicolored bond gradients (e.g. C-O: black->red)
   display with dark-mode colors (e.g. #e0e0e0->#ef4444) instead of going solid. */
body.quarto-dark .mkit stop[stop-color="#000000"],
body.dark .mkit stop[stop-color="#000000"] { stop-color: #e0e0e0 !important; }
body.quarto-dark .mkit stop[stop-color="#ff0000"],
body.dark .mkit stop[stop-color="#ff0000"] { stop-color: #ef4444 !important; }
body.quarto-dark .mkit stop[stop-color="#0000ff"],
body.dark .mkit stop[stop-color="#0000ff"] { stop-color: #3b82f6 !important; }
body.quarto-dark .mkit stop[stop-color="#808000"],
body.dark .mkit stop[stop-color="#808000"] { stop-color: #eab308 !important; }
body.quarto-dark .mkit stop[stop-color="#ff8000"],
body.dark .mkit stop[stop-color="#ff8000"] { stop-color: #f97316 !important; }
body.quarto-dark .mkit stop[stop-color="#00ff00"],
body.dark .mkit stop[stop-color="#00ff00"] { stop-color: #22c55e !important; }
body.quarto-dark .mkit stop[stop-color="#800000"],
body.dark .mkit stop[stop-color="#800000"] { stop-color: #ea580c !important; }
body.quarto-dark .mkit stop[stop-color="#800080"],
body.dark .mkit stop[stop-color="#800080"] { stop-color: #8b5cf6 !important; }
body.quarto-dark .mkit stop[stop-color="#808080"],
body.dark .mkit stop[stop-color="#808080"] { stop-color: #d1d5db !important; }


/* ================================================================
 * 3. CYBERPUNK GLOW EFFECTS (dark mode only)
 * ================================================================
 * Matches ChemAcademy's cyberpunk vocabulary: dual-layer drop-shadows,
 * cyan for energy/quantum, magenta for reactive.
 * To revert: delete this entire section -- baseline sections 1-2 are untouched.
 * ================================================================ */

/* --- 3a. Heteroatom labels -- dual-layer color-matched glows ---
   C/H excluded: structural backbone, no glow to avoid noise */

body.quarto-dark .mkit .mk-O,
body.dark .mkit .mk-O {
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.7))
          drop-shadow(0 0 12px rgba(239, 68, 68, 0.25));
}
body.quarto-dark .mkit .mk-N,
body.dark .mkit .mk-N {
  filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.7))
          drop-shadow(0 0 12px rgba(59, 130, 246, 0.25));
}
body.quarto-dark .mkit .mk-S,
body.dark .mkit .mk-S {
  filter: drop-shadow(0 0 4px rgba(234, 179, 8, 0.6))
          drop-shadow(0 0 12px rgba(234, 179, 8, 0.2));
}

body.quarto-dark .mkit .mk-P,
body.dark .mkit .mk-P,
body.quarto-dark .mkit .mk-Fe,
body.dark .mkit .mk-Fe,
body.quarto-dark .mkit .mk-Cu,
body.dark .mkit .mk-Cu,
body.quarto-dark .mkit .mk-B,
body.dark .mkit .mk-B,
body.quarto-dark .mkit .mk-Au,
body.dark .mkit .mk-Au {
  filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.6))
          drop-shadow(0 0 12px rgba(249, 115, 22, 0.2));
}

body.quarto-dark .mkit .mk-F,
body.dark .mkit .mk-F,
body.quarto-dark .mkit .mk-Cl,
body.dark .mkit .mk-Cl,
body.quarto-dark .mkit .mk-Mg,
body.dark .mkit .mk-Mg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6))
          drop-shadow(0 0 12px rgba(34, 197, 94, 0.2));
}

body.quarto-dark .mkit .mk-Br,
body.dark .mkit .mk-Br {
  filter: drop-shadow(0 0 4px rgba(234, 88, 12, 0.6))
          drop-shadow(0 0 12px rgba(234, 88, 12, 0.2));
}

body.quarto-dark .mkit .mk-I,
body.dark .mkit .mk-I,
body.quarto-dark .mkit .mk-Li,
body.dark .mkit .mk-Li,
body.quarto-dark .mkit .mk-Na,
body.dark .mkit .mk-Na,
body.quarto-dark .mkit .mk-K,
body.dark .mkit .mk-K {
  filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.6))
          drop-shadow(0 0 12px rgba(139, 92, 246, 0.2));
}

/* --- 3b. Aromatic rings & delocalization -- cyan holographic --- */
body.quarto-dark .mkit .mk-aromatic,
body.dark .mkit .mk-aromatic {
  stroke: #00d9ff !important;
  filter: drop-shadow(0 0 4px rgba(0, 217, 255, 0.5))
          drop-shadow(0 0 10px rgba(0, 217, 255, 0.2));
}
body.quarto-dark .mkit .mk-deloc-arc,
body.dark .mkit .mk-deloc-arc {
  stroke: #00d9ff !important;
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.4));
}

/* --- 3c. Lone pairs -- cyan for LINE representation only ---
   Dot-based LPs use element classes (mk-O, mk-N, etc.) for their color.
   Bare mk-lp dots (He, Ne — no element class) default to gray from
   section 2c baseline. Only line-based LPs get cyan. */
body.quarto-dark .mkit line.mk-lp,
body.dark .mkit line.mk-lp {
  stroke: #00d9ff !important;
}

/* --- 3d. Radicals -- element-colored (radical-dot carries mk-O, mk-N, etc.)
   Structural stroke:none override only; NO dead fill rule (radicals use element classes) --- */
body.quarto-dark .mkit circle.radical-dot,
body.dark .mkit circle.radical-dot {
  stroke: none !important;
}

/* --- 3e. Electron-flow arrows -- dual-layer cyan ---
   Scoped to .annotation-group to avoid turning atom label tspans cyan
   (mk-dflt-fill is shared between annotations and atom label H/subscripts) */
body.quarto-dark .mkit .annotation-group .mk-dflt-stroke,
body.dark .mkit .annotation-group .mk-dflt-stroke {
  stroke: #00d9ff !important;
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.6))
          drop-shadow(0 0 8px rgba(0, 217, 255, 0.25));
}
body.quarto-dark .mkit .annotation-group .mk-dflt-fill,
body.dark .mkit .annotation-group .mk-dflt-fill {
  fill: #00d9ff !important;
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.6))
          drop-shadow(0 0 8px rgba(0, 217, 255, 0.25));
}

/* --- 3f. Bonds -- faint cyan holographic grid --- */
body.quarto-dark .mkit .mk-bond,
body.dark .mkit .mk-bond {
  filter: drop-shadow(0 0 2px rgba(0, 217, 255, 0.15));
}

/* --- 3g. Wedge bonds -- cyan 3D depth glow --- */
body.quarto-dark .mkit .mk-wedge,
body.dark .mkit .mk-wedge {
  filter: drop-shadow(0 0 3px rgba(0, 217, 255, 0.3));
}

/* --- 3h. Newman projection -- cyan ring --- */
body.quarto-dark .mkit .mk-newman-bg,
body.dark .mkit .mk-newman-bg {
  filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.3));
}

/* --- 3i. Radical pulse animation (defined once, referenced by .mk-radical) --- */
@keyframes radical-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255, 0, 124, 0.6))
            drop-shadow(0 0 8px rgba(255, 0, 124, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(255, 0, 124, 0.8))
            drop-shadow(0 0 14px rgba(255, 0, 124, 0.4));
  }
}
/* Radical fill override: magenta for cyberpunk effect */
body.quarto-dark .mkit .mk-radical,
body.dark .mkit .mk-radical {
  fill: #ff007c !important;
  /* animation: radical-pulse 2s ease-in-out infinite; -- disabled: drop-shadow kills perf with animated SVGs */
}

/* --- 3j. Kill ALL filters in animated containers ---
   SMIL animation + CSS drop-shadow filters = GPU thrash on every frame.
   Static SVGs keep their glows; animated SVGs get clean rendering.
   Covers: svg-player (single animated), svg-toggle-anim (toggle mode),
   and .mkit.svg-player (viewer where both classes are on same element). */
body.quarto-dark .mkit.svg-player *,
body.dark .mkit.svg-player *,
body.quarto-dark .mkit .svg-toggle-anim *,
body.dark .mkit .svg-toggle-anim *,
body.quarto-dark .svg-player .mkit *,
body.dark .svg-player .mkit * {
  filter: none !important;
}