/* GENERATED by build.mjs from frontend/css/ — do not edit. */
/* latexblocks standalone stylesheet.
   Source of truth for block cards, reference links, tooltips, embeds,
   the Referenced-by panel, and MathML fixups. Every custom property has
   a site-overridable definition below: load this file BEFORE the site
   theme so the site's :root values win. */
/* Needed by the Referenced-by panel's mobile block (copied from
   block-index.module.css 132-141); value from mathnotes main.css:19.
   Without this declaration postcss ships a literal `@media (--phone)`,
   which browsers silently ignore. */

/* ===== Variable prelude: values copied from mathnotes styles/theme.css.
   These are fallbacks — a site theme loaded AFTER this file overrides them. */
:root {
  /* ===== CORE COLOR PALETTE ===== */
  /* Base colors - everything else derives from these */
  
  /* Brand colors */
  --base-primary: oklch(64% 0.20 252);      /* Blue */
  --base-accent: oklch(70% 0.2 30);         /* Orange accent */
  
  /* Semantic colors */
  --base-error: oklch(53% 0.24 29);         /* Red */
  --base-success: oklch(55% 0.13 150);      /* Green */
  --base-warning: oklch(63% 0.20 40);       /* Yellow/Orange */
  --base-info: oklch(64% 0.04 220);         /* Light blue */
  
  /* Math content type colors */
  --base-math-definition: oklch(56% 0.13 252);    /* Blue */
  --base-math-theorem: oklch(60% 0.15 142);       /* Green */
  --base-math-proof: oklch(40% 0.05 250);         /* Dark blue */
  --base-math-example: oklch(55% 0.13 150);       /* Green */
  --base-math-note: oklch(50% 0.06 250);          /* Muted blue */
  
  /* Neutrals for light mode */
  --base-neutral-0: oklch(100% 0 0);        /* Pure white */
  --base-neutral-100: oklch(98% 0.01 100);  /* Off-white */
  --base-neutral-200: oklch(96% 0.01 100);  /* Light gray */
  --base-neutral-300: oklch(91% 0.01 210);  /* Gray */
  --base-neutral-700: oklch(52% 0.03 210);  /* Dark gray */
  --base-neutral-800: oklch(26% 0.02 100);  /* Near black */
  --base-neutral-900: oklch(0% 0 0);        /* Pure black */
  
  /* ===== DERIVED COLORS ===== */
  /* All other colors are calculated from the base palette */
  
  /* Primary variations */
  --color-primary: var(--base-primary);
  --color-primary-light: color-mix(in oklch, var(--base-primary) 10%, transparent);
  --color-primary-dark: oklch(52% 0.22 252);
  --color-primary-hover: color-mix(in oklch, var(--base-primary) 10%, transparent);
  --color-primary-active: color-mix(in oklch, var(--base-primary) 20%, transparent);
  
  /* Accent */
  --color-accent: var(--base-accent);
  
  /* Background colors */
  --color-bg: var(--base-neutral-100);
  --color-bg-secondary: var(--base-neutral-0);
  --color-card-bg: var(--base-neutral-0);
  --color-code-bg: oklch(97% 0.01 210);
  
  /* Text colors */
  --color-text: var(--base-neutral-800);
  --color-text-secondary: var(--base-neutral-700);
  --color-heading: var(--base-neutral-800);
  
  /* Interactive elements */
  --color-link: var(--color-primary);
  --color-link-hover: oklch(58% 0.22 252);
  --color-button-bg: var(--base-neutral-200);
  --color-button-hover: var(--base-neutral-300);
  --color-button-text: var(--base-neutral-800);
  
  /* Borders */
  --color-border: var(--base-neutral-300);
  --color-border-light: oklch(94% 0.01 100);
  
  /* State colors */
  --color-error: var(--base-error);
  --color-error-bg: oklch(95% 0.09 25);
  --color-error-border: var(--base-error);
  --color-error-text-dark: oklch(35% 0.15 29);
  --color-info-bg: color-mix(in oklch, var(--base-info) 15%, var(--color-bg));
  
  /* Overlays - all derived from black/white with alpha */
  --color-overlay-light: color-mix(in oklch, var(--base-neutral-900) 2%, transparent);
  --color-overlay-medium: color-mix(in oklch, var(--base-neutral-900) 5%, transparent);
  --color-overlay-dark: color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
  --color-spinner-border: color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
  
  /* Tooltip colors */
  --color-tooltip-bg: var(--base-neutral-0);
  --color-tooltip-footer-bg: var(--base-neutral-100);
  
  /* Math block colors - using base colors directly */
  --color-definition: var(--base-math-definition);
  --color-theorem: var(--base-math-theorem);
  --color-lemma: oklch(58% 0.14 241);
  --color-proposition: oklch(62% 0.12 230);
  --color-corollary: oklch(54% 0.08 250);
  --color-axiom: oklch(55% 0.16 280);
  --color-proof: var(--base-math-proof);
  --color-example: var(--base-math-example);
  --color-remark: var(--base-math-note);
  --color-note: var(--base-math-note);
  --color-intuition: oklch(65% 0.12 180);
  --color-exercise: var(--base-math-definition);
  --color-solution: var(--base-math-note);
  
  /* Math tooltip type colors - reuse base colors where appropriate */
  --color-type-definition: oklch(60% 0.17 252);
  --color-type-theorem: var(--base-error);
  --color-type-proposition: oklch(55% 0.18 300);
  --color-type-lemma: var(--base-warning);
  --color-type-corollary: oklch(50% 0.15 142);
  --color-type-axiom: oklch(58% 0.16 280);
  --color-type-example: oklch(52% 0.12 85);
  --color-type-note: oklch(48% 0.06 250);
  
  /* Nested math block overlays - all using color-mix for consistency */
  --color-nested-definition: color-mix(in oklch, var(--color-definition) 3%, transparent);
  --color-nested-theorem: color-mix(in oklch, var(--color-theorem) 3%, transparent);
  --color-nested-lemma: color-mix(in oklch, var(--color-lemma) 3%, transparent);
  --color-nested-proposition: color-mix(in oklch, var(--color-proposition) 3%, transparent);
  --color-nested-corollary: color-mix(in oklch, var(--color-corollary) 2.5%, transparent);
  --color-nested-axiom: color-mix(in oklch, var(--color-axiom) 3%, transparent);
  --color-nested-proof: color-mix(in oklch, var(--color-proof) 3%, transparent);
  --color-nested-example: color-mix(in oklch, var(--color-example) 3%, transparent);
  
  /* Embedded block overlays */
  --color-embedded-bg: color-mix(in oklch, var(--base-neutral-900) 3%, transparent);
  
  /* Component-specific */
  --color-slider-track-dark: oklch(30% 0 0);
  
  /* Named color aliases for compatibility */
  --color-white: var(--base-neutral-0);
  --color-black: var(--base-neutral-900);
  
  /* ===== SPACING SCALE ===== */
  --space-3xs: 0.125rem;  /* 2px */
  --space-2xs: 0.375rem;  /* 6px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  
  /* Micro spacing for precise UI adjustments */
  --space-micro-1: 2px;
  --space-micro-2: 4px;
  --space-micro-3: 6px;
  --space-micro-4: 8px;
  --space-micro-5: 10px;
  --space-micro-6: 12px;
  
  /* ===== TYPOGRAPHY ===== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.8;
  
  /* ===== BORDERS & RADIUS ===== */
  --border-width-thin: 1px;
  --border-width-base: 2px;
  --border-width-thick: 3px;
  --border-width-heavy: 4px;
  --border-width-extra: 5px;
  
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  
  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 color-mix(in oklch, var(--base-neutral-900) 5%, transparent);
  --shadow-md: 0 4px 6px -1px color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
  --shadow-lg: 0 10px 15px -3px color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
  --shadow-xl: 0 20px 25px -5px color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
  
  /* Component-specific shadows */
  --shadow-button: 0 2px 4px color-mix(in oklch, var(--base-neutral-900) 30%, transparent);
  --shadow-button-hover: 0 4px 8px color-mix(in oklch, var(--base-neutral-900) 40%, transparent);
  
  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* ===== Z-INDEX SCALE ===== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-tooltip: 500;
  
  /* ===== COMPONENT SIZES ===== */
  --size-input-sm: 100px;
  --size-input-base: 120px;
  --size-input-compact: 60px;
  --size-input-md: 160px;
  --size-input-lg: 200px;
  --size-button-icon: 16px;
  --size-thumb: 15px;
  --size-slider-track: 4px;
  --size-scrollbar: 8px;
  --size-tooltip-min: 200px;
  --size-tooltip-max: 500px;
  --size-spinner: 14px;
  --size-nav-button: 24px;
  --line-height-nav-button: 20px;
  
  /* ===== LAYOUT ===== */
  --width-content-base: 1200px;
  --width-content-wide: 1440px;
  --width-grid-min: 250px;
  --width-grid-min-sm: 150px;
  --width-card-min: 350px;
  
  --height-input-min: 60px;
  --height-card-sm: 200px;
  --height-card-base: 300px;
  --height-demo-min: 300px;
  
  --gap-xs: 10px;
  --gap-sm: 15px;
  --gap-base: 20px;
  --gap-lg: 30px;
  --gap-xl: 40px;
  --gap-2xl: 50px;
  
  /* ===== BREAKPOINTS ===== */
  /* IMPORTANT: CSS custom properties do NOT work in @media queries!
     These values must be hardcoded in all @media rules throughout the codebase.
     They are defined here for documentation purposes only.
     If you change these values, you must manually update all @media queries. */
  --breakpoint-phone: 640px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
  
  /* Container query breakpoints */
  --container-sm: 600px;
  --container-md: 900px;
  --container-lg: 1200px;
  
  /* ===== TRANSFORMS ===== */
  --translate-subtle: -1px;
  --translate-sm: -2px;
  --translate-base: 1rem;
  
  --outline-offset-sm: 2px;
  --outline-offset-base: 3px;

  /* --- Aliases consumed by the extracted rules but never defined in
     mathnotes theme.css; defined here so the standalone sheet is complete.
     Each derives from a theme var, so it tracks light/dark automatically. --- */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --color-text-muted: var(--color-text-secondary);
  --color-success: #1a7f37;
  --color-code-green: #1a7f37;
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --card-background: var(--color-card-bg);
  --border-color: var(--color-border);
}

