button{all:unset}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}:root{--font-primary: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-secondary: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--border-radius-input: 25px;--border-radius-general: 8px}*{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}body{font-family:var(--font-primary),serif;color:var(--color-text-hard);line-height:1.5;margin:0;padding:0;transition:background-color 3s ease,color .3s ease;width:100vw;height:100vh}#root{width:100%;height:100%}input,button,select,textarea{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .1s ease}body{background:linear-gradient(45deg,var(--color-bg-right),var(--color-bg-left));color:var(--color-text-hard);font-family:var(--font-primary)}h1,h2,h3,h4,h5,h6{font-family:var(--font-secondary),serif;color:var(--color-text-hard);margin-top:1.5rem;margin-bottom:1rem}input,select{cursor:pointer;font-family:var(--font-primary),serif;padding:.5rem .75rem;font-size:1rem;line-height:1.5;color:var(--color-text-hard);background-color:var(--color-bg-left);border:1px solid var(--color-text-soft);border-radius:var(--border-radius-input);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}input:focus,select:focus{border:1px solid var(--color-focus)!important;outline:1px solid var(--color-focus)}button:focus{color:var(--color-focus)!important}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#888;border-radius:5px}*{scrollbar-width:thin;scrollbar-color:#888 transparent}.theme-dark{--color-focus: hsla(280, 80%, 60%, 1);--color-accent: hsl(193, 50%, 65%);--color-text-hard: hsl(0, 0%, 90%);--color-text-soft: hsl(0, 0%, 65%);--color-loading: hsl(41, 52%, 54%);--color-error: hsl(350, 75%, 45%);--color-playing: hsl(118, 70%, 50%);--color-bg-left: hsl(200, 45%, 14%);--color-bg-right: hsl(100, 25%, 7%)}.theme-light{--color-focus: hsl(220, 90%, 55%);--color-accent: hsl(330, 70%, 50%);--color-text-hard: hsl(0, 0%, 15%);--color-text-soft: hsl(0, 0%, 40%);--color-loading: hsl(50, 90%, 60%);--color-error: hsl(0, 75%, 50%);--color-playing: hsl(140, 60%, 45%);--color-bg-left: hsl(0, 0%, 98%);--color-bg-right: hsl(0, 0%, 96%);--color-bg-input: hsla(0, 0%, 85%, .3)}.theme-solarized-light{--color-focus: hsl(268, 50%, 40%);--color-accent: hsl(193, 43%, 55%);--color-text-hard: hsl(45, 10%, 20%);--color-text-soft: hsl(45, 10%, 40%);--color-loading: hsl(41, 60%, 50%);--color-error: hsl(350, 70%, 45%);--color-playing: hsl(118, 50%, 45%);--color-bg-left: hsl(44, 100%, 95%);--color-bg-right: hsl(42, 87%, 85%);--color-bg-input: hsla(200, 40%, 40%, .15)}.theme-nordic-light{--color-focus: hsl(268, 50%, 45%);--color-accent: hsl(193, 50%, 50%);--color-text-hard: hsl(220, 20%, 15%);--color-text-soft: hsl(220, 20%, 35%);--color-loading: hsl(204, 40%, 55%);--color-error: hsl(350, 65%, 50%);--color-playing: hsl(145, 50%, 45%);--color-bg-left: hsl(210, 45%, 92%);--color-bg-right: hsl(210, 40%, 85%);--color-bg-input: hsla(220, 40%, 40%, .15)}.theme-neon-light{--color-focus: hsl(320, 100%, 60%);--color-accent: hsl(180, 100%, 55%);--color-text-hard: hsl(0, 0%, 95%);--color-text-soft: hsl(0, 0%, 70%);--color-loading: hsl(50, 100%, 50%);--color-error: hsl(0, 85%, 50%);--color-playing: hsl(200, 100%, 55%);--color-bg-left: hsl(250, 50%, 10%);--color-bg-right: hsl(220, 50%, 15%);--color-bg-input: hsla(280, 90%, 50%, .2)}.theme-groovbox{--color-focus: hsl(40, 100%, 65%);--color-accent: hsl(150, 50%, 50%);--color-text-hard: hsl(40, 40%, 85%);--color-text-soft: hsl(40, 30%, 65%);--color-loading: hsl(200, 50%, 50%);--color-error: hsl(0, 65%, 45%);--color-playing: hsl(35, 80%, 55%);--color-bg-left: hsl(30, 25%, 15%);--color-bg-right: hsl(20, 20%, 12%);--color-bg-input: hsla(40, 50%, 30%, .2)}.theme-monokai{--color-focus: hsl(80, 100%, 60%);--color-accent: hsl(330, 100%, 70%);--color-text-hard: hsl(60, 30%, 85%);--color-text-soft: hsl(60, 20%, 65%);--color-loading: hsl(200, 80%, 55%);--color-error: hsl(5, 80%, 50%);--color-playing: hsl(45, 100%, 55%);--color-bg-left: hsl(260, 25%, 12%);--color-bg-right: hsl(270, 20%, 10%);--color-bg-input: hsla(280, 50%, 30%, .2)}.theme-atom{--color-focus: hsl(220, 100%, 66%);--color-accent: hsl(355, 80%, 65%);--color-text-hard: hsl(210, 15%, 85%);--color-text-soft: hsl(210, 10%, 65%);--color-loading: hsl(45, 100%, 55%);--color-error: hsl(0, 75%, 50%);--color-playing: hsl(180, 90%, 50%);--color-bg-left: hsl(230, 15%, 12%);--color-bg-right: hsl(230, 20%, 10%);--color-bg-input: hsla(220, 60%, 40%, .2)}.theme-cahier{--color-focus: hsl(210, 80%, 40%);--color-accent: hsl(30, 70%, 50%);--color-text-hard: hsl(0, 0%, 20%);--color-text-soft: hsl(0, 0%, 40%);--color-loading: hsl(50, 80%, 60%);--color-error: hsl(0, 70%, 50%);--color-playing: hsl(120, 50%, 40%);--color-bg-left: hsl(40, 40%, 92%);--color-bg-right: hsl(50, 45%, 96%);--color-bg-input: hsla(50, 30%, 85%, .3)}.radio-app{width:100vw;height:100vh;box-sizing:border-box;display:grid;grid-template-columns:min-content 1fr;grid-template-rows:1fr auto}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:#4361ee #f0f0f0}.custom-scrollbar::-webkit-scrollbar{width:8px;height:8px}.custom-scrollbar::-webkit-scrollbar-track{background:#f0f0f0;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#4361ee;border-radius:10px;border:2px solid #f0f0f0}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#3a56d4}*{scrollbar-width:thin;scrollbar-color:#6c757d #212529}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:#212529;border-radius:10px}*::-webkit-scrollbar-thumb{background-color:#6c757d;border-radius:10px;border:2px solid #212529}*::-webkit-scrollbar-thumb:hover{background-color:#5a6268}.play-button{justify-self:center;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;flex-shrink:0;border-width:2px;border-style:solid;color:var(--color-text-hard);border-color:var(--color-text-hard);background-color:var(--color-bg-left);transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}.play-button:hover,.play-button:focus{transform:scale(1.1);color:var(--color-focus);border-color:var(--color-focus)}.play-button:active{transform:scale(.95)}.play-button svg{width:22px;height:22px;fill:currentColor;transition:unset}.action-retry{color:var(--color-error);border-color:var(--color-error)}.action-loading{color:var(--color-loading);border-color:var(--color-loading)}.action-playing{color:var(--color-accent);border-color:var(--color-accent)}.svg-spinner{animation:spin 1.2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.radio-player{padding:.5em;background:#0003;display:grid;grid-template-columns:1fr auto 1fr;gap:3rem;box-sizing:border-box;align-content:center;justify-content:center;align-items:center;grid-column:span 2}.station-info{display:flex;align-items:center;gap:.75rem}.station-favicon{height:3em;aspect-ratio:1;display:flex;align-items:center;justify-content:center;object-fit:contain;border-radius:var(--border-radius-general)}.station-name{margin:0;font-weight:600;font-size:1.1rem;white-space:nowrap;max-width:20em}.volume-control{display:flex;align-items:center;justify-content:end;gap:.5rem}.volume-icon{aspect-ratio:1;height:2em;font-size:.9rem;color:var(--color-text-hard);stroke:var(--color-text-hard)}.volume-control:hover>.volume-icon{transform:scale(1.1)}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:0;background-color:var(--color-bg-left);border-radius:var(--border-radius-input);outline:none;opacity:0;transition:width .2s ease,opacity .5s ease}.volume-control:hover>.volume-slider,.volume-slider:focus{width:10em;opacity:1;outline:1px solid var(--color-accent)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background-color:var(--color-text-hard);cursor:pointer;transition:transform .2s ease,background-color .2s ease}.volume-slider::-moz-range-thumb{width:14px;height:4px;border-radius:50%;background-color:var(--color-text-hard);cursor:pointer;border:none;transition:transform .2s ease,background-color .2s ease}.volume-slider:hover::-webkit-slider-thumb{transform:scale(1.15);background-color:var(--color-text-hard)}.volume-slider:hover::-moz-range-thumb{transform:scale(1.15);background-color:var(--color-text-hard)}.volume-value{min-width:40px;text-align:right;flex-shrink:0;font-size:.9rem}.station-selector{display:flex;flex-direction:column;gap:.5rem;flex-wrap:wrap;padding:1em;background-color:#8080801a}.station-selector>.title{display:flex;align-items:center;gap:.5rem}.station-selector>.title>h2{margin:0}.station-selector>.title>svg{max-height:3rem}.filter-group{display:flex;min-width:20em;gap:1em;align-items:center}.filter-group label{width:4em}.filter-group-delete{display:flex;aspect-ratio:1;width:1.5rem;transition:transform .5s ease,opacity .5s ease;opacity:0;color:var(--color-text-hard);visibility:hidden}.active-filter .filter-group-delete{visibility:visible;opacity:.5;pointer-events:visible}.active-filter .filter-group-delete:hover,.active-filter .filter-group-delete:focus{opacity:1;transform:scale(1.3)}.visible-group{width:12rem;display:flex;justify-content:center;gap:.2rem}.hidden-input-group>div{display:flex;gap:.5rem}.hidden-input-group select{opacity:0;transition:opacity .5s ease,flex .5s ease,width .5s ease;width:0}.hidden-input-group:hover select,.hidden-input-group select:focus,.hidden-input-group.active-filter select{opacity:1;width:12rem}.hidden-input-group.active-filter select:not(:focus){border-color:var(--color-focus)}.divider{width:100%;margin:.5em 0;border-bottom:1px solid var(--color-text-soft)}.station-selector .tab{cursor:pointer;border-bottom:1px solid hsl(0,0%,0%,0);justify-self:start;align-self:start;transition:border-color .5s ease,transform .5s ease,color .5s ease;line-height:2em}.station-selector .tab:hover,.station-selector .tab:focus{border-bottom:1px solid var(--color-focus);transform:translateY(-.2rem);color:var(--color-focus)}.station-selector .active-tab{border-bottom:1px solid var(--color-accent);color:var(--color-accent)}.pagination{display:flex;align-items:center;align-content:center}.pagination input{width:4em;text-align:end}.pagination button{display:flex;align-items:center;transition:transform .3s ease,color .3s ease}.pagination button:focus,.pagination button:hover{transform:scale(1.25)}.pagination button:active{transform:scale(.95)}.explorer-exclusive{opacity:0;transition:opacity .5s ease}.explorer-active .explorer-exclusive{opacity:1}.icon-button{cursor:pointer;transition:transform .3s ease;fill:none;display:flex}.icon-button:focus,.icon-button:hover{transform:scale(1.2)}.icon-button:hover{color:var(--color-text-hard)}.icon-button:active{transform:scale(.95)}.icon-button.filled{color:var(--color-accent);fill:currentColor}.icon-button svg{transition:fill .3s ease,stroke .3s ease}.server-picker{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.station-list{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;align-items:center;overflow:auto}.station-list-wrapper{justify-content:center;justify-items:center;align-items:center;display:grid;grid-template-columns:repeat(auto-fill,28rem);grid-template-rows:repeat(auto-fill,4em);gap:1.5rem;padding:1.5rem}.card{position:relative;background-color:#80808026;border-radius:var(--border-radius-general);box-shadow:0 2px 8px #0000001a;display:flex;gap:.5em;height:4em;width:28em;transition:transform .3s ease;overflow:hidden}.card:hover{transform:scale(1.05)}.card:focus-within{outline:1px solid var(--color-focus)}.card .station-logo{display:block;aspect-ratio:1;height:100%;object-fit:contain}.card .default-logo{font-size:3em;color:var(--color-text-soft);display:flex;justify-content:center;align-items:center}.card .default-logo svg{width:80%;height:80%}.card-body{display:flex;flex-direction:column;text-wrap:nowrap;overflow:hidden;width:16rem;text-overflow:ellipsis;justify-content:center}.card-body>h4{margin:0}.card-button{position:absolute;cursor:pointer;width:100%;height:100%;z-index:1}.station-list .actions{z-index:2;display:flex;padding:.5em;justify-content:center;align-items:center;gap:.5em;color:var(--color-text-soft)}.station-list .icon-button{transition:opacity .5s ease,transform .5s ease}.station-list .icon-button:not(.filled){opacity:0}.station-list .actions:focus-within .icon-button,.station-list .card:hover .actions .icon-button{opacity:1}.theme-toggle{position:absolute;margin:1em;right:0;border-radius:25px;aspect-ratio:1;border:1px solid var(--color-text-soft);background-color:#e6e6e64d;padding:.3em;transition:transform .3s ease,border .3s ease}.theme-toggle:hover,.theme-toggle:focus{transform:scale(1.1);border:1px solid var(--color-accent)}