:root {
      --accent-fm: #6366f1;
      --upcoming-fm: #10b981;
      --line-color-fm: #cbd5e1;
      --card-bg-fm: #ffffff;
      --text-main-fm: #1e293b;
      --text-muted-fm: #64748b;
    }

    * {
      box-sizing: border-box;
    }

    body {
      background-color: #f8fafc;
      font-family: 'Inter', system-ui, sans-serif;
      margin: 0;
      overflow-x: hidden;
    }

    /* --- Heading --- */
    .timeline-header {
      text-align: center;
      padding: 80px 20px 40px;
    }

    .timeline-header h1 {
      font-size: 2.8rem;
      color: var(--text-main-fm);
      margin-bottom: 12px;
      letter-spacing: -1px;
    }

    .timeline-header p {
      color: var(--text-muted-fm);
      font-size: 1.1rem;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* --- PULSE ANIMATION --- */
    @keyframes pulse-green-fm {
      0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
        transform: scale(1);
      }

      70% {
        box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
        transform: scale(1.05);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);
      }
    }

    /* --- Timeline Base --- */
    .timeline-fm {
      position: relative;
      max-width: 1100px;
      margin: 20px auto 100px;
      padding: 40px 0;
      isolation: isolate;
    }

    .timeline-fm::after {
      content: '';
      position: absolute;
      width: 4px;
      background: var(--line-color-fm);
      top: 0;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
    }

    /* --- Grouping Structure --- */
    .timeline-year-group {
      position: relative;
      width: 100%;
      margin-bottom: 60px;
    }

    .year-circle-fm {
      position: relative;
      width: 90px;
      height: 90px;
      background: var(--accent-fm);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      margin: 80px auto 40px;
      z-index: 100;
      border: 8px solid #f8fafc;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
      font-size: 1.3rem;
    }

    .year-upcoming-fm {
      background: var(--upcoming-fm) !important;
      animation: pulse-green-fm 2s infinite;
    }

    /* --- Connector Logic --- */
    .container-fm {
      padding: 20px 60px;
      position: relative;
      width: 50%;
      min-height: 100px;
    }

    .left-fm {
      left: 0;
    }

    .right-fm {
      left: 50%;
    }

    .container-fm::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      background: var(--accent-fm);
      border: 4px solid #fff;
      top: 40px;
      border-radius: 50%;
      z-index: 99;
    }

    .left-fm::after {
      right: -10px;
    }

    .right-fm::after {
      left: -10px;
    }

    .upcoming-event-fm::after {
      background: var(--upcoming-fm) !important;
      animation: pulse-green-fm 2s infinite;
    }

    .container-fm::before {
      content: '';
      position: absolute;
      height: 3px;
      background-color: var(--line-color-fm);
      top: 48px;
      width: 60px;
      z-index: 1;
    }

    .left-fm::before {
      right: 0;
    }

    .right-fm::before {
      left: 0;
    }

    /* --- Card Content --- */
    .badge-fm {
      display: inline-block;
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.7rem;
      font-weight: 800;
      text-transform: uppercase;
      margin-bottom: 12px;
      letter-spacing: 0.5px;
    }

    .badge-past {
      background: #f1f5f9;
      color: #64748b;
    }

    .badge-upcoming {
      background: #dcfce7;
      color: #166534;
    }

    .upcoming-event-fm .content-fm {
      border-top: 4px solid var(--upcoming-fm);
    }

    .content-fm {
      padding: 30px;
      background: var(--card-bg-fm);
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      border: 1px solid #eef2f6;
    }

    .date-label-fm {
      font-size: 0.8rem;
      text-transform: uppercase;
      color: var(--accent-fm);
      font-weight: 700;
      margin-bottom: 6px;
      display: block;
    }

    .content-fm h2 {
      margin: 0 0 12px;
      font-size: 1.3rem;
      color: var(--text-main-fm);
      font-weight: 700;
    }

    .content-fm p {
      margin: 0 0 20px;
      color: var(--text-muted-fm);
      line-height: 1.6;
      font-size: 0.95rem;
    }

    /* --- Gallery --- */
    .gallery-fm {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .img-wrapper-fm {
      position: relative;
      width: calc(20% - 7px);
      aspect-ratio: 1/1;
      cursor: pointer;
      overflow: hidden;
      border-radius: 8px;
    }

    .thumb-fm {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .img-wrapper-fm:hover .thumb-fm {
      transform: scale(1.15);
    }

    .img-wrapper-fm:nth-child(n+6) {
      display: none;
    }

    .more-overlay-fm {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.8);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      font-weight: 700;
      border-radius: 8px;
    }

    /* --- Scroll Reveal --- */
    .reveal-fm {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1);
    }

    .reveal-fm.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* --- Lightbox --- */
    .modal-fm {
      display: none;
      position: fixed;
      z-index: 3000;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.98);
      align-items: center;
      justify-content: center;
    }

    .modal-content-fm {
      max-width: 85%;
      max-height: 80%;
      border-radius: 8px;
    }

    .close-fm {
      position: absolute;
      top: 30px;
      right: 40px;
      color: #fff;
      font-size: 50px;
      cursor: pointer;
    }

    .nav-btn-fm {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.08);
      color: white;
      border: none;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      cursor: pointer;
    }

    /* Mobile */
    @media screen and (max-width: 1024px) {
      .timeline-fm {
        margin-left: 70px;
        margin-right: 20px;
      }

      .timeline-fm::after {
        left: 0px;
        transform: none;
      }

      .year-circle-fm {
        margin-left: -45px;
      }

      .container-fm {
        width: 100%;
        padding-left: 50px;
        left: 0 !important;
      }

      .container-fm::after {
        left: -10px !important;
      }

      .container-fm::before {
        left: 0px !important;
        width: 50px;
      }
    }

    @media screen and (max-width: 600px) {
      .content-fm {
        width: 100%;
        max-width: calc(100vw - 60px);
        box-sizing: border-box;
      }

      .container-fm {
        padding-left: 30px;
        padding-right: 10px;
      }

      .container-fm::before {
        width: 30px !important;
      }
    }