/* Dark values for the same vars, copied from theme.css dark block. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Redefine base neutrals for dark mode */
    --base-neutral-0: oklch(15% 0.02 240);
    --base-neutral-100: oklch(18% 0.02 240);
    --base-neutral-200: oklch(22% 0.02 240);
    --base-neutral-300: oklch(30% 0.01 210);
    --base-neutral-700: oklch(65% 0.02 210);
    --base-neutral-800: oklch(85% 0.01 210);
    --base-neutral-900: oklch(100% 0 0);
    
    /* Adjust brand colors for dark mode */
    --base-primary: oklch(73% 0.15 220);
    --base-error: oklch(67% 0.24 25);
    
    /* Background colors automatically update via base neutrals */
    --color-bg: var(--base-neutral-0);
    --color-bg-secondary: var(--base-neutral-0);
    --color-card-bg: var(--base-neutral-200);
    --color-code-bg: var(--base-neutral-100);
    
    /* Text colors automatically update */
    --color-text: var(--base-neutral-800);
    --color-text-secondary: var(--base-neutral-700);
    --color-heading: oklch(96% 0.01 210);
    
    /* Interactive elements */
    --color-link-hover: oklch(68% 0.17 220);
    --color-button-bg: oklch(28% 0.02 240);
    --color-button-hover: oklch(34% 0.02 240);
    --color-button-text: var(--base-neutral-900);
    
    /* Borders */
    --color-border-light: oklch(26% 0.01 240);
    
    /* State colors */
    --color-error-bg: oklch(25% 0.10 25);
    --color-error-text-dark: oklch(90% 0.09 25);
    --color-info-bg: oklch(20% 0.05 220);
    
    /* Overlays - now using white instead of black */
    --color-overlay-light: color-mix(in oklch, var(--base-neutral-900) 2%, transparent);
    --color-overlay-medium: color-mix(in oklch, var(--base-neutral-900) 5%, transparent);
    --color-overlay-dark: color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
    --color-spinner-border: color-mix(in oklch, var(--base-neutral-900) 10%, transparent);
    
    /* Tooltip colors */
    --color-tooltip-bg: var(--base-neutral-100);
    --color-tooltip-footer-bg: var(--base-neutral-0);
    
    /* Math colors - slightly brighter for dark mode */
    --color-definition: oklch(65% 0.13 252);
    --color-theorem: oklch(68% 0.15 142);
    --color-lemma: oklch(66% 0.14 241);
    --color-proposition: oklch(70% 0.12 230);
    --color-corollary: oklch(62% 0.08 250);
    --color-axiom: oklch(64% 0.16 280);
    --color-proof: oklch(55% 0.05 250);
    --color-example: oklch(63% 0.13 150);
    --color-remark: oklch(60% 0.06 250);
    --color-note: oklch(60% 0.06 250);
    --color-intuition: oklch(72% 0.12 180);
    --color-exercise: oklch(65% 0.13 252);
    --color-solution: oklch(60% 0.06 250);
    
    /* Math tooltip type colors for dark mode */
    --color-type-definition: var(--base-primary);
    --color-type-theorem: var(--base-error);
    --color-type-proposition: oklch(75% 0.15 300);
    --color-type-lemma: oklch(72% 0.17 40);
    --color-type-corollary: oklch(65% 0.12 142);
    --color-type-axiom: oklch(68% 0.16 280);
    --color-type-example: oklch(70% 0.10 85);
    --color-type-note: oklch(65% 0.04 250);
    
    /* Nested overlays - increased opacity for dark mode */
    --color-nested-definition: color-mix(in oklch, var(--color-definition) 6%, transparent);
    --color-nested-theorem: color-mix(in oklch, var(--color-theorem) 6%, transparent);
    --color-nested-lemma: color-mix(in oklch, var(--color-lemma) 6%, transparent);
    --color-nested-proposition: color-mix(in oklch, var(--color-proposition) 6%, transparent);
    --color-nested-corollary: color-mix(in oklch, var(--color-corollary) 5%, transparent);
    --color-nested-axiom: color-mix(in oklch, var(--color-axiom) 6%, transparent);
    --color-nested-proof: color-mix(in oklch, var(--color-proof) 6%, transparent);
    --color-nested-example: color-mix(in oklch, var(--color-example) 6%, transparent);
    
    /* Embedded block overlays */
    --color-embedded-bg: color-mix(in oklch, var(--base-neutral-900) 3%, transparent);
    
    /* Darker shadows for dark mode */
    --shadow-sm: 0 1px 2px 0 color-mix(in oklch, var(--base-neutral-900) 20%, transparent);
    --shadow-md: 0 4px 6px -1px color-mix(in oklch, var(--base-neutral-900) 30%, transparent);
    --shadow-lg: 0 10px 15px -3px color-mix(in oklch, var(--base-neutral-900) 40%, transparent);
    --shadow-xl: 0 20px 25px -5px color-mix(in oklch, var(--base-neutral-900) 50%, transparent);
  }
}

