*{box-sizing:border-box}body{margin:0;background:#000;color:#ddd;font:14px Arial;min-height:100vh}main{min-height:calc(100vh - 45px);display:flex;flex-direction:column;align-items:center;padding:18px;background:radial-gradient(circle at 50% 35%,#171717,#000 65%)}.online{color:#777;font-size:12px;margin-bottom:18px}.online:first-letter{color:#31df6b}.online b{color:#ddd}.hero{text-align:center}.hero img{width:min(360px,80vw);height:220px;object-fit:cover;mix-blend-mode:screen;opacity:.9}.hero h1{font:42px Georgia;color:#d2a52d;letter-spacing:5px;margin:-8px 0 4px}.hero p{color:#777;font-style:italic;margin:0 0 22px}.player{width:min(720px,96vw);display:flex;gap:22px;align-items:center;padding:18px;border:1px solid #252525;border-radius:12px;background:#080808}.disc{width:180px;height:180px;min-width:180px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#111 0 2px,#292929 3px 4px,#050505 5px 8px);border:4px solid #191919;box-shadow:0 0 24px #38290c}.disc span{width:65px;height:65px;border-radius:50%;display:grid;place-items:center;text-align:center;border:2px solid #cda22e;color:#cda22e;font-weight:bold;font-size:9px}.playing .disc{animation:spin 7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.info{flex:1}.info h2{font-size:17px;margin:0 0 4px}.info small{color:#666}.bar{display:grid;grid-template-columns:35px 1fr 35px;gap:8px;align-items:center;margin:24px 0 10px;color:#555;font-size:10px}.bar input,.vol input{width:100%;accent-color:#cda22e}.buttons{display:flex;justify-content:center;align-items:center;gap:22px}.buttons button,.vol button,.share button{border:0;background:none;color:#999;cursor:pointer}.buttons #play{width:48px;height:48px;border-radius:50%;background:#d1a52e;color:#000;font-size:18px}.vol{display:flex;gap:8px;align-items:center;margin-top:14px;color:#666}.vol button{margin-left:auto;font-size:11px}#playlist{width:min(720px,96vw);display:none;margin-top:8px;background:#070707;border:1px solid #1d1d1d;border-radius:8px;overflow:hidden}.song{padding:12px;border-bottom:1px solid #151515;color:#777;cursor:pointer}.song.active{color:#d1a52e}.share{margin-top:16px}.share button{border:1px solid #242424;border-radius:20px;padding:9px 15px}footer{text-align:center;color:#333;font-size:10px;padding:16px}button{font-family:inherit}@media(max-width:620px){.player{flex-direction:column}.disc{width:155px;height:155px;min-width:155px}.hero h1{font-size:32px}.buttons{gap:17px}}