:root { --cyan:#08dbe4; --cyan2:#048fa5; --ink:#020a0f; --panel:#03141c; --line:#176070; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#111; color:#f4f7f8; font-family:Arial, Helvetica, sans-serif; }
button, input { font:inherit; }
a { color:inherit; text-decoration:none; }
.disabled-link { opacity:.45; cursor:not-allowed; }
main { width:min(1066px, 100%); margin:20px auto; background:#02090e; min-height:708px; position:relative; overflow:hidden; border-radius:12px; box-shadow:0 20px 70px #000; }
.topbar { height:72px; display:flex; align-items:center; gap:25px; padding:0 42px; background:linear-gradient(90deg,#02080c,#01070a); position:relative; z-index:10; }
.logo { position:relative; width:165px; height:150px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:42px; letter-spacing:-4px; border:1px solid var(--cyan); border-radius:50%; text-shadow:0 2px 8px #000; }
.logo b { color:var(--cyan); font-weight:800; }
.logo em { position:absolute; bottom:30px; font-size:17px; letter-spacing:6px; font-style:normal; color:#c6fbff; }
.logo:before { content:"🎙"; position:absolute; top:28px; left:67px; font-size:34px; z-index:2; transform:rotate(8deg); }
.logo--small { width:92px; height:62px; border:0; font-size:31px; flex:none; }
.logo--small:before { font-size:22px; top:4px; left:40px; }
.logo--small em { bottom:2px; font-size:10px; letter-spacing:4px; }
.motto { font-family:cursive; color:#d7d7d7; font-size:13px; line-height:1.15; transform:rotate(-2deg); white-space:nowrap; }
nav { display:flex; gap:28px; margin-left:auto; height:100%; align-items:center; }
nav a { font-size:11px; height:100%; display:flex; align-items:center; position:relative; white-space:nowrap; }
nav a.active:after { content:""; position:absolute; height:2px; background:var(--cyan); bottom:18px; left:0; right:0; }
.socials { display:flex; gap:11px; }
.socials a { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-weight:bold; font-size:20px; background:#1e52a5; }
.socials a:nth-child(2) { background:#db2861; }.socials a:nth-child(3) { background:#f0171e; font-size:14px; }.socials a:nth-child(4) { background:#23a852; }
.hero { height:548px; position:relative; overflow:hidden; background:radial-gradient(circle at 50% 30%,#132631cc,transparent 40%),linear-gradient(100deg,#03131d 0%,#101c24 60%,#241810 100%); }
.stage-light { position:absolute; inset:0; opacity:.26; background:repeating-linear-gradient(90deg,transparent 0 88px,#163344 90px 94px,transparent 96px 148px); }
.on-air { position:absolute; left:65px; top:52px; font-size:68px; font-weight:bold; color:#b32928; opacity:.55; filter:blur(3px); transform:rotate(-5deg); }
.microphone { position:absolute; right:105px; top:-65px; width:180px; height:450px; border-radius:90px; transform:rotate(-14deg); background:repeating-radial-gradient(ellipse at center,#14191d 0 3px,#30363c 4px 7px); box-shadow:inset 0 0 30px #000,0 0 40px #000; opacity:.75; }
.microphone span { position:absolute; bottom:-80px; left:65px; width:50px; height:130px; background:#15191c; }
.hero-copy { position:absolute; top:21px; left:0; right:0; text-align:center; z-index:2; }
.hero-copy h1 { margin:0; font-size:53px; letter-spacing:-2px; }.hero-copy h1 span { color:#03b4c8; }
.hero-copy p { margin:4px 0; font-size:17px; font-weight:600; text-decoration:underline; text-underline-offset:5px; }
.player-card { position:absolute; z-index:3; top:120px; left:67px; width:783px; height:272px; border:1px solid var(--cyan); border-radius:16px; background:linear-gradient(90deg,#03131cfa,#020c12f5); display:grid; grid-template-columns:195px 185px 220px 1fr; padding:22px 20px 51px; gap:10px; box-shadow:0 15px 35px #0009; }
.brand-disc { display:grid; place-items:center; }.brand-disc .logo { width:165px; height:165px; }
.play { width:110px; height:110px; border-radius:50%; align-self:center; justify-self:center; color:white; font-size:45px; border:1px solid var(--cyan); background:linear-gradient(135deg,#07d9df,#057a92); box-shadow:0 0 0 16px #03354388,0 0 25px #00dce666; cursor:pointer; }
.play.playing { font-weight:bold; font-size:35px; }
.track { border-right:1px solid #28515b; padding:8px 16px 0 6px; min-width:0; }.live-label { background:#063443; color:#e6ffff; border-radius:12px; padding:5px 9px; font-size:10px; display:inline-block; }.track h2 { font-size:17px; margin:11px 0 7px; white-space:nowrap; }.track p { color:var(--cyan); margin:0 0 8px; font-size:14px; }
.equalizer { height:45px; display:flex; align-items:flex-end; gap:3px; overflow:hidden; }.equalizer i { display:block; width:4px; max-height:38px; transform-origin:bottom; background:repeating-linear-gradient(to top,var(--cyan) 0 3px,transparent 3px 5px); }
.equalizer.is-playing i { animation:eq-dance .62s ease-in-out infinite alternate; }
@keyframes eq-dance {
  0% { transform:scaleY(.18); opacity:.55; }
  35% { transform:scaleY(.9); opacity:1; }
  68% { transform:scaleY(.42); opacity:.78; }
  100% { transform:scaleY(1); opacity:1; }
}
.timeline { display:flex; justify-content:space-between; font-size:11px; border-top:2px solid #49646d; padding-top:4px; }.timeline b { font-size:10px; font-weight:400; }.timeline b:first-letter { color:red; }
.controls { padding:48px 0 0 12px; }.controls label,.sticky-player label { display:flex; align-items:center; gap:10px; }.controls input,.sticky-player input,.phone input { accent-color:var(--cyan); width:100px; }.controls>div { display:flex; gap:25px; margin-top:20px; }.controls button,.heart { background:#18232a; color:white; border:0; border-radius:50%; width:43px; height:43px; font-size:23px; cursor:pointer; }.controls button:first-child,.heart { color:#ff5572; }.controls small,.heart small { display:block; font-size:10px; color:white; margin-top:9px; }.selected { color:#ff274e!important; text-shadow:0 0 12px #ff275d; }
.features { position:absolute; height:51px; left:0; right:0; bottom:0; background:#071c25; display:grid; grid-template-columns:repeat(4,1fr); border-radius:0 0 15px 15px; }.features span { display:flex; align-items:center; justify-content:center; gap:11px; color:var(--cyan); border-right:1px solid #244b57; font-size:18px; }.features b { color:#eee; font-size:11px; font-weight:400; }
.phone { position:absolute; z-index:5; right:24px; top:99px; width:168px; height:358px; border:5px solid #24292d; border-radius:30px; background:linear-gradient(#02131b,#051721); box-shadow:0 12px 25px #000; display:flex; flex-direction:column; align-items:center; padding:15px 15px; }
.phone .notch { position:absolute; top:3px; width:76px; height:9px; border-radius:8px; background:#07090b; }.phone .logo--small { transform:scale(.65); height:52px; }.phone .live-label { font-size:6px; padding:3px 6px; }.phone h3 { font-size:9px; margin:8px 0 5px; }.phone p { color:var(--cyan); font-size:8px; margin:0; }.phone-play { margin:16px 0 6px; border:1px solid var(--cyan); border-radius:50%; width:50px; height:50px; color:#fff; background:linear-gradient(135deg,#0bdde3,#087d95); font-size:20px; }.phone .equalizer { width:130px; height:34px; }.phone .equalizer i { min-width:2px; width:2px; }.phone input { width:108px; height:15px; }.phone-actions { display:flex; width:100%; justify-content:space-around; margin-top:10px; }.phone-actions span { width:34px;height:34px;border-radius:50%;background:#1a2930;display:grid;place-items:center;color:#ff5572; }.phone-actions small { color:white;font-size:7px;margin-top:3px; }
.about { position:absolute; left:57px; top:417px; width:792px; height:99px; border:1px solid var(--line); border-radius:15px; background:#031119e8; display:grid; grid-template-columns:105px 1fr 220px; align-items:center; padding:0 28px; }
.mic-icon { color:var(--cyan); font-size:65px; text-align:center; }.about h2 { margin:0 0 8px; font-size:22px; }.about p { margin:0; font-size:13px; line-height:1.5; }.follow { display:flex; flex-direction:column; align-items:center; gap:8px; }.follow span { font-size:11px; }
.signature { display:block; width:max-content; margin:3px 0 0 125px; color:#bffbff; font-family:"Segoe Script","Brush Script MT","Lucida Handwriting",cursive; font-size:20px; line-height:1; font-style:italic; transform:rotate(-5deg); text-shadow:0 0 10px #00cbd777; letter-spacing:.4px; }
.sticky-player { position:absolute; z-index:20; left:6px; right:6px; bottom:10px; height:99px; border:1px solid var(--line); border-radius:15px; background:#02121aee; backdrop-filter:blur(14px); display:grid; align-items:center; grid-template-columns:95px 140px 70px 190px 1fr 155px 52px 52px; padding:0 14px; gap:9px; }
.sticky-player>.logo { width:76px;height:76px;border:1px solid var(--cyan);font-size:23px; }.sticky-player>.logo:before { font-size:18px; top:16px; left:32px; }.sticky-player>.logo em { bottom:11px;font-size:8px; }
.station { display:flex;flex-direction:column;gap:9px; }.station strong { font-size:18px; }.station span { color:var(--cyan);font-size:10px;border:1px solid #056878;border-radius:12px;padding:5px;width:max-content; }
.mini-play { width:62px;height:62px;border-radius:50%;border:1px solid var(--cyan);background:linear-gradient(135deg,#06dbe2,#065467);color:white;font-size:23px;box-shadow:0 0 0 9px #063442; }
.mini-track { display:flex;flex-direction:column;gap:6px; }.mini-track span,.mini-track small { color:var(--cyan);font-size:11px; }.mini-track strong { font-size:14px; }.sticky-player .equalizer { height:48px; }.sticky-player .heart { justify-self:center; }
@media (max-width:850px) {
  main { margin:0; border-radius:0; min-height:920px; }.topbar { padding:0 18px; }.motto,nav { display:none; }.socials { margin-left:auto; }.hero { height:735px; }.hero-copy { top:25px; }.hero-copy h1{font-size:39px}.hero-copy p{font-size:14px}
  .player-card { left:18px; right:18px; top:115px; width:auto; height:408px; grid-template-columns:120px 1fr; grid-template-rows:130px 150px; padding:18px 14px 55px; }.brand-disc .logo { width:115px;height:115px;font-size:30px }.brand-disc .logo:before{left:46px;top:20px}.brand-disc .logo em{bottom:19px}.play{width:88px;height:88px}.track{grid-column:1/3;border:0;padding:5px 8px}.controls{position:absolute;right:15px;top:18px;padding:0}.controls label{display:none}.controls>div{flex-direction:column;margin:0;gap:24px}.features{grid-template-columns:1fr 1fr;height:64px}.features span:nth-child(n+3){display:none}.phone{display:none}.about{left:18px;right:18px;top:545px;width:auto;grid-template-columns:70px 1fr;padding:0 14px}.follow{display:none}.signature{margin-left:70px;font-size:18px}
  .sticky-player { position:fixed;height:92px;grid-template-columns:60px 1fr 55px 52px;left:8px;right:8px;bottom:8px;padding:0 10px}.sticky-player>.logo{width:55px;height:55px;font-size:18px}.sticky-player>.logo:before{left:23px;top:9px;font-size:14px}.sticky-player>.logo em{font-size:6px;bottom:7px}.mini-play{width:49px;height:49px}.mini-track,.sticky-player>.equalizer,.sticky-player>label,.sticky-player>.heart:last-child{display:none}.station strong{font-size:16px}
}