@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#111313;--panel:#1a1d1b;--gold:#e8bd5c;--muted:#a5aaa6}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:#f5f5ee;font-family:'DM Sans',Arial,sans-serif}header,main,footer{max-width:1240px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:26px 35px;border-bottom:1px solid #ffffff19}.brand{display:flex;align-items:center;gap:15px;color:inherit;text-decoration:none;font-weight:800;letter-spacing:1px}.brand img{width:84px;height:63px;object-fit:contain;background:#fff;border-radius:5px}.brand small{display:block;font-size:8px;color:var(--muted);margin-top:7px;letter-spacing:1.1px}.nav{color:#eee;text-decoration:none;font-size:13px}main{padding:0 35px}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:75px;align-items:center;padding:75px 0 85px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.2px;color:var(--gold)}h1{font-family:Manrope,Arial,sans-serif;font-size:clamp(42px,5.7vw,76px);line-height:1.08;letter-spacing:-3px;margin:25px 0}h1 em{font-style:normal;color:var(--gold)}.intro p{font-size:16px;color:var(--muted);line-height:1.8}.explore{display:inline-block;margin-top:22px;color:#eee;text-decoration:none;font-size:13px;border-bottom:1px solid var(--gold);padding-bottom:9px}.feature{background:radial-gradient(ellipse at top right,#41402a50,transparent 70%),var(--panel);border:1px solid #ffffff18;border-radius:18px;padding:28px;text-align:center;box-shadow:0 25px 75px #0003}.feature>img{display:block;width:145px;height:130px;object-fit:contain;margin:20px auto;background:#fff;border-radius:10px;padding:8px}.feature>div{font-size:9px;letter-spacing:2px;color:var(--gold)}.live-dot{display:inline-block;background:var(--gold);width:6px;height:6px;border-radius:50%;margin-right:5px}.feature h2{font-size:24px;margin:12px 0 0}.feature #active-song{font-size:13px;min-height:24px;margin:8px 0 18px;overflow-wrap:anywhere}.primary{width:100%;border:0;border-radius:7px;background:var(--gold);color:#191a15;font-size:14px;font-weight:700;padding:15px;cursor:pointer}.feature #status{font-size:11px;line-height:1.5;min-height:17px;margin:13px 0}.volume{display:flex;justify-content:center;align-items:center;gap:12px;color:var(--muted);font-size:11px}.volume input{width:120px;accent-color:var(--gold)}.section-top{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.section-top h2{font-family:Manrope,Arial,sans-serif;font-size:34px;letter-spacing:-1px;margin:8px 0 0}.count{font-size:9px;color:var(--muted);letter-spacing:1.3px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.station{position:relative;text-align:left;cursor:pointer;color:inherit;background:var(--panel);border:1px solid #ffffff13;border-radius:12px;overflow:hidden;padding:0;transition:transform .2s,border-color .2s;font:inherit}.station:hover{transform:translateY(-3px);border-color:#b99b53}.station[aria-pressed=true]{border-color:var(--gold)}.station .art{height:164px;background:#fff;display:flex;align-items:center;justify-content:center;margin:12px;border-radius:7px}.art img{width:85%;height:85%;object-fit:contain}.station .details{padding:7px 19px 21px}.station h3{font-size:17px;margin:0 0 10px}.station .label{font-size:8px;letter-spacing:1.6px;color:var(--gold)}.song{color:var(--muted);font-size:12px;line-height:1.6;margin:5px 0 0;min-height:39px;overflow-wrap:anywhere}.tune{float:right;color:var(--gold);font-size:18px}.note{color:var(--muted);font-size:11px;text-align:center;margin:27px 0 65px}footer{padding:25px 35px 35px;border-top:1px solid #ffffff19;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}footer>span:first-child{font-weight:700;color:#ddd;letter-spacing:1px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #fff;outline-offset:4px}@media(max-width:800px){.intro{gap:28px;padding:45px 0}.grid{grid-template-columns:repeat(2,1fr)}h1{letter-spacing:-2px}.brand span{font-size:12px}.brand small{font-size:6px}}@media(max-width:550px){header,footer{padding:20px}main{padding:0 20px}.intro{grid-template-columns:1fr;gap:35px}h1{font-size:51px}.grid{gap:12px}.station .art{height:120px;margin:8px}.station .details{padding:8px 12px 15px}.station h3{font-size:14px}.section-top{gap:12px}.count{font-size:7px}.nav{font-size:10px}.brand img{width:60px;height:49px}footer{gap:20px}.feature{padding:24px}.song{font-size:11px}}