/* ============================================================
   Block cards, reference links, embeds, tooltips
   (copied verbatim from mathnotes styles/main.css)
   ============================================================ */

/* Block reference links (for tooltips) */
.block-reference {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 0.5px;
  text-decoration-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}
.block-reference:hover {
    text-decoration-color: var(--color-link);
  }
.block-reference:active {
    text-decoration-color: var(--color-link);
  }

/* keep the block-reference affordance dotted and subtle (rule above) */
a.block-reference:has(math) {
  text-decoration: none;
  border-bottom: 0.5px dotted color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
  transition: border-bottom-color 0.2s ease;
}

a.block-reference:has(math):hover {
  border-bottom-color: var(--color-link);
}

/* block header titles are undecorated links that underline on hover
   (rules below); preserve that when the title contains math */
.math-block-title a:has(math) {
  border-bottom: none;
}

.math-block-title a:has(math):hover {
  text-decoration: none;
  border-bottom: var(--border-width-base) solid currentColor;
}

/* Error styling for broken references */
.block-reference-error {
  color: var(--color-error);
  font-family: monospace;
  font-size: 0.9em;
}

/* Dark mode reference styling */
@media (prefers-color-scheme: dark) {
  .block-reference-error {
    color: var(--color-error);
  }
}

/* Math blocks with improved visual hierarchy */
.math-block {
  margin-block: var(--space-lg);
  padding: var(--space-md);
  border-inline-start: var(--border-width-thick) solid;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-code-bg);
  position: relative;
  
  /* Use CSS custom properties for each type */
}
.math-block.math-definition {
    border-color: var(--color-definition);
    background-color: color-mix(in oklch, var(--color-definition), transparent 95%);
  }
