/* =============================================================
   Glitchlings Field Guide - Custom Styles
   Visual Identity: Old-School Vector Graphics Display
   Inspired by: Asteroids, Battlezone, Oscilloscopes, Vectrex
   ============================================================= */

/* Typography - Monospace fonts for that authentic terminal feel */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&family=Fira+Code:wght@400;500;600&display=swap');

/* =============================================================
   CSS Variables / Color Palette - Vector Phosphor Colors
   ============================================================= */
:root {
  /* Softened vector green phosphor - easier on the eyes */
  --vector-green: #7ed67e;
  --vector-green-dim: #4a9e4a;
  --vector-green-bright: #a8e6a8;
  --vector-green-glow: rgba(126, 214, 126, 0.4);

  /* Alternative amber phosphor (P3 phosphor) - warmer tone */
  --vector-amber: #f5c563;
  --vector-amber-dim: #b8944a;
  --vector-amber-glow: rgba(245, 197, 99, 0.35);

  /* Display background - softer dark */
  --vector-black: #0d1117;
  --vector-dark: #161b22;
  --vector-darker: #010409;

  /* Accent colors - slightly muted for comfort */
  --vector-cyan: #58d4f0;
  --vector-magenta: #d670d6;
  --vector-red: #f07178;
  
  /* Material theme overrides */
  --md-primary-fg-color: var(--vector-green);
  --md-primary-fg-color--light: var(--vector-green-bright);
  --md-primary-fg-color--dark: var(--vector-green-dim);
  --md-accent-fg-color: var(--vector-cyan);
  --md-accent-fg-color--transparent: rgba(0, 255, 255, 0.1);
  
  /* Vector glow effects */
  --vector-glow-sm: 0 0 2px var(--vector-green), 0 0 4px var(--vector-green-glow);
  --vector-glow-md: 0 0 4px var(--vector-green), 0 0 8px var(--vector-green-glow), 0 0 12px var(--vector-green-glow);
  --vector-glow-lg: 0 0 6px var(--vector-green), 0 0 12px var(--vector-green-glow), 0 0 20px var(--vector-green-glow);
  
  /* Scanline effect */
  --scanline-color: rgba(0, 0, 0, 0.15);
}

/* =============================================================
   Global Background - Deep Vector Display Black
   ============================================================= */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--vector-black);
  --md-default-fg-color: var(--vector-green);
  --md-typeset-color: var(--vector-green);
  --md-typeset-a-color: var(--vector-cyan);
}

/* Force dark background everywhere */
body,
.md-main,
.md-content,
.md-sidebar,
.md-header,
.md-tabs {
  background-color: var(--vector-black) !important;
}

/* =============================================================
   Typography Setup - All Monospace, All the Time
   ============================================================= */

/* Main headings - VT323 for that authentic vector terminal look */
.md-typeset h1,
.md-header__title {
  font-family: 'VT323', 'Courier New', monospace !important;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2rem;
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-lg);
}

/* Secondary headers - Share Tech Mono */
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  font-weight: 400;
  color: var(--vector-green) !important;
  text-shadow: var(--vector-glow-sm);
  border-bottom: 1px solid var(--vector-green-dim);
  padding-bottom: 0.3em;
}

/* Body text - Share Tech Mono for readability */
.md-typeset,
.md-typeset p,
.md-typeset li,
.md-typeset td,
.md-typeset th {
  font-family: 'Share Tech Mono', 'Courier New', monospace !important;
  color: var(--vector-green) !important;
  line-height: 1.7;
}

/* Links glow cyan */
.md-typeset a {
  color: var(--vector-cyan) !important;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
  text-decoration: none;
  border-bottom: 1px dotted var(--vector-cyan);
}

.md-typeset a:hover {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-md);
  border-bottom-style: solid;
}

/* Code blocks - Fira Code */
.md-typeset code,
.md-typeset pre code,
.md-typeset kbd,
.highlight code {
  font-family: 'Fira Code', 'Courier New', monospace !important;
  color: var(--vector-amber) !important;
}

/* Navigation - VT323 for sidebar */
.md-nav__link,
.md-tabs__link {
  font-family: 'VT323', 'Courier New', monospace !important;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

/* =============================================================
   Vector Beam Animation Effects
   ============================================================= */

@keyframes vector-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.8; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}

@keyframes vector-pulse {
  0%, 100% { 
    text-shadow: var(--vector-glow-sm);
    filter: brightness(1);
  }
  50% { 
    text-shadow: var(--vector-glow-lg);
    filter: brightness(1.2);
  }
}

