*{box-sizing:border-box} :root{color-scheme:dark}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 35%,#29213a 0,#11111b 48%,#08080d 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#fff;display:grid;place-items:center;padding:20px}
.app{width:min(100%,430px);min-height: min(850px, calc(100vh - 40px));border:1px solid #ffffff20;border-radius:30px;background:linear-gradient(160deg,#191827eF,#0c0c14f5);box-shadow:0 24px 80px #0009;padding:25px 22px;display:flex;flex-direction:column;align-items:center}
.top{display:flex;align-items:center;gap:9px;letter-spacing:2px;font-size:11px;font-weight:800;color:#ffd21a}
.live-dot{width:9px;height:9px;background:#ff303b;border-radius:50%;box-shadow:0 0 12px #ff303b}
.station{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;margin:auto 0}
.logo{width:min(76%,280px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 12px 24px #0009);margin:22px 0 6px}
.frequency{margin:4px 0;color:#ffd21a;font-weight:900;letter-spacing:5px;font-size:14px}
h1{margin:2px 0;font-size:clamp(27px,8vw,38px);font-weight:950;letter-spacing:1px}
.tagline{margin:5px 0 20px;color:#c9c5d4;font-size:14px}
.status{font-size:13px;color:#b8b5c4;min-height:20px;margin-bottom:18px}
.play{width:88px;height:88px;border:0;border-radius:50%;background:linear-gradient(145deg,#ffe34a,#ff9c00);color:#171321;font-size:34px;box-shadow:0 8px 30px #ffb00055, inset 0 2px 5px #fff9;cursor:pointer}
.play:active{transform:scale(.96)}
.listen-label{font-size:11px;letter-spacing:2px;font-weight:800;color:#ffe071;margin:15px 0 30px}
.actions{display:flex;gap:12px;width:100%;margin:20px 0 30px}
.action{flex:1;display:flex;justify-content:center;align-items:center;gap:8px;padding:14px 10px;border:1px solid #ffffff28;border-radius:14px;background:#ffffff0d;color:white;text-decoration:none;font:600 14px system-ui;cursor:pointer}
.action span{font-size:18px}.whatsapp{background:#1c9b59;border-color:#1c9b59}
footer{font-size:10px;letter-spacing:2px;color:#777486;text-align:center}
audio{display:none}
@media(max-height:650px){.app{min-height:0}.logo{width:150px;margin:10px 0} .listen-label{margin-bottom:12px}.actions{margin:8px 0 15px}}