:root {
      --color-green: #97d8c4;
      --color-green-light: #97d8c4;
      --color-gray: #084a5e;
      --color-light-gray: #084a5e;
      --color-inactive: #d0d0d0;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: sans-serif;
      line-height: 1.1;
    }
    .timeline-content-area {
      width: 100%;
      overflow: hidden;
      margin-bottom: 60px;
      position: relative;
    }
    .timeline-slider {
      display: flex;
      width: 100%;
      position: relative;
      transition: transform 0.5s ease;
    }
    .timeline-item {
      flex: 0 0 50%;
      padding-right: 40px;
      opacity: 0.3;
      transition: opacity 0.5s ease;
      display: flex;
    }
    .timeline-item.active {
      opacity: 1;
    }
    .year-display {
      font-size: 5rem;
      font-weight: 700;
      color: #97d8c4;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .timeline-item:not(.active) .year-display {
      color: var(--color-inactive);
    }
    .content-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 15px;
      color: #000;
    }
    .content-description {
      font-size: 1.2rem;
      color: var(--color-gray);
      max-width: 600px;
      margin-left: 20px;
      text-align: left;
    }
    .timeline-navigation {
      position: relative;
      width: 100%;
      border-top: 1px solid var(--color-light-gray);
      padding-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .year-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
    }
    .year-button {
      background: none;
      border: none;
      position: relative;
      font-size: 1rem;
      color: var(--color-gray);
      cursor: pointer;
      padding: 10px 5px;
      transition: color 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .year-button:hover {
      color: var(--color-green);
    }
    .year-button.active {
      color: var(--color-green);
      font-weight: 600;
    }
    .indicator-line {
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 100%;
      height: 3px;
      background: transparent;
      transition: background 0.3s ease;
    }
    .year-button.active .indicator-line {
      background: linear-gradient(to right, var(--color-green), var(--color-green-light));
    }
    @media screen and (max-width: 1024px) {
      .timeline-item {
        flex: 0 0 100%;
      }
    }
    @media screen and (max-width: 768px) {
      .year-nav {
        overflow-x: auto;
        padding-bottom: 10px;
        justify-content: flex-start;
      }
      .year-button {
        margin: 0 15px;
      }
      .content-title {
        font-size: 1.5rem;
      }
    }