@keyframes beam-trace {
  0% { 
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  50% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@keyframes scanline-scroll {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes phosphor-decay {
  0% { 
    opacity: 1;
    filter: brightness(1.3);
  }
  100% { 
    opacity: 0.85;
    filter: brightness(1);
  }
}

/* =============================================================
   Header - Vector Display Terminal Bar
   ============================================================= */

.md-header {
  background: linear-gradient(180deg, var(--vector-dark) 0%, var(--vector-black) 100%) !important;
  border-bottom: 2px solid var(--vector-green);
  box-shadow: 
    0 2px 0 var(--vector-green-dim),
    0 0 20px var(--vector-green-glow),
    inset 0 -1px 0 var(--vector-green-dim);
}

.md-header__title {
  animation: vector-pulse 4s ease-in-out infinite;
}

.md-header__button {
  color: var(--vector-green) !important;
}

.md-header__button:hover {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-md);
}

/* Search box styling */
.md-search__input {
  background-color: var(--vector-darker) !important;
  color: var(--vector-green) !important;
  border: 1px solid var(--vector-green-dim) !important;
  font-family: 'Share Tech Mono', monospace !important;
}

.md-search__input::placeholder {
  color: var(--vector-green-dim) !important;
}

.md-search__input:focus {
  border-color: var(--vector-green) !important;
  box-shadow: var(--vector-glow-sm);
}

/* =============================================================
   Navigation Tabs - Vector Button Style
   ============================================================= */

.md-tabs {
  background: var(--vector-black) !important;
  border-bottom: 1px solid var(--vector-green-dim);
}

.md-tabs__link {
  color: var(--vector-green-dim) !important;
  transition: all 0.2s ease;
  position: relative;
}

.md-tabs__link:hover {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-md);
}

.md-tabs__link--active {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-lg);
}

.md-tabs__link--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vector-green);
  box-shadow: var(--vector-glow-sm);
}

/* =============================================================
   Sidebar Navigation - Vector Menu
   ============================================================= */

.md-sidebar {
  background: var(--vector-black) !important;
}

.md-nav__link {
  color: var(--vector-green-dim) !important;
  transition: all 0.15s ease;
  padding: 0.4rem 0.6rem;
  border-left: 2px solid transparent;
}

.md-nav__link:hover {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-sm);
  border-left-color: var(--vector-green);
  background: rgba(51, 255, 51, 0.05);
}

.md-nav__link--active {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-md);
  border-left: 2px solid var(--vector-green);
  background: rgba(51, 255, 51, 0.1);
}

/* Navigation section headers */
.md-nav__title {
  font-family: 'VT323', monospace !important;
  color: var(--vector-cyan) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1rem;
}

/* Expand/collapse icons */
.md-nav__icon {
  color: var(--vector-green) !important;
}

/* =============================================================
   Main Content Area - Vector Display Screen
   ============================================================= */

.md-content {
  background: var(--vector-black) !important;
  position: relative;
}

/* Subtle CRT curvature effect on content */
.md-content__inner {
  background: 
    radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
  padding: 2rem;
}

/* Scanline overlay - subtle for readability */
.md-content::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    var(--scanline-color) 3px,
    var(--scanline-color) 4px
  );
  z-index: 9999;
  opacity: 0.15;
}

/* Vignette effect */
.md-content::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 9998;
}

/* =============================================================
   Admonitions - Vector Alert Boxes
   ============================================================= */

.md-typeset .admonition,
.md-typeset details {
  background: var(--vector-darker) !important;
  border: 1px solid var(--vector-green-dim);
  border-left: 3px solid var(--vector-green);
  box-shadow: 
    0 0 10px rgba(51, 255, 51, 0.1),
    inset 0 0 20px rgba(0, 0, 0, 0.5);
  font-family: 'Share Tech Mono', monospace !important;
}

.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
  background: linear-gradient(90deg, rgba(51, 255, 51, 0.15) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--vector-green-dim);
  font-family: 'VT323', monospace !important;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--vector-green-bright) !important;
}

/* Warning admonitions - amber phosphor */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--vector-amber);
}

.md-typeset .admonition.warning > .admonition-title,
.md-typeset details.warning > summary {
  background: linear-gradient(90deg, rgba(255, 170, 0, 0.15) 0%, transparent 100%) !important;
  color: var(--vector-amber) !important;
}

/* Danger admonitions - red alert */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--vector-red);
}

.md-typeset .admonition.danger > .admonition-title,
.md-typeset details.danger > summary {
  background: linear-gradient(90deg, rgba(255, 51, 51, 0.15) 0%, transparent 100%) !important;
  color: var(--vector-red) !important;
}

