/* Studio direction · local preview 2026-10-03
   The established playback effects remain in design-system.css. */
@font-face {
  font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --bg: #0a1015; --panel: #111b22; --panel-2: #1a2831; --line: #2b3a43;
  --ink: #edf3f4; --muted: #9fadb5; --cyan: #83ded6; --lime: #c8edb4;
  --residance-gold: #e9ca7b;
  --tile-alpha: .1;
  --studio-font: Manrope, 'Segoe UI', Arial, sans-serif;
  font-family: var(--studio-font);
}
html { scroll-padding-top: 32px; }
body { font-family: var(--studio-font); color: var(--ink); background: var(--bg); }
h1,h2,h3,h4,button,input,.brand-name,.station-kind,.station-kind.live-kind,.station-card-footer span { font-family: var(--studio-font); }
button,a,input,summary { -webkit-tap-highlight-color: transparent; }
.wrap { width: min(1520px,calc(100% - 96px)); }
.site-grid { display: none; }
#topography-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#topography-bg canvas { display: block; width: 100%; height: 100%; }
#topography-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#0a1015b3,#0a101525 65%,#0a101533); pointer-events: none; }
#topography-bg[data-renderer="static"] { background: repeating-radial-gradient(ellipse at 90% 20%,transparent 0 42px,#62b5b216 43px 44px,transparent 45px 75px); }
.header,.mobile-nav,main,.footer { position: relative; z-index: 1; }
.station-card { isolation: isolate; }
.site-glow { opacity: .16; }
.reveal { opacity: 1; transform: none; }
.header { height: 92px; gap: 32px; border-bottom: 1px solid #25333b; }
.brand { gap: 14px; }
.brand-icon { width: 44px; height: 48px; border-color: #69b3b2; background: #102026; }
.brand-icon i { background: var(--cyan); }
.brand-name { font-size: 11px; line-height: 1.3; letter-spacing: .065em; }
.brand-name strong { font-size: 14px; font-weight: 800; letter-spacing: .005em; }
.brand-name small { margin-top: 5px; font-size: 8px; color: #8da6ad; letter-spacing: .12em; }
.nav { gap: 28px; margin-left: 24px; font-size: 13px; font-weight: 550; }
.nav a { color: #a7b5bc; transition: color .2s; }
.nav a:hover { color: var(--cyan); }
.nav a[href="#residance"] { color: #d4bb81; }
.header-activity { gap: 16px; }
.header-live { min-height: 36px; border: 0; padding-inline: 0; font-size: 10px; color: var(--muted); }
.listener-counter { font-size: 10px; gap: 6px; }
.listener-counter strong { font-size: 17px; }
.language-switch { border-color: #2b3b42; border-radius: 6px; padding: 2px; }
.language-switch button { min-width: 57px; min-height: 32px; border-radius: 3px; font-size: 10px; }
.language-flag { width: 18px; height: 13px; }
.language-switch button.is-active { color: var(--ink); background: #24343b; }

/* A quiet, editorial hero. The interactive emblem is the illustration. */
.hero { min-height: 460px; padding-block: 44px 36px; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 40px; align-items: center; }
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .16em; color: #aac2c7; gap: 12px; }
.eyebrow-line { width: 24px; height: 1px; }
.hero h1 { font-family: var(--studio-font); font-size: clamp(44px,4.9vw,76px); line-height: 1.06; font-weight: 750; letter-spacing: -.055em; margin: 22px 0; }
.hero h1 em { color: var(--cyan); font-weight: 550; }
.hero-copy > p { max-width: 490px; font-size: 15px; line-height: 1.75; color: #a4b4bb; }
.hero-actions { gap: 12px; margin-top: 28px; }
.button { height: 48px; padding-inline: 22px; gap: 10px; border-radius: 6px; font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.button-primary { color: #122221; background: var(--cyan); border-color: var(--cyan); }
.button-primary:hover { background: #a1eee6; }
.button-ghost { color: #d1dee0; border-color: #3b4d54; }
.hero-actions .button-ghost { border-color: transparent; padding-inline: 12px; }
.hero-actions .button-ghost:hover { background: #15232a; }
.hero-facts { margin-top: 26px; gap: 14px; font-size: 11px; color: #83979f; }
.hero-facts b { color: var(--ink); font-weight: 750; }
.hero-art { height: 380px; transform: scale(.82); margin: 0; }
.hero-art::before { opacity: .25; }
.hero-art .art-core { background: radial-gradient(circle at 44% 30%,#233b47,#152b34 60%,#0e1b25); }
.hero-art .core-title { font-family: var(--studio-font); font-size: 27px; line-height: 1.02; letter-spacing: -.025em; font-weight: 800; }
.hero-art .hero-logo-caption { font-size: 12px; letter-spacing: .12em; top: calc(50% + 46px); }
.hero-art .core-mark { top: calc(50% - 62px); }
.hero-art:not([data-state="playing"]) .core-mark i { animation-play-state: paused; }
.hero-art .orbit-a { border-color: #799ba926; }
.hero-art .art-ticks { opacity: .22; }
.hero-art .orbit-b { box-shadow: 0 0 22px #6bd6de12,inset 0 0 15px #6bd6de12; }
.hero-art .orbit-c { border-color: #78d9d777; box-shadow: 0 0 16px #69c5c438,inset 0 0 18px #4caddc15; }
.hero-art[data-state="playing"] .orbit-c { box-shadow: 0 0 28px #6bd6de66,inset 0 0 20px #4caddc33; }
.ticker { height: 36px; color: #88b5b7; border-color: #294049; background: #111e23; font-family: var(--studio-font); font-size: 9px; font-weight: 650; letter-spacing: .13em; }

/* One compact receiver, with artwork, title and a clear central action. */
.player-section { padding-top: 36px; }
.section-kicker { font-family: var(--studio-font); font-size: 11px; font-weight: 650; letter-spacing: .1em; }
.section-kicker .kicker-rule { width: 28px; background: #518687; box-shadow: none; }
.reactor-panel { margin-top: 16px; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); border: 1px solid #354b55; border-radius: 12px; background: rgb(16 29 38 / var(--tile-alpha)); }
.reactor-backdrop { opacity: .24; }
.reactor-corner { display: none; }
.reactor-panel[data-state="playing"] { border-color: #5c9eac; box-shadow: 0 8px 48px #00000020; }
.reactor-panel .player-main { padding: 28px 24px 22px 28px; }
.reactor-panel .player-label { font-size: 9px; font-weight: 600; letter-spacing: .14em; color: #859fa9; }
.reactor-panel .player-heading-row { gap: 24px; margin-top: 16px; min-height: 136px; }
.reactor-panel .player-cover { width: 136px; height: 136px; aspect-ratio: 1; border: 1px solid #627a7133; border-radius: 6px; }
.reactor-panel .player-cover .cover-image { object-fit: cover; }
.reactor-panel .player-headings h2 { font-size: clamp(25px,2.4vw,36px); line-height: 1.15; font-weight: 750; letter-spacing: -.035em; }
.reactor-panel .player-category { font-size: 9px; letter-spacing: .08em; color: var(--cyan); }
.reactor-panel .player-headings > p:last-child { font-size: 12px; line-height: 1.6; margin-top: 10px; color: #a0b4bf; }
.reactor-panel .player-wave { height: 24px; margin-top: 18px; justify-content: flex-start; opacity: .35; }
.reactor-panel .player-wave i { background: var(--cyan); box-shadow: none; max-height: 24px; }
.reactor-panel .player-instruction { min-height: 0; font-size: 10px; line-height: 1.5; margin-top: 8px; color: #93a9b4; }
.reactor-panel .embed-frame { min-height: 0; }
.reactor-panel .direct-player { grid-template-columns: minmax(190px,1fr) minmax(155px,.8fr); padding: 18px 32px 32px 0; gap: 20px; min-height: 286px; }
.reactor-console { width: 224px; max-width: 100%; }
.reactor-caption { bottom: -12px; font-family: var(--studio-font); font-size: 8px; letter-spacing: .15em; color: #96b4c0; }
.reactor-controls { display: block; padding-left: 0; }
.live-badge { justify-content: flex-start; min-height: 30px; border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none; font-size: 10px; font-family: var(--studio-font); font-weight: 700; letter-spacing: .07em; }
.reactor-panel #direct-status { min-height: 32px; margin: 4px 0 22px; color: #95aeb8; font-size: 11px; line-height: 1.5; text-align: left; }
.volume-label { font-size: 9px; font-family: var(--studio-font); letter-spacing: .08em; }
.volume-label output { color: #b8d4d7; }
.live-volume { gap: 8px; margin-top: 0; }
.live-volume button { width: 36px; height: 44px; color: #94b6bd; padding-left: 0; }
.live-volume svg { width: 20px; height: 20px; }
.live-volume input { height: 36px; background: transparent; }
.live-volume input::-webkit-slider-runnable-track { height: 3px; border-radius: 4px; background: linear-gradient(to right,var(--cyan) var(--volume),#374951 var(--volume)); }
.live-volume input::-moz-range-track { height: 3px; border-radius: 4px; background: #374951; }
.live-volume input::-moz-range-progress { height: 3px; background: var(--cyan); }
.live-volume input::-webkit-slider-thumb { margin-top: -5px; width: 13px; height: 13px; background: #a4e9e3; border: 0; box-shadow: none; }
.live-volume input::-moz-range-thumb { width: 13px; height: 13px; background: #a4e9e3; border: 0; box-shadow: none; }
.reactor-signature { margin-top: 12px; color: #6b8d98; font-size: 7px; }
.reactor-footer { min-height: 42px; padding: 10px 28px; border-color: #2c424c; background: #0c171eb3; color: #809ca8; font-size: 9px; }
.reactor-footer-center { font-size: 8px; letter-spacing: .12em; color: #69858f; }
.recording-controls { margin-top: 20px; }
.recording-actions { justify-content: space-between; }

/* Listening suggestions are editorial covers, not another set of UI boxes. */
.stations-section { padding-top: 60px; }
.stations-section > .section-kicker { display: none; }
.section-head { margin: 0 0 24px; align-items: center; }
.section-head h2 { font-size: clamp(28px,2.6vw,40px); font-weight: 700; letter-spacing: -.04em; }
.section-head > p { max-width: 280px; font-size: 12px; color: #95a9b2; }
.sound-selections { display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 16px; margin-bottom: 32px; }
.sound-pick { position: relative; isolation: isolate; min-width: 0; min-height: 246px; padding: 24px; display: flex; flex-direction: column; overflow: hidden; border-radius: 8px; background: #182930; color: var(--ink); }
.sound-pick > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 54%; transition: transform .5s; }
.sound-pick::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,#091922dd,#08101950),linear-gradient(0deg,#071118ee,transparent 80%); pointer-events: none; }
.sound-pick:hover > img { transform: scale(1.04); }
.pick-drive > img { object-position: 50% 50%; }
.pick-drive::after { background: linear-gradient(90deg,#211124dc,#21122655),linear-gradient(0deg,#170c22ee,transparent 90%); }
.pick-eyebrow { font-size: 9px; font-weight: 750; letter-spacing: .15em; color: #c0d6d6; }
.pick-content { margin: auto 0 20px; padding-top: 24px; }
.pick-content h3 { font-size: 26px; font-weight: 750; line-height: 1.16; letter-spacing: -.035em; margin: 0; }
.pick-content h3 em { font-weight: 450; font-style: normal; color: #e0e9e9; }
.pick-content p { color: #bdcdd1; font-size: 12px; line-height: 1.7; margin: 12px 0 0; }
.pick-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pick-actions button { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; color: var(--ink); font-size: 12px; font-weight: 650; border: 0; background: transparent; cursor: pointer; }
.pick-actions button:hover { color: var(--cyan); }
.pick-actions button > .ui-icon { width: 30px; height: 30px; border: 1px solid #d8f2f377; border-radius: 50%; padding: 6px; }
.pick-actions .pick-more { color: #b4c7cf; font-size: 11px; font-weight: 500; }
.pick-actions .pick-more .ui-icon { border: 0; width: 16px; height: 16px; padding: 0; }
.pick-residance { background: #24241d; }
.pick-residance::after { background: linear-gradient(90deg,#24241d 0%,#24241df5 24%,#24241d11 100%); }
.pick-residance > img { z-index: -2; width: 225px; height: 225px; left: auto; top: 46px; right: -32px; transform: rotate(9deg); border-radius: 5px; }
.pick-residance:hover > img { transform: rotate(5deg) scale(1.035); }
.pick-residance .pick-eyebrow { color: var(--residance-gold); }
.pick-residance h3 { font-size: 34px; color: var(--residance-gold); }
.pick-residance .pick-content p { color: #d2caba; }
.pick-residance .pick-actions { font-size: 11px; font-weight: 700; color: #f1dba7; min-height: 44px; }
.pick-residance .pick-actions > .ui-icon { width: 30px; height: 30px; padding: 6px; border: 1px solid #ccb88277; border-radius: 50%; }

/* Browse rail, consistent controls and album-like station tiles. */
.catalog-modes { display: flex; align-items: stretch; gap: 28px; border-bottom: 1px solid #34464e; }
.catalog-mode { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 12px 0; background: transparent; color: #a0b5bd; font-size: 15px; font-weight: 650; border: 0; border-radius: 0; cursor: pointer; }
.catalog-mode small { font-size: 10px; color: #7f99a3; font-weight: 500; }
.catalog-mode.active { color: #def2f1; }
.catalog-mode.active::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; display: block; background: var(--cyan); }
.mode-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; }
.catalog-modes .catalog-residance { margin: 0; padding: 12px 0; border: 0; background: transparent; border-radius: 0; color: #d4bc80; box-shadow: none; overflow: visible; isolation: auto; }
.catalog-modes .catalog-residance:hover,.catalog-modes .catalog-residance.active { background: transparent; color: #f2d994; border: 0; box-shadow: none; }
.catalog-modes .catalog-residance.active::after { display: block; background: var(--residance-gold); z-index: auto; inset: auto 0 -1px; }
.catalog-toolbar[hidden] { display: none; }
.sound-pick.is-playing { box-shadow: inset 0 0 0 1px #91ddd3a6; }
.sound-pick.is-playing .pick-actions > button:first-child { color: #a7f1e3; }
.sound-pick.is-connecting .pick-actions > button:first-child { color: #f1d398; }
.catalog-toolbar { padding: 20px 0 16px; border-top-color: #34464e; border-bottom-color: #24343c; gap: 24px; margin-bottom: 12px; }
.catalog-modes + .catalog-toolbar { border-top: 0; }
.filter-stack { flex: 1; min-width: 0; gap: 14px; }
.filter-caption { display: none; }
.filters { gap: 6px; align-items: center; }
.filter { min-height: 40px; padding: 8px 12px; border-color: transparent; color: #9aaeb7; font-size: 11px; font-weight: 650; letter-spacing: .025em; border-radius: 4px; }
.filter:hover { border-color: transparent; background: #182a31; }
.filter.active { background: #253d43; border-color: #45686c; color: #d4f6f2; }
.filter[data-genre] { min-height: 36px; font-size: 10px; padding: 6px 10px; color: #829ca6; }
.filter[data-genre].active { color: #c0e1df; border-color: #2e484f; background: #162b32; }
.catalog-residance { margin-left: 16px; padding-inline: 16px; color: var(--residance-gold); border: 1px solid #7e713f; background: #2a291d; }
.catalog-residance::before,.catalog-residance::after { display: none; }
.catalog-residance:hover,.catalog-residance.active { color: #f6d883; background: #3b3320; border-color: #c2a864; }
.catalog-residance.active { box-shadow: inset 0 -2px var(--residance-gold); }
.search { min-width: 240px; width: 240px; height: 42px; border: 1px solid #354a54; background: #0f1b22; border-radius: 5px; }
.search input { font-size: 12px; }
.search input::placeholder { color: #8c9fa9; }
.catalog-meta { font-size: 10px; color: #788f99; }
.station-group { margin-top: 40px; }
.station-group-index { display: none; }
.station-group-heading { align-items: center; padding-bottom: 12px; margin-bottom: 18px; border-color: #25363f; }
.station-group-heading h3 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.02em; font-weight: 650; }
.station-group-heading p { font-size: 11px; color: #8299a4; }
.station-group-count { font-size: 10px; color: #7b96a0; }
.station-cards-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px 16px; }
.station-card { padding: 0 0 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; overflow: visible; }
.station-card:hover { transform: translateY(-3px); background: rgb(20 35 43 / var(--tile-alpha)); border-color: #243f49; }
.station-card.selected { background: rgb(20 40 46 / var(--tile-alpha)); border-color: #38616a; }
.station-card.is-playing { border-color: #70b9b6; }
.station-art { width: 100%; height: auto; aspect-ratio: 1.28; margin: 0 0 8px; border-radius: 5px; box-shadow: none; }
.station-art .cover-image { object-fit: cover; }
.station-card-top { min-height: 32px; padding-inline: 12px 6px; }
.station-kind,.station-kind.live-kind { font-size: 10px; letter-spacing: .02em; color: #8da5af; font-weight: 550; }
.station-card h4 { font-size: 15px; line-height: 1.4; min-height: 42px; padding-inline: 12px; margin: 0 0 6px; font-weight: 700; letter-spacing: -.015em; }
.station-card > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 40px; padding-inline: 12px; margin: 0; color: #93a8b1; font-size: 12px; line-height: 1.65; }
.station-card-footer { margin: 8px 12px 0; padding: 0; min-height: 44px; border: 0; gap: 6px; }
.station-card-footer span { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: #8da7b0; }
.favorite { min-width: 44px; min-height: 44px; padding: 12px; }
.favorite .ui-icon { width: 17px; height: 17px; }
.station-play { width: 44px; height: 44px; background: #20343e; border: 1px solid #49616c; color: #c8dfe2; }
.station-play:hover { background: var(--cyan); color: #102329; border-color: var(--cyan); }
.empty-state { padding: 48px 24px; border: 1px solid var(--line); text-align: center; }
.empty-state h3 { margin: 0 0 12px; font-size: 22px; }
.empty-state p { color: var(--muted); margin: 0 0 24px; }
.empty-state[hidden] { display: none; }
.catalog-episodes { margin-top: 24px; }
.catalog-episodes > .section-kicker { display: none; }
.catalog-episodes .residance-heading { margin-block: 0 32px; padding: 0 0 24px 100px; min-height: 108px; background: url('covers/residance-official.webp') no-repeat left top / 80px 80px; border-bottom: 1px solid #6d644144; align-items: center; }
.catalog-episodes .residance-heading h3 { color: var(--residance-gold); font-size: 32px; }
.catalog-episodes .residance-heading p { font-size: 12px; max-width: 440px; }
.catalog-episodes .residance-heading > a { color: #c4b583; font-size: 12px; }
.catalog-episodes .residance-list-heading h4 { font-size: 15px; }
.catalog-episodes .residance-list-heading > span { font-size: 11px; }
.catalog-episodes .residance-list { gap: 10px 16px; }
.catalog-episodes .residance-list button { border-color: #30434c; background: rgb(17 30 38 / var(--tile-alpha)); border-radius: 6px; padding: 16px; }
.catalog-episodes .residance-list button:hover,
.catalog-episodes .residance-list button[aria-current="true"] { background: rgb(26 40 49 / var(--tile-alpha)); }
.catalog-episodes .residance-episode-name strong { font-size: 14px; }
.catalog-episodes .residance-episode-name small { font-size: 11px; }
.episode-state { font-size: 10px; }

/* Supporting information steps back; the music stays in front. */
.guide { padding-top: 64px; }
.guide > .section-kicker,.faq .section-kicker,.about .section-kicker { display: none; }
.guide-heading { margin: 0 0 24px; }
.guide-heading h2,.faq h2,.about h2 { font-size: 30px; line-height: 1.2; font-weight: 650; }
.guide-heading h2 em,.faq h2 em,.about h2 em { color: #82bebd; font-weight: 450; }
.guide-heading > p,.guide-card p,.faq-list p,.about-copy p { font-size: 13px; color: #9bb0b9; }
.guide-card { padding-top: 20px; border-color: #32464f; }
.guide-card h3 { font-size: 18px; margin-top: 16px; }
.guide-num { font-family: var(--studio-font); font-size: 11px; }
.faq { padding-top: 60px; }
.faq-list summary { padding: 18px 0; font-size: 14px; font-weight: 600; }
.faq-list details { border-color: #2d414b; }
.about { margin-top: 56px; border-top: 1px solid #2c414a; padding-block: 40px 56px; }
.about-copy a { font-family: var(--studio-font); font-size: 11px; }
.footer { border-top-color: #2c414a; background: #0c161c; }
.footer-inner { padding-block: 28px; }
.footer-inner > p { font-size: 12px; color: #a1b6bf; }
.footer-inner > a:last-child { font-size: 10px; }
.footer-note { padding-bottom: 24px; max-width: 750px; text-align: center; font-size: 10px; line-height: 1.7; color: #7d959f; }
.listening-dock { background: #13252d; border-color: #476873; box-shadow: 0 12px 40px #0006; border-radius: 10px; }
.dock-track strong { font-family: var(--studio-font); }

/* Sound desk. This is the only spectrum; volume remains a simple control. */
.reactor-panel .player-wave.spectrum { display: block; height: auto; min-height: 76px; margin-top: 20px; opacity: 1; }
.spectrum canvas { display: block; width: 100%; height: 60px; }
.spectrum-legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: 8px; letter-spacing: .06em; color: #75959e; }
.equalizer-toggle { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; margin-top: 6px; background: transparent; border: 0; border-top: 1px solid #2e4750; color: #b2cdd0; font-size: 11px; cursor: pointer; text-align: left; }
.equalizer-toggle .ui-icon { width: 18px; height: 18px; flex: none; }
.equalizer-toggle small { font-size: 9px; color: #82a29e; margin-left: auto; }
.equalizer-toggle .eq-toggle-indicator { position: relative; width: 28px; height: 16px; border-radius: 12px; background: #3c515a; margin-left: auto; flex: none; }
.equalizer-toggle .eq-toggle-indicator::after { content: ''; position: absolute; width: 10px; height: 10px; left: 3px; top: 3px; border-radius: 50%; background: #c7dcd9; transition: transform .2s; }
.equalizer-toggle[aria-checked="true"] .eq-toggle-indicator { background: #438d82; }
.equalizer-toggle[aria-checked="true"] .eq-toggle-indicator::after { transform: translateX(12px); background: #d7faf0; }
.equalizer-toggle small { margin-left: 0; }
.equalizer-toggle[aria-checked="false"]:not(:disabled) small { display: none; }
.equalizer-toggle:disabled { opacity: .55; cursor: not-allowed; }
.equalizer-toggle:hover,.equalizer-toggle[aria-expanded="true"] { color: var(--cyan); }
.equalizer-panel { grid-column: 1/-1; border-top: 1px solid #344d57; padding: 16px 24px; background: rgb(13 25 33 / var(--tile-alpha)); }
.equalizer-panel[hidden] { display: none; }
.equalizer-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.equalizer-heading h3 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.025em; }
.equalizer-heading p { color: #8da9b4; font-size: 12px; margin: 6px 0 0; }
.eq-switch { display: flex; gap: 8px; align-items: center; border: 0; background: transparent; color: #a7c3c9; min-height: 44px; padding: 0; font-size: 11px; cursor: pointer; }
.eq-switch > span:first-child { position: relative; width: 32px; height: 18px; border-radius: 20px; background: #3c515a; transition: background .2s; }
.eq-switch > span:first-child::after { content: ''; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #d7e9e7; transition: transform .2s; }
.eq-switch[aria-checked="true"] > span:first-child { background: #397c77; }
.eq-switch[aria-checked="true"] > span:first-child::after { transform: translateX(14px); }
.equalizer-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 32px; margin-top: 0; }
.equalizer-bands { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.eq-band { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.eq-band output { font-size: 11px; color: #b2e5d9; font-variant-numeric: tabular-nums; }
.eq-band input { writing-mode: vertical-lr; direction: rtl; appearance: none; -webkit-appearance: none; width: 44px; height: 60px; margin: 2px 0; background: transparent; cursor: pointer; }
.eq-band input::-webkit-slider-runnable-track { width: 3px; border-radius: 3px; background: linear-gradient(to top,#314650 calc(100% - var(--eq-value,50%)),#7dbeb8 0); }
.eq-band input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 21px; height: 9px; margin-left: -9px; background: #bce5dc; border-radius: 2px; border: 1px solid #e0f2ed; box-shadow: 0 2px 8px #0005; }
.eq-band input::-moz-range-track { width: 3px; border-radius: 3px; background: #46646b; }
.eq-band input::-moz-range-thumb { width: 21px; height: 8px; background: #bce5dc; border-radius: 2px; border: 1px solid #e0f2ed; }
.eq-band input:focus-visible { outline-offset: 2px; border-radius: 3px; }
.eq-band strong { font-size: 12px; font-weight: 600; color: #d0e0e4; }
.eq-band strong small { color: #6f919e; font-size: 9px; font-weight: 400; }
.eq-band > span { color: #809ea9; font-size: 10px; }
.eq-presets-label { display: block; margin-bottom: 8px; color: #83a0ab; font-size: 9px; letter-spacing: .1em; }
.eq-preset-list { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-preset-list button { min-height: 40px; padding: 8px 14px; border: 1px solid #38525d; border-radius: 5px; font-size: 11px; color: #bbd2d8; background: #132630; cursor: pointer; }
.eq-preset-list button:hover { border-color: #6babae; }
.eq-preset-list button[aria-pressed="true"] { background: #22403f; border-color: #609b92; color: #c7eee5; }
.equalizer-presets > p { max-width: 340px; min-height: 0; margin: 10px 0 0; color: #91aeb8; font-size: 11px; line-height: 1.7; }
.eq-reset { min-height: 32px; padding: 0; border: 0; background: transparent; color: #bad1d6; font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #4e707d; }
.equalizer-panel button:disabled,.eq-band input:disabled { opacity: .4; cursor: not-allowed; }

@media (min-width: 1700px) {
  .hero { min-height: 490px; }
  .hero-art { transform: scale(.9); }
  .sound-pick { min-height: 270px; }
  .reactor-panel .player-cover { width: 150px; height: 150px; }
  .reactor-panel .direct-player { min-height: 300px; }
}
@media (max-width: 1200px) {
  .wrap { width: calc(100% - 64px); }
  .header { gap: 20px; }
  .nav { gap: 20px; margin-left: 0; }
  .nav a:last-child { display: none; }
  .header-activity { gap: 10px; }
  .listener-counter { padding-left: 10px; }
  .hero { gap: 24px; min-height: 420px; }
  .hero h1 { font-size: 56px; }
  .hero-art { height: 350px; transform: scale(.7); }
  .reactor-panel { grid-template-columns: 1.1fr 1fr; }
  .reactor-panel .player-main { padding: 24px 16px 20px 24px; }
  .reactor-panel .player-heading-row { gap: 16px; }
  .reactor-panel .player-cover { width: 100px; height: 100px; }
  .reactor-panel .player-headings h2 { font-size: 26px; }
  .reactor-panel .direct-player { grid-template-columns: minmax(160px,1fr) minmax(140px,.8fr); gap: 12px; padding-right: 24px; }
  .station-cards-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .sound-pick { padding: 20px; min-height: 246px; }
  .pick-content h3 { font-size: 24px; }
  .pick-residance h3 { font-size: 30px; }
  .pick-actions .pick-more { font-size: 9px; gap: 4px; }
  .search { width: 220px; min-width: 220px; }
  .catalog-toolbar { gap: 16px; }
}
@media (max-width: 1000px) {
  .header { flex-wrap: nowrap; }
  .nav { display: none; }
  .mobile-nav { display: flex; justify-content: flex-start; gap: 32px; padding-block: 12px; border-bottom: 1px solid #25353f; font-size: 11px; }
  .mobile-nav a { padding-block: 6px; color: #9db3be; }
  .hero { grid-template-columns: 1.15fr .85fr; gap: 0; padding-block: 32px; }
  .hero h1 { font-size: clamp(36px,5.2vw,52px); }
  .hero-copy > p { font-size: 13px; }
  .hero-art { transform: scale(.58); height: 310px; }
  .hero-facts { flex-wrap: wrap; font-size: 10px; gap: 10px; }
  .hero-actions { flex-wrap: wrap; gap: 4px; }
  .hero-actions .button { font-size: 10px; padding-inline: 14px; }
  .reactor-panel { grid-template-columns: 1fr 1fr; }
  .reactor-panel .player-heading-row { flex-direction: column; align-items: flex-start; }
  .reactor-panel .player-cover { width: 100px; height: 100px; }
  .reactor-panel .direct-player { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding: 20px 24px 16px; }
  .reactor-console { width: 196px; }
  .reactor-controls { display: grid; grid-template-columns: 1fr; }
  .reactor-panel #direct-status { margin: 0 0 10px; min-height: 0; }
  .reactor-signature { display: none; }
  .reactor-panel .player-headings h2 { font-size: 26px; }
  .reactor-footer-center { display: none; }
  .sound-selections { gap: 12px; grid-template-columns: 1fr 1fr; }
  .pick-residance { grid-column: 1/-1; min-height: 160px; padding-right: 220px; }
  .pick-residance > img { top: -16px; right: 16px; width: 190px; height: 190px; }
  .pick-residance::after { background: linear-gradient(90deg,#24241d 50%,#24241d00); }
  .pick-residance .pick-content { padding-top: 16px; margin: 0 0 4px; }
  .pick-residance .pick-content p { display: none; }
  .pick-residance .pick-actions { justify-content: flex-start; gap: 16px; }
  .catalog-toolbar { flex-direction: column; }
  .search { width: 100%; }
  .station-cards-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .station-card { display: block; }
  .station-art { width: 100%; height: auto; aspect-ratio: 1.18; margin-bottom: 8px; }
  .station-card-top { height: auto; min-height: 32px; }
  .station-card h4 { margin: 0 0 6px; min-height: 42px; font-size: 14px; }
  .station-card > p { height: 36px; max-height: none; font-size: 11px; margin: 0; }
  .station-card-footer { margin: 8px 12px 0; justify-content: space-between; }
  .station-card-footer span { display: inline; }
}
@media (max-width: 700px) {
  .reactor-panel .player-wave.spectrum { min-height: 60px; margin-top: 16px; }
  .spectrum canvas { height: 48px; }
  .spectrum-legend { font-size: 7px; }
  .equalizer-toggle { font-size: 10px; gap: 6px; flex-wrap: wrap; line-height: 1.4; }
  .equalizer-toggle small { display: none; }
  .equalizer-toggle .ui-icon { width: 16px; height: 16px; }
  .equalizer-panel { padding: 16px; }
  .equalizer-heading h3 { font-size: 21px; }
  .equalizer-heading p { font-size: 10px; }
  .eq-switch { font-size: 10px; gap: 6px; }
  .equalizer-layout { grid-template-columns: 1fr; gap: 16px; }
  .equalizer-bands { gap: 4px; }
  .eq-band { gap: 6px; }
  .eq-band strong { font-size: 11px; }
  .eq-band > span { display: none; }
  .eq-presets-label { display: none; }
  .equalizer-presets > p { font-size: 10px; line-height: 1.5; }
  .eq-preset-list { gap: 6px; }
  .eq-preset-list button { min-height: 44px; font-size: 10px; padding-inline: 12px; }
  html { scroll-padding-top: 20px; }
  .wrap { width: calc(100% - 40px); }
  .header { display: grid; grid-template-columns: minmax(0,1fr) auto; height: auto; min-height: 104px; padding-block: 16px 12px; gap: 12px 8px; }
  .header .brand { grid-row: 1/3; grid-column: 1; gap: 10px; }
  .brand-icon { width: 34px; height: 42px; }
  .brand-name { font-size: 10px; }
  .brand-name strong { font-size: 11px; }
  .brand-name small { font-size: 7px; letter-spacing: .05em; }
  .language-switch { grid-column: 2; grid-row: 1; justify-self: end; }
  .language-switch button { min-width: 46px; min-height: 32px; padding: 5px; font-size: 9px; gap: 4px; }
  .language-flag { width: 16px; height: 12px; }
  .header-activity { grid-column: 2; grid-row: 2; display: flex; align-items: flex-end; flex-direction: column-reverse; gap: 6px; justify-self: end; margin: 0; }
  .listener-counter { padding: 0; border: 0; font-size: 9px; gap: 5px; }
  .listener-counter strong { font-size: 12px; }
  .header-live { min-height: 0; padding: 0; font-size: 8px; gap: 6px; }
  .header-live .live-dot { width: 5px; height: 5px; }
  .mobile-nav { gap: 0; justify-content: space-between; font-size: 12px; padding-block: 8px; }
  .hero { display: flex; flex-direction: column; gap: 0; min-height: 0; padding-block: 32px 24px; align-items: stretch; }
  .eyebrow { font-size: 8px; gap: 10px; letter-spacing: .13em; }
  .hero h1 { font-size: clamp(35px,9.6vw,64px); line-height: 1.08; margin: 20px 0; }
  .hero-copy > p { max-width: 410px; font-size: 13px; line-height: 1.75; }
  .hero-actions { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; margin-top: 24px; }
  .hero-actions .button { width: auto; padding-inline: 14px; height: 48px; min-width: 0; font-size: 10px; gap: 7px; white-space: normal; text-align: center; }
  .hero-actions .button-primary { flex: 1.15; }
  .hero-actions .button-ghost { flex: 1; border: 1px solid #344b54; }
  .hero-actions .button .ui-icon { width: 16px; height: 16px; flex: none; }
  .hero-facts { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: flex-start; font-size: 10px; gap: 8px; line-height: 1.8; }
  .hero-facts .fact-separator { height: 12px; }
  .hero-art { height: 280px; margin: 22px 0 0; transform: scale(.56); }
  .hero-logo-button { width: 480px; height: 480px; }
  .ticker { height: 34px; font-size: 8px; }
  .player-section { padding-top: 28px; }
  .section-kicker { font-size: 8px; gap: 10px; }
  .reactor-panel { display: block; margin-top: 12px; }
  .reactor-panel .player-main { padding: 20px 20px 0; }
  .reactor-panel .player-label { font-size: 8px; letter-spacing: .1em; }
  .reactor-panel .player-heading-row { flex-direction: row; gap: 16px; min-height: 0; margin-top: 16px; align-items: center; }
  .reactor-panel .player-cover { width: 84px; height: 84px; border-radius: 4px; }
  .reactor-panel .player-headings h2 { font-size: 22px; }
  .reactor-panel .player-category { font-size: 8px; }
  .reactor-panel .player-headings > p:last-child { font-size: 11px; line-height: 1.6; margin-top: 6px; }
  .reactor-panel .player-wave { margin-top: 16px; height: 18px; }
  .reactor-panel .player-instruction { font-size: 10px; margin-top: 8px; }
  .reactor-panel .direct-player { display: grid; grid-template-columns: minmax(140px,1fr) minmax(116px,.84fr); gap: 12px; padding: 8px 20px 26px; align-items: center; }
  .reactor-console { width: 196px; max-width: 100%; }
  .reactor-caption { bottom: -10px; font-size: 8px; letter-spacing: .12em; }
  .reactor-controls { display: block; }
  .live-badge { min-height: 24px; font-size: 9px; gap: 6px; line-height: 1.5; }
  .live-badge i { width: 5px; height: 5px; }
  .reactor-panel #direct-status { font-size: 11px; min-height: 0; line-height: 1.5; margin: 2px 0 16px; }
  .volume-label { font-size: 9px; }
  .live-volume { gap: 4px; }
  .live-volume button { width: 28px; height: 36px; }
  .live-volume svg { width: 16px; height: 16px; }
  .reactor-footer { padding: 12px 20px; font-size: 8px; min-height: 0; }
  .recording-time { font-size: 10px; }
  .recording-actions span { font-size: 9px; text-align: center; }
  .stations-section { padding-top: 40px; }
  .section-head { display: block; margin-bottom: 20px; }
  .section-head h2 { font-size: 28px; }
  .section-head > p { max-width: none; margin-top: 10px; font-size: 11px; }
  .sound-selections { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 24px; }
  .sound-pick { min-height: 224px; padding: 20px; }
  .sound-pick > img { object-position: 50% 48%; }
  .pick-content { padding-top: 20px; margin-bottom: 12px; }
  .pick-content h3 { font-size: 27px; }
  .pick-content p { font-size: 11px; margin-top: 10px; }
  .pick-eyebrow { font-size: 8px; }
  .pick-actions .pick-more { font-size: 10px; }
  .pick-residance { grid-column: auto; min-height: 192px; padding-right: 130px; }
  .pick-residance > img { width: 164px; height: 164px; top: 35px; right: -16px; }
  .pick-residance::after { background: linear-gradient(90deg,#24241d 0%,#24241ded 35%,#24241d00 100%); }
  .pick-residance h3 { font-size: 29px; }
  .pick-residance .pick-content { padding-top: 20px; margin-bottom: 4px; }
  .pick-residance .pick-content p { display: block; font-size: 10px; margin-top: 8px; }
  .pick-residance .pick-actions { gap: 8px; white-space: nowrap; font-size: 10px; }
  .pick-residance .pick-actions > .ui-icon { border: 0; width: 20px; height: 20px; padding: 0; }
  .catalog-toolbar { gap: 16px; padding-top: 16px; }
  .catalog-modes { gap: 24px; }
  .catalog-mode { min-height: 52px; gap: 7px; font-size: 13px; }
  .catalog-mode small { font-size: 9px; }
  .filter-stack { gap: 10px; width: 100%; }
  .filter-line { width: 100%; }
  .filters { gap: 4px; }
  .filter { min-height: 40px; padding-inline: 10px; font-size: 10px; }
  .catalog-residance { margin-left: 0; padding-inline: 12px; }
  .filter[data-genre] { min-height: 36px; font-size: 9px; padding-inline: 8px; }
  .search { min-width: 0; height: 44px; }
  .catalog-meta { font-size: 10px; margin-bottom: 16px; }
  .catalog-meta > span:last-child { display: none; }
  .station-group { margin-top: 32px; }
  .station-group-heading { padding-bottom: 12px; margin-bottom: 12px; gap: 16px; }
  .station-group-heading h3 { font-size: 19px; }
  .station-group-heading p { font-size: 10px; }
  .station-group-count { font-size: 9px; white-space: nowrap; }
  .station-cards-grid { grid-template-columns: 1fr; gap: 8px; }
  .station-card { display: grid; grid-template-columns: 80px minmax(0,1fr) 44px; grid-template-rows: auto auto auto; column-gap: 12px; padding: 12px; min-height: 116px; border: 1px solid #263b44; border-radius: 6px; background: rgb(16 29 36 / var(--tile-alpha)); }
  .station-card:hover { transform: none; }
  .station-art { grid-column: 1; grid-row: 1/4; width: 80px; height: 80px; aspect-ratio: 1; margin: 0; align-self: center; border-radius: 4px; }
  .station-card-top { grid-column: 2/4; grid-row: 1; padding: 0; min-height: 20px; height: 20px; position: relative; }
  .station-kind,.station-kind.live-kind { font-size: 9px; max-width: calc(100% - 44px); }
  .station-card-top .favorite { position: absolute; right: -4px; top: -12px; }
  .station-card h4 { grid-column: 2; grid-row: 2; padding: 0; min-height: 0; margin: 0; font-size: 15px; line-height: 1.35; }
  .station-card > p { grid-column: 2; grid-row: 3; padding: 0; height: auto; max-height: 36px; margin: 4px 0 0; font-size: 11px; line-height: 1.6; }
  .station-card-footer { grid-column: 3; grid-row: 2/4; border: 0; padding: 0; margin: 0; align-self: center; justify-content: flex-end; }
  .station-card-footer span { display: none; }
  .station-play { width: 44px; height: 44px; }
  .catalog-episodes .residance-heading { padding: 0 0 20px 80px; background-size: 64px 64px; min-height: 100px; display: block; }
  .catalog-episodes .residance-heading h3 { font-size: 26px; }
  .catalog-episodes .residance-heading p { font-size: 11px; }
  .catalog-episodes .residance-heading > a { margin-top: 8px; font-size: 10px; }
  .catalog-episodes .residance-list button { padding: 12px; gap: 12px; }
  .catalog-episodes .residance-episode-name strong { font-size: 13px; }
  .catalog-episodes .residance-episode-name small { font-size: 10px; }
  .catalog-episodes .residance-list-heading > span { text-align: left; font-size: 10px; }
  .guide { padding-top: 40px; }
  .guide-heading h2,.faq h2,.about h2 { font-size: 25px; }
  .guide-heading { gap: 16px; }
  .guide-heading > p { font-size: 12px; }
  .guide-grid { gap: 20px; }
  .guide-card h3 { font-size: 17px; margin: 12px 0 8px; }
  .guide-card p,.faq-list p,.about-copy p { font-size: 12px; }
  .faq { padding-top: 40px; gap: 24px; }
  .faq-list summary { font-size: 13px; padding-block: 16px; }
  .about { margin-top: 40px; padding-block: 28px 40px; gap: 20px; }
  .footer-inner { gap: 20px; padding-block: 24px; }
  .footer-inner > p { font-size: 10px; }
  .footer-note { font-size: 9px; text-align: left; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  .hero h1 { font-size: 34px; }
  .hero-facts { gap: 6px; font-size: 8px; }
  .hero-art { height: 252px; transform: scale(.51); margin-top: 24px; }
  .reactor-panel .player-main { padding-inline: 16px; }
  .reactor-panel .player-heading-row { gap: 12px; }
  .reactor-panel .player-cover { width: 68px; height: 68px; }
  .reactor-panel .player-headings h2 { font-size: 20px; }
  .reactor-panel .direct-player { padding-inline: 12px; grid-template-columns: minmax(120px,1fr) minmax(110px,.86fr); gap: 6px; }
  .reactor-footer { padding-inline: 16px; font-size: 7px; }
  .station-card { grid-template-columns: 64px minmax(0,1fr) 44px; gap: 0 10px; padding: 10px; }
  .station-art { width: 64px; height: 72px; }
  .station-card h4 { font-size: 12px; }
  .station-card > p { font-size: 9px; max-height: 29px; }
  .station-kind,.station-kind.live-kind { font-size: 7px; }
  .pick-content h3 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-pick > img,.station-card,.button { transition: none; }
  .hero-art .core-mark i { animation: none; }
}

/* Liquid-glass preview. Surface alpha never affects artwork or text. */
:root {
  --glass-alpha: .1;
  --glass-blur-panel: 3px;
  --glass-blur-card: 2px;
  --glass-fill: rgb(17 30 42 / var(--glass-alpha));
  --glass-fill-raised: rgb(29 48 60 / var(--glass-alpha));
  --glass-edge: rgb(216 241 250 / .22);
  --glass-glint: linear-gradient(125deg, #e0f5ff0a 0%, transparent 38%, transparent 68%, #a3dfdd04 100%);
  --glass-shadow: inset 0 1px 0 #effcff38, inset 1px 0 0 #e0f7ff10, inset 0 -1px 0 #effcff0c, 0 16px 48px #00000026;
  --glass-radius-panel: 24px;
  --glass-radius-card: 14px;
}
#topography-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 86% 27%, #448d942a, transparent 47%), radial-gradient(ellipse at 10% 74%, #566f9522, transparent 45%);
}
.reactor-panel,.listening-dock {
  background: var(--glass-glint), var(--glass-fill);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(110%);
  backdrop-filter: blur(var(--glass-blur-panel)) saturate(110%);
  box-shadow: var(--glass-shadow);
}
.reactor-panel { border-radius: var(--glass-radius-panel); }
.reactor-panel[data-state="playing"] { border-color: #a3e3df70; box-shadow: var(--glass-shadow), 0 0 32px #77dad80a; }
.reactor-backdrop {
  background: radial-gradient(ellipse at 90% 0%, #8fd8e91f, transparent 60%);
  opacity: .12;
}
.reactor-backdrop::before,.reactor-backdrop::after { display: none; }
.reactor-panel .player-main::after { display: none; }
.reactor-panel::after {
  content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: linear-gradient(100deg,transparent 2%,#f3ffff9c 18%,#e4fcff12 52%,transparent 74%) top / 100% 1px no-repeat,
    linear-gradient(110deg,transparent 20%,#cae6e95c 78%,transparent 96%) bottom / 100% 1px no-repeat;
}
.reactor-panel .player-cover { border-radius: 10px; box-shadow: 0 8px 24px #0003, inset 0 1px 0 #fff2; }
.equalizer-panel { background: #08151c08; border-color: #d7f4ff1c; }
.reactor-footer { background: #05101708; border-color: #d7f4ff1c; }
.reactor-panel .live-toggle {
  background: radial-gradient(circle at 32% 20%,#c4faff2b,transparent 55%), linear-gradient(145deg,#284e626b,#0919269c);
  border-color: #b3e9f088; box-shadow: inset 0 1px 2px #e4ffff80,inset 0 -5px 12px #0c192780,0 0 22px #72d6ec25;
}
.reactor-panel .live-toggle:hover { box-shadow: inset 0 2px 3px #e4ffff99,inset 0 -5px 12px #0c192780,0 0 30px #72d6ec40; }
.language-switch,.search {
  background: var(--glass-glint), rgb(25 40 53 / var(--glass-alpha));
  border-color: var(--glass-edge); box-shadow: inset 0 1px 0 #f0fcff21,0 4px 16px #00000012;
  -webkit-backdrop-filter: blur(3px) saturate(110%);
  backdrop-filter: blur(3px) saturate(110%);
}
.language-switch { border-radius: 20px; padding: 3px; }
.language-switch button { border-radius: 16px; }
.language-switch button.is-active { background: linear-gradient(160deg,#c2eef43d,#8abcd61c); box-shadow: inset 0 1px 0 #e9fcff4a,0 2px 5px #0002; }
.search { border-radius: 14px; }
.search:focus-within { border-color: #a7e7e1a3; box-shadow: 0 0 0 3px #8bddd415; }
.button { border-radius: 24px; }
.button-primary {
  background: linear-gradient(150deg,#b9f1eae8,#7dd8cfc9);
  border-color: #cefff4c2; color: #092d2c;
  box-shadow: inset 0 1px 0 #fff9,inset 0 -2px 0 #0d595324,0 6px 24px #193e453d;
}
.button-primary:hover { background: linear-gradient(150deg,#d0fff7,#93e6dd); box-shadow: inset 0 1px 0 #fffc,0 8px 30px #376a6f40; }
.hero-actions .button-ghost {
  background: var(--glass-glint),#9bc5d00b; border: 1px solid var(--glass-edge); padding-inline: 22px;
  box-shadow: inset 0 1px 0 #effcff29;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.hero-actions .button-ghost:hover { background: var(--glass-glint),#9bc5d01d; border-color: #d7f4ff66; }
.filter { border-radius: 12px; }
.filter.active,.filter[data-genre].active {
  background: linear-gradient(145deg,#bddfeb24,#71b9bf12); border-color: #bdedf340; color: #d7efef;
  box-shadow: inset 0 1px 0 #e6ffff24;
}
.sound-pick { border-radius: 18px; box-shadow: inset 0 0 0 1px #e6f6ff29,0 6px 24px #00000018; }
.sound-pick::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none;
  box-shadow: inset 0 1px 0 #f4ffff50,inset 0 -1px 0 #e2f7ff14;
}
.station-card,.station-card:hover,.station-card.selected,
.catalog-episodes .residance-list button,
.catalog-episodes .residance-list button:hover,
.catalog-episodes .residance-list button[aria-current="true"] {
  border-radius: var(--glass-radius-card);
  background: var(--glass-glint), var(--glass-fill);
  border-color: #d5f1ff21;
  box-shadow: inset 0 1px 0 #e1f8ff24,inset 0 -1px 0 #d5f1ff08,0 5px 20px #00000012;
  -webkit-backdrop-filter: blur(var(--glass-blur-card)) saturate(110%);
  backdrop-filter: blur(var(--glass-blur-card)) saturate(110%);
}
.station-card:hover,.catalog-episodes .residance-list button:hover {
  background: var(--glass-glint), var(--glass-fill-raised); border-color: #d6f4ff4d;
}
.station-card.selected,.station-card.is-playing {
  background: var(--glass-glint), rgb(35 74 80 / var(--glass-alpha)); border-color: #99e2db80;
  box-shadow: inset 0 1px 0 #d6fff85c,0 8px 24px #0002;
}
.catalog-episodes .residance-list button[aria-current="true"] { background: var(--glass-glint),rgb(85 74 40 / var(--glass-alpha)); border-color: #e9ca7b8a; }
.station-card > p { color: #aabcc5; }
.station-kind,.station-kind.live-kind { color: #a7bcc6; }
.station-art { border-radius: 8px; }
.station-play { background: linear-gradient(145deg,#d2edf72e,#91c1d410); border-color: #caedf650; box-shadow: inset 0 1px 0 #e6fcff52; }
.station-play:hover { background: linear-gradient(145deg,#d0fff4,#85d9d2); }
.eq-preset-list button { border-radius: 12px; background: #b1dae00a; border-color: #d1edf42b; box-shadow: inset 0 1px 0 #e9faff17; }
.eq-preset-list button[aria-pressed="true"] { background: linear-gradient(140deg,#a1dec22c,#8acebe0f); border-color: #b3eadd66; }
.listening-dock { border-radius: 22px; }
@media (min-width: 701px) {
  .station-art { width: calc(100% - 16px); margin: 8px 8px 4px; }
}
@media (max-width: 700px) {
  :root { --glass-radius-panel: 20px; --glass-radius-card: 12px; --glass-blur-panel: 2px; --glass-blur-card: 1.5px; }
  .hero-actions .button-ghost { padding-inline: 14px; }
  .sound-pick { border-radius: 14px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-fill: #12212c; --glass-fill-raised: #213541; }
  .language-switch,.search,.listening-dock,.hero-actions .button-ghost { background: #192c37; }
  .station-card.selected,.station-card.is-playing { background: #1d3a40; }
  .catalog-episodes .residance-list button[aria-current="true"] { background: #373326; }
}
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-glass-preview="on"]) { --glass-fill: #12212c; --glass-fill-raised: #213541; --glass-glint: linear-gradient(transparent,transparent); }
  html:not([data-glass-preview="on"]) :is(.reactor-panel,.listening-dock,.station-card,.catalog-episodes .residance-list button,.language-switch,.search,.hero-actions .button-ghost) {
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  html:not([data-glass-preview="on"]) :is(.language-switch,.search,.hero-actions .button-ghost) { background: #192c37; }
  html:not([data-glass-preview="on"]) :is(.station-card.selected,.station-card.is-playing) { background: #1d3a40; }
  html:not([data-glass-preview="on"]) .catalog-episodes .residance-list button[aria-current="true"] { background: #373326; }
}
@media (forced-colors: active) {
  .reactor-panel,.listening-dock,.station-card,.catalog-episodes .residance-list button,.language-switch,.search,.button {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    box-shadow: none !important; border: 1px solid CanvasText !important;
  }
}