.rfb {
    --rfb-safe-top: env(safe-area-inset-top, 0px);
    --rfb-safe-right: env(safe-area-inset-right, 0px);
    --rfb-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rfb-safe-left: env(safe-area-inset-left, 0px);
    --rfb-accent: #61ffd6;
    --rfb-on-accent: #000;
    --rfb-surface: #151515;
    --rfb-on-surface: #fff;
    --rfb-border: #000;
    --rfb-motion-duration: 220ms;
    --rfb-motion-curve: cubic-bezier(.2, .75, .25, 1);
    --rfb-viewport-height: 100vh;
    --rfb-trigger-size: 48px;
    --rfb-x: var(--rfb-mobile-x, 16px);
    --rfb-y: var(--rfb-mobile-y, 16px);
    --rfb-max-x: max(0px, calc(100vw - var(--rfb-safe-left) - var(--rfb-safe-right) - var(--rfb-trigger-size)));
    --rfb-max-y: max(0px, calc(var(--rfb-viewport-height) - var(--rfb-safe-top) - var(--rfb-safe-bottom) - var(--rfb-trigger-size)));
    --rfb-edge-x: clamp(0px, var(--rfb-x), var(--rfb-max-x));
    --rfb-edge-y: clamp(0px, var(--rfb-y), var(--rfb-max-y));
    --rfb-center-x: clamp(calc(var(--rfb-max-x) / -2), var(--rfb-x), calc(var(--rfb-max-x) / 2));
    --rfb-center-y: clamp(calc(var(--rfb-max-y) / -2), var(--rfb-y), calc(var(--rfb-max-y) / 2));
    --rfb-left: var(--rfb-safe-left);
    --rfb-right: calc(var(--rfb-safe-right) + var(--rfb-edge-x));
    --rfb-top: var(--rfb-safe-top);
    --rfb-bottom: calc(var(--rfb-safe-bottom) + var(--rfb-edge-y));
    --rfb-space-x: max(0px, calc(100vw - var(--rfb-left) - var(--rfb-right)));
    --rfb-space-y: max(0px, calc(var(--rfb-viewport-height) - var(--rfb-top) - var(--rfb-bottom)));

    position: fixed;
    z-index: 9990;
    inset: var(--rfb-top) var(--rfb-right) var(--rfb-bottom) var(--rfb-left);
    width: max-content;
    height: max-content;
    max-width: var(--rfb-space-x);
    max-height: var(--rfb-space-y);
    margin: auto var(--rfb-margin-right, 0) var(--rfb-margin-bottom, 0) var(--rfb-margin-left, auto);
    padding: 0;
    color: var(--rfb-on-surface);
    font-family: var(--rfb-font-body, inherit);
    line-height: 1.4;
    pointer-events: none;
    isolation: isolate;
}

@supports (height: 100dvh) {
    .rfb {
        --rfb-viewport-height: 100dvh;
    }
}

@media (min-width: 768px) {
    .rfb {
        --rfb-trigger-size: 52px;
        --rfb-x: var(--rfb-desktop-x, 16px);
        --rfb-y: var(--rfb-desktop-y, 16px);
    }

    .rfb .rfb__label-mobile { display: none; }

    .rfb[data-desktop="middle-left"],
    .rfb[data-desktop="middle-right"] {
        --rfb-top: calc(var(--rfb-safe-top) + max(0px, 2 * var(--rfb-center-y)));
        --rfb-bottom: calc(var(--rfb-safe-bottom) + max(0px, -2 * var(--rfb-center-y)));
        --rfb-margin-bottom: auto;
        --rfb-direction: column;
        --rfb-wrap: nowrap;
    }

    .rfb[data-desktop="middle-left"],
    .rfb[data-desktop="bottom-left"] {
        --rfb-left: calc(var(--rfb-safe-left) + var(--rfb-edge-x));
        --rfb-right: var(--rfb-safe-right);
        --rfb-margin-left: 0;
        --rfb-margin-right: auto;
        --rfb-justify: flex-start;
    }

    .rfb[data-desktop="bottom-center"] {
        --rfb-left: calc(var(--rfb-safe-left) + max(0px, 2 * var(--rfb-center-x)));
        --rfb-right: calc(var(--rfb-safe-right) + max(0px, -2 * var(--rfb-center-x)));
        --rfb-margin-right: auto;
        --rfb-justify: center;
    }
}