/* Info/Note admonitions - cyan */
.md-typeset .admonition.info,
.md-typeset .admonition.note,
.md-typeset details.info,
.md-typeset details.note {
  border-left-color: var(--vector-cyan);
}

.md-typeset .admonition.info > .admonition-title,
.md-typeset .admonition.note > .admonition-title,
.md-typeset details.info > summary,
.md-typeset details.note > summary {
  background: linear-gradient(90deg, rgba(0, 255, 255, 0.15) 0%, transparent 100%) !important;
  color: var(--vector-cyan) !important;
}

/* =============================================================
   Code Blocks - Vector Terminal Output
   ============================================================= */

.md-typeset pre {
  background: var(--vector-darker) !important;
  border: 1px solid var(--vector-green-dim);
  border-radius: 0;
  box-shadow: 
    inset 0 0 30px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(51, 255, 51, 0.1);
  position: relative;
  overflow: hidden;
}

/* Terminal header decoration */
.md-typeset pre::before {
  content: '__._._ ༼ つ ◕_◕ ༽つ _.._.__';
  display: block;
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  color: var(--vector-green-dim);
  padding: 0.3rem 0.8rem;
  border-bottom: 1px solid var(--vector-green-dim);
  background: rgba(51, 255, 51, 0.05);
  letter-spacing: 2px;
}

.md-typeset pre code {
  color: var(--vector-amber) !important;
  text-shadow: 0 0 2px var(--vector-amber-glow);
  display: block;
  padding: 1rem !important;
}

/* Inline code styling */
.md-typeset code:not(pre code) {
  background: rgba(51, 255, 51, 0.1) !important;
  border: 1px solid var(--vector-green-dim);
  border-radius: 0;
  color: var(--vector-amber) !important;
  padding: 0.1em 0.4em;
  font-family: 'Fira Code', monospace !important;
  text-shadow: 0 0 2px var(--vector-amber-glow);
}

/* Syntax highlighting overrides */
.highlight .k, .highlight .kn, .highlight .kd,
.highlight .kc, .highlight .kr, .highlight .kt { 
  color: var(--vector-cyan) !important; 
}
.highlight .s, .highlight .s1, .highlight .s2,
.highlight .sa, .highlight .sb, .highlight .sc { 
  color: var(--vector-amber) !important; 
}
.highlight .c, .highlight .c1, .highlight .cm,
.highlight .cp, .highlight .cs { 
  color: var(--vector-green-dim) !important; 
}
.highlight .n, .highlight .na, .highlight .nb,
.highlight .nc, .highlight .nd, .highlight .ne,
.highlight .nf, .highlight .ni, .highlight .nl,
.highlight .nn, .highlight .no, .highlight .nt,
.highlight .nv { 
  color: var(--vector-green) !important; 
}
.highlight .m, .highlight .mi, .highlight .mf,
.highlight .mh, .highlight .mo { 
  color: var(--vector-magenta) !important; 
}
.highlight .o, .highlight .ow, .highlight .p { 
  color: var(--vector-green-bright) !important; 
}

/* =============================================================
   Tables - Vector Data Grid
   ============================================================= */

.md-typeset table {
  border: 1px solid var(--vector-green-dim);
  background: var(--vector-darker);
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.1);
}

.md-typeset table th {
  background: linear-gradient(180deg, rgba(51, 255, 51, 0.2) 0%, rgba(51, 255, 51, 0.1) 100%);
  color: var(--vector-green-bright) !important;
  font-family: 'VT323', monospace !important;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--vector-green);
  text-shadow: var(--vector-glow-sm);
}

.md-typeset table td {
  border-color: var(--vector-green-dim);
  color: var(--vector-green) !important;
}

.md-typeset table tr:hover td {
  background: rgba(51, 255, 51, 0.05);
}

/* =============================================================
   Gallery / Visualizer Styles - Vector Scope Display
   ============================================================= */

.glitch-visualizer {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  border: 2px solid var(--vector-green);
  background: var(--vector-darker);
  box-shadow: 
    0 0 20px var(--vector-green-glow),
    inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.glitch-visualizer__header {
  background: linear-gradient(90deg, rgba(51, 255, 51, 0.2) 0%, transparent 100%);
  color: var(--vector-green-bright);
  padding: 0.5rem 1rem;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--vector-green-dim);
  text-shadow: var(--vector-glow-sm);
}

.glitch-visualizer__controls {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--vector-green-dim);
}

.glitch-visualizer__controls label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.85rem;
  color: var(--vector-cyan);
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.3);
}

