:root {
  color-scheme: dark;
  --bg: #080808;
  --text: #f2f1ed;
  --muted: #a5a5a1;
  --mat: #181818;
  --frame: #565655;
  background: var(--bg);
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --text: #171717;
  --muted: #727272;
  --mat: #f2f2f0;
  --frame: #b8b8b5;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--bg); }
a { color: inherit; }
button { color: inherit; font: inherit; }
.skip-link { position: fixed; z-index: 20; top: -60px; left: 20px; padding: 10px 14px; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 16px; }
.welcome { display: none; }
.gallery-shell { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(24px, 3vw, 58px); min-height: 100svh; padding: 22px clamp(26px, 3vw, 70px) 12px; }
.desktop-timeline { align-self: start; padding-top: clamp(95px, 16vh, 185px); }
.timeline-label { margin: 0 0 43px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .21em; }
.timeline-group + .timeline-group { margin-top: 43px; }
.timeline-year { margin: 0 0 17px; font-size: clamp(33px, 3vw, 49px); font-weight: 500; letter-spacing: -.06em; line-height: 1; }
.timeline-trip { margin: 0 0 16px; color: var(--muted); font-size: 11px; letter-spacing: .06em; }
.timeline-place + .timeline-place { margin-top: 20px; }
.place-name { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: .08em; }
.photo-picks { display: flex; flex-wrap: wrap; gap: 7px; }
.photo-picks button { min-width: 25px; padding: 4px 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 10px; letter-spacing: .07em; }
.photo-picks button:hover, .photo-picks button[aria-current="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
.viewer { display: flex; flex-direction: column; min-width: 0; height: calc(100svh - 34px); min-height: 0; }
.viewer-toolbar { display: flex; align-items: center; justify-content: flex-end; min-height: 45px; gap: 20px; }
.mobile-timeline-button { display: none; }
.theme-switch { display: flex; gap: 16px; }
.theme-switch button { padding: 7px 2px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; letter-spacing: .06em; }
.theme-switch button[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-underline-offset: 6px; }
.work { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; }
.photo-stage { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; padding: 7px 0; }
.photo-frame { display: flex; align-items: center; justify-content: center; flex: none; padding: clamp(10px, 1.35vw, 22px); border: 1px solid var(--frame); background: var(--mat); box-shadow: 0 16px 35px rgba(0, 0, 0, .14); }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.photo-caption { display: flex; justify-content: space-between; gap: 18px; min-height: 28px; color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.viewer-nav { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: 16px; }
.viewer-nav button { padding: 9px 0; border: 0; background: none; cursor: pointer; font-size: 11px; letter-spacing: .06em; }
.viewer-nav button:disabled { color: var(--muted); cursor: default; opacity: .55; }
.viewer-nav button:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; }
.viewer-nav span { color: var(--muted); font-size: 10px; letter-spacing: .17em; }
.timeline-dialog { width: min(420px, 100vw); height: 100svh; max-height: 100svh; margin: 0 0 0 auto; padding: 24px; border: 0; background: var(--bg); color: var(--text); }
.timeline-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 55px; color: var(--muted); font-size: 10px; letter-spacing: .2em; }
.dialog-heading button { padding: 8px 0 8px 12px; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 11px; }
.timeline-dialog .timeline-group + .timeline-group { margin-top: 42px; }
.timeline-dialog .timeline-year { font-size: 43px; }
.timeline-dialog .place-name { margin-bottom: 12px; font-size: 14px; }
.timeline-dialog .photo-picks { gap: 15px; }
.timeline-dialog .photo-picks button { font-size: 13px; }
.dialog-home { display: block; margin-top: 64px; padding: 8px 0; border: 0; background: none; color: var(--text); cursor: pointer; font-size: 12px; }
.dialog-icp { display: block; margin-top: 35px; color: var(--muted); font-size: 10px; text-decoration: none; }
.site-footer { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; height: 58px; padding: 8px clamp(26px, 3vw, 70px); color: var(--muted); font-size: 11px; text-align: center; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (max-width: 850px) {
  body { height: 100svh; overflow: hidden; }
  html[data-view="welcome"] .gallery-shell { display: none; }
  html[data-view="gallery"] .welcome { display: none; }
  .welcome { display: grid; height: 100svh; padding: 28px; place-items: center; text-align: center; }
  .welcome-content { transform: translateY(-2vh); }
  .welcome-kicker { margin: 0 0 27px; color: var(--muted); font-size: 10px; letter-spacing: .26em; }
  .welcome h1 { margin: 0; font-size: clamp(42px, 11vw, 64px); font-weight: 500; letter-spacing: .09em; }
  .welcome-site-name { margin: 14px 0 0; color: var(--muted); font-size: 10px; letter-spacing: .22em; }
  .enter-link { display: inline-block; margin-top: 70px; padding: 15px 25px; border: 1px solid var(--frame); background: none; color: var(--text); cursor: pointer; font-size: 13px; letter-spacing: .16em; }
  .enter-link:hover { background: var(--text); color: var(--bg); }
  .gallery-shell { display: block; height: 100svh; min-height: 0; padding: 0; }
  .desktop-timeline { display: none; }
  .viewer { height: 100svh; min-height: 0; padding: 0 14px; }
  .viewer-toolbar { justify-content: space-between; flex: 0 0 58px; min-height: 58px; }
  .theme-switch { gap: 12px; }
  .work { min-height: 0; }
  .photo-stage { padding: 6px 0; }
  .photo-frame { padding: 10px; }
  .photo-caption { align-items: center; flex: 0 0 30px; min-height: 30px; font-size: 10px; }
  .viewer-nav { flex: 0 0 58px; min-height: 58px; }
  .viewer-nav .desktop-photo-count { display: none; }
  .mobile-timeline-button { display: flex; align-items: center; flex-direction: column; gap: 3px; padding: 5px 10px; border: 0; background: none; cursor: pointer; font-size: 11px; }
  .mobile-timeline-button small { color: var(--muted); font-size: 9px; letter-spacing: .1em; }
  .timeline-dialog { width: 100vw; max-width: 100vw; }
  .site-footer { position: fixed; z-index: 2; right: 0; bottom: 0; left: 0; height: 42px; gap: 2px; justify-content: center; padding: 2px 10px 5px; background: var(--bg); font-size: 10px; }
  html[data-view="gallery"] .site-footer { display: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }