:root { color-scheme: dark; font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; background: #08090b; color: #f8f6f7; }
* { box-sizing: border-box; }
body { display: grid; min-height: 100vh; min-height: 100svh; margin: 0; background: radial-gradient(circle at 48% 24%, #251116 0, #110b0e 31%, #08090b 63%); }
button, input, textarea { font: inherit; }
.station-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(.7rem, 1.8vh, 1.1rem); width: min(100% - 2rem, 27.5rem); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: clamp(1.1rem, 7vh, 7rem) 0 clamp(1rem, 3vh, 1.8rem); }
.masthead { text-align: center; }
h1 { margin: 0; color: #f8f6f7; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 850; letter-spacing: .25em; line-height: 1; } h1 span { color: #ff5f80; }
.live-badge { display: inline-flex; align-items: center; gap: .48rem; margin: .8rem 0 0; color: #8d8790; font-size: .69rem; letter-spacing: .19em; text-transform: uppercase; }.live-badge i { width: .43rem; height: .43rem; border-radius: 50%; background: #ff3156; box-shadow: 0 0 .8rem #ff3156; animation: indicator-pulse 1.5s ease-in-out infinite; }
.console { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; padding: clamp(1.25rem, 3vh, 1.75rem); border: 1px solid #28292e; border-radius: 1rem; background: linear-gradient(145deg, #131419, #101115); box-shadow: 0 1.5rem 3rem #0008; text-align: center; }
.signal-orb { position: relative; display: grid; place-items: center; width: min(100%, clamp(9rem, 24vh, 11.5rem)); aspect-ratio: 1; margin-bottom: clamp(.7rem, 1.5vh, 1rem); }.signal-orb i { position: absolute; width: 30%; aspect-ratio: 1; border: 2px solid #ff3156; border-radius: 50%; box-shadow: 0 0 1.2rem #ff315655; animation: ring-wave 2.25s cubic-bezier(.2, .7, .25, 1) infinite; }.signal-orb i:nth-child(1) { animation-delay: -1.5s; }.signal-orb i:nth-child(2) { animation-delay: -.75s; }.signal-orb i:nth-child(3) { animation-delay: 0s; }.signal-orb b { position: relative; z-index: 1; width: 1.3rem; aspect-ratio: 1; border-radius: 50%; background: #ff3156; box-shadow: 0 0 1.5rem .4rem #ff315677; animation: core-pulse 1.5s ease-in-out infinite; }
.on-air-label, .stream-kind { margin: 0; color: #85808a; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }.on-air-label { color: #afa8b0; }
h2 { max-width: 100%; margin: .5rem 0 .35rem; overflow-wrap: anywhere; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: clamp(1rem, 3.5vw, 1.2rem); letter-spacing: -.03em; }.artist { margin: 0; color: #8f8992; font-size: .68rem; line-height: 1.5; }
.live-progress { width: 100%; height: 2px; margin: clamp(1rem, 2.8vh, 1.5rem) 0 .55rem; overflow: hidden; background: #303137; }.live-progress span { display: block; width: 16%; height: 100%; background: #ff3156; box-shadow: 0 0 .9rem #ff3156; animation: live-progress 3s ease-in-out infinite; }
.transport { display: flex; align-items: center; justify-content: center; gap: clamp(1.7rem, 8vw, 2.4rem); margin-top: clamp(1rem, 2.8vh, 1.6rem); color: #77727c; font-size: .95rem; }.listen-button { display: grid; place-items: center; width: 3.15rem; aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; background: #ff3156; box-shadow: 0 0 1.6rem #ff315655; color: white; cursor: pointer; font-size: 1.12rem; font-weight: 900; }.listen-button:disabled { cursor: not-allowed; background: #4b3037; box-shadow: none; color: #b19199; }
.player-status { min-height: 1.2rem; margin: clamp(.75rem, 1.7vh, 1.1rem) 0 0; color: #77727c; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .73rem; }.listener-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.action-button { min-height: 2.75rem; border: 1px solid #32333a; border-radius: .45rem; background: #141519; color: #e9e5e8; cursor: pointer; font-size: .72rem; font-weight: 800; letter-spacing: .09em; }.action-button:hover { border-color: #ff3156; color: white; }.action-button--muted { color: #b7b1b8; }
.station-note { display: flex; justify-content: space-between; gap: 1rem; margin: 0; color: #7d7780; font-size: .59rem; letter-spacing: .1em; }.station-note span:first-child { color: #2ee888; border: 1px solid #145735; border-radius: .25rem; padding: .28rem .45rem; }.station-note span:last-child { border: 1px solid #34353b; border-radius: .25rem; padding: .28rem .45rem; }
dialog { width: min(calc(100% - 2rem), 30rem); border: 1px solid #35363b; border-radius: 1rem; padding: 0; background: #151519; color: #f5f5f5; box-shadow: 0 1.5rem 5rem #000; } dialog::backdrop { background: #000c; } dialog > * { position: relative; padding: 1.5rem; } dialog h2 { margin-bottom: 1.2rem; } label { display: block; margin: 1rem 0; color: #ccc; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .85rem; } input, textarea { width: 100%; margin-top: .4rem; border: 1px solid #3c3d43; border-radius: .45rem; padding: .75rem; background: #090a0c; color: white; resize: vertical; }.close-button { position: absolute; top: .5rem; right: .65rem; border: 0; background: transparent; color: #bbb; font-size: 1.8rem; cursor: pointer; }
@keyframes ring-wave { 0% { opacity: .95; transform: scale(.72); } 75% { opacity: 0; transform: scale(3.1); } 100% { opacity: 0; transform: scale(3.1); } }
@keyframes core-pulse { 0%, 100% { transform: scale(.85); box-shadow: 0 0 .6rem .15rem #ff315688; } 50% { transform: scale(1.18); box-shadow: 0 0 2.1rem .55rem #ff3156aa; } }
@keyframes indicator-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes live-progress { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(520%); } }
@media (max-height: 680px) { .station-shell { padding-top: .9rem; padding-bottom: .8rem; }.console { padding: .85rem; }.signal-orb { width: 7.5rem; }.transport { margin-top: .8rem; } }
@media (max-width: 380px) { .station-shell { width: min(100% - 1.25rem, 27.5rem); }.station-note { font-size: .53rem; }.listener-actions { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .live-badge i, .signal-orb i, .signal-orb b, .live-progress span { animation: none; } }