*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background-color:var(--player-bg-color,#f7f4d4);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;margin:0;transition:background-color .5s ease;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}@media (max-width:480px){body{min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}}@media (max-width:480px){html{height:100%;overflow:hidden}body{height:100vh;padding-bottom:0;height:calc(100vh - 80px)}}.music-player{border-radius:min(2.5vw,20px);padding:min(2vw,16px);width:min(98vw,98vh * .8);height:min(98vh,98vw * 1.25);max-width:min(700px,98vw);max-height:min(900px,98vh);min-width:min(300px,90vw);min-height:min(400px,90vh);display:flex;flex-direction:column;transition:background-color .3s ease;box-sizing:border-box}@media (max-width:480px){.music-player{height:calc(100vh - 120px)!important;max-height:calc(100vh - 120px)!important;padding-bottom:20px;margin-bottom:0;margin:16px;width:calc(100vw - 32px);max-width:calc(100vw - 32px)}}.header-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:min(1.5vw,12px);flex-shrink:0}.control-btn{background:0 0;border:none;cursor:pointer;padding:min(1vw,8px);border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.control-btn:hover{background-color:rgba(139,69,19,.1)}.control-btn:hover svg{stroke:var(--player-fg-color,#654321)}.control-btn svg{width:min(3.5vw,28px);height:min(3.5vw,28px);stroke:var(--player-fg-color,#8b4513);stroke-width:2}.album-art-frame{width:100%;aspect-ratio:1;border-radius:min(2vw,15px);margin-bottom:0;position:relative;overflow:hidden;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.album-art-content{width:100%;height:100%;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.album-image{width:100%;height:100%;object-fit:contain;border-radius:min(2vw,15px);position:absolute;top:0;left:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.current-image{z-index:2}.next-image{z-index:1;transform:translateX(100%);opacity:0}@keyframes slideOutLeft{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-100%);opacity:0}}@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}@keyframes slideOutRight{0%{transform:translateX(0);opacity:1}100%{transform:translateX(100%);opacity:0}}@keyframes slideInLeft{0%{transform:translateX(-100%);opacity:0}100%{transform:translateX(0);opacity:1}}.slide-out-left{animation:slideOutLeft .5s ease forwards}.slide-in-right{animation:slideInRight .5s ease forwards}.slide-out-right{animation:slideOutRight .5s ease forwards}.slide-in-left{animation:slideInLeft .5s ease forwards}.song-info{text-align:center;margin-bottom:min(2vw,16px);flex-shrink:0}.song-title{font-size:min(3vw, 24px);font-weight:700;color:var(--player-fg-color,#8b4513);margin-bottom:min(1vw,8px);line-height:1.2}.song-artist{font-size:min(2vw, 16px);color:var(--player-fg-color,#8b4513);opacity:.8;font-weight:500;line-height:1.2}@media (max-width:480px){.song-title{font-size:20px;margin-bottom:6px}.song-artist{font-size:16px}.time-display{font-size:16px}}.music-controls{display:flex;flex-direction:column;gap:min(2vw,16px);flex-shrink:0}@media (max-width:480px){.music-controls{position:relative;z-index:100;margin-bottom:0;padding-bottom:30px}}.control-row{display:flex;justify-content:space-around;align-items:center;position:relative}.progress-container{display:flex;flex-direction:column;gap:min(1.5vw,10px)}.progress-bar{width:100%;height:min(.4vw,3px);background-color:var(--player-fg-color,#8b4513);border-radius:2px;position:relative;cursor:pointer}.progress-fill{width:20%;height:100%;background-color:var(--player-fg-color,#8b4513);border-radius:2px}.progress-scrubber{position:absolute;top:50%;left:20%;width:min(1.5vw,12px);height:min(1.5vw,12px);background-color:var(--player-fg-color,#8b4513);border-radius:50%;transform:translate(-50%,-50%);cursor:pointer}@media (max-width:480px){.progress-bar{height:4px}.progress-scrubber{width:16px;height:16px;min-width:16px;min-height:16px}.progress-container{gap:8px}.time-display{font-size:18px;font-weight:600}.progress-container{position:relative;z-index:10}}.time-display{display:flex;justify-content:space-between;font-size:min(1.8vw, 14px);color:var(--player-fg-color,#8b4513);font-weight:500}.volume-container{display:flex;align-items:center;gap:min(2vw,12px);margin-bottom:min(1.5vw,12px)}.volume-icon{display:flex;align-items:center;justify-content:center}.volume-icon svg{width:min(3vw,24px);height:min(3vw,24px);stroke:var(--player-fg-color,#8b4513);stroke-width:2}.volume-slider{flex:1;display:flex;align-items:center}.volume-slider-container{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--player-bg-color,#f7f4d4);border-radius:8px;padding:12px;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1000;min-width:120px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.volume-slider-container.show{opacity:1;visibility:visible}.volume-slider-container::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--player-bg-color,#f7f4d4)}.volume-control{width:100%;height:min(.3vw,2px);background:0 0;outline:0;-webkit-appearance:none;appearance:none;cursor:pointer}.volume-control::-webkit-slider-track{width:100%;height:min(.3vw,2px);background:var(--player-fg-color,#8b4513);border-radius:1px;border:none}.volume-control::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:min(1.2vw,10px);height:min(1.2vw,10px);background:var(--player-fg-color,#8b4513);border-radius:50%;cursor:pointer;border:none}.volume-control::-moz-range-track{width:100%;height:min(.3vw,2px);background:var(--player-fg-color,#8b4513);border-radius:1px;border:none}.volume-control::-moz-range-thumb{width:min(1.2vw,10px);height:min(1.2vw,10px);background:var(--player-fg-color,#8b4513);border-radius:50%;cursor:pointer;border:none}@media (max-width:480px){.volume-control::-webkit-slider-thumb{width:20px;height:20px}.volume-control::-moz-range-thumb{width:20px;height:20px}.volume-slider-container{min-width:120px;padding:12px}}.playback-controls{display:flex;justify-content:center;align-items:center;gap:min(4vw,30px)}.play-btn svg{width:min(4.5vw,36px);height:min(4.5vw,36px)}.skip-backward svg,.skip-forward svg{width:min(3.5vw,28px);height:min(3.5vw,28px)}@media (max-width:768px){.music-player{padding:min(1.5vw,12px);width:min(98vw,98vh * .8);height:min(98vh,98vw * 1.25);border-radius:min(2vw,15px)}.album-art-frame{margin-bottom:min(1.5vw,12px);border-radius:min(1.5vw,12px)}.control-btn svg{width:min(3vw,24px);height:min(3vw,24px)}.playback-controls{gap:min(2.5vw,20px)}.play-btn svg{width:min(4vw,32px);height:min(4vw,32px)}.skip-backward svg,.skip-forward svg{width:min(3vw,24px);height:min(3vw,24px)}.time-display{font-size:min(1.6vw, 13px)}}@media (max-width:480px){body{padding:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.music-player{padding:min(1vw,8px);width:calc(100vw - 32px);max-width:calc(100vw - 32px);height:calc(100vh - 120px)!important;border-radius:min(1.5vw,12px);margin:16px;margin-bottom:0;padding-bottom:20px}.header-controls{margin-bottom:min(1.5vw,12px)}.album-art-frame{margin-bottom:min(1.5vw,12px)}.music-controls{gap:min(1.5vw,12px);margin-bottom:0;padding-bottom:20px;position:relative;z-index:10}.control-row{gap:min(2vw,16px)}.playback-controls{gap:min(2vw,16px)}.control-btn{padding:min(.8vw,6px);min-width:48px;min-height:48px}.control-btn svg{width:min(4vw,32px);height:min(4vw,32px)}.play-btn svg{width:min(5.5vw,44px);height:min(5.5vw,44px)}.skip-backward svg,.skip-forward svg{width:min(4.5vw,36px);height:min(4.5vw,36px)}.volume-icon svg{width:min(4vw,32px);height:min(4vw,32px)}.volume-slider-container{min-width:100px;padding:8px}.volume-control::-webkit-slider-thumb{width:16px;height:16px}.volume-control::-moz-range-thumb{width:16px;height:16px}}@media (max-width:480px) and (max-height:800px){.music-player{padding:8px;height:calc(100vh - 120px)!important;padding-bottom:20px;margin:16px;width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.album-art-frame{margin-bottom:8px}.song-info{margin-bottom:8px}.music-controls{gap:8px;padding-bottom:20px;position:relative;z-index:10}.control-btn svg{width:32px;height:32px}.play-btn svg{width:40px;height:40px}.skip-backward svg,.skip-forward svg{width:36px;height:36px}.control-row{gap:12px;justify-content:space-evenly}.playback-controls{gap:20px}}@media (max-width:900px) and (orientation:landscape){.music-player{height:calc(100vh - 80px)!important;padding:8px;padding-bottom:20px;margin:16px;width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.album-art-frame{margin-bottom:8px}.music-controls{gap:8px;padding-bottom:20px;position:relative;z-index:10}.control-btn svg{width:28px;height:28px}.play-btn svg{width:36px;height:36px}.skip-backward svg,.skip-forward svg{width:32px;height:32px}}@media (min-width:1200px){.music-player{max-width:min(800px,70vw);max-height:min(900px,80vh);padding:min(2.5vw,25px)}.album-art-frame{margin-bottom:min(2vw,20px)}.control-btn svg{width:min(3vw,30px);height:min(3vw,30px)}.play-btn svg{width:min(4vw,40px);height:min(4vw,40px)}.skip-backward svg,.skip-forward svg{width:min(3vw,30px);height:min(3vw,30px)}.volume-icon svg{width:min(3vw,30px);height:min(3vw,30px)}.time-display{font-size:min(2vw, 16px)}}@media (orientation:landscape) and (min-width:1024px){.music-player{width:min(99vw,99vh * .8);height:min(99vh,99vw * 1.25);max-width:min(900px,75vw);padding:min(1.5vw,15px)}.header-controls{margin-bottom:min(1vw,8px)}.song-info{margin-bottom:min(1.5vw,12px)}.music-controls{gap:min(1.5vw,12px)}.control-btn svg{width:min(2.5vw,20px);height:min(2.5vw,20px)}.play-btn svg{width:min(3vw,24px);height:min(3vw,24px)}.skip-backward svg,.skip-forward svg{width:min(2.5vw,20px);height:min(2.5vw,20px)}.volume-icon svg{width:min(2.5vw,18px);height:min(2.5vw,18px)}}@media (orientation:portrait){.album-art-frame{margin-bottom:min(3vw,24px)}}.progress-scrubber:hover{transform:translate(-50%,-50%) scale(1.2)}.progress-bar:hover .progress-scrubber{transform:translate(-50%,-50%) scale(1.1)}.control-btn:focus{outline:2px solid var(--player-fg-color,#8b4513);outline-offset:2px}.progress-bar:focus{outline:2px solid var(--player-fg-color,#8b4513);outline-offset:2px}.modal{display:flex;align-items:center;justify-content:center;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0);backdrop-filter:blur(0px);opacity:0;visibility:hidden;pointer-events:none;transition:all .2s cubic-bezier(.25, .46, .45, .94)}.modal.show{background-color:rgba(0,0,0,.5);backdrop-filter:blur(5px);opacity:1;visibility:visible;pointer-events:auto}.modal-content{background-color:var(--player-bg-color,#f7f4d4);border-radius:min(2.5vw,20px);padding:min(3vw,24px);width:min(90vw,500px);max-height:80vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);transform:scale(.7) translateY(40px);opacity:0;transition:all .2s cubic-bezier(.25, .46, .45, .94);display:flex;flex-direction:column}.modal.show .modal-content{transform:scale(1) translateY(0);opacity:1}.modal-header{display:flex;justify-content:center;align-items:center;margin-bottom:min(2vw,16px);padding-bottom:min(1.5vw,12px)}.modal-header h3{color:var(--player-fg-color,#8b4513);font-size:min(4vw, 28px);font-weight:700;margin:0}.modal-body{color:var(--player-fg-color,#8b4513);flex:1;overflow-y:auto;padding-right:8px;margin-right:-8px}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-track{background:rgba(139,69,19,.1);border-radius:3px}.modal-body::-webkit-scrollbar-thumb{background:rgba(139,69,19,.3);border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover{background:rgba(139,69,19,.5)}.modal-body p{margin-bottom:min(1.5vw,12px);font-size:min(2.5vw, 16px);line-height:1.5}.modal-body ul{margin-bottom:min(2vw,16px);padding-left:min(3vw,20px)}.modal-body li{margin-bottom:min(1vw,8px);font-size:min(2.5vw, 16px);line-height:1.4}.modal-body kbd{background-color:rgba(139,69,19,.1);border:1px solid var(--player-fg-color,#8b4513);border-radius:4px;padding:2px 6px;font-family:monospace;font-size:.9em}.modal-footer{margin-top:min(3vw,24px);padding-top:min(2vw,16px);text-align:center;flex-shrink:0;border-top:1px solid rgba(139,69,19,.2)}.modal-close-btn-large{background-color:var(--player-fg-color,#8b4513);color:var(--player-bg-color,#f7f4d4);border:none;border-radius:min(2.5vw,20px);padding:min(2vw,16px) min(4vw,32px);font-size:min(2.5vw, 18px);font-weight:600;cursor:pointer;transition:all .2s ease;width:100%;box-shadow:0 2px 8px rgba(0,0,0,.15);letter-spacing:.5px}.modal-close-btn-large:hover{background-color:var(--player-fg-color,#8b4513);opacity:.9;transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.25)}.modal-close-btn-large:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.15)}@media (max-width:768px){.modal-content{width:95vw;padding:min(4vw,20px)}.modal-header h3{font-size:min(5vw, 24px)}.modal-body li,.modal-body p{font-size:min(3vw, 14px)}}@media (max-width:480px){.modal-content{width:98vw;padding:16px;margin:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.modal-header h3{font-size:20px}.modal-body li,.modal-body p{font-size:14px}.modal-close-btn-large{padding:14px 24px;font-size:16px;width:100%}}