.twilight-body {
  --background: #f4cfaa;
  --foreground: #243e52;
  --primary: #2d5873;
  --primary-foreground: #fff8ed;
  --secondary: #d9b49c;
  --muted: #d7c6b5;
  --muted-foreground: #5f7080;
  --border: rgb(48 74 94 / 24%);
  --ring: #de8c68;
  color: var(--foreground);
  background: linear-gradient(165deg, #f8d19f 0%, #e99b78 28%, #98a7b4 61%, #244761 100%);
  background-attachment: fixed;
}
.twilight-body::before {
  opacity: 1;
  background:
    radial-gradient(circle at 78% 13%, rgb(255 238 173 / 55%) 0, rgb(255 204 128 / 18%) 14%, transparent 31%),
    linear-gradient(118deg, transparent 0 55%, rgb(255 229 173 / 11%) 60%, transparent 67%);
}
.twilight-body::after { opacity: .42; background: linear-gradient(to bottom, transparent 58%, rgb(13 47 70 / 26%)); }
.twilight-page { min-height: 100vh; }
.twilight-page .site-header { border-color: rgb(48 74 94 / 24%); }
.twilight-page .wordmark, .twilight-page .brand-caption, .twilight-page .brand-names { color: #29475b; }
.twilight-page .brand-dot { background: #e18261; box-shadow: 0 0 0 5px rgb(255 217 158 / 19%); }
.sunset-cover { position: relative; aspect-ratio: 1.5; margin: 0; overflow: hidden; border-radius: 4px; color: #fff9ed; background: #203f58; box-shadow: 0 22px 48px rgb(20 47 68 / 23%); isolation: isolate; }
.sunset-cover img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.88) contrast(.97) sepia(.07); }
.sunset-cover::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 78% 9%, rgb(255 190 112 / 33%), transparent 43%), linear-gradient(115deg, rgb(226 126 79 / 14%), transparent 48%); mix-blend-mode: screen; }
.sunset-cover::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, rgb(14 30 43 / 6%) 0%, transparent 42%, rgb(18 46 67 / 63%) 100%); box-shadow: inset 0 0 0 1px rgb(255 244 218 / 20%); }
.sunset-overline { position: absolute; z-index: 3; top: 25px; left: 27px; right: 27px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 2px; opacity: .92; text-shadow: 0 1px 8px rgb(12 27 38 / 54%); }
.sunset-cover figcaption { position: absolute; z-index: 3; left: 28px; bottom: 25px; display: flex; flex-direction: column; gap: 8px; text-shadow: 0 2px 12px rgb(8 32 50 / 65%); }
.sunset-cover figcaption>span { font-family: 'Songti SC','SimSun',serif; font-size: 29px; letter-spacing: 5px; }
.sunset-cover figcaption small { font-size: 9px; letter-spacing: 2px; }
.twilight-page h1 { color: #25485e; }
.twilight-page h1 small { font-size: 12px; font-weight: 400; letter-spacing: 1px; color: #9b604e; }
.twilight-page .eyebrow { color: #a75f4b; }
.twilight-page .song-subtitle { color: #5f6b72; }
.twilight-page .heading-heart { color: #366079; }
.twilight-page .play-button { background: linear-gradient(135deg, #d8795d, #315d78); box-shadow: 0 9px 23px rgb(37 66 84 / 22%); }
.twilight-page .play-button:hover { background: linear-gradient(135deg, #c96e55, #274f69); }
.twilight-page .icon-control { color: #31566d; }
.twilight-page .icon-control:hover, .twilight-page .icon-control[aria-pressed=true] { background: rgb(255 229 199 / 40%); }
.twilight-page .lyrics-side { padding: 25px 28px 18px; border: 1px solid rgb(255 245 224 / 27%); border-radius: 4px; background: linear-gradient(155deg, rgb(255 244 224 / 35%), rgb(55 85 107 / 13%)); box-shadow: 0 18px 44px rgb(27 52 70 / 10%); backdrop-filter: blur(10px); }
.twilight-page .lyrics-side::before { display: none; }
.twilight-page .lyrics-heading { color: #365568; border-color: rgb(47 75 94 / 24%); }
.twilight-page .live-dot { background: #dd8362; }
.twilight-page .lyric-line { color: #536979; }
.twilight-page .lyric-line:hover { color: #24465d; }
.twilight-page .lyric-line.active { color: #1f425a; text-shadow: 0 1px rgb(255 245 226 / 75%); }
.twilight-page .dedication { border-color: rgb(47 75 94 / 24%); }
.twilight-page .dedication>span { color: #d98465; }
.twilight-page .dedication p { color: #395a6f; }
.twilight-page .site-footer { color: #eef1ed; border-color: rgb(239 239 225 / 25%); }
.twilight-page .site-footer a { color: #fff1da; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.twilight-page #progress::-webkit-slider-thumb, .twilight-page #progress::-moz-range-thumb { background: #fae8d3; }
@media(max-width:760px) {
  .twilight-body { background: linear-gradient(172deg, #f8d19f 0%, #e9a07d 34%, #839aaa 66%, #234761 100%); background-attachment: scroll; }
  .sunset-cover { aspect-ratio: 1.35; }
  .twilight-page .lyrics-side { padding: 20px 14px 12px; }
  .twilight-page .site-footer { color: #e6ebe8; }
}
@media(max-width:360px) { .twilight-page .brand-names { display: none; } }