.math-block.math-theorem {
    border-color: var(--color-theorem);
    background-color: color-mix(in oklch, var(--color-theorem), transparent 95%);
  }
.math-block.math-lemma {
    border-color: var(--color-lemma);
    background-color: color-mix(in oklch, var(--color-lemma), transparent 95%);
  }
.math-block.math-proposition {
    border-color: var(--color-proposition);
    background-color: color-mix(in oklch, var(--color-proposition), transparent 95%);
  }
.math-block.math-corollary {
    border-color: var(--color-corollary);
    background-color: color-mix(in oklch, var(--color-corollary), transparent 96%);
  }
.math-block.math-axiom {
    border-color: var(--color-axiom);
    background-color: color-mix(in oklch, var(--color-axiom), transparent 95%);
  }
.math-block.math-proof {
    border-color: var(--color-proof);
    background-color: color-mix(in oklch, var(--color-proof), transparent 95%);
  }
.math-block.math-example {
    border-color: var(--color-example);
    background-color: color-mix(in oklch, var(--color-example), transparent 95%);
  }
.math-block.math-remark, .math-block.math-note {
    border-color: var(--color-remark);
    background-color: color-mix(in oklch, var(--color-remark), transparent 96%);
  }
.math-block.math-intuition {
    border-color: var(--color-intuition);
    background-color: color-mix(in oklch, var(--color-intuition), transparent 95%);
  }
.math-block.math-exercise {
    border-color: var(--color-exercise);
    background-color: color-mix(in oklch, var(--color-exercise), transparent 94%);
  }
.math-block.math-solution {
    border-color: var(--color-solution);
    background-color: color-mix(in oklch, var(--color-solution), transparent 96%);
    margin-inline-start: var(--space-xl);
  }
/* Nested math blocks */
.math-block .math-block {
    margin-inline-start: var(--space-sm);
    background-color: color-mix(in oklch, currentColor, transparent 98%);
  }

/* Math block header and content */
.math-block-header {
  margin-bottom: var(--space-sm);
  font-weight: bold;
  color: var(--color-heading);
}

.math-block-type {
  font-style: normal;
}

.math-block-title {
  margin-left: var(--space-sm);
  font-weight: normal;
  font-style: normal;
}

/* Style links within math block titles */
.math-block-title a {
  color: inherit;
  text-decoration: none;
}

.math-block-title a:hover {
  text-decoration: underline;
}

/* Synonyms display in definition headers */
.block-synonyms {
  margin-left: var(--space-sm);
  font-weight: normal;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: 0.95em;
}

/* Notation display in block headers (\notation declarations) */
.block-notation {
  margin-left: var(--space-sm);
  font-weight: normal;
  font-style: normal;
  color: var(--color-text-muted);
  font-size: 0.95em;
}

/* Tags display in block headers */
.block-tags {
  margin-left: var(--space-sm);
  display: inline-flex;
  gap: var(--space-xs);
  align-items: center;
}

