/* effects/back_lines.css */
/* anchor + onyx */
div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"]) {
    position: relative;
    isolation: isolate;
    background: #0b0a10 !important;
    --laser-color: #16f195;
}

/* content above effect */
div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])>* {
    position: relative;
    z-index: 1;
}

/* shared mask */
div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])::before,
div[style*="back_lines.svg"]:is([style*="min-height"], [style*="height"])::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: var(--laser-color);
    -webkit-mask-image: url("/images/back_lines.svg");
    mask-image: url("/images/back_lines.svg");
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: translateZ(0);
}
:root {
    --hp-onyx-0: #050506;
    --hp-onyx-1: #0a0a0c;
    --hp-onyx-2: #101114;
    --hp-onyx-3: #16171a;
    --hp-onyx-4: #1d1e22;

    --hp-page-wash-top: rgba(6, 6, 7, .64);
    --hp-page-wash-bottom: rgba(4, 4, 5, .80);

    --hp-surface: rgba(14, 15, 17, .94);
    --hp-surface-raised: rgba(17, 18, 21, .97);
    --hp-surface-float: rgba(20, 21, 24, .985);

    --hp-surface-wash-top: rgba(255, 255, 255, .012);
    --hp-surface-wash-bottom: rgba(255, 255, 255, .002);

    --hp-surface-background:
        linear-gradient(180deg,
            var(--hp-surface-wash-top) 0%,
            var(--hp-surface-wash-bottom) 100%),
        var(--hp-surface);

    --hp-raised-background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .016) 0%,
            rgba(255, 255, 255, .004) 100%),
        var(--hp-surface-raised);

    --hp-float-background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .018) 0%,
            rgba(255, 255, 255, .006) 100%),
        var(--hp-surface-float);

    --hp-menu-item-hover-background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .028) 0%,
            rgba(255, 255, 255, .01) 100%),
        rgba(24, 25, 29, .985);

    --hp-border-faint: rgba(255, 255, 255, .035);
    --hp-border-soft: rgba(255, 255, 255, .06);
    --hp-border: rgba(255, 255, 255, .09);
    --hp-border-strong: rgba(255, 255, 255, .13);

    --hp-text-strong: #f2f2f3;
    --hp-text: #c8c9ce;
    --hp-text-muted: #8b8d95;

    --hp-accent: #d9d4cb;
    --hp-accent-soft: rgba(217, 212, 203, .08);
    --hp-accent-ring: rgba(217, 212, 203, .18);

    --hp-link: #ebe6de;
    --hp-mint: #50d2c1;
    --hp-menu-item-idle: #7c818a;
    --hp-positive: #9dbfa9;
    --hp-negative: #ef9ba5;

    --hp-chart-line: #f0f0f1;
    --hp-chart-grid: rgba(255, 255, 255, .07);

    --hp-radius-sm: 8px;
    --hp-radius: 10px;
    --hp-radius-lg: 16px;

    --hp-shadow:
        0 12px 28px rgba(0, 0, 0, .28),
        inset 0 1px 0 rgba(255, 255, 255, .02);

    --hp-shadow-strong:
        0 20px 46px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .03);

    --hp-backdrop-blur: 8px;
    --hp-backdrop-sat: 104%;
}

div[style*="back_lines.svg"] {
    position: relative;
    isolation: isolate;
    color-scheme: dark;
    background-color: var(--hp-onyx-0) !important;
}

div[style*="back_lines.svg"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, var(--hp-page-wash-top) 0%, var(--hp-page-wash-bottom) 100%);
}

div[style*="back_lines.svg"] > * {
    position: relative;
    z-index: 1;
}

:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) {
    color: var(--hp-text) !important;
}

