:root {
  --timeline-brand: #2547c8;
  --ink: #27304a;
  --muted: #717b92;
  --line: #dde3f0;
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #f3f5fb; }
body { min-width: 320px; min-height: 100dvh; margin: 0; color: var(--ink); background: linear-gradient(145deg, #f4f6fc 0%, #ffffff 44%, #f3f7ff 100%); }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.timeline-shell { width: min(760px, 100%); min-height: 100dvh; margin: 0 auto; padding: 20px 20px 40px; }
.timeline-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.return-link { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; color: #52607e; background: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 750; transition: color .18s, border-color .18s, transform .18s; }
.return-link:hover { border-color: #bbc9ee; color: var(--timeline-brand); }
.return-link:active { transform: scale(.98); }
.timeline-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--timeline-brand); font-size: 14px; }
.timeline-brand span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: #fff; background: var(--timeline-brand); font-size: 16px; font-family: "Kaiti SC", "STKaiti", serif; font-weight: 800; }

.timeline-intro { max-width: 570px; margin: 38px auto 20px; text-align: center; }
.timeline-intro__eyebrow { margin: 0 0 8px; color: var(--timeline-brand); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.timeline-intro h1 { margin: 0; font-size: clamp(27px, 5vw, 40px); letter-spacing: -.035em; line-height: 1.18; }
.timeline-intro > p:last-child { max-width: 490px; margin: 12px auto 0; color: var(--muted); font-size: 14px; line-height: 1.7; }

.timeline-focus { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; max-width: 620px; margin: 0 auto 22px; padding: 15px 17px; border: 1px solid #dbe4f8; border-radius: 17px; background: rgba(255, 255, 255, .86); box-shadow: 0 8px 22px rgba(44, 62, 129, .06); }
.timeline-focus__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--timeline-brand); background: #edf1ff; font-size: 23px; line-height: 1; }
.timeline-focus p { margin: 0 0 2px; color: var(--timeline-brand); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.timeline-focus h2 { margin: 0; color: #2d3855; font-size: 15px; line-height: 1.35; }
.timeline-focus small { display: block; margin-top: 4px; overflow: hidden; color: #758099; font-size: 11px; line-height: 1.5; text-overflow: ellipsis; }

.timeline-list { display: grid; gap: 0; max-width: 620px; margin: 0 auto; padding: 0; list-style: none; }
.timeline-event { display: grid; grid-template-columns: 42px minmax(0, 1fr); min-width: 0; }
.timeline-event__rail { position: relative; display: grid; justify-items: center; align-items: start; padding-top: 18px; }
.timeline-event__rail::after { position: absolute; top: 48px; bottom: -1px; width: 2px; background: #dfe5f3; content: ""; }
.timeline-event:last-child .timeline-event__rail::after { display: none; }
.timeline-event__rail span { position: relative; z-index: 1; display: grid; width: 27px; height: 27px; place-items: center; border: 2px solid #c7d2ef; border-radius: 50%; color: #7180a5; background: #fff; font-size: 11px; font-weight: 900; }
.timeline-event__card { min-width: 0; margin: 0 0 14px; padding: 15px 16px; border: 1px solid #e0e5f1; border-radius: 15px; background: rgba(255, 255, 255, .93); box-shadow: 0 6px 15px rgba(44, 57, 100, .04); }
.timeline-event__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timeline-event__meta span { color: #586b9e; font-size: 11px; font-weight: 850; }
.timeline-event__meta em { padding: 3px 7px; border-radius: 999px; color: #74809b; background: #f0f3f8; font-size: 10px; font-style: normal; font-weight: 800; white-space: nowrap; }
.timeline-event h2 { margin: 8px 0 0; color: #303b57; font-size: 16px; line-height: 1.35; }
.timeline-event p { margin: 6px 0 0; color: #758097; font-size: 12px; line-height: 1.65; }
.timeline-event__ask { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; margin-top: 10px; padding: 0 9px; border: 1px solid #d5dff8; border-radius: 9px; color: var(--timeline-brand); background: #f8faff; font-size: 11px; font-weight: 850; }
.timeline-event__ask:hover { border-color: #b7c7ef; background: #f2f5ff; }
.timeline-event--brand .timeline-event__rail span { border-color: var(--timeline-brand); color: var(--timeline-brand); }
.timeline-event--brand .timeline-event__meta span { color: var(--timeline-brand); }
.timeline-event--warm .timeline-event__rail span { border-color: #e3b06b; color: #b8781f; }
.timeline-event--warm .timeline-event__meta span { color: #af741f; }
.timeline-event--mint .timeline-event__rail span { border-color: #7bc8a5; color: #287657; }
.timeline-event--mint .timeline-event__meta span { color: #287657; }
.timeline-event--slate .timeline-event__rail span { border-color: #b9c1d0; color: #677287; }
.timeline-event--slate .timeline-event__meta span { color: #677287; }
.timeline-event--current .timeline-event__card { border-color: #c9d5f8; background: linear-gradient(110deg, #fbfcff, #f5f8ff); box-shadow: 0 8px 18px rgba(45, 71, 176, .08); }
.timeline-event--current .timeline-event__meta em { color: #3e5dc1; background: #e8edff; }
.timeline-event--done .timeline-event__card { opacity: .8; }
.timeline-event--done .timeline-event__meta em { color: #43846b; background: #eaf7f0; }
.timeline-empty { margin-left: 42px; padding: 22px; border: 1px dashed #ccd6e8; border-radius: 14px; color: #768199; background: rgba(255, 255, 255, .72); font-size: 13px; text-align: center; }

.timeline-unavailable { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; max-width: 650px; margin: 62px auto; padding: 20px; border: 1px solid #dce4f4; border-radius: 17px; background: rgba(255, 255, 255, .86); box-shadow: 0 10px 24px rgba(44, 62, 129, .07); }
.timeline-unavailable > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--timeline-brand); background: #eef2ff; font-size: 21px; }
.timeline-unavailable p { margin: 0 0 3px; color: var(--timeline-brand); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.timeline-unavailable h1 { margin: 0; color: #29334d; font-size: 18px; }
.timeline-unavailable small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.timeline-unavailable a { min-height: 34px; padding: 0 11px; display: inline-flex; align-items: center; border: 1px solid #d9e1f3; border-radius: 9px; color: var(--timeline-brand); background: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.timeline-unavailable a:hover { border-color: #b7c6ed; background: #f8faff; }
.timeline-footer { display: grid; justify-items: center; gap: 11px; margin: 25px auto 0; color: #8992a5; font-size: 12px; text-align: center; }
.timeline-footer p { max-width: 510px; margin: 0; line-height: 1.6; }
.ask-link { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 13px; border: 1px solid #d5def5; border-radius: 11px; color: var(--timeline-brand); background: #fff; font-size: 12px; font-weight: 800; }
.ask-link:hover { border-color: #aebfee; box-shadow: 0 5px 12px rgba(40, 68, 151, .08); }
.ask-link span { font-size: 16px; }

@media (max-width: 640px) {
  .timeline-shell { padding: 15px 14px 30px; }
  .timeline-topbar { min-height: 35px; }
  .return-link { min-height: 34px; padding: 0 10px; border-radius: 10px; font-size: 12px; }
  .timeline-brand { gap: 6px; font-size: 13px; }
  .timeline-brand span { width: 24px; height: 24px; border-radius: 7px; font-size: 14px; }
  .timeline-intro { margin: 28px auto 17px; }
  .timeline-intro__eyebrow { margin-bottom: 6px; font-size: 12px; }
  .timeline-intro h1 { font-size: 28px; }
  .timeline-intro > p:last-child { margin-top: 10px; font-size: 13px; }
  .timeline-focus { gap: 11px; margin-bottom: 17px; padding: 13px 14px; border-radius: 14px; }
  .timeline-focus__icon { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; }
  .timeline-focus h2 { font-size: 14px; }
  .timeline-event { grid-template-columns: 34px minmax(0, 1fr); }
  .timeline-event__rail { padding-top: 15px; }
  .timeline-event__rail::after { top: 42px; }
  .timeline-event__rail span { width: 23px; height: 23px; font-size: 10px; }
  .timeline-event__card { margin-bottom: 11px; padding: 13px 14px; border-radius: 13px; }
  .timeline-event h2 { margin-top: 7px; font-size: 15px; }
  .timeline-event p { font-size: 12px; }
  .timeline-empty { margin-left: 34px; }
  .timeline-unavailable { grid-template-columns: auto minmax(0, 1fr); gap: 11px; margin: 34px auto; padding: 16px; }
  .timeline-unavailable > span { width: 37px; height: 37px; border-radius: 11px; font-size: 18px; }
  .timeline-unavailable h1 { font-size: 16px; }
  .timeline-unavailable small { font-size: 11px; }
  .timeline-unavailable a { grid-column: 2; justify-self: start; margin-top: 1px; }
}

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