:root{--cream:#eee7db;--ink:#17120f;--wine:#6e1026;--pink:#e69cab;--silver:#c9cbd0}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}body{overflow-x:hidden}.noise{position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}header,footer{height:48px;border-bottom:1px solid rgba(23,18,15,.25);display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:10px;font-weight:700;letter-spacing:.14em}main{min-height:calc(100vh - 96px);display:grid;grid-template-columns:1fr 1fr}.copy{padding:9vh 7vw 6vh;display:flex;flex-direction:column;justify-content:center}.kicker{font-size:10px;letter-spacing:.25em;font-weight:700;color:var(--wine)}h1{font:400 clamp(70px,9vw,145px)/.75 Italiana,serif;letter-spacing:-.06em;margin:35px 0}h1 em{font-style:italic;color:var(--wine)}.intro{max-width:520px;font:400 clamp(17px,1.5vw,22px)/1.55 Italiana,serif}.player{margin-top:30px;border-top:1px solid #8f877d;border-bottom:1px solid #8f877d;padding:16px 0;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:14px}.player button{width:46px;height:46px;border:0;border-radius:50%;background:var(--wine);color:white}.track strong,.track small{display:block}.track strong{font-size:11px;letter-spacing:.12em}.track small{font-size:9px;color:#796f66;margin-top:4px}.bar{height:2px;background:#b9b0a5;margin-top:10px}.bar i{display:block;width:0;height:100%;background:var(--wine)}.playing .bar i{animation:progress 8s linear forwards}.player time{font-size:10px}.quote{min-height:56px;padding:20px 0;font:italic 19px Italiana,serif;color:var(--wine)}.disclaimer{font-size:9px;line-height:1.5;max-width:520px;color:#80766c}.art{position:relative;overflow:hidden;background:radial-gradient(circle at 60% 35%,#9d324b 0,#5f0c20 40%,#25050d 100%);min-height:720px}.art:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 57%);transform:translateX(-100%);animation:shine 7s ease-in-out infinite}.chrome{position:absolute;left:6%;top:7%;color:#e7e4e2;font:400 clamp(45px,5.5vw,95px)/.76 Italiana;letter-spacing:-.05em;text-shadow:0 1px #fff,0 3px #777,0 6px #28151a}.chrome span{color:var(--pink)}.disc{position:absolute;width:min(38vw,560px);height:min(38vw,560px);border-radius:50%;right:-7vw;bottom:-4vw;background:repeating-radial-gradient(circle,#181516 0 3px,#393234 4px 5px,#171315 6px 9px);box-shadow:-30px 35px 70px rgba(0,0,0,.4);animation:spin 11s linear infinite paused}.playing~.art .disc,.art.playing .disc{animation-play-state:running}.disc-ring{position:absolute;inset:15%;border:1px solid rgba(255,255,255,.25);border-radius:50%}.label{position:absolute;inset:34%;border-radius:50%;background:var(--pink);display:grid;place-items:center;align-content:center;color:#521022}.label:after{content:"";width:13%;aspect-ratio:1;border-radius:50%;background:#1a1516;position:absolute}.label b{font:400 clamp(18px,2vw,34px) Italiana;margin-bottom:35%}.label small{font-size:8px;letter-spacing:.2em}.sticker{position:absolute;right:6%;top:7%;border:2px solid #fff;color:#fff;padding:7px;text-align:center;transform:rotate(3deg)}.sticker strong,.sticker span{display:block}.sticker strong{font-size:11px}.sticker span{font-size:6px;letter-spacing:.1em}.equalizer{position:absolute;left:6%;bottom:7%;height:90px;display:flex;gap:4px;align-items:end}.equalizer i{display:block;width:5px;height:15%;background:var(--pink)}.playing .equalizer i{animation:bounce .65s ease-in-out infinite alternate}.equalizer i:nth-child(3n){animation-delay:.2s}.equalizer i:nth-child(4n){animation-delay:.4s}footer{border-top:1px solid rgba(23,18,15,.25);border-bottom:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shine{50%,100%{transform:translateX(130%)}}@keyframes progress{to{width:100%}}@keyframes bounce{to{height:90%}}
@media(max-width:760px){header{padding:0 15px}header span:last-child{display:none}main{grid-template-columns:1fr}.copy{padding:70px 20px 45px}h1{font-size:75px;margin:30px 0}.art{min-height:560px}.disc{width:430px;height:430px;right:-150px;bottom:-45px}.chrome{font-size:56px}.sticker{top:5%}.equalizer{bottom:20px}footer{height:auto;min-height:55px;padding:15px;font-size:8px}footer span:last-child{display:none}}