@keyframes pulse-border{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.7;transform:scale(1.002)}}@keyframes waveform{0%{transform:scaleY(.25)}to{transform:scaleY(1.15)}}@keyframes bar1{0%,to{height:3px}50%{height:14px}}@keyframes bar2{0%,to{height:14px}50%{height:6px}}@keyframes bar3{0%,to{height:6px}50%{height:12px}}.animate-bar1{animation:.8s ease-in-out infinite bar1}.animate-bar2{animation:.8s ease-in-out infinite bar2}.animate-bar3{animation:.8s ease-in-out infinite bar3}@keyframes musicalGlow{0%,to{border-color:#818cf873;box-shadow:0 0 15px #6366f140,0 0 5px #8b5cf626}50%{border-color:#8b5cf6d9;box-shadow:0 0 25px #6366f180,0 0 12px #8b5cf659}}.active-music-card{animation:2s ease-in-out infinite musicalGlow;background:linear-gradient(90deg,#6366f11a 0%,#8b5cf626 100%)!important}.card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(135deg,#181824 0%,#222232 50%,#151520 100%);border:1px solid #ffffff1f;border-radius:2.5rem;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:800px;margin:0 auto;padding:2.5rem;transition:all .5s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:0 30px 70px -15px #0f172a40}@media (min-width:768px) and (max-width:1023px){.card{flex-direction:row;padding:3rem}}.card:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle at 20%,#0891b226 0%,#0000 60%);position:absolute;inset:0}.card:after{content:"";opacity:.08;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");position:absolute;inset:0}.card.is-zoomed{border-color:#8b5cf64d;transform:scale(1.02);box-shadow:0 35px 80px -10px #8b5cf64d}.mask{cursor:pointer;z-index:10;background:#000;border-radius:50%;flex-shrink:0;width:200px;height:200px;transition:transform .6s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 15px 35px #0009,inset 0 0 0 1px #fff3}@media (min-width:640px){.mask{width:240px;height:240px}}.mask.is-zoomed{transform:scale(1.1)rotate(5deg);box-shadow:0 25px 45px #000000b3,inset 0 0 0 1.5px #ffffff4d}.spin{background:radial-gradient(circle,#333 1px,#0f0f0f 4px,#1c1c1c 8px,#0f0f0f 16px,#262626 18px,#0a0a0a 28px,#1a1a1a 30px,#0a0a0a 40px,#262626 42px,#0a0a0a 52px,#1c1c1c 54px,#050505 100%);border-radius:50%;width:100%;height:100%;transition:transform .1s linear;position:relative}.cover{object-fit:cover;clip-path:circle(35%);pointer-events:none;border-radius:50%;width:100%;height:100%;transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);position:absolute;inset:0}.cover-enter{opacity:0;transform:scale(.85)rotate(-30deg)}.cover-exit{opacity:0;transform:scale(1.15)rotate(30deg)}.hole{z-index:20;pointer-events:none;background:#09062b;border:3px solid #ffffff40;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;margin:auto;display:flex;position:absolute;inset:0;box-shadow:0 0 10px #00000080}.hole-inner{background:#fff;border-radius:50%;width:4px;height:4px}.info{text-align:left;z-index:10;flex-direction:column;flex-grow:1;gap:1.5rem;width:100%;display:flex}.scales{opacity:.15;width:100%;height:60px;transition:opacity .5s}.is-playing .scales{opacity:.55}.scales circle{fill:#818cf8;stroke:#ffffff0d;transition:fill .3s}.track-info{height:64px;position:relative;overflow:hidden}.ti-layer{flex-direction:column;transition:all .6s cubic-bezier(.16,1,.3,1);display:flex}.ti-abs{position:absolute;top:0;left:0;right:0}.ti-layer .artist{text-transform:uppercase;letter-spacing:.2em;color:#ffffff73;margin:0;font-size:.65rem;font-weight:800;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}.ti-layer .track{color:#fff;margin-top:4px;margin-bottom:0;font-size:1.5rem;font-weight:900;line-height:1.25;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .6s cubic-bezier(.16,1,.3,1)}.ti-enter{opacity:0;transform:translateY(var(--dx,20px))}.ti-enter.artist,.ti-enter.track{opacity:1;transform:translateY(0)}.ti-exit{opacity:0;transform:translateY(calc(-1 * var(--dx,20px)))}.bar{cursor:pointer;background:#ffffff26;border-radius:99px;width:100%;height:4px;transition:height .25s cubic-bezier(.16,1,.3,1);position:relative}.bar:hover{height:6px}.bar-fill{background:linear-gradient(90deg,#38bdf8,#818cf8);border-radius:99px;height:100%;position:absolute;top:0;left:0}.time{font-family:var(--font-mono);color:#fff6;justify-content:flex-end;gap:.3rem;margin-top:6px;font-size:10px;font-weight:700;display:flex}.time .current{color:#ffffffa6}.controls{justify-content:space-between;align-items:center;width:100%;max-width:320px;margin:0 auto;display:flex}.ctrl{color:#ffffff80;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:relative}.ctrl:hover{color:#fff;background:#ffffff14;transform:scale(1.08)}.ctrl:active{transform:scale(.95)}.ctrl-play{color:#09062b;background:#fff;width:48px;height:48px;box-shadow:0 8px 20px #0000004d}.ctrl-play:hover{color:#09062b;background:#f1f5f9;transform:scale(1.12);box-shadow:0 10px 25px #ffffff40}.ctrl-toggle.is-active{color:#38bdf8;background:#38bdf814}.ctrl-loop{position:relative}.loop-one{color:#000;background:#38bdf8;border-radius:50%;justify-content:center;align-items:center;width:11px;height:11px;font-size:8px;font-weight:950;display:none;position:absolute;top:1px;right:1px}.mode-one .loop-one{display:flex}