.block-tag {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.85em;
  font-weight: normal;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

/* Synonym reference styling */
.synonym-reference {
  position: relative;
  /* Removed italic styling - synonyms now display the same as regular references */
}

.math-block-content {
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

/* Nested math blocks */
.math-block-nested {
  margin: var(--space-md) 0;
  margin-inline-start: 0.25rem;
  padding: calc(var(--space-sm) + var(--space-xs));
  padding-inline-start: var(--space-md);
  border-inline-start-width: var(--border-width-thick);
  background-color: var(--color-overlay-light);
  position: relative;
  
  /* Tighter spacing for nested content */
}
.math-block-nested .math-block-content {
    line-height: 1.7;
  }
/* Remove extra spacing at the bottom */
.math-block-nested:last-child {
    margin-bottom: var(--space-sm);
  }
/* Add a subtle visual connector */
.math-block-nested::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -1rem;
    bottom: -1rem;
    width: 3px;
    background-color: inherit;
    opacity: 0.3;
  }
@media (prefers-color-scheme: dark) {
.math-block-nested {
    background-color: var(--color-overlay-light);
}
  }

/* Type-specific nested blocks */
.math-block-nested.math-definition {
    background-color: var(--color-nested-definition);
  }
.math-block-nested.math-theorem {
    background-color: var(--color-nested-theorem);
  }
.math-block-nested.math-lemma {
    background-color: var(--color-nested-lemma);
  }
.math-block-nested.math-proposition {
    background-color: var(--color-nested-proposition);
  }
.math-block-nested.math-corollary {
    background-color: var(--color-nested-corollary);
  }
.math-block-nested.math-axiom {
    background-color: var(--color-nested-axiom);
  }
.math-block-nested.math-proof {
    background-color: var(--color-nested-proof);
  }
.math-block-nested.math-example {
    background-color: var(--color-nested-example);
  }
@media (prefers-color-scheme: dark) {
    .math-block-nested.math-definition {
      background-color: var(--color-nested-definition);
    }
    
    .math-block-nested.math-theorem {
      background-color: var(--color-nested-theorem);
    }
    
    .math-block-nested.math-lemma {
      background-color: var(--color-nested-lemma);
    }
    
    .math-block-nested.math-proposition {
      background-color: var(--color-nested-proposition);
    }
    
    .math-block-nested.math-corollary {
      background-color: var(--color-nested-corollary);
    }
    
    .math-block-nested.math-axiom {
      background-color: var(--color-nested-axiom);
    }
    
    .math-block-nested.math-proof {
      background-color: var(--color-nested-proof);
    }
    
    .math-block-nested.math-example {
      background-color: var(--color-nested-example);
    }
  }

/* Math block error styles */
.math-block-error {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  border: var(--border-width-base) solid var(--color-error-border);
  border-inline-start: var(--border-width-extra) solid var(--color-error-border);
  background-color: var(--color-error-bg);
  border-radius: var(--radius-md);
  color: var(--color-error-text-dark);
}

.math-block-error-header {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-lg);
}

.math-block-error-content {
  font-family: monospace;
  font-size: 0.9em;
  line-height: 1.4;
}

@media (prefers-color-scheme: dark) {
  .math-block-error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text-dark);
    border-color: var(--color-error-border);
  }
}

/* Embedded blocks (transclusion) */
.embedded-block {
  margin: var(--space-lg) 0;
  position: relative;
}

/* Remove math block styling when inside embedded blocks */
.embedded-block .math-block {
  margin: 0;
}

/* Remove old embedded header since we use math block headers now */
.embedded-header {
  display: none;
}


.embedded-source {
  margin-top: 0.75rem;
  font-size: 0.85em;
  color: var(--color-text-secondary);
  text-align: right;
}


.embedded-source a {
    color: var(--color-link);
    text-decoration: none;
  }


.embedded-source a:hover {
      text-decoration: underline;
    }

/* Block reference labels - shown everywhere with subtle styling */
.block-label-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-text-secondary);
  background: transparent;
  padding: 0 0.3em;
  font-size: 0.9em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-left: 0.75em;
  float: right;
  opacity: 0.5;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Hover state for labels */
.block-label-ref:hover {
  opacity: 0.8;
  color: var(--color-text);
}

/* Success state when copied */
.block-label-ref.copied {
  color: var(--color-success, var(--color-code-green));
  opacity: 1;
}

/* Failure state when copy fails */
.block-label-ref.failed {
  color: var(--color-error);
  opacity: 1;
}

/* Embed error styling */
.embed-error {
  color: var(--color-error);
  font-weight: bold;
  background-color: var(--color-error-bg);
  padding: var(--space-micro-1) var(--space-micro-3);
  border-radius: var(--radius-sm);
}
@media (prefers-color-scheme: dark) {
.embed-error {
    background-color: var(--color-error-bg);
    color: var(--color-error-text-dark);
}
  }

