:root{
  --bg: #0b0b10;
  --fg: #ffffff;
  --muted:#b9bfd6;
  --card:#12121aee;
  --rose: #ff5d8f;
  --peach:#ffc3a0;
  --violet:#7c6cff;
  --radius: 20px;
}
html,body{height:100%}
body{
  margin:0; color:var(--fg); background: radial-gradient(1200px 800px at 10% -10%, #1a1030, transparent),
    radial-gradient(1000px 700px at 110% 10%, #0d1a2b, transparent),
    linear-gradient(180deg, #0b0b10, #0b0b10);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  line-height:1.6;
  overflow-x:hidden;
}
.container{ max-width: 1080px; margin: 0 auto; padding: 28px; }
.card{ background: var(--card); border: 1px solid #2a2a3a; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.hero{ padding: clamp(28px, 4vw, 48px); display:grid; gap: 18px; justify-items:center; text-align:center; }
.date{ color: var(--muted); font-size: .95rem }
h1{ font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing:.2px; margin:6px 0 }
.lead{ color: #e9ecff; font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 60ch; white-space: pre-wrap; text-align:center }
.music-widget{ position:fixed; bottom:20px; right:26px; display:flex; flex-direction:column; gap:12px; width:min(320px, 88vw); padding:18px 20px; border-radius:18px; background: var(--card); border:1px solid #2a2a3a; box-shadow: 0 18px 46px rgba(0,0,0,.46), inset 0 0 0 1px rgba(255,255,255,.05); backdrop-filter: blur(8px); z-index:1100; }
.music-widget__header{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.music-title{ font-weight:600; font-size:1rem; color:var(--fg); line-height:1.4; text-align:left; flex:1; }
.music-collapse{ appearance:none; border:1px solid #2a2a3a; border-radius:10px; background: rgba(18,18,26,.7); color:var(--fg); width:32px; height:32px; font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: transform .2s ease, box-shadow .2s ease }
.music-collapse:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(124,108,255,.28); }
.music-collapse:active{ transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.music-widget__body{ display:flex; flex-direction:column; gap:12px; }
.music-widget__controls{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.music-btn{ appearance:none; border:1px solid #2a2a3a; padding:10px 22px; border-radius:999px; font-weight:600; cursor:pointer; background: linear-gradient(135deg, rgba(255,93,143,.28), rgba(124,108,255,.28)); color:var(--fg); box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .2s ease, box-shadow .2s ease, background .2s ease }
.music-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(124,108,255,.35), inset 0 0 0 1px rgba(255,255,255,.1); background: linear-gradient(135deg, rgba(255,93,143,.4), rgba(124,108,255,.4)); }
.music-btn:active{ transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.music-skip{ appearance:none; border:1px solid #2a2a3a; padding:8px 12px; border-radius:12px; background: rgba(18,18,26,.7); color:var(--fg); font-size:1rem; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease }
.music-skip:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(124,108,255,.28); }
.music-skip:active{ transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.music-btn:disabled,
.music-skip:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.music-status{ color: var(--muted); font-size:.9rem; line-height:1.4; display:block; }
.music-player__embed{ position:absolute; left:-9999px; width:0; height:0; overflow:hidden; opacity:0; pointer-events:none; }
.music-progress{ display:flex; align-items:center; gap:12px; font-size:.88rem; color:var(--muted); }
.music-progress[hidden]{ display:none; }
.music-progress__slider{ flex:1; appearance:none; width:100%; height:6px; border-radius:999px; background: rgba(255,255,255,.16); outline:none; cursor:pointer; position:relative; }
.music-progress__slider::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 0 0 2px rgba(11,11,16,.9); border:0; }
.music-progress__slider::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--violet)); border:0; box-shadow: 0 0 0 2px rgba(11,11,16,.9); }
.music-progress__slider::-moz-range-track{ background: transparent; }
.music-progress__slider:focus-visible{ box-shadow: 0 0 0 3px rgba(124,108,255,.4); }
.music-progress__time{ min-width:108px; text-align:right; font-variant-numeric: tabular-nums; }
.music-note{ margin:0; color: var(--muted); font-size:.9rem; line-height:1.45; text-align:left; }
@media (max-width: 720px){
  .music-widget{ right:16px; bottom:20px; width:min(280px, 90vw); }
}
.music-widget.is-collapsed{ padding:14px 16px; gap:0; }
.music-widget.is-collapsed .music-widget__body{ display:none; }
.music-widget.is-collapsed .music-collapse::after{ content:'▴'; }
.music-widget:not(.is-collapsed) .music-collapse::after{ content:'▾'; }
.music-widget.is-collapsed .music-collapse{ transform:none; }
.music-widget.is-collapsed .music-title{ line-height:1.2; }
.heart{
  width: 52px; height: 52px; display:inline-block; position:relative;
  filter: drop-shadow(0 6px 18px rgba(255,93,143,.35));
  animation: float 5.5s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* Section headings */
.section{ padding: clamp(22px, 3vw, 36px); }
.section h2{ font-family: "Playfair Display", serif; font-weight:600; letter-spacing:.2px; margin:0 0 10px; font-size: clamp(1.4rem, 2.6vw, 1.9rem); text-align:center }
.muted{ color: var(--muted) }
/* Preserve newlines from YAML for paragraph content */
.section p{ white-space: pre-wrap; text-align:center }

.audio-section{ display:grid; gap:14px; justify-items:center; text-align:center }
.audio-title{ margin-bottom:2px }
.audio-description{ max-width:56ch }
.audio-player{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.audio-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; width:100%; max-width:420px }
.audio-btn{ appearance:none; border:1px solid #2a2a3a; padding:10px 18px; border-radius:999px; font-weight:600; cursor:pointer; background: linear-gradient(135deg, rgba(255,93,143,.26), rgba(124,108,255,.26)); color:var(--fg); box-shadow: 0 8px 20px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.05); transition: transform .2s ease, box-shadow .2s ease, background .2s ease }
.audio-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(124,108,255,.32), inset 0 0 0 1px rgba(255,255,255,.1); background: linear-gradient(135deg, rgba(255,93,143,.4), rgba(124,108,255,.4)); }
.audio-btn:active{ transform: translateY(1px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.audio-controls > *:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.audio-progress{ flex:1; appearance:none; width:100%; height:6px; border-radius:999px; background: rgba(255,255,255,.16); outline:none; cursor:pointer }
.audio-progress::-webkit-slider-thumb{ appearance:none; width:14px; height:14px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--violet)); box-shadow: 0 0 0 2px rgba(11,11,16,.9); border:0; }
.audio-progress::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background: linear-gradient(135deg, var(--rose), var(--violet)); border:0; box-shadow: 0 0 0 2px rgba(11,11,16,.9); }
.audio-progress::-moz-range-track{ background: transparent; }
.audio-progress:focus-visible{ box-shadow: 0 0 0 3px rgba(124,108,255,.4); }
.audio-time{ min-width:110px; font-size:.92rem; color: var(--muted); font-variant-numeric: tabular-nums; }

article.card :is(h1, h2, h3, h4, h5, h6){ text-align:center }

/* Gallery */
.grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:14px; border:1px solid #2a2a3a; cursor:pointer; transition: transform .15s ease, box-shadow .15s ease; transform-style: preserve-3d; }
.span-6{ grid-column: span 6 }
.span-4{ grid-column: span 4 }
.span-8{ grid-column: span 8 }
@media (max-width: 820px){ .span-6, .span-4, .span-8 { grid-column: span 12 } }

/* Video */
.video-wrap{ position:relative; width:100%; aspect-ratio: 16 / 9; border-radius:14px; overflow:hidden; border:1px solid #2a2a3a; }
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }
.video-wrap video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }

/* Footer */
.footer{ padding: 22px; text-align:center; border-top:1px dashed #2a2a3a }

.btn{ appearance:none; border:0; padding:12px 18px; border-radius:999px; font-weight:600; cursor:pointer; background: linear-gradient(135deg, var(--rose), var(--violet)); color:white; box-shadow: 0 6px 18px rgba(124,108,255,.32); position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:1000; }
.btn:active{ transform: translateX(-50%) translateY(1px) }

/* Subtle animated sparkles (hearts now) */
.sparkles{ position:absolute; inset:0; pointer-events:none; overflow:hidden }
.sparkles span{ position:absolute; font-size:18px; color:var(--rose); opacity:.8; animation: rise 12s linear infinite }
@keyframes rise{ from{ transform: translateY(8vh) } to{ transform: translateY(-110vh) } }

/* Fireworks canvas overlay */
#fxCanvas{ position:fixed; inset:0; pointer-events:none; z-index:999; }

dialog::backdrop{ background: rgba(0,0,0,.6) }
dialog{ border:1px solid #2a2a3a; background:#0e0e16; border-radius:16px; padding:0; max-width:min(92vw, 980px) }
.lightbox img{ display:block; max-width:100%; height:auto }
.lightbox header{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid #222 }
.icon-btn{ background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer }
.sr{ position:absolute; left:-9999px }

/* Tooltip */
.img-tooltip{ position:fixed; left:0; top:0; z-index:10000; pointer-events:none;
  background: rgba(14,14,22,.96); border:1px solid #2a2a3a; color:#fff;
  padding:6px 10px; border-radius:10px; font-size:.9rem; line-height:1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  opacity:0; transition: opacity .08s ease; max-width: min(60ch, 82vw);
}
.img-tooltip[aria-hidden="false"]{ opacity:1 }