/* Agape's paper, ink and rose palette; controls stay at readable native sizes. */
@font-face {
  font-family: "Agape Script";
  src: url("assets/fonts/agape-script.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #fbdce7;
  --ink: #2a1d23;
  --rose: #ac2c5b;
  --muted: #805367;
  --line: #d0a0b3;
  --light: #fff5f9;
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    radial-gradient(ellipse at 9% 28%, #fff4f6a6 0, transparent 29%),
    radial-gradient(ellipse at 59% 71%, #f4a9c05c 0, transparent 30%),
    radial-gradient(ellipse at 83% 21%, #ffd9e68c 0, transparent 27%),
    radial-gradient(ellipse at 95% 87%, #f49bb960 0, transparent 20%),
    radial-gradient(ellipse at 8% 100%, #f6acc666 0, transparent 24%),
    #fbdce7;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.89' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.4' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 6% 11% at 1% 30%, #ed8fb659, transparent),
    radial-gradient(ellipse 7% 6% at 3% 91%, #ee91b451, transparent),
    radial-gradient(ellipse 8% 7% at 14% 99%, #ed91b34d, transparent),
    radial-gradient(ellipse 6% 14% at 100% 77%, #ef86af59, transparent),
    radial-gradient(circle at 34% 10%, #ffffffc9, transparent .65%),
    radial-gradient(circle at 95% 12%, #ffffffad, transparent 1%),
    radial-gradient(circle at 65% 91%, #ffffffbd, transparent .75%),
    radial-gradient(circle at 9% 82%, #ffffffad, transparent .9%);
}
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; transition: background .2s, scale .2s; }
button:active { scale: .97; }
button, a { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--rose); outline-offset: 6px; }
button:disabled { cursor: wait; opacity: .6; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; left: 20px; top: -100px; z-index: 60; background: var(--light); padding: 12px; }
.skip-link:focus { top: 12px; }
.site-header { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 45; }
.brand { flex: none; mix-blend-mode: multiply; }
.brand img { width: 100%; height: auto; }
.site-header nav { display: flex; align-items: center; margin-left: auto; }
.nav-link { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 12px 0; min-height: 44px; font-size: 14px; letter-spacing: 2px; white-space: nowrap; }
.nav-link span { font: 9px Georgia, serif; letter-spacing: 1.4px; }
.nav-link::after { content: ""; position: absolute; width: 22px; height: 2px; background: var(--ink); bottom: 3px; left: 0; transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-link.active::after, .nav-link:hover::after { transform: scaleX(1); }
.motion-toggle { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: 13px; white-space: nowrap; }
.ui-icon { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.motion-toggle > span:first-child { display: inline-flex; }
.track-state { display: inline-flex; align-items: center; gap: 6px; }
.track-state .ui-icon { width: 16px; height: 16px; }
.hero { position: relative; margin: 0 auto; isolation: isolate; container-type: inline-size; overflow: clip; }
.hero-title h1 { margin: 0; }
.hero-title img { width: 100%; height: auto; }
.hero-title { mix-blend-mode: multiply; pointer-events: none; }
.tagline { font-family: "Agape Script", "KaiTi", "STKaiti", cursive; font-weight: 400; font-synthesis: none; text-align: left; }
.tagline > span { display: block; white-space: nowrap; }
.tagline > span:first-child { padding-left: .6em; }
.tagline-flourish { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tagline-flourish path { fill: none; stroke: #d4698e; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.pencil-note { position: absolute; z-index: 30; pointer-events: none; color: var(--rose); font-family: "Segoe Print", "Comic Sans MS", cursive; line-height: 1.02; transform: rotate(-12deg); }
.pencil-note > span { margin-left: 20px; }
.pencil-note i { position: absolute; left: 103%; top: -4%; font-size: 65px; font-weight: 400; transform: rotate(-20deg); }
.heart-object { padding: 0; user-select: none; cursor: grab; }
.heart-object:active { cursor: grabbing; scale: 1; }
.heart-object img { width: 100%; height: auto; aspect-ratio: 812/518; pointer-events: none; filter: drop-shadow(0 26px 25px #b74d7526); }
.heart-object:focus-visible { outline-offset: -35px; border-radius: 42%; }
.keepsakes { position: absolute; visibility: hidden; pointer-events: none; aspect-ratio: 812/518; }
.card-back { position: absolute; border: 7px solid #fff0f7; border-radius: 4px; }
.card-back > * { display: none; }
.doodle { position: absolute; color: #df3d87; pointer-events: none; font-family: Georgia, serif; z-index: 1; }
.doodle-one { display: none; }
.doodle-two { transform: rotate(15deg); }
.music-slip { display: flex; align-items: center; gap: 16px; position: absolute; z-index: 44; padding: 16px 20px; background: #fff8fbbd; border: 1px solid #ffffffbd; border-radius: 13px; box-shadow: 0 18px 40px #bd4f761b; transform: rotate(-4deg); }
.vinyl { position: relative; flex: none; width: 68px; height: 68px; border-radius: 50%; background: repeating-radial-gradient(circle, #462731 0 1px, #2a1e25 2px 4px); box-shadow: inset 0 0 10px #180b13, 0 3px 7px #6a2c4c20; }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent, #fff2, transparent 40%, #fff1, transparent 85%); }
.vinyl i { position: absolute; inset: 32%; border-radius: 50%; background: #efa4c4; display: grid; place-items: center; }
.vinyl i::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.song-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.song-kicker { font: 9px Georgia, serif; letter-spacing: 1.25px; color: var(--muted); white-space: nowrap; }
.song-copy strong { font-size: 17px; font-weight: 500; }
.song-status { font-size: 12px; color: var(--muted); white-space: nowrap; }
.play-button { flex: none; border-radius: 50%; width: 48px; height: 48px; background: var(--rose); color: var(--light); font-size: 17px; display: grid; place-items: center; padding: 0; }
.play-button:hover { background: #92234c; }
footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; margin: auto; color: #633c4d; font-size: 12px; letter-spacing: .7px; }
footer > span:first-child { font: italic 20px Georgia, serif; letter-spacing: 2px; }
.member-gallery { position: absolute; inset: 0; pointer-events: none; z-index: 42; }
.member-controls { display: flex; justify-content: center; align-items: center; gap: 8px; }
.round-button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); font-size: 21px; display: grid; place-items: center; flex: none; }
.round-button:hover { background: #f5bad0; }
.member-tabs { display: flex; gap: 5px; }
.member-tabs button { font-size: 11px; padding: 9px 10px; min-height: 44px; border-radius: 999px; white-space: nowrap; }
.member-tabs button[aria-pressed=true] { background: var(--rose); color: var(--light); }
dialog { border: 1px solid #d1a2b4; border-radius: 12px; background: var(--light); color: var(--ink); width: min(560px, calc(100% - 32px)); padding: 30px 35px; max-height: calc(100dvh - 40px); overflow: auto; box-shadow: 0 35px 100px #4e1b4940; }
dialog::backdrop { background: #53243a55; backdrop-filter: blur(9px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.handwritten { font: 20px "Segoe Print", cursive; color: var(--rose); }
dialog h2 { font: 28px "KaiTi", "STKaiti", serif; letter-spacing: 2px; margin: 20px 0; }
.record-art { display: flex; align-items: center; justify-content: center; gap: 30px; background: #f6d5e2; min-height: 170px; margin-bottom: 22px; overflow: hidden; border-radius: 4px; }
.big-vinyl { width: 175px; height: 175px; margin: 16px 0 -35px; }
.big-vinyl i { inset: 52px; }
.big-vinyl img { width: 58px; position: absolute; top: 18px; }
.record-art > span { font: italic 21px/1.7 Georgia; color: #8f4264; }
.track { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 5px; border-bottom: 1px solid #e8c5d3; text-align: left; font-size: 15px; }
.track small { display: block; font-size: 10px; margin-top: 7px; color: var(--muted); }
.track-state { font-size: 11px; }
.track.selected { color: var(--rose); }
.audio-controls { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.seek-label { flex: 1; min-width: 0; }
input[type=range] { accent-color: var(--rose); width: 100%; }
#track-time { font: 10px sans-serif; white-space: nowrap; }
.audio-error { font-size: 12px; color: var(--rose); line-height: 1.6; margin: 12px 0 0; }
.audio-error:empty { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  body:not(.motion-paused) .playing .vinyl, body.playing:not(.motion-paused) .big-vinyl { animation: spin 8s linear infinite; }
  .site-header { animation: arrive .8s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }