:root {
  color-scheme: dark;
  --bg: #030508;
  --text: #f1efe8;
  --muted: #b3b2aa;
  --quiet: #85868a;
  --gold: #f2d38f;
  --gold-rgb: 242 211 143;
  --hair: rgb(255 240 210 / 12%);
  --glass: rgb(6 9 14 / 58%);
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --latin: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { min-width: 300px; overflow: hidden; background: var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }

#sky {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  opacity: 0;
  transition: opacity 2s var(--ease);
}
.is-ready #sky { opacity: 1; }
body[data-mode='free'] #sky { cursor: crosshair; }

/* ---------- top bar: the site's <tipo-bar> (/tipo/tipo.css) over the sky, fading away while you watch ---------- */
tipo-bar {
  --tipo-fg: var(--text);
  --tipo-muted: var(--quiet);
  --tipo-line: var(--hair);
  --tipo-hover: rgb(255 240 210 / 8%);
  --tipo-accent: var(--gold);
  --tipo-accent-bg: rgb(var(--gold-rgb) / 14%);
  --tipo-lab: linear-gradient(100deg, #fff1d0 10%, #e8c27c 60%, #f2d38f);
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  max-width: none;
  padding: max(14px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 14px max(22px, env(safe-area-inset-left));
  background: linear-gradient(rgb(3 5 8 / 55%), transparent);
  pointer-events: none;
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
tipo-bar > * { pointer-events: auto; }
body.is-idle tipo-bar { opacity: 0; transform: translateY(-6px); }
body.is-idle tipo-bar > * { pointer-events: none; }
body.is-idle #sky { cursor: none; }

.top-actions { display: flex; gap: 8px; margin-left: auto; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color 0.3s, background 0.3s;
}
.icon-btn:hover { border-color: rgb(var(--gold-rgb) / 45%); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn .i-mute, .icon-btn .i-play { display: none; }
#soundBtn[aria-pressed='false'] .i-wave { display: none; }
#soundBtn[aria-pressed='false'] .i-mute { display: inline; }
#pauseBtn[aria-pressed='true'] .i-pause { display: none; }
#pauseBtn[aria-pressed='true'] .i-play { display: inline; fill: currentColor; }
.show-only, .away-only { display: none; }
body[data-mode='show'] .show-only { display: grid; }
body:not([data-mode='intro']) .away-only { display: grid; }

/* ---------- intro ---------- */
.intro {
  position: fixed;
  z-index: 2;
  top: 50%;
  left: max(6vw, env(safe-area-inset-left));
  width: min(470px, 88vw);
  transform: translateY(-50%);
  padding: 34px 32px 28px;
  border: 1px solid var(--hair);
  border-radius: 26px;
  background: linear-gradient(160deg, rgb(10 14 22 / 70%), rgb(4 6 10 / 58%));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / 80%);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
body:not([data-mode='intro']) .intro { opacity: 0; transform: translateY(-46%); pointer-events: none; visibility: hidden; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), visibility 0s 0.9s; }

.eyebrow { margin: 0 0 14px; color: rgb(var(--gold-rgb) / 80%); font: italic 400 15px/1 var(--latin); letter-spacing: 0.04em; }
.intro h1 { display: flex; flex-direction: column; gap: 10px; margin: 0; font-weight: 400; }
.title-name { font: 600 clamp(44px, 7vw, 62px)/1 var(--serif); letter-spacing: 0.16em; background: linear-gradient(180deg, #fff5dc 20%, #e8c27c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.title-sub { color: #e9e3d3; font: 400 19px/1.3 var(--serif); letter-spacing: 0.32em; }
.lede { margin: 18px 0 22px; color: var(--muted); font-size: 15px; line-height: 1.75; }

.program { padding: 16px 18px; border: 1px solid rgb(var(--gold-rgb) / 18%); border-radius: 16px; background: rgb(var(--gold-rgb) / 5%); }
.program-tag { margin: 0 0 6px; color: var(--gold); font-size: 12px; letter-spacing: 0.18em; }
.program h2 { margin: 0 0 6px; font: 600 19px/1.4 var(--serif); letter-spacing: 0.06em; }
.program-meta { margin: 0; color: var(--quiet); font-size: 13px; line-height: 1.6; }
/* Three to a row, a shorter last row centred. */
.programs { --gap: 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); margin-top: 12px; }
.program-chip {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  display: grid;
  gap: 2px;
  justify-items: center;
  min-height: 48px;
  padding: 7px 4px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgb(255 255 255 / 3%);
  transition: border-color 0.3s, background 0.3s;
}
.program-chip:hover { border-color: rgb(var(--gold-rgb) / 45%); }
.program-chip[aria-checked='true'] { border-color: rgb(var(--gold-rgb) / 75%); background: rgb(var(--gold-rgb) / 12%); }
.program-chip-name { font: 600 14px/1.2 var(--sans); letter-spacing: 0.06em; white-space: nowrap; }
.program-chip[aria-checked='true'] .program-chip-name { color: var(--gold); }
.program-chip-length { color: var(--quiet); font-size: 11px; }

.wish { display: grid; gap: 8px; margin: 20px 0 0; }
.wish-label { color: var(--muted); font-size: 13px; }
.wish input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgb(0 0 0 / 30%);
  color: var(--text);
  font: 15px var(--sans);
}
.wish input::placeholder { color: #6d6e72; }
.wish input:focus { border-color: rgb(var(--gold-rgb) / 55%); outline: none; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: rgb(255 255 255 / 4%);
  font-size: 15px;
  letter-spacing: 0.06em;
  transition: transform 0.25s var(--ease), background 0.3s, border-color 0.3s, opacity 0.3s;
}
.btn:hover:not(:disabled) { border-color: rgb(var(--gold-rgb) / 50%); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: progress; }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.btn-primary { border-color: transparent; background: linear-gradient(180deg, #f6dfa6, #d9ab5c); color: #1d1406; font-weight: 600; box-shadow: 0 12px 30px -12px rgb(var(--gold-rgb) / 55%); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #fbe8b8, #e2b86a); }
.btn-quiet { background: rgb(255 255 255 / 4%); }
.btn-small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.note { margin: 16px 0 0; color: var(--quiet); font-size: 12.5px; }
/* 减少闪烁: the intro's switch, and the bar's button (its rays dim while it is on). */
.calm { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; color: var(--quiet); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.calm input { flex: none; width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--gold); }
#calmBtn[aria-pressed='true'] { border-color: rgb(var(--gold-rgb) / 55%); }
#calmBtn[aria-pressed='true'] .i-rays { opacity: 0.3; }

/* ---------- programme captions and the dedication ---------- */
.caption {
  position: fixed;
  z-index: 2;
  bottom: max(26px, calc(env(safe-area-inset-bottom) + 18px));
  left: max(26px, env(safe-area-inset-left));
  display: grid;
  gap: 4px;
  max-width: min(70vw, 420px);
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid rgb(var(--gold-rgb) / 45%);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.2s ease, transform 1.2s var(--ease);
}
.caption.is-shown { opacity: 1; transform: none; }
.caption-title { color: #f5e2b6; font: 500 19px/1.3 var(--serif); letter-spacing: 0.14em; }
.caption-note { color: #a9a69c; font-size: 12.5px; letter-spacing: 0.06em; }

.dedication {
  position: fixed;
  z-index: 2;
  top: 17%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(90vw, 720px);
  margin: 0;
  transform: translate(-50%, 8px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s ease, transform 1.6s var(--ease);
}
.dedication.is-shown { opacity: 1; transform: translate(-50%, 0); }
.dedication-tag { color: rgb(var(--gold-rgb) / 85%); font-size: 13px; letter-spacing: 0.3em; }
.dedication-line { color: #fff6e0; font: 400 clamp(22px, 3.6vw, 34px)/1.45 var(--serif); letter-spacing: 0.16em; text-shadow: 0 0 26px rgb(var(--gold-rgb) / 30%); }

/* Large words in the sky: the countdown's numbers, the year's months, and the new year itself. */
.marquee {
  position: fixed;
  z-index: 2;
  top: 40%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(92vw, 760px);
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.marquee-text { color: #fff7e6; font: 300 clamp(96px, 22vh, 200px)/1 var(--latin); letter-spacing: 0.02em; text-shadow: 0 0 40px rgb(var(--gold-rgb) / 45%); }
.marquee-sub { color: #e9dcbf; font: italic 400 clamp(16px, 2.4vw, 24px)/1.4 var(--latin); letter-spacing: 0.06em; }
.marquee-sub:empty { display: none; }
.marquee.is-shown { animation: count 0.95s ease-out both; }
.marquee[data-kind='new'].is-shown { animation: herald 4.2s var(--ease) both; }
.marquee[data-kind='new'] .marquee-text { font: 500 clamp(52px, 11vw, 120px)/1.2 var(--serif); letter-spacing: 0.22em; background: linear-gradient(180deg, #fff3d6 15%, #f0b85a 75%, #e0563d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 24px rgb(240 160 80 / 45%)); }
.marquee[data-kind='month'] { top: 21%; }
.marquee[data-kind='month'].is-shown { animation: page 1.9s ease both; }
.marquee[data-kind='month'] .marquee-text { font: 400 clamp(30px, 5vw, 48px)/1.2 var(--serif); letter-spacing: 0.3em; text-shadow: 0 0 22px rgb(var(--gold-rgb) / 30%); }
.marquee[data-kind='month'] .marquee-sub { color: #b9b2a2; font: 400 14px/1.4 var(--sans); font-style: normal; letter-spacing: 0.2em; }
@keyframes count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@keyframes herald {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -52%); }
}
@keyframes page {
  0% { opacity: 0; transform: translate(-50%, -44%); }
  20%, 70% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-50%, -54%); }
}

/* ---------- ending ---------- */
.ending {
  position: fixed;
  z-index: 2;
  top: 38%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(92vw, 760px);
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
}
.ending.is-shown { opacity: 1; }
.end-main { color: #fff4dc; font: 400 clamp(24px, 4.2vw, 40px)/1.4 var(--serif); letter-spacing: 0.2em; text-shadow: 0 0 30px rgb(var(--gold-rgb) / 35%); }
.end-sub { color: #cfc8b6; font: italic 400 clamp(15px, 2vw, 20px)/1.5 var(--latin); letter-spacing: 0.04em; opacity: 0; transition: opacity 3s ease 1.6s; }
.end-sub:empty { display: none; }
.ending.is-shown .end-sub { opacity: 1; }

.end-card {
  position: fixed;
  z-index: 2;
  bottom: max(9vh, calc(env(safe-area-inset-bottom) + 24px));
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(92vw, 640px);
  transform: translateX(-50%);
  animation: appear 1.6s var(--ease) both;
}
@keyframes appear { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- free play ---------- */
.palette {
  position: fixed;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(transparent, rgb(3 5 8 / 70%) 40%);
}
.palette-hint { margin: 0 0 10px; color: var(--muted); font-size: 13px; text-align: center; letter-spacing: 0.06em; }
.shelf { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.chip {
  display: grid;
  flex: 0 0 auto;
  gap: 3px;
  min-width: 108px;
  padding: 10px 14px;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: left;
  scroll-snap-align: start;
  transition: border-color 0.25s, background 0.25s;
}
.chip-name { font: 600 15px/1.2 var(--sans); letter-spacing: 0.08em; }
.chip-note { color: var(--quiet); font-size: 11.5px; line-height: 1.3; }
.chip[aria-checked='true'] { border-color: rgb(var(--gold-rgb) / 75%); background: rgb(var(--gold-rgb) / 12%); }
.chip[aria-checked='true'] .chip-name { color: var(--gold); }
.palette-actions { display: flex; justify-content: center; margin-top: 4px; }

/* ---------- status & fallback ---------- */
.status {
  position: fixed;
  z-index: 2;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
.status.is-shown { opacity: 1; }
body[data-mode='free'] .status { bottom: 168px; }

.fallback {
  position: fixed;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(88vw, 440px);
  padding: 28px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--hair);
  border-radius: 22px;
  background: rgb(8 10 14 / 92%);
  line-height: 1.7;
}

/* ---------- English ---------- */
/* Latin faces, and letter-spacing brought in: what suits a few Chinese characters is far too wide for a sentence. */
html[lang='en'] {
  --serif: var(--latin);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
html[lang='en'] .title-name { font-size: clamp(36px, 4.4vw, 44px); line-height: 1.05; letter-spacing: 0.005em; }
html[lang='en'] .title-sub { font-style: italic; letter-spacing: 0.02em; }
html[lang='en'] .lede { line-height: 1.6; }
html[lang='en'] .program-tag { letter-spacing: 0.06em; }
html[lang='en'] .program h2 { letter-spacing: 0.01em; }
html[lang='en'] .program-chip-name { padding: 0 2px; letter-spacing: 0; text-align: center; white-space: normal; text-wrap: balance; }
html[lang='en'] .btn,
html[lang='en'] .palette-hint,
html[lang='en'] .status { letter-spacing: 0.01em; }
html[lang='en'] .caption-title { letter-spacing: 0.02em; text-wrap: balance; }
/* A title's halves wrap as wholes: Act Four · / The Magpie Bridge, not Act Four · The / Magpie Bridge. */
html[lang='en'] .caption-part { display: inline-block; }
html[lang='en'] .caption-note { letter-spacing: 0.01em; }
html[lang='en'] .dedication-tag { letter-spacing: 0.12em; }
html[lang='en'] .dedication-line { letter-spacing: 0.01em; }
/* No word left alone on the last line of a large line of words. */
html[lang='en'] .program h2,
html[lang='en'] .wish-label,
html[lang='en'] .dedication-tag,
html[lang='en'] .dedication-line,
html[lang='en'] .end-main,
html[lang='en'] .end-sub,
html[lang='en'] .caption-note { text-wrap: balance; }
html[lang='en'] .lede { text-wrap: pretty; }
html[lang='en'] .marquee[data-kind='new'] .marquee-text { font-size: clamp(40px, 8vw, 92px); letter-spacing: 0.02em; }
html[lang='en'] .marquee[data-kind='month'] .marquee-text { letter-spacing: 0.06em; }
html[lang='en'] .marquee[data-kind='month'] .marquee-sub { letter-spacing: 0.08em; }
html[lang='en'] .end-main { letter-spacing: 0.01em; }
html[lang='en'] .chip { max-width: 250px; }
html[lang='en'] .chip-name { letter-spacing: 0.01em; }

@media (max-width: 640px), (max-height: 560px) and (orientation: landscape) {
  tipo-bar { padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .intro {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 50%;
    width: min(94vw, 470px);
    padding: 24px 22px 20px;
    transform: translateX(-50%);
    border-radius: 22px;
  }
  body:not([data-mode='intro']) .intro { transform: translate(-50%, 4%); }
  .title-name { font-size: 42px; }
  html[lang='en'] .title-name { font-size: 32px; }
  .title-sub { font-size: 16px; }
  .lede { margin: 12px 0 16px; font-size: 14px; }
  .program { padding: 12px 14px; }
  .program h2 { font-size: 17px; }
  .program-meta { display: none; }
  .programs { --gap: 5px; margin-top: 8px; }
  .program-chip { min-height: 42px; padding: 5px 2px; }
  .program-chip-name { font-size: 13px; letter-spacing: 0.02em; }
  .wish { margin-top: 14px; }
  .actions { margin-top: 16px; }
  .actions .btn { flex: 1 1 auto; }
  .note { display: none; }
  .calm { margin-top: 12px; font-size: 12px; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .intro { max-height: calc(100vh - 28px); overflow-y: auto; }
  .lede, .wish-label { display: none; }
}

/* A laptop's short screen: the intro tightens up and sits in the room under the bar. */
@media (min-width: 641px) and (min-height: 561px) and (max-height: 860px) {
  .intro { top: calc(50% + 32px); max-height: calc(100vh - 84px); overflow-y: auto; padding: 24px 28px 20px; }
  .eyebrow { margin-bottom: 10px; }
  .intro h1 { gap: 6px; }
  .title-name { font-size: 50px; }
  .lede { margin: 12px 0 14px; font-size: 14px; line-height: 1.6; }
  .program { padding: 12px 16px; }
  .wish { margin-top: 14px; }
  .actions { margin-top: 16px; }
  .note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .marquee.is-shown { opacity: 1; }
}