@charset "UTF-8";

:root {
    --background: #FFF;
    --color: #000;
    --color-secondary: #040404;
    --color-thirdary: #222;
    --color-mix-opacity: 1;
    --search-icon-opacity: 1;
    --server-icon-opacity: 1;
    --search-box-bg: #FFF;
    --result-page-search-box-bg: #FFF8;
    --result-page-search-box-bg-hover: #FFFB;
    --segmented-control-bg: #FFF7;
    --overlay-bg: rgba(200, 200, 200, .2);
    --overlay-window-bg: #FFFA;
    --sticker-bg: rgb(255, 245, 155);
    --sticker-titlebar-filter: saturate(2) hue-rotate(-12deg) brightness(.98) blur(20px) contrast(.9);
    --sticker-buttons-border-color: #2223;
    --sticker-buttons-bg-color: #FFF9;
    --sticker-shadow: 0px 3px 5px rgba(0, 0, 0, 0.12),
    5px 10px 20px -2px rgba(0, 0, 0, 0.1),
    5px 5px 28px rgba(0, 0, 0, 0.12),
    -5px -5px 18px var(--background);

    /* 🌈 Color Variants */
    --sticky-gray: rgb(230, 230, 230);
    --sticky-pink: rgb(255, 200, 200);
    --sticky-green: rgb(200, 255, 200);
    --sticky-blue: rgb(200, 200, 255);
    --sticky-quan: rgb(184, 254, 255);
    --sticky-yellow: rgb(255, 245, 155);

    --siri-wave-bg: linear-gradient(180deg, #EEED, #FFFD);
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #000;
        --color: #FFF;
        --color-secondary: #EEEC;
        --color-thirdary: #BBBB;
        --color-mix-opacity: 0.4;
        --search-icon-opacity: 0.5;
        --server-icon-opacity: 0.6;
        --search-box-bg: #1e1e209a;
        --result-page-search-box-bg: #F3F3F312;
        --result-page-search-box-bg-hover: #FFFFFF1A;
        --segmented-control-bg: #FFF1;
        --overlay-bg: rgba(10, 10, 10, .8);
        --overlay-window-bg: #111;
        /*--sticker-bg: rgba(243, 235, 204, 0.2);*/
        --sticker-bg: var(--sticky-gray);
        --sticker-titlebar-filter: saturate(2.2) hue-rotate(-12deg) brightness(.5) blur(20px);
        --sticker-buttons-border-color: #FFF3;
        --sticker-buttons-bg-color: #FFF1;
        --sticker-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15),
        5px 10px 20px rgba(0, 0, 0, 0.3);

        /* 🌈 Dark Mode Color Variants */
        --sticky-gray: rgba(100, 100, 100, 0.2);
        --sticky-pink: rgba(246, 210, 210, 0.17);
        --sticky-green: rgba(209, 244, 209, 0.17);
        --sticky-blue: rgba(142, 142, 197, 0.17);
        --sticky-quan: rgba(206, 247, 253, 0.17);
        --sticky-yellow: rgba(243, 235, 204, 0.15);

        --siri-wave-bg: rgba(44, 44, 53, 0.26);
    }
}

html,
body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    margin: 0;
    background: var(--background);
    color: var(--color);
    width: 100%;
    overflow-x: hidden;
}

/*body {*/
/*    filter: blur(.2px);*/
/*}*/

html.fixed,
body.fixed {
    height: 100%;
    overflow: hidden;
}

* {
    outline: none;
}

*:not(input, textarea, [editable], [contenteditable]) {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.no-mouse-event,
.no-mouse-event>* {
    pointer-events: none;
}

.v-space.large {
    height: 1.5rem;
}

#copyright {
    position: absolute;
    width: 100vw;
    bottom: 10px;
    margin: 0 auto;
    text-align: center;
    font-size: 9px;
    color: #5559;
}

.search {
    flex-direction: column;
    align-items: center !important;
}

.search>.search-box {
    width: 600px;
    background: var(--search-box-bg);
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px;
    padding-left: 12px;
    border-radius: 18.5px;
    border: 1.2px solid #33333320;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .15),
    inset 0 3px 9px rgba(0, 0, 0, .08);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    -moz-backdrop-filter: blur(9px);
}

.search>.search-box>button {
    margin-right: 6px;
    height: 20px;
    width: 20px;
    opacity: var(--search-icon-opacity);
    cursor: pointer;
    transform: scale(0);
    animation: zoom-in .8s normal forwards ease;
    animation-delay: .5s;
    transition: 0.6s transform ease,
    0.4s opacity ease;
    background: transparent;
    border: none;
}

