:root {
    --pujs-popup-background-dark: rgba(46, 46, 46, 0.989);
    --pujs-popup-background-light: rgba(255, 255, 255, 0.989);
    --pujs-popup-text-color-dark: white;
    --pujs-popup-text-color-light: black;
    --editor-text-light: #000;
    --editor-text-dark: #fff;
    --editor-bg-focus-light: #ffffff6b;
    --editor-bg-focus-dark: #4242426b;
    --editor-border-light: #bcbcbc4b;
    --editor-border-dark: #ffffff2e;
    --background-color-popover-light: rgb(237, 237, 237);
    --background-color-popover-dark: rgba(49, 49, 49, 0.75);
    --contrast-light: #fff;
    --contrast-dark: #000;
    --border-light: rgba(60, 60, 67, 0.29);
    --border-dark: rgba(235, 235, 245, 0.25);
    --placeholder-light: rgba(60, 60, 67, 0.29);
    --placeholder-dark: rgba(235, 235, 245, 0.3);
    --separator-light: rgba(128, 128, 128, 0.55);
    --separator-dark: rgba(141, 141, 145, 0.65);
    --vibrant-secondary-light: #3D3D3D;
    --vibrant-secondary-dark: #9e9e9e;
    --gray2-light: #AEAEB2;
    --gray2-dark: #636366aa;

    --pujs-popup-background: var(--pujs-popup-background-light);
    --pujs-popup-text-color: var(--pujs-popup-text-color-light);
    --editor-text: var(--editor-text-light);
    --editor-bg-focus: var(--editor-bg-focus-light);
    --editor-border: var(--editor-border-light);
    --background-color-popover: var(--background-color-popover-light);
    --contrast: var(--contrast-light);
    --border: var(--border-light);
    --placeholder: var(--placeholder-light);
    --separator: var(--separator-light);
    --vibrant-secondary: var(--vibrant-secondary-light);
    --gray2: var(--gray2-light);

    --pu-blue: #007AFF;
    --pu-blue-dark: #0A84FF;
    --pu-red: #FF3B30;
    --pu-red-dark: #FF453A;
    --pu-green: #34C759;
    --pu-green-dark: #30D158;
    --pu-yellow: #FFCC00;
    --pu-yellow-dark: #FFD60A;


    --pu-smooth-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pujs-popup-background: var(--pujs-popup-background-dark);
        --pujs-popup-text-color: var(--pujs-popup-text-color-dark);
        --editor-text: var(--editor-text-dark);
        --editor-bg-focus: var(--editor-bg-focus-dark);
        --editor-border: var(--editor-border-dark);
        --background-color-popover: var(--background-color-popover-dark);
        --contrast: var(--contrast-dark);
        --border: var(--border-dark);
        --placeholder: var(--placeholder-dark);
        --separator: var(--separator-dark);
        --vibrant-secondary: var(--vibrant-secondary-dark);
        --gray2: var(--gray2-dark);

        --pu-blue: var(--pu-blue-dark);
        --pu-red: var(--pu-red-dark);
        --pu-green: var(--pu-green-dark);
        --pu-yellow: var(--pu-yellow-dark);
    }
}

@keyframes blur {
    0% {
        backdrop-filter: blur(25px);
    }

    100% {
        backdrop-filter: blur(25px);
    }
}

.pujs-poAlert {
    position: fixed;
    z-index: 998;
    color: var(--pujs-popup-text-color);
    background: var(--pujs-popup-background);
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(90% - 3rem);
    border-radius: 27px 27px 0 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: pujsPoAlertSlideIn 1s forwards var(--pu-smooth-ease);
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.05);

    &,
    * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    &.narrowed::before {
        content: '';
        position: fixed;
        --height: 10px;
        top: calc(10% - 2rem + var(--height) / 1.5);
        left: 5%;
        right: 5%;
        height: var(--height);
        background: var(--pujs-popup-narrowed-background);
        border-radius: 7px 7px 0 0;
    }

    &.dragging {
        user-select: none;
        -webkit-user-select: none;
    }
}

