:root{font-family:'PingFang SC','Microsoft YaHei',sans-serif;color:#fff0df;background:#a9233d;--motion:1;--turn:0deg;--spin-progress:0}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;touch-action:none}button,input{font:inherit}button{color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible,[tabindex]:focus-visible{outline:2px solid #ffe5a8;outline-offset:6px}img{-webkit-user-drag:none;user-select:none;display:block}img,button,main{-webkit-user-select:none;user-select:none}[hidden]{display:none!important}#experience,.record-scene,.room-scene{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden}.record-scene{z-index:2;background:radial-gradient(ellipse at 72% 49%,#ec9eab 0,#d97487 36%,#b93150 76%,#95192f 100%)}.record-scene:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,#59152c14 3px 4px);mix-blend-mode:multiply}.intro-copy{position:absolute;left:5.3%;top:50%;width:29%;transform:translateY(-50%);z-index:3;transition:opacity 1.5s;pointer-events:none}.wordmark{font-size:clamp(12px,1.1vw,17px);font-weight:700;letter-spacing:.12em;margin-bottom:11vh}.eyebrow{font-size:clamp(10px,.82vw,13px);letter-spacing:.16em;opacity:.75;margin:0 0 16px}.intro-copy h1{font-family:'Songti SC','Noto Serif SC',serif;font-weight:400;font-size:clamp(26px,3vw,52px);line-height:1.65;letter-spacing:.05em;margin:0 0 5vh}.invitation{font-size:clamp(12px,1.03vw,16px);line-height:1.85;letter-spacing:.1em;opacity:.8}.turntable{position:absolute;right:-3%;top:50%;width:min(70vw,125dvh);aspect-ratio:1;transform:translateY(-50%) rotate(-5deg);transform-origin:43.9% 45.9%;will-change:transform;isolation:isolate}.deck-image{width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(0deg,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect;mix-blend-mode:multiply;pointer-events:none}.disc-control{position:absolute;left:13.2%;top:15.2%;width:61.4%;aspect-ratio:1;border-radius:50%;touch-action:none;cursor:grab;outline-offset:8px;container-type:inline-size;z-index:3}.disc-control.dragging{cursor:grabbing}.vinyl{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;position:relative;transform:rotate(var(--turn));will-change:transform;background:repeating-radial-gradient(circle,#141313 0 1.4px,#272424 2px,#151414 3.5px);box-shadow:inset 0 0 0 3px #9d754d,inset 0 0 0 7px #101010,0 4px 7px #19070888}.vinyl:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent,#ffffff1c 30deg,transparent 85deg,transparent 175deg,#ffffff1c 220deg,transparent 275deg);pointer-events:none}.disc-label{width:31%;height:31%;border-radius:50%;background:#d34461;border:1px solid #f4a8ae;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 0 0 5px #151111;color:#ffead4}.disc-label>span{font-size:4.2cqw;line-height:1.12;text-align:center;letter-spacing:.025em}.disc-label i{display:block;flex:0 0 2cqw;width:2cqw;height:2cqw;margin:1.8cqw;background:#1f1715;border:1px solid #bf935e;border-radius:50%}.disc-label small{font-size:1.5cqw;letter-spacing:.07em;white-space:nowrap}.disc-marker{position:absolute;top:7%;left:50%;width:1.2%;aspect-ratio:1;border-radius:50%;background:#cfad79;box-shadow:0 0 6px #edc68555}.turn-progress{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none;opacity:.8}.turn-progress circle{fill:none;stroke:#ffe0a8;stroke-width:.35;stroke-dasharray:307.877;stroke-dashoffset:calc(307.877 * (1 - var(--spin-progress)));transition:opacity .5s}.turn-hint{position:absolute;left:13.2%;top:83.5%;width:61.4%;text-align:center;font-size:clamp(12px,1.15vw,18px);letter-spacing:.13em;transform:rotate(5deg);text-shadow:0 1px 14px #6e163b;transition:opacity .7s;pointer-events:none}.tonearm{position:absolute;left:74%;top:20%;width:13%;height:52%;object-fit:contain;transform-origin:50% 7%;transform:rotate(-22deg);filter:drop-shadow(2px 6px 4px #26121377);transition:transform 1s cubic-bezier(.3,.05,.35,1);z-index:4;pointer-events:none}.needle-down .tonearm{transform:rotate(12deg)}.needle-down .turn-hint,.needle-down .turn-progress{opacity:0}.needle-down .intro-copy{opacity:.28}.needle-down .disc-control{cursor:default}.audio-error{position:absolute;left:40%;right:5%;bottom:5%;text-align:center;font-size:13px;color:#fff1df;z-index:8}.room-scene{z-index:5;background:#291915;clip-path:circle(0px at 65% 50%);pointer-events:none}.room-scene.entered{clip-path:none;pointer-events:auto}.scene-viewport{position:absolute;inset:0;overflow-x:auto;overflow-y:hidden;touch-action:pan-x;scrollbar-width:none;overscroll-behavior:none;cursor:grab}.scene-viewport::-webkit-scrollbar{display:none}.scene-viewport.dragging{cursor:grabbing}.room-world{position:absolute;left:0;top:50%;transform:translateY(-50%);width:max(112vw,177.68dvh);aspect-ratio:1672/941}.room-camera{width:100%;height:100%;transform-origin:28% 57%;transition:transform 1.3s cubic-bezier(.2,.7,.3,1);position:relative}.room-art{width:100%;height:100%;pointer-events:none}.room-camera:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 80px #35121030;pointer-events:none}.room-scene.playing .room-camera{transform:scale(1.025)}.photo-inlays img{position:absolute;object-fit:cover;pointer-events:none;filter:brightness(.87) sepia(.12)}.piano-hotspot{position:absolute;left:9%;top:40%;width:29%;height:44%;padding:0;border-radius:10px;touch-action:pan-x;transition:background 1.2s,box-shadow 1.2s}.hotspot-dot{position:absolute;left:50%;top:48%;width:10px;height:10px;transform:translate(-50%,-50%);border-radius:50%;background:#ffe6b6ba;box-shadow:0 0 0 5px #fff0c615,0 0 18px #ffd79b77;border:1px solid #fff0d2;animation:breathe 2.8s ease-in-out infinite}.piano-hotspot:hover .hotspot-dot,.piano-hotspot:focus-visible .hotspot-dot{background:#fff4da;box-shadow:0 0 0 7px #fff0c628,0 0 25px #ffd79bcc}.hotspot-label{position:absolute;left:50%;top:calc(48% + 22px);transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-shadow:0 1px 8px #27120b;opacity:0;transition:opacity .5s}.piano-hotspot:hover .hotspot-label,.piano-hotspot:focus-visible .hotspot-label,.playing .hotspot-label{opacity:.85}.piano-hotspot.discovered .hotspot-dot{width:8px;height:8px;border-color:#ffe5b5;background:#b29361bb;animation:none}.playing .piano-hotspot{background:#ffdb9620;box-shadow:inset 0 0 60px #ffe8bb0c}.playing .hotspot-dot{opacity:0}.sound-wave{position:absolute;left:50%;top:48%;height:19px;transform:translate(-50%,-50%);display:none;gap:3px;align-items:center}.sound-wave i{display:block;width:2px;height:5px;border-radius:2px;background:#ffe6bb;box-shadow:0 0 7px #edb56188;animation:wave .8s ease-in-out infinite alternate}.sound-wave i:nth-child(2){animation-delay:-.25s}.sound-wave i:nth-child(3){animation-delay:-.5s}.sound-wave i:nth-child(4){animation-delay:-.1s}.sound-wave i:nth-child(5){animation-delay:-.35s}.playing .sound-wave{display:flex}.memory-counter{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));font-size:13px;letter-spacing:.06em;text-shadow:0 1px 10px #25130f;padding:9px 13px;border-radius:25px;background:#2a171c26;pointer-events:none;color:#fff1dd}.memory-counter>span:first-child{font-size:19px;vertical-align:-1px;margin-right:5px}.room-arrival{position:absolute;left:8%;right:8%;top:auto;bottom:max(7%,calc(env(safe-area-inset-bottom) + 24px));margin:0;text-align:center;font:16px 'Songti SC',serif;letter-spacing:.15em;text-shadow:0 2px 15px #351311;pointer-events:none;animation:arrival 4.5s both}.piano-error{position:absolute;left:4%;bottom:6%;font-size:12px;text-shadow:0 1px 10px #25130f;pointer-events:none}.portal-active .intro-copy,.portal-active .turn-hint{opacity:0}.portal-active .turntable{transition:none}.paused-hidden *{animation-play-state:paused!important}
@keyframes breathe{50%{opacity:.52;box-shadow:0 0 0 8px #fff0c608,0 0 12px #ffd79b44}}@keyframes wave{to{height:19px}}@keyframes arrival{0%{opacity:0}20%,60%{opacity:1}100%{opacity:0}}@keyframes rotate-hint{0%,20%,100%{transform:rotate(-25deg)}50%,75%{transform:rotate(65deg)}}

@media(max-height:500px) and (orientation:landscape){.intro-copy{left:max(4%,env(safe-area-inset-left));width:29%}.wordmark{font-size:11px;margin-bottom:8vh}.eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:10px}.intro-copy h1{font-size:clamp(23px,3.3vw,32px);line-height:1.5;margin-bottom:4vh}.invitation{font-size:12px;line-height:1.7}.turntable{right:0;width:min(66vw,135dvh)}.turn-hint{font-size:12px;top:85%}.memory-counter{font-size:12px;top:max(10px,env(safe-area-inset-top))}.room-arrival{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}.hotspot-dot{opacity:.8}.sound-wave i{height:10px}.sound-wave i:nth-child(2n){height:17px}.room-scene.playing .room-camera{transform:none}}
.tonearm{left:54.98%;top:18.71%;width:44%;height:58%;object-fit:fill;transform-origin:52.656% 12.292%;transform:rotate(-8deg);clip-path:inset(6% 38% 5% 39%)}.needle-down .tonearm{transform:rotate(25deg)}
/* Clip the tall artwork inside the world, so focus can never scroll the camera vertically. */
.room-world{top:0;height:100%;aspect-ratio:auto;transform:none;overflow:hidden}.room-camera{position:absolute;top:50%;height:auto;aspect-ratio:1672/941;transform:translateY(-50%)}.room-scene.playing .room-camera{transform:translateY(-50%) scale(1.025)}
@media(prefers-reduced-motion:reduce){.room-scene.playing .room-camera{transform:translateY(-50%)}}
@media(max-height:500px) and (orientation:landscape){.turn-hint{top:80%;margin:0}}

/* Narrow desktop windows and portrait screens remain fully interactive. */
@media(max-aspect-ratio:1/1){.intro-copy{left:8%;top:5%;width:84%;transform:none}.wordmark{margin-bottom:3vh}.eyebrow{margin-bottom:10px}.intro-copy h1{font-size:clamp(26px,4vw,36px);line-height:1.45;margin-bottom:2vh}.invitation{font-size:13px;line-height:1.6}.turntable{right:-2%;top:65%;width:min(100vw,68dvh)}.turn-hint{font-size:13px;top:80%;margin:0}.audio-error{left:5%;right:5%;bottom:2%}}

/* Original-video radio cover and sound-reactive lighting. */
.radio-neon{position:absolute;inset:4%;border:1px solid #ffd2e44a;border-radius:3px;box-shadow:0 0 14px #ffbad329,inset 0 0 12px #ffbad319;pointer-events:none;animation:radio-glow 5s ease-in-out infinite}
.radio-lights{position:absolute;inset:8% 2%;display:flex;gap:3%;align-items:center;pointer-events:none;overflow:hidden;opacity:.2;filter:blur(14px)}
.radio-lights i{flex:1;height:60%;border-radius:100px;background:linear-gradient(0deg,#ffd7c833,#ffd7e8b0,#ffd7c833);transform:scaleY(.2);animation:radio-drift 5s ease-in-out infinite;animation-delay:calc(var(--i)*-.65s)}
.radio-live .radio-lights i{animation:none;transform:scaleY(var(--level,.2));transition:transform .12s linear}
.radio-sleeve{display:flex;align-items:center;gap:18px;margin-top:24px;transition:opacity 1s;animation:sleeve-drift 6s ease-in-out infinite}
.radio-sleeve>img{width:78px;height:86px;object-fit:cover;padding:5px 5px 12px;background:#ffe3e4;box-shadow:0 8px 22px #671d3538;transform:rotate(-6deg)}
.radio-station{display:flex;flex-direction:column;gap:9px}.station-label{font-size:10px;letter-spacing:.12em;opacity:.75}.on-air{font-size:9px;letter-spacing:.16em;opacity:.55}.on-air>i{display:inline-block;width:5px;height:5px;margin-right:4px;border-radius:50%;background:currentColor}.radio-live .on-air{opacity:1}.radio-live .on-air>i{background:#ffead1;box-shadow:0 0 8px #ffd7bb}
.radio-meter{height:21px;display:flex;gap:3px;align-items:end}.radio-meter>i{width:3px;height:100%;background:#ffe4d0;border-radius:2px;transform-origin:bottom;transform:scaleY(.12);opacity:.5}.radio-live .radio-meter>i{transform:scaleY(var(--level,.12));opacity:.9;transition:transform .08s linear}
.needle-down .intro-copy{opacity:1}.needle-down .intro-copy h1,.needle-down .invitation{opacity:.5;transition:opacity 1.5s}.portal-active .intro-copy{opacity:0}
@keyframes radio-glow{50%{opacity:.45}}@keyframes radio-drift{50%{transform:scaleY(.65);opacity:.5}}@keyframes sleeve-drift{50%{transform:translateY(-5px)}}
@media(max-height:600px) and (orientation:landscape){.radio-sleeve{margin-top:12px;gap:12px}.radio-sleeve>img{width:48px;height:54px;padding:3px 3px 8px}.radio-station{gap:5px}.radio-meter{height:12px}.wordmark{margin-bottom:5vh}.intro-copy h1{margin-bottom:2vh}}
@media(max-aspect-ratio:1/1){.radio-sleeve{position:absolute;right:0;top:50px;margin:0;flex-direction:column;gap:12px}.radio-sleeve>img{width:72px;height:80px}.radio-station{gap:6px}.intro-copy h1,.invitation{max-width:calc(100% - 110px)}.radio-neon{inset:3%}}
@media(prefers-reduced-motion:reduce){.radio-lights i{transform:scaleY(.3)}.radio-live .radio-meter>i{transform:scaleY(.4)}}

.music-toggle{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:36px;height:36px;border:1px solid #ffe6d43d;border-radius:50%;background:#3b142c38;color:#ffe8d4;font-size:20px;z-index:10;backdrop-filter:blur(8px)}.music-toggle[aria-pressed="false"]{opacity:.5}.portal-active:not([data-phase="room"]) .music-toggle{visibility:hidden}

/* Entry feedback stays reachable above the deck in narrow embedded browsers. */
.entry-feedback{position:absolute;left:40%;right:5%;bottom:3%;z-index:12;text-align:center;color:#fff1df;font-size:13px}
.entry-feedback .audio-error{position:static;margin:0 0 8px;font-size:inherit}
.entry-recovery{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.entry-recovery[hidden]{display:none}
.entry-recovery button{min-height:44px;padding:8px 16px;border:1px solid #fff1df88;border-radius:24px;background:#662637ed;color:#fff1df;font:inherit;touch-action:manipulation}
[data-phase='arming'] .turn-hint{visibility:hidden}
@media(max-width:760px){.entry-feedback{left:6%;right:6%;bottom:9%}}