.glitch-visualizer__controls select,
.glitch-visualizer__controls input[type="range"] {
  background: var(--vector-black);
  border: 1px solid var(--vector-green-dim);
  color: var(--vector-green);
  padding: 0.3rem 0.5rem;
  font-family: 'Fira Code', monospace;
}

.glitch-visualizer__controls select:focus,
.glitch-visualizer__controls input:focus {
  border-color: var(--vector-green);
  box-shadow: var(--vector-glow-sm);
  outline: none;
}

.glitch-visualizer__output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--vector-green-dim);
}

.glitch-visualizer__panel {
  background: var(--vector-darker);
  padding: 1rem;
}

.glitch-visualizer__panel-label {
  font-family: 'VT323', monospace;
  font-size: 0.9rem;
  color: var(--vector-cyan);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.4);
}

.glitch-visualizer__text {
  font-family: 'Fira Code', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--vector-green);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: var(--vector-glow-sm);
}

/* Diff highlighting - vector style */
.glitch-diff-add {
  background: rgba(0, 255, 255, 0.2);
  color: var(--vector-cyan);
  text-shadow: 0 0 4px rgba(0, 255, 255, 0.5);
}

.glitch-diff-remove {
  background: rgba(255, 51, 51, 0.2);
  color: var(--vector-red);
  text-decoration: line-through;
}

/* =============================================================
   Lists - Vector Bullet Points
   ============================================================= */

.md-typeset ul li::marker,
.md-typeset ol li::marker {
  color: var(--vector-green-bright);
}

.md-typeset ul li {
  padding-left: 0.5em;
}

/* Custom bullet style */
.md-typeset ul > li::before {
  color: var(--vector-green);
  text-shadow: var(--vector-glow-sm);
}

/* =============================================================
   Blockquotes - Vector Terminal Quote
   ============================================================= */

.md-typeset blockquote {
  border-left: 3px solid var(--vector-cyan);
  background: rgba(0, 255, 255, 0.05);
  padding: 1rem;
  margin: 1rem 0;
  color: var(--vector-green) !important;
  font-style: normal;
}

.md-typeset blockquote p {
  color: var(--vector-green) !important;
}

/* =============================================================
   Horizontal Rules - Vector Scan Line
   ============================================================= */

.md-typeset hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%,
    var(--vector-green-dim) 10%,
    var(--vector-green) 50%,
    var(--vector-green-dim) 90%,
    transparent 100%
  );
  box-shadow: 0 0 10px var(--vector-green-glow);
  margin: 2rem 0;
}

/* =============================================================
   Footer - Vector Display Status Bar
   ============================================================= */

.md-footer {
  background: var(--vector-black) !important;
  border-top: 1px solid var(--vector-green-dim);
}

.md-footer__inner {
  color: var(--vector-green-dim);
}

.md-footer__link {
  color: var(--vector-green) !important;
}

.md-footer__link:hover {
  color: var(--vector-green-bright) !important;
  text-shadow: var(--vector-glow-sm);
}

.md-copyright {
  color: var(--vector-green-dim) !important;
  font-family: 'Share Tech Mono', monospace;
}

/* =============================================================
   Responsive Adjustments
   ============================================================= */

@media screen and (max-width: 768px) {
  .md-typeset h1,
  .md-header__title {
    font-size: 1.2rem;
    letter-spacing: 2px;
  }
  
  .glitch-visualizer__output {
    grid-template-columns: 1fr;
  }
  
  .glitch-visualizer__controls {
    flex-direction: column;
  }
  
  /* Reduce scanline intensity on mobile for performance */
  .md-content::before {
    opacity: 0.2;
  }
}

/* =============================================================
   Scrollbar Styling - Vector Green
   ============================================================= */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vector-black);
  border-left: 1px solid var(--vector-green-dim);
}

::-webkit-scrollbar-thumb {
  background: var(--vector-green-dim);
  border: 1px solid var(--vector-green);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vector-green);
  box-shadow: var(--vector-glow-sm);
}

/* =============================================================
   Selection Styling
   ============================================================= */

::selection {
  background: var(--vector-green);
  color: var(--vector-black);
}

::-moz-selection {
  background: var(--vector-green);
  color: var(--vector-black);
}

/* =============================================================
   TOC (Table of Contents) Styling
   ============================================================= */

.md-nav--secondary .md-nav__link {
  color: var(--vector-green-dim) !important;
  font-size: 0.9rem;
}

.md-nav--secondary .md-nav__link:hover {
  color: var(--vector-green-bright) !important;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--vector-cyan) !important;
}

/* =============================================================
   Print Styles - Disable Effects
   ============================================================= */