.pujs-poAlert>.pujs-poAlert-closeButton {
    padding: 0;
    margin: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    border: none;
    outline: none;
    background: var(--gray2);
    transition: .3s;
    --size: 1.7rem;
    height: var(--size);
    width: var(--size);

    border-radius: 50%;

    opacity: .5;

    &,
    * {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    svg>* {
        stroke: var(--pujs-popup-text-color);
    }
}

.pujs-poAlert>.pujs-poAlert-dragHandle {
    position: absolute;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    height: 5pt;
    width: 40%;
    max-width: 200px;
    border-radius: 5rem;
    background: var(--gray2);
    cursor: pointer;
    transition: .3s;

    &:hover {
        opacity: .85;
    }

    &:active {
        transform: translateY(1px) translateX(-50%) scale(.99);
    }
}

@keyframes pujsPoAlertSlideIn {
    from {
        transform: translateY(60%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pujsPoAlertSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(60%);
        opacity: 0;
        pointer-events: none;
    }
}

@keyframes pujsPoAlertSlideInShrink {
    from {
        transform: translateY(60%) scale(1.06);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pujsPoAlertSlideOutShrink {
    from {
        transform: translateY(0) scale(1.06);
        opacity: 1;
    }

    to {
        transform: translateY(60%);
        opacity: 0;
        pointer-events: none;
    }
}

.pujs-alert {
    user-select: none;
    position: fixed;
    bottom: 5em;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    padding: .5rem 2rem;
    border-radius: 7px;
    background-color: var(--editor-bg-focus);
    color: var(--editor-text);
    font-size: .9rem;
    display: flex;
    gap: .5rem;
    align-items: center;
    backdrop-filter: blur(7px) saturate(180%);
    -webkit-backdrop-filter: blur(7px) saturate(180%);
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: .3s;
    width: max-content;
    pointer-events: none;
    border: 1px solid var(--editor-border);

    &,
    * {
        font-family: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    &.show {
        opacity: 1;
    }

    --color: var(--editor-text);

    .color-red * {
        --color: #ff0000;
    }

    .color-red>svg {
        padding: 0px;
        height: calc(1.3em + 5px);
        width: calc(1.3em + 5px);
    }

    .bg-green>svg {
        background-color: #00ff0081;
        --color: black;
    }


    .stroke * {
        stroke: var(--color);
    }

    .fill * {
        fill: var(--color);
    }

    svg {
        transform: translateY(2px);
        margin-right: 5px;
        min-height: 1.3em;
        min-width: 1.3em;
        padding: 3px;
        border-radius: 50%;
    }
}

.puJS-fullscreen-cover {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: brightness(.8);
    -webkit-backdrop-filter: brightness(.8);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
    opacity: 0;
    pointer-events: none;
}

dialog.puJS-popup {
    background: transparent;
    border: none;
}

dialog.puJS-popup:-internal-dialog-in-top-layer::backdrop {
    background: transparent;
    backdrop-filter: brightness(.8);
    -webkit-backdrop-filter: brightness(.8);
    animation: pu-backdrop-blur .5s;
    transition: .5s;
}

dialog.puJS-popup.closed:-internal-dialog-in-top-layer::backdrop {
    backdrop-filter: brightness(1);
    -webkit-backdrop-filter: brightness(1);
    transition: .5s;
}

@keyframes pu-backdrop-blur {
    0% {
        backdrop-filter: brightness(1);
        -webkit-backdrop-filter: brightness(1);
    }

    100% {
        backdrop-filter: brightness(.8);
        -webkit-backdrop-filter: brightness(.8);
    }
}

.puJS-popup {
    transition: 0.2s;
}

.puJS-popup-ended {
    opacity: 0;
}

.puJS-popup-container {
    --border-radius: 17px;
    --max-width: 320px;
    --title-size: 1.2rem;
    --text-size: 1rem;
    --input-size: 1.15rem;
    --btn-padding: .8rem;
    --input-padding: 3px 8px;
    --inp-border-radius: 7px;

    background: var(--background-color-popover);
    color: var(--editor-text);

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    border-radius: var(--border-radius);

    transition: opacity 0.2s;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pujsPopupIn .6s forwards var(--pu-smooth-ease);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2px;

    width: 80%;

    max-width: var(--max-width);

    &,
    * {
        font-family: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .padding {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 2rem;
        margin-top: 18px;
        margin-bottom: 11px;
        text-align: center;

        .title {
            font-size: var(--title-size);
            font-weight: 600;
            line-height: 2rem;
        }

        .message {
            font-size: var(--text-size);
            font-weight: 500;
            margin-bottom: 7px;
        }

        .input {
            margin-top: 7px;
            outline: none;
            border: 1px solid var(--border);
            font-size: var(--input-size);
            background: var(--contrast);
            border-radius: var(--inp-border-radius);
            color: var(--editor-text);
            padding: var(--input-padding);
            width: calc(100% - 24px);
        }

        .input::placeholder {
            color: var(--placeholder);
        }
    }

    .buttons {
        width: 100%;
    }

    button {
        all: initial;
        font-family: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        color: var(--pu-blue);
        display: flex;
        justify-content: center;
        cursor: pointer;
        align-items: center;
        background: transparent;
        border: none;
        border-radius: 0;
        outline: none;
        font-size: var(--title-size);
        margin: 0;
        padding-top: var(--btn-padding);
        padding-bottom: var(--btn-padding);
        border-top: .33px solid var(--separator);
        width: 100%;
        transition: .15s;
    }

    button:active {
        backdrop-filter: brightness(.9);
        -webkit-backdrop-filter: brightness(.9);
    }

    .button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row-reverse;

        button {
            width: 50%;
        }

        .emphasized {
            border-left: .33px solid var(--separator);
        }
    }

    .emphasized {
        font-weight: 600;
    }
}

@keyframes pujsPopupIn {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@media (prefers-color-scheme: dark) {
    .puJS-fullscreen-cover {
        backdrop-filter: brightness(.5);
        -webkit-backdrop-filter: brightness(.5);
    }

    .puJS-popup-container {
        button:active {
            backdrop-filter: brightness(1.95);
            -webkit-backdrop-filter: brightness(1.95);
        }
    }
}

@media (max-width: 450px) {
    .pujs-poAlert {
        border-radius: 14px 14px 0 0;
    }

    .puJS-popup-container {
        --border-radius: 14px;
        --max-width: 270px;
        --title-size: 17px;
        --text-size: 13px;
        --input-size: 17px;
        --btn-padding: 11px;
        --input-padding: 2px 6px;
        --inp-border-radius: 5px;
    }

    .puJS-lasting-banner {
        flex-direction: column;
        padding-bottom: 2rem !important;
    }
}

.puJS-lasting-banner {
    position: fixed;
    z-index: 999;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    border-radius: 11px 11px 0 0;
    box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.05);
    animation: pujsPoAlertSlideIn .7s var(--pu-smooth-ease);

    &,
    * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue, sans-serif';
    }

    .buttons>button {
        outline: none;
        border: none;
        cursor: pointer;
    }
}

.pujs-button-black-and-white {
    background: black !important;
    color: white !important;
    border: 1px solid white !important;
}

@keyframes pujsBannerSlideOut {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(60%);
        opacity: 0;
    }
}

.puJS-action-sheet {
    position: fixed;
    z-index: 1000;
    bottom: .5rem;
    right: 0;
    padding: 1.1rem;
    max-width: 500px;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes pujsActionSheetSlideIn {
    from {
        transform: translateY(200px);
        opacity: 0;
        backdrop-filter: blur(25px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
        backdrop-filter: blur(25px);
    }
}

@keyframes pujsActionSheetSlideOutOuter {
    from {
        transform: translateY(0) translateX(-50%);
        opacity: 1;
    }

    to {
        transform: translateY(200px) translateX(-50%);
        opacity: 0;
    }
}

.puJS-action-sheet>.first-part {
    background: var(--background-color-popover);
    color: var(--editor-text);
    border-radius: 14px;

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    display: flex;
    flex-direction: column;
    padding: 0;

    text-align: center;

    animation: pujsActionSheetSlideIn .7s forwards var(--pu-smooth-ease);
    margin-bottom: 1.1rem;
}

.puJS-action-sheet>.first-part>.title {
    user-select: none;
    margin-top: 14pt;
    font-size: .9rem;
    font-weight: 600;
    color: var(--vibrant-secondary);
}

.puJS-action-sheet>.first-part>.message {
    user-select: none;
    margin-top: 3pt;
    margin-bottom: 14pt;
    font-size: .8rem;
    font-weight: 500;
    color: var(--vibrant-secondary);
}

.puJS-action-sheet>.first-part>.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
}

.puJS-action-sheet>.first-part>.buttons>button {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: transparent;
    border: none;
    outline: none;
    border-top: 1pt solid var(--border);

    padding: 1rem 0;

    font-size: 1.1rem;

    color: var(--pu-blue);

    width: 100%;

    &.pujs-button-disabled {
        color: var(--gray2);
        cursor: default;
    }

    &.pujs-button-destructive {
        color: var(--pu-red);
    }
}

.puJS-action-sheet>button.cancel {
    background: var(--background-color-popover);
    color: var(--editor-text);
    border-radius: 14px;

    font-weight: 600;

    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);

    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    outline: none;
    padding: 1rem 0;
    font-size: 1.1rem;
    color: var(--pu-blue);
    width: 100%;

    animation: pujsActionSheetSlideIn .75s forwards var(--pu-smooth-ease);
}