.search>.search-box>button>img {
    height: 20px;
    width: 20px;
}

.search>.search-box>button:hover {
    opacity: 0.8;
}

.search>.search-box>input {
    border: none;
    background: none;
    width: calc(100% - 68px);
    /*height: 30px;*/
    /*border-radius: 8px;*/
    /*background: var(--search-box-bg);*/
    margin-right: 10px;
    font-size: 14px;
    color: var(--color);
}

.dynamic-gradient-text {
    background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7, #91eae4);
    background-size: 300% 300%;
    /* Make the gradient larger for a smooth animation */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-animation 5s infinite;
    /* Animation duration and repetition */
}

@keyframes gradient-animation {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

a {
    color: var(--color);
}

@keyframes block-in {
    0% {
        filter: blur(5px);
        opacity: 0;
        transform: translateY(60px);
    }

    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoom-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes spotlight-title-in {
    0% {
        color: var(--background);
        -webkit-text-stroke: 1.2px solid var(--color);
        text-shadow: -1px 0 var(--color), 0 1px var(--color), 1px 0 var(--color), 0 -1px var(--color);
    }

    30% {
        text-shadow: 0 0 8px #FFF;
        filter: brightness(10);
    }

    50% {
        text-shadow: none;
        color: var(--color-secondary);
        filter: brightness(1);
    }

    65% {
        text-shadow: 0 0 4px #FFF;
    }

    100% {
        text-shadow: none;
        color: var(--color-secondary);
    }
}

.segmented-control {
    display: flex;
    max-width: 270px;
    width: 100%;
    position: relative;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    z-index: 1;
    margin: 0 auto;
    font-size: 12px;
    border-radius: 100rem;
    background: var(--segmented-control-bg);
    box-shadow: 4px 4px 22px rgba(0, 0, 0, .12),
    inset 0 3px 7px rgba(0, 0, 0, .08);
    border: 2.5px solid transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -moz-backdrop-filter: blur(6px);
}

.segmented-control>input {
    display: none;
}

.segmented-control>input:checked+label {
    color: #3395DE;
    font-weight: 600;
}

.segmented-control>input:nth-of-type(1):checked~label:last-of-type:before {
    transform: translateX(calc(0% + 0px));
}

.segmented-control>input:nth-of-type(2):checked~label:last-of-type:before {
    transform: translateX(calc(100% + 0px));
}

.segmented-control>input:nth-of-type(3):checked~label:last-of-type:before {
    transform: translateX(calc(200% + 0px));
}

.segmented-control>input:nth-of-type(4):checked~label:last-of-type:before {
    transform: translateX(calc(300% + 0px));
}

.segmented-control label {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.segmented-control label:last-of-type:before {
    content: "";
    display: block;
    max-width: calc(33.34% - 0px);
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.segmented-control label {
    padding: 6px 3px;
    transition: color 400ms cubic-bezier(0, 0.95, 0.38, 0.98);
}

.segmented-control label:before {
    background: var(--segmented-control-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, .08);
    border-radius: 100rem;
    transition: all 400ms cubic-bezier(0, 0.95, 0.38, 0.98);
}

/*.segmented-control label:not(:last-child) {*/
/*    border-right: 1px solid #fff;*/
/*}*/

iframe {
    border: none;
}

select::-ms-expand {
    display: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

div.checkbox-wrapper-22 {
    position: relative;
    top: 3px;
}

.checkbox-wrapper-22 .switch {
    display: inline-block;
    height: 34px;
    position: relative;
    width: 60px;
}

.checkbox-wrapper-22 .switch input {
    display: none;
}

.checkbox-wrapper-22 .slider {
    background-color: #AAA3;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    box-shadow: inset 0 3.5px 4px #0002;
}

.checkbox-wrapper-22 .slider:before {
    background-color: #fffC;
    /*box-shadow: 0 1px 0 #FFF6,*/
    /*            0 2px 0 #FFF4,*/
    /*            0 2px 3px rgba(0, 0, 0, .08);*/

    box-shadow: inset 0px -2px 3px #0004, 0 2px 3px rgba(0, 0, 0, .08);
    bottom: 4px;
    content: "";
    width: 26px;
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
}

.checkbox-wrapper-22 input:disabled+.slider:before {
    background-color: #9997;
    box-shadow: none;
}

.checkbox-wrapper-22 input:checked+.slider {
    background-color: rgba(87, 168, 92, 0.8);
}

.checkbox-wrapper-22 input:checked+.slider:before {
    transform: translateX(26px);
}

.checkbox-wrapper-22 .slider.round {
    border-radius: 34px;
}

.checkbox-wrapper-22 .slider.round:before {
    border-radius: 50%;
}

.overlay-window.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    -moz-backdrop-filter: blur(24px);
    background: var(--overlay-bg);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    transition: opacity .3s ease-out,
    backdrop-filter 1.2s ease;
}

.overlay-window.container.hide {
    /*transform: translateY(60vh);*/
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    -moz-backdrop-filter: blur(0);
}

.overlay-window.container>.overlay-window.window {
    min-height: 240px;
    min-width: 300px;
    height: 60vh;
    width: 90vh;
    background: var(--overlay-window-bg);
    border: .8px solid #FFF1;
    border-radius: 31.34px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transition: transform .7s cubic-bezier(0, 0.95, 0.38, 0.98),
    opacity .4s cubic-bezier(0, 0.95, 0.38, 0.98);
    overflow-y: hidden;
    overflow-x: hidden;
}

div.overlay-window.settings.container>div>div.container {
    overflow: scroll;
    height: calc(100% - 42px);
}

.overlay-window.container.hide>.overlay-window.window {
    transform: translateY(10vh);
    opacity: 0;
}

.overlay-window.container>.overlay-window.window>div.top-bar {
    text-align: center;
    font-size: 20px;
    position: relative;
    bottom: 30px;
    pointer-events: none;
}

.overlay-window.container>.overlay-window.window>div.top-bar>span {
    font-weight: 600;
}

.overlay-window.container>.overlay-window.window>button.close-button {
    height: 32px;
    width: 32px;
    border-radius: 100rem;
    background: #5553;
    border: 1px solid #9991;
    color: var(--color);
    font-size: 20px;
    cursor: none;
    transition: opacity .2s ease,
    transform .2s ease;
}

.overlay-window.container>.overlay-window.window>button.close-button svg {
    margin-top: 4px;
    margin-left: -1px;
    filter: contrast(0.3);
}

.overlay-window.container>.overlay-window.window>button.close-button:hover {
    opacity: .7;
    transform: scale(1.1);
}

.overlay-window.container>.overlay-window.window>button.close-button:active {
    opacity: .9;
    transform: scale(.9);
}

/*.overlay-window.container > .overlay-window.window > div.container {*/
/*    border: 1px #F00 solid; <!-- Debug -->*/
/*}*/

input.glass,
select.glass {
    width: 132px;
    border-radius: 12px;
    border: none;
    height: 36px;
    background-color: #AAA2;
    box-shadow: inset 0 3px 7px #0001;
    padding: 0 8px;
    color: var(--color-secondary)
}

body.disable-animations * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    transition: none !important;
}

body:not(body.colorful-background) .color-mix,
body:not(body.colorful-background) .gradient-mix-container .mix {
    display: none;
}

p::after {
    content: '\00A0';
    /* Non-breaking space to help prevent single words */
}

div.quote {
    text-align: center;
    background: var(--sticker-bg);
    border: .7px solid #7773;
    border-top: 1px solid #71717133;
    border-radius: 0;
    box-shadow: var(--sticker-shadow);
    margin: 20px auto;
    display: none;
}

body.quotes-enabled div.quote {
    display: block;
}

div.quote>div.title-bar {
    backdrop-filter: var(--sticker-titlebar-filter);
    width: 100%;
    height: 12px;
}

div.quote>p {
    padding: 8px 20px 8px 20px;
    font-family: "Merienda", sans-serif;
    font-weight: bold;
    font-size: 12px;
    color: var(--color-secondary);
}

div.quote>div.title-bar>.buttons {
    display: flex;
    gap: 6px;
    padding: 1.5px;
}

div.quote>div.title-bar>.buttons>.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}

div.quote>div.title-bar>.buttons>.button.square {
    width: 6px;
    height: 6px;
    background: var(--sticker-buttons-bg-color);
    border: 1.5px solid var(--sticker-buttons-border-color);
}

div.quote>div.title-bar>.buttons>.button.triangle {
    width: 0;
    height: 0;
    border-top: 9px solid transparent;
    border-right: 9px solid var(--sticker-buttons-border-color);
    position: absolute;
    right: 17px;
}

div.quote>div.title-bar>.buttons>.button.folded {
    width: 6px;
    height: 6px;
    background: var(--sticker-buttons-bg-color);
    border: 1.5px solid var(--sticker-buttons-border-color);
    position: relative;
    overflow: hidden;
    position: absolute;
    right: 2px;
}

div.quote>div.title-bar>.buttons>.button.folded::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 3px;
    height: 3px;
    border-left: 1.5px solid var(--sticker-buttons-border-color);
    border-top: 1.5px solid var(--sticker-buttons-border-color);
}

div.quote a {
    color: var(--color-secondary);
}

.modern-quotes-enabled div.quote {
    border-radius: 15px;
    box-shadow: 0 8px 24px -3px rgba(0, 0, 0, .1);
    transition: box-shadow .25s ease,
    border-radius .4s cubic-bezier(.25, .8, .25, 1);
}

.modern-quotes-enabled div.quote:hover {
    border-radius: 4px;
    box-shadow: 0 6px 18px -3px rgba(0, 0, 0, .12),
    inset 0 4px 8px -1px rgba(0, 0, 0, .1);
}

.modern-quotes-enabled div.quote>div.title-bar {
    display: none;
}

#quoteS button {
    border: none;
    background: transparent;
    transition: transform .3s ease;
    cursor: pointer;
    filter: contrast(0);
    opacity: .7;
}

