/* ========== TABLE OF CONTENTS ==========
1. CSS Variables
2. Reset & Base Styles
3. Layout & Containers
4. Navigation & Header
5. Search Functionality
6. Hero Section
7. Content Components
8. Mathematics Content Styling
9. Code Styling
10. Buttons & Interactive Elements
11. Collapsible Sections
12. Footer
13. Typography & Headers
14. Responsive Design
15. Card Badges & Enhanced Keywords
=======================================*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Exo+2:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');
/* ========== 1. CSS Variables ========== */
:root {
    /* Colors - */
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #4caf50;
    --text-color: #333;
    --text-light: #fff;
    --text-muted: #555;
    --bg-color: #f8f9fa;
    --bg-white: #fff;
    --bg-light: #f1f1f1;
    --bg-footer: #2c3e50;
    --bg-footer-bottom: #1a252f;
    --border-color: #ddd;
    --shadow-color: rgba(0, 0, 0, 0.1);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Typography  */
    --font-display: 'Orbitron', sans-serif;
    --font-heading: 'Exo 2', sans-serif;
    --font-accent: 'Rajdhani', sans-serif;
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --line-height: 1.9;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.8rem;
    --font-size-hero: 48px;
    --font-size-subheading: 24px;

    /* Borders & Shadows */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
  
    /* Section colors — single source of truth for the whole site
       (moved here from dark-theme-enhancement.css so LIGHT mode can
       use them too; JS palettes should eventually read these). */
    --section-i-color: #1565c0;
    --section-i-glow: rgba(21, 101, 192, 0.4);
    --section-i-light: #42a5f5;
    --section-ii-color: #2e7d32;
    --section-ii-glow: rgba(46, 125, 50, 0.4);
    --section-ii-light: #66bb6a;
    --section-iii-color: #00838f;
    --section-iii-glow: rgba(0, 131, 143, 0.4);
    --section-iii-light: #26c6da;
    --section-iv-color: #6a1b9a;
    --section-iv-glow: rgba(106, 27, 154, 0.4);
    --section-iv-light: #ab47bc;
    --section-v-color: #ef6c00;
    --section-v-glow: rgba(239, 108, 0, 0.4);
    --section-v-light: #ffa726;
}
  
  /* ========== 2. Reset & Base Styles ========== */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: var(--font-family);
    line-height: var(--line-height);
    color: var(--text-color);
    background-color: var(--bg-color);
  }
  
  /* ========== 3. Layout & Containers ========== */
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-lg);
  }

  blockquote {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1em 1.5em;
    margin: 1.5em 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
  }
  
  blockquote small {
    display: block;
    margin-top: 0.75em;
    font-style: normal;
    font-weight: 500;
    color: #555;
  }
  
  /* ========== 4. Navigation & Header ========== */
.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-md);
    background: linear-gradient(180deg, 
        #0d1a2d 0%,
        var(--bg-footer) 50%,
        #1e3a52 100%
    );
    padding: calc(var(--spacing-sm) * 0.5) var(--spacing-lg);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(100, 180, 255, 0.1) inset;
    /* dead sticky removed (a later position:relative overrode it) */
    z-index: 1000;
    min-height: 80px;
    border-bottom: 1px solid rgba(100, 180, 255, 0.15);
    position: relative;
    overflow: hidden;
}

/* Subtle animated glow line at bottom of navbar */
.navbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(52, 152, 219, 0.3) 20%,
        rgba(100, 180, 255, 0.6) 50%,
        rgba(52, 152, 219, 0.3) 80%,
        transparent 100%
    );
    animation: navGlowLine 4s ease-in-out infinite;
}

@keyframes navGlowLine {
    0%, 100% {
        opacity: 0.5;
        transform: scaleX(0.8);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Logo styling enhancement */
.logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-radius: var(--border-radius-md);
    transition: all var(--transition-normal);
    text-decoration: none;
    position: relative;
    height: auto;
}

.logo-link:hover {
    background-color: rgba(100, 180, 255, 0.1);
}

.logo-link:hover .nav-logo {
    filter: brightness(1.15) drop-shadow(0 0 8px rgba(100, 180, 255, 0.4));
}

.nav-logo {
    display: block;
    transition: all var(--transition-normal);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Enhanced search container */
.search-container {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-normal);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-container:focus-within {
    border-color: rgba(100, 180, 255, 0.5);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.15),
        0 0 20px rgba(100, 180, 255, 0.15);
}

#search-button {
    border-radius: 50%;
    transition: all var(--transition-normal);
}

#search-button:hover {
    background: rgba(100, 180, 255, 0.15);
    transform: scale(1.1);
}

/* nav links */
.nav-links {
    display: flex;
    list-style: none;
    margin-left: 0;
    gap: var(--spacing-md);
}

.nav-links li {
    margin-left: 0;
    display: flex;
    align-items: center;
}

.nav-links a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  padding: var(--spacing-xs) var(--spacing-sm);
  position: relative;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  border-radius: var(--border-radius-sm);
}

.nav-links a:hover {
    color: #fff;
    background: rgba(100, 180, 255, 0.1);
    text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
}

.nav-links a.active {
    color: #64b4ff;
    background: rgba(100, 180, 255, 0.15);
}

/* Animated underline for nav links */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #64b4ff, transparent);
    transition: width var(--transition-normal);
    border-radius: 2px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 80%;
}

.nav-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: #64b4ff;
  display: inline-block;
  width: 1.5em;
  text-align: left;
  flex-shrink: 0;
  margin-right: 0.5rem;
  text-shadow: 0 0 8px rgba(100, 180, 255, 0.4);
}

/* Menu toggle enhancement */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.85);
    padding: var(--spacing-xs);
    border: none;
    background: rgba(100, 180, 255, 0.1);
    border-radius: var(--border-radius-sm);
    min-width: 44px;
    min-height: 44px;
    transition: all var(--transition-normal);
}

.menu-toggle:hover {
    color: #64b4ff;
    background: rgba(100, 180, 255, 0.2);
    transform: scale(1.05);
}

  /* Quick Jump Navigation */
  .quick-jump-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
  }

  /* Dark Quick Navigation to match header/footer */
  .quick-jump-toggle {
    background-color: var(--bg-footer); /* Same as header/footer */
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 12px 16px;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: all var(--transition-normal);
    margin: 0;
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  .quick-jump-toggle:hover {
    background-color: #1a252f; /* Darker shade like footer-bottom */
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
  }

  .quick-jump-toggle:active {
    transform: translateY(0);
  }

  .quick-jump-toggle i {
    font-size: 16px;
    color: var(--text-light);
  }

  .quick-jump-menu {
    position: absolute;
    bottom: 60px;
    right: 0;
    background-color: var(--bg-footer); /* Dark background */
    border-radius: var(--border-radius-md);
    padding: 15px;
    box-shadow: var(--shadow-lg);
    width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white border */
    z-index: 1001;
  }

  .quick-jump-menu.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .quick-jump-menu h3 {
    margin-top: 0;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* White border */
    color: var(--text-light); /* White text */
    font-size: 18px;
  }

  .quick-jump-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .quick-jump-links a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-light); /* White text */
    transition: all var(--transition-fast);
    font-size: 14px;
  }

  .quick-jump-links a:hover {
    background-color: rgba(52, 152, 219, 0.2); /* Blue tint on hover */
    color: var(--primary-color); /* Blue text on hover */
  }

  /* Current page highlighting */
  .quick-jump-links a.current-page {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
  }

  .quick-jump-links a.current-page:hover {
    background-color: #2980b9 !important;
    color: var(--text-light) !important;
  }

  /* Separator styling */
  .quick-jump-links hr {
    margin: 8px 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* White separator */
  }

  /* Back to overview link styling */
  .quick-jump-links a[href*="linear_algebra.html"],
  .quick-jump-links a[href*="calculus.html"],
  .quick-jump-links a[href*="probability.html"],
  .quick-jump-links a[href*="discrete_math.html"],
  .quick-jump-links a[href*="ml.html"] {
    font-weight: 600;
    color: var(--primary-color); /* Blue for back links */
    border: 1px solid rgba(52, 152, 219, 0.3);
  }

  .quick-jump-links a[href*="linear_algebra.html"]:hover,
  .quick-jump-links a[href*="calculus.html"]:hover,
  .quick-jump-links a[href*="probability.html"]:hover,
  .quick-jump-links a[href*="discrete_math.html"]:hover,
  .quick-jump-links a[href*="ml.html"]:hover {
    background-color: rgba(52, 152, 219, 0.2);
    color: var(--text-light);
    border-color: var(--primary-color);
  }

  /* Custom scrollbar for dark theme */
  .quick-jump-menu::-webkit-scrollbar {
    width: 8px;
  }

  .quick-jump-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
  }

  .quick-jump-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  .quick-jump-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* Quick Jump Typography */
  .quick-jump-menu h3 {
    font-family: var(--font-heading);
    font-weight: 600;
  }
  .quick-jump-links a {
    font-family: var(--font-accent);
  }

  @media (max-width: 768px) {
    .quick-jump-container {
      bottom: 15px;
      right: 15px;
    }
    
    .quick-jump-menu {
      width: 250px;
      max-height: 50vh;
    }
    
    .quick-jump-toggle {
      padding: 10px 14px;
      font-size: 14px;
    }

      }

  /* go Top  */
  .go-to-top-btn {
    display: none; /* Hidden by default */
    position: fixed;
    bottom: 90px; /* Position it above the Quick Jump button */
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--secondary-color);
    color: var(--text-light);
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    font-size: 16px;
    width: 45px;
    height: 45px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
  }

  .go-to-top-btn:hover {
    background-color: #1a2a3a; /* Darker shade of secondary color */
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }

  .go-to-top-btn:active {
    transform: translateY(-1px);
  }

