:root{--primary-yellow:#FFF500;--primary-yellow-light:#ffe066;--primary-yellow-medium:#ffc857;--surface-primary:rgba(32, 32, 36, 0.85);--surface-secondary:rgba(255, 255, 255, 0.08);--surface-hover:rgba(255, 255, 255, 0.12);--surface-active:rgba(255, 255, 255, 0.15);--text-primary:#fffce4;--text-gradient-start:#faed88;--text-gradient-middle:#fffdf5;--text-gradient-end:#fffffaaf;--border-primary:rgba(255, 255, 255, 0.2);--border-secondary:rgba(255, 255, 255, 0.15);--border-hover:rgba(255, 255, 255, 0.25);--shadow-primary:rgba(0, 0, 0, 0.25);--shadow-secondary:rgba(0, 0, 0, 0.2);--glow-primary:rgba(255, 245, 0, 0.15);--glow-secondary:rgba(255, 245, 0, 0.06);--container-max-width:410px;--container-min-width:320px;--logo-size:90px;--progress-height:15px;--button-size-play:32px;--button-size-skip:26px;--spacing-xs:4px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:24px;--spacing-xl:28px;--radius-sm:10px;--radius-md:24px;--radius-full:50%;--font-primary:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;--font-weight-bold:800;--font-weight-normal:600;--font-size-title:1.25rem;--font-size-time:0.88rem;--transition-fast:0.15s;--transition-normal:0.25s;--transition-slow:0.3s;--easing-primary:cubic-bezier(0.4, 0, 0.2, 1)}@keyframes pulse-glow{0%,100%{box-shadow:0 12px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2),0 0 20px var(--glow-primary)}50%{box-shadow:0 12px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2),0 0 40px var(--glow-primary),0 0 60px rgba(255,245,0,.2)}}@keyframes elastic-scale{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}40%{transform:scale(.95)}60%{transform:scale(1.15)}}@keyframes slide-bounce{0%{transform:translateX(-10px) scale(.8);opacity:0}60%{transform:translateX(5px) scale(1.1);opacity:.8}100%{transform:translateX(0) scale(1);opacity:1}}@keyframes sound-wave{0%,100%{transform:scaleY(1);opacity:.7}50%{transform:scaleY(1.5);opacity:1}}.dp-player{width:100%;max-width:var(--container-max-width);min-width:var(--container-min-width);margin:1rem auto -.5rem;display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;background:var(--surface-primary);border-radius:16px;border:1px solid rgba(255,245,0,.4);box-shadow:0 8px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.05),0 0 15px rgba(255,245,0,.08);padding:var(--spacing-md) var(--spacing-xl);position:relative;transform:translateZ(0);backface-visibility:hidden;perspective:1000px;transition:.3s;overflow:visible;transform-origin:center center;isolation:isolate;contain:layout style paint;will-change:auto;z-index:10}.dp-player:hover{transform:scale(1.01) translateZ(0);box-shadow:0 12px 40px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.08),0 0 25px rgba(255,245,0,.12)}.hero,.hero .hero-inner{overflow:visible!important}.dp-player .DP-logo{height:var(--logo-size);width:var(--logo-size);border-radius:8px;object-fit:cover;box-shadow:0 4px 16px rgba(0,0,0,.2);margin-right:var(--spacing-lg);border:none;position:relative;overflow:hidden;transform:translateZ(0);transition:all var(--transition-slow) var(--easing-primary)}.dp-player .DP-logo:hover{transform:scale(1.05) rotate(1deg) translateZ(0);box-shadow:0 8px 24px rgba(0,0,0,.3)}.dp-player .DP-main-content{flex:1;display:flex;flex-direction:column;justify-content:center;font-family:var(--font-primary);position:relative}.dp-player .DP-song-title{text-align:center;margin-bottom:var(--spacing-xs);margin-top:0;font-size:var(--font-size-title);font-weight:var(--font-weight-bold);letter-spacing:-.015em;line-height:1.2;color:var(--text-primary);font-family:var(--font-primary);text-shadow:0 2px 8px var(--shadow-primary);background:linear-gradient(135deg,var(--text-gradient-start) 20%,var(--text-gradient-middle) 100%,var(--text-gradient-end) 20%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.dp-player .DP-progress-row{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin-top:0;margin-bottom:var(--spacing-xs)}.dp-player .DP-progress-times{display:flex;justify-content:space-between;align-items:center;position:relative;width:100%;margin-top:var(--spacing-xs);font-size:var(--font-size-time)}.dp-player .DP-elapsed-time,.dp-player .DP-total-time{min-width:32px;font-size:var(--font-size-time);color:var(--text-primary);font-weight:var(--font-weight-normal)}.dp-player .DP-progress-bar-container{width:100%;display:flex;align-items:center;margin-top:var(--spacing-sm)}.dp-player .DP-progress-bar-bg{width:100%;margin-left:0;height:var(--progress-height);background:var(--surface-secondary);border-radius:999px;position:relative;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 2px 8px var(--glow-secondary);border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:all var(--transition-slow) ease;transform:translateZ(0)}.dp-player .DP-progress-bar-bg:hover{background:var(--surface-hover);box-shadow:inset 0 1px 2px rgba(0,0,0,.2),0 4px 12px var(--glow-primary),0 2px 8px rgba(0,0,0,.1);transform:scaleY(1.1) translateZ(0)}.dp-player .DP-progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-yellow) 0,var(--primary-yellow-light) 50%,var(--primary-yellow-medium) 100%);border-radius:999px;width:0%;transition:width var(--transition-slow) var(--easing-primary);position:absolute;left:0;top:0;box-shadow:0 0 40px var(--glow-primary);filter:brightness(1.1)}.dp-player .DP-progress-bar::before{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:linear-gradient(135deg,var(--text-primary) 0,var(--primary-yellow-light) 100%);border-radius:var(--radius-full);box-shadow:0 0 12px var(--glow-primary),0 2px 8px var(--shadow-primary)}.dp-player .DP-controls{position:static;margin-top:-7px;display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.dp-player .DP-controls button{background:var(--surface-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius-full);color:var(--text-primary);box-shadow:0 6px 20px var(--shadow-secondary),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden;cursor:pointer;outline:0;display:flex;justify-content:center;align-items:center;transform:translateZ(0);backface-visibility:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:.2s}.dp-player .DP-controls button i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;line-height:1;transition:.2s}.dp-player .DP-controls button:hover{transform:translateY(-2px) scale(1.05) translateZ(0);background:var(--surface-hover);box-shadow:0 8px 25px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2)}.dp-player .DP-controls button:hover i{transform:scale(1.1)}.dp-player .DP-controls button:active,.dp-player .DP-controls button:focus,.dp-player .DP-controls button:focus-visible,.dp-player .DP-controls button:focus-within{background:var(--surface-secondary)!important;border:1px solid var(--border-secondary)!important;color:var(--text-primary)!important;box-shadow:0 6px 20px var(--shadow-secondary),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.15)!important;transform:none!important;outline:0!important}.dp-player .DP-controls button:active i,.dp-player .DP-controls button:focus i{transform:none!important;color:var(--text-primary)!important}.dp-player .DP-controls .DP-next-btn,.dp-player .DP-controls .DP-prev-btn{width:var(--button-size-skip);height:var(--button-size-skip);font-size:.95rem}.dp-player .DP-controls .DP-pause-btn,.dp-player .DP-controls .DP-play-btn{width:var(--button-size-play);height:var(--button-size-play);font-size:1rem;background:var(--surface-hover);border:2px solid var(--border-primary);box-shadow:0 12px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2);font-weight:var(--font-weight-bold);position:relative;z-index:10;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:visible;transition:.2s}.dp-player .DP-controls .DP-pause-btn:hover,.dp-player .DP-controls .DP-play-btn:hover{transform:translateY(-3px) scale(1.08) translateZ(0);background:rgba(255,255,255,.18);box-shadow:0 16px 40px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.3)}.dp-player .DP-controls .DP-pause-btn:active,.dp-player .DP-controls .DP-pause-btn:focus,.dp-player .DP-controls .DP-pause-btn:focus-visible,.dp-player .DP-controls .DP-play-btn:active,.dp-player .DP-controls .DP-play-btn:focus,.dp-player .DP-controls .DP-play-btn:focus-visible{background:var(--surface-hover)!important;border:2px solid var(--border-primary)!important;box-shadow:0 12px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2)!important;transform:none!important;outline:0!important}.dp-player .DP-controls .DP-play-btn.playing{position:relative}.dp-player .DP-controls .DP-play-btn.playing::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:var(--radius-full);background:radial-gradient(circle,var(--glow-primary) 0,rgba(255,245,0,.05) 50%,transparent 70%);animation:1.5s ease-in-out infinite sound-wave;pointer-events:none;z-index:-1}.dp-player .DP-controls .DP-pause-btn{display:none}@media (max-width:600px){.dp-player{padding:18px 24px;margin-left:12px;margin-right:12px}.dp-player .DP-logo{height:85px;width:85px;margin-right:20px}.dp-player .DP-song-title{font-size:1.18rem}.dp-player .DP-controls{margin-top:-13px}}@media (max-width:768px){.dp-player .DP-controls button:focus{outline:0!important}.dp-player:hover{transform:none!important;box-shadow:0 8px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.05),0 0 15px rgba(255,245,0,.08)!important}.dp-player .DP-controls button:hover{transform:none!important;background:var(--surface-secondary)!important;box-shadow:0 6px 20px var(--shadow-secondary),0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.15)!important}.dp-player .DP-controls button:hover i{transform:none!important}.dp-player .DP-controls .DP-pause-btn:hover,.dp-player .DP-controls .DP-play-btn:hover{transform:none!important;background:var(--surface-hover)!important;box-shadow:0 12px 32px var(--shadow-primary),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.2)!important}}@media (max-width:400px){.dp-player{padding:16px 20px;margin-left:8px;margin-right:8px}.dp-player .DP-logo{height:70px;width:70px;margin-right:15px}.dp-player .DP-song-title{font-size:1rem}}