:root { color-scheme: light; --background: #f6f5e9; --foreground: #304932; --primary: #4d693b; --primary-foreground: #fffdf0; --secondary: #e4e8d6; --muted: #e1e5d1; --muted-foreground: #6d7b5c; --border: #d8ddc8; --ring: #769752; }
* { box-sizing: border-box; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; } button,a { -webkit-tap-highlight-color: transparent; } button { cursor: pointer; } button:focus-visible,a:focus-visible,.lyrics-window:focus-visible { outline: 2px solid #638147; outline-offset: 5px; } ::selection { background: #cedbb5; } .summer-page { max-width: 1440px; margin: 0 auto; padding: 0 7%; } .site-header { height: 100px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); } .wordmark { display: flex; gap: 12px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: 2px; color: inherit; text-decoration: none; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #8aa568; } .brand-caption { font-size: 11px; font-weight: 400; letter-spacing: 2px; margin-left: 8px; color: #788269; } .header-note { display: flex; gap: 12px; align-items: center; font-size: 11px; letter-spacing: 2px; color: #7a826b; } .music-layout { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(50px, 8vw, 120px); padding: 52px 0 40px; } .cover-art { aspect-ratio: 1.12; position: relative; overflow: hidden; padding: 28px; color: #f9f6df; background: radial-gradient(ellipse at 90% 5%, #c6cc87aa, transparent 60%), linear-gradient(145deg, #9fac72, #687f4c 65%, #4e693e); border-radius: 3px; box-shadow: 0 18px 34px #4c613c18; display: flex; flex-direction: column; justify-content: space-between; } .cover-top { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 2px; } .cover-title { font-family: 'Songti SC', 'STSong', 'SimSun', serif; font-size: clamp(58px, 5.7vw, 80px); line-height: 1.3; letter-spacing: 10px; padding-left: 9px; font-weight: 400; } .cover-title>span { display: block; } .cover-title>span:last-child { padding-left: 28%; } .title-question { font-size: .65em; font-weight: 300; } .cover-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 10px; letter-spacing: 2px; } .song-heading { display: flex; justify-content: space-between; align-items: center; margin-top: 31px; } .eyebrow { font-size: 9px; letter-spacing: 2.6px; color: #798965; margin: 0 0 10px; } h1 { font-size: 28px; letter-spacing: 3px; line-height: 1.4; margin: 0; font-weight: 500; } .song-subtitle { font-size: 11px; letter-spacing: 1px; color: #7a846e; margin: 12px 0 0; } .heading-heart { color: #8a9a74; } .progress-wrap { margin-top: 28px; } [data-slot=slider] { padding: 8px 0; } .timestamps { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; margin-top: 7px; color: #7b846f; font-variant-numeric: tabular-nums; } .player-controls { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 16px; } .icon-control { width: 38px; height: 44px; color: #6c7d59; padding: 0; border-radius: 50%; } .icon-control[aria-pressed=true] { color: #375425; background: #dde7ca; } .play-button { height: 55px; padding: 0 23px; border-radius: 99px; gap: 11px; font-size: 12px; box-shadow: 0 6px 15px #4e693b15; } .play-button svg { width: 17px; height: 17px; } .player-note { min-height: 19px; text-align: center; font-size: 10px; color: #7c876d; letter-spacing: .5px; margin: 19px 0 0; } .lyrics-side { min-width: 0; padding-top: 5px; display: flex; flex-direction: column; } .lyrics-heading { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: 1px; color: #6f7c5e; padding: 0 8px 20px; border-bottom: 1px solid var(--border); } .lyrics-heading>span:first-child { display: flex; align-items: center; gap: 8px; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #99a786; } .is-playing { animation: breathe 2s ease-in-out infinite; background: #59753d; } .lyric-label { letter-spacing: 2px; font-size: 9px; } .lyrics-window { position: relative; height: 454px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d4dcc3 transparent; padding: 190px 5px; mask-image: linear-gradient(transparent, black 14%, black 83%, transparent); } .lyric-line { display: block; width: 100%; border: 0; background: none; padding: 14px 4px; color: #8a947c; font-size: clamp(14px, 1.35vw, 18px); letter-spacing: 1px; line-height: 1.8; text-align: left; font-family: inherit; transition: color .3s, transform .3s; } .lyric-line:hover { color: #4d693b; } .lyric-line.active { color: #344f2b; font-weight: 600; transform: translateX(3px); } .lyric-break { height: 48px; color: #a3ad93; padding: 10px 4px; } .lyric-break.active { color: #4d693b; } .lyrics-footer { text-align: center; min-height: 35px; margin-top: 10px; font-size: 10px; color: #929982; letter-spacing: 1px; } .lyrics-footer button { font-size: 11px; } .dedication { margin-top: auto; padding: 24px 8px 8px; display: flex; gap: 15px; border-top: 1px solid var(--border); } .dedication>span { font-family: Georgia, serif; font-size: 46px; color: #a3b487; line-height: 1; } .dedication p { font-family: 'Songti SC', 'SimSun', serif; font-size: 15px; line-height: 2; letter-spacing: 2px; color: #778565; margin: 0; } .site-footer { border-top: 1px solid var(--border); min-height: 80px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 10px; color: #88917b; letter-spacing: 1px; } .site-footer>span:first-child { display: flex; align-items: center; gap: 8px; } @keyframes breathe { 50% { opacity: .35; } }
@media(min-width:1600px) { .music-layout { padding-top: 65px; padding-bottom: 60px; } }
@media(max-width:760px) { .summer-page { padding: 0 24px; } .site-header { height: 74px; } .header-note { display: none; } .wordmark { font-size: 11px; } .brand-caption { font-size: 10px; } .music-layout { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-top: 28px; max-width: 440px; margin: auto; } .cover-art { aspect-ratio: 1.22; padding: 23px; } .cover-title { font-size: clamp(55px, 15vw, 78px); } .cover-top { font-size: 8px; } .cover-bottom { font-size: 9px; letter-spacing: 1px; } .song-heading { margin-top: 26px; } h1 { font-size: 25px; } .song-subtitle { font-size: 10px; } .progress-wrap { margin-top: 23px; } .player-controls { gap: 2px; } .play-button { padding: 0 18px; height: 52px; font-size: 11px; } .icon-control { width: 34px; } .lyrics-window { height: 310px; padding: 125px 5px; } .lyric-line { font-size: 15px; padding: 12px 4px; letter-spacing: .5px; } .dedication { margin-top: 23px; } .site-footer { flex-direction: column; justify-content: center; gap: 13px; padding: 22px 0 max(22px, env(safe-area-inset-bottom)); font-size: 9px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.cover-art { padding: 0; aspect-ratio: 1.5; }
.album-image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Native controls: no UI framework or external stylesheets required. */
[hidden] { display: none !important; }
button,input { font: inherit; }
button { color: inherit; }
.icon-control,.play-button { display: inline-flex; align-items: center; justify-content: center; border: 0; flex-shrink: 0; }
.icon-control { background: transparent; }
.icon-control:hover { background: var(--muted); }
.play-button { background: var(--primary); color: var(--primary-foreground); }
.play-button:hover { background: #405c30; }
.play-button span { display: inline-flex; align-items: center; }
.play-button svg { fill: currentColor; }
button:disabled,input:disabled { cursor: default; opacity: .5; }
#progress { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 24px; margin: 0; background: transparent; accent-color: var(--primary); cursor: pointer; }
#progress::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: linear-gradient(to right, var(--primary) var(--played,0%), var(--muted) var(--played,0%)); }
#progress::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 2px solid var(--primary); border-radius: 50%; background: var(--background); margin-top: -5px; }
#progress::-moz-range-track { height: 4px; border-radius: 3px; background: var(--muted); }
#progress::-moz-range-progress { height: 4px; background: var(--primary); }
#progress::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid var(--primary); border-radius: 50%; background: var(--background); }
#progress:focus-visible { outline: 2px solid var(--ring); outline-offset: 5px; border-radius: 3px; }
#follow { border: 0; background: transparent; padding: 8px 14px; border-radius: 12px; }
#follow:hover { background: var(--muted); }
#audio { width: 100%; margin-top: 25px; }
#link-fallback { margin-top: 12px; font-size: 12px; }
#page-link { width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--foreground); background: var(--background); }
@media(max-width:360px) { .summer-page { padding: 0 16px; } .play-button { padding: 0 12px; } .icon-control { width: 30px; } }
.brand-names { font-size: 11px; font-weight: 500; letter-spacing: 1px; color: #6d7b5c; white-space: nowrap; }
@media(max-width:380px) { .wordmark { gap: 9px; letter-spacing: 1px; } .brand-caption { margin-left: 0; } .brand-names { font-size: 10px; } }
#progress { touch-action: none; }

/* Let the supplied paper illustration set the tone of the whole page. */
:root { --background: #f8f6ee; --foreground: #3d4e37; --primary: #586e43; --primary-foreground: #fffdf4; --muted: #e4e7d8; --border: #dedfcf; }
.summer-keepsake { margin: 0; aspect-ratio: 1.2; background: #f6f3e9; color: #687451; border: 1px solid #e6e1d2; border-radius: 3px; box-shadow: 0 12px 30px #5963430a; isolation: isolate; }
.summer-keepsake .album-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.keepsake-heading { position: absolute; top: 25px; left: 25px; right: 25px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: 2px; }
.keepsake-heading>span:last-child { font-size: 8px; letter-spacing: 1.6px; }
.keepsake-caption { position: absolute; bottom: 23px; left: 25px; right: 25px; display: flex; flex-direction: column; align-items: center; gap: 9px; }
.keepsake-names { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; letter-spacing: 3px; color: #4f6342; }
.keepsake-names i { padding: 0 4px; font-weight: 400; color: #899173; }
.keepsake-line { font-family: 'Songti SC', 'SimSun', serif; font-size: 11px; letter-spacing: 2px; color: #788064; }
.eyebrow { color: #7e8a69; }
@media(max-width:760px) { .keepsake-heading { top: 21px; left: 20px; right: 20px; font-size: 9px; letter-spacing: 1.5px; } .keepsake-heading>span:last-child { font-size: 7px; letter-spacing: 1px; } .keepsake-caption { bottom: 19px; gap: 7px; } .keepsake-names { font-size: 14px; } .keepsake-line { font-size: 10px; } }

/* Warm summer green palette: sunlit cream, sage and olive. */
:root {
  --background: #f7f5e8;
  --foreground: #344b31;
  --primary: #607847;
  --primary-foreground: #fffdf4;
  --secondary: #e8ecd8;
  --muted: #dfe6cf;
  --muted-foreground: #6b795c;
  --border: #d5ddc2;
  --ring: #819d5f;
  --sunlight: #efd796;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 91% 4%, rgb(244 207 116 / 28%) 0, rgb(244 207 116 / 10%) 17%, transparent 37%),
    radial-gradient(circle at 4% 37%, rgb(165 188 123 / 25%) 0, transparent 31%),
    linear-gradient(145deg, #fbf8ed 0%, #f4f5e5 52%, #eaf0da 100%);
  background-attachment: fixed;
}
.summer-page { position: relative; }
.site-header { border-color: rgb(113 132 83 / 26%); }
.brand-dot { background: #769452; box-shadow: 0 0 0 5px rgb(142 166 102 / 12%); }
.wordmark { color: #3e5738; }
.brand-caption, .brand-names, .header-note { color: #718061; }
.summer-keepsake {
  border-color: rgb(128 145 96 / 24%);
  box-shadow: 0 18px 42px rgb(75 95 54 / 13%), 16px -14px 46px rgb(235 199 108 / 11%);
}
.summer-keepsake::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgb(255 249 220 / 12%), transparent 44%, rgb(143 166 103 / 7%));
  z-index: 1;
}
.keepsake-heading, .keepsake-caption { z-index: 2; }
h1 { color: #385336; }
.heading-heart { color: #79945a; }
.play-button { background: linear-gradient(135deg, #6e8850, #4e693a); box-shadow: 0 9px 22px rgb(71 94 50 / 19%); }
.play-button:hover { background: linear-gradient(135deg, #637e47, #435f31); }
.icon-control { color: #627755; }
.icon-control:hover, .icon-control[aria-pressed=true] { background: rgb(213 225 192 / 73%); }
#progress::-webkit-slider-thumb, #progress::-moz-range-thumb { background: #fbf8ed; box-shadow: 0 0 0 4px rgb(123 151 86 / 10%); }
.lyrics-heading { border-color: rgb(113 132 83 / 28%); }
.lyrics-side { position: relative; }
.lyrics-side::before {
  content: '';
  position: absolute;
  inset: 52px -22px 70px -22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(205 220 174 / 27%), transparent 70%);
  pointer-events: none;
}
.lyric-line { color: #849176; }
.lyric-line:hover { color: #4c683f; }
.lyric-line.active { color: #35542e; text-shadow: 0 1px 0 rgb(255 255 255 / 65%); }
.live-dot { background: #89a164; }
.dedication { border-color: rgb(113 132 83 / 26%); }
.dedication>span { color: #9fb47e; }
.dedication p { color: #657956; }
.site-footer { border-color: rgb(113 132 83 / 26%); color: #78876c; }
::selection { background: #d6e5bd; color: #2e472b; }
@media(max-width:760px) {
  body {
    background:
      radial-gradient(circle at 94% 1%, rgb(244 207 116 / 25%) 0, transparent 25%),
      radial-gradient(circle at 0 30%, rgb(165 188 123 / 22%) 0, transparent 32%),
      linear-gradient(160deg, #fbf8ed 0%, #f2f5e2 62%, #e9efda 100%);
    background-attachment: scroll;
  }
  .lyrics-side::before { inset: 45px -10px 80px; }
}

/* Dappled canopy and sunbeams around the page content. */
body { position: relative; overflow-x: hidden; }
body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body::before {
  opacity: .65;
  filter: none;
  background: url('leaf-shadow.svg?v=20260904-5') center top / 100% auto no-repeat;
}
body::after {
  opacity: .72;
  background:
    linear-gradient(119deg, transparent 0 54%, rgb(255 240 179 / 11%) 58%, transparent 64%),
    linear-gradient(126deg, transparent 0 64%, rgb(255 246 204 / 13%) 68%, transparent 75%);
}
.summer-page { z-index: 1; }
@media(max-width:760px) {
  body::before,
  body::after { position: absolute; }
  body::before {
    opacity: .58;
    background: url('leaf-shadow.svg?v=20260904-5') 34% top / 210% auto no-repeat;
  }
}