:root {
  color-scheme: dark;
  --bg: #08090d;
  --surface: rgba(12, 13, 18, .84);
  --line: rgba(255, 255, 255, .15);
  --line-strong: rgba(255, 255, 255, .3);
  --text: #f3f0eb;
  --soft: rgba(243, 240, 235, .66);
  --faint: rgba(243, 240, 235, .4);
  --pink: #e08faf;
  --gold: #e7c170;
  --mint: #5eead4;
  --safe-t: max(10px, env(safe-area-inset-top));
  --safe-r: max(16px, env(safe-area-inset-right));
  --safe-b: max(10px, env(safe-area-inset-bottom));
  --safe-l: max(16px, env(safe-area-inset-left));
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
.entry-body { position: relative; isolation: isolate; }
.entry-title { display: flex; align-items: center; gap: 10px; }
.entry-title strong { font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: .1em; }
.entry-title small { color: rgba(255,255,255,.54); font: 500 10px/1 "DM Mono", "SFMono-Regular", monospace; letter-spacing: .18em; }
.eyebrow { margin: 0 0 8px; color: rgba(231,193,112,.72); font: 500 9px/1.2 "DM Mono", "SFMono-Regular", monospace; letter-spacing: .3em; }

.lead-select-page {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: 80px var(--safe-r) 36px var(--safe-l);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8,9,13,.96), rgba(8,9,13,.82) 48%, rgba(8,9,13,.9)),
    url("./assets/keyframes/KF00-user-approved-street.png") center / cover no-repeat;
}
.lead-select-page::after { position: absolute; z-index: 0; inset: 0; content: ""; pointer-events: none; box-shadow: inset 0 0 130px rgba(0,0,0,.56), inset 0 -26vh 26vh rgba(0,0,0,.35); }
.entry-header { position: absolute; z-index: 2; top: var(--safe-t); left: var(--safe-l); right: var(--safe-r); height: 50px; display: flex; align-items: center; justify-content: space-between; }
.entry-header > p { margin: 0; color: var(--soft); font-size: 12px; letter-spacing: .12em; }
.lead-select-card { position: relative; z-index: 2; width: min(920px,100%); }
.lead-select-card h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 500; }
.lead-choice-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 24px; }
.lead-card { min-height: 144px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: rgba(8,9,13,.72); backdrop-filter: blur(16px); text-align: left; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; }
.lead-card strong,.lead-card em { display: block; }
.lead-card strong { font-size: 22px; line-height: 1.4; font-weight: 500; }
.lead-card em { margin-top: 5px; color: var(--mint); font: normal 11px/1.5 "PingFang SC", "Microsoft YaHei", sans-serif; }
.lead-card > i { color: var(--gold); font: normal 11px/1.2 "PingFang SC", sans-serif; }
.lead-card.is-active:hover,.lead-card.is-active:focus-visible { border-color: var(--gold); background: rgba(255,212,121,.075); outline: none; transform: translateY(-1px); }
.lead-card.is-active:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lead-card.is-unavailable { opacity: .36; }
.lead-card.is-unavailable em { color: var(--faint); }
.entry-note { position: absolute; z-index: 2; left: var(--safe-l); bottom: var(--safe-b); margin: 0; color: var(--faint); font: 10px/1.5 "PingFang SC", sans-serif; }

