@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600&display=swap');

  :root{
    --bg: #10201f;
    --bg-panel: #172b29;
    --amber: #e6a341;
    --amber-dim: #8a6a34;
    --ink: #f2ede1;
    --ink-muted: #93a8a1;
    --line: #294240;
    --focus: #e6a341;
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }

  body{
    background: var(--bg);
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(230,163,65,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 110%, rgba(64,120,110,0.18), transparent 60%);
    color: var(--ink);
    font-family: 'Public Sans', -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  a{ color: inherit; }

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 28px clamp(20px, 6vw, 64px) 0;
  }

  .brand{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-family:'Fraunces', serif;
  }
  .brand-mark{
    font-weight:700;
    font-size:18px;
    letter-spacing:0.02em;
  }
  .brand-sub{
    color: var(--ink-muted);
    font-size:13px;
    font-family:'Public Sans', sans-serif;
  }

  .live-pill{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color: var(--ink-muted);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 14px 7px 10px;
  }
  .live-dot{
    width:8px; height:8px; border-radius:50%;
    background: #e0563f;
    box-shadow: 0 0 0 0 rgba(224,86,63,0.6);
    animation: pulse 2s infinite;
  }
  .live-pill.offline .live-dot{ background: var(--ink-muted); animation:none; box-shadow:none; }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(224,86,63,0.55); }
    70%{ box-shadow:0 0 0 8px rgba(224,86,63,0); }
    100%{ box-shadow:0 0 0 0 rgba(224,86,63,0); }
  }

  main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 40px clamp(20px, 6vw, 64px) 60px;
  }

  .hero{
    width:100%;
    max-width: 560px;
    text-align:center;
  }

  .freq{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size: clamp(72px, 18vw, 128px);
    line-height:0.9;
    letter-spacing:-0.02em;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:10px;
  }
  .freq span.unit{
    font-size: clamp(20px, 4vw, 28px);
    font-weight:500;
    margin-top: clamp(14px, 3vw, 24px);
    color: var(--amber);
    font-family:'Public Sans', sans-serif;
  }

  .station-name{
    font-family:'Fraunces', serif;
    font-weight:500;
    font-size: clamp(22px, 4vw, 30px);
    margin: 6px 0 2px;
  }
  .tagline{
    color: var(--ink-muted);
    font-size:15px;
    margin: 0 0 40px;
  }

  .player{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 22px;
    margin-bottom: 28px;
  }

  .play-btn{
    width: 78px; height: 78px;
    border-radius: 50%;
    background: var(--amber);
    border: none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color: #1a1208;
    flex-shrink:0;
    transition: transform 0.15s ease, background 0.2s ease;
    position:relative;
  }
  .play-btn:hover{ transform: scale(1.04); }
  .play-btn:focus-visible{ outline: 3px solid var(--focus); outline-offset: 4px; }
  .play-btn svg{ width:26px; height:26px; }
  .play-btn.loading{ background: var(--amber-dim); cursor:wait; }

  .ring{
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:1.5px solid var(--amber);
    opacity:0;
  }
  .play-btn.playing .ring{
    animation: ripple 1.8s ease-out infinite;
  }
  @keyframes ripple{
    0%{ opacity:0.5; transform:scale(0.9); }
    100%{ opacity:0; transform:scale(1.35); }
  }

  .status-text{
    text-align:left;
    font-size:14px;
  }
  .status-text .label{
    color: var(--ink-muted);
    display:block;
    margin-bottom:3px;
  }
  .status-text .value{
    font-weight:600;
  }

  .now-playing{
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 20px;
    text-align:left;
    display:flex;
    align-items:center;
    gap:14px;
  }
  .bars{
    display:flex;
    align-items:flex-end;
    gap:3px;
    height: 22px;
    flex-shrink:0;
  }
  .bars i{
    width:3px;
    background: var(--amber);
    border-radius:2px;
    opacity:0.35;
  }
  .bars.on i{ animation: bar 1s ease-in-out infinite; opacity:1; }
  .bars i:nth-child(1){ height:40%; animation-delay:0s; }
  .bars i:nth-child(2){ height:100%; animation-delay:0.15s; }
  .bars i:nth-child(3){ height:65%; animation-delay:0.3s; }
  .bars i:nth-child(4){ height:85%; animation-delay:0.45s; }
  @keyframes bar{
    0%,100%{ transform: scaleY(0.4); }
    50%{ transform: scaleY(1); }
  }

  .np-text .np-label{
    font-size:12px;
    color: var(--ink-muted);
    margin-bottom:3px;
  }
  .np-text .np-title{
    font-size:14px;
    font-weight:600;
  }

  .meta-row{
    margin-top: 22px;
    display:flex;
    justify-content:center;
    gap: 18px;
    flex-wrap:wrap;
    font-size:13px;
    color: var(--ink-muted);
  }
  .meta-row span b{ color: var(--ink); font-weight:600; }

  footer{
    padding: 20px clamp(20px, 6vw, 64px) 28px;
    text-align:center;
    font-size:12.5px;
    color: var(--ink-muted);
    border-top: 1px solid var(--line);
  }
  footer a{ text-decoration: underline; text-underline-offset:2px; }

  @media (max-width: 640px){
    header{
      padding: 20px 20px 0;
    }
    .brand{
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }
    .brand-mark{ font-size:16px; }
    .brand-sub{ font-size:12px; }
    .live-pill{
      font-size:12px;
      padding:6px 12px 6px 9px;
      flex-shrink:0;
    }

    main{ padding: 28px 20px 44px; align-items:flex-start; }

    .player{
      flex-direction: column;
      gap: 14px;
    }
    .status-text{
      text-align:center;
    }

    .now-playing{
      padding: 14px 16px;
    }
    .np-title{ font-size:13px; }

    .meta-row{
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
  }

  @media (max-width: 380px){
    .freq{ gap:6px; }
    .play-btn{ width:70px; height:70px; }
  }

  @media (prefers-reduced-motion: reduce){
    .live-dot, .play-btn.playing .ring, .bars.on i{ animation: none !important; }
  }