:root{--color-zinc-100: oklch(96.7% .001 286.375);--color-zinc-700: oklch(37% .013 285.805);--color-yellow-main: oklch(.7331 .157494 71.417);--color-yellow-light: oklch(.78 .157494 71.417);--color-cream: oklch(.9814 .0342 99.83)}@font-face{font-family:Lobster;src:url(/assets/Lobster-Regular-qA8i3Obg.woff2)}*,*:before,*:after{box-sizing:border-box}*:focus-visible{outline:4px solid var(--color-zinc-700)}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--color-zinc-100);color:var(--color-zinc-700);margin:0}#app{display:flex;flex-direction:column;align-items:center;width:100%;min-height:100vh}main{flex:1;display:flex;align-items:center;justify-content:center;width:100%}h1,h2,h3{margin:0}a{color:var(--color-zinc-700);font-weight:500}.small-text{font-size:.75rem}.radio-body{border:1.5rem solid var(--color-yellow-main);border-radius:2.5rem;outline:.25rem solid var(--color-zinc-700);min-width:min(70%,60rem);height:clamp(25rem,70vh,40rem);max-height:70vh;min-height:25rem}.basket-pattern{background:linear-gradient(45deg,oklch(44.6% .03 256.802) 12%,transparent 0,transparent 88%,oklch(44.6% .03 256.802) 0),linear-gradient(135deg,transparent 37%,oklch(87.2% .01 258.338) 0,oklch(87.2% .01 258.338) 63%,transparent 0),linear-gradient(45deg,transparent 37%,oklch(44.6% .03 256.802) 0,oklch(44.6% .03 256.802) 63%,transparent 0),#eee;background-size:25px 25px}.radio-inside{display:flex;flex-direction:column;height:100%}.logo{flex:0 0 auto;align-self:center;text-align:center;width:20%;height:auto;background-color:var(--color-yellow-main);border-bottom:.5rem solid var(--color-yellow-main);border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem}.logo-text-wrapper{display:flex;justify-content:center;align-items:center}.logo-text{font-size:clamp(1rem,2vw + .5rem,2.5rem);font-family:Lobster,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:700;padding:1rem}.panel{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:0 0 auto;gap:clamp(.5rem,2vh,1.5rem);max-height:40%;margin-top:auto;padding:clamp(.75rem,2vh,1.5rem);border-top:1rem solid var(--color-yellow-main);border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;background-color:var(--color-yellow-light)}.panel-buttons{display:flex;gap:1rem}.panel button{display:inline-flex;align-items:center;justify-content:center;font-size:clamp(.8rem,2.5vw,1.2rem);padding:.75em;border:solid .15rem var(--color-zinc-700);background-color:var(--color-cream);border-radius:.75em}.panel button:hover{cursor:pointer}.panel button:focus-visible{outline:4px solid var(--color-zinc-700)}.panel button svg{width:1.4em;height:1.4em;color:var(--color-zinc-700)}.play-button{position:relative}.play-button:after{content:"";position:absolute;width:1.4rem;height:1.4rem;border:3px solid var(--color-zinc-700);border-top-color:transparent;border-radius:50%;animation:spin 1.4s linear infinite;opacity:0}.play-button.loading .icon{opacity:0}.play-button.loading:after{opacity:1}@keyframes spin{to{transform:rotate(360deg)}}.track-info{background-color:var(--color-cream);border:solid .15rem var(--color-zinc-700);border-radius:.25rem;width:clamp(18rem,70%,40rem);max-width:90%;min-width:15rem;height:clamp(3.5rem,8vh,6rem);overflow:hidden;position:relative;gap:1rem;margin:.25rem 0;padding:clamp(.3rem,1vh,.75rem)}.track-placeholder,.track-nowplaying{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:.5rem;box-sizing:border-box}.track-placeholder p{margin:0;font-size:clamp(.75rem,1.5vw,.9rem)}.track-nowplaying{display:none;gap:1rem;position:relative;width:100%;text-transform:uppercase}.nowplaying-scroll{display:flex;align-items:center;position:absolute;top:50%;left:100%;transform:translateY(-50%);flex-shrink:0;gap:clamp(.75rem,1.5vw,1rem);white-space:nowrap;animation:scroll-left 15s linear infinite}@keyframes scroll-left{0%{transform:translateY(-50%)}to{transform:translate(-300%,-50%)}}.track-nowplaying img{flex:0 0 auto;width:clamp(1.8rem,4vw,2.5rem);height:clamp(1.8rem,4vw,2.5rem);object-fit:cover;border-radius:.15rem}.nowplaying-details{display:flex;align-items:center;gap:.25rem;font-size:clamp(.8rem,1.8vw,1.1rem);font-weight:600;text-transform:uppercase}.tooltip{position:fixed;top:1rem;right:1rem;display:inline-flex;align-items:center}.tooltip-trigger{all:unset;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;appearance:button}.tooltip-trigger:focus-visible{outline:2px solid var(--color-zinc-700);outline-offset:3px;border-radius:.25rem}.tooltip-text{position:absolute;top:100%;right:0;width:min(90vw,22rem);padding:1rem;border-radius:1rem;color:var(--color-zinc-700);background-color:var(--color-cream);font-size:clamp(.8rem,1.5vw,1rem);line-height:1.45;text-align:justify;visibility:hidden;opacity:0;transition:opacity .15s ease;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}.tooltip-text.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.tooltip-trigger svg{width:2rem;height:2rem}footer{display:flex;justify-content:space-between;width:100%;margin-top:auto;padding:2rem}footer a{display:inline-flex;align-items:center;gap:.5rem}footer svg{width:2rem;height:2rem;fill:currentColor}@media(max-width:768px)and (min-height:500px){.radio-body{width:100%;max-width:26rem;height:min(80vh,36rem);margin:1rem;border-width:1rem;border-radius:2rem}.logo{width:40%}.panel{padding:1rem;gap:1rem}footer{padding:0 1rem;font-size:.75rem}footer svg{width:1.5rem;height:1.5rem}}@media(max-width:768px)and (max-height:500px){.radio-body{min-height:0;max-height:none;height:80%;margin:.5rem;border-width:.75rem;border-radius:1.5rem}}