:root {
      color-scheme: dark;
      --ink: #f7f1e6;
      --muted: rgba(247, 241, 230, 0.64);
      --faint: rgba(247, 241, 230, 0.14);
      --paper: rgba(247, 241, 230, 0.08);
      --black: #070707;
      --glow: #ddeeff;
      --gold: #c7a765;
      --gold-light: #e4c985;
      --gold-muted: rgba(199, 167, 101, 0.35);
      --text-active: #d6ba7c;
      --text-muted: rgba(220, 215, 205, 0.42);
      --line: rgba(180, 145, 78, 0.18);
      --glass: rgba(255, 255, 255, 0.045);
      --period-nav: #C2A878;
      --period-bg-rgb: 90, 69, 40;
      --period-glow: #7A5E30;
      --projector-light-rgb: 194, 154, 92;
      --nav-track-width: min(1720px, 84vw);
      --cn-font: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
      --dock-w: clamp(68px, 5vw, 100px);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow: hidden;
      background: var(--black);
      color: var(--ink);
      font-family: var(--cn-font);
    }

    html[data-restoring-navigation] .bg-canvas,
    html[data-restoring-navigation] .viewport,
    html[data-restoring-navigation] #verticalTimelineView,
    html[data-restoring-navigation] .vt-close,
    html[data-restoring-navigation] #movieDetailOverlay {
      visibility: hidden !important;
    }

    html[data-restoring-navigation] #verticalTimelineView,
    html[data-restoring-navigation] #verticalTimelineView *,
    html[data-restoring-navigation] #movieDetailOverlay,
    html[data-restoring-navigation] #movieDetailOverlay *,
    html[data-restoring-navigation] .experience-view {
      animation: none !important;
      transition: none !important;
    }

    button {
      border: 0;
      font: inherit;
    }

    .viewport {
      position: relative;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background: transparent;
    }

    .topbar {
      position: fixed;
      top: 26px;
      left: 34px;
      right: 34px;
      z-index: 30;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      pointer-events: auto;
      color: var(--ink);
      text-decoration: none;
    }

    .brand-mark {
      position: relative;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0 9%, transparent 10%),
        conic-gradient(from 18deg, transparent 0 12%, rgba(255, 255, 255, 0.9) 13% 18%, transparent 19% 35%, rgba(255, 255, 255, 0.75) 36% 42%, transparent 43% 62%, rgba(255, 255, 255, 0.76) 63% 69%, transparent 70% 100%),
        rgba(255, 255, 255, 0.05);
      box-shadow: 0 0 28px rgba(255, 255, 255, 0.09), inset 0 0 20px rgba(255, 255, 255, 0.08);
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      background: currentColor;
    }

    .brand-mark::before {
      width: 18px;
      height: 3px;
      transform: rotate(-18deg);
      box-shadow: 0 8px 0 currentColor;
    }

    .brand-mark::after {
      right: -8px;
      bottom: 7px;
      width: 22px;
      height: 10px;
      border: 1px solid rgba(255, 255, 255, 0.48);
      background: rgba(5, 5, 7, 0.72);
      transform: rotate(-8deg);
    }

    .brand-word {
      display: grid;
      gap: 1px;
      font-size: 12px;
      font-weight: 720;
      letter-spacing: 0.14em;
      line-height: 1.2;
    }

    .menu-button {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      background: rgba(5, 5, 7, 0.42);
      backdrop-filter: blur(18px);
      pointer-events: auto;
      cursor: pointer;
    }

    .menu-button::before,
    .menu-button::after {
      content: "";
      width: 20px;
      height: 1px;
      background: var(--ink);
      box-shadow: 0 0 14px var(--glow);
    }

    .menu-button::after {
      width: 13px;
      margin-left: 7px;
      margin-top: -12px;
    }

    .scroller {
      display: flex;
      width: 100vw;
      height: 100vh;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
    }

    .scroller.is-jump-reset {
      scroll-behavior: auto;
    }

    .scroller::-webkit-scrollbar {
      display: none;
    }

    .era {
      position: relative;
      flex: 0 0 100vw;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      isolation: isolate;
      background: transparent;
    }

    .era::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.22)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.40) 70%, rgba(0, 0, 0, 0.86));
      pointer-events: none;
    }

    .atmosphere {
      position: absolute;
      inset: -6vh -7vw;
      z-index: -2;
      transform: translateX(calc(var(--parallax, 0) * -72px)) scale(1.04);
      transition: transform 0.08s linear;
    }

    .haze {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--glow), transparent 58%), transparent 18%),
        radial-gradient(circle at 28% 46%, rgba(255, 255, 255, 0.12), transparent 18%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      filter: blur(5px);
      opacity: 0.82;
    }

    .horizon {
      position: absolute;
      left: 3vw;
      right: 3vw;
      bottom: 17vh;
      height: 31vh;
      opacity: 0.82;
      background:
        linear-gradient(to top, rgba(0, 0, 0, 0.84), transparent 72%),
        linear-gradient(to right, transparent 0 5%, var(--mass-a) 5% 10%, transparent 10% 14%, var(--mass-b) 14% 22%, transparent 22% 27%, var(--mass-c) 27% 35%, transparent 35% 40%, var(--mass-a) 40% 48%, transparent 48% 54%, var(--mass-b) 54% 63%, transparent 63% 69%, var(--mass-c) 69% 78%, transparent 78% 84%, var(--mass-a) 84% 93%, transparent 93%);
      clip-path: polygon(0 78%, 5% 78%, 5% 46%, 11% 46%, 11% 70%, 15% 70%, 15% 30%, 22% 30%, 22% 76%, 28% 76%, 28% 48%, 35% 48%, 35% 72%, 40% 72%, 40% 24%, 47% 24%, 47% 70%, 54% 70%, 54% 38%, 63% 38%, 63% 76%, 69% 76%, 69% 18%, 76% 18%, 76% 72%, 82% 72%, 82% 44%, 92% 44%, 92% 78%, 100% 78%, 100% 100%, 0 100%);
      transform: translateX(calc(var(--parallax, 0) * 44px));
    }

    .terrain {
      position: absolute;
      left: -8vw;
      right: -8vw;
      bottom: -8vh;
      height: 38vh;
      background:
        repeating-linear-gradient(92deg, transparent 0 8vw, rgba(255, 255, 255, 0.12) 8.2vw 8.35vw, transparent 8.5vw 12vw),
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--glow), transparent 72%), transparent 54%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.9));
      transform: perspective(620px) rotateX(57deg) translateY(22px);
      transform-origin: bottom;
    }

    .signal {
      position: absolute;
      right: 14vw;
      top: 14vh;
      width: 24vw;
      height: 11vw;
      border: 1px solid color-mix(in srgb, var(--glow), transparent 20%);
      background:
        linear-gradient(120deg, color-mix(in srgb, var(--glow), transparent 78%), rgba(255, 255, 255, 0.05)),
        repeating-linear-gradient(0deg, transparent 0 14px, rgba(255, 255, 255, 0.08) 15px);
      box-shadow: 0 0 62px color-mix(in srgb, var(--glow), transparent 38%);
      transform: translateX(calc(var(--parallax, 0) * -110px)) skewY(-4deg);
      opacity: 0.38;
    }

    .signal::before,
    .signal::after {
      content: "";
      position: absolute;
      bottom: -20vh;
      width: 1px;
      height: 20vh;
      background: color-mix(in srgb, var(--glow), transparent 36%);
    }

    .signal::before {
      left: 18%;
    }

    .signal::after {
      right: 18%;
    }

    .content {
      display: grid;
      align-content: center;
      width: min(1280px, calc(100vw - 86px));
      min-height: 100vh;
      margin: 0 auto;
      padding: 92px 0 122px;
    }

    .era-head {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: end;
      gap: 22px;
      margin-bottom: 20px;
    }

    .era-side-label {
      color: rgba(247, 241, 230, 0.66);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.14em;
    }

    .era-side-label:last-child {
      text-align: right;
    }

    .era-title {
      text-align: center;
      cursor: pointer;
      transition: filter 180ms ease;
    }

    .era-title:hover {
      filter: brightness(1.22);
    }

    .era-year {
      display: block;
      font-family: Didot, "Bodoni 72", Georgia, var(--cn-font);
      color: var(--glow);
      font-size: clamp(42px, 6vw, 82px);
      font-weight: 400;
      line-height: 0.9;
      text-shadow: 0 0 32px color-mix(in srgb, var(--glow), transparent 38%);
    }

    .era-event {
      display: block;
      margin-top: 8px;
      font-family: var(--cn-font);
      font-size: 15px;
      font-weight: 620;
      letter-spacing: 0.1em;
    }

    /* ── COMPARE LAYOUT ─────────────────────── */
    .compare {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 2px 1fr;
      gap: 0;
      transform: translateX(calc(var(--parallax, 0) * -28px));
    }

    /* ── CENTER SEPARATOR (thin golden line) ── */
    .axis-sep {
      position: relative;
      pointer-events: none;
      z-index: 10;
    }

    /* ── CARD BADGE ─────────────────────────── */
    .card-badge {
      position: absolute;
      top: 10px; left: 10px;
      z-index: 20;
      font-size: 8.5px;
      font-weight: 800;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: rgba(255,255,255,.75);
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 4px;
      padding: 3px 6px;
    }

    /* ── POSTER GRID (free-form container) ─── */
    .poster-grid {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* ── MOVIE CARD (absolutely placed) ─────── */
    .movie-card {
      position: absolute;
      aspect-ratio: 9 / 16;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      transform-origin: center center;
      transition: transform .5s cubic-bezier(.34,1.3,.64,1), filter .5s ease, z-index 0s;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
      filter: drop-shadow(0 0 20px rgba(var(--period-bg-rgb), .10)) drop-shadow(0 0 60px rgba(var(--period-bg-rgb), .06));
      will-change: transform;
      z-index: 2;
    }

    .movie-card--empty {
      background: rgba(255,255,255,.03);
      border: 1px dashed rgba(255,255,255,.12);
      cursor: default;
      pointer-events: none;
    }

    /* specular top edge */
    .movie-card::before {
      content: '';
      position: absolute; top: 0; left: 12%; right: 12%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
      z-index: 30;
    }

    /* inner rim */
    .movie-card::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 18px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
      pointer-events: none;
      z-index: 30;
    }

    .movie-card:hover {
      z-index: 20 !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
      filter: drop-shadow(0 0 24px rgba(var(--period-bg-rgb), .18)) drop-shadow(0 0 72px rgba(var(--period-bg-rgb), .10));
    }

    /* card rotations */

    /* ── POSTER IMAGE LAYER ───────────────────── */
    .poster-bg {
      position: absolute; inset: 0;
      background: #0d0a08;
    }

    /* film grain overlay */
    .poster-bg::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
      background-size: 180px 180px;
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 2;
    }

    /* vignette gradient */
    .poster-bg::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 78%;
      background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,.82) 65%, rgba(0,0,0,.92) 100%);
      pointer-events: none;
      z-index: 4;
    }

    .cover-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
      filter: saturate(0.96) contrast(1.04);
    }

    /* ── INFO OVERLAY ────────────────────────── */
    .movie-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 10px 12px 12px;
      z-index: 10;
    }

    .movie-info::before {
      content: '';
      position: absolute; top: 0; left: 8%; right: 8%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
    }

    .t-cn {
      font-family: var(--cn-font);
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,.96);
      letter-spacing: 1.5px;
      line-height: 1.2;
      margin-bottom: 4px;
      text-shadow: 0 2px 12px rgba(0,0,0,.6);
    }

    .t-en {
      font-family: Inter, 'Noto Sans SC', sans-serif;
      font-size: 7px;
      font-weight: 500;
      letter-spacing: 0.5px;
      color: rgba(255,255,255,.42);
      text-transform: uppercase;
      line-height: 1.2;
      margin-bottom: 6px;
    }

    .movie-card[data-size="sm"] .t-en { display: none; }

    .movie-card[data-size="lg"] .movie-info { padding: 14px 16px 16px; }
    .movie-card[data-size="lg"] .t-cn  { font-size: 18px; letter-spacing: 1.2px; margin-bottom: 7px; }
    .movie-card[data-size="lg"] .t-en  { font-size: 7px; margin-bottom: 6px; }
    .movie-card[data-size="lg"] .rating-row { gap: 7px; }
    .movie-card[data-size="lg"] .stars { gap: 2px; }
    .movie-card[data-size="lg"] .star  { font-size: 15px; }
    .movie-card[data-size="lg"] .score { font-size: 15px; }

    .movie-card[data-size="md"] .movie-info { padding: 8px 10px 10px; }
    .movie-card[data-size="md"] .t-cn  { font-size: 11px; letter-spacing: 1px; margin-bottom: 3px; }
    .movie-card[data-size="md"] .t-en  { font-size: 6px; margin-bottom: 4px; }
    .movie-card[data-size="md"] .rating-row { gap: 4px; }
    .movie-card[data-size="md"] .stars { gap: 1.5px; }
    .movie-card[data-size="md"] .star  { font-size: 9px; }
    .movie-card[data-size="md"] .score { font-size: 8px; }

    .movie-card[data-size="sm"] .movie-info { padding: 6px 8px 8px; }
    .movie-card[data-size="sm"] .t-cn  { font-size: 10.89px; letter-spacing: 0.5px; margin-bottom: 3px; }
    .movie-card[data-size="sm"] .rating-row { gap: 3px; }
    .movie-card[data-size="sm"] .stars { gap: 1px; }
    .movie-card[data-size="sm"] .star  { font-size: 8.47px; }
    .movie-card[data-size="sm"] .score { font-size: 7.26px; }

    .rating-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .stars { display: flex; gap: 2px; align-items: center; }

    .star {
      display: inline-block;
      font-size: 11px; line-height: 1;
      position: relative;
    }

    .star.full {
      color: transparent;
      background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(210,230,255,.75) 45%, rgba(255,255,255,.92) 100%);
      -webkit-background-clip: text; background-clip: text;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(255,255,255,.25));
    }

    .star.empty {
      color: transparent;
      background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%);
      -webkit-background-clip: text; background-clip: text;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
    }

    .star.half {
      color: transparent;
      background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%);
      -webkit-background-clip: text; background-clip: text;
    }

    .star.half::before {
      content: '★'; position: absolute; left: 0; top: 0;
      color: transparent;
      background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(210,230,255,.75) 45%, rgba(255,255,255,.92) 100%);
      -webkit-background-clip: text; background-clip: text;
      clip-path: inset(0 50% 0 0);
      filter: drop-shadow(0 0 6px rgba(255,255,255,.2));
    }

    .score {
      font-family: 'Cinzel', serif;
      font-size: 10px;
      font-weight: 700;
      color: rgba(255,255,255,.95);
      letter-spacing: 0;
      line-height: 1;
      text-shadow: 0 2px 8px rgba(0,0,0,.4);
    }

    .movie-card .score {
      position: relative;
      top: 2px;
    }

    .no-rating-text {
      font-size: 9px;
      color: rgba(255,255,255,.32);
      letter-spacing: 0.4px;
      line-height: 1;
    }

    /* ── MOVIE DETAIL OVERLAY ───────────────── */
    .movie-detail {
      position: fixed;
      inset: 0;
      z-index: 120;
      --detail-glow-rgb: 196, 162, 116;
      --detail-ambient-opacity: 0.18;
      --detail-ambient-blur: 7px;
      color: var(--ink);
      background: #050303;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      transition: opacity 260ms ease, visibility 0s linear 260ms;
    }

    .movie-detail.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 260ms ease;
    }

    .movie-detail__backdrop,
    .movie-detail__shade,
    .movie-detail__grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .movie-detail__backdrop {
      overflow: hidden;
      opacity: 1;
      transition: opacity 320ms ease;
      filter: blur(12px);
      transform: scale(1.05);
    }

    .movie-detail__backdrop::before {
      content: "";
      position: absolute;
      top: -4vh;
      right: max(-7vw, -108px);
      bottom: -6vh;
      width: min(58vw, 1020px);
      background-image: var(--detail-backdrop);
      background-size: cover;
      background-position: var(--detail-ambient-position, 72% 28%);
      background-repeat: no-repeat;
      opacity: var(--detail-ambient-opacity);
      filter: blur(var(--detail-ambient-blur)) saturate(0.68) brightness(0.5) contrast(0.92);
      transform: scale(1.05);
      transform-origin: right center;
      transition: opacity 320ms ease, transform 320ms ease, filter 320ms ease;
    }

    .movie-detail__backdrop::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 61% 46%, rgba(var(--detail-glow-rgb), 0.11) 0%, rgba(var(--detail-glow-rgb), 0.07) 16%, rgba(var(--detail-glow-rgb), 0.03) 30%, transparent 54%),
        radial-gradient(ellipse at 88% 50%, rgba(255, 255, 255, 0.02), transparent 24%);
    }

    .movie-detail__shade {
      background:
        linear-gradient(90deg, rgba(4, 2, 1, 0.985) 0%, rgba(4, 2, 1, 0.98) 22%, rgba(5, 3, 2, 0.96) 40%, rgba(5, 3, 2, 0.72) 58%, rgba(5, 3, 2, 0.38) 75%, rgba(5, 3, 2, 0.58) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0%, transparent 46%, transparent 72%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(180deg, rgba(5, 3, 2, 0.04) 0%, rgba(5, 3, 2, 0.12) 54%, rgba(5, 3, 2, 0.94) 100%);
    }

    .movie-detail__grain {
      z-index: 1;
      opacity: 0.03;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
      background-size: 46px 46px;
      mix-blend-mode: screen;
    }

    .movie-detail__grain::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 56%, rgba(0, 0, 0, 0.24) 100%);
    }

    .vt-close {
      display: none;
      position: fixed;
      top: 34px;
      right: 38px;
      z-index: 32;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(8, 5, 4, 0.56);
      backdrop-filter: blur(18px);
      cursor: pointer;
      transition: opacity 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
    }
    body.is-vertical-timeline .vt-close { display: grid; }
    body.is-vertical-timeline.is-vertical-timeline-closing .vt-close {
      opacity: 0;
      pointer-events: none;
    }
    .vt-close:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.12);
    }
    .vt-close::before,
    .vt-close::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 1px;
      background: currentColor;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
    }
    .vt-close::before { transform: rotate(45deg); }
    .vt-close::after { transform: rotate(-45deg); }

    .vt-watermark {
      display: none;
      position: fixed;
      top: 80px;
      z-index: 2;
      color: rgba(247, 241, 230, 0.075);
      font-family: "Playfair Display SC", "Bodoni 72", Georgia, serif;
      font-size: 148px;
      font-weight: 900;
      line-height: 0.82;
      text-transform: uppercase;
      white-space: nowrap;
      pointer-events: none;
      text-shadow: 0 0 32px rgba(247, 241, 230, 0.04);
    }
    body.is-vertical-timeline .vt-watermark { display: block; }
    .vt-watermark--world { left: 2vw; }
    .vt-watermark--china { right: 2vw; }
    .vertical-era .side-title { display: none; }

    .vt-header {
      position: sticky;
      top: 0;
      z-index: 4;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 0 24px;
      padding: 20px clamp(24px, 4vw, 60px) 36px;
      background: rgba(4, 5, 5, 0.96);
      pointer-events: none;
    }
    .vt-header__topic {
      font-size: clamp(15px, 1.54vw, 21px);
      font-weight: 500;
      letter-spacing: 0.05em;
      color: rgba(248, 244, 234, 0.9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: color 300ms ease;
    }
    .vt-header__topic--world { text-align: right; }
    .vt-header__topic--china { text-align: left; }
    .vt-header__topic--world::before {
      content: "世界 · ";
      color: color-mix(in srgb, var(--period-nav), #ffffff 18%);
    }
    .vt-header__topic--china::after {
      content: " · 中国";
      color: color-mix(in srgb, var(--period-nav), #ffffff 18%);
    }
    .vt-header__year {
      font-family: Didot, "Bodoni 72", Georgia, var(--cn-font);
      font-size: clamp(22px, 2.2vw, 31px);
      font-weight: 560;
      letter-spacing: 0.04em;
      color: color-mix(in srgb, var(--period-nav), #ffffff 18%);
      text-shadow: 0 0 18px color-mix(in srgb, var(--period-nav), transparent 48%);
      white-space: nowrap;
      text-align: center;
    }

    .movie-detail__close {
      position: absolute;
      top: 34px;
      right: 38px;
      z-index: 6;
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(8, 5, 4, 0.56);
      backdrop-filter: blur(18px);
      cursor: pointer;
      transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
    }

    .movie-detail__close:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.12);
    }

    .movie-detail__close::before,
    .movie-detail__close::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 1px;
      background: currentColor;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
    }

    .movie-detail__close::before { transform: rotate(45deg); }
    .movie-detail__close::after { transform: rotate(-45deg); }

    .movie-detail__mute-btn {
      display: none;
      position: absolute;
      top: 34px;
      right: 98px;
      z-index: 6;
      place-items: center;
      width: 48px;
      height: 48px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(8, 5, 4, 0.56);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      cursor: pointer;
      transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
    }
    .movie-detail__mute-btn svg { width: 20px; height: 20px; }
    .movie-detail__mute-btn:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.12);
    }
    .movie-detail.has-trailer .movie-detail__mute-btn { display: grid; }

    .movie-detail__content {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: minmax(460px, 0.92fr) minmax(360px, 0.8fr);
      align-items: start;
      gap: clamp(42px, 7vw, 120px);
      min-height: 100vh;
      padding: 92px 7vw 226px;
    }

    .movie-detail__copy {
      max-width: 760px;
      margin-top: 7vh;
      transition: opacity 180ms ease;
    }

    .movie-detail__kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 28px;
      padding: 0 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 999px;
      color: rgba(255, 255, 255, 0.76);
      background: rgba(255, 255, 255, 0.052);
      font-size: 11px;
      font-weight: 720;
      letter-spacing: 0.08em;
    }

    .movie-detail__title {
      margin: 18px 0 12px;
      color: rgba(255, 255, 255, 0.96);
      font-family: var(--cn-font);
      font-size: 54px;
      font-weight: 400;
      line-height: 0.96;
      letter-spacing: 0;
      text-shadow: 0 20px 56px rgba(0, 0, 0, 0.52);
      margin-bottom: calc(12px + 2vh);
      white-space: nowrap;
    }

    .movie-detail__original {
      margin: 0 0 18px;
      color: rgba(255, 255, 255, 0.42);
      font-family: Didot, "Bodoni 72", Georgia, serif;
      font-size: 20px;
      letter-spacing: 0.04em;
    }

    .movie-detail__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 9px;
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
    }

    .movie-detail__meta li {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      color: rgba(255, 255, 255, 0.62);
      font-size: 13px;
      font-weight: 560;
    }

    .movie-detail__rating {
      flex-basis: 100%;
      gap: 10px !important;
      color: rgba(255, 255, 255, 0.94) !important;
      font-weight: 700 !important;
      letter-spacing: 0;
      padding: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      min-height: auto !important;
    }

    .movie-detail__rating .stars {
      gap: 5px;
      flex: 0 0 auto;
    }

    .movie-detail__rating .star {
      font-size: 28px;
      line-height: 1;
    }

    .movie-detail__rating-value {
      color: rgba(255, 255, 255, 0.98);
      font-family: "Cinzel", serif;
      font-size: 28px;
      font-weight: 820;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      text-shadow: 0 1px 12px rgba(255, 255, 255, 0.1);
      position: relative;
      top: 5px;
    }

    .movie-detail__summary {
      max-width: 680px;
      margin: 0;
      color: rgba(255, 255, 255, 0.78);
      font-size: 17px;
      line-height: 1.78;
      text-shadow: 0 2px 22px rgba(0, 0, 0, 0.52);
    }

    .detail-section {
      margin-bottom: 18px;
    }
    .detail-section:last-child {
      margin-bottom: 0;
    }
    .detail-section p {
      margin: 0;
    }
    .detail-section--quote {
      border-left: 1.5px solid rgba(255, 255, 255, 0.18);
      padding-left: 15px;
    }
    .detail-section--quote p {
      color: rgba(255, 255, 255, 0.52);
      font-size: 15px;
    }

    .movie-detail__people {
      display: grid;
      gap: 10px;
      margin-top: 26px;
      max-width: 680px;
    }

    .movie-detail__people-row {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 14px;
      align-items: start;
    }

    .movie-detail__people-label {
      color: rgba(255, 255, 255, 0.42);
      font-size: 12px;
      font-weight: 760;
      letter-spacing: 0.12em;
    }

    .movie-detail__people-value {
      color: rgba(255, 255, 255, 0.76);
      font-size: 13px;
      line-height: 1.55;
    }

    .movie-detail__visual {
      position: relative;
      align-self: start;
      justify-self: center;
      width: min(360px, 28vw, calc((100vh - 380px) * 9 / 13.4));
      min-width: 180px;
      aspect-ratio: 9 / 13.4;
      border-radius: 32px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow:
        0 32px 88px rgba(0, 0, 0, 0.58),
        0 0 48px rgba(var(--detail-glow-rgb), 0.12);
      transform: translateY(0);
      transition:
        opacity 180ms ease,
        transform 300ms ease,
        box-shadow 300ms ease,
        background 300ms ease;
    }

    .movie-detail__poster {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(1.04) contrast(1.04);
      transition: filter 300ms ease;
      border-radius: 32px;
    }

    .movie-detail__visual:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow:
        0 42px 108px rgba(0, 0, 0, 0.68),
        0 0 60px rgba(var(--detail-glow-rgb), 0.16);
    }

    .movie-detail__visual:hover .movie-detail__poster {
      filter: brightness(1.05) saturate(1.1) contrast(1.08);
    }

    /* ── ART POSTER mode (movies with special artPoster field) ── */
    .movie-detail.has-art-poster .movie-detail__content {
      grid-template-columns: minmax(400px, 0.78fr) 1fr;
      align-items: stretch;
    }

    .movie-detail.has-art-poster .movie-detail__visual {
      align-self: stretch;
      justify-self: stretch;
      width: calc(100% + 7vw);
      min-width: unset;
      aspect-ratio: unset;
      height: calc(100% + 92px + 226px + 30vh);
      margin-top: calc(-92px - 30vh);
      margin-bottom: -226px;
      margin-right: -7vw;
      border-radius: 0;
      border: none;
      box-shadow: none;
      background: transparent;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 14%, black 30%);
      mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.5) 14%, black 30%);
    }

    .movie-detail.has-art-poster .movie-detail__visual:hover {
      transform: none;
      box-shadow: none;
    }

    .movie-detail__art-poster {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      filter: none;
    }

    .movie-detail.is-visual-hovered .movie-detail__backdrop::before {
      opacity: 0.22;
      transform: scale(1.065);
      filter: blur(calc(var(--detail-ambient-blur) + 1px)) saturate(0.74) brightness(0.56) contrast(0.96);
    }

    /* ── INLINE TRAILER mode: 3-layer architecture ──
       Layer 1 (bottom): __backdrop — iframe lives here, position:absolute inset:0 — always reliable
       Layer 2 (middle): __shade    — gradient overlay, left opaque → right transparent
       Layer 3 (top):    __content  — text (z-index:4, normal stacking context)
    */

    /* Layer 1: backdrop hosts the iframe; override blur/scale from default backdrop styles */
    .movie-detail.has-trailer .movie-detail__backdrop {
      opacity: 1;
      filter: none;
      transform: none;
      overflow: hidden;
      background: #000;
    }
    .movie-detail.has-trailer .movie-detail__backdrop::before { display: none; }
    .movie-detail.has-trailer .movie-detail__backdrop::after {
      display: block;
      background: linear-gradient(to top, rgba(5,3,2,0.99) 0%, rgba(5,3,2,0.92) 18%, rgba(5,3,2,0.6) 32%, rgba(5,3,2,0.15) 46%, transparent 58%);
      filter: none;
      transform: none;
      opacity: 1;
      top: 0; right: 0; bottom: 0; left: 0;
      width: auto; background-size: auto;
    }

    /* Layer 2: left-to-right black fade + right-edge vignette + bottom fade */
    .movie-detail.has-trailer .movie-detail__shade {
      background:
        linear-gradient(to right, #000 0%, #000 30%, transparent 55%),
        linear-gradient(to left, rgba(0,0,0,0.75) 0%, transparent 14%),
        linear-gradient(to top, rgba(5,3,2,0.98) 0%, rgba(5,3,2,0.6) 16%, transparent 36%);
    }

    /* Content: single text column, restore normal stacking context */
    .movie-detail.has-trailer .movie-detail__content {
      grid-template-columns: minmax(380px, 44vw);
      align-items: start;
      gap: 0;
    }

    /* Visual: hidden in trailer mode (backdrop holds the video) */
    .movie-detail.has-trailer .movie-detail__visual {
      display: none;
    }


    .movie-detail__trailer-frame {
      position: absolute;
      top: 0;
      left: 65%;
      width: auto;
      min-width: 100%;
      height: 76%;
      aspect-ratio: 16 / 9;
      display: block;
      border: 0;
      transform: translateX(-50%);
      object-fit: cover;
    }

    .movie-detail__play-cta {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 2;
      display: grid;
      place-items: center;
      width: 84px;
      height: 84px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 50%;
      color: rgba(255, 247, 239, 0.92);
      background: rgba(10, 7, 6, 0.18);
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, calc(-50% + 8px));
      transition:
        opacity 280ms ease,
        transform 280ms ease,
        border-color 280ms ease,
        background 280ms ease;
    }

    .movie-detail__visual:hover .movie-detail__play-cta {
      opacity: 1;
      transform: translate(-50%, -50%);
      border-color: rgba(255, 255, 255, 0.2);
      background: rgba(10, 7, 6, 0.26);
    }
    a.movie-detail__play-cta {
      pointer-events: auto;
      cursor: pointer;
      text-decoration: none;
    }
    a.movie-detail__play-cta:hover {
      border-color: rgba(255, 255, 255, 0.5) !important;
      background: rgba(10, 7, 6, 0.45) !important;
    }

    .movie-detail__play-icon {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .movie-detail__poster-fallback,
    .detail-thumb__fallback {
      display: grid;
      place-items: end start;
      width: 100%;
      height: 100%;
      padding: 18px;
      color: rgba(255, 255, 255, 0.76);
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(29, 29, 31, 0.9), rgba(6, 4, 3, 1));
      font-size: 18px;
      font-weight: 760;
      line-height: 1.2;
      border-radius: 32px;
    }

    .detail-thumb__fallback {
      padding: 10px;
      font-size: 11px;
    }

    .movie-detail__streaming {
      position: absolute;
      left: 7vw;
      bottom: 355px;
      z-index: 5;
    }
    .streaming-pill {
      display: inline-flex;
      align-items: center;
      padding: 16px 29px;
      border-radius: 50px;
      background: rgba(8,5,4,0.60);
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      white-space: nowrap;
      transition: border-color 0.25s ease, background 0.25s ease;
    }
    .streaming-pill:hover {
      border-color: rgba(255,255,255,0.36);
      background: rgba(18,12,8,0.72);
    }
    .streaming-pill__core {
      display: flex;
      align-items: center;
      gap: 13px;
      text-decoration: none;
      color: inherit;
    }
    .streaming-pill__label {
      color: rgba(255,255,255,0.92);
      font-size: 21px;
      letter-spacing: 0.14em;
    }
    .streaming-pill__expand {
      display: flex;
      align-items: center;
      max-width: 0;
      overflow: hidden;
      opacity: 0;
      padding-left: 0;
      transition:
        max-width 0.38s cubic-bezier(0.4,0,0.2,1),
        opacity 0.22s ease 0.08s,
        padding-left 0.32s ease;
    }
    .streaming-pill:hover .streaming-pill__expand {
      max-width: 500px;
      opacity: 1;
      padding-left: 14px;
    }
    .streaming-pill__div {
      width: 1px; height: 20px;
      background: rgba(255,255,255,0.20);
      flex-shrink: 0;
      margin-right: 14px;
    }
    .streaming-pill__link {
      color: rgba(255,255,255,0.72);
      font-size: 15px;
      letter-spacing: 0.05em;
      text-decoration: none;
      padding: 0 11px;
      border-right: 1px solid rgba(255,255,255,0.12);
      transition: color 0.15s;
      white-space: nowrap;
    }
    .streaming-pill__link:last-child { border-right: none; padding-right: 0; }
    .streaming-pill__link:hover { color: rgba(255,255,255,0.96); }

    .detail-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }

    .trailer-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 15px 26px;
      color: rgba(255,255,255,0.86);
      font: inherit;
      font-size: 17px;
      letter-spacing: 0.08em;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 999px;
      cursor: pointer;
      transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
    }

    .trailer-btn:hover {
      color: #fff;
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.38);
    }

    .movie-detail__nav {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -5%;
      z-index: 4;
      min-height: 328px;
      padding: 18px 0 34px;
      background: linear-gradient(180deg, rgba(5, 3, 2, 0) 0%, rgba(5, 3, 2, 0.52) 14%, rgba(5, 3, 2, 0.88) 38%, rgba(5, 3, 2, 0.985) 100%);
    }

    .movie-detail.is-switching .movie-detail__copy,
    .movie-detail.is-switching .movie-detail__visual {
      opacity: 0.38;
    }

    .movie-detail__nav-head {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      margin: 0 0 14px;
      box-sizing: border-box;
      padding-left: clamp(56px, 5vw, 108px);
      padding-right: clamp(40px, 3vw, 72px);
      color: rgba(255, 255, 255, 0.48);
      font-size: 11px;
      font-weight: 760;
      letter-spacing: 0.14em;
    }

    .movie-detail__nav-actions {
      display: flex;
      gap: 8px;
    }

    .movie-detail__nav-button {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 50%;
      color: rgba(255, 255, 255, 0.9);
      background: rgba(8, 5, 4, 0.56);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      cursor: pointer;
      transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
    }
    .movie-detail__nav-button svg {
      width: 18px;
      height: 18px;
    }

    .movie-detail__nav-button:hover {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.12);
    }

    .movie-detail__rail {
      position: relative;
      width: 100%;
      min-height: 242px;
      padding: 18px 0 28px;
      overflow: hidden;
      touch-action: pan-y;
      user-select: none;
      cursor: grab;
    }

    .movie-detail__rail::before,
    .movie-detail__rail::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 120px;
      z-index: 3;
      pointer-events: none;
    }

    .movie-detail__rail::before {
      left: 0;
      background: linear-gradient(90deg, rgba(5, 3, 2, 0.95), rgba(5, 3, 2, 0));
    }

    .movie-detail__rail::after {
      right: 0;
      background: linear-gradient(270deg, rgba(5, 3, 2, 0.95), rgba(5, 3, 2, 0));
    }

    .movie-detail__rail.is-dragging {
      cursor: grabbing;
    }

    .movie-detail__track {
      display: flex;
      align-items: flex-end;
      will-change: transform;
      transition: transform 340ms cubic-bezier(0.22, 0.68, 0.24, 1);
    }

    .movie-detail__rail.is-dragging .movie-detail__track {
      transition: none;
    }

    .movie-detail__slot {
      flex: 0 0 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 0 8px;
    }

    .detail-thumb {
      position: relative;
      width: 122px;
      aspect-ratio: 9 / 13.2;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.04);
      opacity: 0.52;
      filter: brightness(0.64) saturate(0.72);
      cursor: pointer;
      transform: scale(0.92);
      transform-origin: center bottom;
      transition: opacity 300ms ease, filter 300ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
    }

    .detail-thumb:hover {
      opacity: 0.76;
      filter: brightness(0.82) saturate(0.9);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .detail-thumb.is-active {
      opacity: 1;
      filter: brightness(1.06) saturate(1.08);
      border-color: rgba(255, 255, 255, 0.72);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 0 28px rgba(255, 255, 255, 0.22);
      transform: translateY(-12px) scale(1.08);
    }

    .detail-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .detail-thumb__title {
      width: min(148px, 100%);
      min-height: 18px;
      color: rgba(255, 255, 255, 0.88);
      font-size: 11px;
      font-weight: 620;
      line-height: 1.45;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 220ms ease, transform 220ms ease;
      pointer-events: none;
    }

    .movie-detail__slot:hover .detail-thumb:not(.is-active) + .detail-thumb__title,
    .movie-detail__slot:focus-within .detail-thumb:not(.is-active) + .detail-thumb__title {
      opacity: 1;
      transform: translateY(0);
    }

    .card {
      display: grid;
      grid-template-columns: minmax(142px, 190px) 1fr;
      gap: clamp(16px, 2vw, 28px);
      min-width: 0;
      padding: 18px;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.045);
      box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.025);
    }

    .poster {
      position: relative;
      display: grid;
      align-content: end;
      min-height: 280px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 3px;
      padding: 16px;
      background:
        radial-gradient(circle at 42% 18%, color-mix(in srgb, var(--glow), white 16%), transparent 15%),
        linear-gradient(160deg, color-mix(in srgb, var(--glow), #111 42%), #09090d 48%, #000);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
    }

    .poster::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(115deg, transparent 0 45%, rgba(255, 255, 255, 0.18) 46%, transparent 48%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 13px);
      opacity: 0.22;
    }

    .poster-title {
      position: relative;
      margin: 0;
      font-family: var(--cn-font);
      font-size: clamp(24px, 2.15vw, 34px);
      font-weight: 340;
      line-height: 1.08;
      letter-spacing: 0.02em;
    }

    .poster-year {
      position: relative;
      margin-top: 10px;
      color: rgba(247, 241, 230, 0.64);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .details {
      min-width: 0;
    }

    .context {
      margin: 0 0 12px;
      color: var(--glow);
      font-size: 12px;
      font-weight: 820;
      letter-spacing: 0.12em;
    }

    .movie-title {
      margin: 0;
      font-family: var(--cn-font);
      font-size: clamp(31px, 3vw, 50px);
      font-weight: 330;
      line-height: 1.08;
      letter-spacing: 0.01em;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 20px 0 18px;
      padding: 0;
      list-style: none;
    }

    .meta li {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 0 10px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 999px;
      color: rgba(247, 241, 230, 0.82);
      background: rgba(255, 255, 255, 0.052);
      font-size: 12px;
      font-weight: 720;
    }

    .meta li:first-child {
      color: #07070a;
      border-color: transparent;
      background: var(--glow);
    }

    .icon {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
    }

    .note {
      margin: 0;
      color: rgba(247, 241, 230, 0.72);
      font-size: 15px;
      line-height: 1.78;
    }

    .people {
      display: grid;
      gap: 10px;
      margin-top: 18px;
    }

    .people-row {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 12px;
      align-items: center;
    }

    .people-label {
      color: rgba(247, 241, 230, 0.48);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
    }

    .person-list {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    .person {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 32px;
      padding: 3px 9px 3px 3px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.045);
      color: rgba(247, 241, 230, 0.78);
      font-size: 12px;
      white-space: nowrap;
    }

    .avatar {
      display: grid;
      place-items: center;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      color: #07070a;
      background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.86), transparent 24%),
        linear-gradient(135deg, var(--glow), color-mix(in srgb, var(--glow), #ffffff 40%));
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.04em;
      box-shadow: 0 0 18px color-mix(in srgb, var(--glow), transparent 62%);
    }

    .keywords {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
    }

    .keywords span {
      color: rgba(247, 241, 230, 0.6);
      font-family: var(--cn-font);
      font-size: 19px;
      font-style: normal;
    }

    /* ── BOTTOM NAV (fixed wrapper) ─────────── */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: var(--dock-w);
      right: 0;
      z-index: 32;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px 0 0;
      pointer-events: auto;
      background: linear-gradient(to top, rgba(5,5,5,.98) 66%, rgba(5,5,5,.78) 82%, transparent);
      isolation: isolate;
    }

    .bottom-nav::before {
      content: "";
      position: absolute;
      left: 18%;
      right: 18%;
      bottom: 70px;
      z-index: 0;
      height: 48px;
      background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--period-nav), transparent 88%), transparent 72%);
      opacity: 0.62;
      pointer-events: none;
      transition: background 900ms cubic-bezier(.22, .8, .3, 1), opacity 900ms cubic-bezier(.22, .8, .3, 1);
    }

    .timeline {
      width: var(--nav-track-width);
      pointer-events: auto;
      position: relative;
      z-index: 1;
    }

    /* ── PERIOD SECTION ──────────────────────── */
    /* ── PERIOD NAV (横向图标+文字) ─────── */
    .period-section {
      width: var(--nav-track-width);
      height: 88px;
      position: relative;
      margin-top: 8px;
      z-index: 1;
    }

    .period-arcs { display: none; }

    .period-items {
      display: flex;
      align-items: stretch;
      height: 100%;
      width: 100%;
    }

    .period-btn {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex: 1;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0 6px;
      transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .period-btn:hover:not(.active) { opacity: 0.78; }

    .period-circle { display: contents; }

    .period-icon {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      color: rgba(255,255,255,0.42);
      transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .period-btn.active .period-icon { color: var(--period-nav); }
    .period-btn:hover:not(.active) .period-icon { color: color-mix(in srgb, var(--period-nav), rgba(255,255,255,0.42) 28%); }

    .period-label {
      font-family: var(--cn-font);
      font-size: 17px;
      font-weight: 500;
      color: rgba(255,255,255,0.52);
      letter-spacing: 0.5px;
      white-space: nowrap;
      line-height: 1;
      transition: color 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .period-btn.active .period-label { color: var(--period-nav); }
    .period-btn:hover:not(.active) .period-label { color: color-mix(in srgb, var(--period-nav), rgba(255,255,255,0.52) 30%); }

    /* 激活底部指示线 + 中心光点 */
    .period-btn.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 52%;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--period-nav), transparent 82%),
        color-mix(in srgb, var(--period-nav), transparent 38%),
        color-mix(in srgb, var(--period-nav), transparent 82%),
        transparent
      );
      box-shadow: 0 -10px 26px color-mix(in srgb, var(--period-nav), transparent 90%);
    }

    @media (prefers-reduced-motion: reduce) {
      .period-btn, .period-icon, .period-label { transition: none; }
    }

    .years {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 8px;
      background: rgba(247, 241, 230, 0.05);
      border: 0.5px solid rgba(247, 241, 230, 0.1);
      border-radius: 40px;
      overflow: hidden;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .year-btn {
      position: relative;
      display: flex;
      align-items: stretch;
      justify-content: center;
      flex: 1 1 0;
      min-width: 0;
      padding: 0;
      color: rgba(247, 241, 230, 0.32);
      background: transparent;
      font-size: 9.5px;
      font-weight: 400;
      line-height: 1;
      font-family: Didot, "Bodoni 72", Georgia, var(--cn-font);
      font-variant-numeric: tabular-nums;
      letter-spacing: 0;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      transition: color 0.28s ease;
    }

    .year-label {
      display: block;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 11px 8px;
      border-radius: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: background 0.28s ease, box-shadow 0.28s ease, text-shadow 0.28s ease;
    }

    .year-btn.active {
      z-index: 1;
      color: var(--period-nav);
    }

    .year-btn.active .year-label {
      background: color-mix(in srgb, var(--period-nav), transparent 88%);
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--period-nav), transparent 88%), 0 0 20px color-mix(in srgb, var(--period-nav), transparent 90%);
      text-shadow: 0 0 14px color-mix(in srgb, var(--period-nav), transparent 70%);
    }

    .year-btn:hover:not(.active) {
      color: color-mix(in srgb, var(--period-nav), rgba(247, 241, 230, 0.42) 34%);
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: 0.13;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 42px 42px;
      mix-blend-mode: screen;
    }

    /* ── CINEMATIC BACKGROUND SYSTEM ─────────────────────── */
    .bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      background: #090807;
    }

    .era-bg-layer {
      --era-base: #090807;
      --era-mid: #0C0908;
      --era-end: #060606;
      --era-bg-rgb: 122, 94, 48;
      --era-left-rgb: 90, 69, 40;
      --era-left-hot-rgb: 126, 104, 63;
      --era-right-rgb: 82, 66, 43;
      --era-right-hot-rgb: 112, 88, 52;
      --era-tonal-top: 0.22;
      --era-tonal-mid: 0.16;
      --era-tonal-low: 0.06;
      --era-center-dark: 0.40;
      --era-left-hot-alpha: 0.40;
      --era-left-alpha: 0.24;
      --era-right-hot-alpha: 0.36;
      --era-right-alpha: 0.20;
      --era-local-left-hot-alpha: 0.30;
      --era-local-left-alpha: 0.16;
      --era-local-right-hot-alpha: 0.28;
      --era-local-right-alpha: 0.14;
      --era-map-image: none;
      --era-smoke-image: none;
      --era-silhouette-image: none;
      --era-map-opacity: 0;
      --era-map-filter: none;
      --era-smoke-opacity: 0;
      --era-silhouette-opacity: 0;
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      opacity: 0;
      background:
        linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.18) 47%, rgba(0, 0, 0, var(--era-center-dark)) 50%, rgba(0, 0, 0, 0.18) 53%, transparent 58%),
        linear-gradient(180deg, rgba(var(--era-bg-rgb), var(--era-tonal-top)) 0%, rgba(var(--era-bg-rgb), var(--era-tonal-mid)) 48%, rgba(var(--era-bg-rgb), var(--era-tonal-low)) 78%, transparent 96%),
        linear-gradient(180deg, var(--era-base) 0%, var(--era-mid) 55%, var(--era-end) 100%);
      transition: opacity 900ms cubic-bezier(.22, .8, .3, 1);
      isolation: isolate;
    }

    .era-bg-layer.is-visible {
      opacity: 1;
    }

    .era-bg-layer::before,
    .era-bg-layer::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .era-bg-layer::before {
      inset: -8% -6%;
      z-index: 3;
      background:
        linear-gradient(90deg, transparent 0 42%, rgba(0, 0, 0, 0.18) 47%, rgba(0, 0, 0, 0.48) 50%, rgba(0, 0, 0, 0.18) 53%, transparent 58%),
        radial-gradient(ellipse 44% 76% at 22% 38%, rgba(var(--era-left-hot-rgb), var(--era-left-hot-alpha)) 0%, rgba(var(--era-left-rgb), var(--era-left-alpha)) 38%, transparent 76%),
        radial-gradient(ellipse 44% 76% at 78% 38%, rgba(var(--era-right-hot-rgb), var(--era-right-hot-alpha)) 0%, rgba(var(--era-right-rgb), var(--era-right-alpha)) 42%, transparent 76%);
      filter: blur(22px);
      mix-blend-mode: screen;
      opacity: 1;
    }

    .era-bg-layer::after {
      inset: -2%;
      z-index: 5;
      background:
        radial-gradient(ellipse 20% 30% at 27% 39%, rgba(var(--era-left-hot-rgb), var(--era-local-left-hot-alpha)) 0%, rgba(var(--era-left-rgb), var(--era-local-left-alpha)) 46%, transparent 74%),
        radial-gradient(ellipse 20% 30% at 73% 39%, rgba(var(--era-right-hot-rgb), var(--era-local-right-hot-alpha)) 0%, rgba(var(--era-right-rgb), var(--era-local-right-alpha)) 46%, transparent 74%);
      filter: blur(30px);
      mix-blend-mode: screen;
      opacity: 0;
      transform: scale(0.88);
      transition: opacity 1000ms cubic-bezier(.22, .8, .3, 1), transform 1000ms cubic-bezier(.22, .8, .3, 1);
    }

    .era-bg-layer.is-visible::after {
      opacity: 1;
      transform: scale(1);
    }

    .era-bg-asset {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      opacity: 0;
    }

    .era-bg-map {
      z-index: 1;
      background-image: var(--era-map-image);
      background-position: var(--era-map-position, center);
      background-size: var(--era-map-size, cover);
      mix-blend-mode: var(--era-map-blend, screen);
      opacity: var(--era-map-opacity);
      filter: var(--era-map-filter);
    }

    .era-bg-silhouette {
      z-index: 2;
      background-image: var(--era-silhouette-image);
      mix-blend-mode: screen;
      opacity: var(--era-silhouette-opacity);
      filter: blur(1px);
    }

    .era-bg-smoke {
      z-index: 4;
      background-image: var(--era-smoke-image);
      mix-blend-mode: soft-light;
      opacity: var(--era-smoke-opacity);
      filter: blur(1px);
    }

    /* Legacy light is retained as a neutral holder; era colour comes from .era-bg-layer. */
    .bg-light {
      position: absolute;
      inset: -30%;
      z-index: 1;
      background: none;
      opacity: 0;
    }

    /* Theme-adaptive diffused glow — color follows --period-glow (synced per era). */
    @property --period-glow {
      syntax: "<color>";
      inherits: true;
      initial-value: #7A5E30;
    }

    .bg-theme-glow {
      --glow-alpha: 0.16;
      --glow-breath-duration: 14s;
      position: absolute;
      inset: 0;
      z-index: 6;
      pointer-events: none;
      overflow: hidden;
      transition: --period-glow 1.1s cubic-bezier(.22, .8, .3, 1);
    }

    .bg-theme-glow::before,
    .bg-theme-glow::after {
      content: "";
      position: absolute;
      pointer-events: none;
      width: 36%;
      height: 44%;
      top: 30%;
      border-radius: 50%;
      filter: blur(58px);
      mix-blend-mode: screen;
    }

    .bg-theme-glow::before {
      left: 7%;
      background: radial-gradient(
        ellipse at 52% 48%,
        color-mix(in srgb, var(--period-glow), transparent 16%) 0%,
        color-mix(in srgb, var(--period-glow), transparent 46%) 36%,
        transparent 66%
      );
      opacity: var(--glow-alpha);
      animation: bg-theme-glow-breathe-a var(--glow-breath-duration) ease-in-out infinite;
    }

    .bg-theme-glow::after {
      right: 7%;
      left: auto;
      background: radial-gradient(
        ellipse at 48% 48%,
        color-mix(in srgb, var(--period-glow), transparent 18%) 0%,
        color-mix(in srgb, var(--period-glow), transparent 48%) 38%,
        transparent 68%
      );
      opacity: calc(var(--glow-alpha) * 0.94);
      animation: bg-theme-glow-breathe-b calc(var(--glow-breath-duration) * 1.12) ease-in-out infinite;
      animation-delay: -7s;
    }

    @keyframes bg-theme-glow-breathe-a {
      0%, 100% { opacity: 0.12; transform: scale(0.99); }
      50% { opacity: 0.19; transform: scale(1.01); }
    }

    @keyframes bg-theme-glow-breathe-b {
      0%, 100% { opacity: 0.11; transform: scale(0.985); }
      50% { opacity: 0.18; transform: scale(1.015); }
    }

    /* Theme-tinted cinema haze for the main History view. */
    .history-projector-light {
      position: absolute;
      inset: 0;
      z-index: 7;
      overflow: hidden;
      pointer-events: none;
      opacity: .84;
      background:
        linear-gradient(90deg, transparent 0 42%, rgba(0,0,0,.18) 47%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.18) 53%, transparent 58%),
        radial-gradient(ellipse 50% 74% at 16% 38%, rgba(var(--projector-light-rgb), .18) 0%, rgba(var(--projector-light-rgb), .09) 42%, transparent 78%),
        radial-gradient(ellipse 50% 74% at 84% 38%, rgba(var(--projector-light-rgb), .16) 0%, rgba(var(--projector-light-rgb), .08) 44%, transparent 78%);
      transition: opacity 420ms ease, --projector-light-rgb 1.1s cubic-bezier(.22, .8, .3, 1);
    }

    .history-projector-light::before,
    .history-projector-light::after {
      content: "";
      position: absolute;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .history-projector-light::before {
      inset: -8% -5%;
      background:
        radial-gradient(ellipse 28% 36% at 27% 41%, rgba(var(--projector-light-rgb), .2) 0%, rgba(var(--projector-light-rgb), .08) 48%, transparent 76%),
        radial-gradient(ellipse 28% 36% at 73% 41%, rgba(var(--projector-light-rgb), .18) 0%, rgba(var(--projector-light-rgb), .07) 50%, transparent 76%),
        linear-gradient(116deg, rgba(var(--projector-light-rgb), .08) 0%, rgba(var(--projector-light-rgb), .025) 24%, transparent 43%),
        linear-gradient(244deg, rgba(var(--projector-light-rgb), .07) 0%, rgba(var(--projector-light-rgb), .02) 24%, transparent 43%);
      filter: blur(42px);
      opacity: .72;
      animation: history-projector-breathe 22s ease-in-out infinite;
    }

    .history-projector-light::after {
      inset: 9% 4% 12%;
      background:
        radial-gradient(circle at 12% 28%, rgba(var(--projector-light-rgb), .22) 0 .45px, transparent .9px),
        radial-gradient(circle at 20% 46%, rgba(var(--projector-light-rgb), .18) 0 .4px, transparent .85px),
        radial-gradient(circle at 30% 34%, rgba(var(--projector-light-rgb), .16) 0 .5px, transparent .95px),
        radial-gradient(circle at 69% 38%, rgba(var(--projector-light-rgb), .15) 0 .45px, transparent .9px),
        radial-gradient(circle at 80% 52%, rgba(var(--projector-light-rgb), .19) 0 .4px, transparent .85px),
        radial-gradient(circle at 88% 31%, rgba(var(--projector-light-rgb), .16) 0 .5px, transparent .95px);
      background-size: 83px 97px, 127px 113px, 149px 131px, 109px 101px, 139px 127px, 97px 119px;
      -webkit-mask-image: radial-gradient(
        ellipse 48% 76% at 18% 42%,
        #000 0 36%,
        transparent 78%
      ), radial-gradient(
        ellipse 48% 76% at 82% 42%,
        #000 0 36%,
        transparent 78%
      );
      mask-image: radial-gradient(
        ellipse 48% 76% at 18% 42%,
        #000 0 36%,
        transparent 78%
      ), radial-gradient(
        ellipse 48% 76% at 82% 42%,
        #000 0 36%,
        transparent 78%
      );
      opacity: .16;
      animation: history-projector-dust 34s ease-in-out infinite alternate;
    }

    body.is-experience-open .history-projector-light,
    body.is-vertical-timeline .history-projector-light {
      opacity: 0;
    }

    @keyframes history-projector-breathe {
      0%, 100% { opacity: .62; transform: scale(1); }
      50% { opacity: .78; transform: scale(1.015); }
    }

    @keyframes history-projector-dust {
      0% { transform: translate3d(-2px, -1px, 0); opacity: .12; }
      100% { transform: translate3d(3px, 2px, 0); opacity: .18; }
    }

    /* Neutral film grain — fixed above page content, below nav/overlays. */
    .bg-film-grain {
      --grain-opacity: 0.04;
      --grain-duration: 1.1s;
      position: fixed;
      inset: -18%;
      width: 136%;
      height: 136%;
      z-index: 26;
      pointer-events: none;
      opacity: var(--grain-opacity);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.48'/%3E%3C/svg%3E");
      background-size: 100px 100px;
      mix-blend-mode: overlay;
      animation: bg-film-grain-shift var(--grain-duration) steps(10) infinite;
    }

    @keyframes bg-film-grain-shift {
      0% { transform: translate(0, 0); }
      10% { transform: translate(-0.28%, 0.18%); }
      20% { transform: translate(0.22%, -0.24%); }
      30% { transform: translate(-0.14%, -0.12%); }
      40% { transform: translate(0.26%, 0.16%); }
      50% { transform: translate(-0.2%, 0.22%); }
      60% { transform: translate(0.16%, -0.18%); }
      70% { transform: translate(-0.24%, 0.1%); }
      80% { transform: translate(0.12%, 0.2%); }
      90% { transform: translate(-0.1%, -0.16%); }
      100% { transform: translate(0, 0); }
    }

    /* Temporary debug: add class "debug-atmosphere" to <html> to verify layers. */
    html.debug-atmosphere .bg-theme-glow::before,
    html.debug-atmosphere .bg-theme-glow::after {
      opacity: 0.35 !important;
      animation: none !important;
    }

    html.debug-atmosphere .bg-film-grain {
      --grain-opacity: 0.12;
      opacity: 0.12 !important;
      animation: none !important;
    }

    @media (prefers-reduced-motion: reduce) {
      .bg-theme-glow::before,
      .bg-theme-glow::after,
      .history-projector-light,
      .history-projector-light::before,
      .history-projector-light::after,
      .history-projector-rays,
      .history-projector-dust,
      .bg-film-grain {
        animation: none;
      }
    }

    /* Bokeh container — orbs injected by JS */
    .bg-bokeh-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 2;
      opacity: 0.52;
      mix-blend-mode: screen;
    }

    /* Floating dust particle canvas */
    .bg-particles {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 3;
      opacity: 0.58;
    }

    /* Bottom compression keeps timeline/nav clean and dark. */
    .bg-ground {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 4;
      height: 38%;
      background:
        linear-gradient(to top, rgba(5, 5, 5, 0.92) 0%, rgba(5, 5, 5, 0.72) 30%, rgba(5, 5, 5, 0.34) 66%, transparent 100%);
    }

    /* Heavy vignette — edges stay cinematic and restrained. */
    .bg-vignette {
      position: absolute;
      inset: 0;
      z-index: 5;
      background:
        radial-gradient(ellipse 100% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.34) 74%, rgba(0,0,0,.60) 100%),
        linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 18%),
        linear-gradient(0deg, rgba(0,0,0,.42) 0%, transparent 26%),
        linear-gradient(90deg, rgba(0,0,0,.38) 0%, transparent 15%, transparent 85%, rgba(0,0,0,.38) 100%);
    }

    .atmosphere {
      display: none;
    }

    @media (max-width: 0px) {
      .content {
        width: min(100vw - 30px, 720px);
        padding: 76px 0 108px;
      }

      .era-head {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: center;
      }

      .era-side-label,
      .era-side-label:last-child {
        display: none;
      }

      .compare {
        grid-template-columns: 1fr;
        gap: 12px;
        min-height: auto;
        max-height: calc(100vh - 230px);
        overflow: auto;
        padding: 12px;
      }

      .poster-grid {
        position: relative;
        height: 340px;
      }

      .axis,
      .axis-sep {
        display: none;
      }

      .card {
        grid-template-columns: 112px 1fr;
        gap: 12px;
        padding: 12px;
      }

      .poster {
        min-height: 176px;
        padding: 10px;
      }

      .poster-title {
        font-size: 22px;
      }

      .movie-title {
        font-size: clamp(26px, 7.4vw, 42px);
      }

      .note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 13px;
        line-height: 1.45;
      }

      .people-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .keywords {
        display: none;
      }

      .brand-word {
        display: none;
      }
    }

    @media (max-height: 780px) {
      .content {
        padding: 76px 0 98px;
      }

      .era-head {
        margin-bottom: 12px;
      }

      .era-year {
        font-size: clamp(38px, 5vw, 58px);
      }

      .compare {
        min-height: 438px;
        padding: 16px;
      }

      .poster-grid {
        column-gap: 10px;
      }

      .card {
        grid-template-columns: minmax(120px, 158px) 1fr;
        gap: 16px;
        padding: 14px;
      }

      .poster {
        min-height: 220px;
      }

      .poster-title {
        font-size: clamp(21px, 2vw, 30px);
      }

      .movie-title {
        font-size: clamp(28px, 2.9vw, 45px);
      }

      .meta {
        margin: 14px 0 12px;
      }

      .note {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 13.5px;
        line-height: 1.62;
      }

      .people {
        gap: 8px;
        margin-top: 12px;
      }

      .keywords {
        margin-top: 10px;
      }

      .score { font-size: 20px; }
    }

    @media (max-width: 0px) {
      .topbar {
        top: 18px;
        left: 18px;
        right: 18px;
      }

      .era-year {
        font-size: 40px;
      }

      .era-event {
        font-size: 11px;
      }

      .card {
        grid-template-columns: 92px 1fr;
      }

      .poster {
        min-height: 148px;
      }

      .poster-title {
        font-size: 17px;
      }

      .poster-year {
        font-size: 9px;
      }

      .meta {
        gap: 5px;
        margin: 12px 0;
      }

      .meta li {
        min-height: 26px;
        padding: 0 8px;
      }
    }

    @media (min-width: 0px) {
      .content {
        width: min(1780px, calc(100vw - 92px));
        padding: 84px 0 190px;
      }

      .era::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: none;
      }

      .era-head {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .era-title {
        display: none;
      }

      .era-side-label {
        display: none;
      }

      .era-year {
        font-size: clamp(58px, 6.2vw, 112px);
      }

      .era-event {
        margin-top: 8px;
        font-size: 18px;
      }

      .compare {
        min-height: 610px;
        padding: 0;
        gap: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        grid-template-columns: 1fr 2px 1fr;
      }

      .axis-sep {
        position: relative;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          color-mix(in srgb, var(--period-nav), transparent 85%) 8%,
          color-mix(in srgb, var(--period-nav), transparent 45%) 30%,
          color-mix(in srgb, var(--period-nav), transparent 15%) 50%,
          color-mix(in srgb, var(--period-nav), transparent 45%) 70%,
          color-mix(in srgb, var(--period-nav), transparent 85%) 92%,
          transparent 100%
        );
        box-shadow:
          0 0 10px color-mix(in srgb, var(--period-nav), transparent 60%),
          0 0 32px color-mix(in srgb, var(--period-nav), transparent 80%);
      }

      .axis-sep::before {
        content: '◆';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: color-mix(in srgb, var(--period-nav), transparent 10%);
        font-size: 11px;
        text-shadow: 0 0 14px color-mix(in srgb, var(--period-nav), transparent 30%), 0 0 32px color-mix(in srgb, var(--period-nav), transparent 60%);
      }

      .axis-mode-toggle {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 4;
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        cursor: pointer;
        pointer-events: auto;
        transform: translate(-50%, -50%);
      }

      .axis-mode-toggle:focus-visible {
        outline: 1px solid color-mix(in srgb, var(--period-nav), transparent 28%);
        outline-offset: 5px;
      }

      .axis-mode-label {
        display: none;
      }

      .side-panel {
        position: relative;
        height: 610px;
        padding: 0 36px;
        isolation: isolate;
        overflow: visible;
      }

      .side-panel::before,
      .side-panel::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .side-panel::before {
        inset: -210px -68px -130px;
        z-index: -2;
        background: none;
        opacity: 0;
      }

      .side-panel::after {
        left: -16px;
        right: -16px;
        bottom: 28px;
        z-index: -1;
        height: 430px;
        background: none;
        opacity: 0;
      }

      .side-panel > * {
        position: relative;
        z-index: 2;
      }

      .side-world {
        --scene-light-x: 44%;
        --scene-drift: 42px;
        --scene-drift-near: -58px;
        --scene-silhouette:
          radial-gradient(ellipse at 34% 18%, rgba(255, 255, 255, 0.13), transparent 18%),
          radial-gradient(ellipse at 54% 10%, rgba(255, 255, 255, 0.09), transparent 16%),
          linear-gradient(to right, transparent 0 8%, rgba(0, 0, 0, 0.78) 8% 12%, transparent 12% 16%, rgba(0, 0, 0, 0.78) 16% 17.5%, transparent 17.5% 20%, rgba(0, 0, 0, 0.82) 20% 31%, transparent 31% 35%, rgba(0, 0, 0, 0.78) 35% 38%, transparent 38% 42%, rgba(0, 0, 0, 0.84) 42% 56%, transparent 56% 61%, rgba(0, 0, 0, 0.76) 61% 63%, transparent 63% 68%, rgba(0, 0, 0, 0.82) 68% 78%, transparent 78% 84%, rgba(0, 0, 0, 0.75) 84% 88%, transparent 88%);
      }

      .side-world::after {
        clip-path: polygon(0 100%, 0 64%, 6% 64%, 6% 45%, 11% 45%, 11% 73%, 15% 73%, 15% 35%, 18% 35%, 18% 70%, 23% 70%, 23% 28%, 31% 28%, 31% 76%, 37% 76%, 37% 50%, 41% 50%, 41% 72%, 46% 72%, 46% 31%, 50% 31%, 50% 76%, 56% 76%, 56% 42%, 62% 42%, 62% 74%, 68% 74%, 68% 24%, 72% 24%, 72% 76%, 79% 76%, 79% 38%, 84% 38%, 84% 72%, 90% 72%, 90% 55%, 100% 55%, 100% 100%);
      }

      .side-china {
        --scene-light-x: 58%;
        --scene-drift: -42px;
        --scene-drift-near: 58px;
        --scene-silhouette:
          radial-gradient(ellipse at 50% 20%, rgba(255, 255, 255, 0.14), transparent 20%),
          linear-gradient(120deg, transparent 0 14%, rgba(255, 255, 255, 0.11) 14.2% 14.7%, transparent 15% 100%),
          linear-gradient(to right, transparent 0 9%, rgba(0, 0, 0, 0.78) 9% 20%, transparent 20% 25%, rgba(0, 0, 0, 0.74) 25% 28%, transparent 28% 34%, rgba(0, 0, 0, 0.84) 34% 58%, transparent 58% 65%, rgba(0, 0, 0, 0.78) 65% 76%, transparent 76% 82%, rgba(0, 0, 0, 0.72) 82% 93%, transparent 93%);
      }

      .side-china::after {
        clip-path: polygon(0 100%, 0 70%, 7% 70%, 7% 54%, 14% 48%, 21% 54%, 21% 74%, 27% 74%, 27% 44%, 34% 44%, 34% 30%, 43% 30%, 43% 74%, 49% 74%, 49% 58%, 56% 52%, 63% 58%, 63% 76%, 69% 76%, 69% 42%, 78% 42%, 78% 28%, 84% 28%, 84% 74%, 90% 74%, 90% 56%, 100% 50%, 100% 100%);
      }


      .side-title {
        position: absolute;
        top: -10px;
        left: -12px;
        z-index: 1;
        max-width: 100%;
        margin: 0;
        color: rgba(247, 241, 230, 0.075);
        font-family: "Playfair Display SC", "Bodoni 72", Georgia, serif;
        font-size: 148px;
        font-weight: 900;
        letter-spacing: 0;
        line-height: 0.82;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
        text-shadow: 0 0 32px rgba(247, 241, 230, 0.04);
      }

      .side-title::before {
        content: none;
      }

      .side-world .side-title {
        left: clamp(36px, 3.5vw, 68px);
      }

      .side-panel:nth-child(3) .side-title {
        left: auto;
        right: -10px;
        text-align: right;
      }

      .side-panel:nth-child(3) .side-title::before {
        left: auto;
        right: -36px;
      }

      .poster-grid {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 90px;
        height: auto;
        width: auto;
      }

      .side-world .poster-grid { transform: translateX(3%); }
      .side-china .poster-grid { transform: translateX(-3%); }
      .side-world .side-copy { left: 53%; }
      .side-china .side-copy { left: 47%; }

      .score { font-size: 22px; }

      .era-summary {
        position: absolute;
        left: 50%;
        bottom: 14px;
        width: min(820px, 54vw);
        margin: 0;
        color: color-mix(in srgb, var(--glow), #ffffff 24%);
        font-size: 14px;
        font-weight: 650;
        line-height: 1.6;
        letter-spacing: 0.08em;
        text-align: center;
        text-shadow: 0 0 24px color-mix(in srgb, var(--glow), transparent 60%);
        transform: translateX(-50%);
      }

      .keywords {
        display: none;
      }

      .side-copy {
        position: absolute;
        left: 50%;
        bottom: calc(18px - 2%);
        width: min(620px, 82%);
        min-height: 78px;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
      }

      .side-copy h3 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        margin: 0;
        color: var(--period-nav);
        font-family: var(--cn-font);
        font-size: 28px;
        font-weight: 650;
        letter-spacing: 0.16em;
        line-height: 29px;
        white-space: nowrap;
        cursor: pointer;
        pointer-events: auto;
        transition: filter 180ms ease;
        text-shadow:
          0 0 24px color-mix(in srgb, var(--period-nav), transparent 46%),
          0 12px 38px rgba(0, 0, 0, 0.52);
      }

      .side-copy p {
        position: absolute;
        top: 43px;
        left: 50%;
        width: min(520px, 100%);
        max-height: 0;
        margin: 0 auto;
        max-width: 520px;
        overflow: hidden;
        color: color-mix(in srgb, var(--period-nav), #ffffff 26%);
        font-size: 11px;
        font-weight: 560;
        line-height: 1.55;
        letter-spacing: 0.06em;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 4px);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          visibility 180ms step-end;
      }

      .side-copy h3:hover { filter: brightness(1.22); }

      .side-copy h3:hover + p,
      .side-copy h3:focus-visible + p,
      .side-copy.is-movie-preview p {
        max-height: 96px;
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition:
          opacity 180ms ease,
          transform 180ms ease,
          visibility 0s;
      }

      .timeline {
        width: var(--nav-track-width);
      }

      .period-section {
        width: var(--nav-track-width);
      }

      .years {
        padding: 8px;
        gap: 0;
      }

      .year-btn {
        font-size: 12px;
        padding: 0;
      }

      .year-btn.active {
        color: var(--period-nav);
      }

      .year-label {
        padding: 12px 8px;
      }

      .year-btn.active .year-label {
        background: color-mix(in srgb, var(--period-nav), transparent 88%);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--period-nav), transparent 88%), 0 0 20px color-mix(in srgb, var(--period-nav), transparent 90%);
        text-shadow: 0 0 14px color-mix(in srgb, var(--period-nav), transparent 70%);
      }
    }

    @media (max-height: 780px) {
      .content {
        padding: 54px 0 164px;
      }

      .era-year {
        font-size: clamp(50px, 5.2vw, 78px);
      }

      .era-event {
        font-size: 14px;
      }

      .compare {
        min-height: 470px;
      }

      .side-panel {
        height: 470px;
        padding: 0 28px;
      }

      .poster-grid {
        top: 42px;
        bottom: 72px;
      }

      .side-title {
        top: -6px;
        font-size: 118px;
      }

      .score { font-size: 18px; }
      .t-cn { font-size: 18px; }

      .side-copy {
        bottom: 12px;
        min-height: 72px;
      }

      .side-copy h3 {
        font-size: 28px;
      }

      .era-summary {
        bottom: 8px;
        font-size: 12px;
      }

    }

    /* Vertical timeline is an additive view; the horizontal scene remains unchanged. */
    .vertical-timeline-view {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 28;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        radial-gradient(circle at 50% 42%, rgba(var(--period-bg-rgb), 0.13), transparent 34%),
        rgba(4, 5, 5, 0.975);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      transition: opacity 240ms ease, visibility 240ms step-end;
    }

    .vertical-timeline-view::-webkit-scrollbar {
      display: none;
    }

    .vertical-timeline-view.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 240ms ease, visibility 0s;
    }

    .vertical-timeline-view.is-closing {
      visibility: visible;
      pointer-events: none;
    }

    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .bg-canvas,
    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .bg-film-grain,
    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .viewport {
      visibility: hidden;
    }

    .vertical-timeline-track {
      position: relative;
      width: 100%;
      min-height: 100%;
      isolation: isolate;
    }

    .vertical-timeline-track::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      z-index: 2;
      width: 1px;
      background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--period-nav), transparent 48%) 4%,
        color-mix(in srgb, var(--period-nav), transparent 32%) 50%,
        color-mix(in srgb, var(--period-nav), transparent 48%) 96%,
        transparent
      );
      box-shadow: 0 0 14px color-mix(in srgb, var(--period-nav), transparent 68%);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .vertical-era {
      position: relative;
      z-index: 1;
      display: grid;
      align-items: center;
      width: 100%;
      min-height: 720px;
      --vertical-history-gap: clamp(260px, 26vw, 480px);
      overflow: hidden;
      isolation: isolate;
      contain: paint style;
    }

    .vertical-era::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 25% 42%, rgba(var(--period-bg-rgb), 0.11), transparent 30%),
        radial-gradient(circle at 75% 42%, rgba(var(--period-bg-rgb), 0.11), transparent 30%);
      pointer-events: none;
    }

    .vertical-era__content {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: min(1780px, calc(100vw - 92px));
      height: 100%;
      padding: 0;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .vertical-era .compare {
      grid-template-columns: minmax(0, 1fr) var(--vertical-history-gap) minmax(0, 1fr);
      height: 100%;
      min-height: 0;
      transform: none;
    }

    .vertical-era .movie-card,
    .vertical-era .movie-card:hover {
      filter: none;
      will-change: auto;
    }

    /* ── VERTICAL ERA: TWO-COLUMN STAGGERED STRIP ──────────────────
       Film strips anchored to outer edges; center stays clear for
       the axis panel. Stagger mirrors: world col-2 down, china col-1 down.
    ─────────────────────────────────────────────────────────────── */

    .vertical-era {
      --vt-card-w:  clamp(77.08px, 6.58vw, 101.52px);
      --vt-gap:     clamp(5px, 0.5vw, 8px);
      --vt-stagger: clamp(22px, 2vw, 32px);
    }

    /* Side panels become flex containers to anchor the strip at outer edge */
    .vertical-era .side-panel {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      height: 100%;
      padding: 0;
      pointer-events: auto;
    }

    .vertical-era .side-china {
      justify-content: flex-end;
    }

    .vertical-era .side-world {
      transform: translateX(-2vw);
    }

    .vertical-era .side-china {
      transform: translateX(2vw);
    }

    /* Poster-grid: 2-column static grid, replaces absolute scatter */
    .vertical-era .poster-grid {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, var(--vt-card-w));
      column-gap: var(--vt-gap);
      row-gap: 0;
      align-content: space-between;
      align-items: start;
      width: auto;
      height: calc(100% - var(--vt-stagger));
      padding-block: 9px;
      box-sizing: border-box;
    }

    /* Reset ALL absolute/scatter — keep relative as containing block for inner elements */
    .vertical-era .poster-grid > .movie-card {
      position: relative !important;
      left:       auto !important;
      top:        auto !important;
      width:      100% !important;
      --vt-card-y: 0px;
      --vt-card-angle: 0deg;
      --vt-card-down-tilt: 0deg;
      --vt-card-scale: 1;
      transform:
        translateY(var(--vt-card-y))
        skewY(var(--vt-card-down-tilt))
        rotateY(var(--vt-card-angle))
        scaleX(1.206)
        scale(var(--vt-card-scale)) !important;
      z-index:    1 !important;
      margin-top: 0 !important;
      border-radius: 10px;
      opacity: 0.8;
      transition: opacity 240ms ease, box-shadow 280ms ease;
    }

    .vertical-era .side-world .poster-grid > .movie-card {
      --vt-card-angle: 34deg;
      --vt-card-down-tilt: 9deg;
      transform-origin: left center;
    }

    .vertical-era .side-china .poster-grid > .movie-card {
      --vt-card-angle: -34deg;
      --vt-card-down-tilt: -9deg;
      transform-origin: right center;
    }

    .vertical-era .side-world .poster-grid > .movie-card:nth-child(odd) {
      left: 6% !important;
    }

    .vertical-era .side-china .poster-grid > .movie-card:nth-child(even) {
      left: -6% !important;
    }

    /* Stagger — world side: column 2 (even cards) shifts down */
    .vertical-era .side-world .poster-grid > .movie-card:nth-child(even) {
      left: 46% !important;
      top: auto !important;
      margin-top: 0 !important;
      opacity: 0.24;
      --vt-card-y: var(--vt-stagger);
      --vt-card-scale: 0.8;
    }

    /* Stagger — china side: column 1 (odd cards) shifts down (mirror) */
    .vertical-era .side-china .poster-grid > .movie-card:nth-child(odd) {
      left: -46% !important;
      top: auto !important;
      margin-top: 0 !important;
      opacity: 0.24;
      --vt-card-y: var(--vt-stagger);
      --vt-card-scale: 0.8;
    }

    .vertical-era .poster-grid > .movie-card:is(:hover, :focus-visible) {
      opacity: 1 !important;
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0 14px rgba(255, 255, 255, 0.12);
    }

    .vertical-era .poster-grid > .movie-card:is(:hover, :focus-visible)::after {
      box-shadow: none;
    }

    .vertical-era .poster-grid > .movie-card::after {
      border-radius: inherit;
    }

    .vertical-era .poster-grid > .movie-card::before {
      top: -45%;
      right: auto;
      left: -80%;
      width: 42%;
      height: 190%;
      background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.01) 24%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.015) 72%,
        transparent 100%
      );
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
    }

    .vertical-era .poster-grid > .movie-card:is(:hover, :focus-visible)::before {
      animation: vt-card-shine 1.45s cubic-bezier(.22, .62, .24, 1);
    }

    @keyframes vt-card-shine {
      0% {
        opacity: 0;
        transform: translateX(0) skewX(-16deg);
      }
      22% { opacity: 0.28; }
      100% {
        opacity: 0;
        transform: translateX(480%) skewX(-16deg);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vertical-era .poster-grid > .movie-card {
        transition: none;
      }

      .vertical-era .poster-grid > .movie-card::before {
        display: none;
      }
    }

    /* Era label handled by axis panel; hide duplicate in side panel */
    .vertical-era .side-copy {
      display: none;
    }

    .vertical-era .axis-sep {
      justify-self: center;
      width: 1px;
      pointer-events: none;
    }

    .vertical-era .axis-mode-label {
      display: none;
    }

    .vertical-axis-panel {
      position: absolute;
      top: clamp(28px, 4.6vh, 52px);
      left: 50%;
      z-index: 12;
      display: grid;
      grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
      column-gap: clamp(34px, 5vw, 78px);
      width: min(1060px, calc(100vw - 192px));
      max-height: calc(100vh - 76px);
      transform: translateX(-50%);
      pointer-events: none;
    }

    .vertical-axis-panel__range {
      display: none;
      grid-column: 1 / -1;
      justify-self: center;
      min-width: 152px;
      margin-bottom: 20px;
      padding: 8px 30px;
      color: color-mix(in srgb, var(--period-nav), #ffffff 18%);
      font-family: Didot, "Bodoni 72", Georgia, var(--cn-font);
      font-size: 32.4px;
      font-weight: 560;
      line-height: 1.2;
      text-align: center;
      text-shadow: 0 0 18px color-mix(in srgb, var(--period-nav), transparent 48%);
    }

    .vertical-axis-detail {
      position: relative;
      min-height: 0;
      max-height: calc(100vh - 146px);
      padding: 22px 24px 24px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      color: rgba(245, 238, 222, 0.78);
      font-family: var(--cn-font);
      line-height: 1.45;
      pointer-events: auto;
      scrollbar-width: none;
    }

    .vertical-axis-detail::-webkit-scrollbar {
      display: none;
    }

    .vertical-axis-detail--world {
      text-align: right;
    }

    .vertical-axis-detail--china {
      text-align: left;
    }

    .vertical-axis-detail__title {
      margin-bottom: 16px;
      color: color-mix(in srgb, var(--period-nav), #ffffff 24%);
      font-size: 20px;
      font-weight: 680;
      letter-spacing: 0.08em;
      line-height: 1.25;
      text-shadow: 0 0 16px color-mix(in srgb, var(--period-nav), transparent 58%);
    }

    .vertical-axis-detail__list {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .vertical-axis-detail__item {
      position: relative;
      display: grid;
      gap: 4px;
      font-size: 18px;
      letter-spacing: 0.02em;
    }

    .vertical-axis-detail__date {
      display: block;
      color: color-mix(in srgb, var(--period-nav), #ffffff 12%);
      font-size: 19.2px;
      font-weight: 760;
      line-height: 1.15;
      letter-spacing: 0.05em;
    }

    .vertical-axis-detail__event {
      display: block;
      color: rgba(248, 244, 234, 0.72);
      font-weight: 520;
    }

    .vertical-axis-detail__summary {
      display: block;
      color: rgba(248, 244, 234, 0.48);
      font-size: 12.96px;
      font-weight: 420;
      line-height: 1.58;
      letter-spacing: 0.01em;
    }

    /* ── SHARED YEAR-ALIGNED TIMELINE ─────────────────────────────────
       Both World and China events share one vertical axis;
       vertical position is proportional to the actual year.
    ──────────────────────────────────────────────────────────────────── */

    .vertical-axis-panel--shared {
      display: flex;
      flex-direction: column;
      height: auto;
      max-height: none;
      overflow: visible;
    }

    .vat-track {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 0 clamp(16px, 2.4vw, 44px);
      overflow: visible;
      pointer-events: none;
    }

    .vat-track::-webkit-scrollbar { display: none; }

    .vat-spine {
      background: linear-gradient(
        to bottom,
        transparent,
        color-mix(in srgb, var(--period-nav), transparent 36%) 4%,
        color-mix(in srgb, var(--period-nav), transparent 20%) 50%,
        color-mix(in srgb, var(--period-nav), transparent 36%) 96%,
        transparent
      );
      box-shadow: 0 0 12px color-mix(in srgb, var(--period-nav), transparent 62%);
      cursor: pointer;
      pointer-events: auto;
    }

    .vat-col {
      position: relative;
    }

    .vat-item {
      position: absolute;
      z-index: 1;
      width: 100%;
      pointer-events: none;
    }

    .vat-item--world {
      text-align: right;
      padding-right: 14px;
    }

    .vat-item--china {
      text-align: left;
      padding-left: 14px;
    }

    .vat-filler {
      position: absolute;
      pointer-events: none;
      z-index: 0;
      padding-top: 20px;
    }
    .vat-filler--world { right: 14px; text-align: right; }
    .vat-filler--china { left: 14px; }
    .vat-filler img {
      display: block;
      width: clamp(108px, 63%, 270px);
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
      border-radius: 0;
      opacity: 0.60;
    }
    .vat-filler--world img { margin-left: auto; }
    .vat-filler--portrait img {
      width: clamp(82px, 42%, 180px);
      aspect-ratio: 3 / 4;
    }
    .vat-filler--natural img {
      aspect-ratio: var(--vat-filler-aspect);
      object-fit: contain;
    }

    .vat-item__filler {
      position: absolute;
      top: calc(100% + 12px);
      z-index: 0;
      display: block;
      width: clamp(108px, 63%, 270px);
      pointer-events: none;
    }
    .vat-item--world .vat-item__filler { right: 14px; }
    .vat-item--china .vat-item__filler { left: 14px; }
    .vat-item__filler img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      object-position: center;
      border-radius: 0;
      opacity: 0.60;
    }
    .vat-item__filler--portrait {
      width: clamp(82px, 42%, 180px);
    }
    .vat-item__filler--portrait img {
      aspect-ratio: 3 / 4;
    }
    .vat-item__filler--natural img {
      aspect-ratio: var(--vat-filler-aspect);
      object-fit: contain;
    }

    .vat-item__date {
      position: relative;
      z-index: 1;
      display: block;
      color: color-mix(in srgb, var(--period-nav), #ffffff 10%);
      font-size: 14px;
      font-weight: 760;
      letter-spacing: 0.05em;
      line-height: 1.2;
    }

    .vat-item__name {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 5px;
      color: rgba(248, 244, 234, 0.88);
      font-size: 19px;
      font-weight: 620;
      letter-spacing: 0.03em;
      line-height: 1.25;
    }

    .vat-item__summary {
      position: relative;
      z-index: 1;
      display: block;
      margin-top: 8px;
      color: rgba(248, 244, 234, 0.46);
      font-size: 12.5px;
      font-weight: 420;
      line-height: 1.55;
      letter-spacing: 0.01em;
    }

    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .bottom-nav {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    body.is-vertical-timeline .scroller {
      pointer-events: none;
    }


    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .atlas-dock {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    body.is-vertical-timeline.is-vertical-timeline-closing .bottom-nav,
    body.is-vertical-timeline.is-vertical-timeline-closing .atlas-dock,
    body.is-vertical-timeline.is-vertical-timeline-closing .content-type-tabs {
      z-index: 27;
      pointer-events: none;
    }

    @media (max-height: 780px) {
      .vertical-era {
        min-height: 620px;
      }

      .vertical-era__content {
        padding: 0;
      }

      .vertical-era .compare {
        min-height: 0;
      }
    }

    /* ── CONTENT TYPE TABS (right edge fixed) ── */
    .content-type-tabs {
      position: fixed;
      right: clamp(18px, 2vw, 34px);
      top: 50%;
      transform: translateY(calc(-50% - 60px));
      z-index: 33;
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 28px;
      padding: 8px;
      pointer-events: auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 54px rgba(0,0,0,.3);
      backdrop-filter: blur(10px);
    }
    .ctt-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 54px;
      height: 54px;
      padding: 0;
      background: none;
      border: 1px solid transparent;
      border-radius: 20px;
      cursor: pointer;
      color: rgba(255,255,255,.3);
      transition: color 0.22s ease, background 0.22s ease, border-color .22s ease;
    }
    .ctt-btn svg {
      width: 27px;
      height: 27px;
      stroke-width: 1.45;
      filter: drop-shadow(0 0 5px transparent);
      transition: filter .22s ease, transform .22s ease;
    }
    html[data-restoring-navigation] .ctt-btn,
    html[data-restoring-navigation] .ctt-btn svg,
    html[data-restoring-navigation] .ctt-dot {
      transition: none;
    }
    .ctt-btn.active {
      border-color: color-mix(in srgb, var(--period-nav), transparent 76%);
      background: color-mix(in srgb, var(--period-nav), transparent 91%);
      color: var(--period-nav);
    }
    .ctt-btn:hover:not(.active),
    .ctt-btn:focus-visible:not(.active) {
      color: rgba(255,255,255,.56);
      background: rgba(255,255,255,.04);
      border-color: rgba(255,255,255,.1);
      outline: none;
    }
    .ctt-btn:hover svg,
    .ctt-btn:focus-visible svg,
    .ctt-btn.active svg {
      filter: drop-shadow(0 0 7px color-mix(in srgb, var(--period-nav), transparent 55%));
      transform: scale(1.06);
    }
    .ctt-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0;
      transition: opacity 0.22s ease;
    }
    .ctt-btn.active .ctt-dot {
      opacity: 1;
    }
    .ctt-label {
      position: absolute;
      top: 50%;
      right: calc(100% + 14px);
      padding: 0;
      color: color-mix(in srgb, var(--period-nav), #fff 18%);
      background: none;
      font-family: var(--cn-font);
      font-size: 12px;
      letter-spacing: .18em;
      line-height: 1.15;
      writing-mode: vertical-rl;
      text-orientation: upright;
      white-space: nowrap;
      text-shadow: 0 2px 10px rgba(0,0,0,.75);
      opacity: 0;
      pointer-events: none;
      transform: translate(8px, -50%);
      transition: opacity .2s ease, transform .2s ease;
    }
    .ctt-btn:hover .ctt-label,
    .ctt-btn:focus-visible .ctt-label {
      opacity: 1;
      transform: translate(0, -50%);
    }
    body.is-vertical-timeline:not(.is-vertical-timeline-closing) .content-type-tabs {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    /* ── LEFT ATLAS DOCK ─────────────────────────────────── */
    /* ── PERMANENT SIDEBAR (Atlas Dock) ─────────────────────────── */
    .atlas-dock {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--dock-w);
      z-index: 95;
      display: flex;
      flex-direction: column;
      background: rgba(6, 6, 8, 0.86);
      border-right: 1px solid rgba(255,255,255,.06);
      -webkit-backdrop-filter: blur(24px) saturate(120%);
      backdrop-filter: blur(24px) saturate(120%);
      box-shadow: 4px 0 28px rgba(0,0,0,.44);
      pointer-events: auto;
      overflow: hidden;
    }

    html[data-restoring-navigation] .atlas-dock,
    html[data-restoring-navigation] .atlas-dock * {
      transition: none;
    }

    /* Brand placeholder (top 30%) */
    .atlas-dock__brand {
      flex: 0 0 auto;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 4vh 6px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .atlas-brand__cn {
      writing-mode: vertical-rl;
      font-family: var(--cn-font);
      font-size: 17.8px;
      font-weight: 500;
      letter-spacing: .2em;
      color: color-mix(in srgb, var(--period-nav), #fff 22%);
      white-space: nowrap;
      transition: color 360ms ease;
    }

    .atlas-brand__en {
      writing-mode: vertical-rl;
      font-family: "Cinzel", Georgia, serif;
      font-size: 8.9px;
      letter-spacing: .16em;
      color: color-mix(in srgb, var(--period-nav), transparent 74%);
      white-space: nowrap;
      text-transform: uppercase;
      transition: color 360ms ease;
    }

    /* Navigation section (middle, fills remaining space) */
    .atlas-dock__nav {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* nav items stick directly below brand, remaining space goes after */
    .atlas-dock__nav::before { content: ""; flex: 0; }
    .atlas-dock__nav::after  { content: ""; flex: 1; }

    .atlas-menu {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .atlas-menu__button {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      width: 100%;
      padding: 16px 4px;
      color: rgba(247,241,230,.46);
      background: transparent;
      cursor: pointer;
      font-family: var(--cn-font);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: .1em;
      text-align: center;
      transition: color 240ms ease, background 240ms ease;
    }

    .atlas-menu__button::before {
      content: "";
      position: absolute;
      inset: 0;
      right: 0;
      opacity: 0;
      background: color-mix(in srgb, var(--period-nav), transparent 88%);
      border-right: 2px solid color-mix(in srgb, var(--period-nav), transparent 20%);
      transition: opacity 240ms ease;
    }

    .atlas-menu__button > * { position: relative; z-index: 1; }
    .atlas-menu__button:hover,
    .atlas-menu__button[aria-current="page"] { color: color-mix(in srgb, var(--period-nav), #fff 22%); }
    .atlas-menu__button:hover::before,
    .atlas-menu__button[aria-current="page"]::before { opacity: 1; }

    /* City nav — blue theme */
    .atlas-menu__button[data-atlas-target="city"]:hover,
    .atlas-menu__button[data-atlas-target="city"][aria-current="page"] {
      color: rgba(148, 198, 240, 0.92);
    }
    .atlas-menu__button[data-atlas-target="city"]:hover::before,
    .atlas-menu__button[data-atlas-target="city"][aria-current="page"]::before {
      background: rgba(90, 155, 220, 0.09);
      border-right-color: rgba(120, 180, 232, 0.52);
    }

    /* Yearbook nav — gold theme */
    .atlas-menu__button[data-atlas-target="yearbook"]:hover,
    .atlas-menu__button[data-atlas-target="yearbook"][aria-current="page"] {
      color: rgba(220, 188, 118, 0.95);
    }
    .atlas-menu__button[data-atlas-target="yearbook"]:hover::before,
    .atlas-menu__button[data-atlas-target="yearbook"][aria-current="page"]::before {
      background: rgba(215, 175, 90, 0.10);
      border-right-color: rgba(215, 175, 90, 0.52);
    }

    /* City page — blue tint for brand + footer */
    .atlas-dock[data-page="city"] .atlas-brand__cn { color: rgba(140,192,238,.88); }
    .atlas-dock[data-page="city"] .atlas-brand__en { color: rgba(140,192,238,.28); }
    .atlas-dock[data-page="city"] .atlas-dock__day { color: rgba(140,192,238,.68); }
    .atlas-dock[data-page="city"] .atlas-dock__monthyear,
    .atlas-dock[data-page="city"] .atlas-dock__location-row { color: rgba(140,192,238,.38); }

    /* Yearbook page — gold tint for brand + footer */
    .atlas-dock[data-page="yearbook"] .atlas-brand__cn { color: rgba(218,185,112,.92); }
    .atlas-dock[data-page="yearbook"] .atlas-brand__en { color: rgba(218,185,112,.28); }
    .atlas-dock[data-page="yearbook"] .atlas-dock__day { color: rgba(218,185,112,.68); }
    .atlas-dock[data-page="yearbook"] .atlas-dock__monthyear,
    .atlas-dock[data-page="yearbook"] .atlas-dock__location-row { color: rgba(218,185,112,.38); }

    .atlas-menu__icon {
      width: 24px;
      height: 24px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Footer: date + location */
    .atlas-dock__footer {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      padding: calc(14px + 2vh) 6px calc(20px + 2vh);
      border-top: 1px solid rgba(255,255,255,.05);
    }

    .atlas-dock__date-block {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .atlas-dock__day {
      font-family: "Cinzel", "Playfair Display SC", Georgia, serif;
      font-size: clamp(22px, 1.8vw, 30px);
      font-weight: 400;
      line-height: 1;
      color: color-mix(in srgb, var(--period-nav), #fff 40%);
      letter-spacing: .04em;
      transition: color 360ms ease;
    }

    .atlas-dock__monthyear {
      font-family: var(--cn-font);
      font-size: 9px;
      letter-spacing: .1em;
      color: color-mix(in srgb, var(--period-nav), #fff 12%);
      white-space: nowrap;
      transition: color 360ms ease;
    }

    .atlas-dock__location-row {
      display: flex;
      align-items: center;
      gap: 3px;
      font-family: var(--cn-font);
      font-size: 9px;
      letter-spacing: .06em;
      color: color-mix(in srgb, var(--period-nav), #fff 12%);
      transition: color 360ms ease;
      max-width: 100%;
      overflow: hidden;
    }

    .atlas-dock__pin {
      width: 11px;
      height: 11px;
      flex: none;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .7;
    }

    body.is-experience-open .content-type-tabs {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* ── NEW FULL-SCREEN EXPERIENCES ─────────────────────── */
    .experience-view {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: var(--dock-w);
      z-index: 90;
      overflow: hidden;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      background: #03070d;
      transition: opacity 440ms ease, visibility 0s linear 440ms;
    }

    /* SVG presentation attrs (e.g. pointer-events="all") can override inherited
       CSS pointer-events:none. !important on :not(.is-open) * ensures every
       hidden overlay — regardless of its internal SVG attrs — never intercepts
       clicks on underlying content. Apply this pattern to ALL fixed overlays. */
    .experience-view:not(.is-open) *,
    .vertical-timeline-view:not(.is-open) *,
    .movie-detail:not(.is-open) * {
      pointer-events: none !important;
    }

    .experience-view.is-open {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
    }

    .experience-close {
      position: absolute;
      top: clamp(20px, 3.2vh, 38px);
      right: clamp(20px, 2.7vw, 48px);
      z-index: 12;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 50%;
      color: rgba(255,255,255,.72);
      background: rgba(3,6,10,.38);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px);
      cursor: pointer;
      transition: color 220ms ease, border-color 220ms ease, transform 300ms ease;
    }

    .experience-close:hover { color: #fff; border-color: currentColor; transform: rotate(90deg); }
    .experience-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.2; }

    .city-view {
      color: #c7d3df;
      isolation: isolate;
      background: #000;
    }

    .city-view::before {
      content: none;
    }

    .city-view::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      opacity: .45;
      pointer-events: none;
      background:
        radial-gradient(ellipse at center, transparent 49%, rgba(0,2,5,.64) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E");
    }

    .atmosphere-background {
      position: absolute;
      inset: 0;
      z-index: 1;
      opacity: .9;
      background-color: transparent;
      pointer-events: none;
    }

    .atmosphere-background::before,
    .atmosphere-background::after {
      content: "";
      position: absolute;
      inset: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transition: opacity 360ms cubic-bezier(.3,0,.3,1);
    }

    .atmosphere-background::before {
      opacity: 1;
      background-image: url("assets/backgrounds/city-cinema/city-memory-bg-v2.png");
      background-position: center 36%;
      background-size: 108% auto;
      transform: scale(1.04);
      transform-origin: center 36%;
    }

    .atmosphere-background::after {
      opacity: 0;
      background-image:
        linear-gradient(rgba(1,7,14,.22), rgba(1,6,12,.38)),
        url("assets/backgrounds/city-cinema/heilongjiang-province-bg-v1.png");
    }

    .city-view.is-heilongjiang .atmosphere-background::before {
      opacity: 0;
    }

    .city-view.is-heilongjiang .atmosphere-background::after {
      opacity: .82;
    }

    .city-film-archive {
      display: none;
    }

    .city-province-info {
      position: absolute;
      top: clamp(132px, 17vh, 188px);
      left: clamp(28px, 3vw, 58px);
      z-index: 4;
      width: min(19.4vw, 304px);
      color: rgba(205,218,226,.76);
      text-align: left;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translate3d(-12px, 0, 0);
      transition: opacity 190ms cubic-bezier(.22,1,.36,1), transform 190ms cubic-bezier(.22,1,.36,1), visibility 0s linear 190ms;
    }

    .city-view.is-province-detail .city-province-info {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(0, 0, 0);
      transition-delay: 260ms, 260ms, 0s;
    }

    .city-view.is-province-detail:not(.is-china-copy-in) .city-tl-head {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none;
    }

    .city-view.is-province-detail:not(.is-china-copy-in) .city-locate-hint {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: none;
    }

    .city-province-info__back {
      margin: 0 0 clamp(15px, 2vh, 22px);
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(181,202,215,.58);
      font-family: var(--cn-font);
      font-size: 11px;
      letter-spacing: .16em;
      cursor: pointer;
      transition: color 160ms cubic-bezier(.22,1,.36,1);
    }

    .city-province-info__back:hover,
    .city-province-info__back:focus-visible {
      color: rgba(225,236,241,.92);
      outline: none;
    }

    .city-view.is-map-transitioning .city-province-info__back {
      pointer-events: none;
    }

    .city-province-info__heading h3 {
      margin: 0;
      color: rgba(226,229,220,.9);
      font-family: var(--cn-font);
      font-size: clamp(31px, 2.45vw, 46px);
      font-weight: 400;
      letter-spacing: .11em;
      line-height: 1.08;
      white-space: nowrap;
      text-shadow: 0 0 18px rgba(153,185,205,.12);
    }

    .city-province-info__heading h3.is-long-title {
      font-size: clamp(26px, 1.8vw, 34px);
      letter-spacing: .05em;
    }

    .city-province-info__heading p {
      margin: 7px 0 0;
      color: rgba(188,202,209,.66);
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(12px, .88vw, 15px);
      letter-spacing: .2em;
    }

    .city-province-info__keywords {
      margin: clamp(20px, 2.5vh, 28px) 0 0;
      color: rgba(202,216,222,.78);
      font-family: var(--cn-font);
      font-size: clamp(12px, .88vw, 15px);
      letter-spacing: .09em;
      line-height: 1.8;
    }

    .city-province-info__intro {
      margin: clamp(15px, 2vh, 22px) 0 0;
      color: rgba(168,185,196,.58);
      font-family: var(--cn-font);
      font-size: clamp(11px, .78vw, 13px);
      letter-spacing: .055em;
      line-height: 2;
    }

    .city-province-info__features {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(8px, .8vw, 13px);
      margin-top: clamp(20px, 3vh, 32px);
    }

    .city-province-feature {
      display: grid;
      justify-items: center;
      gap: 8px;
      color: rgba(183,201,211,.66);
      font-family: var(--cn-font);
      font-size: clamp(9px, .64vw, 11px);
      letter-spacing: .04em;
      white-space: nowrap;
    }

    .city-province-feature svg {
      width: clamp(24px, 1.7vw, 30px);
      height: clamp(24px, 1.7vw, 30px);
      fill: none;
      stroke: rgba(190,209,219,.7);
      stroke-width: 1.25;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 5px rgba(133,175,200,.08));
    }

    .city-map-debug-stage {
      position: absolute;
      inset: 0 32% 0 0;
      z-index: 3;
      box-sizing: border-box;
      overflow: hidden;
      border: 0;
      outline: 0;
      box-shadow: none;
      background: transparent;
    }

    .city-map-glass {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: rgba(7,9,10,.035);
      -webkit-backdrop-filter: blur(2.4px) saturate(.76) contrast(.9);
      backdrop-filter: blur(2.4px) saturate(.76) contrast(.9);
      will-change: clip-path;
    }

    .city-map-layer {
      position: absolute;
      inset: 0;
      transform-origin: center;
    }

    .city-map-layer--china {
      z-index: 1;
      opacity: 1;
      pointer-events: auto;
    }

    .city-map-layer--heilongjiang,
    .city-map-layer--inner-mongolia,
    .city-map-layer--xinjiang {
      z-index: 2;
      opacity: 0;
      pointer-events: none;
    }

    .city-view.is-heilongjiang-detail .city-map-layer--china,
    .city-view.is-inner-mongolia-detail .city-map-layer--china,
    .city-view.is-xinjiang-detail .city-map-layer--china {
      opacity: 0;
      pointer-events: none;
    }

    .city-view.is-heilongjiang-detail .city-map-layer--heilongjiang,
    .city-view.is-inner-mongolia-detail .city-map-layer--inner-mongolia,
    .city-view.is-xinjiang-detail .city-map-layer--xinjiang {
      opacity: 1;
      pointer-events: auto;
    }

    .city-view.is-map-transitioning .city-map-layer {
      pointer-events: none;
      will-change: opacity, transform;
    }

    .city-map-layer[aria-hidden="true"],
    .city-map-layer[aria-hidden="true"] *,
    .city-view.is-map-transitioning .city-map-layer *,
    .city-map-transition-layer,
    .city-map-transition-layer * {
      pointer-events: none !important;
    }

    .city-province-map {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 0;
      outline: 0;
      box-shadow: none;
      background: transparent;
    }

    .city-map-transition-layer {
      position: absolute;
      inset: 0;
      z-index: 3;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      will-change: transform, opacity;
    }

    .city-map-transition-layer .city-province {
      stroke-width: .5;
      filter: none;
    }

    .city-map-transition-layer .city-province-map__outline {
      stroke-width: .58;
      filter: none;
    }

    .city-view.is-map-transitioning .city-province-map:not(.city-map-transition-layer) {
      pointer-events: none;
    }

    .city-map-layer--heilongjiang .city-province-map__regions,
    .city-map-layer--heilongjiang .city-province-map__cities,
    .city-map-layer--inner-mongolia .city-province-map__regions,
    .city-map-layer--inner-mongolia .city-province-map__cities,
    .city-map-layer--xinjiang .city-province-map__regions,
    .city-map-layer--xinjiang .city-province-map__cities {
      opacity: 1;
    }

    .city-view.is-map-drilling-out .city-province-info {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: none;
    }

    .city-view.is-map-drilling-out:not(.is-china-copy-in) .city-tl-head,
    .city-view.is-map-drilling-out:not(.is-china-copy-in) .city-locate-hint:not([hidden]) {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: none !important;
    }

    .city-view.is-china-copy-in .city-tl-head,
    .city-view.is-china-copy-in .city-locate-hint:not([hidden]) {
      opacity: 1;
      visibility: visible;
      transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      .city-view.is-china-copy-in .city-tl-head,
      .city-view.is-china-copy-in .city-locate-hint:not([hidden]) {
        transition: none;
      }
    }

    .city-view.is-inner-mongolia-transition .city-province-info {
      opacity: 0;
      visibility: hidden;
      transform: translate3d(-12px, 0, 0);
      transition-delay: 0s, 0s, 0s;
    }

    .city-view.is-xinjiang-transition:not(.is-xinjiang-info-in) .city-province-info,
    .city-view.is-province-zoom-transition:not(.is-province-info-in) .city-province-info {
      opacity: 0;
      visibility: hidden;
      transform: translate3d(-12px, 0, 0);
      transition-delay: 0s, 0s, 0s;
    }

    .city-view.is-inner-mongolia-detail .city-province-info {
      transition-delay: 0s, 0s, 0s;
    }

    .city-view.is-xinjiang-info-in .city-province-info,
    .city-view.is-province-info-in .city-province-info,
    .city-view.is-xinjiang-detail .city-province-info {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translate3d(0, 0, 0);
      transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s, transform 0s;
    }

    @media (prefers-reduced-motion: reduce) {
      .city-view.is-xinjiang-info-in .city-province-info,
      .city-view.is-province-info-in .city-province-info,
      .city-view.is-xinjiang-detail .city-province-info {
        transition: none;
      }
    }

    .city-view.is-map-drilling-out .city-map-layer--china .city-province-map__cities,
    .city-view.is-map-drilling-out .city-map-layer--china .city-province-map__routes,
    .city-view.is-map-drilling-in .city-map-layer--china .city-province-map__cities,
    .city-view.is-map-drilling-in .city-map-layer--china .city-province-map__routes {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .city-view.is-province-zoom-transition.is-map-drilling-in .city-map-layer--china .city-province-map__cities {
      opacity: 1 !important;
      visibility: visible !important;
    }

    .city-view.is-xinjiang-transition .city-map-layer--china .city-province-map__cities,
    .city-view.is-xinjiang-transition .city-map-layer--china .city-province-map__routes,
    .city-view.is-xinjiang-transition .city-pins,
    .city-view.is-map-drilling-out .city-pins {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    .city-view.is-map-drilling-in .city-map-transition-layer .city-province:not(.is-selected),
    .city-view.is-map-drilling-in .city-map-transition-layer .city-map-route,
    .city-view.is-map-drilling-in .city-map-transition-layer .city-test-point:not(.is-associated) {
      opacity: .16;
    }

    .city-view.is-map-drilling-in .city-map-transition-layer .city-province.is-selected {
      fill: rgba(51,66,76,.72);
      stroke: rgba(185,211,228,.68);
      stroke-width: .72;
      filter: none;
    }

    .city-province-map__mask {
      fill: rgba(3,6,8,.07);
      stroke: none;
      pointer-events: none;
    }

    .city-province-map__edge-shade {
      fill: #fff;
      stroke: none;
      pointer-events: none;
      opacity: .72;
      filter: url("#cityMapInnerShade");
    }

    .city-province-map__outline {
      fill: none;
      stroke: rgba(137,153,163,.68);
      stroke-width: 1.35;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
      filter: drop-shadow(0 0 1.5px rgba(112,135,148,.12));
    }

    .city-province {
      fill: rgba(15,20,23,.34);
      stroke: rgba(108,124,134,.54);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      pointer-events: all;
      cursor: pointer;
      transition:
        fill 400ms ease,
        stroke 400ms ease,
        stroke-width 400ms ease,
        opacity 400ms ease,
        filter 400ms ease;
    }

    .city-map-route {
      fill: none;
      stroke: rgba(190,161,111,.08);
      stroke-width: .9;
      vector-effect: non-scaling-stroke;
      pointer-events: none;
    }

    .city-map-route.is-secondary {
      stroke: rgba(181,157,116,.055);
      stroke-width: .72;
    }

    .city-hainan-inset {
      color: rgba(171,198,214,.72);
      font-family: var(--cn-font);
      pointer-events: none;
    }

    .city-hainan-inset__frame {
      fill: rgba(8,16,22,.22);
      stroke: rgba(154,188,207,.17);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
    }

    .city-hainan-inset__title {
      fill: rgba(191,210,220,.62);
      font-size: 10px;
      letter-spacing: .16em;
      text-anchor: middle;
    }

    .city-hainan-inset__link {
      fill: none;
      stroke: rgba(154,188,207,.14);
      stroke-width: .7;
      stroke-dasharray: 3 8;
      vector-effect: non-scaling-stroke;
    }

    .city-hainan-inset__shape {
      fill: rgba(38,61,75,.56);
      stroke: rgba(171,202,219,.62);
      stroke-width: .9;
      vector-effect: non-scaling-stroke;
      pointer-events: all;
      cursor: pointer;
      outline: none;
      transition: fill .24s ease, stroke .24s ease, filter .24s ease;
    }

    .city-hainan-inset__shape:hover,
    .city-hainan-inset__shape:focus-visible,
    .city-hainan-inset__shape.is-selected {
      fill: rgba(73,103,120,.72);
      stroke: rgba(210,229,239,.9);
      filter: drop-shadow(0 0 4px rgba(137,198,230,.34));
    }

    .city-view.is-map-debug-mode .city-film-archive,
    .city-view.is-map-debug-mode .city-pins,
    .city-view.is-map-debug-mode .city-switcher {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .city-view.is-map-transitioning .city-test-point {
      transition: none;
    }

    .city-test-point {
      pointer-events: none;
      transition: opacity 400ms ease;
    }

    .city-test-point__dot {
      fill: #f8fcff;
      stroke: #9fd5ff;
      stroke-width: 1.25;
      vector-effect: non-scaling-stroke;
      pointer-events: all;
      cursor: pointer;
      filter: drop-shadow(0 0 2px rgba(132,202,255,.68));
      transition: fill 400ms ease, stroke 400ms ease, r 400ms ease, filter 400ms ease;
    }

    .city-test-point__halo {
      fill: rgba(116,190,245,.18);
      filter: blur(2px);
      pointer-events: all;
      cursor: pointer;
    }

    .city-test-point__scatter {
      fill: rgba(116,190,245,.08);
      filter: blur(3.5px);
      pointer-events: none;
    }

    .city-test-point text {
      font-family: var(--cn-font);
      letter-spacing: 0;
      pointer-events: all;
      cursor: pointer;
    }

    .city-test-point__label-bg {
      fill: rgba(12,22,38,.68);
      stroke: rgba(130,170,200,.08);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.32));
      pointer-events: all;
      cursor: pointer;
      transition: fill 400ms ease, stroke 400ms ease, filter 400ms ease;
    }

    .city-test-point__name {
      dominant-baseline: auto;
    }

    .city-test-point__city {
      fill: rgba(232,240,247,.96);
      font-size: 11.3px;
      font-weight: 600;
      transition: fill 400ms ease;
    }

    .city-test-point__province {
      fill: rgba(157,177,193,.68);
      font-size: 9.5px;
      font-weight: 400;
      transition: fill 400ms ease;
    }

    .city-province.is-hovered {
      fill: rgba(28,36,40,.42);
      stroke: rgba(138,154,164,.72);
      stroke-width: 1.15;
    }

    .city-province.is-selected {
      fill: rgba(42,51,56,.58);
      stroke: rgba(158,172,181,.84);
      stroke-width: 1.35;
      opacity: 1;
      filter: drop-shadow(0 0 2px rgba(103,119,128,.16));
    }

    .city-province.is-dimmed {
      fill: rgba(13,18,21,.32);
      stroke: rgba(91,105,114,.46);
      opacity: 1;
    }

    .city-prefecture {
      fill: rgba(12,24,32,.46);
      stroke: rgba(100,127,145,.5);
      stroke-width: .82;
      vector-effect: non-scaling-stroke;
      outline: none;
      pointer-events: all;
      cursor: pointer;
      transition: fill 220ms ease, stroke 220ms ease, filter 220ms ease;
    }

    .city-prefecture-point {
      outline: none;
      pointer-events: none;
    }

    .city-prefecture-point > * {
      pointer-events: all;
      cursor: pointer;
    }

    .city-prefecture:hover,
    .city-prefecture:focus-visible,
    .city-prefecture.is-hovered,
    .city-prefecture.is-selected {
      fill: rgba(30,50,63,.62);
      stroke: rgba(172,203,220,.82);
      outline: none;
      filter: drop-shadow(0 0 3px rgba(133,183,211,.24));
    }

    .city-prefecture-point__halo {
      fill: rgba(166,195,214,.14);
      filter: blur(2px);
    }

    .city-prefecture-point__dot {
      fill: rgba(177,202,218,.74);
      stroke: rgba(218,232,240,.72);
      stroke-width: 1;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 0 2px rgba(143,193,226,.38));
    }

    .city-prefecture-point__name {
      fill: rgba(174,191,202,.56);
      font-family: var(--cn-font);
      font-size: 11.5px;
      font-weight: 500;
      letter-spacing: .04em;
      paint-order: stroke;
      stroke: rgba(4,10,15,.9);
      stroke-width: 3px;
      stroke-linejoin: round;
    }

    .city-prefecture-point__seat {
      fill: rgba(168,206,224,.82);
      font-weight: 600;
      letter-spacing: .06em;
    }

    .city-prefecture-point.is-capital .city-prefecture-point__name {
      fill: rgba(224,236,242,.9);
      font-size: 12.6px;
      font-weight: 600;
      stroke: rgba(2,8,14,.96);
      stroke-width: 4.5px;
      filter: drop-shadow(0 0 6px rgba(156,194,216,.34));
    }

    .city-prefecture-point.is-capital .city-prefecture-point__seat {
      fill: rgba(176,214,232,.96);
    }

    .city-view.is-province-detail .city-prefecture-point:not(.is-capital):not(.is-selected):not(.is-hovered) .city-prefecture-point__name {
      opacity: .56;
    }

    .city-view.is-province-detail .city-map-layer--heilongjiang .city-province-map__outline,
    .city-view.is-province-detail .city-map-layer--inner-mongolia .city-province-map__outline,
    .city-view.is-province-detail .city-map-layer--xinjiang .city-province-map__outline,
    .city-view.is-province-detail:not(.is-heilongjiang-detail):not(.is-inner-mongolia-detail):not(.is-xinjiang-detail):not(.is-map-drilling-in) .city-map-layer--china .city-province-map__outline {
      stroke: rgba(196,218,230,.9);
      stroke-width: 1.55;
      filter: drop-shadow(0 0 4px rgba(156,194,216,.24));
    }

    .city-prefecture-point__ring {
      fill: none;
      stroke: rgba(205,222,228,.24);
      stroke-width: .8;
      vector-effect: non-scaling-stroke;
      transform-box: fill-box;
      transform-origin: center;
      animation: cityPrefectureRing 4.8s ease-out infinite;
    }

    .city-prefecture-point__ring--middle {
      stroke-opacity: .72;
      animation-delay: -1.6s;
    }

    .city-prefecture-point__ring--outer {
      stroke-opacity: .46;
      animation-delay: -3.2s;
    }

    .city-prefecture-point:not(.is-selected) .city-prefecture-point__ring {
      display: none;
    }

    .city-prefecture-point:focus-visible {
      outline: none;
    }

    .city-prefecture-point:focus-visible .city-prefecture-point__dot {
      fill: rgba(239,243,239,.96);
      stroke: rgba(215,230,236,.94);
      filter: drop-shadow(0 0 5px rgba(194,218,229,.72));
    }

    .city-prefecture-point.is-hovered .city-prefecture-point__dot {
      fill: rgba(239,243,239,.96);
      stroke: rgba(215,230,236,.94);
      filter: drop-shadow(0 0 5px rgba(194,218,229,.72));
    }

    .city-prefecture-point:focus-visible .city-prefecture-point__name {
      fill: rgba(235,239,234,.94);
    }

    .city-prefecture-point.is-hovered .city-prefecture-point__name {
      fill: rgba(235,239,234,.94);
    }

    .city-prefecture-point.is-selected .city-prefecture-point__halo {
      fill: rgba(205,220,226,.22);
      filter: blur(2.6px);
    }

    .city-prefecture-point.is-selected .city-prefecture-point__dot {
      fill: rgba(239,243,239,.96);
      stroke: rgba(215,230,236,.94);
      filter: drop-shadow(0 0 5px rgba(194,218,229,.72));
    }

    .city-prefecture-point.is-selected .city-prefecture-point__name {
      fill: rgba(235,239,234,.94);
      font-size: 13.2px;
      font-weight: 600;
      stroke-width: 3.5px;
      filter: drop-shadow(0 0 4px rgba(190,215,225,.24));
    }

    .city-prefecture-point.is-capital.is-selected .city-prefecture-point__name {
      font-size: 13.8px;
      stroke-width: 5px;
    }

    .city-prefecture-point.is-capital.is-selected .city-prefecture-point__seat {
      fill: rgba(188,220,236,1);
    }

    @keyframes cityPrefectureRing {
      0% { opacity: .78; transform: scale(.72); }
      72%, 100% { opacity: 0; transform: scale(1.14); }
    }

    .city-test-point.is-dimmed {
      opacity: .2;
    }

    .city-test-point.is-associated {
      opacity: 1;
    }

    .city-test-point.is-associated .city-test-point__dot {
      r: 3.4px;
      fill: #f8fcff;
      stroke: #8fd0ff;
      filter: drop-shadow(0 0 4px rgba(120, 197, 255, 0.78));
    }

    .city-test-point.is-hub .city-test-point__dot {
      fill: #f6fbff;
      stroke: #86cbff;
      filter: drop-shadow(0 0 4px rgba(112, 190, 255, 0.66));
    }

    .city-test-point.is-associated .city-test-point__city {
      fill: #f2f9ff;
    }

    .city-test-point.is-associated .city-test-point__province {
      fill: rgba(156, 206, 247, 0.88);
    }

    .city-test-point.is-located.is-associated:not(.is-active) .city-test-point__dot {
      r: 3.5px;
      fill: #f8fcff;
      stroke: #8ed1ff;
      filter: drop-shadow(0 0 5px rgba(122, 199, 255, 0.84));
    }

    .city-test-point.is-located:not(.is-active) .city-test-point__label-bg {
      fill: rgba(8, 30, 52, 0.82);
      stroke: rgba(113, 193, 247, 0.34);
      filter: drop-shadow(0 3px 10px rgba(50, 132, 194, 0.3));
    }

    .city-test-point.is-located:not(.is-active) .city-test-point__city {
      fill: #c8eaff;
    }

    .city-test-point.is-located:not(.is-active) .city-test-point__province {
      fill: rgba(147, 207, 247, 0.82);
    }

    .city-test-point.is-hovered {
      opacity: 1;
    }

    .city-test-point.is-hovered .city-test-point__dot {
      r: 3.2px;
      fill: #fbfdff;
      stroke: #b6e2ff;
      filter: drop-shadow(0 0 5px rgba(144, 212, 255, 0.9));
    }

    .city-test-point.is-hovered .city-test-point__label-bg {
      fill: rgba(18, 31, 50, 0.84);
      stroke: rgba(152, 205, 241, 0.22);
      filter: drop-shadow(0 3px 8px rgba(32, 80, 124, 0.36));
    }

    .city-test-point.is-hovered .city-test-point__city {
      fill: rgba(244, 250, 255, 0.98);
    }

    .city-test-point.is-hovered .city-test-point__province {
      fill: rgba(176, 220, 250, 0.94);
    }

    .city-test-point.is-located .city-test-point__halo {
      fill: rgba(139,202,247,.28);
    }

    .city-test-point.is-located.is-dimmed {
      opacity: .55;
    }

    .city-test-point.is-located .city-test-point__dot {
      r: 3.15px;
      fill: #fbfdff;
      stroke: #a9dcff;
      filter: drop-shadow(0 0 5px rgba(130,202,255,.88));
    }

    .city-test-point.is-active .city-test-point__dot {
      r: 3.7px;
      fill: #f4fbff;
      stroke: #72c4ff;
      filter: drop-shadow(0 0 6px rgba(104,190,255,.86));
    }

    .city-test-point.is-active .city-test-point__label-bg {
      fill: rgba(8,30,52,.82);
      stroke: rgba(113,193,247,.34);
      filter: drop-shadow(0 3px 10px rgba(50,132,194,.3));
    }

    .city-test-point.is-active .city-test-point__city {
      fill: #c8eaff;
    }

    .city-test-point.is-active .city-test-point__province {
      fill: rgba(147,207,247,.82);
    }

    .city-film-strip {
      position: absolute;
      width: 34vw;
      height: 82px;
      border-block: 1px solid rgba(228,204,163,.10);
      opacity: .18;
      filter: blur(.2px);
      background:
        repeating-linear-gradient(90deg, transparent 0 26px, rgba(235,214,176,.28) 26px 31px, transparent 31px 57px),
        repeating-linear-gradient(90deg, rgba(235,214,176,.18) 0 3px, transparent 3px 38px),
        linear-gradient(90deg, transparent, rgba(221,198,158,.18), transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
      mask-image: linear-gradient(90deg, transparent, black 16%, black 84%, transparent);
    }

    .city-film-strip--top { top: 5vh; left: 42vw; transform: rotate(8deg); }
    .city-film-strip--bottom { bottom: 5vh; left: 5vw; transform: rotate(-11deg); opacity: .12; }

    .city-projector-beam {
      position: absolute;
      width: 46vw;
      height: 18vh;
      opacity: .16;
      filter: blur(10px);
      background: linear-gradient(90deg, rgba(252,207,127,.34), rgba(113,154,194,.12) 54%, transparent);
      transform-origin: left center;
      mix-blend-mode: screen;
    }

    .city-projector-beam--north { left: 14vw; top: 21vh; transform: rotate(14deg); }
    .city-projector-beam--south { left: 23vw; top: 66vh; transform: rotate(-18deg); opacity: .11; }

    .city-archive-poster {
      position: absolute;
      width: clamp(28px, 3.1vw, 46px);
      aspect-ratio: 2/3;
      border: 1px solid rgba(233,210,169,.18);
      border-radius: 3px;
      opacity: .22;
      box-shadow: 0 0 20px rgba(221,176,104,.10), inset 0 0 18px rgba(0,0,0,.42);
      background:
        linear-gradient(to bottom, rgba(241,222,186,.20), transparent 30%),
        radial-gradient(circle at 50% 72%, rgba(235,178,91,.28), transparent 28%),
        linear-gradient(145deg, rgba(34,55,76,.82), rgba(7,13,22,.88));
    }

    .city-archive-poster--west { left: 22%; top: 49%; transform: rotate(-5deg); }
    .city-archive-poster--central { left: 43%; top: 47%; transform: rotate(4deg); opacity: .16; }
    .city-archive-poster--east { left: 55%; top: 37%; transform: rotate(7deg); }
    .city-archive-poster--south { left: 39%; top: 73%; transform: rotate(-8deg); opacity: .18; }

    .city-ticket-ghost {
      position: absolute;
      width: clamp(78px, 9vw, 138px);
      height: clamp(24px, 2.8vw, 42px);
      border: 1px solid rgba(228,204,164,.12);
      border-radius: 4px;
      opacity: .13;
      transform: rotate(-16deg);
      background:
        radial-gradient(circle at 12% 50%, transparent 0 7px, rgba(218,196,160,.18) 7.5px 8.5px, transparent 9px),
        radial-gradient(circle at 88% 50%, transparent 0 7px, rgba(218,196,160,.18) 7.5px 8.5px, transparent 9px),
        repeating-linear-gradient(90deg, transparent 0 12px, rgba(234,214,178,.12) 12px 13px, transparent 13px 25px),
        rgba(218,196,160,.08);
    }

    .city-ticket-ghost--one { left: 7%; top: 26%; }
    .city-ticket-ghost--two { left: 48%; top: 70%; transform: rotate(10deg); opacity: .10; }

    .city-light-routes {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: .38;
      filter: drop-shadow(0 0 7px rgba(231,181,96,.28));
      mix-blend-mode: screen;
    }

    .city-light-routes path {
      fill: none;
      stroke: rgba(231,181,96,.40);
      stroke-width: .085;
      stroke-linecap: round;
      stroke-dasharray: .55 1.65;
    }

    .city-light-routes .cool {
      stroke: rgba(149,194,237,.28);
      stroke-dasharray: none;
      stroke-width: .06;
    }

    .city-map-copy {
      position: absolute;
      top: clamp(56px, 8vh, 96px);
      left: clamp(26px, 3.4vw, 66px);
      z-index: 2;
    }

    .city-map-copy h1 {
      margin: 0;
      color: rgba(232,243,255,.92);
      text-shadow: 0 0 8px rgba(126,171,214,.18), 0 0 20px rgba(92,138,183,.12);
      font-family: var(--cn-font);
      font-size: clamp(36px, 4vw, 72px);
      font-weight: 400;
      letter-spacing: .12em;
    }

    .city-map-copy p { margin: 11px 0 0; color: rgba(184,201,220,.35); font-size: clamp(13px, 1vw, 18px); letter-spacing: .26em; }

    .city-pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
    .city-pin {
      position: absolute;
      display: grid;
      grid-template-columns: 11px auto;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
      color: rgba(209,224,240,.70);
      font-family: var(--cn-font);
      font-size: 11px;
      letter-spacing: .1em;
      pointer-events: auto;
      cursor: pointer;
      left: var(--x);
      top: var(--y);
      transform: translate(-50%, -50%);
    }
    .city-pin::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 50%;
      width: 38px;
      height: 14px;
      border-radius: 50%;
      opacity: .20;
      background: radial-gradient(ellipse, rgba(151,197,241,.48), transparent 70%);
      transform: translate(-50%, -50%) rotate(-12deg);
      pointer-events: none;
      transition: opacity 220ms ease, width 220ms ease, height 220ms ease, background 220ms ease;
    }
    .city-pin::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition: opacity 220ms ease, width 220ms ease, height 220ms ease;
    }
    .city-pin i {
      position: relative;
      z-index: 1;
      width: 6px;
      height: 6px;
      border: 1px solid rgba(179,215,255,.74);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(90,154,230,.09), 0 0 15px rgba(119,180,246,.58);
      background: radial-gradient(circle, #eef7ff 0 34%, #8ec8ff 62%, rgba(100,167,240,.10) 100%);
      transition: width 220ms ease, height 220ms ease, box-shadow 220ms ease, background 220ms ease, border-color 220ms ease;
    }
    .city-pin span {
      width: max-content;
      padding: 3px 6px;
      border: 1px solid rgba(168,203,237,.07);
      border-radius: 999px;
      background: rgba(4,12,24,.32);
      pointer-events: none;
      line-height: 1.4;
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
    }
    .city-pin span small {
      color: rgba(181,205,230,.48);
      font-size: 0.82em;
      letter-spacing: .06em;
    }
    .city-pin.is-located:not(.is-active) i {
      width: 7px;
      height: 7px;
      border-color: rgba(190,222,255,.88);
      box-shadow: 0 0 0 4px rgba(90,154,230,.12), 0 0 20px rgba(119,180,246,.78);
    }
    .city-pin.is-located:not(.is-active)::before {
      width: 50px;
      height: 20px;
      opacity: .34;
      background: radial-gradient(ellipse, rgba(151,197,241,.58), transparent 72%);
    }
    .city-pin.is-active span { color: #f6d58e; border-color: rgba(244,199,118,.30); background: rgba(37,24,7,.58); box-shadow: 0 0 20px rgba(223,164,72,.10); }
    .city-pin.is-active span small { color: rgba(240,197,106,.58); }
    .city-pin.is-active { z-index: 4; }
    .city-pin.is-active::before {
      width: 118px;
      height: 48px;
      opacity: .84;
      background: radial-gradient(ellipse, rgba(255,219,151,.62), rgba(221,156,64,.22) 42%, transparent 74%);
    }
    .city-pin.is-active::after {
      width: 42px;
      height: 42px;
      opacity: .88;
      background:
        radial-gradient(circle, rgba(255,243,204,.95) 0 5%, rgba(255,207,116,.42) 18%, rgba(221,151,55,.18) 42%, transparent 72%);
      box-shadow: 0 0 32px rgba(255,207,116,.48), 0 0 86px rgba(224,165,74,.26);
    }
    .city-pin.is-active i {
      width: 9px;
      height: 9px;
      border-color: rgba(230,197,133,.72);
      background: radial-gradient(circle, #fff8df 0 24%, #dcb878 48%, rgba(184,138,71,.22) 76%, transparent 100%);
      box-shadow: 0 0 0 4px rgba(198,158,91,.09), 0 0 18px rgba(231,202,149,.42), 0 0 48px rgba(171,127,64,.16);
    }

    /* Quiet city-cinema ambience: fog, side light and sparse film dust. */
    .city-haze-layer,
    .city-projector-wash,
    .city-dust-layer {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .city-haze-layer {
      z-index: 3;
      mix-blend-mode: screen;
    }

    .city-haze-layer::after {
      content: "";
      position: absolute;
      right: -12%;
      bottom: -7%;
      width: 78%;
      height: 42%;
      opacity: .18;
      filter: blur(21px);
      background:
        radial-gradient(ellipse 38% 20% at 28% 58%, rgba(147,171,191,.42), rgba(76,105,131,.16) 58%, transparent 76%),
        radial-gradient(ellipse 46% 24% at 70% 46%, rgba(116,145,168,.34), rgba(65,91,117,.12) 56%, transparent 78%);
      animation: cityHazeRibbon 16s cubic-bezier(.45,.05,.55,.95) infinite alternate;
      animation-play-state: paused;
      will-change: transform;
    }

    .city-haze {
      position: absolute;
      border-radius: 50%;
      opacity: .17;
      filter: blur(27px);
      background:
        radial-gradient(ellipse 48% 28% at 32% 58%, rgba(128,158,181,.5), rgba(61,87,112,.2) 54%, transparent 76%),
        radial-gradient(ellipse 42% 22% at 72% 43%, rgba(105,137,163,.4), rgba(55,80,105,.14) 56%, transparent 78%);
      animation: cityHazeDrift 19s cubic-bezier(.45,.05,.55,.95) infinite alternate;
      animation-play-state: paused;
      will-change: transform;
    }

    .city-haze--map {
      right: 17%;
      bottom: -13%;
      width: 61%;
      height: 34%;
      transform: translate3d(-3%, 0, 0);
    }

    .city-haze--cards {
      right: -9%;
      bottom: 4%;
      width: 43%;
      height: 66%;
      opacity: .14;
      filter: blur(33px);
      animation-name: cityCardSideHaze;
      animation-duration: 23s;
      animation-delay: -19s;
    }

    .city-projector-wash {
      z-index: 2;
      inset: 15% 23% 9% 51%;
      opacity: 0;
      transform: rotate(-5deg) translate3d(-4%, 0, 0);
      transform-origin: 0 58%;
      mix-blend-mode: screen;
      background:
        linear-gradient(104deg, transparent 0 5%, rgba(205,222,234,.06) 24%, rgba(224,234,240,.13) 49%, rgba(157,182,202,.045) 73%, transparent 96%);
      clip-path: polygon(0 42%, 100% 8%, 100% 91%, 0 67%);
      animation: cityProjectorBreathe 34s ease-in-out infinite;
      animation-play-state: paused;
    }

    .city-dust-layer {
      z-index: 6;
    }

    .city-dust-depth {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .city-dust {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: var(--size);
      height: var(--size);
      opacity: 0;
      animation: cityDustStream var(--duration) linear var(--delay) infinite;
      animation-play-state: paused;
      will-change: transform, opacity;
    }

    .city-dust__mote {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      filter: blur(var(--blur));
      background: var(--color);
      box-shadow: 0 0 var(--glow) color-mix(in srgb, var(--color), transparent 62%);
      mix-blend-mode: screen;
      will-change: opacity, filter;
    }

    .city-dust.is-breathing .city-dust__mote {
      animation: cityDustPulse var(--pulse-duration) ease-in-out var(--pulse-delay) infinite;
    }

    .city-dust.is-beam .city-dust__mote {
      animation-name: cityDustBeamPass;
      animation-duration: var(--duration);
      animation-timing-function: ease-in-out;
      animation-delay: var(--delay);
      animation-iteration-count: infinite;
    }

    .city-dust.is-breathing.is-beam .city-dust__mote {
      animation:
        cityDustPulse var(--pulse-duration) ease-in-out var(--pulse-delay) infinite,
        cityDustBeamPass var(--duration) ease-in-out var(--delay) infinite;
    }

    .city-view.is-open .city-haze,
    .city-view.is-open .city-haze-layer::after,
    .city-view.is-open .city-projector-wash,
    .city-view.is-open .city-dust,
    .city-view.is-open .city-pin[data-city="北京"] i,
    .city-view.is-open .city-pin[data-city="上海"] i,
    .city-view.is-open .city-pin[data-city="广州"] i,
    .city-view.is-open .city-pin[data-city="西安"] i,
    .city-view.is-open .city-pin[data-city="成都"] i,
    .city-view.is-open .city-test-point.is-hub .city-test-point__dot {
      animation-play-state: running;
    }

    .city-pin.is-active::before {
      width: 76px;
      height: 30px;
      opacity: .3;
      background: radial-gradient(ellipse, rgba(224,198,147,.28), rgba(177,134,72,.08) 44%, transparent 74%);
    }

    .city-pin.is-active::after {
      width: 28px;
      height: 28px;
      opacity: .34;
      background: radial-gradient(circle, rgba(255,246,217,.62) 0 4%, rgba(218,183,123,.18) 20%, rgba(167,122,62,.07) 44%, transparent 72%);
      box-shadow: 0 0 20px rgba(221,192,136,.16), 0 0 48px rgba(169,126,66,.08);
    }

    .city-pin[data-city="北京"] i,
    .city-pin[data-city="上海"] i,
    .city-pin[data-city="广州"] i,
    .city-pin[data-city="西安"] i,
    .city-pin[data-city="成都"] i {
      animation: cityLampBreathe 15s ease-in-out infinite;
      animation-play-state: paused;
    }

    .city-pin[data-city="上海"] i { animation-delay: -4s; }
    .city-pin[data-city="广州"] i { animation-delay: -9s; }
    .city-pin[data-city="西安"] i { animation-delay: -12s; }
    .city-pin[data-city="成都"] i { animation-delay: -7s; }

    .city-test-point.is-hub .city-test-point__dot {
      animation: cityMapLampBreathe 17s ease-in-out infinite;
      animation-delay: -5s;
      animation-play-state: paused;
    }

    .city-timeline-panel::before {
      content: "";
      position: absolute;
      inset: 14% 2% 4% 2%;
      z-index: 0;
      opacity: .13;
      filter: blur(38px);
      pointer-events: none;
      background: radial-gradient(ellipse at 55% 62%, rgba(106,137,162,.5), rgba(54,76,98,.16) 48%, transparent 72%);
      animation: cityCardHaze 21s ease-in-out infinite alternate;
      animation-play-state: paused;
    }

    .city-view.is-open .city-timeline-panel::before {
      animation-play-state: running;
    }

    .city-view.is-city-switching .city-haze,
    .city-view.is-city-switching .city-haze-layer::after,
    .city-view.is-city-switching .city-projector-wash,
    .city-view.is-city-switching .city-dust,
    .city-view.is-city-switching .city-timeline-panel::before {
      animation-play-state: paused !important;
    }

    .city-tl-track {
      z-index: 1;
    }

    @keyframes cityHazeDrift {
      0% { opacity: .11; transform: translate3d(-18%, 3%, 0) scaleX(.88); }
      46% { opacity: .2; transform: translate3d(1%, -3%, 0) scaleX(1.04); }
      100% { opacity: .14; transform: translate3d(23%, 1%, 0) scaleX(1.12); }
    }

    @keyframes cityCardSideHaze {
      0% { opacity: .1; transform: translate3d(18%, 2%, 0) scale(1.08); }
      52% { opacity: .17; transform: translate3d(0, -3%, 0) scale(.96); }
      100% { opacity: .12; transform: translate3d(-23%, 1%, 0) scale(1.12); }
    }

    @keyframes cityCardHaze {
      0% { opacity: .09; transform: translate3d(-17%, 2%, 0) scale(.94); }
      48% { opacity: .15; transform: translate3d(1%, -3%, 0) scale(1.05); }
      100% { opacity: .11; transform: translate3d(21%, 0, 0) scale(1.12); }
    }

    @keyframes cityHazeRibbon {
      0% { opacity: .12; transform: translate3d(-22%, 3%, 0) scaleX(.86); }
      50% { opacity: .22; transform: translate3d(0, -3%, 0) scaleX(1.04); }
      100% { opacity: .14; transform: translate3d(27%, 1%, 0) scaleX(1.15); }
    }

    @keyframes cityProjectorBreathe {
      0%, 18%, 100% { opacity: .05; transform: rotate(-5deg) translate3d(-4%, 0, 0); }
      34% { opacity: .38; }
      52% { opacity: .19; transform: rotate(-4.6deg) translate3d(0, -1%, 0); }
      68% { opacity: .31; }
      82% { opacity: .04; }
    }

    @keyframes cityDustStream {
      0% { opacity: 0; transform: translate3d(calc(var(--dx) * -.12), calc(var(--dy) * -.12), 0); }
      9% { opacity: var(--alpha); }
      86% { opacity: var(--alpha); }
      100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0); }
    }

    @keyframes cityDustPulse {
      0%, 100% { opacity: .08; }
      28% { opacity: .38; }
      48% { opacity: 1; }
      63% { opacity: .72; }
      82% { opacity: .16; }
    }

    @keyframes cityDustBeamPass {
      0%, 34%, 78%, 100% { filter: brightness(1); }
      48%, 62% { filter: brightness(1.3); }
    }

    @keyframes cityLampBreathe {
      0%, 100% { filter: brightness(.78); box-shadow: 0 0 0 3px rgba(112,160,203,.055), 0 0 10px rgba(153,196,229,.22); }
      48% { filter: brightness(1.08); box-shadow: 0 0 0 4px rgba(180,151,97,.065), 0 0 17px rgba(225,205,163,.3); }
      62% { filter: brightness(.9); }
    }

    @keyframes cityMapLampBreathe {
      0%, 100% { opacity: .68; filter: drop-shadow(0 0 1px rgba(132,202,255,.28)); }
      52% { opacity: 1; filter: drop-shadow(0 0 3px rgba(221,199,157,.46)); }
    }

    @media (prefers-reduced-motion: reduce) {
      .city-haze,
      .city-haze-layer::after,
      .city-projector-wash,
      .city-dust,
      .city-dust__mote,
      .city-pin i,
      .city-test-point__dot,
      .city-prefecture-point__ring,
      .city-timeline-panel::before {
        animation: none !important;
      }
      .city-projector-wash { opacity: .025; }
      .city-dust { opacity: var(--alpha); }
      .city-map-transition-layer { display: none; }
      .city-map-layer { transition: none !important; }
      .atmosphere-background::before,
      .atmosphere-background::after { transition-duration: 1ms; }
    }

    /* The restored city timeline occupies the right 32% of the experience. */
    .city-timeline-panel {
      position: absolute;
      top: 0; right: 3%; bottom: 0;
      width: 32%;
      padding: 0;
      border: 0;
      outline: 0;
      box-shadow: none;
      background: transparent;
      overflow: visible;
      z-index: 4;
      contain: layout paint style;
      isolation: isolate;
      transform: translateZ(0);
      transition: opacity 360ms ease, transform 360ms cubic-bezier(.3,0,.3,1);
    }
    .city-tl-head {
      position: absolute;
      top: clamp(28px, 3.2vh, 36px);
      left: clamp(24px, 1.8vw, 36px);
      width: min(640px, calc(68% - 48px));
      z-index: 5;
      text-align: left;
      padding: 0 clamp(8px, 1vw, 14px);
      box-sizing: border-box;
      pointer-events: none;
      opacity: 1;
      visibility: visible;
      transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }
    .city-tl-head h2 { margin: 0; font-family: var(--cn-font); font-size: clamp(24.086px,2.1252vw,34.003px); font-weight: 400; letter-spacing: .1em; color: rgba(232,243,255,.92); text-shadow: 0 0 8px rgba(126,171,214,.18), 0 0 20px rgba(92,138,183,.12); }
    .city-tl-head p {
      margin: 8px 0 0;
      max-width: min(640px, calc(100vw - 96px));
      font-size: 14.812px;
      line-height: 1.55;
      color: rgba(181,196,215,.38);
      letter-spacing: .12em;
      white-space: normal;
      text-wrap: pretty;
    }
    .city-tl-empty {
      display: grid;
      min-height: 180px;
      place-items: center;
      padding: 24px;
      color: rgba(181,196,215,.46);
      font-family: var(--cn-font);
      font-size: 12px;
      letter-spacing: .08em;
      text-align: center;
    }

    .city-tl-track {
      position: absolute;
      top: clamp(28px, 3.2vh, 36px);
      right: clamp(8px, 0.8vw, 14px);
      bottom: 0;
      left: clamp(8px, 0.8vw, 14px);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: clamp(18px, 2.4vh, 28px);
      padding-bottom: clamp(28px, 4vh, 48px);
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior-y: none;
      overflow-anchor: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding-bottom: clamp(28px, 4vh, 48px);
      scrollbar-width: none;
      -ms-overflow-style: none;
      contain: layout paint style;
      }
    .city-tl-track::-webkit-scrollbar { display: none; }
    .city-tl-spine { display: none; }

    .city-tl-entry {
      position: relative;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: clamp(8px, 1.1vh, 12px);
      margin: 0;
      padding-left: 40px;
    }
    .city-tl-entry::after { display: none; }
    .city-tl-entry__time {
      align-self: center;
      max-width: calc(100% - 32px);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(9px, .8vw, 13px);
      width: min(100%, 310px);
      padding: 0 10px;
      overflow: hidden;
      color: rgba(232,243,255,.92);
      font-family: 'Cinzel', var(--cn-font);
      font-size: clamp(13px, 1.15vw, 16px);
      font-weight: 400;
      line-height: 1.45;
      letter-spacing: .08em;
      text-align: center;
      text-overflow: ellipsis;
      text-shadow: 0 0 8px rgba(126,171,214,.18), 0 0 20px rgba(92,138,183,.12);
      white-space: nowrap;
    }
    .city-tl-entry__time::before,
    .city-tl-entry__time::after {
      content: "";
      flex: 1 1 34px;
      max-width: 48px;
      height: 3px;
      opacity: .78;
      filter: drop-shadow(0 0 5px rgba(126,171,214,.22));
    }
    .city-tl-entry__time::before {
      background:
        radial-gradient(circle at right, rgba(232,243,255,.9) 0 1.5px, transparent 1.8px),
        linear-gradient(90deg, transparent, rgba(126,171,214,.12) 18%, rgba(232,243,255,.56) 100%) center / 100% 1px no-repeat;
    }
    .city-tl-entry__time::after {
      background:
        radial-gradient(circle at left, rgba(232,243,255,.9) 0 1.5px, transparent 1.8px),
        linear-gradient(90deg, rgba(232,243,255,.56), rgba(126,171,214,.12) 82%, transparent) center / 100% 1px no-repeat;
    }

    .city-tl-card {
      --ph: clamp(160px, 23.8vh, 257px);
      --pw: calc(var(--ph) * 2 / 3);
      display: flex; flex-direction: row; align-items: center;
      width: 100%; min-height: calc(var(--ph) + 32px); height: auto;
      border-radius: 14px; border: none; outline: none;
      -webkit-appearance: none; appearance: none; overflow: hidden;
      background: rgba(255,255,255,.04);
      box-shadow: inset 0 0 0 0.5px rgba(255,255,255,.29), 0 6px 18px rgba(0,0,0,.38);
      transform: translateZ(0);
      backface-visibility: hidden;
      contain: paint;
      cursor: pointer; text-align: left;
      transition: background 300ms ease-out, box-shadow 300ms ease-out;
    }
    .city-tl-card:hover {
      background:
        radial-gradient(circle at 28% 36%, rgba(112,145,174,.075), transparent 42%),
        linear-gradient(rgba(111,137,161,.035), rgba(111,137,161,.035)),
        rgba(255,255,255,.04);
      box-shadow: inset 0 0 0 0.5px rgba(151,174,194,.48), 0 6px 18px rgba(0,0,0,.38);
      outline: none;
    }
    .city-tl-card__poster-wrap { position: relative; flex: 0 0 min(var(--pw), 40%); width: min(var(--pw), 40%); height: var(--ph); overflow: hidden; background: #0d0a08; margin: 16px 0 16px 16px; border-radius: 10px; flex-shrink: 0; }
    .city-tl-card__poster-wrap::before { display: none; }
    .city-tl-card__poster-wrap::after { display: none; }
    .city-tl-card__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; filter: saturate(0.96) contrast(1.04); transform: scale(1); transform-origin: center; transition: transform 300ms ease-out, filter 300ms ease-out; z-index: 0; }
    .city-tl-card:hover .city-tl-card__poster { filter: saturate(0.96) contrast(1.04) brightness(1.065); transform: scale(1.035); }
    .city-tl-card__poster--placeholder { display: flex; align-items: center; justify-content: center; padding: 14px; background: radial-gradient(circle at 30% 18%, rgba(239, 216, 174, 0.18), transparent 42%), linear-gradient(160deg, rgba(33, 31, 37, 0.96), rgba(12, 11, 16, 0.98)); color: rgba(255,255,255,.82); font-family: var(--cn-font); font-size: 18px; line-height: 1.35; letter-spacing: .08em; text-align: center; }
    .city-tl-card__poster-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 8px 9px; z-index: 10; }
    .city-tl-card__poster-name { display: block; font-family: var(--cn-font); font-size: 11px; font-weight: 400; color: rgba(255,255,255,.96); letter-spacing: .8px; line-height: 1.2; margin-bottom: 4px; text-shadow: 0 2px 12px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .city-tl-card__rating-row { display: flex; align-items: center; gap: 4px; }
    .ctp-stars { display: flex; gap: 1px; align-items: center; }
    .ctp-star { display: inline-block; font-size: 8px; line-height: 1; position: relative; }
    .ctp-star.full { color: transparent; background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(210,230,255,.75) 45%, rgba(255,255,255,.92) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)) drop-shadow(0 0 8px rgba(255,255,255,.25)); }
    .ctp-star.empty { color: transparent; background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%); -webkit-background-clip: text; background-clip: text; }
    .ctp-star.half { color: transparent; background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 100%); -webkit-background-clip: text; background-clip: text; }
    .ctp-star.half::before { content: '\2605'; position: absolute; left: 0; top: 0; color: transparent; background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(210,230,255,.75) 45%, rgba(255,255,255,.92) 100%); -webkit-background-clip: text; background-clip: text; clip-path: inset(0 50% 0 0); }
    .ctp-score { font-family: 'Cinzel', serif; font-size: 9px; font-weight: 700; color: rgba(255,255,255,.95); text-shadow: 0 2px 8px rgba(0,0,0,.4); line-height: 1; }
    .city-tl-card__body { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; padding: 34px 12px 10px 16px; }
    .city-tl-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
    .city-tl-card__title { font-family: var(--cn-font); font-size: clamp(19px, 1.66vw, 23px); font-weight: 400; color: rgba(245,240,232,.96); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-width: 0; transition: color 300ms ease-out; }
    .city-tl-card:hover .city-tl-card__title { color: rgba(238,243,247,.99); }
    .city-tl-card__big-score { font-family: 'Cinzel', serif; font-size: clamp(13px, 1.2vw, 16px); font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 2px 8px rgba(0,0,0,.4); flex-shrink: 0; line-height: 1; }
    .city-tl-card__desc { margin: calc(4px + 2%) 0 0; font-family: var(--cn-font); font-size: 12px; color: rgba(200,215,228,.48); line-height: 1.6; letter-spacing: .02em; transition: color 300ms ease-out; }
    .city-tl-card:hover .city-tl-card__desc { color: rgba(210,222,232,.58); }
    .city-tl-card__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 7.1px;
      margin-top: 4%;
      align-items: flex-start;
    }
    .city-tl-card__tag {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 3.6px 8.8px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
      font-family: var(--cn-font);
      font-size: 10.6px;
      color: rgba(255,255,255,.58);
      letter-spacing: .04em;
      line-height: 1.2;
      white-space: nowrap;
      opacity: .8;
      transition: color 300ms ease-out, border-color 300ms ease-out, background 300ms ease-out, opacity 300ms ease-out;
    }
    .city-tl-card:hover .city-tl-card__tag { color: rgba(225,233,239,.68); border-color: rgba(171,190,207,.18); background: rgba(174,195,212,.075); opacity: .9; }
    .city-tl-card__rating-row-b { display: flex; align-items: center; gap: 11px; margin-top: 8px; filter: drop-shadow(0 0 0 rgba(157,195,224,0)); transition: filter 300ms ease-out; }
    .city-tl-card:hover .city-tl-card__rating-row-b { filter: drop-shadow(0 0 5px rgba(157,195,224,.13)); }
    .city-tl-card__rating-row-b .ctp-stars { gap: 2px; }
    .city-tl-card__rating-row-b .ctp-star { font-size: 22px; }
    .ctp-score-b { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: rgba(255,255,255,.92); text-shadow: 0 2px 8px rgba(0,0,0,.4); line-height: 1; position: relative; top: 3px; }

    .city-switcher { position: absolute; bottom: clamp(18px, 2.8vh, 30px); left: clamp(24px, 3.2vw, 58px); z-index: 9; }
    .city-locate-hint {
      position: absolute;
      left: clamp(16px, 2vw, 36px);
      bottom: clamp(24px, 3.6vh, 42px);
      z-index: 8;
      max-width: min(560px, calc(100% - 40px));
      margin: 0;
      padding: 0 0 0 11px;
      border-left: 1px solid rgba(113, 193, 247, 0.24);
      font-family: var(--cn-font);
      font-size: clamp(10px, 0.82vw, 11.5px);
      font-weight: 400;
      line-height: 1.58;
      letter-spacing: 0.05em;
      color: rgba(162, 206, 241, 0.66);
      text-shadow: 0 0 14px rgba(78, 142, 194, 0.14);
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 480ms;
    }
    .city-locate-hint:not([hidden]) {
      opacity: 1;
      visibility: visible;
      transition: opacity 480ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    }
    @media (prefers-reduced-motion: reduce) {
      .city-tl-head,
      .city-locate-hint {
        transition: none;
      }
    }
    .city-switcher__trigger {
      display: flex;
      align-items: center;
      gap: clamp(18px, 2.4vh, 28px);
      min-width: 176px;
      padding: 11px 15px;
      border: 1px solid rgba(155,195,231,.2);
      border-radius: 999px;
      color: rgba(228,239,249,.86);
      background: linear-gradient(135deg, rgba(13,30,48,.76), rgba(5,14,24,.68));
      box-shadow: 0 14px 38px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      cursor: pointer;
    }
    .city-switcher__trigger::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f2c776; box-shadow: 0 0 15px rgba(242,199,118,.8); }
    .city-switcher__trigger small { margin-left: auto; color: rgba(172,197,221,.42); font-size: 9px; letter-spacing: .18em; }
    .city-switcher__menu {
      position: absolute;
      bottom: calc(100% + 12px);
      left: 0;
      display: grid;
      grid-template-columns: repeat(6, minmax(74px, 1fr));
      gap: 7px;
      width: min(700px, 56vw);
      padding: 14px;
      border: 1px solid rgba(155,195,231,.15);
      border-radius: 18px;
      background: linear-gradient(150deg, rgba(10,25,41,.94), rgba(3,10,18,.96));
      box-shadow: 0 24px 70px rgba(0,0,0,.48);
      -webkit-backdrop-filter: blur(24px);
      backdrop-filter: blur(24px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px) scale(.985);
      transform-origin: left bottom;
      transition: opacity 180ms ease, transform 220ms ease, visibility 180ms step-end;
    }
    .city-switcher.is-open .city-switcher__menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 180ms ease, transform 220ms ease, visibility 0s; }
    .city-switcher__option { padding: 7px 8px; border: 1px solid transparent; border-radius: 9px; color: rgba(190,208,226,.64); background: transparent; font-size: 11px; letter-spacing: .08em; cursor: pointer; }
    .city-switcher__option:hover { color: #edf5fc; background: rgba(133,183,228,.08); }
    .city-switcher__option.is-active { color: #f0cf94; border-color: rgba(224,179,99,.2); background: rgba(224,179,99,.08); }

    .yearbook-view {
      --award-caption-top: 75vh;
      color: #ead9bd;
      background:
        radial-gradient(ellipse 78% 65% at 50% 36%, rgba(0,0,0,.04) 0%, rgba(0,0,0,.36) 56%, rgba(0,0,0,.74) 100%),
        linear-gradient(to bottom, rgba(5,2,1,.16) 0%, transparent 18%, transparent 70%, rgba(5,2,1,.55) 100%),
        linear-gradient(rgba(0,0,0,.32), rgba(0,0,0,.32)),
        radial-gradient(circle at 50% 36%, rgba(151,92,39,.18), transparent 34%),
        radial-gradient(ellipse at 50% 100%, rgba(109,58,28,.12), transparent 55%),
        url("aosika/bg/aosikahaibao2.png") center center / cover no-repeat,
        #100b08;
    }

    .yearbook-view::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .14;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size: 36px 36px;
      -webkit-mask-image: radial-gradient(ellipse at center, black, transparent 75%);
      mask-image: radial-gradient(ellipse at center, black, transparent 75%);
    }

    .yearbook-nav {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 7;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(to top, rgba(5,3,2,.98) 56%, rgba(5,3,2,.82) 80%, transparent);
      padding-top: 22px;
    }
    .yearbook-timeline {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 4px 24px 10px;
    }
    .yearbook-year {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7px 6px;
      border-radius: 20px;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: background 180ms ease;
    }
    .yy-label {
      font-family: "Noto Serif SC", serif;
      font-size: 11px;
      color: rgba(235,218,190,.4);
      white-space: nowrap;
      letter-spacing: 0.03em;
      transition: color 180ms ease;
    }
    .yearbook-year.is-active { background: rgba(211,158,81,.1); box-shadow: inset 0 0 0 1px rgba(211,158,81,.15); }
    .yearbook-year.is-active .yy-label { color: #f0c984; }
    .yearbook-periods {
      width: 100%;
      height: 68px;
      border-top: 1px solid rgba(255,255,255,.04);
      display: flex;
      align-items: stretch;
    }
    .yearbook-period {
      flex: 1;
      background: none;
      border: none;
      border-right: 1px solid rgba(255,255,255,.05);
      cursor: pointer;
      font-family: "Noto Serif SC", serif;
      font-size: 11px;
      line-height: 1.55;
      color: rgba(235,218,190,.36);
      transition: color 220ms ease;
      position: relative;
      padding: 0 4px;
    }
    .yearbook-period:last-child { border-right: none; }
    .yearbook-period.is-active { color: rgba(220,190,125,.95); }
    .yearbook-period.is-active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 52%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(245,215,145,.95), transparent);
    }

    .award-header {
      position: absolute;
      top: clamp(18px, 4.6vh, 38px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      width: min(860px, 84vw);
      text-align: center;
      pointer-events: none;
    }
    .award-header__ceremony {
      color: rgba(220,185,115,.55);
      font-family: Didot, Georgia, serif;
      font-size: 15px;
      letter-spacing: .32em;
      text-transform: uppercase;
      margin: 0 0 8px;
    }
    .award-header__title {
      color: #f2e3c0;
      font-family: "Noto Serif SC", Georgia, serif;
      font-size: clamp(22px, 2.4vw, 38px);
      font-weight: 600;
      letter-spacing: .05em;
      line-height: 1.25;
      margin: 0 0 11px;
    }
    .award-header__movie {
      margin: 0 0 0 .28em;
      padding: .06em .12em .1em;
      border: 1px solid transparent;
      border-radius: 8px;
      color: #e8c378;
      background: transparent;
      font: inherit;
      letter-spacing: inherit;
      cursor: pointer;
      pointer-events: auto;
      transition: color .2s ease, border-color .2s ease, background .2s ease, text-shadow .2s ease;
    }
    .award-header__movie:hover,
    .award-header__movie:focus-visible {
      border-color: rgba(232,195,120,.24);
      color: #f4d590;
      background: rgba(232,195,120,.055);
      text-shadow: 0 0 18px rgba(214,165,76,.2);
      outline: none;
    }
    .award-header__reason {
      color: rgba(230,210,175,.50);
      font-size: clamp(11px, 0.9vw, 13px);
      letter-spacing: .04em;
      line-height: 1.75;
    }
    .award-header__nominations {
      display: none;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
      padding: 5px 0;
      color: rgba(232,196,128,.72);
      font-size: 10px;
      letter-spacing: .08em;
      line-height: 1.4;
    }
    .award-card.is-selected .award-card__copy small {
      color: rgba(255,255,255,.58);
      font-size: 8px;
      letter-spacing: .36em;
    }

    .award-stage {
      position: absolute;
      inset: calc(10vh + 30px) 0 max(14vh, 148px);
      perspective: 1400px;
      perspective-origin: 50% 44%;
      transform: scale(.77);
      transform-origin: 50% 48%;
    }
    .award-card {
      position: absolute;
      top: 50%;
      left: 50%;
      width: clamp(200px, 19vw, 340px);
      aspect-ratio: .72;
      overflow: hidden;
      border-radius: clamp(14px, 1.8vw, 28px);
      clip-path: inset(0 round clamp(14px, 1.8vw, 28px));
      -webkit-mask-image: -webkit-linear-gradient(#000 0%, #000 100%);
      mask-image: linear-gradient(#000 0%, #000 100%);
      background: #23150d;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 28px 72px rgba(0,0,0,.6);
      filter: var(--award-depth-filter, none);
      cursor: pointer;
      transform: translate(-50%, -50%);
      transition: transform 740ms cubic-bezier(.16,1,.3,1), translate 320ms cubic-bezier(.16,1,.3,1), filter 480ms ease, opacity 380ms ease, box-shadow 300ms ease;
      will-change: transform;
    }
    .award-card:hover {
      filter:
        var(--award-depth-filter, none)
        drop-shadow(0 0 18px rgba(255,210,112,.76))
        drop-shadow(0 12px 30px rgba(223,158,48,.58));
      box-shadow:
        inset 0 0 0 1px rgba(245,205,125,.28),
        0 28px 72px rgba(0,0,0,.6),
        0 0 38px rgba(218,168,72,.38),
        0 16px 64px rgba(205,150,55,.26);
    }
    .award-card.is-selected {
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 32px 90px rgba(0,0,0,.72), 0 0 32px rgba(210,158,60,.32), 0 10px 50px rgba(200,148,58,.24);
    }
    .award-card.is-selected:hover {
      box-shadow: inset 0 0 0 1px rgba(240,195,90,.44), 0 36px 96px rgba(0,0,0,.74), 0 0 54px rgba(215,162,58,.58), 0 12px 64px rgba(205,150,55,.40);
    }
    .award-card__view-cta {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      padding: 9px 24px;
      background: rgba(8,4,2,.64);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,.22);
      color: rgba(255,255,255,.82);
      font-family: var(--cn-font);
      font-size: 14px;
      letter-spacing: 2.5px;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 180ms ease;
      pointer-events: none;
    }
    .award-card.is-selected:hover .award-card__view-cta { opacity: 1; }
    .award-card__inner { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; }
    .award-card__inner > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 700ms cubic-bezier(.2,.8,.2,1); border-radius: inherit; }
    .award-card:hover .award-card__inner img { transform: scale(1.03); }
    .award-card__winner-badge {
      position: absolute;
      top: 1%;
      right: 0;
      z-index: 4;
      display: block;
      width: 44%;
      height: auto;
      pointer-events: none;
    }
    .award-card::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); z-index: 3; }
    .award-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 44%, rgba(14,7,3,.26) 60%, rgba(10,5,2,.96));
      border-radius: inherit;
      z-index: 1;
    }
    .award-card.is-winner::after {
      background:
        linear-gradient(to bottom, rgba(10,5,2,.63), rgba(14,7,3,.18) 40%, transparent 56%),
        linear-gradient(to bottom, transparent 44%, rgba(14,7,3,.26) 60%, rgba(10,5,2,.96));
    }
    .award-card__copy { position: absolute; inset: auto 0 0; z-index: 2; padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.5vw, 22px) clamp(14px, 1.5vw, 22px); text-align: left; }
    .award-card__copy::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
    .award-card__copy small { display: none; }
    .award-card__copy b { display: block; color: rgba(255,255,255,.96); font-family: var(--cn-font); font-size: clamp(15px, 1.3vw, 22px); font-weight: 400; letter-spacing: 1.5px; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.6); margin-bottom: 6px; }
    .award-card__copy > span { display: none; }
    .award-card__copy .rating-row {
      gap: clamp(4px, 0.4vw, 7px);
      transform: scale(1.2);
      transform-origin: left center;
    }
    .award-card__copy .stars { gap: clamp(1.5px, 0.15vw, 2.5px); }
    .award-card__copy .star { font-size: clamp(10px, 0.9vw, 15px); }
    .award-card__copy .score {
      font-size: clamp(9px, 0.8vw, 14px);
      transform: translateY(2px);
    }
    .award-nav { position: absolute; top: 50%; z-index: 10; transform: translateY(-50%); width: 44px; height: 44px; border: none; background: rgba(8,5,3,.45); border-radius: 50%; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: rgba(235,215,175,.68); cursor: pointer; display: grid; place-items: center; transition: background 200ms, color 200ms; }
    .award-nav:hover { background: rgba(32,18,6,.62); color: #f0d29b; }
    .award-nav--prev { left: clamp(14px, 2.5vw, 44px); }
    .award-nav--next { right: clamp(14px, 2.5vw, 44px); }
    .award-caption { position: absolute; top: calc(var(--award-caption-top) - 5px); left: 50%; z-index: 6; width: min(920px, 86vw); color: rgba(232,211,179,.48); font-size: 13px; line-height: 1.8; text-align: center; transform: translateX(-50%); }

    @media (max-width: 900px) {
      .city-pins { opacity: .72; }
      .city-map-debug-stage { right: 32%; }
      .city-timeline-panel { width: 32%; }
      .city-province-info {
        top: 112px;
        left: 20px;
        width: 21%;
      }
      .city-province-info__features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .city-province-info__heading h3.is-long-title {
        font-size: 20px;
        letter-spacing: .025em;
      }
      .city-province-info__intro br { display: none; }
      .city-tl-track {
      position: absolute;
      top: clamp(28px, 3.2vh, 36px);
      right: clamp(8px, 0.8vw, 14px);
      bottom: 0;
      left: clamp(8px, 0.8vw, 14px);
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
      overflow-x: hidden;
    }
      .city-tl-label b { font-size: 14px; }
      .city-tl-label small { display: none; }
      .city-switcher__menu { grid-template-columns: repeat(4, minmax(68px, 1fr)); width: min(520px, 82vw); }
      .city-exp-info { width: 100%; background: linear-gradient(to bottom, rgba(2,7,14,.9) 60%, transparent); }
    }
    @media (max-width: 640px) {
      .award-nav { display: none; }
      .city-map-debug-stage { right: 32%; }
      .city-timeline-panel { width: 32%; }
      .city-province-info {
        top: 88px;
        left: 15px;
        width: 22%;
      }
      .city-province-info__heading h3 { font-size: 22px; }
      .city-province-info__heading h3.is-long-title { font-size: 16px; }
      .city-province-info__heading p,
      .city-province-info__intro,
      .city-province-info__features { display: none; }
      .city-province-info__keywords {
        margin-top: 12px;
        font-size: 10px;
        line-height: 1.7;
      }
      .city-tl-head {
        left: 15px;
        width: calc(68% - 30px);
      }
      .city-tl-head h2 { margin: 0; font-family: var(--cn-font); font-size: clamp(24.086px,2.1252vw,34.003px); font-weight: 400; letter-spacing: .1em; color: rgba(232,243,255,.92); text-shadow: 0 0 8px rgba(126,171,214,.18), 0 0 20px rgba(92,138,183,.12); }
      .city-tl-label { display: none; }
      .city-tl-entry.is-left { padding-right: calc(38% + 10px); }
      .city-tl-entry.is-right { padding-left: calc(62% + 10px); }
      .city-switcher { left: 15px; bottom: 14px; }
      .city-locate-hint {
        left: 12px;
        bottom: 18px;
        max-width: calc(100% - 24px);
        font-size: 10px;
        line-height: 1.5;
      }
      .city-switcher__menu { grid-template-columns: repeat(3, minmax(62px, 1fr)); width: min(390px, calc(100vw - 30px)); max-height: 62vh; overflow-y: auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      .experience-view, .award-card { transition-duration: 1ms; }
    }