/* For mobile screens, adjust position to not overlap with Quick Jump button */
@media (max-width: 768px) {
  .go-to-top-btn {
    bottom: 80px;
    right: 15px;
    padding: 10px;
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}
  /* ========== 5. Search Functionality ========== */
  /* Search Bar */
  .search-container {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-pill);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-sm);
    width: 500px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  #search-input {
    border: none;
    background-color: transparent;
    padding: 12px;
    width: 100%;
    outline: none;
    font-size: 16px;
    color: var(--text-light); 
  }
  
  #search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

  #search-button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-light);
    padding: 12px;
    min-width: 44px;
    min-height: 44px; 
  }

  #search-button i {
    font-size: 18px; /* Larger icon */
  }
  
  #search-button:hover {
    color: var(--primary-color); /* Blue on hover */
}
  .search-results {
    display: none;
    margin-top: var(--spacing-lg);
    background-color: var(--bg-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
  }
  
  /* Automatic Search CSS */
  .search-popup {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 600px;
    background: var(--bg-white);
    border-radius: var(--border-radius-md);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    max-height: 80vh;
    overflow: hidden;
    border: 1px solid var(--border-color);
  }
  
  .search-popup.active {
    display: block;
    animation: fadeIn 0.2s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  
  .search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .search-popup-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-color);
  }
  
  .search-popup-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    padding: 0 5px;
    line-height: 1;
  }
  
  .search-popup-close:hover {
    color: var(--text-color);
  }
  
  .search-popup-content {
    padding: 15px;
    overflow-y: auto;
    max-height: calc(80vh - 50px);
  }
  
  .search-summary {
    background-color: #f5f5f5;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
}
  
  .results-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
    
  .popup-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
  
  .popup-result-item h3 {
    font-size: 16px;
}
  
  .popup-result-item a {
    color: var(--secondary-color);
    text-decoration: none;
  }
  
  .popup-result-item a:hover {
    color: var(--primary-color);
  }
  
    
  mark {
    color: inherit;
}
  
  .no-results {
    border-radius: var(--border-radius-sm);
}
  
  .no-results p:first-child {
    font-size: 16px;
    color: var(--text-color);
    margin-bottom: 5px;
  }
  
  .search-suggestion {
    font-size: 14px;
    color: #777;
    font-style: italic;
  }
  
  .search-loading {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(52, 152, 219, 0.2);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 0.8s linear infinite;
    margin: 30px auto;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  /* Section badge in search results */
  .result-section {
      display: inline-block;
      background-color: var(--primary-color, #3498db);
      color: white;
      font-size: 0.7rem;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 10px;
      margin-left: 8px;
      vertical-align: middle;
  }

  /* Match type indicator */
  .result-match-type {
      display: block;
      font-size: 0.75rem;
      color: #888;
      margin-top: 4px;
      font-style: italic;
  }

  /* Improve result item spacing */
  .popup-result-item {
    border-bottom: 1px solid #eee;
}

  .popup-result-item:last-child {
      border-bottom: none;
  }

  .popup-result-item h3 {
      margin: 0 0 6px 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
  }

  .popup-result-item h3 a {
    text-decoration: none;
    font-size: 1rem;
}

  .popup-result-item h3 a:hover {
    text-decoration: underline;
}

  .result-context {
    margin: 4px 0;
    line-height: 1.4;
}

  /* Search summary styling */
  .search-summary {
      padding: 10px 0;
      border-bottom: 2px solid var(--primary-color, #3498db);
      margin-bottom: 10px;
      font-weight: 500;
      color: var(--secondary-color, #2c3e50);
  }

  /* Results list container */
  .results-list {
      max-height: 400px;
      overflow-y: auto;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
      .result-section {
          font-size: 0.65rem;
          padding: 1px 6px;
      }
      
      .popup-result-item h3 {
          font-size: 0.95rem;
      }
      
      .result-context {
          font-size: 0.85rem;
      }
  }

/* ========== 6. Hero Section ========== */
.hero-section {
    position: relative;
    min-height: 320px;
    background: linear-gradient(180deg, 
        #1a2a3a 0%,
        var(--secondary-color) 30%,
        var(--primary-color) 70%,
        #4a90c2 100%
    );
    color: var(--text-light);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 0; /* Remove margin since compass-gate follows directly */
    overflow: hidden;
}

/* Ambient glow overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 50% 30%, rgba(100, 180, 255, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 70%, rgba(52, 152, 219, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 80% 60%, rgba(100, 180, 255, 0.1) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* Geometric pattern overlay */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/hexagon-pattern.svg');
    background-repeat: repeat;
    background-size: 70px 121px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
}

/* Hero content wrapper */
.hero-content {
    position: relative;
    z-index: 2;
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Main title */
.webpage-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.2;
  text-shadow:
    0 0 24px rgba(100, 180, 255, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.45);
  animation: titleGlow 4s ease-in-out infinite;
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow:
      0 0 24px rgba(100, 180, 255, 0.35),
      0 2px 6px rgba(0, 0, 0, 0.45);
  }
  50% {
    text-shadow:
      0 0 32px rgba(100, 180, 255, 0.5),
      0 2px 6px rgba(0, 0, 0, 0.45);
  }
}

/* Subheading */
/* Subheading */
.subheading {
    /* merged from an earlier duplicate definition of this selector */
    position: relative;
  display: block;
  font-family: var(--font-accent);
  font-size: clamp(14px, 2.5vw, 22px);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: var(--spacing-sm);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.subheading::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg,
  transparent,
  rgba(100, 180, 255, 0.8),
  transparent
  );
  margin: var(--spacing-sm) auto 0;
  animation: lineGlow 3s ease-in-out infinite;
  }
  @keyframes lineGlow {
  0%, 100% {
  opacity: 0.6;
  width: 80px;
  }
  50% {
  opacity: 1;
  width: 120px;
  }
}

/* Hero overlay (for additional effects) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

/* Floating particles in hero */
.hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.hero-particles span {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(100, 180, 255, 0.6);
    border-radius: 50%;
    animation: heroParticleFloat 6s ease-in-out infinite;
}

.hero-particles span:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.hero-particles span:nth-child(2) { top: 75%; left: 15%; animation-delay: 0.5s; }
.hero-particles span:nth-child(3) { top: 25%; left: 85%; animation-delay: 1s; }
.hero-particles span:nth-child(4) { top: 65%; left: 80%; animation-delay: 1.5s; }
.hero-particles span:nth-child(5) { top: 10%; left: 50%; animation-delay: 2s; }
.hero-particles span:nth-child(6) { top: 85%; left: 40%; animation-delay: 2.5s; }
.hero-particles span:nth-child(7) { top: 40%; left: 5%; animation-delay: 3s; }
.hero-particles span:nth-child(8) { top: 55%; left: 95%; animation-delay: 3.5s; }

@keyframes heroParticleFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) scale(1.3);
        opacity: 0.7;
    }
}

