:root { color-scheme: dark; background: #000; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; background: #000; color: #f5f2f2; font-family: "SF Pro Display", "PingFang SC", "Helvetica Neue", Arial, sans-serif; }
.experience { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; height: 100dvh; overflow: hidden; background: #000; }
.music-side { position: relative; display: grid; grid-template-columns: minmax(190px, .82fr) minmax(230px, 1.18fr); gap: clamp(22px, 3vw, 58px); min-width: 0; padding: clamp(30px, 5vh, 72px) clamp(28px, 4vw, 74px); overflow: hidden; border-right: 1px solid rgba(255, 255, 255, .11); background: #000; }
.record-column { position: relative; display: grid; align-content: start; justify-items: start; }
.record-shadow { position: absolute; top: clamp(170px, 24vh, 280px); left: clamp(23px, 4vw, 62px); width: min(24vw, 290px); aspect-ratio: 1; border-radius: 50%; background: rgba(172, 67, 83, .08); filter: blur(32px); transform: scale(.78); }
.record { position: relative; display: grid; width: min(25vw, 306px); min-width: 200px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 13px solid #0b0b0e; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, #060609 0 2px, #1a171c 3px 4px, #070708 5px 7px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .13), 0 24px 64px rgba(0, 0, 0, .82), inset 0 0 0 1px rgba(255, 255, 255, .06); animation: record-spin 22s linear infinite; will-change: transform; }
.record::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .09); border-radius: inherit; }
.record-grooves { position: absolute; inset: 15%; border: 1px solid rgba(255, 217, 222, .12); border-radius: 50%; box-shadow: 0 0 0 22px rgba(255, 255, 255, .02), 0 0 0 47px rgba(255, 255, 255, .025); }
.record img { position: relative; z-index: 1; width: 62%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; filter: saturate(.76) contrast(1.04) brightness(.86); }
.record-core { position: absolute; z-index: 2; width: 16px; aspect-ratio: 1; border-radius: 50%; background: #060609; box-shadow: 0 0 0 3px rgba(240, 170, 178, .36); }
.lyric-side { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.track-meta { margin: 0 0 clamp(22px, 4vh, 46px); }
.track-meta p { margin: 0 0 11px; color: rgba(255, 206, 212, .54); font-size: 10px; font-weight: 650; letter-spacing: .17em; }
.track-meta h1 { margin: 0; font-size: clamp(28px, 3vw, 47px); font-weight: 570; letter-spacing: -.055em; line-height: 1.05; }
.track-meta span { display: block; margin-top: 10px; color: rgba(255, 255, 255, .45); font-size: clamp(13px, 1.25vw, 18px); }
.lyric-window { position: relative; min-height: 0; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 78%, transparent); }
.lyric-track { display: grid; gap: clamp(20px, 3.2vh, 37px); padding: 28vh 0 20vh; animation: lyric-flow 25s linear infinite; }
.lyric-track p { margin: 0; color: rgba(255, 255, 255, .40); font-size: clamp(18px, 2vw, 32px); font-weight: 450; letter-spacing: -.035em; line-height: 1.15; transition: color 200ms ease-out, transform 200ms ease-out; }
.lyric-track .current { color: rgba(255, 244, 244, .96); font-weight: 620; transform: translateX(-5px); text-shadow: 0 0 26px rgba(255, 166, 177, .20); }
.sound-state { margin: 0; padding-bottom: 1px; color: rgba(255, 255, 255, .36); font-size: 11px; letter-spacing: .12em; }
#qq-player { position: fixed; width: 1px; height: 1px; right: -4px; bottom: -4px; border: 0; opacity: .001; pointer-events: none; }
.rose-side { position: relative; min-width: 0; overflow: hidden; background: #000; }
.rose-viewport { position: absolute; inset: 0; overflow: hidden; background: #000; }
.rose-film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transform: scale(1.08); background: #000; will-change: transform; }
.sound-toggle { position: fixed; z-index: 3; left: clamp(20px, 2.4vw, 42px); bottom: clamp(20px, 3.4vh, 42px); display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; background: rgba(10, 9, 11, .68); color: rgba(255, 246, 247, .88); box-shadow: 0 12px 34px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .08); backdrop-filter: blur(18px) saturate(130%); cursor: pointer; transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background 160ms ease, border-color 160ms ease; }
.sound-toggle svg { width: 20px; height: 20px; fill: currentColor; overflow: visible; }
.sound-toggle .slash { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 2.25; }
.sound-toggle:active { transform: scale(.94); }
.sound-toggle:focus-visible { outline: 2px solid #f6a4ad; outline-offset: 4px; }
:root[data-sound="on"] .sound-toggle { border-color: rgba(255, 184, 193, .56); background: rgba(110, 38, 50, .82); color: #fff7f7; }
:root[data-sound="on"] .sound-toggle .slash { display: none; }
:root[data-sound="on"] .record { animation-duration: 14s; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes record-spin { to { transform: rotate(360deg); } }
@keyframes lyric-flow { to { transform: translateY(-50%); } }
@media (hover: hover) and (pointer: fine) { .sound-toggle:hover { transform: scale(1.06); border-color: rgba(255, 198, 206, .48); } }
@media (max-width: 760px) { .experience { display: block; background: #000; }.music-side, .sound-toggle { display: none; }.rose-side, .rose-viewport { position: fixed; inset: 0; }.rose-film { object-fit: contain; object-position: 50% 54%; transform: scale(1.12); -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 43%, rgba(0, 0, 0, .93) 60%, transparent 92%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 43%, rgba(0, 0, 0, .93) 60%, transparent 92%); } }
@media (prefers-reduced-motion: reduce) { .record, .lyric-track { animation: none; }.rose-film { transform: scale(1); } }