@property --sky-top{syntax:"<color>";inherits:true;initial-value:#1d3b2a}@property --sky-bottom{syntax:"<color>";inherits:true;initial-value:#4f7a3a}@property --sun{syntax:"<color>";inherits:true;initial-value:#e8d77a}@property --hill{syntax:"<color>";inherits:true;initial-value:#2f5a33}@property --accent{syntax:"<color>";inherits:true;initial-value:#e8d77a}@property --accent-ink{syntax:"<color>";inherits:true;initial-value:#15171b}:root{--ink:#f3f5f2;--ink-soft:#c9d1cb;--panel:#0a0c0e94;--panel-edge:#ffffff24;--chip:#ffffff1a;--chip-hover:#ffffff2e;--track:#ffffff38;--radius:18px;color-scheme:dark;color:var(--ink);background:var(--sky-top);font-family:Inter,ui-rounded,system-ui,-apple-system,Segoe UI,sans-serif;transition:--sky-top 1.4s,--sky-bottom 1.4s,--sun 1.4s,--hill 1.4s,--accent .8s,--accent-ink .8s}:root[data-tone=light]{--ink:#221f2b;--ink-soft:#4a4557;--panel:#ffffffa8;--panel-edge:#221f2b1f;--chip:#221f2b12;--chip-hover:#221f2b24;--track:#221f2b33;color-scheme:light}*,:before,:after{box-sizing:border-box}body{min-height:100dvh;margin:0;line-height:1.45}.sky{z-index:-1;background:radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--sun) 55%, transparent), transparent 32%), radial-gradient(ellipse 120% 60% at 50% 115%, color-mix(in srgb, var(--hill) 85%, transparent), transparent 70%), linear-gradient(var(--sky-top), var(--sky-bottom));position:fixed;inset:0}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}button{font:inherit;color:inherit}.masthead{justify-content:space-between;align-items:center;gap:1rem;max-width:1320px;margin:0 auto;padding:1.25rem 1.5rem .5rem;display:flex}.wordmark{letter-spacing:-.03em;text-shadow:0 2px 18px #00000040;margin:0;font-size:clamp(1.6rem,2.2vw + 1rem,2.4rem);font-weight:800}.lamp{background:var(--panel);border:1px solid var(--panel-edge);letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(14px);border-radius:999px;align-items:center;gap:.5rem;margin:0;padding:.35rem .8rem;font-size:.8rem;font-weight:700;display:inline-flex}.lamp-dot{background:var(--ink-soft);opacity:.5;border-radius:50%;width:.6rem;height:.6rem}.lamp[data-on=true] .lamp-dot{opacity:1;background:#ff4d5e;animation:1.6s ease-out infinite lamp;box-shadow:0 0 #ff4d5e99}@keyframes lamp{to{box-shadow:0 0 0 .55rem #ff4d5e00}}.layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:1.5rem;max-width:1320px;margin:0 auto;padding:1rem 1.5rem 2.5rem;display:grid}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);backdrop-filter:blur(18px)saturate(1.2);box-shadow:0 18px 50px #0000002e}.browse{gap:1.5rem;display:grid}.browse>.panel{padding:1.1rem 1.25rem 1.25rem}.section-heading{letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .9rem;font-size:.85rem;font-weight:800}.section-heading span{text-transform:none;letter-spacing:0;font-weight:600}.deck{gap:.9rem;padding:1rem;display:grid;position:sticky;top:1rem}.stage{border-radius:calc(var(--radius) - 6px);justify-self:center;width:min(100%,max(16rem,100dvh - 25rem));position:relative;overflow:hidden;box-shadow:0 10px 40px #0000004d}.scene{aspect-ratio:1;background:linear-gradient(var(--sky-top), var(--sky-bottom));width:100%;display:block}:root[data-playing=true] .stage{animation:6s ease-in-out infinite breathe}@keyframes breathe{50%{box-shadow:0 10px 60px color-mix(in srgb, var(--sun) 35%, transparent)}}.stage-hint{color:#f3f5f2;white-space:nowrap;background:#0a0c0e9e;border-radius:999px;margin:0;padding:.45rem .9rem;font-size:.85rem;font-weight:600;position:absolute;bottom:1rem;left:50%;translate:-50%}.now{text-align:center;min-width:0}.now p{margin:0}.now-station{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:.8rem;font-weight:800}.now-title{letter-spacing:-.02em;overflow-wrap:anywhere;font-size:clamp(1.35rem,1.2vw + 1rem,1.85rem);font-weight:800}.now-meta{color:var(--ink-soft);font-size:.85rem}.progress{grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;display:grid}.time{font-variant-numeric:tabular-nums;color:var(--ink-soft);min-width:2.75rem;font-size:.85rem}.time:last-child{text-align:right}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;--fill:var(--progress,0%);background:0 0;width:100%;height:1.5rem;margin:0}input[type=range]:disabled{cursor:default;opacity:.5}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--track) var(--fill));border-radius:999px;height:6px}input[type=range]::-moz-range-track{background:var(--track);border-radius:999px;height:6px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border:3px solid var(--accent);border-radius:50%;width:16px;height:16px;margin-top:-5px}input[type=range]::-moz-range-thumb{background:var(--ink);border:3px solid var(--accent);border-radius:50%;width:12px;height:12px}.controls{justify-content:center;align-items:center;gap:clamp(.35rem,1.5vw,.9rem);display:flex}.icon-button{border:1px solid var(--panel-edge);background:var(--chip);cursor:pointer;border-radius:50%;place-items:center;width:2.9rem;height:2.9rem;padding:0;transition:background-color .15s,transform .15s;display:inline-grid}.icon-button:hover:not(:disabled){background:var(--chip-hover)}.icon-button:active:not(:disabled){transform:scale(.94)}.icon-button:disabled{cursor:default;opacity:.4}.icon-button svg[data-off]{display:none}.icon-button svg{fill:currentColor;width:1.35rem;height:1.35rem}.icon-button svg .stroke{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round}.icon-button.play{background:var(--accent);width:4.1rem;height:4.1rem;color:var(--accent-ink);box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent);border:0}.icon-button.play:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 85%, var(--ink))}.icon-button.play svg{width:1.9rem;height:1.9rem}.icon-button.small{width:2.5rem;height:2.5rem}.volume{grid-template-columns:auto minmax(0,12rem);justify-content:center;align-items:center;gap:.6rem;display:grid}.volume-range{--fill:calc(var(--level,.8) * 100%)}.message{text-align:center;min-height:1.2em;margin:0;font-size:.9rem;font-weight:600}.message:empty{display:none}.station-list{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.station{background:var(--chip);text-align:left;cursor:pointer;border:2px solid #0000;border-radius:14px;grid-template-rows:auto auto 1fr auto;gap:.2rem;width:100%;height:100%;padding:.55rem .55rem .7rem;transition:background-color .15s,transform .2s,border-color .2s;display:grid}.station:hover:not([aria-disabled=true]){background:var(--chip-hover);transform:translateY(-2px)}.station[aria-pressed=true]{border-color:var(--accent);background:var(--chip-hover)}.station[aria-disabled=true]{cursor:not-allowed}.station[aria-disabled=true] .station-cover{filter:grayscale()brightness(.6)}.station[aria-disabled=true] .station-style{opacity:.8}.station-cover{aspect-ratio:16/9;object-fit:cover;border-radius:9px;width:100%;margin-bottom:.35rem;display:block}.station-name{font-size:1rem;font-weight:800}.station-style{color:var(--ink-soft);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.78rem;display:-webkit-box;overflow:hidden}.station-state{background:var(--chip);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;justify-self:start;margin-top:.3rem;padding:.1rem .5rem;font-size:.72rem;font-weight:700}.station[aria-pressed=true] .station-state{background:var(--accent);color:var(--accent-ink)}.station[data-off-air=true] .station-state{background:0 0;border:1px dashed}.track-list{gap:.25rem;max-height:22rem;margin:0;padding:0 .25rem 0 0;list-style:none;display:grid;overflow-y:auto}.track-list:empty:before{content:"No station picked yet.";color:var(--ink-soft);font-size:.9rem}.track{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;padding:.35rem .6rem .35rem .35rem;display:grid}.track:hover{background:var(--chip)}.track[aria-current=true]{background:var(--chip-hover);font-weight:800}.track[aria-current=true] .track-title:after{content:" · now playing";color:var(--ink-soft);font-size:.8rem;font-weight:600}.track-cover{border-radius:6px;width:2.6rem;height:2.6rem}.track-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-length{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.85rem}.shortcuts{color:var(--ink);text-shadow:0 1px 8px #0003;margin:0;padding:0 .25rem;font-size:.85rem}:root[data-tone=light] .shortcuts,:root[data-tone=light] .wordmark{text-shadow:none}@media (width<=900px){.layout{grid-template-columns:minmax(0,1fr);gap:1rem;padding:.75rem 1rem 2rem}.deck{position:static}.stage{width:100%}.masthead{padding:1rem 1rem .25rem}.browse{gap:1rem}.track-list{max-height:none}}@media (width<=480px){.station-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.station-style{display:none}.deck{padding:.75rem}.icon-button{width:2.75rem;height:2.75rem}.icon-button.play{width:3.75rem;height:3.75rem}}@media (prefers-reduced-motion:reduce){:root{transition:none}*,:before,:after{transition:none!important;animation:none!important}}