/* Bottom gradient transition to compass-gate section */
.hero-section .hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, 
        transparent 0%,
        rgba(11, 18, 32, 0.5) 50%,
        var(--bg-footer) 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 992px) {
    .hero-section {
        min-height: 280px;
    }
    
    .webpage-name {
        letter-spacing: 1.5px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 250px;
    }
    
    .webpage-name {
        letter-spacing: 1px;
    }
    
    .subheading::after {
        width: 60px;
    }
    
    @keyframes lineGlow {
        0%, 100% {
            opacity: 0.6;
            width: 60px;
        }
        50% {
            opacity: 1;
            width: 90px;
        }
    }
    
    /* Reduce particles on mobile */
    .hero-particles span:nth-child(n+5) {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-section {
        min-height: 220px;
    }
    
    .webpage-name {
        letter-spacing: 0.5px;
    }
    
    .hero-particles span {
        width: 3px;
        height: 3px;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .webpage-name,
    .subheading::after,
    .hero-particles span {
        animation: none;
    }
    
    .webpage-name {
        text-shadow: 
            0 0 20px rgba(100, 180, 255, 0.5),
            0 2px 4px rgba(0, 0, 0, 0.3);
    }
}
  
  /* ========== 7. Content Components ========== */

  .homepage-introduction {
    background-color: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    font-size: 16px;
    line-height: 1.6;
    border-left: 4px solid var(--primary-color);
  }

    /* Collapsible Introduction Section */
  .collapsible-intro {
    position: relative;
    transition: max-height 0.4s ease-out;
    overflow: hidden;
  }

  .collapsible-intro.collapsed {
    max-height: 130px; /* Show approximately 3-4 lines of text */
  }

  .intro-toggle {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
  }

  .intro-toggle:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .intro-toggle i {
    transition: transform 0.3s ease;
  }

  .intro-toggle.collapsed i {
    transform: rotate(180deg);
  }

  .intro-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-white));
    pointer-events: none;
    display: none;
  }

  .collapsible-intro.collapsed .intro-fade {
    display: block;
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .collapsible-intro.collapsed {
      max-height: 100px; /* Smaller on mobile */
    }
    
    .intro-fade {
      height: 60px;
    }
  }
  
  /* ========== TOPIC CARDS CONTAINER ========== */
  .topic-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--spacing-lg);
      margin-top: var(--spacing-md);
  }
  
  /* ========== BASE CARD STYLES ========== */
  .card {
      background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
      border-radius: var(--border-radius-lg);
      padding: var(--spacing-lg);
      box-shadow: 
          0 4px 20px rgba(0, 0, 0, 0.08),
          0 1px 3px rgba(0, 0, 0, 0.05);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(52, 152, 219, 0.1);
  }

  /* Subtle top accent line */
  .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, 
          var(--primary-color) 0%, 
          #64b4ff 50%,
          var(--primary-color) 100%
      );
      opacity: 0;
      transition: opacity 0.3s ease;
  }

  /* Hover state */
  .card:hover {
      transform: translateY(-8px);
      box-shadow: 
          0 20px 40px rgba(52, 152, 219, 0.15),
          0 8px 16px rgba(0, 0, 0, 0.1);
      border-color: rgba(52, 152, 219, 0.3);
  }

  .card:hover::before {
      opacity: 1;
  }

  .card-disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  /* Card icon enhancement */
  .card-icon {
      font-size: 2.8rem;
      color: var(--primary-color);
      margin-bottom: var(--spacing-md);
      transition: all 0.3s ease;
      position: relative;
  }

  .card-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      background: radial-gradient(circle, rgba(52, 152, 219, 0.1) 0%, transparent 70%);
      border-radius: 50%;
      z-index: -1;
      transition: all 0.3s ease;
  }

  .card:hover .card-icon {
      transform: scale(1.1);
      color: #2980b9;
  }

  .card:hover .card-icon::after {
      width: 80px;
      height: 80px;
      background: radial-gradient(circle, rgba(52, 152, 219, 0.15) 0%, transparent 70%);
  }
  
  /* Card title */
  .card h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-sm);
    color: var(--secondary-color);
    letter-spacing: 0.3px;
}

  .card h3 a {
      color: var(--secondary-color);
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .card:hover h3 a {
      color: var(--primary-color);
  }

  /* Card description */
  .card p {
      color: var(--text-muted);
      font-size: 0.95rem;
      line-height: 1.6;
      margin: 0;
  }

  .card a:hover {
    color: var(--primary-color);
  }

   /* ── Update Log ── */
  
  .update-notice {
    background-color: var(--bg-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid var(--accent-color);
  }
  
  .update-notice h2 {
      color: var(--secondary-color);
      margin-bottom: var(--spacing-sm);
  }
  
  /* ── Update Log: Filter Bar ── */
  #update-log .ul-filter-row {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 16px;
  }
  
  #update-log .ul-filter-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-right: 4px;
      flex-shrink: 0;
  }
  
  #update-log .ul-fbtn {
      padding: 4px 12px;
      border-radius: 6px;
      border: 1px solid var(--border-color);
      background: transparent;
      color: var(--text-muted);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.18s;
      font-family: inherit;
      line-height: 1.5;
  }
  
  #update-log .ul-fbtn:hover {
      background: rgba(0, 0, 0, 0.04);
      color: var(--text-color);
      border-color: #bbb;
  }
  
  #update-log .ul-fbtn.on {
      background: rgba(0, 0, 0, 0.06);
      color: var(--secondary-color);
      border-color: #aaa;
  }
  
  #update-log .ul-fdot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 5px;
      vertical-align: -0.5px;
  }
  
  #update-log .ul-sep {
      width: 1px;
      height: 18px;
      background: var(--border-color);
      margin: 0 6px;
      flex-shrink: 0;
  }
  
  /* ── Update Log: Timeline ── */
  #update-log .ul-timeline {
      margin-top: 4px;
  }
  
  #update-log .ul-month {
      margin-bottom: 2px;
  }
  
  #update-log .ul-month-head {
      font-size: 11.5px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      padding: 8px 0 4px 0;
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  #update-log .ul-month-n {
      font-size: 10px;
      padding: 1px 7px;
      border-radius: 9px;
      background: rgba(0, 0, 0, 0.05);
      color: var(--text-muted);
      font-weight: 500;
  }
  
  /* ── Update Log: 2-Column Grid ── */
  #update-log .ul-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 12px;
  }
  
  /* ── Update Log: Entry ── */
  #update-log .ul-entry {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 9px 10px;
      margin: 0;
      border-radius: 8px;
      transition: background 0.14s;
      text-decoration: none;
      color: inherit;
  }
  
  #update-log .ul-entry:hover {
      background: rgba(0, 0, 0, 0.03);
  }
  
  #update-log a.ul-entry {
      cursor: pointer;
  }
  
  #update-log .ul-ico {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 1px;
  }
  
  #update-log .ul-body {
      flex: 1;
      min-width: 0;
  }
  
  #update-log .ul-text {
      font-size: 13px;
      color: var(--text-color);
      line-height: 1.4;
  }
  
  #update-log a.ul-entry:hover .ul-text {
      color: var(--primary-color);
  }
  
  #update-log .ul-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
      font-size: 11px;
      color: var(--text-muted);
  }
  
  #update-log .ul-badge {
      padding: 1px 7px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.02em;
  }
  
  #update-log .ul-arrow {
      color: #ccc;
      font-size: 13px;
      flex-shrink: 0;
      align-self: center;
      transition: color 0.15s, transform 0.15s;
  }
  
  #update-log a.ul-entry:hover .ul-arrow {
      color: var(--primary-color);
      transform: translateX(2px);
  }
  
  /* ── Update Log: Show More ── */
  #update-log .ul-more {
      display: flex;
      justify-content: center;
      gap: 10px;
      padding: 12px 0 4px;
  }
  
  #update-log .ul-more-btn {
      padding: 8px 24px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      background: transparent;
      color: var(--text-muted);
      font-size: 12.5px;
      cursor: pointer;
      transition: all 0.18s;
      font-family: inherit;
  }
  
  #update-log .ul-more-btn:hover {
      background: rgba(0, 0, 0, 0.04);
      color: var(--text-color);
      border-color: #aaa;
  }
  
  #update-log .ul-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
      font-size: 13.5px;
  }
  
  /* ── Update Log: Responsive ── */
  @media (max-width: 768px) {
      #update-log .ul-grid {
          grid-template-columns: 1fr;
      }
  }
  
  @media (max-width: 600px) {
      #update-log .ul-entry {
          padding: 8px 6px;
          gap: 8px;
      }
  
      #update-log .ul-ico {
          width: 24px;
          height: 24px;
          font-size: 10px;
      }
  
      #update-log .ul-text {
          font-size: 12.5px;
      }
  
      #update-log .ul-sep {
          display: none;
      }
  
      #update-log .ul-filter-row {
          gap: 5px;
      }
  }

  .references {
    background-color: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
  }
  
  .references h2 {
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--primary-color);
  }

  /* ── Reference Controls: view toggle + filter row ── */
  .ref-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--spacing-md);
  }

  .ref-view-toggle {
    display: flex;
    gap: 4px;
    background: var(--bg-light);
    border-radius: 8px;
    padding: 3px;
  }

  .ref-view-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .ref-view-btn:hover {
    color: var(--text-color);
  }

  .ref-view-btn.active {
    background: var(--bg-white);
    color: var(--secondary-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    font-weight: 600;
  }

  .ref-view-btn i {
    font-size: 11px;
  }

  .ref-filter-row {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
  }

  .ref-filter-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-right: 4px;
    flex-shrink: 0;
  }

  .ref-fbtn {
    padding: 4px 11px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .ref-fbtn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-color);
    border-color: #bbb;
  }

  .ref-fbtn.on {
    background: rgba(0, 0, 0, 0.06);
    color: var(--secondary-color);
    border-color: #aaa;
    font-weight: 600;
  }

  .ref-fdot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
  }

  /* ── Reference List ── */
  .ref-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ref-group-heading {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin: var(--spacing-md) 0 var(--spacing-xs) 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ref-group-heading:first-child {
    margin-top: 0;
  }

  .ref-group-heading i {
    font-size: 0.85em;
    opacity: 0.6;
  }

  .ref-section-heading {
    border-bottom-color: transparent;
    padding-bottom: 4px;
  }

  .ref-section-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ref-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.15s;
  }

  .ref-item:hover {
    background: rgba(0, 0, 0, 0.03);
  }

  .ref-text {
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.6;
    color: #333;
  }

  .ref-text em {
    font-style: italic;
  }

  .ref-text a {
    color: #0366d6;
    text-decoration: none;
    font-weight: 500;
  }

  .ref-text a:hover {
    text-decoration: underline;
    color: #004ba0;
  }

  .ref-tags {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    align-self: center;
  }

  .ref-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.02em;
    color: var(--pill-color);
    background: color-mix(in srgb, var(--pill-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill-color) 25%, transparent);
    line-height: 1.4;
    cursor: default;
  }

  /* Hidden state for filtering */
  .ref-hidden {
    display: none !important;
  }

  /* ── Responsive ── */
  @media (max-width: 600px) {
    .ref-controls {
      flex-direction: column;
      align-items: flex-start;
    }
    .ref-item {
      flex-direction: column;
      gap: 4px;
    }
    .ref-tags {
      align-self: flex-start;
    }
  }
  
  .contact-section {
    text-align: center;
    margin: var(--spacing-lg) 0;
  }
  
  .contact-section a {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    font-weight: 500;
    transition: background-color var(--transition-normal);
    margin: 0 var(--spacing-xs);
  }
  
  .contact-section a:hover {
    background-color: #2980b9;
  }

  .responsive-image {
    max-width: 100%;
    height: auto;
    width: 600px;
    display: block;
    margin: 0 auto;
  }
  
  @media (max-width: 768px) {
    .responsive-image {
      width: 90%;
    }
  }
  
  /* ========== 8. Mathematics Content Styling ========== */

  .theorem {
    background-color: #f1f8ff;
    padding: var(--spacing-lg);
    margin: var(--spacing-sm) 0;
    border-radius: 5px;
    border-left: 4px solid #e68207;
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  .theorem-title {
    display: block;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-xs);
  }
  
  .proof {
    background-color: #f9f9f9;
    padding: var(--spacing-lg);
    margin: var(--spacing-sm) 0;
    border-radius: 5px;
    border-left: 4px solid #2ecc71;
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  .proof-title {
    display: block;
    font-weight: bold;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-xs);
  }

  /* Insight Box: For unique perspectives linking Math and Reality */
  .insight-box {
      background-color: #f8f9fa;
      border-left: 4px solid var(--secondary-color); 
      padding: 1.5rem;
      margin: 2rem 0;
      border-radius: 0 8px 8px 0;
      font-size: 0.95rem;
      line-height: 1.7;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .insight-box h3 {
      margin-top: 0;
      color: var(--secondary-color);
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
  }

  .insight-box h3::before {
      content: "💡";
  }
  
  .math-table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1rem;
  }
  
  .math-table-container .MathJax {
    max-width: 100%;
  }

  .math-table-title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  .math-table-caption {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    font-style: italic;
  }

  .section-content {
    background-color: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    line-height: 1.6;
    border-left: 5px solid var(--primary-color);
    overflow-x: auto;
    overflow-y: hidden;
  }
  
  .topic-nav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
    background-color: var(--bg-white);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
  }
  
  .topic-nav a {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-lg);
    background-color: #f0f0f0;
    color: var(--text-color);
    text-decoration: none;
    margin: var(--spacing-xs);
    transition: all 0.3s ease;
  }
  
  .topic-nav a:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
    transform: translateY(-2px);
  }
  
  .code-tag {
    display: inline-block;
    background-color: #2ecc71;
    color: var(--text-light);
    font-size: 0.8rem;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    margin-right: var(--spacing-xs);
  }
  
  .toc-container {
    background-color: var(--bg-white);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-lg);
    border-left: 4px solid #f39c12;
    max-width: 300px;
    position: sticky;
    top: 2rem;
  }
  
  .toc-container h2 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
    color: var(--secondary-color);
  }
  
  .toc-container ul {
    list-style-type: none;
    padding-left: 0;
  }
  
  .toc-container li {
    margin-bottom: var(--spacing-xs);
  }
  
  .toc-container a {
    color: var(--text-color);
    text-decoration: none;
    transition: color var(--transition-fast);
    font-size: 0.95rem;
  }
  
  .toc-container a:hover {
    color: var(--primary-color);
    text-decoration: none;
  }
  
  .keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
  }
  
  .keywords span {
    background-color: #f0f5fa;
    border: 1px solid #d0e0f0;
    border-radius: 15px;
    padding: 0.2rem 0.8rem;
    font-size: 0.9rem;
    color: var(--secondary-color);
  }
  
  /* ========== 9. Code Styling ========== */
  .pseudocode {
    background-color: #f8f9fa;
    border-left: 4px solid #e67e22;
    padding: 1.2rem;
    margin: 1.5rem 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    line-height: 1.5;
    overflow-x: auto;
    
    white-space: pre;
    word-wrap: normal;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  .pseudocode-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--text-color);
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .python-code {
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: var(--border-radius-md);
    padding: 1.2rem;
    margin: 1.5rem 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    overflow-x: auto;
    box-shadow: var(--shadow-sm);
    line-height: 1.5;
    position: relative;
    white-space: pre; 
    word-wrap: normal;
  }
  
  .python-output {
    background-color: #f9f9fc;
    border: 1px solid #e1e4e8;
    border-left: 4px solid #9b59b6;
    border-radius: var(--border-radius-md);
    padding: 1.2rem;
    margin: 1.5rem 0;
    font-family: Consolas, "Courier New", monospace;
    font-size: 15px;
    overflow-x: auto;
    white-space: pre-wrap;
    line-height: 1.5;
    min-height: 50px;
    box-shadow: var(--shadow-sm);
  }
  
  .code-container {
    position: relative;
    margin: 2rem 0;
  }
  
  .code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f1f1f1;
    padding: 0.6rem 1rem;
    border-top-left-radius: var(--border-radius-md);
    border-top-right-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    border-bottom: none;
  }
  
  .code-title {
    font-weight: bold;
    font-size: 14px;
    color: var(--text-color);
  }
  
  /* ========== 10. Buttons & Interactive Elements ========== */
  .run-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    font-weight: 500;
  }
  
  .run-button:hover {
    background-color: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .run-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* ========== 11. Collapsible Sections ========== */
  .collapsible-section {
    margin: 1.5rem 0;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
  
  .collapsible-header {
    background-color: #f1f8ff;
    border-left: 4px solid var(--primary-color);
}
  
  .collapsible-header:hover {
    background-color: #e3f2fd;
  }
  
  .collapsible-title {
    font-weight: bold;
    font-size: 16px;
    color: var(--secondary-color);
  }
  
  .collapsible-icon {
    transition: transform var(--transition-normal);
  }
  
  .collapsible-header.active .collapsible-icon {
    transform: rotate(180deg);
  }
  
  .collapsible-btn {
    background-color: var(--primary-color);
    color: var(--text-light);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
    transition: background-color var(--transition-normal);
  }
  
  .collapsible-btn:hover {
    background-color: #2980b9;
  }
  
  .collapsible-content {
    display: none;
    background-color: #f4f4f4;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-top: 10px;
    box-sizing: border-box;
}

  /* ========== References Collapse ========== */
  .ref-heading-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ref-heading-toggle:hover {
    opacity: 0.8;
  }

  .ref-collapse-icon {
    font-size: 0.6em;
    transition: transform 0.3s ease;
  }

  .ref-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
  }

  #references-content:not(.ref-collapsed) {
    /* transition ceiling — must exceed the tallest possible content.
       At the 860px reading column, ~53 reference rows plus headings
       run well past the old 2000px, which painted overflow outside
       the card. Section view (with per-section clones) is taller
       still. 8000px is safe headroom for growth. */
    max-height: 8000px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease;
  }
  
  /* ========== 12. Footer ========== */
