:root{--sans:system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;font:16px/1.5 var(--sans);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#e8edf3;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#06070a}*{box-sizing:border-box}body{background-color:#06070a;background-image:radial-gradient(70% 55% at 50% 0,#5ef2c01a,#0000 65%),radial-gradient(60% 60% at 88% 100%,#4c74ff17,#0000 70%),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;place-items:center;min-height:100svh;margin:0;padding:24px 16px;display:grid}#root{width:100%;max-width:520px;margin:0 auto}.stage{place-items:center;width:100%;display:grid}.radio{--accent:#5ef2c0;--accent-soft:#5ef2c029;--panel:#060a0c;color:#e8edf3;text-align:left;background:radial-gradient(120% 90% at 12% 0,#5ef2c01a,#0000 60%),linear-gradient(165deg,#191d25 0%,#0e1116 48%,#0a0c10 100%);border:1px solid #ffffff14;border-radius:30px;width:min(460px,100%);padding:22px;box-shadow:0 30px 60px -24px #000000e6,inset 0 1px #ffffff14}.radio__header{justify-content:space-between;align-items:center;gap:12px;padding:0 4px 16px;display:flex}.radio__id{flex-direction:column;gap:2px;min-width:0;display:flex}.radio__station{letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:600;overflow:hidden}.radio__band{font-family:var(--mono);letter-spacing:.22em;color:#7f8896;font-size:10px}.onair{font-family:var(--mono);letter-spacing:.14em;color:#8892a0;white-space:nowrap;background:#ffffff0d;border:1px solid #ffffff14;border-radius:999px;align-items:center;gap:7px;padding:6px 11px;font-size:10px;display:inline-flex}.onair__dot{background:#5a626e;border-radius:50%;width:7px;height:7px}.onair--live{color:#ffd9d3;background:#ff523e24;border-color:#ff523e59}.onair--live .onair__dot{background:#ff5a3c;animation:1.8s ease-out infinite live-pulse;box-shadow:0 0 #ff5a3cb3}@keyframes live-pulse{0%{box-shadow:0 0 #ff5a3c99}70%{box-shadow:0 0 0 7px #ff5a3c00}to{box-shadow:0 0 #ff5a3c00}}.display{background:repeating-linear-gradient(to bottom, #5ef2c00b 0 1px, transparent 1px 3px), radial-gradient(120% 130% at 50% 0%, #0d1a17 0%, var(--panel) 70%);border:1px solid #5ef2c02e;border-radius:18px;padding:14px 16px 12px;position:relative;overflow:hidden;box-shadow:inset 0 0 34px #000000e6,inset 0 0 2px #5ef2c059}.display__top{align-items:center;gap:10px;display:flex}.display__tag{font-family:var(--mono);letter-spacing:.16em;color:#0a1512;background:var(--accent);border-radius:4px;padding:2px 6px;font-size:9px;box-shadow:0 0 14px #5ef2c073}.display__ps{font-family:var(--mono);letter-spacing:.26em;color:var(--accent);text-shadow:0 0 14px #5ef2c08c;white-space:pre;text-overflow:clip;flex:1;min-width:0;font-size:20px;font-weight:700;overflow:hidden}.display__signal{align-items:flex-end;gap:2px;height:14px;display:flex}.display__signal i{width:3px;height:calc(var(--bar) * 3px + 2px);background:#5ef2c02e;border-radius:1px;display:block}.display__signal i.is-on{background:var(--accent);animation:2.4s ease-in-out infinite signal-flicker;animation-delay:calc(var(--bar) * .18s);box-shadow:0 0 8px #5ef2c099}@keyframes signal-flicker{0%,to{opacity:1}50%{opacity:.55}}.display__artist{font-family:var(--mono);letter-spacing:.18em;color:#6f8f86;white-space:nowrap;text-overflow:ellipsis;margin:10px 0 2px;font-size:10px;overflow:hidden}.display__text{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 22px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 14px calc(100% - 22px),#0000 100%)}.display__track{width:max-content;max-width:100%;display:flex}.display__title{color:#f2fbf8;text-shadow:0 0 18px #5ef2c040;white-space:nowrap;text-overflow:ellipsis;min-width:0;max-width:100%;font-size:19px;font-weight:600;line-height:1.35;overflow:hidden}.display__text.is-scrolling .display__track{width:max-content;max-width:none;animation:radiotext-scroll var(--duration) linear infinite}.display__text.is-scrolling .display__title{padding-right:3rem;overflow:visible}.display__text.is-scrolling:hover .display__track{animation-play-state:paused}@keyframes radiotext-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.display__bottom{font-family:var(--mono);letter-spacing:.14em;color:#5f7d75;text-transform:uppercase;white-space:nowrap;border-top:1px dashed #5ef2c029;justify-content:space-between;gap:10px;margin-top:10px;padding-top:8px;font-size:9px;display:flex;overflow:hidden}.transport{align-items:center;gap:16px;padding:20px 4px 16px;display:flex}.play{color:#04150f;cursor:pointer;background:radial-gradient(circle at 32% 26%,#ffffff59,#0000 55%),linear-gradient(160deg,#6ef7c8 0%,#2fd9a2 60%,#17b886 100%);border:1px solid #5ef2c080;border-radius:50%;flex:none;place-items:center;width:64px;height:64px;transition:transform .16s,box-shadow .25s;display:grid;box-shadow:0 12px 26px -10px #2fd9a2cc,inset 0 1px #ffffff80}.play svg{width:26px;height:26px}.play:hover{transform:scale(1.04);box-shadow:0 14px 30px -8px #2fd9a2e6,inset 0 1px #ffffff80}.play:active{transform:scale(.97)}.play:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.play--active{color:var(--accent);background:radial-gradient(circle at 32% 26%,#fff3,#0000 55%),linear-gradient(160deg,#22303a 0%,#141c23 100%);border-color:#5ef2c059;box-shadow:inset 0 1px #ffffff1f,0 10px 24px -14px #000000e6}.transport__side{min-width:0}.status{color:#dbe4ee;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:500;display:flex}.status__dot{background:#59616d;border-radius:50%;flex:none;width:8px;height:8px}.status__dot--live{background:var(--accent);box-shadow:0 0 10px #5ef2c0cc}.status__dot--connecting,.status__dot--buffering{background:#f2c45e;animation:1s steps(2,start) infinite blink}.status__dot--error{background:#ff6b57}@keyframes blink{to{visibility:hidden}}.status__hint{color:#78828f;margin:4px 0 0;font-size:11.5px;line-height:1.4}.volume{align-items:center;gap:12px;padding:0 4px 18px;display:flex}.volume__mute{color:#aeb9c7;cursor:pointer;background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;place-items:center;width:32px;height:32px;transition:color .2s,background .2s;display:grid}.volume__mute:hover{color:var(--accent);background:#ffffff12}.volume__mute svg{width:17px;height:17px}.volume__slider{appearance:none;background:linear-gradient(to right, var(--accent) 0 var(--fill), #ffffff1f var(--fill) 100%);cursor:pointer;border-radius:999px;flex:1;height:4px}.volume__slider::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent);background:#eafff8;border-radius:50%;width:14px;height:14px;box-shadow:0 0 10px #5ef2c099}.volume__slider::-moz-range-thumb{border:2px solid var(--accent);background:#eafff8;border-radius:50%;width:12px;height:12px;box-shadow:0 0 10px #5ef2c099}.volume__slider:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.volume__value{text-align:right;width:26px;font-family:var(--mono);color:#78828f;font-size:11px}.radio__footer{border-top:1px solid #ffffff12;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 4px 2px;display:grid}.stat{flex-direction:column;gap:3px;min-width:0;display:flex}.stat__label{font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#67707d;font-size:9px}.stat__value{color:#cfd8e3;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.stat--wide{grid-column:1/-1}.stat--wide .stat__value{color:#8d97a5;font-size:11.5px}@media (width<=420px){.radio{border-radius:26px;padding:18px}.display__title{font-size:17px}.play{width:58px;height:58px}}@media (prefers-reduced-motion:reduce){.onair--live .onair__dot,.display__signal i.is-on,.status__dot--connecting,.status__dot--buffering,.display__text.is-scrolling .display__track{animation:none}.display__text.is-scrolling .display__title{text-overflow:ellipsis;padding-right:0;overflow:hidden}}
