:root {
            --bg: #ffffff;
            --fg: #0a0a0a;
            --accent: #000000;
            --muted: #737373;
            --border: #e5e5e5;
        }

        .dark {
            --bg: #0a0a0a;
            --fg: #ffffff;
            --accent: #ffffff;
            --muted: #a3a3a3;
            --border: #262626;
        }

        body {
            background-color: var(--bg);
            color: var(--fg);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 10px; }
        .dark ::-webkit-scrollbar-thumb { background: #404040; }

        /* Timeline Line */
        .timeline-line::before {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background-color: #0a0a0a;
            transform: translateX(-50%);
        }
        .dark .timeline-line::before {
            background-color: #ffffff;
        }

        @media (max-width: 768px) {
            .timeline-line::before {
                left: 20px;
            }
        }

        /* Glassmorphism */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }
        .dark .glass {
            background: rgba(10, 10, 10, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Filters */
        .filter-none { filter: none; }
        .filter-bw { filter: grayscale(100%); }
        .filter-vintage { filter: sepia(50%) contrast(110%) brightness(90%); }
        .filter-sepia { filter: sepia(100%); }
        .filter-vivid { filter: saturate(150%) contrast(110%); }
        .filter-cold { filter: hue-rotate(180deg) saturate(80%); }
        .filter-warm { filter: sepia(30%) saturate(120%) hue-rotate(-10deg); }

        /* Icon Helper */
        .icon {
            width: 1.25rem;
            height: 1.25rem;
            display: inline-block;
            vertical-align: middle;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* Simple Prose fallback */
        .prose h2 { color: var(--fg); font-family: 'Playfair Display', serif; font-style: italic; }
        .prose h3 { color: var(--fg); font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin-top: 2rem; }
        .prose p { color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }
        .prose strong { color: var(--fg); font-weight: 600; }

        /* User Custom Styles */
        *, ::after, ::before {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: #0a0a0a;
        }

        .bg-black\/5 {
            background-color: rgb(0 0 0 / 0.05);
            border: 1px solid #858080;
        }

        .py-12 {
            padding-top: 3rem;
            padding-bottom: 3rem;
            padding-left: 3rem;
            padding-right: 3rem;
        }

        /* Hide scrollbar for horizontal scrolling control bar */
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }


/* ===== ARTICLE SPECIFIC STYLES - NO BODY STYLES ===== */
#timeline-guide-article {
      width: 95%;
      margin: 0 auto;
      padding: 2rem 1.5rem 3rem 1.5rem;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    /* Hero Section */
    .timeline-guide-hero {
      text-align: center;
      margin-bottom: 2.5rem;
      padding: 2rem 1.5rem;
      background: linear-gradient(135deg, #000000 0%, #333333 100%);
      border-radius: 32px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    }

    .timeline-guide-hero h1 {
      font-size: 2.6rem;
      font-weight: 800;
      color: white;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
      font-family: 'Playfair Display', serif;
    }

    .timeline-guide-hero .timeline-hero-sub {
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.9);
      max-width: 720px;
      margin: 0 auto;
      line-height: 1.5;
    }

    .timeline-guide-meta {
      display: flex;
      justify-content: center;
      gap: 2rem;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      margin-top: 1.2rem;
      flex-wrap: wrap;
    }

    .timeline-guide-meta span i {
      margin-right: 0.5rem;
    }

    /* Main Content */
    .timeline-main-content {
      background: white;
      border-radius: 28px;
      padding: 2rem 2rem 2.5rem 2rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(0, 0, 0, 0.15);
    }

    .timeline-main-content h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: #000000;
      border-left: 5px solid #666666;
      padding-left: 1rem;
      font-family: 'Playfair Display', serif;
    }

    .timeline-main-content h2:first-of-type {
      margin-top: 0;
    }

    .timeline-main-content h3 {
      font-size: 1.35rem;
      font-weight: 600;
      margin: 1.5rem 0 0.75rem 0;
      color: #333333;
    }

    .timeline-main-content p {
      font-size: 1.05rem;
      color: #2d3748;
      margin-bottom: 1.2rem;
      line-height: 1.6;
    }

    .timeline-main-content ul, .timeline-main-content ol {
      margin: 1rem 0 1.2rem 1.8rem;
      color: #2d3748;
      line-height: 1.6;
    }

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

    .timeline-highlight-box {
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.08), rgba(102, 102, 102, 0.05));
      border-left: 6px solid #666666;
      padding: 1.25rem 1.5rem;
      border-radius: 20px;
      margin: 1.75rem 0;
    }

    .timeline-pro-tip {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      padding: 1.2rem 1.5rem;
      margin: 1.5rem 0;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      border: 1px solid rgba(0, 0, 0, 0.3);
    }

    .timeline-pro-tip i {
      font-size: 1.8rem;
      color: #000000;
    }

    .timeline-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.2rem;
      margin: 2rem 0;
    }

    .timeline-stat-card {
      background: #f5f7fa;
      border-radius: 20px;
      padding: 1.2rem;
      text-align: center;
      transition: all 0.2s;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .timeline-stat-card .stat-number {
      font-size: 2rem;
      font-weight: 800;
      color: #000000;
      margin-bottom: 0.25rem;
    }

    .timeline-quote-block {
      background: #f5f7fa;
      padding: 1.5rem;
      border-radius: 24px;
      text-align: center;
      font-style: italic;
      margin: 1.5rem 0;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .timeline-quote-block i {
      font-size: 2rem;
      color: #666666;
      margin-bottom: 0.5rem;
      display: inline-block;
    }

    .timeline-table-wrapper {
      overflow-x: auto;
      margin: 1.5rem 0;
    }

    .timeline-exif-table {
      width: 100%;
      border-collapse: collapse;
      background: #f5f7fa;
      border-radius: 16px;
      overflow: hidden;
    }

    .timeline-exif-table th, .timeline-exif-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }

    .timeline-exif-table th {
      background: rgba(0, 0, 0, 0.1);
      font-weight: 600;
      color: #000000;
    }

    .timeline-exif-table tr:hover {
      background: rgba(102, 102, 102, 0.05);
    }

    .timeline-applications-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.2rem;
      margin: 1.5rem 0;
    }

    .timeline-application-card {
      background: #f5f7fa;
      border-radius: 16px;
      padding: 1.2rem;
      border: 1px solid rgba(0, 0, 0, 0.2);
      transition: all 0.2s;
    }

    .timeline-application-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .timeline-application-title {
      font-weight: 700;
      color: #000000;
      margin-bottom: 0.5rem;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .timeline-footer-note {
      margin-top: 2.5rem;
      text-align: center;
      font-size: 0.85rem;
      color: #718096;
      border-top: 1px solid #e2e8f0;
      padding-top: 2rem;
    }

    @media (max-width: 768px) {
      .timeline-guide-hero h1 {
        font-size: 2rem;
      }
      .timeline-main-content {
        padding: 1.5rem;
      }
      #timeline-guide-article {
        padding: 1rem;
      }
    }