:root {
  --night: #101820;
  --night-soft: #18212a;
  --ink: #202830;
  --paper: #e9e2d4;
  --paper-muted: #aaa99f;
  --silver: #9cabb6;
  --gold: #b9aa88;
  --line: rgba(221, 218, 205, 0.2);
}

* { box-sizing: border-box; }
html { background: var(--night); color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.quiet-home {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: rgba(233, 226, 212, 0.46);
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  background: radial-gradient(circle at 65% 15%, #24303a 0, var(--night) 46%);
}

.capsule {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(ellipse at 78% 7%, rgba(116, 137, 151, 0.2), transparent 34%),
    radial-gradient(ellipse at 15% 36%, rgba(108, 89, 69, 0.1), transparent 28%),
    linear-gradient(180deg, #111a23 0%, #151d25 38%, #111820 70%, #171b1e 100%);
}

.capsule::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 62% 30%, rgba(176, 195, 207, 0.08), transparent 36%);
  animation: moon-drift 24s ease-in-out infinite alternate;
}

.film-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.14;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(255,255,255,.28) 0 .5px, transparent .7px),
    radial-gradient(circle at 73% 61%, rgba(255,255,255,.2) 0 .45px, transparent .65px),
    radial-gradient(circle at 37% 82%, rgba(0,0,0,.35) 0 .5px, transparent .75px);
  background-size: 9px 11px, 13px 17px, 15px 12px;
  mix-blend-mode: soft-light;
}

.scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(5rem, 12vh) max(1.7rem, env(safe-area-inset-right)) max(6rem, calc(4rem + env(safe-area-inset-bottom))) max(1.7rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cover {
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  text-align: center;
  cursor: pointer;
  isolation: isolate;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 9% 9% 8%;
  border: 1px solid rgba(229, 224, 212, 0.07);
  box-shadow: inset 0 0 80px rgba(195, 211, 220, 0.025);
  z-index: -1;
}

.cover-copy { transform: translateY(-2vh); }
.eyebrow, .section-label {
  margin: 0 0 1.8rem;
  color: var(--silver);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.cover h1 {
  margin: 0;
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.45;
  text-shadow: 0 8px 38px rgba(185, 204, 215, 0.08);
  opacity: 0;
  animation: title-appear 3.2s 0.25s ease-out forwards;
}

.cover-subtitle {
  width: min(29rem, calc(100vw - 4rem));
  margin: 1.9rem auto 0;
  color: rgba(233, 226, 212, 0.62);
  font-size: clamp(0.82rem, 3.3vw, 0.96rem);
  line-height: 2.15;
  letter-spacing: 0.08em;
}

.hairline {
  display: block;
  width: 3.8rem;
  height: 1px;
  margin: 2.2rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(220, 214, 197, 0.62), transparent);
}

.cover-hint {
  position: absolute;
  bottom: max(2.4rem, calc(1.2rem + env(safe-area-inset-bottom)));
  margin: 0;
  color: rgba(233, 226, 212, 0.36);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
}
.cover-hint span { display: block; margin-top: 0.8rem; font-size: 0.9rem; animation: quiet-breathe 3.8s ease-in-out infinite; }

.lyrics-scene {
  align-items: center;
  justify-content: center;
}

.section-copy { width: min(100%, 34rem); margin: 0 auto; }
.section-copy.narrow { width: min(100%, 29rem); }
.section-copy h2 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(1.8rem, 7.5vw, 2.7rem);
  line-height: 1.45;
  letter-spacing: 0.08em;
}
.section-intro {
  margin: 1.4rem 0 0;
  color: rgba(233, 226, 212, 0.55);
  font-size: 0.91rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

.lyric-stack {
  width: min(100%, 34rem);
  min-height: 10rem;
  display: grid;
  place-items: center;
  text-align: center;
}
.lyric-line {
  margin: 0;
  color: rgba(239, 232, 218, 0.9);
  font-size: clamp(1.02rem, 4.3vw, 1.22rem);
  line-height: 2;
  letter-spacing: 0.045em;
  animation: lyric-reveal 1.15s ease-out both;
}

.lyric-trigger {
  width: 4rem;
  height: 4rem;
  margin-top: 2.2rem;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: 50%;
}
.record-button-mark {
  position: relative;
  width: 3.2rem;
  height: 3.2rem;
  display: block;
  border: 1px solid rgba(233, 226, 212, 0.36);
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.55rem rgba(233, 226, 212, 0.025), inset 0 0 0 0.62rem rgba(233, 226, 212, 0.12);
  transition: transform 0.45s ease, border-color 0.45s ease;
}
.record-button-mark::before,
.record-button-mark::after,
.record-button-mark i {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.record-button-mark::before { width: 1.6rem; height: 1.6rem; border: 1px solid rgba(233, 226, 212, 0.17); }
.record-button-mark::after { width: 0.35rem; height: 0.35rem; background: rgba(233, 226, 212, 0.72); }
.record-button-mark i { width: 2.45rem; height: 2.45rem; border: 1px solid rgba(233, 226, 212, 0.08); }
.lyric-trigger:active .record-button-mark { transform: rotate(22deg) scale(0.94); }
.lyric-trigger:disabled { cursor: default; }
.lyric-trigger:disabled .record-button-mark { opacity: 0.42; }

.time-scene { background: linear-gradient(180deg, transparent, rgba(193, 172, 135, 0.035), transparent); }
.time-rule { display: block; width: 100%; height: 1px; margin: 2.8rem 0; background: rgba(233,226,212,.12); }
.time-rule i { display: block; width: 21%; height: 1px; background: var(--gold); opacity: .55; }
.prose {
  margin: 0 0 1.7rem;
  color: rgba(233, 226, 212, 0.72);
  font-size: clamp(0.98rem, 4.1vw, 1.14rem);
  line-height: 2.25;
  letter-spacing: 0.055em;
}

.core-scene blockquote {
  position: relative;
  margin: 1.2rem 0 3.6rem;
  padding: 2.4rem 0;
  color: #ece5d8;
  font-size: clamp(1.75rem, 7.7vw, 2.75rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.core-scene blockquote::before, .core-scene blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  width: 2.8rem;
  height: 1px;
  background: rgba(181, 197, 207, 0.48);
}
.core-scene blockquote::before { top: 0; }
.core-scene blockquote::after { bottom: 0; }

.ending-scene { min-height: 115vh; }
.letter-paper {
  position: relative;
  padding: 3rem 2rem 2rem;
  background: linear-gradient(135deg, rgba(232, 222, 202, 0.055), rgba(232, 222, 202, 0.015));
  border: 1px solid rgba(222, 213, 195, 0.09);
  box-shadow: 0 30px 80px rgba(3, 8, 12, 0.18);
}
.letter-paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1.25rem;
  width: 1px;
  background: rgba(185, 170, 136, 0.1);
}

.final-scene { min-height: 112vh; align-items: center; text-align: center; }
.final-copy { width: min(100%, 30rem); }
.final-sentence {
  margin: 0;
  color: #eee7db;
  font-size: clamp(1.5rem, 7vw, 2.25rem);
  line-height: 2;
  letter-spacing: 0.1em;
}
.postscript { margin: 0; color: rgba(233,226,212,.52); font-size: .77rem; letter-spacing: .18em; }

.music-dock {
  position: fixed;
  z-index: 15;
  right: max(0.8rem, env(safe-area-inset-right));
  bottom: max(0.8rem, env(safe-area-inset-bottom));
}
.music-dock button {
  display: flex;
  align-items: center;
  max-width: min(18.5rem, calc(100vw - 1.6rem));
  padding: .62rem .8rem;
  color: var(--paper);
  background: rgba(14, 21, 28, .78);
  border: 1px solid rgba(222, 217, 205, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.music-mark { display: flex; align-items: center; gap: 2px; width: 1rem; height: 1rem; margin-right: .6rem; }
.music-mark i { width: 2px; height: 35%; background: var(--silver); }
.music-mark[data-playing="true"] i { animation: sound-line 1.8s ease-in-out infinite; }
.music-mark[data-playing="true"] i:nth-child(2) { animation-delay: -.7s; }
.music-mark[data-playing="true"] i:nth-child(3) { animation-delay: -1.1s; }
.music-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.music-copy small { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(233,226,212,.4); font-family: ui-sans-serif, system-ui, sans-serif; font-size: .54rem; letter-spacing: .08em; }
.music-copy strong { margin-top: .16rem; font-weight: 400; font-size: .69rem; letter-spacing: .06em; }

.admin-shell {
  min-height: 100vh;
  padding: 3rem clamp(1rem, 4vw, 3rem) 5rem;
  color: #e9e3d7;
  background: #111820;
  font-family: ui-sans-serif, system-ui, sans-serif;
}
.login-shell { display: grid; place-items: center; }
.admin-card { width: min(100%, 24rem); padding: 2rem; border: 1px solid rgba(233,226,212,.12); background: #172029; }
.admin-card h1, .admin-header h1 { margin: 0 0 2rem; font-family: "Songti SC", serif; font-weight: 400; letter-spacing: .08em; }
.admin-card label { display: block; margin-bottom: .6rem; color: #aaa99f; font-size: .78rem; }
.admin-card input { width: 100%; padding: .85rem; color: #eee; background: #101820; border: 1px solid rgba(233,226,212,.16); outline: none; }
.admin-card input:focus { border-color: #9cabb6; }
.admin-card button { width: 100%; margin-top: 1rem; padding: .85rem; color: #101820; background: #d9d3c7; border: 0; cursor: pointer; }
.admin-error { color: #d3a69b; font-size: .8rem; }
.admin-header { max-width: 70rem; margin: 0 auto 2rem; display: flex; justify-content: space-between; align-items: start; }
.ghost-button, .danger-button { padding: .65rem .9rem; color: #c8c3b8; background: transparent; border: 1px solid rgba(233,226,212,.14); cursor: pointer; }
.metric-grid { max-width: 70rem; margin: 0 auto 1.3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.metric-grid article, .admin-panel { border: 1px solid rgba(233,226,212,.1); background: #172029; }
.metric-grid article { min-height: 8rem; padding: 1.2rem; display: flex; flex-direction: column; justify-content: space-between; }
.metric-grid span { color: #8e9498; font-size: .72rem; }
.metric-grid strong { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 400; }
.metric-grid .metric-time { font-size: .75rem; line-height: 1.6; color: #d6d1c6; }
.admin-panel { max-width: 70rem; margin: 0 auto 1.3rem; padding: 1.25rem; }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
.panel-title h2 { margin: 0; font-size: .95rem; font-weight: 500; }
.panel-title span { color: #858b8e; font-size: .7rem; }
.notice-row { display: flex; align-items: center; gap: .8rem; padding: .85rem 0; border-top: 1px solid rgba(233,226,212,.08); }
.notice-dot { width: .42rem; height: .42rem; border-radius: 50%; background: #aab9c2; box-shadow: 0 0 12px rgba(170,185,194,.4); }
.notice-row strong { font-size: .82rem; font-weight: 500; }
.notice-row p, .empty-state { margin: .25rem 0 0; color: #7f878c; font-size: .7rem; }
.session-row { padding: 1.1rem 0; border-top: 1px solid rgba(233,226,212,.08); }
.session-top { display: flex; justify-content: space-between; color: #c9c4b9; font-size: .75rem; }
.session-top span { color: #747c82; }
.progress-track { height: 2px; margin: .9rem 0; background: #232e37; }
.progress-track i { display: block; height: 100%; background: #a9b4ba; }
.session-row dl { margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .8rem; }
.session-row dl div { min-width: 0; }
.session-row dt { color: #70797f; font-size: .62rem; }
.session-row dd { margin: .25rem 0 0; font-size: .72rem; }
.admin-footer { max-width: 70rem; margin: 2rem auto 0; display: flex; justify-content: space-between; gap: 1rem; align-items: center; color: #737a7f; font-size: .7rem; }
.danger-button { color: #bf9f98; border-color: rgba(191,159,152,.28); }

@keyframes title-appear { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lyric-reveal { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes moon-drift { from { transform: translate3d(-2%, -1%, 0); opacity: .6; } to { transform: translate3d(3%, 2%, 0); opacity: 1; } }
@keyframes quiet-breathe { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .72; transform: translateY(4px); } }
@keyframes sound-line { 0%, 100% { height: 25%; } 50% { height: 86%; } }

@media (max-width: 720px) {
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .session-row dl { grid-template-columns: repeat(2, 1fr); }
  .admin-footer { align-items: stretch; flex-direction: column; }
}

@media (hover: hover) {
  .lyric-trigger:not(:disabled):hover .record-button-mark { transform: rotate(12deg); border-color: rgba(233, 226, 212, 0.62); }
  .ghost-button:hover { border-color: rgba(221,218,205,.34); background: rgba(220,216,202,.065); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cover h1 { opacity: 1; }
}

@supports not (min-height: 100svh) { .scene { min-height: 100vh; } }