/* The quiet corner of the web. Gallery styling stays outside game boards. */
:root,
:root[data-theme="dark"] {
  --bg: #1f2521;
  --panel: #29312a;
  --line: #424c40;
  --text: #f2ecdb;
  --muted: #bdc4b2;
  --accent: #eeb398;
  --cozy-sidebar: #252b24;
  --cozy-paper: #30372e;
  --cozy-paper-raised: #384030;
  --cozy-soft: #353e32;
  --cozy-sage: #c6d6ae;
  --cozy-honey: #e5c58c;
  --cozy-ink: #efe8d5;
  --cozy-green-ink: #c6d6ae;
  --cozy-shadow: 0 10px 32px #0e160e17;
  --cozy-player: #30382def;
}
:root[data-theme="light"] {
  --bg: #f7f3e9;
  --panel: #fffaf0;
  --line: #dfdfcc;
  --text: #344335;
  --muted: #66715e;
  --accent: #bb6f4d;
  --cozy-sidebar: #f0eee1;
  --cozy-paper: #fffcf4;
  --cozy-paper-raised: #ffffff;
  --cozy-soft: #e9eddd;
  --cozy-sage: #d8e0c5;
  --cozy-honey: #e5c58c;
  --cozy-ink: #344335;
  --cozy-green-ink: #566c45;
  --cozy-shadow: 0 10px 32px #6e62430a;
  --cozy-player: #fffaf0f2;
}
body {
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
:root[data-theme] .sidebar {
  background: var(--cozy-sidebar);
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
}
:root[data-theme] .sidebar > .brand { color: var(--text); }
.sidebar > .brand span { color: var(--accent); }
.sidebar .side-label { color: var(--muted); font-size: 12px; letter-spacing: .1px; }
:root[data-theme] .sidebar .nav-item {
  color: var(--muted);
  border-radius: 13px;
  font-size: 14px;
  font-weight: 600;
}
:root[data-theme] .sidebar .nav-item:hover { background: var(--cozy-soft); color: var(--text); }
:root[data-theme] .sidebar .nav-item.active { background: var(--cozy-soft); color: var(--text); }
:root[data-theme] .sidebar .nav-item.active svg { color: var(--accent); }
:root[data-theme] .app-shell > .topbar {
  background: transparent;
  border-bottom: 0;
  padding-inline: 30px;
  min-height: 82px;
}
.breadcrumb, .breadcrumb strong { color: var(--muted); }
.breadcrumb { font-size: 12px; }
.breadcrumb > span { color: var(--line); }
:root[data-theme] .topbar :is(.weather-toggle, .calendar-toggle, .header-menu-toggle) {
  background: var(--cozy-paper);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 16px;
  min-height: 54px;
  box-shadow: none;
}
:root[data-theme] .topbar :is(.weather-toggle, .calendar-toggle, .header-menu-toggle):hover {
  background: var(--cozy-paper-raised);
  border-color: var(--muted);
}
.topbar .weather-icon, .topbar .calendar-widget-icon { color: var(--cozy-green-ink); }
.topbar .weather-icon svg { width: 27px; height: 27px; }
.topbar .weather-summary strong, .topbar .calendar-widget-summary strong { font-size: 12px; }
.topbar .weather-summary small, .topbar .calendar-widget-summary small { font-size: 10px; color: var(--muted); }
.header-menu-panel { background: var(--cozy-paper); border-radius: 20px; }
.header-menu-panel .header-account { background: var(--cozy-soft); }
main#content { padding: 12px 30px 130px; max-width: 1570px; margin-inline: auto; }
.cozy-welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  align-items: stretch;
  min-height: 370px;
  background: var(--cozy-paper);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--cozy-shadow);
  isolation: isolate;
}
.cozy-welcome[hidden], .cozy-shortcuts[hidden], .cozy-adventure[hidden] { display: none; }
.cozy-welcome-copy { align-self: center; padding: 34px 36px; min-width: 0; }
.cozy-kicker {
  color: var(--cozy-green-ink);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: .25px;
  margin: 0 0 16px;
}
.cozy-welcome h1 {
  color: var(--text);
  font-size: clamp(31px, 3.4vw, 54px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -1.8px;
  margin: 0 0 20px;
}
.cozy-welcome h1 em { color: var(--cozy-green-ink); font-style: normal; }
.cozy-lead { color: var(--muted); font-size: 15px; line-height: 1.9; margin: 0 0 23px; max-width: 410px; }
.cozy-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
:root[data-theme] .cozy-actions .primary {
  border-radius: 12px;
  background: #eab293;
  color: #3b3827;
  font-size: 13px;
  line-height: 1.5;
  padding: 13px 18px;
  min-height: 46px;
  box-shadow: 0 3px 0 #b6764c15;
}
.cozy-actions .primary:hover { filter: brightness(1.045); }
.cozy-soft-link { color: var(--text); font-size: 13px; font-weight: 700; padding-block: 10px; }
.cozy-soft-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.cozy-footnote { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 20px 0 0; }
.cozy-welcome-art { position: relative; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: #bec69e; }
.cozy-welcome-art img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; display: block; object-position: 55% center; }
.cozy-welcome-art figcaption {
  position: absolute;
  bottom: 17px;
  right: 20px;
  margin-left: 20px;
  padding: 8px 13px;
  background: #fcf5e7e8;
  color: #47513a;
  font-size: 10px;
  font-weight: 600;
  border-radius: 9px;
}
.cozy-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 17px 0 42px; }
.cozy-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px 18px;
  background: var(--cozy-paper);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 17px;
}
.cozy-shortcut:nth-child(2) { background: color-mix(in srgb, var(--cozy-sage) 13%, var(--cozy-paper)); }
.cozy-shortcut:nth-child(3) { background: color-mix(in srgb, var(--cozy-honey) 9%, var(--cozy-paper)); }
.cozy-shortcut-icon { width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; color: var(--cozy-green-ink); background: var(--cozy-soft); flex-shrink: 0; }
.cozy-shortcut-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.cozy-shortcut > div { min-width: 0; }
.cozy-shortcut strong { display: block; font-size: 14px; line-height: 1.6; font-weight: 800; }
.cozy-shortcut span:not(.cozy-shortcut-icon) { display: block; font-size: 12px; line-height: 1.6; color: var(--muted); }
.cozy-shortcut > i { margin-left: auto; color: var(--muted); font-size: 17px; font-style: normal; }
.cozy-shortcut:hover { border-color: var(--cozy-green-ink); }
#radio-section { scroll-margin-top: 25px; }
#radio-section .section-heading { margin-bottom: 22px; }
:is(#radio-section, #games-section, #listening-section) .eyebrow { color: var(--cozy-green-ink); font-size: 10px; font-weight: 700; letter-spacing: 1.1px; margin-bottom: 8px; }
:is(#radio-section, #games-section, #listening-section) :is(h1, h2) { color: var(--text); font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -.9px; line-height: 1.3; }
:is(#radio-section, #games-section, #listening-section) .quiet { color: var(--muted); font-size: 11px; }
:root[data-theme] :is(.genre-tabs .chip, .story-categories .chip) { border-color: transparent; background: var(--cozy-soft); color: var(--muted); border-radius: 11px; padding: 9px 14px; font-size: 12px; }
:root[data-theme] :is(.genre-tabs .chip.active, .story-categories .chip.active) { border-color: transparent; background: var(--cozy-sage); color: #34452b; font-weight: 800; }
:root[data-theme] :is(.genre-tabs .chip, .story-categories .chip):hover { color: var(--text); border-color: var(--muted); }
:root[data-theme] .filterbar .search-wrap, :root[data-theme] .filterbar select, :root[data-theme] .story-search input { background: var(--cozy-paper); color: var(--text); border-color: var(--line); border-radius: 12px; }
.filterbar .search-wrap input { height: 46px; font-size: 13px; color: var(--text); }
.filterbar .search-wrap input::placeholder { color: var(--muted); opacity: .9; }
.filterbar select { font-size: 12px; }
#radio-section .results-line { color: var(--muted); font-size: 11px; margin: 17px 0 15px; }
#radio-section .text-button { font-size: 11px; color: var(--muted); }
#radio-section .station-grid { gap: 14px; }
:root[data-theme] #stations .station-card {
  background: var(--cozy-paper);
  border: 1px solid color-mix(in srgb, var(--line) 67%, transparent);
  border-radius: 18px;
  padding: 17px;
  box-shadow: var(--cozy-shadow);
  color: var(--text);
}
:root[data-theme] #stations .station-card:hover { background: var(--cozy-paper-raised); border-color: var(--muted); }
:root[data-theme] #stations .station-card :is(.station-place, .station-tag) { color: var(--muted); }
#stations .station-head { margin-bottom: 13px; }
#stations .station-logo { width: 49px; height: 49px; border-radius: 13px; background: var(--cozy-soft); }
#stations .station-name { font-size: 15px; line-height: 1.5; margin-bottom: 3px; }
#stations .station-place { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
:root[data-theme] #stations .station-tag { border: 0; border-radius: 7px; padding: 3px 7px; background: var(--cozy-soft); font-size: 12px; line-height: 1.6; }
#stations .station-actions { border-top: 0; padding-top: 6px; margin-top: 6px; gap: 6px; }
:root[data-theme] #stations .station-details { border: 0; background: transparent; color: var(--muted); padding-left: 0; font-size: 12px; }
#stations .station-details:hover { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme] #stations .station-play { width: 35px; height: 35px; border-radius: 12px; background: var(--cozy-soft); color: var(--cozy-green-ink); }
:root[data-theme] #stations .station-play:hover { background: var(--cozy-sage); color: #34452b; }
:root[data-theme] #stations .station-card.is-playing { background: color-mix(in srgb, var(--cozy-sage) 13%, var(--cozy-paper)); border-color: var(--cozy-green-ink); box-shadow: inset 0 0 0 1px var(--cozy-green-ink); }
:root[data-theme] #stations .station-card.is-playing :is(.station-live, .station-play) { color: var(--cozy-green-ink); }
:root[data-theme] #stations .station-card.is-playing .station-play { background: var(--cozy-sage); color: #34452b; }
#stations .station-card .icon-button { color: var(--muted); }
:root[data-theme] #stations .station-card .icon-button.saved { color: var(--accent); }
:root[data-theme] #radio-section .more-button { border-color: var(--line); border-radius: 12px; color: var(--text); background: var(--cozy-paper); font-size: 12px; padding: 12px 21px; }
#games-section { margin-top: 52px; }
.cozy-adventure {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 290px;
  margin: 0 0 25px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--cozy-paper);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.cozy-adventure-art { position: relative; min-width: 0; min-height: 270px; background: #bac59c; }
.cozy-adventure-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; object-position: 50% 53%; }
.cozy-adventure-copy { align-self: center; padding: 29px 36px; min-width: 0; }
.cozy-adventure-copy .cozy-kicker { margin-bottom: 14px; }
.cozy-adventure-copy h3 { font-size: clamp(25px, 2.6vw, 36px); line-height: 1.3; letter-spacing: -1px; margin: 0 0 16px; color: var(--text); }
.cozy-adventure-copy > p:not(.cozy-kicker) { font-size: 13px; line-height: 1.85; color: var(--muted); max-width: 420px; margin: 0 0 21px; }
.cozy-coming { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.6; padding: 8px 11px; border-radius: 9px; color: var(--cozy-green-ink); background: var(--cozy-soft); font-weight: 600; }
.cozy-coming i { display: inline-block; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
:root[data-theme] #games-section .game-filters .secondary { font-size: 12px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: var(--cozy-soft); padding: 9px 13px; }
:root[data-theme] #games-section .game-filters .secondary[aria-pressed=true] { background: var(--cozy-sage); color: #34452b; }
#games-section .playroom-navigation { margin-bottom: 22px; }
#games-section .games-grid { gap: 18px; }
:root[data-theme] #games-section .game-card { border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 20px; background: var(--cozy-paper); color: var(--text); box-shadow: var(--cozy-shadow); }
#games-section .game-art { border-radius: 0; }
#games-section .game-meta { padding: 18px 18px 21px; }
:root[data-theme] #games-section .game-meta :is(small, p) { color: var(--muted); }
#games-section .game-meta small { font-size: 10px; letter-spacing: .6px; }
#games-section .game-meta h3 { color: var(--text); font-size: 17px; line-height: 1.5; margin: 7px 0; }
#games-section .game-meta h3 span { color: var(--cozy-green-ink); }
#games-section .game-meta p { font-size: 12px; line-height: 1.8; }
:root[data-theme] #games-section .all-games { display: block; margin: 25px auto 0; background: var(--cozy-paper); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 12px 21px; font-size: 12px; }
/* The rotating story is a small editorial invitation beneath the games. */
#discover-intro.home-slider, #discover-intro.hero {
  margin: 46px 0 0;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 24px;
  background: var(--cozy-paper);
  overflow: hidden;
  min-height: 0;
  box-shadow: var(--cozy-shadow);
}
#discover-intro.home-slider .home-slide, #discover-intro.hero:not(.home-slider) {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 285px;
  height: 285px;
  padding: 0;
  background: var(--cozy-paper);
  color: var(--text);
}
#discover-intro.home-slider .home-slide[hidden], #discover-intro[hidden] { display: none; }
#discover-intro.home-slider :is(.home-feature-copy, .hero-copy), #discover-intro.hero:not(.home-slider) .hero-copy {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 100%;
  padding: 29px 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#discover-intro.home-slider :is(.home-feature-copy h2, .hero-copy h2, .hero-copy h1), #discover-intro.hero:not(.home-slider) h2 {
  color: var(--text);
  font-size: clamp(23px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -.8px;
  margin: 0 0 12px;
}
#discover-intro.home-slider :is(.home-feature-copy, .hero-copy) .eyebrow { color: var(--cozy-green-ink); font-size: 10px; letter-spacing: 1px; margin-bottom: 13px; }
#discover-intro.home-slider .home-description, #discover-intro.home-slider .hero-copy > p:not(.eyebrow), #discover-intro.hero:not(.home-slider) .hero-copy > p:not(.eyebrow) { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 17px; }
#discover-intro.home-slider :is(.home-feature-art, .record-scene), #discover-intro.hero:not(.home-slider) .record-scene {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  opacity: 1;
  padding: 0;
  font-size: 110px;
  justify-content: center;
  align-items: center;
}
#discover-intro.home-slider .home-feature-art img { object-fit: cover; object-position: center; }
#discover-intro.home-slider .home-feature-art img.artwork-image { object-fit: contain; background: var(--cozy-soft); }
#discover-intro.home-slider .primary, #discover-intro.hero .primary { font-size: 12px; background: var(--cozy-soft); color: var(--text); border-radius: 10px; padding: 10px 15px; }
#discover-intro.home-slider .record { left: 56%; width: 260px; height: 260px; top: 45px; }
#discover-intro.home-slider .record-caption { left: 22px; font-size: 8px; }
#discover-intro .home-slider-controls { background: var(--cozy-paper); border-top: 1px solid var(--line); padding: 7px 18px; gap: 9px; }
#discover-intro .home-slider-controls > button { color: var(--text); width: 28px; height: 28px; border: 0; }
#discover-intro .home-slider-dots button { height: 28px; width: 18px; }
#discover-intro .home-slider-dots button:before { background: var(--muted); }
#discover-intro .home-slider-dots button[aria-current=true]:before { background: var(--cozy-green-ink); }
#discover-intro .home-slider-count { color: var(--muted); font-size: 10px; }
#discover-intro[data-slider-loading] { height: 330px; min-height: 330px; margin-bottom: 0; }
#listening-section { margin: 47px 0 45px; }
#listening-section.stories-page { margin-top: 0; }
#listening-section .listening-heading { margin-bottom: 23px; }
#listening-section .listening-heading p:last-child { font-size: 13px; line-height: 1.8; color: var(--muted); }
#listening-section .listening-grid { gap: 18px; }
:root[data-theme] #listening-section .listening-card { background: var(--cozy-paper); border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); border-radius: 20px; box-shadow: var(--cozy-shadow); color: var(--text); }
#listening-section .listening-copy { padding: 18px 18px 21px; }
#listening-section .listening-copy h3 { color: var(--text); font-size: 18px; line-height: 1.5; margin: 8px 0 9px; }
#listening-section .listening-copy small { font-size: 10px; letter-spacing: .65px; color: var(--cozy-green-ink); }
#listening-section .listening-copy p { color: var(--muted); font-size: 12px; line-height: 1.8; }
#listening-section .listening-cta { color: var(--cozy-green-ink); font-size: 12px; }
#listening-section .story-card-meta { gap: 5px 10px; }
#listening-section .story-card-meta .listening-cta { font-size: 11px; }
#listening-section .story-card-image { background: var(--cozy-soft); }
.listening-reader .listening-article { border-radius: 24px; background: var(--cozy-paper); }
:root[data-theme] .bottom-note { border-color: var(--line); padding-top: 28px; margin-top: 45px; gap: 18px; }
:root[data-theme] .bottom-note .brand { color: var(--cozy-green-ink); }
:root[data-theme] .bottom-note :is(p, .text-button) { color: var(--muted); font-size: 11px; }
/* The player keeps its familiar actions, as a small warm shelf. */
:root[data-theme] .player {
  background: var(--cozy-player);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  box-shadow: 0 8px 35px #1e2a1b26;
  border-radius: 21px;
  color: var(--text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
:root[data-theme] .player .main-play { background: #eab293; color: #3b3827; box-shadow: 0 3px 12px #b97a4020; border-radius: 17px; }
:root[data-theme] .player .main-play:hover:not(:disabled) { background: #f3c6a3; }
:root[data-theme] .player .player-art { border-color: var(--line); background: var(--cozy-soft); color: var(--cozy-green-ink); }
:root[data-theme] .player :is(.icon-button, .track-text > span, .live-label, .sleep-control) { color: var(--muted); }
:root[data-theme] .player .sleep-control { border-color: var(--line); border-radius: 11px; }
:root[data-theme] .player .sleep-control select { color: var(--muted); background: transparent; }
:root[data-theme] .player .player-tools input { accent-color: var(--cozy-green-ink); }
:root[data-theme] .player .live-label { border: 0; }
:root[data-theme] .player #player-fav.saved { color: var(--accent); }
/* Keep visible keyboard focus across the pale and dark materials. */
:is(.cozy-welcome, .cozy-shortcuts, #radio-section, #games-section, #discover-intro, #listening-section, .sidebar, .topbar, .player) :is(button, a, input, select):focus-visible,
.cozy-shortcut:focus-visible {
  outline: 3px solid var(--cozy-green-ink);
  outline-offset: 4px;
}
@media (min-width: 701px) {
  :root { --side: 198px; }
  .sidebar { padding-inline: 14px; padding-top: 32px; }
  .sidebar > .brand { margin-left: 15px; margin-bottom: 48px; font-size: 36px; }
  .sidebar .nav-item { padding: 13px 14px; margin-bottom: 7px; }
}
@media (min-width: 1500px) {
  .cozy-welcome { min-height: 430px; }
  .cozy-welcome-copy { padding: 44px 50px; }
  #radio-section .station-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .cozy-welcome-copy { padding: 29px 25px; }
  .cozy-welcome { min-height: 350px; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); }
  .cozy-welcome h1 { font-size: 35px; letter-spacing: -1.3px; }
  .cozy-actions { gap: 5px 14px; }
  .cozy-shortcut { padding: 13px 11px; gap: 8px; }
  .cozy-shortcut-icon { width: 31px; height: 35px; }
  .cozy-shortcut strong { font-size: 14px; }
  .cozy-shortcut > i { display: none; }
  .cozy-adventure-copy { padding: 26px; }
  .cozy-adventure-copy h3 { font-size: 29px; }
  #stations .station-card { padding: 14px; }
}
@media (max-width: 850px) and (min-width: 701px) {
  .cozy-welcome { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .cozy-welcome h1 { font-size: 31px; }
  .cozy-lead { font-size: 15px; }
  .cozy-shortcuts { gap: 8px; }
  .cozy-shortcut-icon { display: none; }
  .cozy-adventure-copy { padding: 22px; }
  .cozy-adventure-copy h3 { font-size: 25px; }
  #discover-intro.home-slider .home-slide { grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); }
}
@media (max-width: 700px) {
  :root { --side: 0px; }
  :root[data-theme] .sidebar { border-bottom-color: var(--line); }
  :root[data-theme] .sidebar .nav-item { padding: 7px; border-radius: 10px; }
  :root[data-theme] .sidebar > .brand { font-size: 27px; }
  :root[data-theme] .app-shell > .topbar { padding: 8px 15px; min-height: 77px; }
  .topbar .top-right { gap: 8px; }
  :root[data-theme] .topbar :is(.weather-toggle, .calendar-toggle) { min-height: 60px; padding: 9px 11px; border-radius: 13px; }
  .topbar .weather-summary strong, .topbar .calendar-widget-summary strong { font-size: 11px; }
  .topbar .weather-summary small, .topbar .calendar-widget-summary small { font-size: 10px; }
  main#content { padding: 10px 15px 115px; }
  .cozy-welcome { grid-template-columns: minmax(0,1fr) minmax(0,.92fr); min-height: 330px; border-radius: 22px; }
  .cozy-welcome-copy { padding: 27px 23px; }
  .cozy-kicker { font-size: 12px; margin-bottom: 13px; }
  .cozy-welcome h1 { font-size: clamp(28px, 5vw, 36px); letter-spacing: -1px; margin-bottom: 15px; }
  .cozy-lead { font-size: 15px; line-height: 1.85; margin-bottom: 17px; }
  .cozy-actions { gap: 3px 12px; }
  :root[data-theme] .cozy-actions .primary { font-size: 12px; padding: 11px 14px; min-height: 43px; }
  .cozy-soft-link { font-size: 13px; }
  .cozy-footnote { margin-top: 13px; font-size: 12px; }
  .cozy-welcome-art figcaption { right: 12px; bottom: 12px; font-size: 9px; padding: 7px 9px; }
  .cozy-shortcuts { gap: 9px; margin: 12px 0 34px; }
  .cozy-shortcut { flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 12px; border-radius: 15px; }
  .cozy-shortcut-icon { width: 31px; height: 31px; border-radius: 10px; }
  .cozy-shortcut-icon svg { width: 17px; height: 17px; }
  .cozy-shortcut strong { font-size: 14px; }
  .cozy-shortcut span:not(.cozy-shortcut-icon) { font-size: 12px; }
  .cozy-shortcut > i { display: none; }
  #radio-section .section-heading { margin-bottom: 19px; }
  #radio-section .section-heading > .quiet { font-size: 10px; }
  :is(#radio-section, #games-section, #listening-section) :is(h1,h2) { font-size: 25px; }
  :is(#radio-section, #games-section, #listening-section) .eyebrow { font-size: 9px; letter-spacing: .8px; }
  :root[data-theme] .genre-tabs .chip { font-size: 11px; padding: 8px 11px; }
  .genre-tabs { gap: 6px; margin-bottom: 16px; }
  #radio-section .results-line { font-size: 10px; margin-block: 15px; gap: 10px; }
  #radio-section .text-button { font-size: 10px; }
  #radio-section .station-grid { gap: 11px; }
  :root[data-theme] #stations .station-card { padding: 14px; border-radius: 16px; }
  #stations .station-name { font-size: 15px; }
  #stations .station-place { font-size: 12px; }
  #stations .station-details { font-size: 12px; gap: 4px; }
  #stations .station-details svg { width: 13px; height: 13px; }
  #stations .station-logo { width: 43px; height: 43px; border-radius: 11px; }
  #stations .station-tag { font-size: 12px; }
  #games-section { margin-top: 39px; }
  .cozy-adventure { grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 280px; border-radius: 20px; margin-bottom: 22px; }
  .cozy-adventure-copy { padding: 24px; }
  .cozy-adventure-copy h3 { font-size: 26px; letter-spacing: -.7px; }
  .cozy-adventure-copy > p:not(.cozy-kicker) { font-size: 12px; }
  .cozy-coming { font-size: 9px; }
  #games-section .games-grid { gap: 12px; }
  #games-section .game-meta { padding: 14px 14px 17px; }
  #games-section .game-meta h3 { font-size: 15px; }
  #games-section .game-meta p { font-size: 11px; }
  #discover-intro.home-slider, #discover-intro.hero { border-radius: 20px; margin-top: 36px; }
  #discover-intro.home-slider .home-slide, #discover-intro.hero:not(.home-slider) { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); height: 280px; min-height: 280px; }
  #discover-intro.home-slider :is(.home-feature-copy,.hero-copy), #discover-intro.hero:not(.home-slider) .hero-copy { padding: 23px; width: 100%; }
  #discover-intro.home-slider :is(.home-feature-copy h2,.hero-copy h2,.hero-copy h1), #discover-intro.hero:not(.home-slider) h2 { font-size: 24px; }
  #discover-intro.home-slider .home-description, #discover-intro.home-slider .hero-copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.75; }
  #discover-intro.home-slider :is(.home-feature-art, .record-scene) { width: 100%; height: 100%; min-height: 0; border-radius: 0; opacity: 1; }
  #discover-intro .home-slider-controls { padding: 6px 9px; gap: 5px; }
  #discover-intro[data-slider-loading] { min-height: 321px; height: 321px; }
  #listening-section { margin-top: 37px; }
  #listening-section .listening-copy { padding: 16px; }
  #listening-section .listening-copy h3 { font-size: 17px; }
  #listening-section .listening-copy p { font-size: 12px; }
  #listening-section .story-card-image { width: 135px; }
  #listening-section .listening-grid { gap: 12px; }
  :root[data-theme] .bottom-note { gap: 11px; flex-wrap: wrap; }
  :root[data-theme] .bottom-note p { flex-basis: calc(100% - 100px); }
  :root[data-theme] .bottom-note .text-button { font-size: 10px; }
  :root[data-theme] .player { border-radius: 17px; }
  :root[data-theme] .player .main-play { border-radius: 15px; }
}
@media (max-width: 520px) {
  .cozy-welcome { display: flex; flex-direction: column; }
  .cozy-welcome-copy { align-self: stretch; padding: 28px 25px 24px; }
  .cozy-welcome h1 { font-size: 36px; letter-spacing: -1.4px; }
  .cozy-lead { max-width: 330px; font-size: 15px; margin-bottom: 18px; }
  .cozy-actions { gap: 8px 17px; }
  .cozy-footnote { font-size: 12px; margin-top: 15px; }
  .cozy-welcome-art { min-height: 200px; height: 200px; aspect-ratio: auto; width: 100%; }
  .cozy-welcome-art img { object-position: center 58%; }
  .cozy-welcome-art figcaption { bottom: 11px; right: 12px; }
  .cozy-shortcuts { grid-template-columns: minmax(0, 1fr); gap: 9px; margin-bottom: 33px; }
  .cozy-shortcut { flex-direction: row; align-items: center; gap: 13px; min-height: 70px; padding: 12px 16px; }
  .cozy-shortcut-icon { width: 36px; height: 36px; }
  .cozy-shortcut-icon svg { width: 20px; height: 20px; }
  .cozy-shortcut strong { font-size: 14px; }
  .cozy-shortcut span:not(.cozy-shortcut-icon) { font-size: 12px; line-height: 1.7; }
  .cozy-shortcut > i { display: block; }
  #radio-section .section-heading { align-items: flex-start; }
  #radio-section .section-heading > .quiet { max-width: 60px; text-align: right; }
  #radio-section .station-grid { gap: 10px; }
  :root[data-theme] #stations .station-card { padding: 13px; }
  #stations .station-actions { gap: 4px; }
  :root[data-theme] #stations .station-play { width: 32px; height: 34px; min-width: 32px; }
  #stations .station-details > span { max-width: 70px; }
  #games-section .section-heading { align-items: flex-start; }
  #games-section .section-heading > .quiet { max-width: 86px; text-align: right; line-height: 1.7; font-size: 10px; }
  .cozy-adventure { display: flex; flex-direction: column; }
  .cozy-adventure-art { min-height: 210px; aspect-ratio: 1.7; }
  .cozy-adventure-copy { padding: 25px; }
  .cozy-adventure-copy h3 { font-size: 29px; }
  .cozy-adventure-copy > p:not(.cozy-kicker) { font-size: 13px; }
  .cozy-coming { font-size: 10px; }
  #games-section .game-meta { padding: 13px 12px 16px; }
  #games-section .game-meta h3 { font-size: 14px; }
  #games-section .game-meta p { font-size: 11px; }
  #discover-intro.home-slider .home-slide, #discover-intro.hero:not(.home-slider) { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); height: 300px; min-height: 300px; }
  #discover-intro.home-slider :is(.home-feature-copy,.hero-copy) { padding: 21px 17px; }
  #discover-intro.home-slider :is(.home-feature-copy h2,.hero-copy h2,.hero-copy h1) { font-size: 21px; letter-spacing: -.5px; margin-bottom: 10px; }
  #discover-intro.home-slider .home-feature-copy .eyebrow { font-size: 9px; letter-spacing: .5px; margin-bottom: 10px; }
  #discover-intro.home-slider .home-description { font-size: 11px; line-height: 1.8; margin-bottom: 12px; }
  #discover-intro.home-slider .primary { font-size: 11px; padding: 9px 10px; }
  #discover-intro .home-slider-dots { order: 0; flex-basis: auto; }
  #discover-intro .home-slider-dots button { width: 12px; }
  #discover-intro .home-slider-dots button[aria-current=true]:before { width: 10px; }
  #discover-intro .home-slider-count { border-left: 0; min-width: 25px; padding-left: 3px; }
  #discover-intro[data-slider-loading] { min-height: 341px; height: 341px; }
  #listening-section .story-card-image { width: 110px; }
  #listening-section .listening-copy { padding: 14px; }
  #listening-section .listening-copy h3 { font-size: 16px; }
  #listening-section .listening-copy p { font-size: 11px; }
}
@media (max-width: 360px) {
  main#content { padding-inline: 12px; }
  :root[data-theme] .app-shell > .topbar { padding-inline: 12px; }
  .cozy-welcome-copy { padding-inline: 21px; }
  .cozy-welcome h1 { font-size: 32px; }
  .cozy-shortcut { padding-inline: 13px; gap: 11px; }
  #radio-section .station-grid { gap: 8px; }
  :root[data-theme] #stations .station-card { padding: 11px; }
  #stations .station-name { font-size: 15px; }
  #stations .station-actions { flex-wrap: wrap; }
  #stations .station-details { font-size: 12px; gap: 3px; }
  #stations .station-details svg { width: 12px; height: 12px; }
  #stations .station-details > span { max-width: 60px; }
  #discover-intro.home-slider .home-slide { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); height: 320px; min-height: 320px; }
  #discover-intro.home-slider :is(.home-feature-copy,.hero-copy) { padding-inline: 15px; }
  #discover-intro.home-slider :is(.home-feature-copy h2,.hero-copy h2,.hero-copy h1) { font-size: 19px; }
  #discover-intro .home-slider-controls { gap: 2px; padding-inline: 5px; flex-wrap: nowrap; }
  #discover-intro .home-slider-controls > button { width: 25px; }
  #discover-intro .home-slider-dots button { width: 10px; }
  #discover-intro[data-slider-loading] { min-height: 361px; height: 361px; }
  #listening-section .story-card-image { width: 90px; }
}
@media (prefers-reduced-motion: no-preference) {
  .cozy-shortcut { transition: border-color .18s ease, transform .18s ease; }
  .cozy-shortcut:hover { transform: translateY(-2px); }
  #stations .station-card { transition: background-color .18s ease, border-color .18s ease; }
  #games-section .game-card, #listening-section .listening-card { transition: transform .18s ease, border-color .18s ease; }
}
@media (prefers-reduced-motion: reduce) {
  .cozy-shortcut, #stations .station-card, #games-section .game-card, #listening-section .listening-card { transition: none; }
  #games-section .game-card:hover, #listening-section .listening-card:hover, .cozy-shortcut:hover { transform: none; }
}

/* Leave room for the station heading on a narrow screen. */
@media (max-width: 520px) {
  #radio-section .section-heading { display: block; }
  #radio-section #catalog-total { display: block; max-width: none; text-align: left; margin-top: 8px; font-size: 12px; }
}
@media (max-width: 700px) {
  #radio-section { scroll-margin-top: 82px; }
}
@media (max-width: 360px) {
  #stations .station-actions { flex-wrap: nowrap; justify-content: space-between; }
  #stations .station-card .station-actions .station-details { font-size: 0; min-width: 36px; min-height: 36px; padding: 6px; justify-content: center; }
  #stations .station-details svg { width: 16px; height: 16px; }
}

/* The existing larger-text preference also applies to the new welcome. */
:root[data-font-size="large"] :is(.cozy-lead, .cozy-adventure-copy > p:not(.cozy-kicker)) { font-size: 17px; }
:root[data-font-size="large"] :is(.cozy-kicker, .cozy-footnote, .cozy-coming, .cozy-shortcut span:not(.cozy-shortcut-icon)) { font-size: 14px; }
:root[data-font-size="large"] :is(.cozy-shortcut strong, .cozy-soft-link, .cozy-actions .primary) { font-size: 16px; }