:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none;background:#060709;color:#b2b9c3}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%}body{background:radial-gradient(ellipse at 50% 46%,#10141b 0%,#090b10 36%,#060709 72%);-webkit-font-smoothing:antialiased}
.radio{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:3rem 1.5rem}
.layer{position:relative;width:min(100%,44rem);text-align:center;padding-bottom:2rem;transform:translateY(-1vh)}
.detail{height:10.5rem;display:flex;flex-direction:column;justify-content:center;gap:.9rem;opacity:1;transition:opacity 450ms ease}
.detail.fading{opacity:0}.detail-label{font-size:.6rem;font-weight:450;letter-spacing:.3em;text-transform:uppercase;color:#626d7c;min-height:.8rem}
.detail-value{font-size:clamp(1.65rem,5vw,3.15rem);font-weight:250;letter-spacing:-.035em;line-height:1.2;overflow-wrap:anywhere;color:#aeb8c6;padding:0 .25rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.detail-value.compact{font-size:clamp(1.15rem,3.5vw,1.75rem);font-weight:300;letter-spacing:-.02em}
.identity{height:5.75rem;display:flex;flex-direction:column;justify-content:flex-start;gap:.3rem;opacity:.6;transition:opacity 900ms ease}
.identity.fresh{opacity:1}.identity.changing{opacity:0;transition:opacity 250ms ease}.artist,.title{margin:0;font-weight:350;line-height:1.45;overflow-wrap:anywhere}.artist{font-size:clamp(.75rem,2.5vw,.9rem);letter-spacing:.05em;color:#828b97}
.title{font-size:clamp(.9rem,3vw,1.1rem);color:#9da6b4;max-height:3.3em;overflow:hidden}
button{display:grid;place-items:center;margin:1rem auto 0;width:3rem;height:3rem;padding:.8rem;border:0;border-radius:50%;background:transparent;color:#8490a0;cursor:pointer;transition:color 300ms ease,background 300ms ease,opacity 300ms ease;touch-action:manipulation}
button:hover{color:#c4ccd7;background:#ffffff04}button:focus-visible{outline:1px solid #778395;outline-offset:6px}button:disabled{opacity:.25;cursor:default}button svg{width:100%;height:100%;fill:currentColor}button svg[hidden]{display:none}
.note{height:1rem;margin:.8rem 0 0;color:#505967;font-size:.6rem;font-weight:400;letter-spacing:.13em;line-height:1.6}
.history{position:absolute;top:100%;left:0;right:0;padding:1.5rem 0 0;list-style:none;margin:0;color:#4b535e;font-size:.65rem;line-height:1.9;font-weight:350}.history li{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.detail{height:10rem}.identity{height:6.5rem}.layer{max-width:26rem}.detail-value{line-height:1.3}.history{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.detail,.identity,.identity.changing,button{transition:none}.layer{transform:none}}

/* A barely perceptible drift over the existing twelve-second text cycle. */
@keyframes identity-drift{
  0%{opacity:.9;transform:scale(.994)}
  50%{opacity:1;transform:scale(1)}
  100%{opacity:.9;transform:scale(1.006)}
}
.identity.settling .artist,.identity.settling .title{animation:identity-drift 12s linear both;transform-origin:50% 50%}
@media(prefers-reduced-motion:reduce){.identity.settling .artist,.identity.settling .title{animation:none;transform:none;opacity:1}}

.sound-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;width:min(100%,19rem);margin:1.35rem auto 0}
.sound-choice{display:block;margin:0;width:100%;height:1.8rem;padding:.3rem .4rem;border:1px solid #252c37;border-radius:2px;background:#ffffff01;color:#707c8c;font-size:.52rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:color 400ms ease,background 400ms ease,border-color 400ms ease,opacity 400ms ease}
.sound-choice:hover{background:#ffffff04;color:#aeb8c6}.sound-choice[aria-pressed=true]{background:#171e28;border-color:#465161;color:#a6b1c0;box-shadow:inset 0 1px 3px #0005}
.sound-choice:disabled{opacity:.4}.sound-choice[aria-pressed=true]:disabled{opacity:.8}
.sound-policy{position:fixed;left:1.5rem;right:1.5rem;bottom:max(1.5rem,env(safe-area-inset-bottom));max-width:43rem;margin:0 auto;text-align:center;color:#525d6c;font-size:.5rem;font-weight:400;letter-spacing:.15em;line-height:1.9;text-transform:uppercase}
.sound-timer{display:block;min-height:1.9em;margin-top:.4rem;color:#657183}
@media(max-height:500px){.radio{padding-bottom:7rem}.sound-policy{position:absolute;bottom:1rem}}
@media(prefers-reduced-motion:reduce){.sound-choice{transition:none}}