@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&display=swap');

:root { color-scheme: light; font-family: 'DM Sans', sans-serif; color: #79545f; background: #faedf0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(ellipse at 15% 20%, #f6dfe8 0, transparent 48%), radial-gradient(ellipse at 90% 80%, #eee4f3 0, transparent 48%), #fff7f5; }
.love { width: min(100% - 40px, 720px); margin: auto; padding: 48px 0 28px; text-align: center; }
.heart-seal { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 22px; border: 1px solid #e7b9c8; border-radius: 50%; background: #fff6f7; color: #ba6b88; font-size: 36px; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 3px; color: #986677; }
h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(56px, 10vw, 82px); line-height: 1.05; font-weight: 500; letter-spacing: -2px; color: #8d4963; margin: 17px 0 12px; }
.intro { font-size: 14px; margin: 0 0 29px; }
.since { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 13px; margin: 0 0 28px; }
.since svg { flex-shrink: 0; color: #ac6a80; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: flex; flex-direction: column; align-items: center; padding: 21px 10px 25px; background: #fffbf9d9; border: 1px solid #eed9df; border-radius: 20px; box-shadow: 0 9px 28px #a6607910; }
.card:nth-child(2) { background: #f9eef4; }
.card-ornament { color: #bc8da0; font-size: 23px; height: 30px; }
.card strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 66px; font-weight: 500; line-height: 1.15; color: #975471; font-variant-numeric: lining-nums tabular-nums; }
.card > span:last-child { font-size: 13px; letter-spacing: 1px; }
.clock-section { margin: 30px 0 25px; }
.clock-caption { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; margin: 0 0 15px; }
.clock { display: flex; align-items: flex-start; justify-content: center; gap: 17px; }
.clock div { display: flex; flex-direction: column; min-width: 66px; gap: 6px; }
.clock strong { font-size: 38px; font-weight: 500; letter-spacing: 1px; line-height: 1.2; color: #8d4963; font-variant-numeric: tabular-nums; }
.clock b { font-size: 30px; font-weight: 400; color: #c39aaa; line-height: 1.4; }
.clock div span { font-size: 10px; letter-spacing: 1px; }
.live { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 10px; color: #947980; margin-top: 19px; }
.live span { width: 5px; height: 5px; border-radius: 50%; background: #ac7c91; box-shadow: 0 0 0 3px #ac7c9112; }
.total { border-top: 1px solid #e9d5dc; padding-top: 26px; margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; color: #8d4963; }
.total strong { font-weight: 600; }
.closing { font-size: 12px; margin: 9px 0 35px; }
.closing span { color: #b76f89; }
footer { font-size: 9px; letter-spacing: .6px; color: #947980; }
footer span { padding: 0 8px; }
noscript { display: block; margin-top: 20px; }
@media (max-width: 480px) { .love { width: calc(100% - 32px); padding-top: 35px; } .eyebrow { letter-spacing: 2px; font-size: 9px; } .cards { gap: 10px; } .card { padding: 17px 6px 20px; border-radius: 16px; } .card strong { font-size: 53px; } .since { font-size: 11px; gap: 7px; } .clock { gap: 12px; } }

.song { margin: 0 auto 26px; }
.song-button { font: inherit; font-size: 13px; color: #8d4963; background: #f9e8ee; border: 1px solid #dfb4c3; border-radius: 999px; padding: 13px 22px; min-height: 46px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.song-button:hover { background: #f3d9e4; box-shadow: 0 4px 16px #a6607915; }
.song-button:focus-visible { outline: 2px solid #8d4963; outline-offset: 4px; }
.song-button:disabled { opacity: .65; cursor: wait; }
.song-status { font-size: 11px; margin: 10px 0 0; }
.song-status:empty { display: none; }
.turntable { position: relative; width: 210px; height: 178px; margin: 0 auto 19px; padding: 14px; border: 1px solid #dfb4c3; border-radius: 20px; background: linear-gradient(135deg, #f3d9e4, #eed9e5); box-shadow: 0 12px 25px #8d496318, inset 0 1px 0 #ffffffaa; }
.record { position: relative; display: grid; place-items: center; width: 148px; height: 148px; border-radius: 50%; background: repeating-radial-gradient(circle, #332c36 0 2px, #443747 3px, #332c36 4px); box-shadow: 0 3px 8px #37203140; animation: spin-record 5s linear infinite; animation-play-state: paused; }
.record::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(transparent, #ffffff15, transparent 30%, #ffffff10, transparent 70%); }
.record-label { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 58px; height: 58px; border: 3px solid #daa4b7; border-radius: 50%; background: #f7d5e2; color: #8d4963; }
.record-label span { font-size: 24px; line-height: 1; }
.record-label small { font-size: 5px; letter-spacing: .5px; margin-top: 4px; }
.tonearm { position: absolute; right: 27px; top: 23px; width: 8px; height: 99px; border-radius: 5px; background: linear-gradient(90deg, #aa8296, #fff1f5, #aa8296); transform: rotate(-12deg); transform-origin: 50% 6px; transition: transform .5s ease; box-shadow: 2px 2px 4px #37203122; }
.tonearm::before { content: ''; position: absolute; top: -5px; left: -6px; width: 20px; height: 20px; border: 4px solid #bd8ea3; border-radius: 50%; background: #f7d5e2; }
.tonearm::after { content: ''; position: absolute; bottom: -5px; left: -3px; width: 14px; height: 24px; border-radius: 4px; background: #90637c; }
.turntable-light { position: absolute; bottom: 16px; right: 18px; width: 6px; height: 6px; border-radius: 50%; background: #b997a6; }
.is-playing .record { animation-play-state: running; }
.is-playing .tonearm { transform: rotate(23deg); }
.is-playing .turntable-light { background: #b56a8a; box-shadow: 0 0 0 3px #b56a8a20; }
@keyframes spin-record { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .record { animation: none; } .tonearm { transition: none; } }
.brand-logo { display: block; border: none; }