@media(min-width:1600px) {
  main {
    padding-left:3.5rem;
    padding-right:3.5rem
  }
  .hero {
    min-height:330px
  }
}
@media(max-width:1279px) {
  .player { grid-template-columns:minmax(0,1fr) auto minmax(140px,1fr) auto; }
  .player-right { display:contents; }
}
@media(max-width:1100px) {
  .station-list { grid-template-columns:minmax(0,1fr); }
  :root {
    --sidebar:190px
  }
  .header {
    padding:0 1.5rem;
    gap:1rem
  }
  main {
    padding-left:1.5rem;
    padding-right:1.5rem
  }
  .station-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .mood-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .mood {
    min-height:85px;
    padding:1rem;
    display:flex;
    align-items:center;
    gap:.8rem
  }
  .mood svg {
    margin:0
  }
  .country-grid,.genre-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .live-badge,.stream-info,.search-hint {
    display:none
  }
  .transport { grid-template-columns:44px 46px 44px; }
  .player {
    gap:.5rem;
    padding-left:1rem;
    padding-right:1rem
  }
  .player-extras input { width:70px; }
  .hero {
    padding:2rem
  }
  .hero-copy {
    max-width:75%
  }
}
@media(max-width:768px) {
  :root {
    --header:66px;
    --player:76px
  }
  .sidebar {
    display:none
  }
  .mobile-listener-note { display:block; margin-top:var(--space-5); padding:var(--space-4); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
  .header {
    padding:0 1rem;
    gap:.5rem
  }
  .brand {
    min-width:0;
    font-size:1.1rem
  }
  .brand img {
    width:33px;
    height:33px
  }
  .brand small {
    font-size:.52rem
  }
  .header-search {
    margin-left:auto;
    width:44px;
    padding:0;
    justify-content:center;
    border:0;
    background:transparent
  }
  .header-search>span:not(:first-child) {
    display:none
  }
  .header-actions {
    margin-left:0
  }
  .header-about { width:44px; padding:0; border-radius:50%; }
  .header-about-label { display:none; }
  main {
    margin-left:0;
    padding:calc(var(--header) + 1.25rem) 1.25rem calc(var(--player) + var(--nav) + env(safe-area-inset-bottom) + 2rem)
  }
  .hero {
    min-height:280px;
    padding:1.5rem
  }
  .hero-copy {
    max-width:85%
  }
  .hero h1 {
    font-size:2.65rem
  }
  .hero p:not(.eyebrow) {
    max-width:270px;
    font-size:.8rem
  }
  .hero-actions .button {
    font-size:.7rem;
    padding:.7rem .9rem
  }
  .frequency-art {
    right:-2rem;
    width:38%;
    opacity:.35
  }
  .hero-caption {
    display:none
  }
  .section {
    margin-top:2rem
  }
  .section-head h2 {
    font-size:1.2rem
  }
  .section-head p {
    font-size:.72rem
  }
  .station-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.65rem
  }
  .station-card {
    padding:.8rem
  }
  .station-card>.station-art {
    margin-bottom:.75rem
  }
  .station-meta {
    flex-wrap:wrap
  }
  .station-list .station-meta {
    display:flex;
    flex-wrap:nowrap;
    gap:.3rem
  }
  .station-list .station-meta time { display:none; }
  .station-list .station-card {
    gap:.7rem;
    padding:.65rem
  }
  .station-list .station-actions {
    gap:0
  }
  .mobile-nav {
    position:fixed;
    z-index:40;
    bottom:0;
    left:0;
    right:0;
    height:calc(var(--nav) + env(safe-area-inset-bottom));
    padding:0 .4rem env(safe-area-inset-bottom);
    display:flex;
    justify-content:space-around;
    background:var(--bg);
    border-top:1px solid var(--border)
  }
  .mobile-nav .nav-link {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:.2rem;
    font-size:.56rem;
    padding:.5rem .4rem;
    min-width:50px;
    border-radius:0
  }
  .mobile-nav .nav-link.active {
    background:transparent
  }
  .mobile-nav .nav-count {
    display:none
  }
  .mobile-nav .nav-link svg {
    width:20px;
    height:20px
  }
  .player {
    bottom:calc(var(--nav) + env(safe-area-inset-bottom));
    height:var(--player);
    grid-template-columns:minmax(0,1fr) auto auto;
    padding:.65rem 1rem;
    gap:.3rem;
    background:var(--panel)
  }
  .player .station-art {
    width:42px;
    height:42px
  }
  .player-station {
    gap:.65rem
  }
  .player-copy strong {
    font-size:.73rem
  }
  .player-copy span {
    font-size:.6rem;
    max-width:100%
  }
  .player-copy .stream-info-mobile:not(:empty) { display:block; }
  .transport>.icon-button,.player-extras {
    display:none
  }
  .transport { grid-template-columns:42px; }
  .player-visualizer { display:none; }
  .player.expanded .player-visualizer { display:block; width:100%; grid-column:1 / -1; grid-row:3; }
  .player.expanded .visualizer-toggle { max-width:320px; margin:auto; }
  .play-main {
    width:42px;
    height:42px
  }
  .player-expand {
    display:flex;
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    aspect-ratio:1;
    flex:0 0 44px;
    padding:0;
    align-self:center;
    justify-self:center
  }
  .player.expanded {
    height:auto;
    max-height:calc(100dvh - var(--header) - var(--nav) - env(safe-area-inset-bottom) - 1rem);
    overflow-y:auto;
    grid-template-columns:minmax(0,1fr) auto;
    padding:1rem;
    gap:.75rem
  }
  .player.expanded .player-station {
    grid-column:1
  }
  .player.expanded .transport {
    grid-column:1 / -1;
    grid-row:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px 42px 44px minmax(0,1fr);
    width:100%;
    justify-content:center;
    column-gap:.35rem;
    row-gap:.4rem
  }
  .player.expanded #previous { grid-column:2; grid-row:1; }
  .player.expanded #toggle-play { grid-column:3; grid-row:1; }
  .player.expanded #next { grid-column:4; grid-row:1; }
  .player.expanded .stream-info,.player.expanded .live-badge {
    display:block;
    grid-row:1;
    font-size:.5rem;
    letter-spacing:.06em;
    white-space:normal;
    overflow-wrap:anywhere;
    line-height:1.5
  }
  .player.expanded .stream-info { grid-column:1; text-align:right; }
  .player.expanded .live-badge { grid-column:5; text-align:left; max-height:3em; }
  .player.expanded .stream-info-mobile { display:none; }
  .player.expanded .transport>.icon-button {
    display:flex
  }
  .player.expanded .player-expand {
    grid-column:2;
    grid-row:1
  }
  .player.expanded .player-extras {
    display:flex;
    grid-column:1 / -1;
    grid-row:4;
    justify-content:center
  }
  .player.expanded .player-copy span {
    white-space:normal
  }
  .player.expanded .player-expand svg {
    transform:rotate(180deg)
  }
  .toast {
    bottom:calc(var(--player) + var(--nav) + env(safe-area-inset-bottom) + 1rem)
  }
  .filters {
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:1rem
  }
  .skeleton-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .skeleton:nth-child(n+4) {
    display:none
  }
  footer {
    flex-direction:column;
    gap:.3rem;
    padding-top:2rem
  }
  .page-head h1 {
    font-size:2rem
  }
  .genre-card {
    padding:1.1rem
  }
}
@media(max-width:480px) {
  main {
    padding-left:1rem;
    padding-right:1rem
  }
  .hero {
    padding:1.25rem;
    min-height:290px
  }
  .hero-copy {
    max-width:100%
  }
  .hero h1 {
    font-size:2.3rem
  }
  .hero-actions {
    gap:.5rem
  }
  .hero-actions .button {
    padding:.65rem .75rem
  }
  .frequency-art {
    opacity:.17;
    width:50%
  }
  .mood-grid {
    gap:.5rem
  }
  .mood {
    padding:.8rem .6rem;
    gap:.5rem;
    min-height:70px
  }
  .mood strong {
    font-size:.72rem
  }
  .mood svg {
    width:18px
  }
  .station-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .country-grid {
    gap:.5rem
  }
  .country {
    padding:.75rem;
    gap:.5rem;
    font-size:.7rem
  }
  .country-code {
    padding:.4rem
  }
  .country>svg {
    width:14px
  }
  .genre-grid {
    grid-template-columns:1fr
  }
  .section-link {
    font-size:.68rem
  }
  .station-list .station-info h3 {
    font-size:.76rem
  }
  .station-list .station-info p {
    font-size:.65rem
  }
  .station-list .station-actions .icon-button {
    width:36px
  }
  .station-list .station-play {
    width:34px;
    height:34px
  }
  .station-list .station-card {
    gap:.5rem
  }
  .filters {
    gap:.65rem
  }
  .field>span {
    font-size:.63rem
  }
  .filters input,.filters select {
    font-size:.75rem;
    padding:.7rem .5rem
  }
  .search-field input {
    padding-right:2.5rem
  }
  .section-head {
    gap:.5rem
  }
  .collection-tools .button {
    font-size:.72rem
  }
}
@media(max-height:500px) and (max-width:768px) {
  .hero {
    min-height:230px
  }
  .player.expanded {
    max-height:65dvh;
    overflow:auto
  }
  dialog {
    max-height:85dvh
  }
}
@media(max-width:360px) {
  .header .brand > span { display:none; }
}