
    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --color-primary: #0F172A; --color-secondary: #1E293B; --color-accent: #b8841c;
      --color-text-primary: #0F172A; --color-text-secondary: #4B5563; --color-text-light: #9CA3AF;
      --color-bg-primary: #F8FAFC; --color-bg-secondary: #EEF2F6; --color-bg-card: rgba(255, 255, 255, 0.96);
      --color-border: #E5E7EB; --color-shadow: rgba(15, 23, 42, 0.08);
      --font-primary: 'Montserrat', sans-serif; --font-secondary: 'Cormorant Garamond', serif;
      --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem;
      --radius-md: 10px; --radius-lg: 16px;
      --transition-fast: 0.2s ease; --transition-normal: 0.35s ease; --transition-slow: 0.6s ease;
      --z-header: 10;
    }
    .dark-mode {
      --color-primary: #F8FAFC; --color-secondary: #1E293B; --color-accent: #c89b34;
      --color-text-primary: #E5E7EB; --color-text-secondary: #9CA3AF;
      --color-bg-primary: #0B1220; --color-bg-secondary: #111827; --color-bg-card: rgba(15, 23, 42, 0.9);
      --color-shadow: rgba(0, 0, 0, 0.35);
    }


    /* Dark mode: Tailwind utility compatibility (contrast fixes) */
    .dark-mode main, .dark-mode #main-content {
      color: var(--color-text-primary);
    }
    .dark-mode main .text-primary, .dark-mode #main-content .text-primary { color: var(--color-text-primary) !important; }
    .dark-mode main .text-secondary, .dark-mode #main-content .text-secondary { color: var(--color-text-primary) !important; }
    .dark-mode main .text-gray-700, .dark-mode #main-content .text-gray-700 { color: #E5E7EB !important; }
    .dark-mode main .text-gray-600, .dark-mode #main-content .text-gray-600 { color: #D1D5DB !important; }
    .dark-mode main .text-gray-500, .dark-mode #main-content .text-gray-500 { color: #9CA3AF !important; }
    .dark-mode main .text-gray-400, .dark-mode #main-content .text-gray-400 { color: #9CA3AF !important; }

    .dark-mode main .bg-white, .dark-mode #main-content .bg-white {
      background-color: rgba(15, 23, 42, 0.92) !important;
      border-color: rgba(255, 255, 255, 0.10) !important;
    }
    .dark-mode main .bg-light, .dark-mode #main-content .bg-light {
      background-color: rgba(17, 24, 39, 1) !important;
    }
    .dark-mode main .bg-gray-50, .dark-mode #main-content .bg-gray-50 {
      background-color: rgba(15, 23, 42, 0.92) !important;
    }
    .dark-mode main .border-gray-100, .dark-mode #main-content .border-gray-100 { border-color: rgba(255, 255, 255, 0.08) !important; }
    .dark-mode main .border-gray-200, .dark-mode #main-content .border-gray-200 { border-color: rgba(255, 255, 255, 0.10) !important; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body { font-family: var(--font-primary); color: var(--color-text-primary); background-color: var(--color-bg-primary); line-height: 1.6; }
    h1, h2, h3 { font-family: var(--font-secondary); font-weight: 700; color: inherit; margin-bottom: var(--space-md); letter-spacing: -0.01em; }
    .text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6 { color: #fff; }
    a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); }
    a:hover { text-decoration: underline; }
    .container { max-width: 1200px; margin: 0 auto; padding: var(--space-lg); }
    .card { background-color: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: 0 8px 24px var(--color-shadow); padding: var(--space-lg); margin-bottom: var(--space-lg); border: 1px solid var(--color-border); }
    .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--color-bg-card); padding: var(--space-md); text-align: center; z-index: var(--z-header); box-shadow: 0 -4px 18px var(--color-shadow); }
    .dark-mode-toggle { position: fixed; top: 20px; right: 20px; background: var(--color-bg-card); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 5px var(--color-shadow); z-index: var(--z-header); border: none; }
    .fade-in { opacity: 0; animation: fadeIn 0.8s ease forwards; }
    
    /* Direct Answer GEO Boxes */
    .direct-answer {
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      border-left: 4px solid var(--color-accent);
      padding: var(--space-lg) var(--space-xl);
      margin: var(--space-xl) 0;
      border-radius: var(--radius-md);
      box-shadow: 0 4px 12px var(--color-shadow);
      transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    }
    .direct-answer:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--color-shadow);
    }
    .direct-answer-question {
      font-size: 1.25rem;
      font-weight: 600;
      color: var(--color-primary);
      margin-bottom: var(--space-md);
      font-family: var(--font-secondary);
    }
    .direct-answer-text {
      font-size: 1.1rem;
      line-height: 1.7;
      color: var(--color-text-secondary);
      padding: var(--space-md);
      background: rgba(184, 132, 28, 0.05);
      border-radius: var(--radius-md);
    }
    .direct-answer-text strong {
      color: var(--color-accent);
      font-weight: 700;
      display: block;
      margin-bottom: var(--space-sm);
    }
    .direct-answer-author {
      font-size: 0.85rem;
      color: var(--color-text-light);
      margin-top: var(--space-sm);
      font-style: italic;
    }
    .dark-mode .direct-answer {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%);
      border-left-color: #c89b34;
    }
    .dark-mode .direct-answer-text {
      background: rgba(200, 155, 52, 0.1);
    }
    @keyframes fadeIn { to { opacity: 1; } }
  