*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#0a0a0e;width:100%}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}.scene{-webkit-user-select:none;user-select:none;perspective:1800px;background:radial-gradient(at 50% 45%,#111115 0%,#0a0a0d 50%,#050507 100%);justify-content:center;align-items:center;width:100vw;height:100vh;font-family:Outfit,sans-serif;display:flex;position:fixed;inset:0;overflow:hidden}.scene:after{content:"";pointer-events:none;z-index:1;opacity:.3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px 256px;position:absolute;inset:0}.sceneVignette{pointer-events:none;z-index:90;background:radial-gradient(#0000 55%,#00000073 100%);position:absolute;inset:0}.playerColumn{z-index:50;flex-direction:column;align-items:center;display:flex}.player{z-index:50;position:relative}.player:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 50% 40%,#ffffff08 0%,#0000 70%);border-radius:50%;position:absolute;inset:-50px -50px -80px}.playerBody{--size:clamp(260px, 24vw, 380px);width:var(--size);height:var(--size);background:linear-gradient(170deg,#ffffff1f 0%,#0000 40% 70%,#0000000a 100%),linear-gradient(#f6f6f8 0%,#eeeeef 50%,#e8e8ea 100%);border-radius:24px;flex-direction:column;align-items:center;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 2px #00000026,0 4px 12px #00000040,0 20px 50px #00000059,0 50px 100px #00000040,inset 0 1px #fff9,inset 0 -1px #0000000a}.topControls{z-index:2;justify-content:center;align-items:center;gap:8px;padding:14px 0 8px;display:flex}.topBtn{cursor:pointer;background:linear-gradient(145deg,#eeeef0 0%,#dddde0 100%);border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;transition:box-shadow .15s;display:flex;box-shadow:0 1px 2px #0000001a,inset 0 .5px .5px #ffffff80}.topBtn:active{box-shadow:inset 0 1px 2px #0000001a}.topBtnIcon{color:#999;font-size:7px;line-height:1}.topBtn.playBtn{width:22px;height:22px}.topBtn.playBtn .topBtnIcon{margin-left:1px;font-size:8px}.discWellArea{flex:1;justify-content:center;align-items:center;width:100%;display:flex}.discWellOuter{aspect-ratio:1;background:linear-gradient(145deg,#d8d8da 0%,#c0c0c2 100%);border-radius:50%;width:72%;padding:2px;box-shadow:inset 0 1px 1px #ffffff4d,0 1px 2px #00000014}.discWell{background:radial-gradient(circle at 42% 38%,#ffffff0d 0%,#0000 50%),radial-gradient(circle,#d6d6d8 0%,#c8c8ca 40%,#bcbcbe 70%,#b4b4b6 100%);border-radius:50%;width:100%;height:100%;position:relative;box-shadow:inset 0 3px 12px #0000001f,inset 0 -1px 4px #ffffff40,inset 0 0 20px #0000000a}.discWellRing{pointer-events:none;border:1px solid #00000008;border-radius:50%;position:absolute}.ring1{width:60%;height:60%;top:20%;left:20%}.ring2{width:30%;height:30%;top:35%;left:35%}.discWellSpindle{background:radial-gradient(circle at 35% 35%,#c8c8ca 0%,#a0a0a2 60%,#909092 100%);border:1px solid #858587;border-radius:50%;width:18px;height:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 2px #00000026,inset 0 .5px 1px #ffffff4d}.spindleTop{background:radial-gradient(circle at 40% 35%,#bbbbbe,#909092);border-radius:50%;width:7px;height:7px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 .5px .5px #fff6}.speakerArea{width:100%;height:28%;position:relative;overflow:hidden}.cornerSpeaker{width:50%;height:100%;position:absolute;bottom:0;overflow:hidden}.cornerSpeaker.left{left:0}.cornerSpeaker.right{right:0}.speakerHoles{background:radial-gradient(circle,#b4b4b699 1px,#0000 1px) 0 0/6px 6px;width:100%;height:100%;position:absolute;bottom:0}.cornerSpeaker.left .speakerHoles{-webkit-mask-image:radial-gradient(circle at 0 100%,#000 0% 65%,#0000 66%);mask-image:radial-gradient(circle at 0 100%,#000 0% 65%,#0000 66%)}.cornerSpeaker.right .speakerHoles{-webkit-mask-image:radial-gradient(circle at 100% 100%,#000 0% 65%,#0000 66%);mask-image:radial-gradient(circle at 100% 100%,#000 0% 65%,#0000 66%)}.pullCord{z-index:49;flex-direction:column;align-items:center;display:flex;position:absolute;bottom:-120px;left:50%;transform:translate(-50%)}.cordLine{background:linear-gradient(#d0d0d2 0%,#c8c8ca 50%,#bbbbbe 100%);border-radius:1px;width:2px;height:100px;box-shadow:1px 0 2px #0000000f}.cordEnd{background:radial-gradient(circle at 40% 35%,#e8e8ea,#ccccce);border-radius:50%;width:12px;height:12px;margin-top:-1px;box-shadow:0 1px 3px #00000026,inset 0 .5px 1px #ffffff80}.cdContainer{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.cd{will-change:transform, opacity, width, height;border-radius:50%;width:220px;height:220px;transition:filter .4s;position:absolute}.cd.active{filter:drop-shadow(0 0 24px #ffffff2e)drop-shadow(0 0 60px #ffffff14)}.cdDisc{border-radius:50%;width:100%;height:100%;position:relative;overflow:hidden;box-shadow:0 2px 8px #0006,0 8px 24px #00000080,0 16px 48px #0000004d}.cdRim{pointer-events:none;z-index:5;border:1.5px solid #ffffff1f;border-radius:50%;position:absolute;inset:0}.cdArt{border-radius:50%;width:100%;height:100%}.cdTracks{background:repeating-radial-gradient(circle,#0000 0 3px,#ffffff0f 3px 4px);border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.cdSheen{background:linear-gradient(130deg,#fff6 0%,#ffffff1a 25%,#0000 45% 55%,#ffffff14 80%,#fff3 100%);border-radius:50%;width:100%;height:100%;position:absolute;top:0;left:0}.cdHole{background:radial-gradient(circle,#1a1a1e 0%,#111114 100%);border:2px solid #ffffff0f;border-radius:50%;width:17%;height:17%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px 4px #0006}.cdHole:after{content:"";border:1.5px solid #0000000f;border-radius:50%;width:38%;height:38%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cd.active .cdDisc{animation:3.5s linear infinite spin}.cd.active .cdHole{background:0 0;border-color:#0000000f;box-shadow:inset 0 1px 2px #00000014}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.songInfo{text-align:center;z-index:100;opacity:0;pointer-events:none;white-space:nowrap;margin-bottom:40px;transition:opacity .8s}.songInfo.visible{opacity:1}.songTitle{color:#eaeaee;letter-spacing:5px;text-transform:uppercase;text-shadow:0 1px 12px #0009;font-size:18px;font-weight:300}.songArtist{color:#777;letter-spacing:4px;text-transform:uppercase;margin-top:8px;font-size:11px;font-weight:300}.trackPosition{color:#555;letter-spacing:2px;font-variant-numeric:tabular-nums;opacity:0;margin-top:140px;font-size:9px;transition:opacity .8s}.trackPosition.visible{opacity:1}.eq{z-index:100;opacity:0;justify-content:center;align-items:flex-end;gap:3px;height:22px;margin-bottom:6px;transition:opacity .6s;display:flex}.eq.visible{opacity:1}.eqBar{background:#ffffff59;border-radius:1.5px;width:3px;animation:.7s ease-in-out infinite alternate eqAnim}.eqBar:first-child{height:7px;animation-delay:0s}.eqBar:nth-child(2){height:13px;animation-delay:.12s}.eqBar:nth-child(3){height:9px;animation-delay:.24s}.eqBar:nth-child(4){height:17px;animation-delay:80ms}.eqBar:nth-child(5){height:5px;animation-delay:.2s}@keyframes eqAnim{0%{transform:scaleY(.25)}to{transform:scaleY(1)}}.scrollHint{color:#666;letter-spacing:3px;text-transform:uppercase;z-index:100;font-size:10px;transition:opacity .5s;position:fixed;bottom:18px;left:50%;transform:translate(-50%)}.scrollHintArrow{text-align:center;margin-bottom:2px;font-size:14px;animation:1.6s ease-in-out infinite bob;display:block}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}