:root { color-scheme: dark; --bg: #101b19; --ink: #eee8d8; --muted: #a8b6a7; --line: #3e5147; --gold: #e5c58c; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 system-ui, sans-serif; }
main { max-width: 1060px; margin: auto; padding: 48px 28px; }
h1, h2 { font-family: Georgia, serif; font-weight: normal; line-height: 1.1; }
h1 { font-size: clamp(42px, 7vw, 72px); margin: 12px 0 20px; }
h2 { font-size: 29px; }
p { margin: 0 0 12px; }
a { color: var(--gold); text-underline-offset: 4px; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: 11px; color: var(--gold); }
.intro { color: var(--muted); max-width: 45ch; }
.layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 42px; }
.listening { min-width: 0; }
.dial { width: 100%; max-width: 400px; aspect-ratio: 1; border-radius: 50%; padding: 15px; background: #29332b;
  box-shadow: inset 0 0 0 1px #64705e, 0 25px 55px #0005; margin: 0 auto 24px; }
.window { border-radius: 50%; height: 100%; overflow: hidden; position: relative; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px;
  background: radial-gradient(ellipse at center, #101b1977, #101b19aa), url('assets/garden/dawn/background.png') center/cover; }
.window h2 { position: relative; z-index: 1; font-size: clamp(24px, 4vw, 36px); margin: 12px 0; text-shadow: 0 2px 14px #000; }
.window p { position: relative; z-index: 1; font-size: 12px; }
.ripple { position: absolute; bottom: -12%; width: 75%; height: 75%; border: 1px solid #eee8d855; border-radius: 50%; opacity: .4; }
.playing .ripple { animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.14); opacity: .8; } }
.art-note, .small, footer { font-size: 12px; color: var(--muted); }
audio { width: 100%; margin: 12px 0; }
#status { color: var(--gold); }
#player-error { color: #ffb7a4; }
.stations { display: grid; gap: 10px; margin-top: 24px; }
.station { text-align: left; width: 100%; padding: 17px 20px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font: inherit; }
.station[aria-pressed="true"] { border-color: var(--gold); background: #e5c58c0a; }
.station strong, .station span { display: block; }
.station span { font-size: 12px; color: var(--muted); margin-top: 3px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.credits { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
#recordist { color: var(--ink); }
footer { border-top: 1px solid var(--line); margin-top: 45px; padding-top: 24px; }
@media (max-width: 720px) { .layout { grid-template-columns: 1fr; gap: 26px; } main { padding: 30px 20px; } }
@media (prefers-reduced-motion: reduce) { .playing .ripple { animation: none; } }