#quoteS button:hover {
    transform: scale(1.1);
}

.float-window {
    height: 200px;
    width: 200px;
    position: fixed;
    overflow: hidden;
    transition: all 1s ease;
    z-index: 85;
}

.float-window:not(.customized) {
    background: #212833;
    border: .7px solid #5554;
    box-shadow: 0 6px 32px -3px rgba(0, 0, 0, .15);
}

.float-window.blur {
    background: transparent;
    backdrop-filter: blur(18px);
    -moz-backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.float-window.top {
    top: 20px;
}

.float-window.bottom {
    bottom: 20px;
}

.float-window.left {
    left: 20px;
}

.float-window.right {
    right: 20px;
}

.float-window.small {
    height: 120px;
    width: 120px;
}

.float-window.medium {
    height: 240px;
    width: 240px;
}

.float-window.triangle {
    height: 120px;
    width: 240px;
}

.float-window.large {
    height: 360px;
    width: 360px;
}

.float-window.slight-round {
    border-radius: 11px;
}

.float-window.round {
    border-radius: 18px;
}

@keyframes float-window-left-top-in {
    0% {
        transform: translate3d(-240px, -240px, 0);
        filter: blur(13px);
        border-radius: 3.6rem;
    }

    80% {
        transform: none;
    }

    100% {
        filter: blur(0);
    }
}

.float-window.left.top {
    animation: float-window-left-top-in 1.5s cubic-bezier(.25, .8, .25, 1);
}

@keyframes float-window-right-top-in {
    0% {
        transform: translate3d(240px, -240px, 0);
        filter: blur(13px);
        border-radius: 3.6rem;
    }

    80% {
        transform: none;
    }

    100% {
        filter: blur(0);
    }
}

.float-window.right.top {
    animation: float-window-right-top-in 1.5s cubic-bezier(.25, .8, .25, 1);
}

@keyframes float-window-left-bottom-in {
    0% {
        transform: translate3d(-240px, 240px, 0);
        filter: blur(13px);
        border-radius: 3.6rem;
    }

    80% {
        transform: none;
    }

    100% {
        filter: blur(0);
    }
}

.float-window.left.bottom {
    animation: float-window-left-bottom-in 1.5s cubic-bezier(.25, .8, .25, 1);
}

@keyframes float-window-right-bottom-in {
    0% {
        transform: translate3d(240px, 240px, 0);
        filter: blur(13px);
        border-radius: 3.6rem;
    }

    80% {
        transform: none;
    }

    100% {
        filter: blur(0);
    }
}

.float-window.right.bottom {
    animation: float-window-right-bottom-in 1.5s cubic-bezier(.25, .8, .25, 1);
}

.float-window.hide {
    display: none;
}

.sticker-glow {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.sticker-glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(120deg, rgba(192,192,192,0) 30%, rgba(192,192,192,0.6) 50%, rgba(192,192,192,0) 70%);
    transform: skewX(-25deg);
    animation: silverStickerGlow 2s linear infinite;
}

.sticker-glow::after {
}
@keyframes silverStickerGlow {
    0% { left: -150%; }
    100% { left: 100%; }
}

.sticker-glow::after {
    animation: none;
    background: none;
}