body{background-color:#121212;color:#fff;font-family:Arial,sans-serif;margin:0;padding:0;text-align:center}.App-header{padding:20px;text-align:center;border-bottom:2px solid #444}.logo{width:auto;height:300px;margin-bottom:10px}.App-header h1{margin:0;font-size:2.5em}nav ul{list-style-type:none;padding:0;margin:20px 0 0}nav ul li{display:inline;margin:0 15px}nav ul li a{color:#fff;text-decoration:none;font-weight:700}nav ul li a:hover{text-decoration:underline}main{padding:20px;text-align:center}section{margin:40px 0}footer{background-color:#1f1f1f;padding:10px;text-align:center;border-top:2px solid #444}.audio-player{border:1px solid #ff6b35;border-radius:12px;padding:20px;margin:20px auto;max-width:500px;box-shadow:0 0 20px #ff6b354d,inset 0 1px #ffffff1a;position:relative;overflow:hidden}.audio-player:before{content:"";position:absolute;top:0;left:0;right:0;height:0px;background:linear-gradient(90deg,#ff6b35,#f7931e,#ff6b35);animation:pulse-border 2s ease-in-out infinite alternate}@keyframes pulse-border{0%{opacity:.5}to{opacity:1}}.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.track-name{color:#ff6b35;font-size:1.4em;font-weight:700;margin:0;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 10px rgba(255,107,53,.5)}.punk-decoration{font-size:1.5em;animation:rock 1s ease-in-out infinite alternate}@keyframes rock{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.player-controls{display:flex;align-items:center;gap:15px;margin-bottom:15px}.play-button{background:linear-gradient(135deg,#ff6b35,#f7931e);border:none;border-radius:50%;width:60px;height:60px;font-size:1.5em;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff6b3566,inset 0 1px #fff3;position:relative;overflow:hidden}.play-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #ff6b3599,inset 0 1px #ffffff4d}.play-button:active{transform:scale(.95)}.play-button.playing{animation:playing-pulse 1.5s ease-in-out infinite}@keyframes playing-pulse{0%,to{box-shadow:0 4px 15px #ff6b3566}50%{box-shadow:0 4px 25px #ff6b35cc}}.progress-container{display:flex;align-items:center;gap:10px;flex:1}.time-display{color:#ccc;font-size:.9em;font-weight:700;min-width:40px;text-align:center}.progress-bar{flex:1;height:8px;background:#333;border-radius:4px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-bar::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#ff6b35,#f7931e);cursor:pointer;box-shadow:0 2px 6px #ff6b3566;transition:all .2s ease}.progress-bar::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 3px 10px #ff6b3599}.progress-bar::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#ff6b35,#f7931e);cursor:pointer;border:none;box-shadow:0 2px 6px #ff6b3566}.progress-bar::-webkit-slider-track{background:linear-gradient(90deg,#ff6b35,#333 0%);height:8px;border-radius:4px}.volume-control{display:flex;align-items:center;gap:10px;justify-content:center}.volume-icon{font-size:1.2em}.volume-slider{width:100px;height:6px;background:#333;border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#ff6b35;cursor:pointer;transition:all .2s ease}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2);background:#f7931e}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#ff6b35;cursor:pointer;border:none}@media (max-width: 600px){.audio-player{margin:20px 10px;padding:15px}.player-controls{flex-direction:column;gap:10px}.progress-container{width:100%}.play-button{width:50px;height:50px;font-size:1.2em}}.logo{will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}