*{box-sizing:border-box}body{margin:0;background:#0b1020;color:#fff;font-family:Arial,sans-serif}header{height:76px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:#10182d;border-bottom:1px solid #293451}header b{font-size:21px}header small{display:block;color:#9eabc5;margin-top:4px}header a{color:#fff;text-decoration:none;border:1px solid #3b4968;border-radius:20px;padding:9px 15px}.hero{text-align:center;padding:55px 20px 75px;background:linear-gradient(135deg,#161f3a,#32134d)}.hero span{letter-spacing:3px;color:#ffb4c6;font-size:12px}.hero h1{font-size:42px;line-height:1.1;margin:18px 0 10px}.hero strong{color:#ffd166}.hero p{color:#c8d0e3}.player{width:min(680px,92%);margin:-38px auto 30px;padding:30px;border-radius:24px;background:#151d33;box-shadow:0 20px 60px #0008;text-align:center}.disc{width:92px;height:92px;border-radius:50%;margin:auto auto 18px;display:grid;place-items:center;background:radial-gradient(circle,#f5c76b 0 10%,#7d2ae8 11% 35%,#18122c 36%);font-size:30px}.spin{animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player small{color:#98a5c2;letter-spacing:2px}.player h2{font-size:22px;min-height:28px}.player p{color:#9aa7c2;font-size:13px}.buttons{display:flex;justify-content:center;gap:18px;margin:25px}.buttons button{border:0;background:#27324d;color:#fff;width:48px;height:48px;border-radius:50%;font-size:18px;cursor:pointer}.buttons button:nth-child(2){width:66px;height:66px;background:#e11d48;font-size:25px}.bar{height:5px;background:#303b57;border-radius:10px;margin-top:18px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#f4c95d}.cards{width:min(1000px,92%);margin:30px auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article,.recent{background:#121a2e;border:1px solid #26314c;border-radius:16px;padding:20px}.cards p,.recent li{color:#aeb9d0;line-height:1.6;font-size:14px}.recent{width:min(1000px,92%);margin:20px auto 50px}footer{text-align:center;padding:25px;color:#71809f;font-size:12px}@media(max-width:700px){.hero h1{font-size:32px}.cards{grid-template-columns:1fr}header{padding:0 4%}header b{font-size:17px}}