div[style*="back_lines.svg"] :is(
    div[style*="background"][style*="border-radius"],
    section[style*="background"][style*="border-radius"],
    article[style*="background"][style*="border-radius"]
):not(:has(.body34Regular)),
div[style*="back_lines.svg"] :where(
    .sc-idXgbr,
    div[style*="grid-template-columns"] > div:has(> div[style*="display: flex; flex-direction: column; gap: 12px"]):not(:has(button)):not(:has(table))
) {
    border-radius: var(--hp-radius) !important;
    background: var(--hp-surface-background) !important;
    border: none !important;
    box-shadow:
        inset 0 0 0 1px var(--hp-border-soft),
        var(--hp-shadow) !important;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    div[style*="back_lines.svg"] :is(
        div[style*="background"][style*="border-radius"],
        section[style*="background"][style*="border-radius"],
        article[style*="background"][style*="border-radius"]
    ):not(:has(.body34Regular)),
    div[style*="back_lines.svg"] :where(
        .sc-idXgbr,
        div[style*="grid-template-columns"] > div:has(> div[style*="display: flex; flex-direction: column; gap: 12px"]):not(:has(button)):not(:has(table))
    ),
    :where(
        [data-radix-popper-content-wrapper] > *,
        [role="listbox"],
        [role="menu"],
        body > div[style*="position: absolute"] > div:not(.modal),
        body > div[style*="position: fixed"] > div:not(.modal),
        .modal
    ) {
        backdrop-filter: blur(var(--hp-backdrop-blur)) saturate(var(--hp-backdrop-sat));
        -webkit-backdrop-filter: blur(var(--hp-backdrop-blur)) saturate(var(--hp-backdrop-sat));
    }
}

:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: rgb(255, 255, 255)"],
:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: rgb(246, 254, 253)"] {
    color: var(--hp-text-strong) !important;
}

:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: rgb(148, 158, 156)"],
:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: rgb(135, 140, 143)"],
:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: gray"] {
    color: var(--hp-text-muted) !important;
}

:where(
    div[style*="back_lines.svg"],
    .modal,
    [data-radix-popper-content-wrapper],
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"]:has(> div),
    body > div[style*="position: fixed"]:has(> div)
) [style*="color: rgb(237, 112, 136)"] {
    color: var(--hp-negative) !important;
}

:where(div[style*="back_lines.svg"], .modal) a {
    color: var(--hp-link) !important;
    text-decoration-color: rgba(255, 255, 255, .18);
}

:where(div[style*="back_lines.svg"], .modal) a:hover {
    color: var(--hp-text-strong) !important;
    text-decoration-color: var(--hp-accent) !important;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"] {
    border-radius: var(--hp-radius) !important;
    background: rgba(255, 255, 255, .015) !important;
    color: var(--hp-text-strong) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-soft) !important;
    transition:
        background .18s ease,
        box-shadow .18s ease,
        color .18s ease;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"]:hover {
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-strong) !important;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"].outline {
    background: rgba(255, 255, 255, .012) !important;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"][color="selected"] {
    background: rgba(255, 255, 255, .055) !important;
    box-shadow:
        inset 0 0 0 1px var(--hp-accent-ring),
        0 0 0 1px rgba(0, 0, 0, .01) !important;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"]:not(.outline) {
    background:
        linear-gradient(180deg,
            rgba(245, 241, 235, .98) 0%,
            rgba(221, 216, 208, .98) 100%) !important;
    color: #0a0a0b !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

:where(div[style*="back_lines.svg"], .modal) button[type="button"]:focus-visible,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(button, a, [role="option"], [role="menuitem"]):focus-visible {
    outline: 1px solid var(--hp-accent-ring) !important;
    outline-offset: 2px;
}

:where(body) :where(
    [class~="variant_black"],
    [class~="variant_default"]
) {
    min-height: 30px;
    border-radius: var(--hp-radius-sm) !important;
    background: var(--hp-raised-background) !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-soft) !important;
    color: var(--hp-text-strong) !important;
}

:where(body) :where(
    [class~="variant_black"],
    [class~="variant_default"]
):hover {
    box-shadow: inset 0 0 0 1px var(--hp-border-strong) !important;
    background: var(--hp-raised-background) !important;
}

:where(body) :where(
    [class~="variant_black"],
    [class~="variant_default"]
) :is(
    .sc-gikAfH,
    svg
) {
    color: inherit !important;
}

:where(body) :where(
    [class~="variant_black"],
    [class~="variant_default"]
) svg path {
    stroke: currentColor !important;
}

:where(body) :is(
    [class~="variant_black"],
    [class~="variant_default"],
    button,
    [role="button"],
    [role="combobox"]
):has(svg[viewBox="0 0 9 6"]) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

:where(body) :is(
    [class~="variant_black"],
    [class~="variant_default"],
    button,
    [role="button"],
    [role="combobox"]
):has(svg[viewBox="0 0 9 6"]):hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

:where(.modal) :is(
    [class~="variant_black"],
    [class~="variant_default"],
    button[type="button"],
    [role="button"],
    [role="combobox"]
):has(svg[viewBox="0 0 9 6"]) {
    min-height: 44px;
    border-radius: var(--hp-radius) !important;
    background: var(--hp-raised-background) !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-soft) !important;
    color: var(--hp-text-strong) !important;
}

:where(.modal) :is(
    [class~="variant_black"],
    [class~="variant_default"],
    button[type="button"],
    [role="button"],
    [role="combobox"]
):has(svg[viewBox="0 0 9 6"]):hover {
    background: var(--hp-raised-background) !important;
    background-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-strong) !important;
}

:where(.modal) :is(
    [class~="variant_black"],
    [class~="variant_default"],
    button[type="button"],
    [role="button"],
    [role="combobox"]
):has(svg[viewBox="0 0 9 6"]) :is(
    .sc-gikAfH,
    svg,
    span,
    div
) {
    color: inherit !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) {
    background: var(--hp-float-background) !important;
    border-radius: var(--hp-radius) !important;
    border: none !important;
    box-shadow:
        inset 0 0 0 1px var(--hp-border),
        0 18px 40px rgba(0, 0, 0, .46) !important;
    color: var(--hp-text-strong) !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
) {
    color: #7c818a !important;
    border-radius: calc(var(--hp-radius-sm) - 1px) !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) * {
    color: #7c818a !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):not(:is(:hover, .active, .selected, [aria-selected="true"], [data-state="checked"], [data-highlighted])) [style*="color: rgb(246, 254, 253)"] {
    color: #7c818a !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(:hover, [data-highlighted]),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(:hover, [data-highlighted]),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(:hover, [data-highlighted]) {
    background: var(--hp-menu-item-hover-background) !important;
    color: #f2f2f3 !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-soft) !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(:hover, [data-highlighted]) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(:hover, [data-highlighted]) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(:hover, [data-highlighted]) * {
    color: #f2f2f3 !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(:hover, [data-highlighted]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(:hover, [data-highlighted]) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(:hover, [data-highlighted]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(:hover, [data-highlighted]) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(:hover, [data-highlighted]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(:hover, [data-highlighted]) [style*="color: rgb(246, 254, 253)"] {
    color: #f2f2f3 !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]),
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) {
    background: transparent !important;
    color: #50d2c1 !important;
    box-shadow: none !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) *,
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) * {
    color: #50d2c1 !important;
}

:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) > div > :is(div, button, a, label):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(246, 254, 253)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(255, 255, 255)"],
:where(
    [data-radix-popper-content-wrapper] > *,
    [role="listbox"],
    [role="menu"],
    body > div[style*="position: absolute"] > div:not(.modal),
    body > div[style*="position: fixed"] > div:not(.modal)
):not(:has(> .modal)) :is(
    [role="option"],
    [role="menuitem"],
    [class*="option"],
    [class*="item"]
):is(.active, .selected, [aria-selected="true"], [data-state="checked"]) [style*="color: rgb(246, 254, 253)"] {
    color: #50d2c1 !important;
}

:where(div[style*="back_lines.svg"], .modal) [style*="border-bottom: 1px solid rgb(48, 48, 48)"],
:where(div[style*="back_lines.svg"], .modal) [style*="border-bottom: 1px solid rgb(48,48,48)"] {
    border-bottom-color: var(--hp-border-soft) !important;
}

:where(div[style*="back_lines.svg"], .modal) table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Keep the portfolio body chrome native, but theme its header to the same raised surface as controls. */
:where(div[style*="back_lines.svg"], .modal) #wideAccountTable thead,
:where(div[style*="back_lines.svg"], .modal) #wideAccountTable thead tr,
:where(div[style*="back_lines.svg"], .modal) #wideAccountTable thead td {
    background: var(--hp-raised-background) !important;
}

:where(div[style*="back_lines.svg"], .modal) #wideAccountTable thead td {
    border-bottom: 1px solid var(--hp-border-faint) !important;
}

:where(div[style*="back_lines.svg"], .modal) table:not(#wideAccountTable table) thead td {
    background: transparent !important;
    border-bottom: 1px solid var(--hp-border-faint) !important;
}

:where(div[style*="back_lines.svg"], .modal) tbody td {
    background: transparent !important;
    color: var(--hp-text-strong) !important;
}

:where(div[style*="back_lines.svg"], .modal) table:not(#wideAccountTable table) tbody tr + tr td {
    border-top: 1px solid var(--hp-border-faint);
}

:where(div[style*="back_lines.svg"], .modal) tbody tr:hover td {
    background: rgba(255, 255, 255, .02) !important;
}

:where(div[style*="back_lines.svg"], .modal) td {
    color: var(--hp-text-strong) !important;
}

:where(div[style*="back_lines.svg"], .modal) .recharts-cartesian-axis-line,
:where(div[style*="back_lines.svg"], .modal) .recharts-cartesian-axis-tick-line {
    stroke: var(--hp-chart-grid) !important;
}

:where(div[style*="back_lines.svg"], .modal) .recharts-cartesian-axis-tick-value,
:where(div[style*="back_lines.svg"], .modal) .recharts-text tspan {
    fill: var(--hp-text-muted) !important;
}

:where(div[style*="back_lines.svg"], .modal) .recharts-line-curve {
    stroke: var(--hp-chart-line) !important;
}

:where(div[style*="back_lines.svg"], .modal) svg path[fill="#50D2C1"] {
    fill: var(--hp-accent) !important;
}

:where(div[style*="back_lines.svg"], .modal) svg path[stroke="#50D2C1"] {
    stroke: var(--hp-accent) !important;
}

:where(div[style*="back_lines.svg"], .modal) :where(
    .sc-eDWCr
) {
    background: rgba(255, 255, 255, .02) !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-strong) !important;
}

:where(div[style*="back_lines.svg"], .modal) :where(
    .sc-eDWCr
) > div {
    background: var(--hp-accent) !important;
}

:where(div[style*="back_lines.svg"], .modal) [disabled] {
    opacity: .45 !important;
}

:where(body > div:has(> .modal), .sc-bBABsx) {
    background: rgba(5, 5, 6, .72) !important;
    backdrop-filter: blur(12px) saturate(96%);
    -webkit-backdrop-filter: blur(12px) saturate(96%);
}

.modal {
    color-scheme: dark;
    background: var(--hp-float-background) !important;
    color: var(--hp-text-strong) !important;
    border-radius: var(--hp-radius-lg) !important;
    border: none !important;
    box-shadow:
        inset 0 0 0 1px var(--hp-border),
        0 28px 72px rgba(0, 0, 0, .58) !important;
}

.modal :where(.sc-iveFHk) {
    color: var(--hp-text-muted) !important;
    background: rgba(255, 255, 255, .02) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 0 0 1px var(--hp-border-soft) !important;
}

.modal :where(.sc-iveFHk):hover {
    color: var(--hp-text-strong) !important;
    background: rgba(255, 255, 255, .05) !important;
}

.modal :where(.sc-iveFHk) svg path {
    stroke: currentColor !important;
}

.modal [style*="overflow: hidden auto"] {
    scrollbar-color: var(--hp-border) transparent;
}

:where(div[style*="back_lines.svg"], .modal) :where(.sc-jSUZER) {
    color: var(--hp-text-muted) !important;
}

:where(div[style*="back_lines.svg"], .modal) :where(.sc-jSUZER):not([disabled]):hover {
    color: var(--hp-text-strong) !important;
}

@media (prefers-reduced-transparency: reduce) {
    div[style*="back_lines.svg"] :is(
        div[style*="background"][style*="border-radius"],
        section[style*="background"][style*="border-radius"],
        article[style*="background"][style*="border-radius"]
    ):not(:has(.body34Regular)),
    div[style*="back_lines.svg"] :where(
        .sc-idXgbr,
        div[style*="grid-template-columns"] > div:has(> div[style*="display: flex; flex-direction: column; gap: 12px"]):not(:has(button)):not(:has(table))
    ),
    :where(
        [data-radix-popper-content-wrapper] > *,
        [role="listbox"],
        [role="menu"],
        body > div[style*="position: absolute"] > div:not(.modal),
        body > div[style*="position: fixed"] > div:not(.modal),
        .modal
    ) {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Existing rules */
#favoriteCoins,
#coinInfo,
#marketData,
#accountInfo {
    background: rgb(9, 9, 10) ;
}
#accountTable {
    background: rgb(4, 4, 4) !important;
}
/* base */
#accountTable tbody tr {
    background-color: transparent;
    transition: background-color 180ms cubic-bezier(.4, 0, .2, 1);
}

#accountTable tbody tr:hover {
    background-color: rgb(10, 10, 10) !important;
}

#marketData>div,
#marketData,
#marketDataContent,
#marketData div:has(+ #marketDataContent),
#marketData div:has(+ div + #marketDataContent),
#marketData div:has(a) {
    background: rgb(4, 4, 4) !important;
    backdrop-filter: blur(12px);
}
#coinInfo > div {
    background: rgb(4, 4, 4) !important;
    backdrop-filter: blur(12px);
}
/* Market selector */
#coinInfo .sc-ksBlkl.kGUjlo,
#coinInfo > div > div:last-child > div:first-child > div > div,
#coinInfo div:has(> div > svg[viewBox="0 0 9 6"]),
#coinInfo div:has(> div > svg[viewBox="0 0 9 6"]) > div {
    background: rgb(15, 21, 24) !important;
    background-color: rgb(15, 21, 24) !important;
    border-radius: 8px;
}

.dropper,
.dropper > [data-coin-selector-dropdown="true"],
.dropper > [data-coin-selector-dropdown="true"] > div,
.dropper [style*="background: rgb(27, 36, 41)"],
.dropper [style*="background-color: rgb(27, 36, 41)"] {
    background: rgb(10, 13, 15) !important;
    background-color: rgb(10, 13, 15) !important;
}

.dropper tbody tr,
.dropper tbody tr td {
    transition: background-color 180ms cubic-bezier(.4, 0, .2, 1);
}

.dropper tbody tr:hover,
.dropper tbody tr:hover td {
    background-color: rgb(34, 42, 47) !important;
}

/* Performance: remove blur from the tab-bearing trade panes only */
#marketData,
#marketData > div,
#marketData > div > div:last-child,
#accountTable,
#accountInfo,
#accountInfo .sc-jIILKH {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Compact inline dropdowns in the order book / order entry headers should sit flush */
:is(#marketData, .sc-jIILKH) :is(button, [role="button"], [role="combobox"]):has(svg[viewBox="0 0 9 6"]) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

:is(#marketData, .sc-jIILKH) :is(button, [role="button"], [role="combobox"]):has(svg[viewBox="0 0 9 6"]):hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}
/* Outermost navbar via the Hyperformance logo */
div:has(> div > a > img[alt="Hyperformance"]){
  background: rgb(0, 0, 0) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

div:has(.react-grid-layout) {
    background-color: rgba(20, 20, 20, 0.994) !important;
}

/* Order panel */
.react-grid-item,
.react-grid-item:has(button[color="primary"])>div[style*="flex-direction: column"]>div[style*="pointer-events: initial"]>div:first-child>div:first-child {
    background-color: rgb(4, 4, 4) !important;
        backdrop-filter: blur(12px);
}
.react-grid-item *> thead > tr > td {
    background-color: rgb(6, 6, 6) !important;
}

@media (max-width: 1000px) {
    div[style*="background-color: rgb(15, 26, 31);"] {
    background-color: rgba(10, 10, 10, 0.994) !important;    
    }
}