@charset "UTF-8";html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    box-sizing: border-box
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: local("Apple SD Gothic Neo Regular"),local("AppleSDGothicNeo-Regular"),url(/assets/fonts/locale-switcher/AppleSDGothicNeo-Regular-subset.woff2) format("woff2");
    unicode-range: U+ad6d,U+b300,U+bbf8,U+bbfc,U+c5b4,U+d55c
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/locale-switcher/ArabicUIText-Regular-subset.woff2) format("woff2");
    unicode-range: U+20,U+627-62a,U+62d,U+62f,U+631,U+639,U+644,U+645,U+648,U+64a
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: local("Arial Hebrew"),local("ArialHebrew"),url(https://music.apple.com/assets/fonts/locale-switcher/ArialHebrew-subset.woff2) format("woff2");
    unicode-range: U+5d0,U+5d9,U+5dc,U+5e8,U+5e9
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: local("Hiragino Sans W4"),local("HiraginoSans-W4"),url(https://music.apple.com/assets/fonts/locale-switcher/HiraginoSans-W4-subset.woff2) format("woff2");
    unicode-range: U+65e5,U+672c
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher PingFang HK;
    font-style: normal;
    font-weight: 400;
    src: local("PingFang HK Regular"),local("PingFangHK-Regular"),url(https://music.apple.com/assets/fonts/locale-switcher/PingFangHK-Regular-subset.woff2) format("woff2");
    unicode-range: U+20,U+4e2d,U+4f53,U+53f0,U+570b,U+5927,U+6587,U+6e2f,U+6fb3,U+7063,U+7b80,U+7c21,U+7e41,U+7f8e,U+9580,U+9678,U+9999,U+9ad4
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher PingFang SC;
    font-style: normal;
    font-weight: 400;
    src: local("PingFang SC Regular"),local("PingFangSC-Regular"),url(https://music.apple.com/assets/fonts/locale-switcher/PingFangSC-Regular-subset.woff2) format("woff2");
    unicode-range: U+20,U+4e2d,U+4f53,U+53f0,U+570b,U+5927,U+6587,U+6e2f,U+6fb3,U+7063,U+7b80,U+7c21,U+7e41,U+7f8e,U+9580,U+9678,U+9999,U+9ad4
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher PingFang TC;
    font-style: normal;
    font-weight: 400;
    src: local("PingFang TC Regular"),local("PingFangTC-Regular"),url(https://music.apple.com/assets/fonts/locale-switcher/PingFangTC-Regular-subset.woff2) format("woff2");
    unicode-range: U+20,U+4e2d,U+4f53,U+53f0,U+570b,U+5927,U+6587,U+6e2f,U+6fb3,U+7063,U+7b80,U+7c21,U+7e41,U+7f8e,U+9580,U+9678,U+9999,U+9ad4
}

@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: local("Kohinoor Devanagari Regular"),local("KohinoorDevanagari-Regular"),url(https://music.apple.com/assets/fonts/locale-switcher/KohinoorDevanagari-Regular-subset.woff2) format("woff2");
    unicode-range: U+924,U+92d,U+930,U+93e
}

@supports selector(:focus-visible) {
    :focus {
        outline: none
    }

    :focus-visible {
        outline: 4px solid rgba(var(--keyColor-rgb),.6);
        outline-offset: 1px
    }
}

[type=button]:focus,a:focus,button:focus {
    box-shadow: 0 0 0 4px rgba(var(--keyColor-rgb),.6);
    outline: none
}

.js-focus-visible [type=button]:focus:not(.focus-visible),.js-focus-visible a:focus:not(.focus-visible),.js-focus-visible button:focus:not(.focus-visible) {
    box-shadow: none
}

@supports selector(:focus-visible) {
    [type=button]:focus,a:focus,button:focus {
        box-shadow: none;
        outline: none
    }

    [type=button]:focus-visible,a:focus-visible,button:focus-visible {
        box-shadow: 0 0 0 4px rgba(var(--keyColor-rgb),.6);
        outline: none
    }
}

[draggable=true] {
    -webkit-user-drag: element
}

[data-drop-area]:not(.drop-reset).is-drag-over {
    box-shadow: inset 0 0 0 4px rgba(var(--keyColor-rgb),.6);
    outline: none
}

[data-drop-area]:not(.drop-reset).is-drag-over-bottom,[data-drop-area]:not(.drop-reset).is-drag-over-left,[data-drop-area]:not(.drop-reset).is-drag-over-right,[data-drop-area]:not(.drop-reset).is-drag-over-top {
    position: relative
}

[data-drop-area]:not(.drop-reset).is-drag-over-bottom:after,[data-drop-area]:not(.drop-reset).is-drag-over-left:after,[data-drop-area]:not(.drop-reset).is-drag-over-right:after,[data-drop-area]:not(.drop-reset).is-drag-over-top:after {
    background-color: var(--keyColor);
    content: "";
    position: absolute;
    z-index: 4
}

[data-drop-area]:not(.drop-reset).is-drag-over-bottom:after,[data-drop-area]:not(.drop-reset).is-drag-over-top:after {
    height: 2px;
    width: 100%
}

:global(html[dir=ltr]) [data-drop-area]:not(.drop-reset).is-drag-over-bottom:after,:global(html[dir=ltr]) [data-drop-area]:not(.drop-reset).is-drag-over-top:after {
    left: 0
}

:global(html[dir=rtl]) [data-drop-area]:not(.drop-reset).is-drag-over-bottom:after,:global(html[dir=rtl]) [data-drop-area]:not(.drop-reset).is-drag-over-top:after {
    right: 0
}

[data-drop-area]:not(.drop-reset).is-drag-over-top:after {
    top: 0;
    transform: translateY(-1px)
}

[data-drop-area]:not(.drop-reset).is-drag-over-bottom:after {
    bottom: 0;
    transform: translateY(1px)
}

[data-drop-area]:not(.drop-reset).is-drag-over-left:after,[data-drop-area]:not(.drop-reset).is-drag-over-right:after {
    height: 100%;
    top: 0;
    width: 2px
}

:global(html[dir=ltr]) [data-drop-area]:not(.drop-reset).is-drag-over-right:after {
    right: -1px
}

:global(html[dir=rtl]) [data-drop-area]:not(.drop-reset).is-drag-over-right:after {
    left: -1px
}

:global(html[dir=ltr]) [data-drop-area]:not(.drop-reset).is-drag-over-left:after {
    left: -1px
}

:global(html[dir=rtl]) [data-drop-area]:not(.drop-reset).is-drag-over-left:after {
    right: -1px
}


@font-face {
    font-display: swap;
    font-family: Locale Switcher;
    font-style: normal;
    font-weight: 400;
    src: local("Thonburi"),local("Thonburi"),url(https://music.apple.com/assets/fonts/locale-switcher/https:/fonts.gstatic.com/l/…) format("woff2");
    unicode-range: U+e17,U+e22,U+e44
}

[contenteditable] {
    -webkit-user-select: auto!important;
    -moz-user-select: auto!important;
    -ms-user-select: auto!important;
    user-select: auto!important
}

ul {
    list-style-type: none
}

svg {
    pointer-events: none
}


:root {
    --systemRed: #ff3b30;
    --systemRed-vibrant: #f53126;
    --systemRed-default_IC: #d70015;
    --systemRed-vibrant_IC: #c20618;
    --systemOrange: #ff9500;
    --systemOrange-vibrant: #f58b00;
    --systemOrange-default_IC: #c93400;
    --systemOrange-vibrant_IC: #ad3a00;
    --systemYellow: #fc0;
    --systemYellow-vibrant: #f5c200;
    --systemYellow-default_IC: #a05a00;
    --systemYellow-vibrant_IC: #925100;
    --systemGreen: #28cd41;
    --systemGreen-vibrant: #1ec337;
    --systemGreen-default_IC: #007d1b;
    --systemGreen-vibrant_IC: #007018;
    --systemMint: #00c7be;
    --systemMint-vibrant: #00bdb4;
    --systemMint-default_IC: #0c817b;
    --systemMint-vibrant_IC: #0b7570;
    --systemTeal: #59adc4;
    --systemTeal-vibrant: #2ea7bd;
    --systemTeal-default_IC: #008299;
    --systemTeal-vibrant_IC: #00778c;
    --systemCyan: #55bef0;
    --systemCyan-vibrant: #41afdc;
    --systemCyan-default_IC: #0071a4;
    --systemCyan-vibrant_IC: #006796;
    --systemBlue: #007aff;
    --systemBlue-vibrant: #0070f5;
    --systemBlue-default_IC: #0040dd;
    --systemBlue-vibrant_IC: #0040dd;
    --systemBlue-rollover: #0045b7;
    --systemBlue-pressed: #005cd7;
    --systemBlue-deepPressed: #0045b7;
    --systemBlue-disabled: rgba(0,122,255,.35);
    --systemIndigo: #5856d6;
    --systemIndigo-vibrant: #5452cc;
    --systemIndigo-default_IC: #3634a3;
    --systemIndigo-vibrant_IC: #3634a3;
    --systemPurple: #af52de;
    --systemPurple-vibrant: #9f4bc9;
    --systemPurple-default_IC: #ad44ab;
    --systemPurple-vibrant_IC: #ad44ab;
    --systemPink: #ff2d55;
    --systemPink-vibrant: #f5234b;
    --systemPink-default_IC: #d30f45;
    --systemPink-vibrant_IC: #c11032;
    --systemBrown: #a2845e;
    --systemBrown-vibrant: #987a54;
    --systemBrown-default_IC: #7f6545;
    --systemBrown-vibrant_IC: #775d3b;
    --systemGray: #8e8e93;
    --systemGray-vibrant: #848489;
    --systemGray-default_IC: #69696e;
    --systemGray-vibrant_IC: #616165;
    --systemPrimary: rgba(0,0,0,.85);
    --systemPrimary-vibrant: #4c4c4c;
    --systemPrimary-onLight: rgba(0,0,0,.85);
    --systemPrimary-onDark: hsla(0,0%,100%,.85);
    --systemPrimary-default_IC: #000;
    --systemPrimary-vibrant_IC: #000;
    --systemPrimary-onLight_IC: #000;
    --systemPrimary-onDark_IC: #fff;
    --systemSecondary: rgba(0,0,0,.5);
    --systemSecondary-vibrant: gray;
    --systemSecondary-onLight: rgba(0,0,0,.5);
    --systemSecondary-onDark: hsla(0,0%,100%,.55);
    --systemSecondary-default_IC: rgba(0,0,0,.76);
    --systemSecondary-vibrant_IC: rgba(0,0,0,.76);
    --systemSecondary-onLight_IC: rgba(0,0,0,.76);
    --systemSecondary-onDark_IC: hsla(0,0%,100%,.7);
    --systemTertiary: rgba(0,0,0,.25);
    --systemTertiary-vibrant: #bfbfbf;
    --systemTertiary-onLight: rgba(0,0,0,.25);
    --systemTertiary-onDark: hsla(0,0%,100%,.25);
    --systemTertiary-default_IC: rgba(0,0,0,.56);
    --systemTertiary-vibrant_IC: rgba(0,0,0,.56);
    --systemTertiary-onLight_IC: rgba(0,0,0,.56);
    --systemTertiary-onDark_IC: hsla(0,0%,100%,.5);
    --systemQuaternary: rgba(0,0,0,.1);
    --systemQuaternary-vibrant: #e6e6e6;
    --systemQuaternary-onLight: rgba(0,0,0,.1);
    --systemQuaternary-onDark: hsla(0,0%,100%,.1);
    --systemQuaternary-default_IC: rgba(0,0,0,.35);
    --systemQuaternary-vibrant_IC: rgba(0,0,0,.35);
    --systemQuaternary-onLight_IC: rgba(0,0,0,.35);
    --systemQuaternary-onDark_IC: hsla(0,0%,100%,.3);
    --systemQuinary: rgba(0,0,0,.05);
    --systemQuinary-vibrant: #f2f2f2;
    --systemQuinary-onLight: rgba(0,0,0,.05);
    --systemQuinary-onDark: hsla(0,0%,100%,.05);
    --systemQuinary-default_IC: rgba(0,0,0,.1);
    --systemQuinary-vibrant_IC: rgba(0,0,0,.1);
    --systemQuinary-onLight_IC: rgba(0,0,0,.1);
    --systemQuinary-onDark_IC: hsla(0,0%,100%,.1);
    --systemGray2: #aeaeb2;
    --systemGray2-onLight: #aeaeb2;
    --systemGray2-onDark: #636366;
    --systemGray2-default_IC: #8e8e93;
    --systemGray2-onLight_IC: #8e8e93;
    --systemGray2-onDark_IC: #7c7c80;
    --systemGray3: #c7c7cc;
    --systemGray3-onLight: #c7c7cc;
    --systemGray3-onDark: #48484a;
    --systemGray3-default_IC: #aeaeb2;
    --systemGray3-onLight_IC: #aeaeb2;
    --systemGray3-onDark_IC: #545456;
    --systemGray4: #d1d1d6;
    --systemGray4-onLight: #d1d1d6;
    --systemGray4-onDark: #3a3a3c;
    --systemGray4-default_IC: #bcbcc0;
    --systemGray4-onLight_IC: #bcbcc0;
    --systemGray4-onDark_IC: #444446;
    --systemGray5: #e5e5ea;
    --systemGray5-onLight: #e5e5ea;
    --systemGray5-onDark: #2c2c2e;
    --systemGray5-default_IC: #d8d8dc;
    --systemGray5-onLight_IC: #d8d8dc;
    --systemGray5-onDark_IC: #363638;
    --systemGray6: #f2f2f7;
    --systemGray6-onLight: #f2f2f7;
    --systemGray6-onDark: #1c1c1e;
    --systemGray6-default_IC: #ebebf0;
    --systemGray6-onLight_IC: #ebebf0;
    --systemGray6-onDark_IC: #242426;
    --keyColor: #fa233b;
    --keyColor-rgb: 250,35,59;
    --keyColor-rollover: #c60007;
    --keyColor-rollover-rgb: 198,0,7;
    --keyColor-pressed: #e00921;
    --keyColor-pressed-rgb: 224,9,33;
    --keyColor-deepPressed: #c60007;
    --keyColor-deepPressed-rgb: 198,0,7;
    --keyColor-disabled: rgba(250,35,59,.35);
    --keyColor-default_IC: #d60017;
    --keyColor-default_IC-rgb: 214,0,23;
    --keyColor-rollover_IC: #a20000;
    --keyColor-rollover_IC-rgb: 162,0,0;
    --keyColor-pressed_IC: #b00;
    --keyColor-pressed_IC-rgb: 187,0,0;
    --keyColor-deepPressed_IC: #a20000;
    --keyColor-deepPressed_IC-rgb: 162,0,0;
    --keyColor-disabled_IC: rgba(214,0,23,.25);
    --systemStandardUltrathinMaterialSover: hsla(0,0%,96%,.36);
    --systemStandardUltrathinMaterialSover-inactive: #f0f0f0;
    --systemStandardUltrathinMaterialSover-default_IC: #d2d2d2;
    --systemStandardUltrathinMaterialSover-inactive_IC: #ececec;
    --systemStandardThinMaterialSover: hsla(0,0%,96%,.48);
    --systemStandardThinMaterialSover-inactive: #f0f0f0;
    --systemStandardThinMaterialSover-default_IC: #dcdcdc;
    --systemStandardThinMaterialSover-inactive_IC: #ececec;
    --systemStandardMediumMaterialSover: hsla(0,0%,96%,.6);
    --systemStandardMediumMaterialSover-inactive: #f0f0f0;
    --systemStandardMediumMaterialSover-default_IC: #e6e6e6;
    --systemStandardMediumMaterialSover-inactive_IC: #ececec;
    --systemStandardThickMaterialSover: hsla(0,0%,96%,.72);
    --systemStandardThickMaterialSover-inactive: #f0f0f0;
    --systemStandardThickMaterialSover-default_IC: #f0f0f0;
    --systemStandardThickMaterialSover-inactive_IC: #ececec;
    --systemStandardUltrathickMaterialSover: hsla(0,0%,96%,.84);
    --systemStandardUltrathickMaterialSover-inactive: #f0f0f0;
    --systemStandardUltrathickMaterialSover-default_IC: #fafafa;
    --systemStandardUltrathickMaterialSover-inactive_IC: #ececec;
    --systemHeaderMaterialSover: hsla(0,0%,100%,.8);
    --systemHeaderMaterialSover-default_IC: #fff;
    --systemToolbarTitlebarMaterialSover: hsla(0,0%,99%,.8);
    --systemToolbarTitlebarMaterialSover-inactive: #f0f0f0;
    --systemToolbarTitlebarMaterialSover-default_IC: #fff;
    --systemToolbarTitlebarMaterialSover-inactive_IC: #ececec;
    --labelDivider: rgba(0,0,0,.15);
    --vibrantDivider: rgba(60,60,67,.29);
    --pageBG: #fff;
    --pageBG-rgb: 255,255,255;
    --shelfBG: rgba(0,0,0,.05);
    --genericJoeColor: #ebebeb;
    --fallbackMaterialBG: hsla(0,0%,100%,.97);
    --liveBadgePlatterBG: #ff5066;
    --cardHoverColor: hsla(240,3%,49%,.25);
    --contextMenuBorderColor: rgba(0,0,0,.15);
    --contextMenuTextColor: rgba(0,0,0,.85);
    --contextMenuOverrideTextColor: #ff3b30;
    --dialogShadowColor: rgba(0,0,0,.25);
    --footerBg: #fbfbfb;
    --opaqueShelfBG: #f2f2f2;
    --shelfLockupPlayHover: #69696e;
    --lockupHoverBGColor: rgba(51,51,51,.3);
    --lockupChinScrim: rgba(0,0,0,.2);
    --mobileNavigationBG: #fff;
    --miniPlayerBackground: hsla(0,0%,100%,.9);
    --miniPlayerBackground-default_IC: #fafafa;
    --playerBackgroundFallback: hsla(0,0%,100%,.97);
    --playerBackgroundFallback-default_IC: #fafafa;
    --playerBackground: hsla(0,0%,100%,.88);
    --playerBackground-default_IC: #fafafa;
    --navSidebarBG: rgba(60,60,67,.03);
    --navSidebarBG-default_IC: #fafafa;
    --navSidebarSelectedState: rgba(60,60,67,.1);
    --searchBoxIconFill: rgba(0,0,0,.65);
    --bannerDarkGray: #444;
    --dropdownBackground: #575757;
    --dropdownLightGray: #707070;
    --dropdownLightGrayIcon: #999;
    --dropdownActiveOutlineColor: #06c;
    --dropdownActiveOutlineColorShadow: rgba(0,102,204,.6);
    --radiosityShadowColor: rgba(0,0,0,.1);
    --searchBarBorderColor: rgba(0,0,0,.15);
    --modalScrimColor: rgba(0,0,0,.45);
    --segmentedControlBG: hsla(240,4%,48%,.12);
    --segmentedControlBG-default_IC: rgba(0,0,0,.2);
    --segmentedControlSelectedText: rgba(0,0,0,.85);
    --segmentedControlSelectedText-default_IC: #000;
    --segmentedControlSelectedBG: #fff;
    --segmentedControlActiveBG: hsla(0,0%,100%,.7);
    --segmentedControlActiveBG-default_IC: #d9d9d9;
    --segmentedControlSelectedShadow1: rgba(0,0,0,.12);
    --segmentedControlSelectedShadow2: rgba(0,0,0,.04);
    --segmentedControlSelectedBorder: rgba(0,0,0,.15);
    --modalCloseButtonBGColor: #e8e8ed;
    --modalCloseButtonBGColor-rollover: #ececf0;
    --modalCloseButtonBGColor-pressed: #dfdfe4;
    --musicKeyColor: #fa233b;
    --musicKeyColor-rollover: #c60007;
    --musicKeyColor-pressed: #e00921;
    --musicKeyColor-deepPressed: #c60007;
    --musicKeyColor-disabled: rgba(250,35,59,.35);
    --musicKeyColor-default_IC: #d60017;
    --musicKeyColor-rollover_IC: #a20000;
    --musicKeyColor-pressed_IC: #b00;
    --musicKeyColor-deepPressed_IC: #a20000;
    --musicKeyColor-disabled_IC: rgba(214,0,23,.25);
    --circularArtistHeaderGradientBottom: rgba(0,0,0,.05);
    --fallbackButtonMaterial: hsla(240,2%,57%,.8);
    --playerMissingArtworkIcon: #dcdcdc;
    --playerMissingArtworkBg: #e9e9e9;
    --playerPlatterButtonBGFill: #6c6c6c;
    --playerPlatterButtonIconFill: #fff;
    --stickyHeaderDropShadow2: rgba(0,0,0,.07);
    --stickyHeaderInnerShadow: hsla(0,0%,100%,.45);
    --tracklistAltRowColor: rgba(0,0,0,.015);
    --tracklistAltRowColor-default_IC: rgba(0,0,0,.05);
    --tracklistHoverColor: rgba(0,0,0,.06);
    --tracklistHoverColor-default_IC: rgba(0,0,0,.1);
    --tracklistWorksTrackHoverColor: rgba(0,0,0,.1);
    --tracklistWorksTrackHoverColor-default_IC: rgba(0,0,0,.18);
    --trackLockupArtworkOverlay: rgba(51,51,51,.3);
    --lyricsBg: #fff;
    --nowPlayingBackdropBG: #878787;
    --tracklistBadgeBorderColor: #fbfbfb;
    --tracklistBadgeBackgroundColor: #e9e9ea;
    --keyColorBG: #fa233b;
    --keyColorBG-default_IC: #d60017;
    --selectionColor: #dd1f34;
    --selectionColor-default_IC: #d60017;
    --trackBackgroundEven: rgba(0,0,0,.02);
    --librarySongsTrackInactiveBG: rgba(0,0,0,.14);
    --profileBadgeBG: #e2e4e7;
    color-scheme: light dark
}

@supports not (font: -apple-system-body) {
    :root {
        --systemPrimary:rgba(0,0,0,.88);
        --systemPrimary-vibrant: #1d1d1f;
        --systemPrimary-onLight: rgba(0,0,0,.88);
        --systemPrimary-onDark: hsla(0,0%,100%,.92);
        --systemSecondary: rgba(0,0,0,.56);
        --systemSecondary-vibrant: rgba(0,0,0,.56);
        --systemSecondary-onLight: rgba(0,0,0,.56);
        --systemSecondary-onDark: hsla(0,0%,100%,.64);
        --systemTertiary: rgba(0,0,0,.48);
        --systemTertiary-vibrant: rgba(0,0,0,.48);
        --systemTertiary-onLight: rgba(0,0,0,.48);
        --systemTertiary-onDark: hsla(0,0%,100%,.4);
        --keyColor: #d60017;
        --keyColor-rgb: 214,0,23;
        --keyColor-rollover: #a20000;
        --keyColor-rollover-rgb: 162,0,0;
        --keyColor-pressed: #b00;
        --keyColor-pressed-rgb: 187,0,0;
        --keyColor-deepPressed: #a20000;
        --keyColor-deepPressed-rgb: 162,0,0;
        --keyColor-disabled: rgba(214,0,23,.25);
        --segmentedControlSelectedText: rgba(0,0,0,.88);
        --musicKeyColor: #d60017;
        --musicKeyColor-rollover: #a20000;
        --musicKeyColor-pressed: #b00;
        --musicKeyColor-deepPressed: #a20000;
        --musicKeyColor-disabled: rgba(214,0,23,.25);
        --keyColorBG: #d60017;
        --selectionColor: #d60017
    }
}

:root .increase-contrast {
    --systemRed: #d70015;
    --systemRed-vibrant: #c20618;
    --systemOrange: #c93400;
    --systemOrange-vibrant: #ad3a00;
    --systemYellow: #a05a00;
    --systemYellow-vibrant: #925100;
    --systemGreen: #007d1b;
    --systemGreen-vibrant: #007018;
    --systemMint: #0c817b;
    --systemMint-vibrant: #0b7570;
    --systemTeal: #008299;
    --systemTeal-vibrant: #00778c;
    --systemCyan: #0071a4;
    --systemCyan-vibrant: #006796;
    --systemBlue: #0040dd;
    --systemBlue-vibrant: #0040dd;
    --systemIndigo: #3634a3;
    --systemIndigo-vibrant: #3634a3;
    --systemPurple: #ad44ab;
    --systemPurple-vibrant: #ad44ab;
    --systemPink: #d30f45;
    --systemPink-vibrant: #c11032;
    --systemBrown: #7f6545;
    --systemBrown-vibrant: #775d3b;
    --systemGray: #69696e;
    --systemGray-vibrant: #616165;
    --systemPrimary: #000;
    --systemPrimary-vibrant: #000;
    --systemPrimary-onLight: #000;
    --systemPrimary-onDark: #fff;
    --systemSecondary: rgba(0,0,0,.76);
    --systemSecondary-vibrant: rgba(0,0,0,.76);
    --systemSecondary-onLight: rgba(0,0,0,.76);
    --systemSecondary-onDark: hsla(0,0%,100%,.7);
    --systemTertiary: rgba(0,0,0,.56);
    --systemTertiary-vibrant: rgba(0,0,0,.56);
    --systemTertiary-onLight: rgba(0,0,0,.56);
    --systemTertiary-onDark: hsla(0,0%,100%,.5);
    --systemQuaternary: rgba(0,0,0,.35);
    --systemQuaternary-vibrant: rgba(0,0,0,.35);
    --systemQuaternary-onLight: rgba(0,0,0,.35);
    --systemQuaternary-onDark: hsla(0,0%,100%,.3);
    --systemQuinary: rgba(0,0,0,.1);
    --systemQuinary-vibrant: rgba(0,0,0,.1);
    --systemQuinary-onLight: rgba(0,0,0,.1);
    --systemQuinary-onDark: hsla(0,0%,100%,.1);
    --systemGray2: #8e8e93;
    --systemGray2-onLight: #8e8e93;
    --systemGray2-onDark: #7c7c80;
    --systemGray3: #aeaeb2;
    --systemGray3-onLight: #aeaeb2;
    --systemGray3-onDark: #545456;
    --systemGray4: #bcbcc0;
    --systemGray4-onLight: #bcbcc0;
    --systemGray4-onDark: #444446;
    --systemGray5: #d8d8dc;
    --systemGray5-onLight: #d8d8dc;
    --systemGray5-onDark: #363638;
    --systemGray6: #ebebf0;
    --systemGray6-onLight: #ebebf0;
    --systemGray6-onDark: #242426;
    --keyColor: #d60017;
    --keyColor-rgb: 214,0,23;
    --keyColor-rollover: #a20000;
    --keyColor-rollover-rgb: 162,0,0;
    --keyColor-pressed: #b00;
    --keyColor-pressed-rgb: 187,0,0;
    --keyColor-deepPressed: #a20000;
    --keyColor-deepPressed-rgb: 162,0,0;
    --keyColor-disabled: rgba(214,0,23,.25);
    --systemStandardUltrathinMaterialSover: #d2d2d2;
    --systemStandardUltrathinMaterialSover-inactive: #ececec;
    --systemStandardThinMaterialSover: #dcdcdc;
    --systemStandardThinMaterialSover-inactive: #ececec;
    --systemStandardMediumMaterialSover: #e6e6e6;
    --systemStandardMediumMaterialSover-inactive: #ececec;
    --systemStandardThickMaterialSover: #f0f0f0;
    --systemStandardThickMaterialSover-inactive: #ececec;
    --systemStandardUltrathickMaterialSover: #fafafa;
    --systemStandardUltrathickMaterialSover-inactive: #ececec;
    --systemHeaderMaterialSover: #fff;
    --systemToolbarTitlebarMaterialSover: #fff;
    --systemToolbarTitlebarMaterialSover-inactive: #ececec;
    --miniPlayerBackground: #fafafa;
    --playerBackgroundFallback: #fafafa;
    --playerBackground: #fafafa;
    --navSidebarBG: #fafafa;
    --segmentedControlBG: rgba(0,0,0,.2);
    --segmentedControlSelectedText: #000;
    --segmentedControlActiveBG: #d9d9d9;
    --musicKeyColor: #d60017;
    --musicKeyColor-rollover: #a20000;
    --musicKeyColor-pressed: #b00;
    --musicKeyColor-deepPressed: #a20000;
    --musicKeyColor-disabled: rgba(214,0,23,.25);
    --tracklistAltRowColor: rgba(0,0,0,.05);
    --tracklistHoverColor: rgba(0,0,0,.1);
    --tracklistWorksTrackHoverColor: rgba(0,0,0,.18);
    --keyColorBG: #d60017;
    --selectionColor: #d60017
}

@media (prefers-contrast:more) {
    :root {
        --systemRed: #d70015;
        --systemRed-vibrant: #c20618;
        --systemOrange: #c93400;
        --systemOrange-vibrant: #ad3a00;
        --systemYellow: #a05a00;
        --systemYellow-vibrant: #925100;
        --systemGreen: #007d1b;
        --systemGreen-vibrant: #007018;
        --systemMint: #0c817b;
        --systemMint-vibrant: #0b7570;
        --systemTeal: #008299;
        --systemTeal-vibrant: #00778c;
        --systemCyan: #0071a4;
        --systemCyan-vibrant: #006796;
        --systemBlue: #0040dd;
        --systemBlue-vibrant: #0040dd;
        --systemIndigo: #3634a3;
        --systemIndigo-vibrant: #3634a3;
        --systemPurple: #ad44ab;
        --systemPurple-vibrant: #ad44ab;
        --systemPink: #d30f45;
        --systemPink-vibrant: #c11032;
        --systemBrown: #7f6545;
        --systemBrown-vibrant: #775d3b;
        --systemGray: #69696e;
        --systemGray-vibrant: #616165;
        --systemPrimary: #000;
        --systemPrimary-vibrant: #000;
        --systemPrimary-onLight: #000;
        --systemPrimary-onDark: #fff;
        --systemSecondary: rgba(0,0,0,.76);
        --systemSecondary-vibrant: rgba(0,0,0,.76);
        --systemSecondary-onLight: rgba(0,0,0,.76);
        --systemSecondary-onDark: hsla(0,0%,100%,.7);
        --systemTertiary: rgba(0,0,0,.56);
        --systemTertiary-vibrant: rgba(0,0,0,.56);
        --systemTertiary-onLight: rgba(0,0,0,.56);
        --systemTertiary-onDark: hsla(0,0%,100%,.5);
        --systemQuaternary: rgba(0,0,0,.35);
        --systemQuaternary-vibrant: rgba(0,0,0,.35);
        --systemQuaternary-onLight: rgba(0,0,0,.35);
        --systemQuaternary-onDark: hsla(0,0%,100%,.3);
        --systemQuinary: rgba(0,0,0,.1);
        --systemQuinary-vibrant: rgba(0,0,0,.1);
        --systemQuinary-onLight: rgba(0,0,0,.1);
        --systemQuinary-onDark: hsla(0,0%,100%,.1);
        --systemGray2: #8e8e93;
        --systemGray2-onLight: #8e8e93;
        --systemGray2-onDark: #7c7c80;
        --systemGray3: #aeaeb2;
        --systemGray3-onLight: #aeaeb2;
        --systemGray3-onDark: #545456;
        --systemGray4: #bcbcc0;
        --systemGray4-onLight: #bcbcc0;
        --systemGray4-onDark: #444446;
        --systemGray5: #d8d8dc;
        --systemGray5-onLight: #d8d8dc;
        --systemGray5-onDark: #363638;
        --systemGray6: #ebebf0;
        --systemGray6-onLight: #ebebf0;
        --systemGray6-onDark: #242426;
        --keyColor: #d60017;
        --keyColor-rgb: 214,0,23;
        --keyColor-rollover: #a20000;
        --keyColor-rollover-rgb: 162,0,0;
        --keyColor-pressed: #b00;
        --keyColor-pressed-rgb: 187,0,0;
        --keyColor-deepPressed: #a20000;
        --keyColor-deepPressed-rgb: 162,0,0;
        --keyColor-disabled: rgba(214,0,23,.25);
        --systemStandardUltrathinMaterialSover: #d2d2d2;
        --systemStandardUltrathinMaterialSover-inactive: #ececec;
        --systemStandardThinMaterialSover: #dcdcdc;
        --systemStandardThinMaterialSover-inactive: #ececec;
        --systemStandardMediumMaterialSover: #e6e6e6;
        --systemStandardMediumMaterialSover-inactive: #ececec;
        --systemStandardThickMaterialSover: #f0f0f0;
        --systemStandardThickMaterialSover-inactive: #ececec;
        --systemStandardUltrathickMaterialSover: #fafafa;
        --systemStandardUltrathickMaterialSover-inactive: #ececec;
        --systemHeaderMaterialSover: #fff;
        --systemToolbarTitlebarMaterialSover: #fff;
        --systemToolbarTitlebarMaterialSover-inactive: #ececec;
        --miniPlayerBackground: #fafafa;
        --playerBackgroundFallback: #fafafa;
        --playerBackground: #fafafa;
        --navSidebarBG: #fafafa;
        --segmentedControlBG: rgba(0,0,0,.2);
        --segmentedControlSelectedText: #000;
        --segmentedControlActiveBG: #d9d9d9;
        --musicKeyColor: #d60017;
        --musicKeyColor-rollover: #a20000;
        --musicKeyColor-pressed: #b00;
        --musicKeyColor-deepPressed: #a20000;
        --musicKeyColor-disabled: rgba(214,0,23,.25);
        --tracklistAltRowColor: rgba(0,0,0,.05);
        --tracklistHoverColor: rgba(0,0,0,.1);
        --tracklistWorksTrackHoverColor: rgba(0,0,0,.18);
        --keyColorBG: #d60017;
        --selectionColor: #d60017
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --systemRed:#ff453a;
        --systemRed-vibrant: #ff4f44;
        --systemRed-default_IC: #ff6961;
        --systemRed-vibrant_IC: #ff4136;
        --systemOrange: #ff9f0a;
        --systemOrange-vibrant: #ffa914;
        --systemOrange-default_IC: #ffb340;
        --systemOrange-vibrant_IC: #ffb340;
        --systemYellow: #ffd60a;
        --systemYellow-vibrant: #ffe014;
        --systemYellow-default_IC: #ffd426;
        --systemYellow-vibrant_IC: #ffd426;
        --systemGreen: #32d74b;
        --systemGreen-vibrant: #3ce155;
        --systemGreen-default_IC: #31de4b;
        --systemGreen-vibrant_IC: #31de4b;
        --systemMint: #63e6e2;
        --systemMint-vibrant: #6ce0db;
        --systemMint-default_IC: #63e6e2;
        --systemMint-vibrant_IC: #63e6e2;
        --systemTeal: #6ac4dc;
        --systemTeal-vibrant: #44d4ed;
        --systemTeal-default_IC: #5de6ff;
        --systemTeal-vibrant_IC: #5de6ff;
        --systemCyan: #5ac8f5;
        --systemCyan-vibrant: #5acdfa;
        --systemCyan-default_IC: #70d7ff;
        --systemCyan-vibrant_IC: #70d7ff;
        --systemBlue: #0a84ff;
        --systemBlue-vibrant: #148eff;
        --systemBlue-default_IC: #409cff;
        --systemBlue-vibrant_IC: #409cff;
        --systemBlue-rollover: #47c1ff;
        --systemBlue-pressed: #38b2ff;
        --systemBlue-deepPressed: #47c1ff;
        --systemBlue-disabled: rgba(10,132,255,.5);
        --systemIndigo: #5e5ce6;
        --systemIndigo-vibrant: #6361f2;
        --systemIndigo-default_IC: #7d7aff;
        --systemIndigo-vibrant_IC: #7d7aff;
        --systemPurple: #bf5af2;
        --systemPurple-vibrant: #cc65ff;
        --systemPurple-default_IC: #da8fff;
        --systemPurple-vibrant_IC: #da8fff;
        --systemPink: #ff375f;
        --systemPink-vibrant: #ff4169;
        --systemPink-default_IC: #ff6482;
        --systemPink-vibrant_IC: #ff3a5f;
        --systemBrown: #ac8e68;
        --systemBrown-vibrant: #b69872;
        --systemBrown-default_IC: #b59469;
        --systemBrown-vibrant_IC: #b59469;
        --systemGray: #98989d;
        --systemGray-vibrant: #a2a2a7;
        --systemGray-default_IC: #98989d;
        --systemGray-vibrant_IC: #98989d;
        --systemPrimary: hsla(0,0%,100%,.85);
        --systemPrimary-vibrant: #e5e5e5;
        --systemPrimary-onLight: rgba(0,0,0,.85);
        --systemPrimary-onDark: hsla(0,0%,100%,.85);
        --systemPrimary-default_IC: #fff;
        --systemPrimary-vibrant_IC: #fff;
        --systemPrimary-onLight_IC: #000;
        --systemPrimary-onDark_IC: #fff;
        --systemSecondary: hsla(0,0%,100%,.55);
        --systemSecondary-vibrant: #7c7c7c;
        --systemSecondary-onLight: rgba(0,0,0,.5);
        --systemSecondary-onDark: hsla(0,0%,100%,.55);
        --systemSecondary-default_IC: hsla(0,0%,100%,.7);
        --systemSecondary-vibrant_IC: hsla(0,0%,100%,.7);
        --systemSecondary-onLight_IC: rgba(0,0,0,.76);
        --systemSecondary-onDark_IC: hsla(0,0%,100%,.7);
        --systemTertiary: hsla(0,0%,100%,.25);
        --systemTertiary-vibrant: #414141;
        --systemTertiary-onLight: rgba(0,0,0,.25);
        --systemTertiary-onDark: hsla(0,0%,100%,.25);
        --systemTertiary-default_IC: hsla(0,0%,100%,.5);
        --systemTertiary-vibrant_IC: hsla(0,0%,100%,.5);
        --systemTertiary-onLight_IC: rgba(0,0,0,.56);
        --systemTertiary-onDark_IC: hsla(0,0%,100%,.5);
        --systemQuaternary: hsla(0,0%,100%,.1);
        --systemQuaternary-vibrant: #232323;
        --systemQuaternary-onLight: rgba(0,0,0,.1);
        --systemQuaternary-onDark: hsla(0,0%,100%,.1);
        --systemQuaternary-default_IC: hsla(0,0%,100%,.3);
        --systemQuaternary-vibrant_IC: hsla(0,0%,100%,.3);
        --systemQuaternary-onLight_IC: rgba(0,0,0,.35);
        --systemQuaternary-onDark_IC: hsla(0,0%,100%,.3);
        --systemQuinary: hsla(0,0%,100%,.05);
        --systemQuinary-vibrant: #080808;
        --systemQuinary-onLight: rgba(0,0,0,.05);
        --systemQuinary-onDark: hsla(0,0%,100%,.05);
        --systemQuinary-default_IC: hsla(0,0%,100%,.1);
        --systemQuinary-vibrant_IC: hsla(0,0%,100%,.1);
        --systemQuinary-onLight_IC: rgba(0,0,0,.1);
        --systemQuinary-onDark_IC: hsla(0,0%,100%,.1);
        --systemGray2: #636366;
        --systemGray2-onLight: #aeaeb2;
        --systemGray2-onDark: #636366;
        --systemGray2-default_IC: #7c7c80;
        --systemGray2-onLight_IC: #8e8e93;
        --systemGray2-onDark_IC: #7c7c80;
        --systemGray3: #48484a;
        --systemGray3-onLight: #c7c7cc;
        --systemGray3-onDark: #48484a;
        --systemGray3-default_IC: #545456;
        --systemGray3-onLight_IC: #aeaeb2;
        --systemGray3-onDark_IC: #545456;
        --systemGray4: #3a3a3c;
        --systemGray4-onLight: #d1d1d6;
        --systemGray4-onDark: #3a3a3c;
        --systemGray4-default_IC: #444446;
        --systemGray4-onLight_IC: #bcbcc0;
        --systemGray4-onDark_IC: #444446;
        --systemGray5: #2c2c2e;
        --systemGray5-onLight: #e5e5ea;
        --systemGray5-onDark: #2c2c2e;
        --systemGray5-default_IC: #363638;
        --systemGray5-onLight_IC: #d8d8dc;
        --systemGray5-onDark_IC: #363638;
        --systemGray6: #1c1c1e;
        --systemGray6-onLight: #f2f2f7;
        --systemGray6-onDark: #1c1c1e;
        --systemGray6-default_IC: #242426;
        --systemGray6-onLight_IC: #ebebf0;
        --systemGray6-onDark_IC: #242426;
        --keyColor: #fa2d48;
        --keyColor-rgb: 250,45,72;
        --keyColor-rollover: #ff5f7a;
        --keyColor-rollover-rgb: 255,95,122;
        --keyColor-pressed: #ff4661;
        --keyColor-pressed-rgb: 255,70,97;
        --keyColor-deepPressed: #ff5f7a;
        --keyColor-deepPressed-rgb: 255,95,122;
        --keyColor-disabled: rgba(250,45,72,.35);
        --keyColor-default_IC: #fa586a;
        --keyColor-default_IC-rgb: 250,88,106;
        --keyColor-rollover_IC: #ff8a9c;
        --keyColor-rollover_IC-rgb: 255,138,156;
        --keyColor-pressed_IC: #ff7183;
        --keyColor-pressed_IC-rgb: 255,113,131;
        --keyColor-deepPressed_IC: #ff8a9c;
        --keyColor-deepPressed_IC-rgb: 255,138,156;
        --keyColor-disabled_IC: rgba(250,88,106,.35);
        --systemStandardUltrathinMaterialSover: rgba(40,40,40,.4);
        --systemStandardUltrathinMaterialSover-inactive: #282828;
        --systemStandardUltrathinMaterialSover-default_IC: #000;
        --systemStandardUltrathinMaterialSover-inactive_IC: #141414;
        --systemStandardThinMaterialSover: rgba(40,40,40,.5);
        --systemStandardThinMaterialSover-inactive: #282828;
        --systemStandardThinMaterialSover-default_IC: #0a0a0a;
        --systemStandardThinMaterialSover-inactive_IC: #141414;
        --systemStandardMediumMaterialSover: rgba(40,40,40,.6);
        --systemStandardMediumMaterialSover-inactive: #282828;
        --systemStandardMediumMaterialSover-default_IC: #141414;
        --systemStandardMediumMaterialSover-inactive_IC: #141414;
        --systemStandardThickMaterialSover: rgba(40,40,40,.7);
        --systemStandardThickMaterialSover-inactive: #282828;
        --systemStandardThickMaterialSover-default_IC: #1e1e1e;
        --systemStandardThickMaterialSover-inactive_IC: #141414;
        --systemStandardUltrathickMaterialSover: rgba(40,40,40,.8);
        --systemStandardUltrathickMaterialSover-inactive: #282828;
        --systemStandardUltrathickMaterialSover-default_IC: #282828;
        --systemStandardUltrathickMaterialSover-inactive_IC: #141414;
        --systemHeaderMaterialSover: rgba(30,30,30,.8);
        --systemHeaderMaterialSover-default_IC: #1e1e1e;
        --systemToolbarTitlebarMaterialSover: rgba(60,60,60,.8);
        --systemToolbarTitlebarMaterialSover-inactive: #282828;
        --systemToolbarTitlebarMaterialSover-default_IC: #262626;
        --systemToolbarTitlebarMaterialSover-inactive_IC: #141414;
        --labelDivider: hsla(0,0%,100%,.1);
        --vibrantDivider: rgba(235,235,245,.19);
        --pageBG: #1f1f1f;
        --pageBG-rgb: 31,31,31;
        --shelfBG: hsla(0,0%,100%,.05);
        --genericJoeColor: #323232;
        --fallbackMaterialBG: rgba(31,31,31,.97);
        --liveBadgePlatterBG: #ff5066;
        --cardHoverColor: hsla(240,3%,49%,.41);
        --contextMenuBorderColor: hsla(0,0%,100%,.1);
        --contextMenuTextColor: hsla(0,0%,100%,.85);
        --contextMenuOverrideTextColor: #ff3b30;
        --dialogShadowColor: rgba(0,0,0,.55);
        --footerBg: #323232;
        --opaqueShelfBG: #2b2b2b;
        --shelfLockupPlayHover: #aeaeb2;
        --lockupHoverBGColor: rgba(51,51,51,.3);
        --lockupChinScrim: rgba(0,0,0,.2);
        --mobileNavigationBG: #2e2e2e;
        --miniPlayerBackground: rgba(37,37,37,.9);
        --miniPlayerBackground-default_IC: #282828;
        --playerBackgroundFallback: rgba(45,45,45,.97);
        --playerBackgroundFallback-default_IC: #282828;
        --playerBackground: rgba(45,45,45,.88);
        --playerBackground-default_IC: #282828;
        --navSidebarBG: rgba(235,235,245,.03);
        --navSidebarBG-default_IC: #282828;
        --navSidebarSelectedState: rgba(235,235,245,.1);
        --searchBoxIconFill: hsla(0,0%,100%,.9);
        --bannerDarkGray: #444;
        --dropdownBackground: #575757;
        --dropdownLightGray: #707070;
        --dropdownLightGrayIcon: #999;
        --dropdownActiveOutlineColor: #06c;
        --dropdownActiveOutlineColorShadow: rgba(0,102,204,.6);
        --radiosityShadowColor: rgba(0,0,0,.3);
        --searchBarBorderColor: hsla(0,0%,100%,.15);
        --modalScrimColor: rgba(0,0,0,.45);
        --segmentedControlBG: hsla(240,4%,48%,.24);
        --segmentedControlBG-default_IC: hsla(0,0%,100%,.24);
        --segmentedControlSelectedText: hsla(0,0%,100%,.85);
        --segmentedControlSelectedText-default_IC: #000;
        --segmentedControlSelectedBG: #636366;
        --segmentedControlSelectedBG-default_IC: #fff;
        --segmentedControlActiveBG: #747477;
        --segmentedControlActiveBG-default_IC: rgba(255,255,240,.9);
        --segmentedControlSelectedShadow1: transparent;
        --segmentedControlSelectedShadow2: transparent;
        --modalCloseButtonBGColor: #333336;
        --modalCloseButtonBGColor-rollover: #37373a;
        --modalCloseButtonBGColor-pressed: #2f2f32;
        --musicKeyColor: #fa2d48;
        --musicKeyColor-rollover: #ff5f7a;
        --musicKeyColor-pressed: #ff4661;
        --musicKeyColor-deepPressed: #ff5f7a;
        --musicKeyColor-disabled: rgba(250,45,72,.35);
        --musicKeyColor-default_IC: #fa586a;
        --musicKeyColor-rollover_IC: #ff8a9c;
        --musicKeyColor-pressed_IC: #ff7183;
        --musicKeyColor-deepPressed_IC: #ff8a9c;
        --musicKeyColor-disabled_IC: rgba(250,88,106,.35);
        --circularArtistHeaderGradientBottom: hsla(0,0%,100%,.03);
        --fallbackButtonMaterial: hsla(240,2%,61%,.8);
        --playerMissingArtworkIcon: #434343;
        --playerMissingArtworkBg: #323232;
        --playerPlatterButtonBGFill: #fff;
        --playerPlatterButtonIconFill: rgba(0,0,0,.7);
        --stickyHeaderDropShadow2: rgba(0,0,0,.1);
        --stickyHeaderInnerShadow: hsla(0,0%,100%,.1);
        --tracklistAltRowColor: hsla(0,0%,100%,.015);
        --tracklistAltRowColor-default_IC: hsla(0,0%,100%,.05);
        --tracklistHoverColor: hsla(0,0%,100%,.06);
        --tracklistHoverColor-default_IC: hsla(0,0%,100%,.1);
        --tracklistWorksTrackHoverColor: hsla(0,0%,100%,.1);
        --tracklistWorksTrackHoverColor-default_IC: hsla(0,0%,100%,.18);
        --trackLockupArtworkOverlay: rgba(51,51,51,.3);
        --lyricsBg: #2d2d2d;
        --nowPlayingBackdropBG: #878787;
        --tracklistBadgeBorderColor: #232323;
        --tracklistBadgeBackgroundColor: #4d4d4d;
        --keyColorBG: #fa233b;
        --keyColorBG-default_IC: #d60017;
        --selectionColor: #c11b2e;
        --selectionColor-default_IC: #a60012;
        --trackBackgroundEven: hsla(0,0%,100%,.05);
        --librarySongsTrackInactiveBG: rgba(255,255,240,.12);
        --profileBadgeBG: #e2e4e7
    }

    @supports not (font: -apple-system-body) {
        :root {
            --systemPrimary:hsla(0,0%,100%,.92);
            --systemPrimary-vibrant: #f5f5f7;
            --systemPrimary-onLight: rgba(0,0,0,.88);
            --systemPrimary-onDark: hsla(0,0%,100%,.92);
            --systemSecondary: hsla(0,0%,100%,.64);
            --systemSecondary-vibrant: #a1a1a6;
            --systemSecondary-onLight: rgba(0,0,0,.56);
            --systemSecondary-onDark: hsla(0,0%,100%,.64);
            --systemTertiary: hsla(0,0%,100%,.4);
            --systemTertiary-vibrant: #6e6e73;
            --systemTertiary-onLight: rgba(0,0,0,.48);
            --systemTertiary-onDark: hsla(0,0%,100%,.4);
            --keyColor: #fa586a;
            --keyColor-rgb: 250,88,106;
            --keyColor-rollover: #ff8a9c;
            --keyColor-rollover-rgb: 255,138,156;
            --keyColor-pressed: #ff7183;
            --keyColor-pressed-rgb: 255,113,131;
            --keyColor-deepPressed: #ff8a9c;
            --keyColor-deepPressed-rgb: 255,138,156;
            --keyColor-disabled: rgba(250,88,106,.35);
            --musicKeyColor: #fa586a;
            --musicKeyColor-rollover: #ff8a9c;
            --musicKeyColor-pressed: #ff7183;
            --musicKeyColor-deepPressed: #ff8a9c;
            --musicKeyColor-disabled: rgba(250,88,106,.35);
            --keyColorBG: #d60017;
            --selectionColor: #a60012
        }
    }

    :root .increase-contrast {
        --systemRed: #ff6961;
        --systemRed-vibrant: #ff4136;
        --systemOrange: #ffb340;
        --systemOrange-vibrant: #ffb340;
        --systemYellow: #ffd426;
        --systemYellow-vibrant: #ffd426;
        --systemGreen: #31de4b;
        --systemGreen-vibrant: #31de4b;
        --systemMint: #63e6e2;
        --systemMint-vibrant: #63e6e2;
        --systemTeal: #5de6ff;
        --systemTeal-vibrant: #5de6ff;
        --systemCyan: #70d7ff;
        --systemCyan-vibrant: #70d7ff;
        --systemBlue: #409cff;
        --systemBlue-vibrant: #409cff;
        --systemIndigo: #7d7aff;
        --systemIndigo-vibrant: #7d7aff;
        --systemPurple: #da8fff;
        --systemPurple-vibrant: #da8fff;
        --systemPink: #ff6482;
        --systemPink-vibrant: #ff3a5f;
        --systemBrown: #b59469;
        --systemBrown-vibrant: #b59469;
        --systemGray: #98989d;
        --systemGray-vibrant: #98989d;
        --systemPrimary: #fff;
        --systemPrimary-vibrant: #fff;
        --systemPrimary-onLight: #000;
        --systemPrimary-onDark: #fff;
        --systemSecondary: hsla(0,0%,100%,.7);
        --systemSecondary-vibrant: hsla(0,0%,100%,.7);
        --systemSecondary-onLight: rgba(0,0,0,.76);
        --systemSecondary-onDark: hsla(0,0%,100%,.7);
        --systemTertiary: hsla(0,0%,100%,.5);
        --systemTertiary-vibrant: hsla(0,0%,100%,.5);
        --systemTertiary-onLight: rgba(0,0,0,.56);
        --systemTertiary-onDark: hsla(0,0%,100%,.5);
        --systemQuaternary: hsla(0,0%,100%,.3);
        --systemQuaternary-vibrant: hsla(0,0%,100%,.3);
        --systemQuaternary-onLight: rgba(0,0,0,.35);
        --systemQuaternary-onDark: hsla(0,0%,100%,.3);
        --systemQuinary: hsla(0,0%,100%,.1);
        --systemQuinary-vibrant: hsla(0,0%,100%,.1);
        --systemQuinary-onLight: rgba(0,0,0,.1);
        --systemQuinary-onDark: hsla(0,0%,100%,.1);
        --systemGray2: #7c7c80;
        --systemGray2-onLight: #8e8e93;
        --systemGray2-onDark: #7c7c80;
        --systemGray3: #545456;
        --systemGray3-onLight: #aeaeb2;
        --systemGray3-onDark: #545456;
        --systemGray4: #444446;
        --systemGray4-onLight: #bcbcc0;
        --systemGray4-onDark: #444446;
        --systemGray5: #363638;
        --systemGray5-onLight: #d8d8dc;
        --systemGray5-onDark: #363638;
        --systemGray6: #242426;
        --systemGray6-onLight: #ebebf0;
        --systemGray6-onDark: #242426;
        --keyColor: #fa586a;
        --keyColor-rgb: 250,88,106;
        --keyColor-rollover: #ff8a9c;
        --keyColor-rollover-rgb: 255,138,156;
        --keyColor-pressed: #ff7183;
        --keyColor-pressed-rgb: 255,113,131;
        --keyColor-deepPressed: #ff8a9c;
        --keyColor-deepPressed-rgb: 255,138,156;
        --keyColor-disabled: rgba(250,88,106,.35);
        --systemStandardUltrathinMaterialSover: #000;
        --systemStandardUltrathinMaterialSover-inactive: #141414;
        --systemStandardThinMaterialSover: #0a0a0a;
        --systemStandardThinMaterialSover-inactive: #141414;
        --systemStandardMediumMaterialSover: #141414;
        --systemStandardMediumMaterialSover-inactive: #141414;
        --systemStandardThickMaterialSover: #1e1e1e;
        --systemStandardThickMaterialSover-inactive: #141414;
        --systemStandardUltrathickMaterialSover: #282828;
        --systemStandardUltrathickMaterialSover-inactive: #141414;
        --systemHeaderMaterialSover: #1e1e1e;
        --systemToolbarTitlebarMaterialSover: #262626;
        --systemToolbarTitlebarMaterialSover-inactive: #141414;
        --miniPlayerBackground: #282828;
        --playerBackgroundFallback: #282828;
        --playerBackground: #282828;
        --navSidebarBG: #282828;
        --segmentedControlBG: hsla(0,0%,100%,.24);
        --segmentedControlSelectedText: #000;
        --segmentedControlSelectedBG: #fff;
        --segmentedControlActiveBG: rgba(255,255,240,.9);
        --musicKeyColor: #fa586a;
        --musicKeyColor-rollover: #ff8a9c;
        --musicKeyColor-pressed: #ff7183;
        --musicKeyColor-deepPressed: #ff8a9c;
        --musicKeyColor-disabled: rgba(250,88,106,.35);
        --tracklistAltRowColor: hsla(0,0%,100%,.05);
        --tracklistHoverColor: hsla(0,0%,100%,.1);
        --tracklistWorksTrackHoverColor: hsla(0,0%,100%,.18);
        --keyColorBG: #d60017;
        --selectionColor: #a60012
    }
}

@media (prefers-color-scheme: dark) and (prefers-contrast:more) {
    :root {
        --systemRed:#ff6961;
        --systemRed-vibrant: #ff4136;
        --systemOrange: #ffb340;
        --systemOrange-vibrant: #ffb340;
        --systemYellow: #ffd426;
        --systemYellow-vibrant: #ffd426;
        --systemGreen: #31de4b;
        --systemGreen-vibrant: #31de4b;
        --systemMint: #63e6e2;
        --systemMint-vibrant: #63e6e2;
        --systemTeal: #5de6ff;
        --systemTeal-vibrant: #5de6ff;
        --systemCyan: #70d7ff;
        --systemCyan-vibrant: #70d7ff;
        --systemBlue: #409cff;
        --systemBlue-vibrant: #409cff;
        --systemIndigo: #7d7aff;
        --systemIndigo-vibrant: #7d7aff;
        --systemPurple: #da8fff;
        --systemPurple-vibrant: #da8fff;
        --systemPink: #ff6482;
        --systemPink-vibrant: #ff3a5f;
        --systemBrown: #b59469;
        --systemBrown-vibrant: #b59469;
        --systemGray: #98989d;
        --systemGray-vibrant: #98989d;
        --systemPrimary: #fff;
        --systemPrimary-vibrant: #fff;
        --systemPrimary-onLight: #000;
        --systemPrimary-onDark: #fff;
        --systemSecondary: hsla(0,0%,100%,.7);
        --systemSecondary-vibrant: hsla(0,0%,100%,.7);
        --systemSecondary-onLight: rgba(0,0,0,.76);
        --systemSecondary-onDark: hsla(0,0%,100%,.7);
        --systemTertiary: hsla(0,0%,100%,.5);
        --systemTertiary-vibrant: hsla(0,0%,100%,.5);
        --systemTertiary-onLight: rgba(0,0,0,.56);
        --systemTertiary-onDark: hsla(0,0%,100%,.5);
        --systemQuaternary: hsla(0,0%,100%,.3);
        --systemQuaternary-vibrant: hsla(0,0%,100%,.3);
        --systemQuaternary-onLight: rgba(0,0,0,.35);
        --systemQuaternary-onDark: hsla(0,0%,100%,.3);
        --systemQuinary: hsla(0,0%,100%,.1);
        --systemQuinary-vibrant: hsla(0,0%,100%,.1);
        --systemQuinary-onLight: rgba(0,0,0,.1);
        --systemQuinary-onDark: hsla(0,0%,100%,.1);
        --systemGray2: #7c7c80;
        --systemGray2-onLight: #8e8e93;
        --systemGray2-onDark: #7c7c80;
        --systemGray3: #545456;
        --systemGray3-onLight: #aeaeb2;
        --systemGray3-onDark: #545456;
        --systemGray4: #444446;
        --systemGray4-onLight: #bcbcc0;
        --systemGray4-onDark: #444446;
        --systemGray5: #363638;
        --systemGray5-onLight: #d8d8dc;
        --systemGray5-onDark: #363638;
        --systemGray6: #242426;
        --systemGray6-onLight: #ebebf0;
        --systemGray6-onDark: #242426;
        --keyColor: #fa586a;
        --keyColor-rgb: 250,88,106;
        --keyColor-rollover: #ff8a9c;
        --keyColor-rollover-rgb: 255,138,156;
        --keyColor-pressed: #ff7183;
        --keyColor-pressed-rgb: 255,113,131;
        --keyColor-deepPressed: #ff8a9c;
        --keyColor-deepPressed-rgb: 255,138,156;
        --keyColor-disabled: rgba(250,88,106,.35);
        --systemStandardUltrathinMaterialSover: #000;
        --systemStandardUltrathinMaterialSover-inactive: #141414;
        --systemStandardThinMaterialSover: #0a0a0a;
        --systemStandardThinMaterialSover-inactive: #141414;
        --systemStandardMediumMaterialSover: #141414;
        --systemStandardMediumMaterialSover-inactive: #141414;
        --systemStandardThickMaterialSover: #1e1e1e;
        --systemStandardThickMaterialSover-inactive: #141414;
        --systemStandardUltrathickMaterialSover: #282828;
        --systemStandardUltrathickMaterialSover-inactive: #141414;
        --systemHeaderMaterialSover: #1e1e1e;
        --systemToolbarTitlebarMaterialSover: #262626;
        --systemToolbarTitlebarMaterialSover-inactive: #141414;
        --miniPlayerBackground: #282828;
        --playerBackgroundFallback: #282828;
        --playerBackground: #282828;
        --navSidebarBG: #282828;
        --segmentedControlBG: hsla(0,0%,100%,.24);
        --segmentedControlSelectedText: #000;
        --segmentedControlSelectedBG: #fff;
        --segmentedControlActiveBG: rgba(255,255,240,.9);
        --musicKeyColor: #fa586a;
        --musicKeyColor-rollover: #ff8a9c;
        --musicKeyColor-pressed: #ff7183;
        --musicKeyColor-deepPressed: #ff8a9c;
        --musicKeyColor-disabled: rgba(250,88,106,.35);
        --tracklistAltRowColor: hsla(0,0%,100%,.05);
        --tracklistHoverColor: hsla(0,0%,100%,.1);
        --tracklistWorksTrackHoverColor: hsla(0,0%,100%,.18);
        --keyColorBG: #d60017;
        --selectionColor: #a60012
    }
}



.link:disabled,a:disabled {
    opacity: .32
}

:root {
    --viewport-default: "xsmall"
}

@media only screen and (min-width: 1000px) {
    :root {
        --viewport-default:"small"
    }
}

@media only screen and (min-width: 1260px) {
    :root {
        --viewport-default:"medium"
    }
}

@media only screen and (min-width: 1580px) {
    :root {
        --viewport-default:"large"
    }
}

@media only screen and (min-width: 1940px) {
    :root {
        --viewport-default:"xlarge"
    }
}

button:disabled {
    cursor: default
}

.padding-big{
    padding-bottom: 12px;
}
#errorReports .error-report {
    position: relative;
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#errorReports .error-report:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#fileContentPanel {
    z-index: 50;
}
#fileContent {
    white-space: pre-wrap;
    word-wrap: break-word;
}
#resizeHandle {
    z-index: 100;
}

.error-report h5 {
@apply text-lg font-medium text-gray-900 mb-2;
}

.error-details {
@apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4;
}

.error-detail-box {
@apply bg-gray-100 p-2 rounded-md;
}

.error-detail-box dt {
@apply font-medium text-gray-700;
}

.error-detail-box dd {
    @apply text-gray-500;
}
.backdrop {
    backdrop-filter: blur(5px);
}

.light{
    transition:  all 0.4s ease-in-out;
}
.light .text-white-d{
    color: #343a42;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 2rem;
}
.backups-button{
    cursor: pointer;
}
.spinner {
    width: 36px;
    height: 36px;
    border: 4px dotted transparent;
    border-radius: 50%;
    border-top-color: #09f;
    animation: spin 1s ease-in-out infinite;
}
.animation-slidein{
    animation: slideIn 0.4s ease-in-out;
}

@keyframes slideIn {
    0%{
        transform: translateY(20px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity:100;
    }
}

.animation-slideTab{
    animation: slideTab 0.4s ease-in-out;
}

@keyframes slideTab {
    0%{
        transform: translateX(10px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity:100;
    }
}

@keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}

.dark {
    transition:  all 0.4s ease-in-out;
    background-color: #121212;
    color: #e0e0e0;
}

.dark .bg-white {
    background-color: #1e1e1e !important;
}

.dark .text-gray-800 {
    color: #e0e0e0 !important;
}
.dark .text-gray-700{
    color: #e0e0e0 !important;
}
.dark .border-gray-200 {
    border-color: #333333 !important;
}

.dark .bg-gray-100 {
    background-color: #1e1e1e !important;
}

.dark .text-gray-500 {
    color: #818181 !important;
}

.dark .bg-gray-300{
    background-color: #333333 !important;
}

.dark .bg-gray-50{
    background-color: #2e2e2e !important;
}

.dark .bg-gray-200{
    background-color: #2e2e2e !important;
}

.dark .bg-gray-300 {
    background-color: #333333 !important;
}

.dark .bg-green-600 {
    background-color: #2e7d32 !important;
}

.dark .bg-blue-600 {
    background-color: #1565c0 !important;
}

.dark .bg-red-500 {
    background-color: #c62828 !important;
}

.dark .bg-blue-500 {
    background-color: #1e88e5 !important;
}

.dark .border-gray-300 {
    border-color: #555555 !important;
}

.dark .bg-gray-900 {
    background-color: #0d0d0d !important;
}

.dark .text-gray-200 {
    color: #eeeeee !important;
}

.dark .btn-primary {
    background-color: #1e88e5;
    color: #ffffff;
}

.dark .btn-secondary {
    background-color: #333333;
    color: #ffffff;
}

.dark .search-input {
    background-color: #2e2e2e;
    color: #e0e0e0;
    border-color: #555555;
}

.dark .progress-bar {
    background-color: #444444;
}

.dark .progress-fill {
    background-color: #1e88e5;
}

.dark .card {
    background-color: #1e1e1e;
    border-color: #333333;
}

.dark .widget-header {
    border-bottom-color: #333333;
}

.dark .text-sm {
    color: #eeeeee;
}

.dark .text-lg {
    color: #e0e0e0;
}
/* Toggle switch styles */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.relative {
    position: relative;
}

.block {
    display: block;
}

.w-10 {
    width: 2.5rem;
}

.h-6 {
    height: 1.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.bg-gray-300 {
    background-color: #d1d5db;
}

.absolute {
    position: absolute;
}
.backup-item{
    background-color: #1e1e1e;
}
.left-1 {
    left: 0.25rem;
}

.top-1 {
    top: 0.25rem;
}

.bg-white {
    background-color: #ffffff;
}

.w-4 {
    width: 1rem;
}

.h-4 {
    height: 1rem;
}

.transition {
    transition: all 0.3s ease;
}

.ml-3 {
    margin-left: 0.75rem;
}

.checked .dot {
    transform: translateX(1.5rem);
}

.checked .block {
    background-color: #4a5568;
}
.checked .dot {
    transform: translateX(1.5rem);
}

.checked .block {
    background-color: #4a5568;
}

.sidebar {
    transition: all 0.3s;
}

.sidebar.collapsed {
    width: 64px;
}

.sidebar.collapsed .sidebar-item-text {
    display: none;
}

.sidebar.collapsed .sidebar-icon {
    margin: 0 auto;
}

.sidebar.collapsed .sidebar-logo {
    display: none;
}

.sidebar.collapsed .sidebar-toggle {
    display: none;
}

.sidebar-expanded .sidebar-item-text {
    display: inline;
}
.sidebar-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.backdrop-blur-lg {
    backdrop-filter: blur(64px);
}

.sidebar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.light{
    .bg-gray-900{
        background-color: #fff;
    }
    .text-gray-900{
       color: rgb(205 205 205);
    }
}

.sidebar-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.sidebar-item-text {
    font-size: 1rem;
}
[x-cloak] { display: none; }
.tab-button.active {
    background-color: #4A5568;
    color: white;
}

[x-cloak] { display: none; }

.header {
    height: 80px;
    background: linear-gradient(90deg, #2d3748, #4a5568);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.toggle-checkbox {
    position: relative;
    width: 40px;
    height: 20px;
    -webkit-appearance: none;
    background-color: #cbd5e0;
    outline: none;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.2s ease-in-out;
}

.toggle-checkbox:checked {
    background-color: #4a5568;
}

.toggle-checkbox:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.2s ease-in-out;
}

.toggle-checkbox:checked:before {
    transform: translateX(20px);
}

.toggle-checkbox:checked {
    background-color: #4A5568;
    border-color: #4A5568;
}

.sticky-blur {
    position: sticky;
    top: 0;
    z-index: 49;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease-in-out;
    padding: 1rem;
    width: 60%;
    margin-bottom: -2rem;
}

#errorReports .error-report {
    position: relative;
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
#errorReports .error-report:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#fileContentPanel {
    z-index: 50;
}
#codeContent {
    white-space: pre-wrap;
    word-wrap: break-word;
}
#resizeHandle {
    z-index: 100;
}
.right-sidebar {
    background-color: #f7fafc; /* Light gray background */
    box-shadow: -2px 0 5px rgba(0,0,0,0.1); /* Subtle shadow for separation */
}


[x-type=projects] {
    background-color: rgba(255, 255, 255, 0.118);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease-in-out;
    margin-left: 20px;
}
.action-btn{
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    min-height: 56px;
}
.dark .action-btn:hover {
    background: linear-gradient(45deg, #222222, transparent);;
    box-shadow: 2px 0 3px rgba(0,0,0,0.2); 
}

.action-btn:hover {
    background: linear-gradient(45deg, #ededed, transparent);;
    box-shadow: 2px 0 3px rgba(0,0,0,0.2); 
}
.cursor-pointer{
    cursor: pointer;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' -25,
    'opsz' 80
}

.fill{
    font-variation-settings:
    'FILL' 1,
    'wght' 200,
    'GRAD' -25,
    'opsz' 80
}
.options-menu {
    position: absolute;
    top: 198%;
    right: 1rem;
    transform: translateY(-50%);
    display: none;
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.page{
    .side-panel {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        height: 100%;
        background-color: white;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
        padding: 2rem;
    }

    .side-panel.open {
        right: 0;
    }

    .side-panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        background-color: #f9fafb;
        padding: 1rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .side-panel-header h2 {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .side-panel-header i {
        font-size: 1.5rem;
        color: #3b82f6;
    }

    .side-panel-header .close-panel {
        font-size: 1.5rem;
        cursor: pointer;
        color: #6b7280;
        transition: color 0.2s ease;
    }

    .side-panel-header .close-panel:hover {
        color: #000;
    }

    .side-panel-content {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .side-panel-content h3 {
        margin-top: 0.3999999999999999rem;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .side-panel-content p {
        font-size: 1rem;
        color: #6b7280;
    }

    .close-panel {
        font-size: 1.5rem;
        cursor: pointer;
        color: #6b7280;
        transition: color 0.2s ease;
    }

    .close-panel:hover {
        color: #000;
    }

    .file-preview {
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        overflow: hidden;
        margin-top: 1rem;
    }

    .file-preview img {
        width: 100%;
        height: auto;
    }

    .file-preview iframe {
        width: 100%;
        height: 300px;
    }
}
.loading-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #3498db;
    animation: spin 1s infinite linear;
    z-index: 1000;
    display: none; /* Initially hidden */
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.options-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.options-menu.hide {
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
}

.options-menu-item {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.options-menu-item:hover {
    background-color: #f3f4f6;
}



@keyframes heightExpand {
    0%{
        height: 0%;
    }
    100%{
        height: 100%;
    }
}

.side-panel-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
}

.side-panel-actions button {
    padding: 0.5rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-download {
    width: 75%;
}

.btn-download:hover {
    background-color: #eee;
    color: rgb(29, 29, 29);
}
.side-panel-actions.fixed.bottom-0 {
    width: 27%;
}
.btn-public {
    width: 63%;
    background-color: #10b981;
    color: white;
}

.btn-public:hover {
    background-color: #059669;
}

.file-item:hover .options-menu {
    display: block;
}





.aspect-\[4\/3\] {
    aspect-ratio: 4/3
}

.h-4 {
    height: 1rem
}

.w-1\/2 {
    width: 50%
}

.w-3\/4 {
    width: 75%
}

.w-full {
    width: 100%
}


@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}


.bg-background {
    background-color: hsl(var(--background))
}
.dark{
    .bg-muted {
        background-color: hsl(240 5% 25%);
    }
    
    .bg-muted-foreground\/10 {
        background-color: hsl(60 5% 85% / 0.1)
    }
}

.bg-muted {
    background-color: hsl(240deg 4.94% 47.62% / 63%);
}

.bg-muted-foreground\/10 {
    background-color: hsl(0deg 0% 0% / 10%);
}

.bg-background{
    background-color: hsl(0 0% 100%);
}



@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
}

.duration-300 {
    animation-duration: 300ms
}

.duration-150 {
    animation-duration: 150ms
}

#folder-view{
    .card-container{
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        
        span{
            overflow: hidden;
        }
    }
    .card-container:hover{

        transform: scale(0.987);
    }

    .background-card {
        transition: all 0.3s ease-in-out;
        backdrop-filter: blur(59px);
        background: linear-gradient(208deg, #ffffffdb, #ffffff, #ffffff, #ffffffc9);
    }
    

    .card-container:hover{

        .background-card{
            border-radius: 10px 10px 0px 0px;
        }
    }
}

.dark{
    .page{
        .side-panel-content p {
            font-size: 1rem;
            color: #c3c3c3;
        }
    }
        

    .bg-background {
        background-color: hsl(0deg 0% 18.88%);
    }

    #backupList{
        .background-card {
            backdrop-filter: blur(59px);
            background: linear-gradient(208deg, #212121db, #212121, #212121, #000000c9);
        }
        
        .background-card[invite] {
            backdrop-filter: blur(59px);
            background: linear-gradient(208deg, #212121db, #212121, #212121e6, #000000c9);
        }
    }
    

    .file-item {
        background: linear-gradient(145deg, rgb(40 40 40) 0%, rgb(43 43 43) 100%);
        height: max-content !important;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .file-item.expanded {
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    
    .file-item .more-info {
        display: none;
        transition: opacity 0.3s ease, transform 0.3s ease;
        transform: translateY(-50%) scale(0.95);
    }
    
    .file-item.expanded .more-info {
        transform: translateY(0%) scale(1);
        display: block;
        padding-top: 1rem;
    }
    .page{
        
        .side-panel {
            position: fixed;
            top: 0;
            right: -100%;
            width: 60%;
            height: 100%;
            background-color: rgb(40, 40, 40);
            box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 20;
            overflow-y: auto;
            padding: 2rem;
        }
    
        .side-panel.open {
            right: 0;
        }
    
        .side-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            background-color: #3e3e3e;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
    
        .side-panel-header h2 {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: 600;
        }
    
        .side-panel-header i {
            font-size: 1.5rem;
            color: #3b82f6;
        }
    
        .side-panel-header .close-panel {
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
            transition: color 0.2s ease;
        }
    
        .side-panel-header .close-panel:hover {
            color: #000;
        }
    
        .side-panel-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
    
        .side-panel-content h3 {
            margin-top: 0.3999999999999999rem;
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
    
        .side-panel-content p {
            font-size: 1rem;
        }
    
        .close-panel {
            font-size: 1.5rem;
            cursor: pointer;
            color: #6b7280;
            transition: color 0.2s ease;
        }
    
        .close-panel:hover {
            color: #000;
        }
    
        .file-preview {
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-top: 1rem;
        }
    
        .file-preview img {
            width: 100%;
            height: auto;
        }
    
        .file-preview iframe {
            width: 100%;
            height: 300px;
        }
    }
}

#backupList{
    .card-container{
        transition: all 0.3s ease-in-out;
    }
    .card-container:hover{
        transform: scale(0.987);
    }

    .background-card {
        transition: all 0.3s ease-in-out;
        backdrop-filter: blur(59px);
        background: linear-gradient(208deg, #ffffffdb, #ffffff, #ffffff, #ffffffc9);
    }
    

    .card-container:hover{

        .background-card{
            border-radius: 10px 10px 0px 0px;
        }
    }
}

#projectDetails{

    .card{
        box-shadow: inset 1px 1px 9px 0px #e8e8e8;
        border: 2px solid #d8d8d8;
    }
    

    .toggle-switch {
        position: relative;
        width: 42px;
        height: 24px;
    }
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #eee;
        background-color: white;
        transition: .4s;
        border-radius: 24px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: #164a70ab;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        background-color: white;
        box-shadow: 0px 0px 20px 2px #707070;
        transform: translateX(18px);
    }

    input:checked:hover + .slider:before{
        transform: translateX(16px);
    }

    input:hover + .slider:before{
        transform: translateX(2px);
    }
}
  
.dark{
    .inv-shadow {
        transition: all 0.3s ease-in-out;
    }
    
    .inv-shadow:hover {
        box-shadow: inset -1px 1px 11px 0px #424242;    
    }

    #projectDetails, #projectDetails-inv{
        .text-gray-600{
            color:#d8d8d8;
        }
        .card{
            box-shadow: inset 1px 1px 40px 1px #1f2937;
            border: 2px solid #d8d8d8;
        }
        
    
        .toggle-switch {
            position: relative;
            width: 42px;
            height: 24px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: 1px solid #666;
            background-color: #343434;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            left: 4px;
            bottom: 4px;
            background-color: #a5c4daab;;
            transition: .4s;
            border-radius: 50%;
        }
    
        input:checked + .slider {
            background-color: #2196F3;
        }
        input:checked + .slider:before {
            background-color: white;
            box-shadow: 0px 0px 20px 2px #707070;
            transform: translateX(18px);
        }
    
        input:checked:hover + .slider:before{
            transform: translateX(16px);
        }
    
        input:hover + .slider:before{
            transform: translateX(2px);
        }
    }
}


#smp-loading {
    z-index: 1000;
    background: #fff;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: nuxtLoadingIn 10s ease;
    -webkit-animation: nuxtLoadingIn 10s ease;
    animation-fill-mode: forwards;
    overflow: hidden
}

@keyframes nuxtLoadingIn {
    0% {
        visibility: hidden;
        opacity: 0
    }

    20% {
        visibility: visible;
        opacity: 0
    }

    100% {
        visibility: visible;
        opacity: 1
    }
}

@-webkit-keyframes nuxtLoadingIn {
    0% {
        visibility: hidden;
        opacity: 0
    }

    20% {
        visibility: visible;
        opacity: 0
    }

    100% {
        visibility: visible;
        opacity: 1
    }
}

#smp-loading>div,#smp-loading>div:after {
    border-radius: 50%;
    width: 5rem;
    height: 5rem
}

#smp-loading>div {
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border: .5rem solid #f5f5f5;
    border-left: .5rem solid #d3d3d3;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: nuxtLoading 1.1s infinite linear;
    animation: nuxtLoading 1.1s infinite linear
}

#smp-loading.error>div {
    border-left: .5rem solid #ff4500;
    animation-duration: 5s
}

@-webkit-keyframes nuxtLoading {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes nuxtLoading {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.dark{
    #notification-archive{
        background-color: rgb(42 42 42 / 90%);
    }

    .archive-header{
        background-color: #272727;
    }

    #toggle-archive {
        background-color: #272727;
    }
    #toggle-archive:hover {
        background-color: #272727;
    }

    .archived-notification{
        background-color: #2d2d2d;
        border-left-color: #74ddf0 !important;

        .notification-title{
            color: #fff;

        }

        .notification-body{
            color: #eee;
        }
    }

    .archived-notification:hover{
        background-color: #323232;
        border-left-color: #74ddf0 !important;
    }
}

#jwlimited-shared-dx
{
    #progress-bar{
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 4px;
        background-color: #29d;
        z-index: 9999;
        animation: 2s linear 0s infinite normal none running progressBar;
    }
    
}
@keyframes progressBar {
    0% {
        left: 0;
        right: 100%;
        width: -200;
    }
    50% {
        left: 0;
        right: 0;
        width: 100%;
    }
    75% {
        left: 80%;
        right: 0;
        width: 25%;
    }
    100% {
        left: 150%;
        right: 0;
        width: 0;
    }   
}

.invited-project{
    border-left: 7px solid #13a8c4;
}

*:disabled {
    pointer-events: none;
}

*:disabled::after {
    border-radius: 8px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 26%);
    backdrop-filter: blur(10px);
    z-index: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
    opacity: 0.8;
}

*:disabled > * {
    pointer-events: none;
}

input:disabled,
button:disabled {
    opacity: 0.5;
}


.image-container {
    position: relative;
    overflow: hidden;
}
.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}
.image-container img {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.image-container img.loaded {
    opacity: 100;
}

.image-container[image="async-loaded"]::before {
    display: none;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}