@media not all and (min-width: 768px) {
    .rfb .rfb__label-desktop { display: none; }

    .rfb[data-mobile="middle-left"],
    .rfb[data-mobile="middle-right"] {
        --rfb-top: calc(var(--rfb-safe-top) + max(0px, 2 * var(--rfb-center-y)));
        --rfb-bottom: calc(var(--rfb-safe-bottom) + max(0px, -2 * var(--rfb-center-y)));
        --rfb-margin-bottom: auto;
        --rfb-direction: column;
        --rfb-wrap: nowrap;
    }

    .rfb[data-mobile="middle-left"],
    .rfb[data-mobile="bottom-left"] {
        --rfb-left: calc(var(--rfb-safe-left) + var(--rfb-edge-x));
        --rfb-right: var(--rfb-safe-right);
        --rfb-margin-left: 0;
        --rfb-margin-right: auto;
        --rfb-justify: flex-start;
    }

    .rfb[data-mobile="bottom-center"] {
        --rfb-left: calc(var(--rfb-safe-left) + max(0px, 2 * var(--rfb-center-x)));
        --rfb-right: calc(var(--rfb-safe-right) + max(0px, -2 * var(--rfb-center-x)));
        --rfb-margin-right: auto;
        --rfb-justify: center;
    }
}

.rfb *,
.rfb *::before,
.rfb *::after {
    box-sizing: border-box;
}

.rfb [hidden] {
    display: none !important;
}

.rfb__items {
    display: flex;
    flex-direction: var(--rfb-direction, row);
    flex-wrap: var(--rfb-wrap, wrap);
    justify-content: var(--rfb-justify, flex-end);
    justify-content: safe var(--rfb-justify, flex-end);
    gap: 8px;
    width: max-content;
    max-width: var(--rfb-space-x);
    max-height: var(--rfb-space-y);
    padding: 0;
    overflow: auto;
    scrollbar-width: thin;
    pointer-events: auto;
}

.rfb__item, .rfb__group {
    flex: 0 0 auto;
    margin: 0;
}

.rfb__group {
    display: flex;
    flex-direction: var(--rfb-direction, row);
    flex-wrap: var(--rfb-wrap, wrap);
    align-items: flex-start;
    justify-content: var(--rfb-justify, flex-end);
    max-width: var(--rfb-space-x);
    gap: var(--rfb-button-gap, 0px);
}

.rfb .rfb__group .rfb__trigger { flex: 0 0 auto; }