footer {
    background: linear-gradient(180deg,
        var(--bg-footer) 0%,
        #1a2a3a 50%,
        #0d1a2d 100%
    );
    color: var(--text-light);
    padding: 3rem 0 0 0;
    position: relative;
    overflow: hidden;
}

/* Ambient glow effects */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(52, 152, 219, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(100, 180, 255, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(52, 152, 219, 0.04) 0%, transparent 60%);
    pointer-events: none;
}

/* Top border glow */
footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(52, 152, 219, 0.3) 20%,
        rgba(100, 180, 255, 0.5) 50%,
        rgba(52, 152, 219, 0.3) 80%,
        transparent 100%
    );
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-xl);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    position: relative;
    z-index: 1;
}

/* Footer section headers */
.footer-about h3,
.footer-links h3,
.footer-social h3 {
    color: #64b4ff;
    margin-bottom: var(--spacing-md);
    font-size: 1.3rem;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 15px rgba(100, 180, 255, 0.3);
}

/* Decorative line under h3 */
.footer-about h3::after,
.footer-links h3::after,
.footer-social h3::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #64b4ff, transparent);
    border-radius: 2px;
}

.footer-about p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: var(--spacing-sm);
}

.footer-about p em {
    color: rgba(100, 180, 255, 0.9);
    font-style: italic;
    display: block;
    margin-top: var(--spacing-sm);
    padding-left: var(--spacing-sm);
    border-left: 2px solid rgba(100, 180, 255, 0.4);
}

/* Footer links enhancement */
.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: var(--spacing-sm);
}

.footer-links a {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.footer-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: linear-gradient(180deg, #64b4ff, #3498db);
    transform: scaleY(0);
    transition: transform var(--transition-normal);
    border-radius: 0 2px 2px 0;
}

.footer-links a:hover {
    color: #fff;
    background: rgba(100, 180, 255, 0.1);
    transform: translateX(4px);
    text-decoration: none;
}

.footer-links a:hover::before {
    transform: scaleY(1);
}

.footer-links a span:not(.nav-number) {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-normal);
}

.footer-links a:hover span:not(.nav-number) {
    color: #fff;
}

.footer-links .nav-number {
    color: #64b4ff;
    display: inline-block;
    width: 1.8em;
    text-align: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
    text-shadow: 0 0 8px rgba(100, 180, 255, 0.4);
}

/* Social links enhancement */
.footer-social a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.footer-social a:hover {
    color: #64b4ff;
    text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
    text-decoration: none;
}

.footer-social a i {
    margin-right: var(--spacing-xs);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.3em;
    transition: all var(--transition-normal);
}

.footer-social a:hover i {
    color: #64b4ff;
    transform: scale(1.2);
    text-shadow: 0 0 15px rgba(100, 180, 255, 0.6);
}

/* Social icon specific styling */
.footer-social .fab.fa-x-twitter {
    padding: 10px;
    background: rgba(100, 180, 255, 0.1);
    border-radius: 50%;
    transition: all var(--transition-normal);
}

.footer-social a:hover .fab.fa-x-twitter {
    background: rgba(100, 180, 255, 0.25);
    box-shadow: 0 0 20px rgba(100, 180, 255, 0.3);
}

/* App download section enhancement */
.app-download-footer {
    margin: var(--spacing-md) 0;
}

.google-play-badge {
    height: 55px;
    width: auto;
    transition: all var(--transition-normal);
    border-radius: 10px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.google-play-badge:hover {
    transform: scale(1.08) translateY(-2px);
    filter: drop-shadow(0 4px 15px rgba(100, 180, 255, 0.3));
}

/* Enhanced footer bottom */
.footer-bottom {
    background: linear-gradient(180deg,
        rgba(13, 26, 45, 0.8) 0%,
        #0a1628 100%
    );
    text-align: center;
    padding: 1.8rem 0;
    margin-top: 3rem;
    position: relative;
    border-top: 1px solid rgba(100, 180, 255, 0.1);
}

.footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(100, 180, 255, 0.5),
        transparent
    );
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
}

.footer-bottom a {
    color: #64b4ff;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.footer-bottom a:hover {
    color: #fff;
    text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
    text-decoration: none;
}

/* Footer Typography Enhancement */
.footer-about h3,
.footer-links h3,
.footer-social h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.footer-links a {
  font-family: var(--font-accent);
  font-weight: 500;
}
.footer-links .nav-number {
  font-family: var(--font-display);
  font-weight: 700;
}


/* ========== RESPONSIVE ADJUSTMENTS ========== */

@media (max-width: 992px) {
    .navbar {
        padding: var(--spacing-sm);
    }
    
    .nav-logo {
        height: 100px;
    }
    
        
    .nav-links {
    background: linear-gradient(180deg,
            var(--bg-footer) 0%,
            #1a2a3a 100%
        );
    border-bottom: 1px solid rgba(100, 180, 255, 0.2);
}
    
        
        
    .nav-links a {
    padding: var(--spacing-sm);
}
    
    .nav-links a::after {
        display: none;
    }
    
    .menu-toggle {
    align-items: center;
    justify-content: center;
}
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-xl);
    }
    
    .footer-about h3::after,
    .footer-links h3::after,
    .footer-social h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-links a {
        justify-content: center;
    }
    
    .footer-links a::before {
        display: none;
    }
    
    .footer-links a:hover {
        transform: translateY(-2px);
    }
}

@media (max-width: 768px) {
    .nav-logo {
        height: 90px;
    }
    
    .search-container {
    padding: 6px 12px;
}
    
    #search-input {
        padding: 10px 8px;
        font-size: 14px;
    }
    
    .footer-content {
        padding: 0 var(--spacing-md);
    }
    
    .google-play-badge {
        height: 50px;
    }
}

@media (max-width: 576px) {
    .navbar {
    min-height: 70px;
}
    
    .nav-logo {
        height: 50px;
    }
    
        
    .menu-toggle {
        min-width: 40px;
        min-height: 40px;
        font-size: 1.2rem;
    }
    
    .footer-content {
        padding: 0 var(--spacing-sm);
    }
    
    .footer-about h3,
    .footer-links h3,
    .footer-social h3 {
        font-size: 1.15rem;
    }
    
    .footer-bottom {
        padding: 1.5rem var(--spacing-sm);
    }
    
    .footer-bottom p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .nav-logo {
        height: 45px;
    }
    
    .search-container {
        width: 55%;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .navbar::after,
    .nav-links a::after,
    .footer-links a::before {
        animation: none;
        transition: none;
    }
    
    .logo-link:hover .nav-logo,
    #search-button:hover,
    .menu-toggle:hover,
    .google-play-badge:hover,
    .footer-social a:hover i {
        transform: none;
    }
}
  
 /* ========== 13. Typography & Headers ========== */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    color: var(--secondary-color);
  }
  h2 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xxl);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
  }
  h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--primary-color), transparent);
  }
  h3 {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: var(--spacing-sm);
  }
  h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
  }
  p {
    margin-bottom: var(--spacing-sm);
  }
  a {
    color: var(--primary-color);
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }

  /* ========== 14. Responsive Design ========== */
  @media (max-width: 992px) {
    .nav-links {
      position: fixed;
      top: 70px;
      left: 0;
      width: 100%;
      flex-direction: column;
      background-color: var(--bg-footer); /* Changed from var(--bg-white) to match header */
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--transition-slow);
      box-shadow: var(--shadow-md);
      z-index: 999;
      
    }
    
    .nav-links.active {
    /* merged from an earlier duplicate definition of this selector */
    overflow-y: auto;
      max-height: 500px;
      padding: var(--spacing-sm) 0;
    }
    
    .nav-links li {
        margin: 0;
        padding: var(--spacing-sm) var(--spacing-lg);
        width: 100%;
        display: flex;
        align-items: center;
    }

    .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .nav-number {
        width: 1.5em;
        text-align: left;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }
      
    .menu-toggle {
       display: block; /* Show toggle button on mobile */
        z-index: 1000;
        padding: 10px;
        cursor: pointer;
    }
    
    .search-container {
      width: 50%;
    }

    #search-input, #search-button {
      min-height: 44px;
    }
  
    .toc-container {
      position: static;
      max-width: 100%;
    }
  }
  
  @media (max-width: 768px) {
    .container {
      padding: var(--spacing-sm);
    }
    
    .hero-section {
      height: 250px;
    }
    
    .webpage-name {
      font-size: 48px;
    }
    
    .subheading {
      font-size: 18px;
    }
    
    .topic-cards {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--spacing-md);
    }
    
    .card {
      padding: 1.25rem;
    }
    
    .search-container {
      width: 50%;
    }
    /* legacy vertical stacking removed: the chapter rail is a single
       horizontal line at every width (v2 design) */
  
    .pseudocode,
    .python-code,
    .python-output {
      padding: var(--spacing-sm);
    }
  }
  
  @media (max-width: 576px) {
    .navbar {
      padding: var(--spacing-sm);
    }
    
    .logo h1 {
      font-size: 1.25rem;
    }
    
    .site-logo {
      height: 100px;
    }
    
    .search-container {
      width: 70%;
      margin: 0 var(--spacing-xs);
      padding: 8px 12px;
    }

    #search-input {
      padding: 12px 8px; 
    }
    
    #search-button {
      padding: 12px 8px; 
    }
    
    .topic-cards {
      grid-template-columns: 1fr;
    }
    
    .webpage-name {
      font-size: 30px;
    }
    
    .subheading {
      font-size: 16px;
    }
    
    .footer-content {
      grid-template-columns: 1fr;
      text-align: center;
    }
  }

  /* ========== 15. Card Badges & Enhanced Keywords ==========
 * MATH-CS COMPASS - Additional styles for dynamic card system
 * 
 * INSTALLATION:
 * Add these rules to the end of your styles.css file,
 * after the existing .keywords styles (around line 1254)
 * ======================================================= */

