@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --ink:#242424;--muted:#888984;--bg:#fcfcfb;--line:#dddedb; }
* {box-sizing:border-box;}
html,body {margin:0;min-height:100%;}
html {background:var(--bg);}
body {font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;}
button,input {font:inherit;}
button {cursor:pointer;}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible {outline:2px solid #5e747c;outline-offset:5px;}
a {color:inherit;text-decoration:none;}
.sr-only {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
.shell {min-height:100svh;display:grid;grid-template-rows:auto minmax(330px,1fr) auto;overflow:hidden;position:relative;background:var(--bg);}
.topline {z-index:5;position:relative;display:flex;align-items:center;justify-content:space-between;padding:29px clamp(22px,4.4vw,75px) 0;gap:20px;}
.wordmark {display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.015em;font-weight:700;}
.logo-symbol {font-size:21px;font-weight:400;line-height:1;}
.collection-count,.release-subtitle,.audio-time,.toast,.viewer-warning {font-family:'DM Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.04em;}
.collection-count {display:inline-flex;gap:9px;align-items:center;color:#777a76;font-variant-numeric:tabular-nums;}
.count-divider {color:#c1c3bf;}
.experience {min-height:370px;position:relative;isolation:isolate;}
.viewer-wrap {position:absolute;inset:0;--pointer-x:50%;--pointer-y:47%;}
.viewer-wrap::before {content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 40% 55% at var(--pointer-x) var(--pointer-y),rgba(213,221,226,.15) 0%,rgba(250,250,249,0) 85%);}
.halo {pointer-events:none;position:absolute;z-index:0;width:min(66vw,880px);aspect-ratio:1;left:50%;top:49%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(218,223,226,.24),transparent 72%);}
.three-host {width:100%;height:100%;touch-action:none;position:relative;z-index:2;outline:none;cursor:default;}
.three-host canvas {display:block;width:100%;height:100%;}
.reset-button {position:absolute;z-index:4;right:clamp(22px,4.4vw,75px);bottom:16px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;background:transparent;width:37px;height:37px;padding:0;color:#a3a5a1;opacity:.55;transition:opacity .23s,transform .23s,color .23s,border-color .23s;}
.reset-button:hover,.reset-button:focus-visible {opacity:1;color:#444;border-color:#d8d9d5;transform:rotate(-25deg);}
.bottom {position:relative;z-index:5;padding:0 clamp(22px,4.4vw,75px) clamp(24px,4vh,45px);display:flex;align-items:end;justify-content:space-between;gap:35px;pointer-events:none;}
.bottom>* {pointer-events:auto;}
.release-info {width:min(100%,400px);min-width:0;}
.release-info.changing .release-title {animation:releaseIn .5s cubic-bezier(.2,.75,.22,1) both;}
.release-info.changing .release-subtitle {animation:releaseIn .56s .04s cubic-bezier(.2,.75,.22,1) both;}
@keyframes releaseIn {from{opacity:.25;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.release-title {font-size:clamp(29px,3.9vw,54px);letter-spacing:-.065em;font-weight:600;line-height:1.1;margin:0 0 9px;overflow-wrap:anywhere;}
.release-subtitle {display:flex;align-items:center;gap:12px;color:#8b8e89;text-transform:uppercase;line-height:1.45;}
.sub-divider {color:#b9bab5;}
.audio-row {display:flex;align-items:center;gap:13px;margin-top:25px;width:min(100%,305px);}
.play-btn {display:grid;place-items:center;flex:none;width:37px;height:37px;border-radius:50%;border:1px solid #d6d8d4;background:#fff;color:#1e1e1e;transition:transform .22s,background .22s,border-color .22s;}
.play-btn:hover {transform:scale(1.08);background:#f6f6f4;border-color:#b6b9b3;}
.play-icon {margin-left:2px;}
.pause-icon {display:none;}
.play-btn.is-playing .play-icon {display:none;}
.play-btn.is-playing .pause-icon {display:block;}
.audio-text {flex:1;min-width:0;}
#seekBar {appearance:none;-webkit-appearance:none;display:block;width:100%;height:2px;border:0;border-radius:2px;background:linear-gradient(90deg,#272827 var(--seekPercent,0%),#dfdfdc var(--seekPercent,0%));cursor:pointer;margin:7px 0 10px;}
#seekBar::-webkit-slider-thumb {appearance:none;width:8px;height:8px;background:#373a35;border:0;border-radius:50%;}
#seekBar::-moz-range-thumb {width:8px;height:8px;background:#373a35;border:0;border-radius:50%;}
.audio-time {display:flex;justify-content:space-between;align-items:center;gap:10px;color:#969994;font-size:9px;font-variant-numeric:tabular-nums;}
.discs {display:flex;justify-content:flex-end;align-items:center;gap:clamp(12px,2vw,26px);padding-bottom:5px;}
.disc-option {appearance:none;border:0;border-radius:50%;padding:7px;position:relative;display:grid;place-items:center;background:transparent;transition:transform .3s cubic-bezier(.25,.7,.3,1);}
.disc-option:hover {transform:translateY(-7px) rotate(-8deg);}
.disc-option[aria-current="true"] {transform:translateY(-4px);}
.disc-option[aria-current="true"]::before {content:'';position:absolute;inset:0;border:1px solid #b2b6b1;border-radius:50%;}
.disc-thumbnail {position:relative;display:block;aspect-ratio:1;width:clamp(49px,5vw,70px);border-radius:50%;overflow:hidden;border:1px solid rgba(50,50,50,.12);background:#ddd;box-shadow:0 4px 14px rgba(34,37,35,.11),inset 0 0 0 2px #ffffff66;}
.disc-thumbnail img {height:100%;width:100%;object-fit:cover;}
.disc-thumbnail::after {content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:13%;height:13%;border-radius:50%;background:var(--bg);border:2px solid #e0e1df;box-shadow:0 0 0 3px #ffffff55;}
.fallback {position:absolute;inset:0;pointer-events:none;z-index:1;display:grid;place-items:center;}
.fake-plastic {position:relative;aspect-ratio:1;width:min(43vh,36vw,390px);border:8px solid #edf0f0;box-shadow:7px 14px 33px #00000012,inset 1px 1px 13px #00000011;border-radius:4px;transform:rotate(-10deg) rotateY(-13deg);display:grid;place-items:center;background:#f7f7f6;}
.fake-disc {width:79%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:2px 4px 12px #00000016;}
.fake-disc img {height:100%;width:100%;object-fit:cover;border-radius:50%;}
.fake-hub {position:absolute;left:50%;top:50%;width:9%;height:9%;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg);border:7px solid #d8dad6;}
.viewer-warning {position:absolute;left:50%;bottom:12%;transform:translateX(-50%);color:#898b85;text-align:center;z-index:5;font-size:10px;}
.toast {position:fixed;z-index:20;bottom:16px;left:50%;max-width:90vw;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#272727;color:white;border-radius:5px;padding:12px 16px;white-space:normal;transition:opacity .25s,transform .25s;}
.toast.show {opacity:1;transform:translate(-50%,0);}
@media (max-width:780px) {
 .shell {grid-template-rows:auto minmax(285px,1fr) auto;}
 .topline {padding:23px 25px 0;}
 .bottom {flex-direction:column;align-items:stretch;gap:24px;padding:0 25px 28px;}
 .release-info {width:100%;max-width:none;}
 .release-title {font-size:clamp(33px,7vw,50px);}
 .audio-row {width:100%;max-width:340px;margin-top:16px;}
 .discs {justify-content:center;gap:clamp(9px,4vw,24px);padding-bottom:0;}
 .disc-thumbnail {width:clamp(51px,11vw,70px);}
 .reset-button {bottom:0;right:20px;}
 .fake-plastic {width:min(57vw,330px);}
}
@media (max-width:460px) {
 .shell {grid-template-rows:auto minmax(280px,1fr) auto;}
 .topline {padding:19px 19px 0;}
 .wordmark {font-size:12px;gap:8px;}
 .logo-symbol {font-size:19px;}
 .bottom {padding:0 20px max(22px,env(safe-area-inset-bottom));gap:21px;}
 .release-title {font-size:34px;margin-bottom:7px;}
 .release-subtitle {font-size:9px;gap:9px;}
 .audio-row {margin-top:14px;}
 .discs {justify-content:space-between;gap:5px;}
 .disc-thumbnail {width:clamp(48px,15vw,66px);}
 .fake-plastic {width:64vw;}
}
@media (max-height:680px) and (min-width:781px) {
 .shell {grid-template-rows:auto minmax(310px,1fr) auto;}
 .topline {padding-top:18px;}
 .bottom {padding-bottom:20px;}
 .release-title {font-size:35px;}
 .audio-row {margin-top:15px;}
}
@media (prefers-reduced-motion:reduce) {
 *,*::before,*::after {animation-duration:.001ms!important;transition-duration:.001ms!important;}
}