.rfb .rfb__trigger,
.rfb .rfb__close {
    display: grid;
    place-items: center;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: var(--rfb-accent);
    color: var(--rfb-on-accent);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.rfb .rfb__trigger {
    --rfb-trigger-bg: var(--rfb-button-bg, var(--rfb-accent));
    width: var(--rfb-trigger-size);
    height: var(--rfb-trigger-size);
    border: 1px solid var(--rfb-border);
    background-color: var(--rfb-trigger-bg);
    color: var(--rfb-button-text, var(--rfb-on-accent));
    transition: background-color var(--rfb-motion-duration) var(--rfb-motion-curve);
}

@media (hover: hover) {
    .rfb .rfb__trigger:hover {
        --rfb-trigger-bg: color-mix(in srgb, var(--rfb-button-bg, var(--rfb-accent)) 92%, var(--rfb-button-text, var(--rfb-on-accent)));
    }
}

.rfb__icon,
.rfb__choice-icon,
.rfb__arrow {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

.rfb__icon svg,
.rfb__choice-icon svg,
.rfb__arrow svg,
.rfb__close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.rfb__icon img,
.rfb__choice-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rfb__label {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: max-content;
    min-height: var(--rfb-trigger-size);
    max-width: min(16rem, var(--rfb-overlay-width, calc(100% - 16px)));
    max-height: var(--rfb-overlay-height, none);
    --rfb-label-clip: inset(0);
    border: 1px solid var(--rfb-border);
    padding: 8px 14px;
    overflow: hidden;
    background-color: var(--rfb-trigger-bg, var(--rfb-accent));
    color: inherit;
    font-family: var(--rfb-font-button, inherit);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
    opacity: 0;
    pointer-events: none;
    clip-path: var(--rfb-label-clip);
    transition: opacity var(--rfb-motion-duration) var(--rfb-motion-curve),
        clip-path var(--rfb-motion-duration) var(--rfb-motion-curve),
        background-color var(--rfb-motion-duration) var(--rfb-motion-curve);
}

.rfb__label:not([data-animated]) { transition: none; }

.rfb[data-motion="slide"] .rfb__label[data-side="left"] { --rfb-label-clip: inset(0 0 0 100%); }
.rfb[data-motion="slide"] .rfb__label[data-side="right"] { --rfb-label-clip: inset(0 100% 0 0); }
.rfb[data-motion="slide"] .rfb__label[data-side="above"] { --rfb-label-clip: inset(100% 0 0 0); }
.rfb[data-motion="slide"] .rfb__label[data-side="below"] { --rfb-label-clip: inset(0 0 100% 0); }

.rfb__label[data-joined][data-side="left"] {
    border-right-width: 0;
    padding-right: 15px;
    transform: translateX(1px);
}

.rfb__label[data-joined][data-side="right"] {
    border-left-width: 0;
    padding-left: 15px;
    transform: translateX(-1px);
}

.rfb__label[data-positioned] {
    opacity: 1;
    clip-path: inset(0);
}

.rfb [data-rfb-separate] .rfb__label {
    gap: 8px;
    padding-block: 4px;
}

.rfb [data-rfb-separate] .rfb__label[data-positioned] { pointer-events: auto; }

.rfb__label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rfb__label-arrow {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.rfb__label-arrow svg { display: block; width: 100%; height: 100%; }

.rfb__label[data-side="right"] .rfb__label-arrow { order: -1; transform: rotate(180deg); }

.rfb__panel {
    position: fixed;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(22rem, var(--rfb-overlay-width, calc(100vw - 16px)));
    max-height: var(--rfb-overlay-height, calc(var(--rfb-viewport-height) - 16px));
    border: 1px solid var(--rfb-border);
    background: var(--rfb-surface);
    color: var(--rfb-on-surface);
    box-shadow: 0 10px 30px rgb(0 0 0 / 25%);
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity var(--rfb-motion-duration) var(--rfb-motion-curve),
        transform var(--rfb-motion-duration) var(--rfb-motion-curve);
    transition: opacity var(--rfb-motion-duration) var(--rfb-motion-curve),
        transform var(--rfb-motion-duration) var(--rfb-motion-curve),
        display var(--rfb-motion-duration) allow-discrete;
}

.rfb[data-motion="slide"] .rfb__panel[data-side="above"] { --rfb-panel-from-y: 8px; }
.rfb[data-motion="slide"] .rfb__panel[data-side="below"] { --rfb-panel-from-y: -8px; }
.rfb[data-motion="slide"] .rfb__panel[data-side="left"] { --rfb-panel-from-x: 8px; }
.rfb[data-motion="slide"] .rfb__panel[data-side="right"] { --rfb-panel-from-x: -8px; }

.rfb__panel[hidden] {
    opacity: 0;
    pointer-events: none;
    transform: translate(var(--rfb-panel-from-x, 0), var(--rfb-panel-from-y, 0));
}

@starting-style {
    .rfb__panel:not([hidden]) {
        opacity: 0;
        transform: translate(var(--rfb-panel-from-x, 0), var(--rfb-panel-from-y, 0));
    }
}

.rfb__heading {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 7px 9px 7px 16px;
    background: var(--rfb-accent);
    color: var(--rfb-on-accent);
    font-family: var(--rfb-font-heading, inherit);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
}

.rfb .rfb__close {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 1px solid currentColor;
}

.rfb__close svg {
    width: 16px;
    height: 16px;
}

.rfb .rfb__choices {
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.rfb__choices li + li {
    border-top: 1px solid rgb(127 127 127 / 30%);
    border-color: color-mix(in srgb, var(--rfb-on-surface) 20%, transparent);
}

.rfb .rfb__choice {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
    color: var(--rfb-on-surface);
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.rfb__arrow {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .rfb .rfb__close:hover,
    .rfb .rfb__choice:hover {
        box-shadow: inset 0 0 0 1px currentColor;
    }
}

.rfb .rfb__trigger:focus-visible,
.rfb .rfb__close:focus-visible,
.rfb .rfb__choice:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.rfb[data-motion="none"] { --rfb-motion-duration: 0ms !important; }

.rfb[data-entrance] .rfb__items {
    position: relative;
    animation: rfb-entrance var(--rfb-motion-duration) var(--rfb-motion-curve) var(--rfb-entrance-delay, 0ms) backwards;
}

.rfb[data-motion="slide"] { --rfb-entrance-y: 8px; }

@keyframes rfb-entrance {
    from { top: var(--rfb-entrance-y, 0px); opacity: 0; visibility: hidden; }
    to { top: 0; opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .rfb { --rfb-motion-duration: 0ms !important; }
    .rfb[data-entrance] .rfb__items { animation: none; }
}

.rfb .rfb__icon { color: var(--rfb-button-icon, currentColor); }

@supports (mask-image: url("")) {
    .rfb__icon--tinted > img { grid-area: 1 / 1; opacity: 0; }
    .rfb__icon--tinted::after {
        content: "";
        grid-area: 1 / 1;
        width: 100%;
        height: 100%;
        background: currentColor;
        mask: var(--rfb-button-icon-image) center / contain no-repeat;
    }
}

.rfb [data-rfb-join-edges~="top"] { border-top-width: 0; padding-top: 1px; }
.rfb [data-rfb-join-edges~="right"] { border-right-width: 0; padding-right: 1px; }
.rfb [data-rfb-join-edges~="bottom"] { border-bottom-width: 0; padding-bottom: 1px; }
.rfb [data-rfb-join-edges~="left"] { border-left-width: 0; padding-left: 1px; }