@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/press-start-2p-latin-ext-400.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/press-start-2p-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/press-start-2p-cyrillic-400.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}





@font-face {
    font-family: "Handjet";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/handjet-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Handjet";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/handjet-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Handjet";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/handjet-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root[data-theme="pixel"] {
    --bg:#141d3d; --bg2:#1d2b53; --panel:#1d2b53; --panel2:#2b3d70; --panel3:#162045;
    --line:rgba(194,195,199,.18); --text:#fff1e8; --muted:#c2c3c7; --muted2:#83769c;
    --accent:#ffec27; --accent2:#ffa300; --yellow:#ffec27; --glow:255,236,39;
    --halo:41,173,255;
    --page-bg: #0e1530;
    --sidebar-bg: #1d2b53;
    --bar-bg: #1d2b53;
    --card-bg: #1d2b53;
    --card-active: #ffec27;
    --card-active-text: #1d2b53;
    --panel-bg: #1d2b53;
    
    --sidebar-grad-a: #1d2b53; --sidebar-grad-b: #1d2b53;
    --card-grad-a: #1d2b53;    --card-grad-b: #1d2b53;
    --card-active-grad-a: #ffec27; --card-active-grad-b: #ffec27;
    --bar-grad-a: #1d2b53;     --bar-grad-b: #1d2b53;
    --play-icon: #1d2b53;
    --heart: #ff004d;
    --card-inner-top: transparent;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2c3c7' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    
    --chromeR: 0px;

    

    --px-edge: #000;
    --px-raised: inset -3px -3px 0 rgba(0,0,0,.38), inset 3px 3px 0 rgba(255,255,255,.14);
    --px-sunken: inset 3px 3px 0 rgba(0,0,0,.38), inset -3px -3px 0 rgba(255,255,255,.08);
    --px-drop: 4px 4px 0 rgba(0,0,0,.65);
    --px-head: "Press Start 2P", ui-monospace, monospace;
}


:root[data-theme="pixel"] *,
:root[data-theme="pixel"] *::before,
:root[data-theme="pixel"] *::after {
    border-radius: 0 !important;
    

    transition-timing-function: steps(3, jump-end) !important;
    animation-timing-function: steps(5, jump-end) !important;
}


:root[data-theme="pixel"] svg { shape-rendering: crispEdges; }



:root[data-theme="pixel"] img { image-rendering: pixelated; }




:root[data-theme="pixel"] body,
:root[data-theme="pixel"] .showcase { background: var(--page-bg); }
:root[data-theme="pixel"] .backdrop { display: none; }
:root[data-theme="pixel"] body::before {
    opacity: .55;
    background: repeating-linear-gradient(180deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
    background-size: auto;
}


:root[data-theme="pixel"] body {
    font-family: "Handjet", ui-monospace, monospace;
    -webkit-font-smoothing: none;
}







:root[data-theme="pixel"] .stationName { font-size: 19px; line-height: 1.1; font-weight: 500; }
:root[data-theme="pixel"] .stationMeta,
:root[data-theme="pixel"] .playlistInfo,
:root[data-theme="pixel"] .barMeta,
:root[data-theme="pixel"] .settingsDesc,
:root[data-theme="pixel"] .infoLabel,
:root[data-theme="pixel"] .emptyHint { font-size: 18px; }
:root[data-theme="pixel"] .tagChip,
:root[data-theme="pixel"] .ddSearch,
:root[data-theme="pixel"] .ddEmpty,
:root[data-theme="pixel"] .infoTag,
:root[data-theme="pixel"] .toast { font-size: 19px; }
:root[data-theme="pixel"] .empty,
:root[data-theme="pixel"] .aboutList,
:root[data-theme="pixel"] .confirmText { font-size: 20px; }
:root[data-theme="pixel"] .searchInput,
:root[data-theme="pixel"] .ddBtn,
:root[data-theme="pixel"] .ddItem,
:root[data-theme="pixel"] .aboutNote,
:root[data-theme="pixel"] .aboutTagline { font-size: 21px; }
:root[data-theme="pixel"] .infoValue { font-size: 22px; }
:root[data-theme="pixel"] .settingsLabel { font-size: 23px; font-weight: 600; }
:root[data-theme="pixel"] .barTitle { font-size: 29px; font-weight: 600; }
:root[data-theme="pixel"] .infoStationName { font-size: 38px; }
:root[data-theme="pixel"] .showcaseTitle { font-size: clamp(30px, min(6.8vw, 7.5vh), 84px); }
:root[data-theme="pixel"] .showcaseMeta { font-size: clamp(20px, min(3.5vw, 3.8vh), 40px); }
:root[data-theme="pixel"] .showcaseHistory { font-size: clamp(18px, 2.2vw, 24px); }



:root[data-theme="pixel"] .tagChip { color: var(--muted); }
:root[data-theme="pixel"] .tagChip:hover { color: var(--text); }



:root[data-theme="pixel"] .playlistTitle,
:root[data-theme="pixel"] .navBtn,
:root[data-theme="pixel"] .mobileTabs button,
:root[data-theme="pixel"] .refreshBtn,
:root[data-theme="pixel"] .searchBtn,
:root[data-theme="pixel"] .loadMoreBtn,
:root[data-theme="pixel"] .dangerBtn,
:root[data-theme="pixel"] .settingsGroupTitle,
:root[data-theme="pixel"] .aboutCardTitle,
:root[data-theme="pixel"] .tagCloudLabel,
:root[data-theme="pixel"] .searchField label,
:root[data-theme="pixel"] .infoPopupTitle,
:root[data-theme="pixel"] .confirmTitle,
:root[data-theme="pixel"] .volText,
:root[data-theme="pixel"] .showcaseClock {
    font-family: var(--px-head);
    font-weight: 400;
    letter-spacing: 0;
}

:root[data-theme="pixel"] .playlistTitle { font-size: 24px; line-height: 1.2; }
:root[data-theme="pixel"] .navBtn { font-size: 9px; line-height: 1.5; }
:root[data-theme="pixel"] .refreshBtn,
:root[data-theme="pixel"] .searchBtn,
:root[data-theme="pixel"] .loadMoreBtn,
:root[data-theme="pixel"] .dangerBtn { font-size: 9px; }
:root[data-theme="pixel"] .settingsGroupTitle,
:root[data-theme="pixel"] .aboutCardTitle,
:root[data-theme="pixel"] .tagCloudLabel,
:root[data-theme="pixel"] .searchField label { font-size: 8px; line-height: 1.6; }
:root[data-theme="pixel"] .volText { font-size: 8px; width: 48px; }
:root[data-theme="pixel"] .showcaseClock { font-size: clamp(24px, min(5vh, 9vw), 56px); opacity: 1; }






@media (orientation: landscape) and (max-height: 540px) {
    :root[data-theme="pixel"] .showcaseClock {
        font-size: clamp(18px, 7vh, 36px);
        font-size: clamp(18px, 7dvh, 36px);
    }
    :root[data-theme="pixel"] .showcaseTitle {
        font-size: clamp(26px, 9vh, 52px);
        font-size: clamp(26px, 9dvh, 52px);
    }
    :root[data-theme="pixel"] .showcaseMeta {
        font-size: clamp(18px, 6vh, 28px);
        font-size: clamp(18px, 6dvh, 28px);
    }
}



:root[data-theme="pixel"] .sidebar::before,
:root[data-theme="pixel"] .shell::after { display: none; }
:root[data-theme="pixel"] .sidebar::after {
    left: calc(var(--sidebarW) - 2px);
    width: 2px;
    bottom: var(--barH);
    background: var(--px-edge);
}
:root[data-theme="pixel"] .shell::before {
    height: 2px;
    background: var(--px-edge);
}
:root[data-theme="pixel"] .playerBar::before {
    left: var(--sidebarW);
    top: 2px;
    background: var(--accent);
}

:root[data-theme="pixel"] .logo { border-bottom: 2px solid var(--px-edge); }

:root[data-theme="pixel"] .navBtn.active {
    color: var(--accent);
    background: rgba(0,0,0,.28);
    box-shadow: inset 4px 0 0 var(--accent);
}
:root[data-theme="pixel"] .navBtn:hover { background: rgba(0,0,0,.18); }


:root[data-theme="pixel"] .stationCardInner {
    background: var(--card-bg);
    border: 2px solid var(--px-edge);
    box-shadow: var(--px-raised), var(--px-drop);
}
:root[data-theme="pixel"] .stationCard:hover .stationCardInner {
    transform: translate(-2px, -2px);
    box-shadow: var(--px-raised), inset 0 0 0 5px var(--accent), 6px 6px 0 rgba(0,0,0,.65);
}
:root[data-theme="pixel"] .stationCard.active .stationCardInner {
    background: var(--card-active);
    box-shadow: var(--px-raised), var(--px-drop);
}
:root[data-theme="pixel"] .stationMiniLogo,
:root[data-theme="pixel"] .barLogo {
    background: rgba(0,0,0,.3);
    box-shadow: var(--px-sunken);
    border: 2px solid var(--px-edge);
}
:root[data-theme="pixel"] .stationMeta { color: var(--muted); }


:root[data-theme="pixel"] .circleBtn,
:root[data-theme="pixel"] .refreshBtn,
:root[data-theme="pixel"] .searchBtn,
:root[data-theme="pixel"] .loadMoreBtn,
:root[data-theme="pixel"] .dangerBtn,
:root[data-theme="pixel"] .tagChip,
:root[data-theme="pixel"] .switchToggle {
    border: 2px solid var(--px-edge);
    box-shadow: var(--px-raised), 3px 3px 0 rgba(0,0,0,.65);
}
:root[data-theme="pixel"] .refreshBtn,
:root[data-theme="pixel"] .loadMoreBtn,
:root[data-theme="pixel"] .tagChip { background: var(--panel2); }
:root[data-theme="pixel"] .searchBtn { background: var(--accent); filter: none; }


:root[data-theme="pixel"] .circleBtn:active,
:root[data-theme="pixel"] .refreshBtn:active,
:root[data-theme="pixel"] .searchBtn:active,
:root[data-theme="pixel"] .loadMoreBtn:active,
:root[data-theme="pixel"] .tagChip:active {
    transform: translate(3px, 3px);
    box-shadow: var(--px-sunken);
}

:root[data-theme="pixel"] .searchInput,
:root[data-theme="pixel"] .ddBtn,
:root[data-theme="pixel"] .ddSearch {
    border: 2px solid var(--px-edge);
    background-color: rgba(0,0,0,.3);
    box-shadow: var(--px-sunken);
}

:root[data-theme="pixel"] .switchThumb { background: var(--muted); box-shadow: var(--px-raised); }


:root[data-theme="pixel"] .playIcon {
    width: 20px;
    height: 24px;
    border: 0;
    background: var(--play-icon);
    margin-left: 4px;
    clip-path: polygon(0 0, 25% 0, 25% 12.5%, 50% 12.5%, 50% 25%, 75% 25%, 75% 37.5%, 100% 37.5%,
                       100% 62.5%, 75% 62.5%, 75% 75%, 50% 75%, 50% 87.5%, 25% 87.5%, 25% 100%, 0 100%);
}
:root[data-theme="pixel"] .showcasePlay .playIcon {
    width: .37em;
    height: .444em;
    margin-left: .074em;
}


:root[data-theme="pixel"] .searchPanel,
:root[data-theme="pixel"] .settingsGroup,
:root[data-theme="pixel"] .aboutCard,
:root[data-theme="pixel"] .empty {
    border: 2px solid var(--px-edge);
    background: rgba(0,0,0,.22);
    box-shadow: var(--px-sunken);
}
:root[data-theme="pixel"] .infoPopup,
:root[data-theme="pixel"] .confirmPopup,
:root[data-theme="pixel"] .ddPanel {
    border: 2px solid var(--px-edge);
    box-shadow: var(--px-raised), 6px 6px 0 rgba(0,0,0,.7);
}
:root[data-theme="pixel"] .settingsRow + .settingsRow { border-top: 2px dashed var(--line); }

:root[data-theme="pixel"] .showcaseNav { background: var(--panel2); border: 2px solid var(--px-edge); box-shadow: var(--px-raised); }



:root[data-theme="pixel"] .volumeBar input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    background: rgba(0,0,0,.5);
    border: 2px solid var(--px-edge);
    cursor: pointer;
}
:root[data-theme="pixel"] .volumeBar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 22px;
    border: 2px solid var(--px-edge);
    border-radius: 0;
    background: var(--accent);
    box-shadow: var(--px-raised);
}
:root[data-theme="pixel"] .volumeBar input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 18px;
    border: 2px solid var(--px-edge);
    border-radius: 0;
    background: var(--accent);
}
:root[data-theme="pixel"] .volumeBar input[type="range"]::-moz-range-progress { height: 6px; background: var(--accent2); }


:root[data-theme="pixel"] .main::-webkit-scrollbar-thumb,
:root[data-theme="pixel"] .ddList::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--panel2);
}