.date-home { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; isolation: isolate; background: #08090d; }
.date-home::before { position: absolute; z-index: -3; inset: 0; content: ""; background: linear-gradient(90deg, rgba(5,6,9,.98) 0%, rgba(5,6,9,.91) 31%, rgba(8,9,13,.78) 56%, rgba(5,6,9,.92) 100%), linear-gradient(180deg,#0a0b0f,#07080b); }
.date-home::after { position: absolute; z-index: 8; inset: 0; content: ""; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,.44), inset 0 -22vh 22vh rgba(0,0,0,.36); }
.date-topbar { position: absolute; z-index: 20; top: var(--safe-t); left: var(--safe-l); right: var(--safe-r); height: 50px; display: grid; grid-template-columns: 44px auto 1fr; align-items: center; gap: 8px; }
.entry-back { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; color: var(--soft); font-size: 30px; line-height: 1; transform: translateY(-2px); }
.entry-back:hover,.entry-back:focus-visible { color: var(--pink); background: rgba(224,143,175,.08); outline: none; }
.collection-status { justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 10px; }
.collection-status span { color: var(--text); font-size: 12px; }
.collection-status i { width: 28px; height: 1px; background: var(--line); }
.date-world { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.date-world > span { position: absolute; right: 3vw; top: 14%; color: rgba(255,255,255,.025); font: 500 clamp(64px,12vw,190px)/1 "DM Mono",monospace; letter-spacing: -.08em; writing-mode: vertical-rl; }
.film-grid { position: absolute; left: 39%; top: 19%; width: clamp(96px,8vw,132px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; padding: 5px; border: 1px solid rgba(224,143,175,.28); background: rgba(20,13,18,.42); }
.film-grid i { display: grid; place-items: end center; padding-bottom: 6px; border: 1px solid rgba(224,143,175,.14); color: rgba(255,255,255,.27); background: rgba(224,143,175,.035); font: normal 8px "DM Mono",monospace; }
.date-character { position: absolute; z-index: 3; left: 38%; right: 7%; top: 4%; bottom: 0; pointer-events: none; }
.date-character img { position: absolute; left: 50%; bottom: -24%; width: 70%; height: 126%; object-fit: contain; object-position: bottom center; transform: translateX(-50%); filter: brightness(.8) saturate(.78); mask-image: linear-gradient(#000 0 78%,transparent 99%); }
.active-date { position: absolute; z-index: 10; left: max(var(--safe-l),6vw); top: 20%; width: min(38vw,560px); }
.active-index { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--faint); font: 10px "DM Mono",monospace; }
.active-index span { color: var(--pink); font-size: 14px; }
.active-index i { width: 46px; height: 1px; background: var(--line); }
.active-index small { font: inherit; }
.active-location { margin: 0 0 10px; color: var(--pink); font-size: 11px; font-weight: 600; }
.active-date h1 { margin: 0; font-size: clamp(44px,5.3vw,82px); line-height: 1.06; font-weight: 500; letter-spacing: .035em; white-space: nowrap; }
.date-summary { width: min(440px,100%); margin: 14px 0 0; color: var(--soft); font: 12px/1.8 "PingFang SC",sans-serif; }
.enter-button { width: 176px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 22px; padding: 0 16px; border: 1px solid rgba(231,193,112,.78); border-radius: 6px; color: #17120d; background: linear-gradient(135deg,#e7c47e,#c18c43); font-size: 14px; font-weight: 600; transition: filter 160ms ease, transform 120ms ease; }
.enter-button i { font-style: normal; font-size: 19px; }
.enter-button:hover,.enter-button:focus-visible { filter: brightness(1.08); outline: 1px solid var(--gold); outline-offset: 3px; }
.enter-button:active { transform: translateY(1px); }
.date-selector { position: absolute; z-index: 12; left: max(var(--safe-l),6vw); bottom: max(var(--safe-b),3.3vh); width: min(330px,calc(100% - var(--safe-l) - var(--safe-r))); }
.date-option { position: relative; height: 76px; display: grid; grid-template-columns: 34px minmax(0,1fr) 18px; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid rgba(224,143,175,.72); border-radius: 6px; background: rgba(224,143,175,.12); backdrop-filter: blur(16px); }
.date-option::before { position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; content: ""; background: var(--pink); }
.option-number { color: var(--pink); font: 12px "DM Mono",monospace; }
.option-copy { min-width: 0; display: grid; gap: 4px; }
.option-copy strong { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.option-copy small { color: var(--faint); font: 10px/1.2 "PingFang SC",sans-serif; }
.date-option > i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--pink); background: var(--pink); box-shadow: 0 0 0 4px rgba(224,143,175,.12); }
.edge-note { position: absolute; z-index: 10; right: var(--safe-r); top: 50%; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.18); font: 7px "DM Mono",monospace; letter-spacing: .2em; transform: translateY(-50%) rotate(90deg) translateX(50%); transform-origin: right center; }
.edge-note i { width: 38px; height: 1px; background: rgba(255,255,255,.14); }
.entry-rotate { display: none; }

@media (max-width: 1000px), (max-height: 560px) {
  .entry-title strong { font-size: 17px; }
  .entry-title small { display: none; }
  .lead-select-page { padding: 72px var(--safe-r) 32px var(--safe-l); }
  .lead-select-card { width: min(720px,100%); }
  .lead-select-card h1 { font-size: 21px; }
  .lead-choice-list { gap: 8px; margin-top: 16px; }
  .lead-card { min-height: 112px; padding: 12px; }
  .lead-card strong { font-size: 16px; }
  .date-character { left: 38%; right: 2%; top: 1%; }
  .date-character img { bottom: -30%; width: 80%; height: 136%; }
  .active-date { left: max(var(--safe-l),3vw); top: 16%; width: 43vw; }
  .active-index { margin-bottom: 7px; }
  .active-location { margin-bottom: 5px; font-size: 9px; }
  .active-date h1 { font-size: clamp(31px,6.7vw,49px); }
  .date-summary { margin-top: 8px; font-size: 10px; line-height: 1.6; }
  .enter-button { width: 150px; min-height: 44px; margin-top: 12px; padding: 0 14px; font-size: 13px; }
  .date-selector { left: max(var(--safe-l),3vw); bottom: var(--safe-b); width: min(250px,45vw); }
  .date-option { height: 58px; grid-template-columns: 26px minmax(0,1fr) 14px; padding: 6px 9px; }
  .option-copy strong { font-size: 12px; }
  .option-copy small { display: none; }
  .film-grid { left: 42%; top: 18%; width: 72px; gap: 3px; padding: 3px; }
  .edge-note { display: none; }
}

@media (max-height: 370px) {
  .active-date { top: 14%; }
  .active-index,.date-summary { display: none; }
  .active-date h1 { font-size: 31px; }
  .enter-button { margin-top: 12px; }
  .date-option { height: 52px; }
}

@media (pointer: coarse) and (orientation: portrait),
       (pointer: coarse) and (max-aspect-ratio: 1 / 1) {
  .entry-rotate { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; gap: 12px; padding: max(32px,var(--safe-t)) max(32px,var(--safe-r)) max(32px,var(--safe-b)) max(32px,var(--safe-l)); text-align: center; background: #0c0c10; }
  .entry-rotate p { margin: 0; color: rgba(255,212,121,.72); font: 9px/1 "DM Mono",monospace; letter-spacing: .55em; }
  .entry-rotate h2 { margin: 0; font-size: 22px; letter-spacing: .18em; }
  .entry-rotate span { color: var(--soft); font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}