:root {
      color-scheme: dark;
      --bg: #0d0d0d;
      --panel: rgba(0, 0, 0, .74);
      --line: rgba(255, 255, 255, .10);
      --text: #f1f1f1;
      --muted: #929292;
      --faint: #626262;
    }

    * { box-sizing: border-box; }
    html { background: var(--bg); }

    body {
      min-height: 100vh;
      margin: 0;
      padding: 32px 18px 48px;
      background:
        url("https://radio.geogaddi.org/static/uploads/boards_of_canada_247/background.1787705134.jpg")
        center / cover fixed no-repeat;
      color: var(--text);
      font-family:
        "itc-avant-garde-gothic-pro",
        "ITC Avant Garde Gothic Pro",
        system-ui, sans-serif;
      line-height: 1.5;
    }

    .page { width: min(920px, 100%); margin: 0 auto; }

    header { margin-bottom: 18px; text-align: center; }

    h1 {
      margin: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      font-size: clamp(1.7rem, 4vw, 2.35rem);
      font-weight: 100;
      line-height: 1.12;
      letter-spacing: -.08rem;
      color: #fff;
      overflow-wrap: anywhere;
    }

    .station-meta {
      min-height: 20px;
      margin-top: 10px;
      color: var(--muted);
      font-size: .68rem;
      letter-spacing: -.01rem;
      text-align: center;
      overflow-wrap: anywhere;
      white-space: normal;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,.18);
      backdrop-filter: blur(8px);
    }

    .player-panel { padding: 12px; }

    iframe.player-embed {
      width: 100%;
      height: 220px;
      display: block;
      border: 0;
      border-radius: 8px;
      background: rgba(0,0,0,.75);
    }

    .up-next {
      display: grid;
      grid-template-columns: 52px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      margin-top: 14px;
      padding: 10px 12px;
      text-align: left;
    }

    .next-art {
      width: 52px;
      height: 52px;
      border-radius: 5px;
      object-fit: cover;
      background: #191919;
    }

    .eyebrow {
      margin-bottom: 4px;
      color: var(--muted);
      font-size: .66rem;
      letter-spacing: .08em;
    }

    .next-title,
    .next-artist,
    .next-album {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }

    .next-title { color: #e7e7e7; font-size: .79rem; font-weight: 700; }
    .next-artist { margin-top: 2px; color: #989898; font-size: .67rem; }
    .next-album { margin-top: 2px; color: #686868; font-size: .60rem; }
    .next-detail { margin-top: 5px; color: #555; font-size: .56rem; }

    .section { margin-top: 14px; padding: 13px 15px; }

    .section-heading {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 15px;
      margin-bottom: 7px;
      text-align: left;
    }

    .section-title {
      color: #888;
      font-size: .67rem;
      letter-spacing: .07em;
    }

    .section-detail {
      color: #535353;
      font-size: .57rem;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .history-list { min-width: 0; }

    .history-header {
      display: grid;
      grid-template-columns: 28px 38px minmax(0, 1fr) minmax(170px, 190px);
      gap: 10px;
      align-items: end;
      min-width: 0;
      padding: 0 0 3px;
      color: #555;
      font-size: .53rem;
      letter-spacing: .04em;
    }

    .history-header-meta {
      display: grid;
      grid-template-columns: 78px 58px;
      gap: 10px;
      text-align: right;
    }

    .history-row {
      display: grid;
      grid-template-columns: 28px 38px minmax(0, 1fr) minmax(170px, 190px);
      gap: 10px;
      align-items: center;
      min-width: 0;
      padding: 9px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .history-row:last-child { border-bottom: 0; }
    .history-num { color: #505050; font-size: .63rem; text-align: center; }

    .history-art {
      width: 38px;
      height: 38px;
      border-radius: 4px;
      object-fit: cover;
      background: #191919;
    }

    .history-main { min-width: 0; }

    .history-title,
    .history-artist,
    .history-album,
    .history-genre {
      overflow-wrap: anywhere;
      word-break: break-word;
      white-space: normal;
    }

    .history-title { color: #eee; font-size: .77rem; font-weight: 700; }
    .history-artist { margin-top: 1px; color: #aaa; font-size: .65rem; }
    .history-album { margin-top: 1px; color: #626262; font-size: .57rem; }
    .history-genre { margin-top: 1px; color: #4f4f4f; font-size: .54rem; }
    .history-request { color: #767676; }

    .history-meta {
      display: grid;
      grid-template-columns: 78px 58px;
      gap: 10px;
      align-items: baseline;
      color: #777;
      font-size: .58rem;
      line-height: 1.35;
      text-align: right;
      white-space: nowrap;
    }

    .history-meta-value { color: #6d6d6d; }
    .history-meta-value time { color: #8a8a8a; }

    .description {
      margin: 17px 3px 0;
      color: #eee;
      font-size: .84rem;
      line-height: 1.65;
      text-align: center;
      overflow-wrap: anywhere;
      word-break: break-word;
      text-shadow: 0 2px 4px #000, 0 0 10px #000;
    }

    @media (max-width: 640px) {
      body { padding: 20px 12px 34px; }
      .player-panel { padding: 8px; }
      iframe.player-embed { height: 220px; }
      .history-row { grid-template-columns: 24px 36px minmax(0, 1fr); }
      .history-art { width: 36px; height: 36px; }
      .history-header { display: none; }
      .history-meta {
        grid-column: 3 / -1;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        justify-content: stretch;
        text-align: left;
        padding-top: 2px;
        white-space: normal;
      }
      .history-meta-value { overflow-wrap: anywhere; }
      .history-meta-value:first-child::before { content: "Played at "; color: #555; }
      .history-meta-value:last-child::before { content: "Length "; color: #555; }
    }