/* --- Card Badges --- */
.card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--spacing-xs);
  justify-content: center;
}

.card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-badge-code {
  background-color: #e8f5e9;
  color: var(--section-ii-color);
  border: 1px solid #a5d6a7;
}

.card-badge-interactive {
  background-color: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

/* Card Typography Enhancement */
.card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
}
.card h3 a {
  letter-spacing: 0.3px;
}
.card-badge-map {
  font-family: var(--font-accent);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* --- Keywords "More" Indicator with Tooltip --- */
.keywords-more {
  background-color: #e8e8e8;
  border: 1px dashed #999;
  border-radius: 15px;
  padding: 0.2rem 0.8rem;
  font-size: 0.85rem;
  color: #666;
  cursor: pointer;
  font-style: italic;
  position: relative; /* Required for tooltip positioning */
}

.keywords-more:hover {
  background-color: #d0d0d0;
}

/* Tooltip that appears on hover */
.keywords-more::after {
  content: attr(data-tooltip); /* Gets content from data-tooltip attribute */
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-style: normal;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  max-width: 250px;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

/* Tooltip arrow */
.keywords-more::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2c3e50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 100;
  margin-bottom: -4px;
}

/* Show tooltip on hover */
.keywords-more:hover::after,
.keywords-more:hover::before {
  opacity: 1;
  visibility: visible;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    
  /* Position tooltip to the side on mobile to avoid overflow */
  .keywords-more::after {
    max-width: 200px;
    font-size: 0.75rem;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .card-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
  }
  
  .keywords-more {
    font-size: 0.8rem;
    padding: 0.15rem 0.6rem;
  }
}

/* Force-hide any navbar bottom pseudo-line on small screens */
@media (max-width: 768px) {
  .navbar::after {
    display: none !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Also remove any thin border on the fixed nav links */
  .nav-links {
    border-bottom: none !important;
    box-shadow: none !important;
  }

  /* Safety: remove tiny line from footer pseudo-element if it ever appears at top */
  footer::after {
    display: none !important;
    height: 0 !important;
    background: transparent !important;
  }
}
 
/*Additional ones for light mode*/
/* ========== LOGO SIZE (consistent with dark theme) ========== */
.nav-logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.logo-link:hover .nav-logo {
    transform: rotate(15deg) scale(1.2);
}

.logo-home {
    display: flex;
    align-items: center;
}

/* ========== EXPLORE TOPICS - TWO-COLUMN GRID (PC, Homepage Only) ==========
 * Five section cards in two columns. Cards fill row by row:
 *   I    II
 *   III  IV
 *   V    (empty)
 * Section V lands in the bottom-left cell as if a sixth card existed; the
 * bottom-right cell is intentionally left empty. minmax(0, 1fr) keeps long
 * card text from widening a column past the (860px) section frame. */
@media (min-width: 1200px) {
    .topic-cards.homepage-explore {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-lg);
        align-items: stretch;
    }
}

/* ========== KNOWLEDGE MAP CARD (SPECIAL) ========== */
.card-map-highlight {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border: 2px solid rgba(52, 152, 219, 0.3);
}

.card-map-highlight::before {
    background: linear-gradient(90deg,
        #3498db 0%,
        #64b4ff 25%,
        #2ecc71 50%,
        #64b4ff 75%,
        #3498db 100%
    );
    background-size: 200% 100%;
    animation: mapCardShimmer 3s linear infinite;
    opacity: 1;
}

@keyframes mapCardShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== WORLDS OVERVIEW BOX ========== */
.worlds-overview {
    background: #f5f8fa;
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}

.worlds-overview h4 {
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

/* ========== INLINE CODE ========== */
code {
    background-color: #f0f0f0;
    color: #c7254e;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* ========== TABLES ========== */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-white);
    border: 1px solid var(--border-color);
    margin: 1rem 0;
}

th {
    background-color: #f5f5f5;
    color: var(--secondary-color);
    font-weight: 600;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

td {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    color: var(--text-color);
}

tr:hover {
    background-color: #f9f9f9;
}

/* ========== SEARCH POPUP ========== */
#search-popup {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
}

.popup-result-item {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    transition: all 0.2s ease;
}

.popup-result-item:hover {
    background-color: #f0f7ff;
    border-color: rgba(52, 152, 219, 0.3);
}

.popup-result-item h3 a {
    color: var(--secondary-color);
}

.popup-result-item h3 a:hover {
    color: var(--primary-color);
}

.result-context {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.no-results {
    background-color: #f9f9f9;
    color: var(--text-muted);
    padding: var(--spacing-md);
    text-align: center;
}

mark {
    background-color: rgba(52, 152, 219, 0.2);
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* ========== MATH TABLE ========== */
.math-table-title {
    color: var(--secondary-color);
}

.math-table-caption {
    color: var(--text-muted);
}

/* ========== BOLD LINKS FIX ========== */
.section-content a strong,
.section-content strong a,
a strong {
    color: var(--primary-color);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.section-content a:hover strong,
.section-content strong a:hover,
a:hover strong {
    color: #2980b9;
}

/* ========== PC READABILITY IMPROVEMENTS ========== */
@media (min-width: 1200px) {
    .container {
        max-width: 1500px;
        padding: var(--spacing-lg) var(--spacing-xl);
    }

    .section-content {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.1rem;
        line-height: 1.85;
        padding: var(--spacing-xl);
    }

    .section-content p,
    .section-content li {
        font-size: 1.1rem;
        line-height: 1.85;
    }

    .homepage-introduction {
        font-size: 1.1rem;
        line-height: 1.85;
    }

    .section-content li {
        margin-bottom: 0.5rem;
    }

    .section-content h2 {
        font-size: 1.7rem;
        margin-top: 2.5rem;
        margin-bottom: 1.2rem;
    }

    .section-content h3 {
        font-size: 1.35rem;
        margin-top: 2rem;
        margin-bottom: 1rem;
    }

    .theorem,
    .proof,
    .insight-box {
        font-size: 1.1rem;
        line-height: 1.75;
        padding: 1.5rem;
    }

    .pseudocode,
    .python-code,
    .python-output {
        font-size: 1rem;
        line-height: 1.6;
        padding: 1.25rem;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1700px;
    }

    .section-content {
        max-width: 1350px;
        font-size: 1.15rem;
        line-height: 1.9;
    }

    .section-content p,
    .section-content li {
        font-size: 1.15rem;
        line-height: 1.9;
    }

    .homepage-introduction {
        font-size: 1.15rem;
        line-height: 1.9;
    }

    .section-content h2 {
        font-size: 1.9rem;
    }

    .section-content h3 {
        font-size: 1.45rem;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1900px;
        padding: var(--spacing-xl) 4rem;
    }

    .section-content {
        max-width: 1500px;
        font-size: 1.2rem;
        padding: 3rem;
    }

    .section-content p,
    .section-content li {
        font-size: 1.2rem;
        line-height: 1.9;
    }

  .homepage-introduction {
      font-size: 1.2rem;
      line-height: 1.9;
  }

    .theorem,
    .proof,
    .insight-box {
        font-size: 1.2rem;
        padding: 2rem;
    }
}

/* ========== MERMAID DIAGRAMS (Light) ========== */
.mermaid {
    background: #f8f9fa;
    border-radius: 12px;
    padding: var(--spacing-md);
    border: 1px solid #e0e0e0;
}

/* ========== COLLAPSIBLE SECTIONS ========== */
.collapsible-section {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
}

.collapsible-header {
    background: #f5f5f5;
    color: var(--secondary-color);
    padding: var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.collapsible-header:hover {
    background: #ebebeb;
}

.collapsible-content {
    padding: var(--spacing-md);
    color: var(--text-color);
}

/* ========== THEME SWITCH========== */
.theme-toggle-btn {
    background: rgba(100, 180, 255, 0.1);
    border: 1px solid rgba(100, 180, 255, 0.3);
    color: #64b4ff;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.theme-toggle-btn:hover {
    background: rgba(100, 180, 255, 0.2);
}

/* ========== SECTION-SPECIFIC CARD COLORS (LIGHT THEME) ==========
 * Adds unique section colors to the homepage Explore Topics cards ONLY
 * ============================================================= */

/* 1. Define specific colors for each section card */
.homepage-explore .card:nth-child(1) {
    --card-color: var(--section-i-color); /* Section I: Deep Blue */
    --card-rgb: 21, 101, 192;
    --card-hover-color: #0d47a1;
}
.homepage-explore .card:nth-child(2) {
    --card-color: var(--section-ii-color); /* Section II: Forest Green */
    --card-rgb: 46, 125, 50;
    --card-hover-color: #1b5e20;
}
.homepage-explore .card:nth-child(3) {
    --card-color: var(--section-iii-color); /* Section III: Teal/Cyan */
    --card-rgb: 0, 131, 143;
    --card-hover-color: #006064;
}
.homepage-explore .card:nth-child(4) {
    --card-color: var(--section-iv-color); /* Section IV: Deep Purple */
    --card-rgb: 106, 27, 154;
    --card-hover-color: #4a148c;
}
.homepage-explore .card:nth-child(5) {
    --card-color: var(--section-v-color); /* Section V: Vibrant Orange */
    --card-rgb: 239, 108, 0;
    --card-hover-color: #e65100;
}

/* 2. Apply the colors EXCLUSIVELY to homepage cards (.homepage-explore) */
.homepage-explore .card {
    border-color: rgba(var(--card-rgb), 0.15);
}

.homepage-explore .card::before {
    background: linear-gradient(90deg, 
        var(--card-color) 0%, 
        rgba(var(--card-rgb), 0.4) 50%,
        var(--card-color) 100%
    );
}

.homepage-explore .card .card-icon {
    color: var(--card-color);
}

.homepage-explore .card .card-icon::after {
    background: radial-gradient(circle, rgba(var(--card-rgb), 0.1) 0%, transparent 70%);
}

.homepage-explore .card:hover {
    box-shadow: 
        0 20px 40px rgba(var(--card-rgb), 0.15),
        0 8px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--card-rgb), 0.3);
}

.homepage-explore .card:hover .card-icon {
    color: var(--card-hover-color);
}

.homepage-explore .card:hover .card-icon::after {
    background: radial-gradient(circle, rgba(var(--card-rgb), 0.15) 0%, transparent 70%);
}

.homepage-explore .card:hover h3 a {
    color: var(--card-color);
}

/* ========== WHOLE-CARD CLICK TARGET ==========
 * Make the entire Explore Topics card clickable/tappable. The anchor's
 * ::after is stretched to cover the whole card (which is position:relative),
 * so a click anywhere on the card follows the link. Real text/icons keep
 * their own stacking so text remains selectable where it sits above. */
.homepage-explore .card {
    cursor: pointer;
}

.homepage-explore .card .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ========== HEADER & FOOTER NAV LINKS SECTION COLORS ========== */
.nav-links a[href*="linear_algebra"], .footer-links a[href*="linear_algebra"] { --nav-color: var(--section-i-light); --nav-rgb: 66, 165, 245; }
.nav-links a[href*="calculus"], .footer-links a[href*="calculus"] { --nav-color: var(--section-ii-light); --nav-rgb: 102, 187, 106; }
.nav-links a[href*="probability"], .footer-links a[href*="probability"] { --nav-color: var(--section-iii-light); --nav-rgb: 38, 198, 218; }
.nav-links a[href*="discrete_math"], .footer-links a[href*="discrete_math"] { --nav-color: var(--section-iv-light); --nav-rgb: 171, 71, 188; }
.nav-links a[href*="ml.html"], .footer-links a[href*="ml.html"] { --nav-color: var(--section-v-light); --nav-rgb: 255, 167, 38; }

.nav-links a[href*="linear_algebra"] .nav-number, .footer-links a[href*="linear_algebra"] .nav-number,
.nav-links a[href*="calculus"] .nav-number, .footer-links a[href*="calculus"] .nav-number,
.nav-links a[href*="probability"] .nav-number, .footer-links a[href*="probability"] .nav-number,
.nav-links a[href*="discrete_math"] .nav-number, .footer-links a[href*="discrete_math"] .nav-number,
.nav-links a[href*="ml.html"] .nav-number, .footer-links a[href*="ml.html"] .nav-number {
    color: var(--nav-color);
    text-shadow: 0 0 8px rgba(var(--nav-rgb), 0.4);
}

.nav-links a[href*="linear_algebra"]:hover, .nav-links a[href*="calculus"]:hover,
.nav-links a[href*="probability"]:hover, .nav-links a[href*="discrete_math"]:hover,
.nav-links a[href*="ml.html"]:hover {
    background: rgba(var(--nav-rgb), 0.1);
    text-shadow: 0 0 10px rgba(var(--nav-rgb), 0.5);
}

.nav-links a[href*="linear_algebra"].active, .nav-links a[href*="calculus"].active,
.nav-links a[href*="probability"].active, .nav-links a[href*="discrete_math"].active,
.nav-links a[href*="ml.html"].active {
    color: var(--nav-color);
    background: rgba(var(--nav-rgb), 0.15);
}

.nav-links a[href*="linear_algebra"]::after, .nav-links a[href*="calculus"]::after,
.nav-links a[href*="probability"]::after, .nav-links a[href*="discrete_math"]::after,
.nav-links a[href*="ml.html"]::after {
    background: linear-gradient(90deg, transparent, var(--nav-color), transparent);
}

.footer-links a[href*="linear_algebra"]::before, .footer-links a[href*="calculus"]::before,
.footer-links a[href*="probability"]::before, .footer-links a[href*="discrete_math"]::before,
.footer-links a[href*="ml.html"]::before {
    background: linear-gradient(180deg, var(--nav-color), rgba(var(--nav-rgb), 0.6));
}

.footer-links a[href*="linear_algebra"]:hover, .footer-links a[href*="calculus"]:hover,
.footer-links a[href*="probability"]:hover, .footer-links a[href*="discrete_math"]:hover,
.footer-links a[href*="ml.html"]:hover {
    background: rgba(var(--nav-rgb), 0.1);
}

/* ========== SECTION PAGE THEMING (LIGHT THEME) ==========
 * Colors all cards on a section page to match its theme
 * ======================================================== */
body[data-section="I"] { --sec-color: var(--section-i-color); --sec-rgb: 21, 101, 192; }
body[data-section="II"] { --sec-color: var(--section-ii-color); --sec-rgb: 46, 125, 50; }
body[data-section="III"] { --sec-color: var(--section-iii-color); --sec-rgb: 0, 131, 143; }
body[data-section="IV"] { --sec-color: var(--section-iv-color); --sec-rgb: 106, 27, 154; }
body[data-section="V"] { --sec-color: var(--section-v-color); --sec-rgb: 239, 108, 0; }

body[data-section] .card::before {
    background: linear-gradient(90deg, 
        var(--sec-color) 0%, 
        rgba(var(--sec-rgb), 0.4) 50%,
        var(--sec-color) 100%
    ) !important;
}

body[data-section] .card .card-icon {
    color: var(--sec-color);
}

body[data-section] .card .card-icon::after {
    background: radial-gradient(circle, rgba(var(--sec-rgb), 0.1) 0%, transparent 70%);
}

body[data-section] .card:hover {
    box-shadow: 
        0 20px 40px rgba(var(--sec-rgb), 0.15),
        0 8px 16px rgba(0, 0, 0, 0.08) !important;
    border-color: rgba(var(--sec-rgb), 0.3) !important;
}

body[data-section] .card:hover .card-icon {
    color: var(--sec-color);
    transform: scale(1.1);
}

body[data-section] .card:hover .card-icon::after {
    background: radial-gradient(circle, rgba(var(--sec-rgb), 0.15) 0%, transparent 70%);
}

body[data-section] .card:hover h3 a {
    color: var(--sec-color) !important;
}

/* ============================================
   TOPIC CARDS v2 (.tcard) — compact grouped section cards
   Rendered by sectionCards.js v2. New class names: the legacy
   .card styles above remain for the homepage Explore grid.
   Accent color comes from --tcard-accent, set per section by
   sectionCards.js from curriculum.json sectionColors.
   ============================================ */

.tcard-group {
    margin: 2rem 0 0.5rem;
}

.tcard-group-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--secondary-color);
    border-bottom: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
    padding-bottom: 6px;
    margin-bottom: 0.9rem;
}

.tcard-group-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: var(--tcard-accent, var(--primary-color));
    flex: 0 0 auto;
    transform: translateY(1px);
}

.tcard-group-count {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-muted, #777);
}

.tcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
}

.tcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-white, #fff);
    border: 1px solid var(--border-color, rgba(127, 127, 127, 0.25));
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tcard:hover,
.tcard:focus-visible {
    border-color: var(--tcard-accent, var(--primary-color));
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}

.tcard-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tcard-icon {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--tcard-accent, var(--primary-color));
}

.tcard-num {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #777);
}

.tcard-badge {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--tcard-accent, var(--primary-color));
    color: var(--tcard-accent, var(--primary-color));
    opacity: 0.85;
    margin-left: auto;
}

.tcard-badge + .tcard-badge {
    margin-left: 6px;
}

.tcard-title {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
    color: var(--secondary-color);
}

.tcard-keywords {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted, #777);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.tcard-highlight {
    border-color: var(--tcard-accent, var(--primary-color));
    box-shadow: 0 0 0 2px var(--tcard-accent, var(--primary-color));
}

@media (max-width: 576px) {
    .tcard-grid {
        grid-template-columns: 1fr;
    }
    .tcard {
        padding: 12px 14px;
    }
}

/* --- dark theme --- */
html[data-theme="dark"] .tcard {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .tcard:hover,
html[data-theme="dark"] .tcard:focus-visible {
    border-color: var(--tcard-accent, var(--primary-color));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .tcard-group-title {
    color: rgba(255, 255, 255, 0.92);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .tcard-title {
    color: rgba(255, 255, 255, 0.92);
}

html[data-theme="dark"] .tcard-num,
html[data-theme="dark"] .tcard-group-count,
html[data-theme="dark"] .tcard-keywords {
    color: rgba(255, 255, 255, 0.45);
}

.section-content {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.homepage-introduction {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.update-notice,
section.references,
.content-sections {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

/* ========== WIDE SECTION (demos): section spans up to 1300px,
   prose inside stays at the reading width ========== */
.section-content.section-wide {
    max-width: 1300px;
}

.section-content.section-wide > h2,
.section-content.section-wide > h3,
.section-content.section-wide > p,
.section-content.section-wide > ul,
.section-content.section-wide > ol,
.section-content.section-wide > .theorem,
.section-content.section-wide > .proof,
.section-content.section-wide > .insight-box,
.section-content.section-wide > .pseudocode,
.section-content.section-wide > .collapsible-section,
.section-content.section-wide > blockquote,
.section-content.section-wide > table {
    max-width: calc(860px - 2 * var(--spacing-lg));
    margin-left: auto;
    margin-right: auto;
}

.intro-toggle {
    display: table;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================
   SECTION NAVIGATION v2 (quick-jump menu internals)
   The base .quick-jump-* styles above are unchanged; these style
   the new grouped/filterable internals rendered by
   section_navigation.html v2.
   ============================================ */

.quick-jump-menu {
    width: 330px;
    max-height: 72vh;
    overflow-y: auto;
}

.qj-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 0.88rem;
    color: var(--text-light);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--border-radius-sm);
    outline: none;
}

.qj-filter:focus {
    border-color: rgba(100, 180, 255, 0.5);
}

.qj-prevnext {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.qj-prevnext a,
.qj-prevnext .qj-disabled {
    flex: 1;
    text-align: center;
    font-size: 0.82rem;
    padding: 6px 4px;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-light);
    text-decoration: none;
    white-space: nowrap;
}

.qj-prevnext a:hover {
    background-color: rgba(52, 152, 219, 0.2);
    color: var(--primary-color);
}

.qj-prevnext .qj-disabled {
    opacity: 0.35;
}

.qj-group-head {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 12px 0 4px;
    padding-left: 2px;
}

.qj-group:first-child .qj-group-head {
    margin-top: 2px;
}

.qj-group-n {
    font-weight: 400;
    opacity: 0.7;
}

.qj-tools {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.qj-tools a {
    flex: 1;
    text-align: center;
    font-size: 0.8rem;
    padding: 6px 4px;
    border-radius: var(--border-radius-sm);
    color: var(--text-light);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.qj-tools a:hover {
    background-color: rgba(52, 152, 219, 0.2);
    color: var(--primary-color);
}

.qj-overview-link {
    color: inherit;
    text-decoration: none;
}

.qj-overview-link:hover {
    color: var(--primary-color);
    text-decoration: underline dotted;
}



/* ============================================
   STICKY SUBSECTION NAV (.topic-nav) — desktop
   After scrolling, subsections stay one click away instead of
   requiring a trip back to the top. Mobile keeps the static row
   (a wrapping sticky pill bar would cost too much viewport).
   scroll-margin keeps anchor targets clear of the stuck bar —
   this also benefits ref-link "View full context" arrivals.
   NOTE: the navbar is not sticky (a dead position:sticky was
   removed), so top:0 here is correct. If the navbar is ever made
   sticky, raise this offset accordingly.
   ============================================ */

.section-content,
.theorem[id],
.proof[id] {
    scroll-margin-top: 76px;
}

.hero-section {
    overflow: hidden;
}

.hero-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    /* Ceiling for 1-2 char glyphs; section_navigation.html sets
       --mark-scale (3.0 / glyph length, capped at 1) so longer
       glyphs shrink proportionally and never overflow the hero. */
    font-size: calc(clamp(6rem, 24vw, 19rem) * var(--mark-scale, 1));
    line-height: 1;
    letter-spacing: -0.02em;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.09);
    text-shadow: none;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.hero-section .webpage-name {
    /* Source titles are already properly title-cased, so the legacy
       uppercase transform is lifted (ALL CAPS hurt readability on
       long titles); tracking tightened for mixed case. */
    text-transform: none;
    letter-spacing: 0.8px;
    text-shadow:
        0 0 18px rgba(120, 190, 255, 0.55),
        0 0 60px rgba(66, 165, 245, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.45);
}

/* AFTER */
.topic-nav {
    /* One-line reel at every width: horizontal scroll instead of
       wrapping (a 7-item nav wrapped to two rows on desktop). The
       scrollspy in main.js auto-centers the active item whenever
       scrollWidth exceeds clientWidth, so the rail follows the
       reader on desktop exactly as it already did on mobile. */
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: thin;
    gap: 30px;
    padding: 0 24px;
    counter-reset: topicnav;
    border-radius: 0;
}

/* Center the rail when it fits, degrade to scrollable start-aligned
   when it overflows. (Plain justify-content:center would clip the
   left edge under overflow; auto-margins are the safe equivalent.) */
.topic-nav a:first-child { margin-left: auto; }
.topic-nav a:last-child { margin-right: auto; }

/* The rail is one line everywhere, so sticky is cheap even on mobile;
   the scrollspy in main.js keeps the active item scrolled into view. */
.topic-nav {
    position: sticky;
    top: 0;
    z-index: 900;
}

@media (max-width: 768px) {
    .topic-nav {
        gap: 20px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .topic-nav a { padding-top: 9px; padding-bottom: 7px; }
}

.topic-nav a {
    counter-increment: topicnav;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 2px 9px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    border-top: 2px solid transparent;
    white-space: nowrap;
    color: var(--text-muted, #667);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.topic-nav a::before {
    content: counter(topicnav, decimal-leading-zero);
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--primary-color);
    opacity: 0.75;
}

.topic-nav a:hover,
.topic-nav a.active {
    color: var(--secondary-color);
    border-top-color: var(--primary-color);
    background: transparent;
}

.topic-nav a.active::before {
    opacity: 1;
}

/* dark theme: neutralize the legacy pill styling (dark stylesheet
   loads after this file, so these need the data-theme scope) */
html[data-theme="dark"] .topic-nav a {
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
}

html[data-theme="dark"] .topic-nav a:hover,
html[data-theme="dark"] .topic-nav a.active {
    background: transparent;
    color: #fff;
    border-top-color: var(--section-i-light, #42a5f5);
}