/* Tooltip styles */
.math-tooltip {
  position: absolute;
  z-index: 10000;
  max-width: var(--size-tooltip-max);
  min-width: var(--size-tooltip-min);
  background: var(--color-tooltip-bg);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.math-tooltip.visible {
  opacity: 1;
}

@media (prefers-color-scheme: dark) {
  .math-tooltip {
    background: var(--color-tooltip-bg);
    box-shadow: var(--shadow-lg);
  }
}

.math-tooltip-content {
  padding: var(--space-micro-6) var(--space-md);
}

/* Hide nested blocks in tooltips */
.math-tooltip-content .math-block-nested {
  display: none;
}

/* Remove math block styling in tooltips */
.math-tooltip-content .math-block {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
}

/* Hide the math block header in tooltips to avoid duplication */
.math-tooltip-content .math-block-header {
  display: none;
}

.math-tooltip-header {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.math-tooltip-type {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.math-tooltip-body {
  color: var(--color-text-secondary);
}

.math-tooltip-body p {
  margin: 0 0 var(--space-micro-4) 0;
}

.math-tooltip-body p:last-child {
  margin-bottom: 0;
}

/* Math block type-specific colors in tooltips */
.math-tooltip-content.math-definition .math-tooltip-type {
  color: var(--color-type-definition);
}

.math-tooltip-content.math-theorem .math-tooltip-type {
  color: var(--color-type-theorem);
}

.math-tooltip-content.math-proposition .math-tooltip-type {
  color: var(--color-type-proposition);
}

.math-tooltip-content.math-lemma .math-tooltip-type {
  color: var(--color-type-lemma);
}

.math-tooltip-content.math-corollary .math-tooltip-type {
  color: var(--color-type-corollary);
}

.math-tooltip-content.math-axiom .math-tooltip-type {
  color: var(--color-type-axiom);
}

.math-tooltip-content.math-example .math-tooltip-type {
  color: var(--color-type-example);
}

.math-tooltip-content.math-remark .math-tooltip-type,
.math-tooltip-content.math-note .math-tooltip-type {
  color: var(--color-type-note);
}

@media (prefers-color-scheme: dark) {
  .math-tooltip-content.math-definition .math-tooltip-type {
    color: var(--color-type-definition);
  }
  
  .math-tooltip-content.math-theorem .math-tooltip-type {
    color: var(--color-type-theorem);
  }
  
  .math-tooltip-content.math-proposition .math-tooltip-type {
    color: var(--color-type-proposition);
  }
  
  .math-tooltip-content.math-lemma .math-tooltip-type {
    color: var(--color-type-lemma);
  }
  
  .math-tooltip-content.math-corollary .math-tooltip-type {
    color: var(--color-type-corollary);
  }
  
  .math-tooltip-content.math-axiom .math-tooltip-type {
    color: var(--color-type-axiom);
  }
  
  .math-tooltip-content.math-example .math-tooltip-type {
    color: var(--color-type-example);
  }
  
  .math-tooltip-content.math-remark .math-tooltip-type,
  .math-tooltip-content.math-note .math-tooltip-type {
    color: var(--color-type-note);
  }
}

.math-tooltip-footer {
  border-top: var(--border-width-thin) solid var(--color-border);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-tooltip-footer-bg);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

@media (prefers-color-scheme: dark) {
  .math-tooltip-footer {
    background: var(--color-tooltip-footer-bg);
  }
}

.math-tooltip-link {
  font-size: 0.85em;
  color: var(--color-link);
  text-decoration: none;
}

.math-tooltip-link:hover {
  text-decoration: underline;
}

/* Loading state */
.math-tooltip-loading {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-secondary);
}

.loading-spinner {
  display: inline-block;
  width: var(--size-spinner);
  height: var(--size-spinner);
  border: var(--border-width-base) solid var(--color-spinner-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .math-tooltip {
    max-width: calc(100vw - var(--space-md));
    font-size: 0.85em;
  }
  
  .math-tooltip-content {
    padding: var(--gap-xs) var(--space-micro-6);
  }
  
  .math-tooltip-footer {
    padding: var(--space-micro-3) var(--space-micro-6);
  }
}

/* ============================================================
   MathML fixups (copied verbatim from mathnotes styles/math.css)
   ============================================================ */

@font-face {
  font-family: 'Latin Modern Math';
  src: url('./fonts/LatinModernMath-Regular.woff2') format('woff2');
  /* brief invisibility beats math reflowing from fallback glyphs */
  font-display: block;
}

math {
  font-family: 'Latin Modern Math', math;
  /* math fonts draw visually small next to the UI font */
  font-size: 1.125em;
}

/* MathJax's scroll containers are gone; wide display equations scroll
   inside the element instead of overflowing the page */
math[display='block'] {
  overflow-x: auto;
  /* never a vertical bar: Chromium reports 1-2px phantom vertical
     overflow on display-math scroll containers, which summons scrollbars
     on otherwise-fitting equations */
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: thin;
  /* absorb the phantom overflow so no glyph ink is ever clipped */
  padding-block: 4px;
}

/* \tag{...}: the build worker rewrites MathJax's mlabeledtr (absent from
   MathML Core) into a plain row with the label cell last. Stretch the row
   so the equation keeps the slack width (staying ~centered) and the label
   lands on the right margin. Plain table layout — measured pixel-exact in
   both Gecko and Chromium; CSS positioning is NOT honored on MathML
   internals in Firefox. */
mtable.math-tagged {
  width: 100%;
}

mtable.math-tagged > mtr > mtd:first-child {
  width: 100%;
}

mtd.math-tag {
  /* the UA's 0.5ex cell padding would make the label outgrow one-line
     equations, reading as vertical overflow */
  padding-block: 0;
}

/* \cancel{...}: the build worker rewrites menclose (absent from MathML
   Core) to this mrow; draw the diagonal strike ourselves */
mrow.mml-cancel {
  background: linear-gradient(
    to top right,
    transparent 47.5%,
    currentColor 48.5%,
    currentColor 51.5%,
    transparent 52.5%
  );
}

/* Notation references: math symbols that link to their defining block.
   Only stamped refs (data-ref-url present) get the affordance — an
   unstamped ref is a self-reference inside its own definition and renders
   as plain math. text-decoration is unreliable on MathML internals;
   border-bottom is honored (border properties are in MathML Core). Match
   .block-reference's dotted-underline look (styles/main.css). */
math .notation-ref[data-ref-url] {
  cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--color-text-secondary) 50%, transparent);
  transition: border-bottom-color 0.2s ease;
}

math .notation-ref[data-ref-url]:hover {
  border-bottom-color: var(--color-text-secondary);
}

/* ============================================================
   Referenced-by panel (copied from mathnotes
   styles/pages/block-index.module.css 57-141, with the site
   index-page scope prefix removed: the library styles the
   panel; whether/where it displays is site policy). The dark-only
   scoped custom-property redefinitions are dropped — the prelude
   :root defines --text-secondary/--text-primary/--card-background/
   --border-color unconditionally.
   ============================================================ */
.block-references-section {
  display: block;
  margin-top: var(--gap-base);
  padding: var(--gap-sm);
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
}

.block-references-section details {
  cursor: pointer;
}

.block-references-section summary {
  font-weight: 500;
  color: var(--text-secondary);
  padding: var(--gap-xs);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.block-references-section summary:hover {
  color: var(--text-primary);
}

.direct-references,
.transitive-references {
  margin-top: var(--gap-sm);
  padding-left: var(--gap-base);
}

.block-references-section h4 {
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--gap-xs);
  color: var(--text-secondary);
}

.block-references-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.block-references-section li {
  padding: var(--gap-xs) 0;
  font-size: var(--font-size-sm);
}

.block-references-section li::before {
  content: "→ ";
  color: var(--text-secondary);
  margin-right: var(--gap-xs);
}

.ref-type,
.ref-location {
  margin-left: var(--gap-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
}

@media (prefers-color-scheme: dark) {
  .block-references-section {
    background: var(--color-bg-secondary);
  }
}

@media (max-width: 640px) {
  .block-references-section {
    padding: var(--gap-xs);
  }

  .direct-references,
  .transitive-references {
    padding-left: var(--gap-sm);
  }
}