@media print {
  * {
    text-shadow: none !important;
    box-shadow: none !important;
    animation: none !important;
  }
  
  .md-content::before,
  .md-content::after {
    display: none !important;
  }
  
  body,
  .md-typeset,
  .md-typeset p,
  .md-typeset h1,
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4,
  .md-typeset h5,
  .md-typeset h6 {
    color: black !important;
    background: white !important;
  }
}

/* =============================================================
   Mermaid Diagram Styling
   ============================================================= */

.mermaid {
  background: var(--vector-darker) !important;
  padding: 1rem;
  border: 1px solid var(--vector-green-dim);
}

/* =============================================================
   Copy Button Styling
   ============================================================= */

.md-clipboard {
  color: var(--vector-green-dim) !important;
}

.md-clipboard:hover {
  color: var(--vector-green-bright) !important;
}

/* =============================================================
   Search Results Styling
   ============================================================= */

.md-search__scrollwrap {
  background: var(--vector-black) !important;
  border: 1px solid var(--vector-green-dim);
}

.md-search-result__link {
  background: var(--vector-darker) !important;
}

.md-search-result__link:hover {
  background: rgba(51, 255, 51, 0.1) !important;
}

.md-search-result__title {
  color: var(--vector-green-bright) !important;
}

.md-search-result__teaser {
  color: var(--vector-green-dim) !important;
}

mark {
  background: rgba(0, 255, 255, 0.3) !important;
  color: var(--vector-cyan) !important;
}

/* =============================================================
   Special Effects - Boot Sequence Animation (Optional)
   ============================================================= */

@keyframes boot-flicker {
  0% { opacity: 0; }
  10% { opacity: 1; }
  11% { opacity: 0; }
  12% { opacity: 1; }
  40% { opacity: 1; }
  41% { opacity: 0.8; }
  42% { opacity: 1; }
  100% { opacity: 1; }
}

/* Apply boot effect on page load (first 2 seconds) */
.md-content__inner {
  animation: boot-flicker 2s ease-out;
}

/* =============================================================
   Vector Grid Background (Subtle)
   ============================================================= */

.md-main {
  background: 
    linear-gradient(var(--vector-green-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--vector-green-dim) 1px, transparent 1px),
    var(--vector-black) !important;
  background-size: 50px 50px, 50px 50px;
  background-position: -1px -1px;
  opacity: 1;
}

.md-main::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, transparent 0%, var(--vector-black) 70%);
  pointer-events: none;
  z-index: -1;
}

/* =============================================================
   Flavor Text Styling - Opening Quotes on Glitchling Pages
   ============================================================= */

/* Style the italic opening quotes at the top of pages */
.md-typeset > p:first-of-type > em:only-child {
  display: block;
  color: var(--vector-cyan);
  text-shadow: 0 0 8px rgba(88, 212, 240, 0.4);
  border-left: 2px solid var(--vector-cyan);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  font-style: italic;
  font-size: 1.05rem;
}

/* =============================================================
   MathJax Styling - Vector Math Display
   ============================================================= */

/* Math containers */
.arithmatex {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Inline math */
.arithmatex > .MathJax {
  color: var(--vector-cyan) !important;
}

/* Display math blocks */
.md-typeset .arithmatex.display {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--vector-darker);
  border: 1px solid var(--vector-green-dim);
  border-left: 3px solid var(--vector-cyan);
  border-radius: 0;
}

/* MathJax SVG and HTML output */
mjx-container {
  color: var(--vector-cyan) !important;
}

mjx-container[jax="SVG"] svg {
  color: var(--vector-cyan) !important;
}

mjx-container[display="true"] {
  display: block !important;
  text-align: center;
  margin: 1rem 0;
}

/* Math text elements */
mjx-mi, mjx-mn, mjx-mo, mjx-mtext {
  color: inherit !important;
}

/* Fractions and special elements */
mjx-mfrac {
  color: var(--vector-cyan) !important;
}

/* Subscripts and superscripts */
mjx-msub, mjx-msup, mjx-msubsup {
  color: inherit !important;
}

/* Math operators - slightly brighter */
mjx-mo {
  color: var(--vector-green-bright) !important;
}

/* Matrix/table constructs */
mjx-mtable {
  color: var(--vector-cyan) !important;
}

/* Error styling */
mjx-merror {
  color: var(--vector-red) !important;
  background: rgba(240, 113, 120, 0.1) !important;
  border: 1px solid var(--vector-red);
}

/* Cases and piecewise functions */
.MathJax .mjx-cases {
  border-left: 2px solid var(--vector-cyan);
}