:root,
[data-theme=light],
.ui {
    color-scheme: light;
    --palette-bg-hsl: 235 44% 11%;
    --palette-bg: hsl(var(--palette-bg-hsl));
    --palette-surface-hsl: 235 44% 5%;
    --palette-surface: hsl(var(--palette-surface-hsl) / .6);
    --palette-text-hsl: 0 0% 100%;
    --palette-text: hsl(var(--palette-text-hsl));
    --palette-muted-hsl: 220 40% 60%;
    --palette-muted: hsl(var(--palette-muted-hsl));
    --palette-fill: hsl(var(--palette-surface-hsl) / .5);
    --palette-fill-soft: hsl(var(--palette-muted-hsl) / .05);
    --palette-stroke: hsl(var(--palette-muted-hsl) / .2);
    --palette-emphasis: hsl(217, 16%, 22%);
    --palette-emphasis-contrast: #fff;
    --palette-accent-h: 190;
    --palette-accent-s: 100%;
    --palette-accent-l: 50%;
    --palette-accent: hsl(var(--palette-accent-h) var(--palette-accent-s) var(--palette-accent-l));
    --palette-accent-contrast: var(--palette-bg);
    --palette-accent-soft: hsl(var(--palette-accent-h) var(--palette-accent-s) var(--palette-accent-l) / .2);
    --palette-accent-text: var(--palette-accent);
    --palette-danger-h: 17;
    --palette-danger-s: 90%;
    --palette-danger-l: 50%;
    --palette-danger: hsl(var(--palette-danger-h) var(--palette-danger-s) var(--palette-danger-l));
    --palette-danger-contrast: var(--color-bg);
    --palette-danger-soft: hsl(var(--palette-danger-h) var(--palette-danger-s) var(--palette-danger-l) / .15);
    --palette-danger-text: var(--palette-danger);
    --palette-warning-h: 60;
    --palette-warning-s: 100%;
    --palette-warning-l: 45%;
    --palette-warning: hsl(var(--palette-warning-h) var(--palette-warning-s) var(--palette-warning-l));
    --palette-warning-contrast: hsl(var(--palette-warning-h) var(--palette-warning-s) 15%);
    --palette-warning-soft: hsl(var(--palette-warning-h) var(--palette-warning-s) 92%);
    --palette-warning-text: hsl(var(--palette-warning-h) var(--palette-warning-s) 24%);
    --palette-success-h: 165;
    --palette-success-s: 100%;
    --palette-success-l: 36%;
    --palette-success: hsl(var(--palette-success-h) var(--palette-success-s) var(--palette-success-l));
    --palette-success-contrast: var(--color-bg);
    --palette-success-soft: hsl(var(--palette-success-h) var(--palette-success-s) var(--palette-success-l) / .15);
    --palette-success-text: hsl(var(--palette-success-h) var(--palette-success-s) 32%);
    --palette-activity-h: 23;
    --palette-activity-s: 100%;
    --palette-activity-l: 45%;
    --palette-activity: hsl(var(--palette-activity-h) var(--palette-activity-s) var(--palette-activity-l));
    --palette-activity-contrast: #fff;
    --palette-activity-soft: hsl(var(--palette-activity-h) var(--palette-activity-s) 92%);
    --palette-activity-text: hsl(var(--palette-activity-h) var(--palette-activity-s) calc(var(--palette-activity-l) * .9));
    --palette-learning-point: #ec7000
}

[data-theme=dark] {
    color-scheme: dark;
    --palette-bg-hsl: 250 20% 8%;
    --palette-surface-hsl: 250 20% 12%;
    --palette-text-hsl: 250 20% 93%;
    --palette-muted-hsl: 250 20% 60%;
    --palette-accent-soft: hsl(var(--palette-accent-h) var(--palette-accent-s) 20%);
    --palette-accent-text: hsl(var(--palette-accent-h) var(--palette-accent-s) calc(var(--palette-accent-l) * 1.3));
    --palette-danger-soft: hsl(var(--palette-danger-h) var(--palette-danger-s) 10%);
    --palette-danger-text: hsl(var(--palette-danger-h) var(--palette-danger-s) calc(var(--palette-danger-l) * 1.3));
    --palette-warning-soft: hsl(var(--palette-warning-h) var(--palette-warning-s) 10%);
    --palette-warning-text: hsl(var(--palette-warning-h) var(--palette-warning-s) 40%);
    --palette-success-soft: hsl(var(--palette-success-h) var(--palette-success-s) 10%);
    --palette-success-text: hsl(var(--palette-success-h) var(--palette-success-s) calc(var(--palette-success-l) * 1.3));
    --palette-activity-soft: hsl(var(--palette-activity-h) var(--palette-activity-s) 10%);
    --palette-activity-text: hsl(var(--palette-activity-h) var(--palette-activity-s) calc(var(--palette-activity-l) * 1.3))
}

:root {
    --shadow-sm: 0 1px 4px var(--palette-fill);
    --shadow-md: 0 0 0 1px var(--palette-fill), 0 5px 15px var(--palette-fill);
    --color-overlay: rgba(0, 0, 0, .5);
    --filter-hover: brightness(.95);
    --filter-active: brightness(.9);
    --ratio: 1.5;
    --space-px: 1px;
    --space-xxs: calc(var(--space-xs) / var(--ratio));
    --space-xs: calc(var(--space-sm) / var(--ratio));
    --space-sm: calc(var(--space-md) / var(--ratio));
    --space-md: 1rem;
    --space-lg: calc(var(--space-md) * var(--ratio));
    --space-xl: calc(var(--space-lg) * var(--ratio));
    --space-xxl: calc(var(--space-xl) * var(--ratio));
    --space-xxxl: calc(var(--space-xxl) * var(--ratio));
    --space-gutter: max(var(--space-lg), min(4vw, var(--space-xxl)));
    --font-system: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    --font-text: "Figtree", var(--font-system);
    --font-display: var(--font-text);
    --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 600;
    --line-height-default: 1.3;
    --line-height-condensed: 1.1;
    --line-height-expanded: 1.6;
    --measure: 100ch;
    --z-index-header: 100;
    --z-index-overlay: 200;
    --z-index-alerts: 300;
    --text-xxs: .8rem;
    --text-xs: .875rem;
    --text-sm: 1rem;
    --text-md: 1.25rem;
    --text-lg: 1.75rem;
    --text-xl: 2.5rem;
    --text-xxl: 3rem;
    --radius: 20px;
    --control-height: 2.5em;
    --control-height-small: 2.3em;
    --control-radius: var(--radius);
    --header-height: 6rem;
    --shape-check: polygon(0% 50%, 40% 90%, 100% 25%, 85% 10%, 40% 60%, 15% 35%);
    --mask-top: linear-gradient(to top, #000 80%, transparent 100%);
    --mask-bottom: linear-gradient(to bottom, #000 80%, transparent 100%);
    --mask-left: linear-gradient(to left, #000 80%, transparent 100%);
    --mask-right: linear-gradient(to right, #000 80%, transparent 100%)
}

:root,
.menu,
.dialog,
.ui>* {
    --color-bg: var(--palette-bg);
    --color-surface: var(--palette-surface);
    --color-text: var(--palette-text);
    --color-muted: var(--palette-muted);
    --color-fill: var(--palette-fill);
    --color-fill-soft: var(--palette-fill-soft);
    --color-stroke: var(--palette-stroke);
    --color-emphasis: var(--palette-emphasis);
    --color-emphasis-contrast: var(--palette-emphasis-contrast);
    --color-accent: var(--palette-accent);
    --color-accent-contrast: var(--palette-accent-contrast);
    --color-accent-soft: var(--palette-accent-soft);
    --color-accent-text: var(--palette-accent-text);
    --color-danger: var(--palette-danger);
    --color-danger-contrast: var(--palette-danger-contrast);
    --color-danger-soft: var(--palette-danger-soft);
    --color-danger-text: var(--palette-danger-text);
    --color-warning: var(--palette-warning);
    --color-warning-contrast: var(--palette-warning-contrast);
    --color-warning-soft: var(--palette-warning-soft);
    --color-warning-text: var(--palette-warning-text);
    --color-success: var(--palette-success);
    --color-success-contrast: var(--palette-success-contrast);
    --color-success-soft: var(--palette-success-soft);
    --color-success-text: var(--palette-success-text);
    --color-activity: var(--palette-activity);
    --color-activity-contrast: var(--palette-activity-contrast);
    --color-activity-soft: var(--palette-activity-soft);
    --color-activity-text: var(--palette-activity-text)
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 400;
    src: url(../font/figtree-latin-400-normal.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: italic;
    font-weight: 400;
    src: url(../font/figtree-latin-400-italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 500;
    src: url(../font/figtree-latin-500-normal.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: italic;
    font-weight: 500;
    src: url(../font/figtree-latin-500-italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: normal;
    font-weight: 700;
    src: url(../font/figtree-latin-700-normal.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Figtree;
    font-style: italic;
    font-weight: 700;
    src: url(../font/figtree-latin-700-italic.woff2) format("woff2")
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0
}

input,
button,
textarea,
select {
    font: inherit
}

[hidden] {
    display: none !important
}

[role=list] {
    list-style: none;
    padding: 0
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    margin: 0;
    padding: 0
}

@media (prefers-reduced-motion: reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

:root {
    scroll-behavior: smooth;
    scroll-padding: 100px
}

html {
    background: #101228;
    background: var(--color-bg);
    color: #fff;
    color: var(--color-text);
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text);
    font-size: 1rem;
    font-size: var(--text-sm);
    line-height: 1.3;
    line-height: var(--line-height-default)
}

@media (max-width: 40rem) {
    html {
        font-size: 95%
    }
}

input,
textarea,
select {
    color: #fff;
    color: var(--color-text)
}

* {
    word-wrap: anywhere;
    -webkit-tap-highlight-color: transparent
}

a,
.link {
    color: #00d4ff;
    color: var(--color-accent-text);
    -webkit-text-decoration: none;
    text-decoration: none;
    cursor: pointer
}

a:hover,
.link:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

hr {
    border: 0;
    border-top: 1px solid hsla(220, 40%, 60%, .2);
    border-top: 1px solid var(--color-stroke);
    margin: 2.25rem 0;
    margin: var(--space-xl) 0
}

strong {
    font-weight: 600;
    font-weight: var(--weight-bold)
}

mark {
    background: transparent;
    font-weight: 600;
    font-weight: var(--weight-bold);
    color: #00d4ff;
    color: var(--color-accent-text)
}

pre,
code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Courier New, monospace;
    font-family: var(--font-mono)
}

:focus {
    outline: 2px solid hsl(190, 100%, 50%);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px
}

[tabindex="-1"]:focus {
    outline: none
}

:focus:not(:focus-visible) {
    outline: none
}

.waterhole {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100svh
}

.waterhole__main {
    flex-grow: 1;
    display: flex;
    flex-direction: column
}

.waterhole__main *:not(textarea) {
    scroll-margin-top: 6rem;
    scroll-margin-top: var(--header-height)
}

ui-popup>.enter-active,
ui-popup>.leave-active {
    transition: transform .15s, opacity .15s
}

ui-popup>.enter-from,
ui-popup>.leave-to {
    transform: scale(0);
    opacity: 0
}

ui-popup::part(backdrop),
ui-popup>:nth-child(2) {
    z-index: 200;
    z-index: var(--z-index-overlay)
}

[data-placement=bottom] {
    transform-origin: top center
}

[data-placement=bottom-start] {
    transform-origin: top left
}

[data-placement=bottom-end] {
    transform-origin: top right
}

[data-placement=top] {
    transform-origin: bottom center
}

[data-placement=top-start] {
    transform-origin: bottom left
}

[data-placement=top-end] {
    transform-origin: bottom right
}

[data-placement=left] {
    transform-origin: right center
}

[data-placement=left-start] {
    transform-origin: right top
}

[data-placement=left-end] {
    transform-origin: right bottom
}

[data-placement=right] {
    transform-origin: left center
}

[data-placement=right-start] {
    transform-origin: left top
}

[data-placement=right-end] {
    transform-origin: left bottom
}

[data-placement^=top] {
    margin-top: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-top: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-top: calc(-1 * var(--space-xs))
}

[data-placement^=bottom] {
    margin-top: calc((1rem / 1.5) / 1.5);
    margin-top: calc(calc(1rem / 1.5) / 1.5);
    margin-top: var(--space-xs)
}

[data-placement^=left] {
    margin-left: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-left: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-left: calc(-1 * var(--space-xs))
}

[data-placement^=right] {
    margin-left: calc((1rem / 1.5) / 1.5);
    margin-left: calc(calc(1rem / 1.5) / 1.5);
    margin-left: var(--space-xs)
}

.h1,
.h2,
.h3,
h1,
h2,
h3 {
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-display)
}

.h4,
.h5,
.h6,
h4,
h5,
h6 {
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text)
}

.h1,
h1 {
    font-size: 3rem;
    font-size: var(--text-xxl);
    font-weight: 600;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    line-height: var(--line-height-condensed)
}

.h2,
h2 {
    font-size: 2.5rem;
    font-size: var(--text-xl);
    font-weight: 600;
    font-weight: var(--weight-bold);
    line-height: 1.1;
    line-height: var(--line-height-condensed)
}

.h3,
h3 {
    font-size: 1.75rem;
    font-size: var(--text-lg);
    font-weight: 400;
    font-weight: var(--weight-normal);
    line-height: 1.1;
    line-height: var(--line-height-condensed)
}

.h4,
h4 {
    font-size: 1.25rem;
    font-size: var(--text-md);
    font-weight: 600;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    line-height: var(--line-height-default)
}

.h5,
h5 {
    font-size: 1rem;
    font-size: var(--text-sm);
    font-weight: 600;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    line-height: var(--line-height-default)
}

.h6,
h6 {
    font-size: .875rem;
    font-size: var(--text-xs);
    font-weight: 600;
    font-weight: var(--weight-bold);
    line-height: 1.3;
    line-height: var(--line-height-default)
}

.subtitle {
    color: #708bc2;
    color: var(--color-muted);
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text);
    font-size: .8rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    text-transform: uppercase
}

.lead {
    font-size: 1.25rem;
    font-size: var(--text-md);
    line-height: 1.6;
    line-height: var(--line-height-expanded)
}

.content {
    word-wrap: break-word;
    line-height: 1.6;
    line-height: var(--line-height-expanded)
}

:where(.content)>*+*,
:where(.content) li p {
    margin-top: 1em
}

:where(.content)>*+h1 {
    margin-top: 1.8em
}

:where(.content)>*+h2 {
    margin-top: 1.8em
}

:where(.content)>*+h3 {
    margin-top: 1.8em
}

:where(.content)>*+h4 {
    margin-top: 1.8em
}

:where(.content)>*+h5 {
    margin-top: 1.8em
}

:where(.content)>*+h6 {
    margin-top: 1.8em
}

:where(.content) a {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

:where(.content) ol {
    list-style-position: outside;
    padding-left: 2em
}

:where(.content) ul {
    list-style: disc outside;
    padding-left: 2em
}

:where(.content) ul ul {
    list-style-type: circle
}

:where(.content) ul ul ul {
    list-style-type: square
}

:where(.content) blockquote {
    color: #708bc2;
    color: var(--color-muted);
    border-left: 5px solid hsla(235, 44%, 5%, .5);
    border-left: 5px solid var(--color-fill);
    padding-left: 1rem;
    padding-left: var(--space-md)
}

:where(.content) blockquote>*+* {
    margin-top: 1em
}

:where(.content) figcaption {
    color: #708bc2;
    color: var(--color-muted);
    font-size: 90%
}

:where(.content) code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Courier New, monospace;
    font-family: var(--font-mono);
    font-size: 80%;
    background: #708bc20d;
    background: var(--color-fill-soft);
    color: #00d4ff;
    color: var(--color-accent-text);
    padding: 3px;
    border-radius: 4px
}

:where(.content) pre code {
    padding: 1rem !important;
    padding: var(--space-md) !important
}

:where(.content) pre code {
    display: block;
    overflow: auto;
    background: #07081280;
    background: var(--color-fill);
    color: inherit;
    border-radius: 20px;
    border-radius: var(--radius)
}

:where(.content) img:not([class]) {
    max-width: 100%;
    height: auto
}

:where(.content) video:not([class]) {
    max-width: 100%;
    height: auto
}

:where(.content) hr:not([class]) {
    border: 0;
    border-top: 3px solid hsla(220, 40%, 60%, .2);
    border-top: 3px solid var(--color-stroke);
    margin: 2em 0
}

:where(.content--compact)>*+* {
    margin-top: 1em
}

:where(.content--compact) h1,
:where(.content--compact) h2,
:where(.content--compact) h3,
:where(.content--compact) h4,
:where(.content--compact) h5,
:where(.content--compact) h6 {
    font-size: 100%
}

.avatar {
    border-radius: 100%;
    background: #708bc233;
    background: var(--color-stroke);
    width: 100%;
    aspect-ratio: 1;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar text {
    font-size: 50px;
    fill: #101228;
    fill: var(--color-bg)
}

.badge,
.tag {
    border-radius: 999px;
    background: #07081280;
    background: var(--color-fill);
    color: #708bc2;
    color: var(--color-muted);
    border: 0;
    margin: 0;
    font-size: .8rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5ch;
    min-height: 1.7em;
    text-align: center;
    padding: 0 .6em;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0
}

.badge>.icon:first-child,
.tag>.icon:first-child {
    margin-left: -.2em;
    margin-right: .2em
}

.badge .icon,
.tag .icon {
    stroke-width: 2.5
}

.group-badge {
    background-color: #07081280;
    background-color: var(--group-color, var(--color-fill));
    color: #708bc2;
    color: var(--group-color-constrast, var(--color-muted))
}

.badge--hidden {
    border: 2px dotted hsla(220, 40%, 60%, .2);
    border: 2px dotted var(--color-stroke);
    background-color: transparent
}

.suspended-badge {
    background: #708bc2;
    background: var(--color-muted);
    color: #101228;
    color: var(--color-bg)
}

.tag {
    border-radius: 4px;
    font-weight: 400;
    padding: 0 .5em;
    font-size: .875rem;
    font-size: var(--text-xs)
}

.btn {
    -webkit-text-decoration: none !important;
    text-decoration: none !important
}

.btn {
    --btn-height: var(--control-height);
    --btn-padding: calc(.4 * var(--btn-height));
    height: 2.5em;
    height: var(--btn-height);
    background: #07081280;
    background: var(--color-fill);
    color: #fff;
    color: var(--color-text);
    border-radius: 20px;
    border-radius: var(--control-radius);
    border: 0;
    margin: 0;
    display: inline-flex;
    gap: calc(((1rem / 1.5) / 1.5) / 1.5);
    gap: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    gap: var(--space-xxs);
    align-items: center;
    justify-content: center;
    padding: 0 1em;
    padding: 0 var(--btn-padding);
    font-weight: 500;
    font-weight: var(--weight-medium);
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0
}

.btn:disabled {
    opacity: .5;
    cursor: default
}

.btn.is-disabled {
    opacity: .5;
    cursor: default
}

.btn .is-inert {
    cursor: default
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert) {
    cursor: pointer
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert):hover {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.btn.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert):focus {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.btn.is-focused:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.btn[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

.btn:not(:disabled):not(.is-disabled):not(.is-inert):active {
    transform: scale(.97)
}

.btn--outline {
    border: 1px solid hsla(220, 40%, 60%, .2);
    border: 1px solid var(--color-stroke);
    background: transparent;
    color: #708bc2;
    color: var(--color-muted)
}

.btn--outline:hover {
    background: #07081280;
    background: var(--color-fill)
}

.btn--outline-accent {
    border: 2px solid hsl(190, 100%, 50%);
    border: 2px solid var(--color-accent);
    background: transparent
}

.btn--outline-accent:hover {
    background: #00d4ff;
    background: var(--color-accent);
    color: #101228;
    color: var(--color-bg);
}

.btn--transparent:disabled {
    background: transparent;
    color: #708bc2;
    color: var(--color-muted)
}

:where(:not([open]))>.btn--transparent:where(:not(:hover):not(.is-hovered):not(:focus):not(.is-focused)),
.btn--transparent.is-disabled,
.btn--transparent:not(button):not(a):not([role=button]):not([role=link]) {
    background: transparent;
    color: #708bc2;
    color: var(--color-muted)
}

.btn--placeholder {
    border: 1px dashed hsla(220, 40%, 60%, .2);
    border: 1px dashed var(--color-stroke)
}

.btn--sm {
    --btn-height: var(--control-height-small);
    --btn-padding: calc(.3 * var(--btn-height));
    font-size: 87.5%
}

.btn--narrow {
    --btn-padding: calc(.3 * var(--btn-height))
}

.btn--wide {
    --btn-padding: calc(.5 * var(--btn-height))
}

.btn--start {
    margin-left: calc(-1 * var(--btn-padding))
}

.btn--end {
    margin-right: calc(-1 * var(--btn-padding))
}

.btn--icon {
    width: var(--btn-height);
    padding: 0;
    border-radius: 100px;
    position: relative
}

.btn--icon .avatar {
    width: 100%;
    height: 100%
}

.btn--icon .icon {
    font-size: 120%
}

.btn--icon .badge {
    position: absolute;
    top: 0;
    right: 0
}

.btn--icon .label {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.btn.is-active,
.btn[aria-pressed=true],
:checked+.btn {
    color: #00d4ff !important;
    color: var(--color-accent-text) !important;
    background: #00d4ff33 !important;
    background: var(--color-accent-soft) !important
}

.btn.is-active,
.btn[aria-pressed=true],
:checked+.btn {
    border-color: transparent
}

.btn-group {
    display: flex;
    align-items: stretch;
    gap: 1px
}

.btn-group>:first-child:not(:only-child),
.btn-group>:first-child:not(:only-child)>.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group>:not(:first-child):not(:last-child),
.btn-group>:not(:first-child):not(:last-child)>.btn {
    border-radius: 0
}

.btn-group>:last-child:not(:only-child),
.btn-group>:last-child:not(:only-child)>.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.card {
    --color-bg: var(--palette-surface);
    border-radius: 20px;
    border-radius: var(--radius);
    background: #07081299;
    background: var(--color-bg);
    box-shadow: 0 1px 4px #07081280;
    box-shadow: var(--shadow-sm)
}

.card--interactive {
    transition: all .2s
}

.card--interactive:hover {
    transform: scale(1.02);
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

.card .card {
    border: 1px solid hsla(235, 44%, 5%, .5);
    border: 1px solid var(--color-fill)
}

.card__header {
    padding: calc(1rem / 1.5) 1rem;
    padding: var(--space-sm) var(--space-md);
    border-radius: 20px 20px 0 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: #101228;
    background: var(--color-bg)
}

summary.card__header {
    transform: none !important;
    outline: none !important
}

summary.card__header:disabled {
    opacity: .5;
    cursor: default
}

summary.card__header.is-disabled {
    opacity: .5;
    cursor: default
}

summary.card__header .is-inert {
    cursor: default
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert) {
    cursor: pointer
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):hover {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

summary.card__header.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):focus {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

summary.card__header.is-focused:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

summary.card__header[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

summary.card__header:not(:disabled):not(.is-disabled):not(.is-inert):active {
    transform: scale(.97)
}

summary.card__header::marker,
summary.card__header::-webkit-details-marker {
    color: #708bc233;
    color: var(--color-stroke);
    margin-right: calc(1rem / 1.5);
    margin-right: var(--space-sm)
}

summary.card__header:focus-visible {
    background: #00d4ff33;
    background: var(--color-accent-soft)
}

details.card:not([open]) .card__header {
    border-radius: 20px;
    border-radius: var(--radius)
}

.card__body {
    padding: min(max(1.5rem, min(4vw, 3.375rem)), 1.5rem);
    padding: min(var(--space-gutter), var(--space-lg))
}

.card__row {
    padding: calc(1rem / 1.5) 1rem;
    padding: var(--space-sm) var(--space-md)
}

:not(.divider)+.card__row {
    border-top: 1px solid hsla(235, 44%, 5%, .5);
    border-top: 1px solid var(--color-fill)
}

.card-list>* {
    margin-bottom: 1.5rem;
    margin-bottom: var(--space-lg)
}

.choice {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: calc(1rem / 1.5);
    gap: var(--space-sm)
}

.choice>:disabled+* {
    color: #708bc2;
    color: var(--color-muted)
}

input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #101228;
    background-color: var(--color-bg);
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    border: 2px solid hsla(220, 40%, 60%, .2);
    border: 2px solid var(--color-stroke);
    vertical-align: -.2em;
    position: relative;
    cursor: pointer
}

input[type=checkbox]:checked:not(.does-not-exist) {
    border: 0
}

input[type=checkbox][type=checkbox]:indeterminate {
    border: 0
}

input[type=radio]:checked:not(.does-not-exist) {
    border: 0
}

input[type=radio][type=checkbox]:indeterminate {
    border: 0
}

input.indeterminate[type=checkbox]:not(.does-not-exist),
input.indeterminate[type=radio]:not(.does-not-exist) {
    border: 0
}

input[type=checkbox]:checked:not(.does-not-exist):before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input[type=checkbox][type=checkbox]:indeterminate:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input.indeterminate[type=checkbox]:not(.does-not-exist):before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input[type=radio]:checked:not(.does-not-exist):before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input[type=radio][type=checkbox]:indeterminate:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input.indeterminate[type=radio]:not(.does-not-exist):before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #101228;
    background: var(--color-accent-contrast)
}

input[type=checkbox]:not(:disabled):not([aria-disabled=true]):active,
input[type=radio]:not(:disabled):not([aria-disabled=true]):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

input[type=checkbox]:not(:disabled):not([aria-disabled=true]):checked:not(.does-not-exist) {
    background: #00d4ff;
    background: var(--color-accent)
}

input[type=checkbox][type=checkbox]:not(:disabled):not([aria-disabled=true]):indeterminate {
    background: #00d4ff;
    background: var(--color-accent)
}

input.indeterminate[type=checkbox]:not(:disabled):not([aria-disabled=true]):not(.does-not-exist) {
    background: #00d4ff;
    background: var(--color-accent)
}

input[type=radio]:not(:disabled):not([aria-disabled=true]):checked:not(.does-not-exist) {
    background: #00d4ff;
    background: var(--color-accent)
}

input[type=radio][type=checkbox]:not(:disabled):not([aria-disabled=true]):indeterminate {
    background: #00d4ff;
    background: var(--color-accent)
}

input.indeterminate[type=radio]:not(:disabled):not([aria-disabled=true]):not(.does-not-exist) {
    background: #00d4ff;
    background: var(--color-accent)
}

input[type=checkbox]:disabled,
input[type=radio]:disabled,
input[type=checkbox][aria-disabled=true],
input[type=radio][aria-disabled=true] {
    background: #708bc233;
    background: var(--color-stroke);
    border: 0
}

input[type=checkbox]:disabled:checked:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=checkbox][type=checkbox]:disabled:indeterminate:before {
    background: #708bc2;
    background: var(--color-muted)
}

input.indeterminate[type=checkbox]:disabled:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=radio]:disabled:checked:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=radio][type=checkbox]:disabled:indeterminate:before {
    background: #708bc2;
    background: var(--color-muted)
}

input.indeterminate[type=radio]:disabled:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=checkbox][aria-disabled=true]:checked:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=checkbox][aria-disabled=true][type=checkbox]:indeterminate:before {
    background: #708bc2;
    background: var(--color-muted)
}

input.indeterminate[type=checkbox][aria-disabled=true]:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=radio][aria-disabled=true]:checked:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=radio][aria-disabled=true][type=checkbox]:indeterminate:before {
    background: #708bc2;
    background: var(--color-muted)
}

input.indeterminate[type=radio][aria-disabled=true]:not(.does-not-exist):before {
    background: #708bc2;
    background: var(--color-muted)
}

input[type=checkbox] {
    border-radius: .3em
}

input[type=checkbox]:checked:before {
    width: 60%;
    height: 60%;
    clip-path: polygon(0% 50%, 40% 90%, 100% 25%, 85% 10%, 40% 60%, 15% 35%);
    clip-path: var(--shape-check)
}

input[type=checkbox]:indeterminate:before {
    width: 60%;
    height: 10%
}

input.indeterminate[type=checkbox]:before {
    width: 60%;
    height: 10%
}

input[type=radio] {
    border-radius: 100%
}

input[type=radio]:checked:before {
    width: 40%;
    height: 40%;
    border-radius: 100%
}

.dialog {
    --color-bg: var(--palette-bg);
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    border-radius: 20px;
    border-radius: var(--radius);
    box-shadow: 0 1px 4px #07081280;
    box-shadow: var(--shadow-sm);
    background: #101228;
    background: var(--color-bg);
    color: #fff;
    color: var(--color-text)
}

.dialog__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--space-md);
    padding: 2.25rem;
    padding: var(--space-xl);
    padding-bottom: 0
}

.dialog__body {
    padding: 2.25rem;
    padding: var(--space-xl)
}

.dialog--sm {
    width: 45ch
}

.divider {
    display: flex;
    align-items: center;
    color: #708bc2;
    color: var(--color-muted);
    text-transform: uppercase;
    font-size: .8rem;
    font-size: var(--text-xxs);
    font-weight: 600;
    font-weight: var(--weight-bold);
    padding: calc((1rem / 1.5) / 1.5) 0;
    padding: calc(calc(1rem / 1.5) / 1.5) 0;
    padding: var(--space-xs) 0
}

.divider:before,
.divider:after {
    content: "";
    flex-grow: 1;
    border-bottom: 2px solid
}

.divider:not(:empty):before {
    margin-right: 5px
}

.divider:not(:empty):after {
    margin-left: 5px
}

.faq {
    padding: 1.5rem;
    padding: var(--space-lg);
    border-radius: 20px;
    border-radius: var(--radius);
    transition: all .3s;
    background: #07081299;
    background: var(--color-surface)
}

.faq>summary {
    cursor: pointer;
    padding: 1.5rem;
    padding: var(--space-lg);
    margin: -1.5rem;
    margin: calc(-1 * var(--space-lg));
    transition: all .3s;
    display: flex;
    justify-content: space-between;
    gap: calc(1rem / 1.5);
    gap: var(--space-sm)
}

.faq>summary::marker,
.faq>summary::-webkit-details-marker {
    display: none
}

.faq>summary:after {
    content: "+";
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-system);
    font-weight: 200;
    font-size: 2.5rem;
    font-size: var(--text-xl);
    color: #00d4ff;
    color: var(--color-accent);
    line-height: 1;
    margin-top: -.25em;
    margin-bottom: -.25em
}

.faq[open]>summary {
    margin-bottom: 0
}

.faq[open]>summary:after {
    content: "–"
}

.field {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -moz-column-gap: var(--space-md);
    column-gap: var(--space-md);
    row-gap: calc((1rem / 1.5) / 1.5);
    row-gap: calc(calc(1rem / 1.5) / 1.5);
    row-gap: var(--space-xs);
    align-items: flex-start
}

.field>:first-child:not(:only-child) {
    flex-basis: 20%;
    min-width: 15ch;
    flex-shrink: 0;
    flex-grow: 1
}

.field>:nth-child(2) {
    flex-basis: calc(80% - 1rem);
    flex-basis: calc(80% - var(--space-md));
    flex-grow: 999;
    min-width: 0;
    margin: 0
}

.stacked-fields .field>:first-child {
    flex-basis: 100%
}

.field__label {
    font-size: .875rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--weight-medium)
}

.field__description {
    font-size: .875rem;
    font-size: var(--text-xs);
    color: #708bc2;
    color: var(--color-muted)
}

.field__status {
    font-size: .875rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    color: #708bc2;
    color: var(--color-muted)
}

.has-error .field__status {
    color: #f24e0d;
    color: var(--color-danger-text)
}

.icon {
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    vertical-align: -.2em;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain
}

.icon--thin,
.icon--thin * {
    stroke-width: 1.5
}

.icon--thick {
    stroke-width: 2.5
}

.icon--narrow {
    margin-left: -.2em;
    margin-right: -.2em
}

.with-icon {
    display: inline-flex;
    align-items: center
}

.with-icon>.icon {
    margin-right: .2em
}

.with-icon>.icon:not(:first-child) {
    margin-left: .2em
}

.icon-tabler-lock circle {
    display: none
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: .3em .1em;
    border-radius: 100%;
    background: currentColor;
    vertical-align: -5px
}

.emoji {
    width: 1.3em;
    height: 1.3em;
    vertical-align: -.3em
}

input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]),
textarea,
select,
.input {
    display: block;
    width: 100%;
    border: 1px solid hsla(220, 40%, 60%, .2);
    border: 1px solid var(--color-stroke);
    background: #101228;
    background: var(--color-bg);
    color: #fff;
    color: var(--color-text);
    height: 2.5em;
    height: var(--control-height);
    box-sizing: border-box;
    border-radius: 20px;
    border-radius: var(--control-radius);
    padding: .55em .7em;
    -webkit-appearance: none
}

input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]):focus,
textarea:focus,
select:focus,
.input:focus,
input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]):focus-within,
textarea:focus-within,
select:focus-within,
.input:focus-within,
input.is-focused:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]),
textarea.is-focused,
select.is-focused,
.input.is-focused {
    outline: none;
    border-color: #00d4ff;
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px #00d4ff;
    box-shadow: inset 0 0 0 1px var(--color-accent)
}

.has-error input:where([type=date], [type=datetime-local], [type=email], [type=file], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week]),
.has-error textarea,
.has-error select,
.has-error .input {
    border-color: #f24e0d;
    border-color: var(--color-danger)
}

input[type=file] {
    overflow: hidden
}

input[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

input[type=file]::file-selector-button {
    padding: 0 1rem 0 0;
    padding: 0 var(--space-md) 0 0;
    margin: 0;
    width: auto;
    background: none;
    color: #00d4ff;
    color: var(--color-accent-text);
    font-weight: 600;
    font-weight: var(--weight-bold);
    pointer-events: none;
    border: 0
}

*::-moz-placeholder {
    color: #708bc2;
    color: var(--color-muted)
}

*::placeholder {
    color: #708bc2;
    color: var(--color-muted)
}

textarea,
.textarea,
select[multiple] {
    height: auto;
    padding: .7rem;
    border-radius: 20px;
    border-radius: var(--radius)
}

select:not([multiple]),
.select {
    cursor: default;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="%23888"%3E%3Cpath fill-rule="evenodd" d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /%3E%3C/svg%3E');
    background-position: center right .5em;
    background-size: 1.25em;
    background-repeat: no-repeat;
    padding-right: 2em
}

*:invalid+.hide-if-invalid {
    visibility: hidden
}

.input-container {
    --input-container-padding-start: 2.6em;
    --input-container-padding-end: 2.6em;
    display: flex;
    align-items: center
}

.input-container>:not(input):not(.input):not(select):not(script) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.input-container>:not(input):not(.input):not(select):not(script):first-child {
    width: var(--input-container-padding-start);
    margin-right: calc(-1 * var(--input-container-padding-start))
}

.input-container>:not(input):not(.input):not(select):not(script):last-child {
    width: var(--input-container-padding-end);
    margin-left: calc(-1 * var(--input-container-padding-end))
}

.input-container>input:not(.does-not-exist):nth-child(2) {
    padding-left: var(--input-container-padding-start)
}

.input-container>.input:nth-child(2) {
    padding-left: var(--input-container-padding-start)
}

.input-container>select:not(.does-not-exist):nth-child(2) {
    padding-left: var(--input-container-padding-start)
}

.input-container>input:not(.does-not-exist):nth-last-child(2) {
    padding-right: var(--input-container-padding-end)
}

.input-container>.input:nth-last-child(2) {
    padding-right: var(--input-container-padding-end)
}

.input-container>select:not(.does-not-exist):nth-last-child(2) {
    padding-right: var(--input-container-padding-end)
}

.menu {
    --color-bg: var(--palette-surface);
    display: block;
    background: #07081299;
    background: var(--color-bg);
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md);
    padding: calc((1rem / 1.5) / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5);
    padding: var(--space-xs);
    border-radius: 20px;
    border-radius: var(--radius);
    min-width: 15ch;
    width: -moz-max-content;
    width: max-content;
    max-width: 30ch;
    z-index: 200;
    z-index: var(--z-index-overlay);
    font-size: .875rem;
    font-size: var(--text-xs);
    overflow: auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px)
}

.menu--lg {
    max-width: 50ch
}

.menu-item {
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    transform: none !important
}

.menu-item {
    border-radius: calc(20px * 2 / 3);
    border-radius: calc(var(--radius) * 2 / 3);
    border: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    display: flex;
    gap: calc((1rem / 1.5) / 1.5);
    gap: calc(calc(1rem / 1.5) / 1.5);
    gap: var(--space-xs);
    width: 100%;
    align-items: flex-start;
    padding: calc((1rem / 1.5) / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5);
    padding: var(--space-xs);
    color: #fff;
    color: var(--color-text);
    text-align: left
}

.menu-item:disabled {
    opacity: .5;
    cursor: default
}

.menu-item.is-disabled {
    opacity: .5;
    cursor: default
}

.menu-item .is-inert {
    cursor: default
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert) {
    cursor: pointer
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):hover {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.menu-item.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):focus {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.menu-item.is-focused:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.menu-item[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

.menu-item:not(:disabled):not(.is-disabled):not(.is-inert):active {
    transform: scale(.97)
}

.menu-item:hover,
.menu-item.is-hovered,
.menu-item:focus,
.menu-item.is-focused,
.menu-item[aria-selected=true] {
    background: #07081280;
    background: var(--color-fill);
    outline: none
}

.menu-item.color-danger:hover,
.menu-item.color-danger.is-hovered {
    background: #f24e0d;
    background: var(--color-danger);
    color: #101228;
    color: var(--color-danger-contrast)
}

.menu-item.is-active,
.menu-item[aria-current=page],
.menu-item[aria-checked=true] {
    color: #00d4ff;
    color: var(--color-accent-text);
    background: #00d4ff33;
    background: var(--color-accent-soft)
}

.menu-item__title {
    display: block;
    font-weight: 500;
    font-weight: var(--weight-medium)
}

.menu-item__description {
    display: block;
    color: #708bc2;
    color: var(--color-muted);
    font-size: 90%;
    margin-top: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-top: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-top: var(--space-xxs)
}

.menu-item__check {
    margin-left: auto
}

.menu-item:not(.is-active):not([aria-current=page]):not([aria-checked=true]) .menu-item__check {
    visibility: hidden
}

.menu-divider {
    margin: calc((1rem / 1.5) / 1.5);
    margin: calc(calc(1rem / 1.5) / 1.5);
    margin: var(--space-xs)
}

.menu-divider+.menu-divider,
.menu>.menu-divider:first-child,
.menu>.menu-divider:last-child {
    display: none
}

.menu-heading {
    padding: calc((1rem / 1.5) / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5);
    padding: var(--space-xs);
    color: #708bc2;
    color: var(--color-muted);
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text);
    font-size: .8rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    text-transform: uppercase
}

.menu-sticky {
    position: sticky;
    top: calc(-1 * (1rem / 1.5));
    top: calc(-1 * calc(1rem / 1.5));
    top: calc(-1 * var(--space-sm));
    margin-top: calc(-1 * (1rem / 1.5));
    margin-top: calc(-1 * calc(1rem / 1.5));
    margin-top: calc(-1 * var(--space-sm));
    padding-top: calc((1rem / 1.5) / 1.5);
    padding-top: calc(calc(1rem / 1.5) / 1.5);
    padding-top: var(--space-xs);
    background: #101228;
    background: var(--color-bg);
    z-index: 1
}

ui-popup:has(>.drawer)::part(backdrop) {
    background: #00000080;
    background: var(--color-overlay)
}

.drawer {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    max-height: none !important
}

.drawer {
    background: #101228;
    background: var(--color-bg);
    margin: 0;
    height: 100vh;
    width: min(70vw, 30ch);
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    padding: var(--space-lg);
    z-index: 200;
    z-index: var(--z-index-overlay);
    overflow: auto
}

.drawer.enter-from,
.drawer.leave-to {
    transform: translate(-100%);
    opacity: 1;
    opacity: initial
}

.drawer--right {
    left: auto !important;
    right: 0 !important
}

.drawer--right.enter-from,
.drawer--right.leave-to {
    transform: translate(100%)
}

ui-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: flex-start;
    justify-content: center;
    z-index: 200;
    z-index: var(--z-index-overlay);
    padding: 5.0625rem max(1.5rem, min(4vw, 3.375rem));
    padding: var(--space-xxxl) var(--space-gutter);
    overflow: auto
}

ui-modal:not([hidden]) {
    display: flex
}

ui-modal .dialog {
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md);
    border: 0
}

ui-modal::part(backdrop) {
    background: #00000080;
    background: var(--color-overlay)
}

ui-modal::part(content) {
    max-width: 100%
}

ui-modal.enter-active,
ui-modal.leave-active {
    transition: opacity .3s
}

ui-modal.enter-from,
ui-modal.leave-to {
    opacity: 0
}

ui-modal.enter-active::part(content),
ui-modal.leave-active::part(content) {
    transition: transform .3s cubic-bezier(.54, 1.12, .38, 1.11), opacity .3s
}

ui-modal.enter-from::part(content),
ui-modal.leave-to::part(content) {
    transform: scale(.7);
    opacity: 0
}

.nav {
    list-style: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0
}

.nav-heading {
    margin-bottom: calc((1rem / 1.5) / 1.5);
    margin-bottom: calc(calc(1rem / 1.5) / 1.5);
    margin-bottom: var(--space-xs);
    padding: 0 calc(1rem / 1.5);
    padding: 0 var(--space-sm);
    width: 100%;
    color: #708bc2;
    color: var(--color-muted);
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text);
    font-size: .8rem;
    font-size: var(--text-xxs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    text-transform: uppercase
}

*+.nav-heading {
    margin-top: 1.5rem;
    margin-top: var(--space-lg)
}

.nav-link {
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    transform: none !important
}

.nav-link {
    display: flex;
    align-items: center;
    gap: calc((1rem / 1.5) / 1.5);
    gap: calc(calc(1rem / 1.5) / 1.5);
    gap: var(--space-xs);
    min-height: 2.5em;
    min-height: var(--control-height);
    padding: calc((1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: var(--space-xs) var(--space-sm);
    font-weight: 500;
    font-weight: var(--weight-medium);
    color: #fff;
    color: var(--color-text);
    border-radius: 20px;
    border-radius: var(--control-radius)
}

.nav-link>:not(.icon) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.nav-link>.icon {
    font-size: 120%
}

.nav-link>[class^=icon-fa] {
    padding: 2px
}

.nav-link>.badge {
    margin-left: auto
}

.nav-link:disabled {
    opacity: .5;
    cursor: default
}

.nav-link.is-disabled {
    opacity: .5;
    cursor: default
}

.nav-link .is-inert {
    cursor: default
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert) {
    cursor: pointer
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):hover {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.nav-link.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):focus {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.nav-link.is-focused:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.nav-link[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

.nav-link:not(:disabled):not(.is-disabled):not(.is-inert):active {
    transform: scale(.97)
}

.nav-link:hover,
.nav-link:focus {
    background: #07081280;
    background: var(--color-fill)
}

.nav-link.is-active,
.nav-link[aria-current=page] {
    color: #00d4ff;
    color: var(--color-accent-text);
    background: #00d4ff33;
    background: var(--color-accent-soft)
}

.nav-link.is-active .badge,
.nav-link[aria-current=page] .badge {
    background: inherit;
    color: inherit
}

@media (max-width: 52rem) {
    .collapsible-nav {
        flex: 1 1 10ch;
        min-width: 0;
        max-width: -moz-fit-content;
        max-width: fit-content
    }
}

@media (min-width: 52.001rem) {
    .collapsible-nav>:first-child {
        display: none
    }

    .collapsible-nav>:last-child {
        display: contents !important
    }
}

.skip-link {
    color: #101228;
    color: var(--color-accent-contrast);
    background-color: #00d4ff;
    background-color: var(--color-accent);
    padding: calc((1rem / 1.5) / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5);
    padding: var(--space-xs);
    position: absolute;
    top: -10rem
}

.skip-link:focus {
    position: absolute;
    z-index: 200;
    z-index: var(--z-index-overlay);
    top: calc((1rem / 1.5) / 1.5);
    top: calc(calc(1rem / 1.5) / 1.5);
    top: var(--space-xs);
    left: calc((1rem / 1.5) / 1.5);
    left: calc(calc(1rem / 1.5) / 1.5);
    left: var(--space-xs)
}

ui-tooltip {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.tooltip {
    background: #2f3641;
    background: var(--color-emphasis);
    border-radius: 20px;
    border-radius: var(--radius);
    box-shadow: 1rem;
    box-shadow: var(--space-md);
    color: #fff;
    color: var(--color-emphasis-contrast);
    font-size: .875rem;
    font-size: var(--text-xs);
    font-weight: 500;
    font-weight: var(--weight-medium);
    max-width: 30ch;
    padding: calc((1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: var(--space-xs) var(--space-sm);
    z-index: 200;
    z-index: var(--z-index-overlay);
    text-align: center;
    overflow: hidden;
    --color-text: var(--color-emphasis-contrast);
    --color-muted: rgba(255, 255, 255, .5);
    --color-accent: var(--color-text)
}

.tooltip small {
    font-size: .8rem;
    font-size: var(--text-xxs);
    color: #708bc2;
    color: var(--color-muted)
}

.tooltip.enter-active,
.tooltip.leave-active {
    transition: opacity .2s, transform .2s
}

.tooltip.enter-from,
.tooltip.leave-to {
    opacity: 0;
    transform: scale(.95)
}

.tooltip--block {
    text-align: left;
    padding: calc((1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5) calc(1rem / 1.5);
    padding: var(--space-xs) var(--space-sm);
    font-size: .8rem;
    font-size: var(--text-xxs)
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: max(1.5rem, min(4vw, 3.375rem));
    padding-left: var(--space-gutter);
    padding-right: max(1.5rem, min(4vw, 3.375rem));
    padding-right: var(--space-gutter);
    max-width: 86rem;
    width: 100%
}

.section {
    padding-top: max(1.5rem, min(4vw, 3.375rem));
    padding-top: var(--space-gutter);
    padding-bottom: max(1.5rem, min(4vw, 3.375rem));
    padding-bottom: var(--space-gutter)
}

.measure {
    max-width: 100ch;
    max-width: var(--measure)
}

.gap-px {
    gap: 1px;
    gap: var(--space-px)
}

.gap-x-px {
    -moz-column-gap: 1px;
    column-gap: 1px;
    -moz-column-gap: var(--space-px);
    column-gap: var(--space-px)
}

.gap-y-px {
    row-gap: 1px;
    row-gap: var(--space-px)
}

.p-px {
    padding: 1px;
    padding: var(--space-px)
}

.px-px {
    padding-left: 1px;
    padding-right: 1px;
    padding-left: var(--space-px);
    padding-right: var(--space-px)
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-top: var(--space-px);
    padding-bottom: var(--space-px)
}

.m-px {
    margin: 1px;
    margin: var(--space-px)
}

.mx-px {
    margin-left: 1px;
    margin-right: 1px;
    margin-left: var(--space-px);
    margin-right: var(--space-px)
}

.my-px {
    margin-top: 1px;
    margin-bottom: 1px;
    margin-top: var(--space-px);
    margin-bottom: var(--space-px)
}

.mt-px {
    margin-top: 1px;
    margin-top: var(--space-px)
}

.-m-px {
    margin: -1px;
    margin: calc(-1 * var(--space-px))
}

.-mx-px {
    margin-left: -1px;
    margin-right: -1px;
    margin-left: calc(-1 * var(--space-px));
    margin-right: calc(-1 * var(--space-px))
}

.-my-px {
    margin-top: -1px;
    margin-bottom: -1px;
    margin-top: calc(-1 * var(--space-px));
    margin-bottom: calc(-1 * var(--space-px))
}

.-mt-px {
    margin-top: -1px;
    margin-top: calc(-1 * var(--space-px))
}

.gap-xxs {
    gap: calc(((1rem / 1.5) / 1.5) / 1.5);
    gap: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    gap: var(--space-xxs)
}

.gap-x-xxs {
    -moz-column-gap: calc(((1rem / 1.5) / 1.5) / 1.5);
    column-gap: calc(((1rem / 1.5) / 1.5) / 1.5);
    -moz-column-gap: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    column-gap: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    -moz-column-gap: var(--space-xxs);
    column-gap: var(--space-xxs)
}

.gap-y-xxs {
    row-gap: calc(((1rem / 1.5) / 1.5) / 1.5);
    row-gap: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    row-gap: var(--space-xxs)
}

.p-xxs {
    padding: calc(((1rem / 1.5) / 1.5) / 1.5);
    padding: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    padding: var(--space-xxs)
}

.px-xxs {
    padding-left: calc(((1rem / 1.5) / 1.5) / 1.5);
    padding-right: calc(((1rem / 1.5) / 1.5) / 1.5);
    padding-left: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    padding-right: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    padding-left: var(--space-xxs);
    padding-right: var(--space-xxs)
}

.py-xxs {
    padding-top: calc(((1rem / 1.5) / 1.5) / 1.5);
    padding-bottom: calc(((1rem / 1.5) / 1.5) / 1.5);
    padding-top: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    padding-bottom: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    padding-top: var(--space-xxs);
    padding-bottom: var(--space-xxs)
}

.m-xxs {
    margin: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin: var(--space-xxs)
}

.mx-xxs {
    margin-left: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-right: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-left: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-right: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-left: var(--space-xxs);
    margin-right: var(--space-xxs)
}

.my-xxs {
    margin-top: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-bottom: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-top: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-bottom: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-top: var(--space-xxs);
    margin-bottom: var(--space-xxs)
}

.mt-xxs {
    margin-top: calc(((1rem / 1.5) / 1.5) / 1.5);
    margin-top: calc(calc(calc(1rem / 1.5) / 1.5) / 1.5);
    margin-top: var(--space-xxs)
}

.-m-xxs {
    margin: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin: calc(-1 * var(--space-xxs))
}

.-mx-xxs {
    margin-left: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin-right: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin-left: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin-right: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin-left: calc(-1 * var(--space-xxs));
    margin-right: calc(-1 * var(--space-xxs))
}

.-my-xxs {
    margin-top: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin-bottom: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin-top: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin-bottom: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin-top: calc(-1 * var(--space-xxs));
    margin-bottom: calc(-1 * var(--space-xxs))
}

.-mt-xxs {
    margin-top: calc(-1 * (((1rem / 1.5) / 1.5) / 1.5));
    margin-top: calc(-1 * calc(calc(calc(1rem / 1.5) / 1.5) / 1.5));
    margin-top: calc(-1 * var(--space-xxs))
}

.gap-xs {
    gap: calc((1rem / 1.5) / 1.5);
    gap: calc(calc(1rem / 1.5) / 1.5);
    gap: var(--space-xs)
}

.gap-x-xs {
    -moz-column-gap: calc((1rem / 1.5) / 1.5);
    column-gap: calc((1rem / 1.5) / 1.5);
    -moz-column-gap: calc(calc(1rem / 1.5) / 1.5);
    column-gap: calc(calc(1rem / 1.5) / 1.5);
    -moz-column-gap: var(--space-xs);
    column-gap: var(--space-xs)
}

.gap-y-xs {
    row-gap: calc((1rem / 1.5) / 1.5);
    row-gap: calc(calc(1rem / 1.5) / 1.5);
    row-gap: var(--space-xs)
}

.p-xs {
    padding: calc((1rem / 1.5) / 1.5);
    padding: calc(calc(1rem / 1.5) / 1.5);
    padding: var(--space-xs)
}

.px-xs {
    padding-left: calc((1rem / 1.5) / 1.5);
    padding-right: calc((1rem / 1.5) / 1.5);
    padding-left: calc(calc(1rem / 1.5) / 1.5);
    padding-right: calc(calc(1rem / 1.5) / 1.5);
    padding-left: var(--space-xs);
    padding-right: var(--space-xs)
}

.py-xs {
    padding-top: calc((1rem / 1.5) / 1.5);
    padding-bottom: calc((1rem / 1.5) / 1.5);
    padding-top: calc(calc(1rem / 1.5) / 1.5);
    padding-bottom: calc(calc(1rem / 1.5) / 1.5);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs)
}

.m-xs {
    margin: calc((1rem / 1.5) / 1.5);
    margin: calc(calc(1rem / 1.5) / 1.5);
    margin: var(--space-xs)
}

.mx-xs {
    margin-left: calc((1rem / 1.5) / 1.5);
    margin-right: calc((1rem / 1.5) / 1.5);
    margin-left: calc(calc(1rem / 1.5) / 1.5);
    margin-right: calc(calc(1rem / 1.5) / 1.5);
    margin-left: var(--space-xs);
    margin-right: var(--space-xs)
}

.my-xs {
    margin-top: calc((1rem / 1.5) / 1.5);
    margin-bottom: calc((1rem / 1.5) / 1.5);
    margin-top: calc(calc(1rem / 1.5) / 1.5);
    margin-bottom: calc(calc(1rem / 1.5) / 1.5);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs)
}

.mt-xs {
    margin-top: calc((1rem / 1.5) / 1.5);
    margin-top: calc(calc(1rem / 1.5) / 1.5);
    margin-top: var(--space-xs)
}

.-m-xs {
    margin: calc(-1 * ((1rem / 1.5) / 1.5));
    margin: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin: calc(-1 * var(--space-xs))
}

.-mx-xs {
    margin-left: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-right: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-left: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-right: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-left: calc(-1 * var(--space-xs));
    margin-right: calc(-1 * var(--space-xs))
}

.-my-xs {
    margin-top: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-bottom: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-top: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-bottom: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-top: calc(-1 * var(--space-xs));
    margin-bottom: calc(-1 * var(--space-xs))
}

.-mt-xs {
    margin-top: calc(-1 * ((1rem / 1.5) / 1.5));
    margin-top: calc(-1 * calc(calc(1rem / 1.5) / 1.5));
    margin-top: calc(-1 * var(--space-xs))
}

.gap-sm {
    gap: calc(1rem / 1.5);
    gap: var(--space-sm)
}

.gap-x-sm {
    -moz-column-gap: calc(1rem / 1.5);
    column-gap: calc(1rem / 1.5);
    -moz-column-gap: var(--space-sm);
    column-gap: var(--space-sm)
}

.gap-y-sm {
    row-gap: calc(1rem / 1.5);
    row-gap: var(--space-sm)
}

.p-sm {
    padding: calc(1rem / 1.5);
    padding: var(--space-sm)
}

.px-sm {
    padding-left: calc(1rem / 1.5);
    padding-right: calc(1rem / 1.5);
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}

.py-sm {
    padding-top: calc(1rem / 1.5);
    padding-bottom: calc(1rem / 1.5);
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm)
}

.m-sm {
    margin: calc(1rem / 1.5);
    margin: var(--space-sm)
}

.mx-sm {
    margin-left: calc(1rem / 1.5);
    margin-right: calc(1rem / 1.5);
    margin-left: var(--space-sm);
    margin-right: var(--space-sm)
}

.my-sm {
    margin-top: calc(1rem / 1.5);
    margin-bottom: calc(1rem / 1.5);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm)
}

.mt-sm {
    margin-top: calc(1rem / 1.5);
    margin-top: var(--space-sm)
}

.-m-sm {
    margin: calc(-1 * (1rem / 1.5));
    margin: calc(-1 * calc(1rem / 1.5));
    margin: calc(-1 * var(--space-sm))
}

.-mx-sm {
    margin-left: calc(-1 * (1rem / 1.5));
    margin-right: calc(-1 * (1rem / 1.5));
    margin-left: calc(-1 * calc(1rem / 1.5));
    margin-right: calc(-1 * calc(1rem / 1.5));
    margin-left: calc(-1 * var(--space-sm));
    margin-right: calc(-1 * var(--space-sm))
}

.-my-sm {
    margin-top: calc(-1 * (1rem / 1.5));
    margin-bottom: calc(-1 * (1rem / 1.5));
    margin-top: calc(-1 * calc(1rem / 1.5));
    margin-bottom: calc(-1 * calc(1rem / 1.5));
    margin-top: calc(-1 * var(--space-sm));
    margin-bottom: calc(-1 * var(--space-sm))
}

.-mt-sm {
    margin-top: calc(-1 * (1rem / 1.5));
    margin-top: calc(-1 * calc(1rem / 1.5));
    margin-top: calc(-1 * var(--space-sm))
}

.gap-md {
    gap: 1rem;
    gap: var(--space-md)
}

.gap-x-md {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -moz-column-gap: var(--space-md);
    column-gap: var(--space-md)
}

.gap-y-md {
    row-gap: 1rem;
    row-gap: var(--space-md)
}

.p-md {
    padding: 1rem;
    padding: var(--space-md)
}

.px-md {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-left: var(--space-md);
    padding-right: var(--space-md)
}

.py-md {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-top: var(--space-md);
    padding-bottom: var(--space-md)
}

.m-md {
    margin: 1rem;
    margin: var(--space-md)
}

.mx-md {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-left: var(--space-md);
    margin-right: var(--space-md)
}

.my-md {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-top: var(--space-md);
    margin-bottom: var(--space-md)
}

.mt-md {
    margin-top: 1rem;
    margin-top: var(--space-md)
}

.-m-md {
    margin: -1rem;
    margin: calc(-1 * var(--space-md))
}

.-mx-md {
    margin-left: -1rem;
    margin-right: -1rem;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md))
}

.-my-md {
    margin-top: -1rem;
    margin-bottom: -1rem;
    margin-top: calc(-1 * var(--space-md));
    margin-bottom: calc(-1 * var(--space-md))
}

.-mt-md {
    margin-top: -1rem;
    margin-top: calc(-1 * var(--space-md))
}

.gap-lg {
    gap: 1.5rem;
    gap: var(--space-lg)
}

.gap-x-lg {
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    -moz-column-gap: var(--space-lg);
    column-gap: var(--space-lg)
}

.gap-y-lg {
    row-gap: 1.5rem;
    row-gap: var(--space-lg)
}

.p-lg {
    padding: 1.5rem;
    padding: var(--space-lg)
}

.px-lg {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg)
}

.py-lg {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg)
}

.m-lg {
    margin: 1.5rem;
    margin: var(--space-lg)
}

.mx-lg {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-left: var(--space-lg);
    margin-right: var(--space-lg)
}

.my-lg {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg)
}

.mt-lg {
    margin-top: 1.5rem;
    margin-top: var(--space-lg)
}

.-m-lg {
    margin: -1.5rem;
    margin: calc(-1 * var(--space-lg))
}

.-mx-lg {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-left: calc(-1 * var(--space-lg));
    margin-right: calc(-1 * var(--space-lg))
}

.-my-lg {
    margin-top: -1.5rem;
    margin-bottom: -1.5rem;
    margin-top: calc(-1 * var(--space-lg));
    margin-bottom: calc(-1 * var(--space-lg))
}

.-mt-lg {
    margin-top: -1.5rem;
    margin-top: calc(-1 * var(--space-lg))
}

.gap-xl {
    gap: 2.25rem;
    gap: var(--space-xl)
}

.gap-x-xl {
    -moz-column-gap: 2.25rem;
    column-gap: 2.25rem;
    -moz-column-gap: var(--space-xl);
    column-gap: var(--space-xl)
}

.gap-y-xl {
    row-gap: 2.25rem;
    row-gap: var(--space-xl)
}

.p-xl {
    padding: 2.25rem;
    padding: var(--space-xl)
}

.px-xl {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl)
}

.py-xl {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl)
}

.m-xl {
    margin: 2.25rem;
    margin: var(--space-xl)
}

.mx-xl {
    margin-left: 2.25rem;
    margin-right: 2.25rem;
    margin-left: var(--space-xl);
    margin-right: var(--space-xl)
}

.my-xl {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl)
}

.mt-xl {
    margin-top: 2.25rem;
    margin-top: var(--space-xl)
}

.-m-xl {
    margin: -2.25rem;
    margin: calc(-1 * var(--space-xl))
}

.-mx-xl {
    margin-left: -2.25rem;
    margin-right: -2.25rem;
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl))
}

.-my-xl {
    margin-top: -2.25rem;
    margin-bottom: -2.25rem;
    margin-top: calc(-1 * var(--space-xl));
    margin-bottom: calc(-1 * var(--space-xl))
}

.-mt-xl {
    margin-top: -2.25rem;
    margin-top: calc(-1 * var(--space-xl))
}

.gap-xxl {
    gap: 3.375rem;
    gap: var(--space-xxl)
}

.gap-x-xxl {
    -moz-column-gap: 3.375rem;
    column-gap: 3.375rem;
    -moz-column-gap: var(--space-xxl);
    column-gap: var(--space-xxl)
}

.gap-y-xxl {
    row-gap: 3.375rem;
    row-gap: var(--space-xxl)
}

.p-xxl {
    padding: 3.375rem;
    padding: var(--space-xxl)
}

.px-xxl {
    padding-left: 3.375rem;
    padding-right: 3.375rem;
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl)
}

.py-xxl {
    padding-top: 3.375rem;
    padding-bottom: 3.375rem;
    padding-top: var(--space-xxl);
    padding-bottom: var(--space-xxl)
}

.m-xxl {
    margin: 3.375rem;
    margin: var(--space-xxl)
}

.mx-xxl {
    margin-left: 3.375rem;
    margin-right: 3.375rem;
    margin-left: var(--space-xxl);
    margin-right: var(--space-xxl)
}

.my-xxl {
    margin-top: 3.375rem;
    margin-bottom: 3.375rem;
    margin-top: var(--space-xxl);
    margin-bottom: var(--space-xxl)
}

.mt-xxl {
    margin-top: 3.375rem;
    margin-top: var(--space-xxl)
}

.-m-xxl {
    margin: -3.375rem;
    margin: calc(-1 * var(--space-xxl))
}

.-mx-xxl {
    margin-left: -3.375rem;
    margin-right: -3.375rem;
    margin-left: calc(-1 * var(--space-xxl));
    margin-right: calc(-1 * var(--space-xxl))
}

.-my-xxl {
    margin-top: -3.375rem;
    margin-bottom: -3.375rem;
    margin-top: calc(-1 * var(--space-xxl));
    margin-bottom: calc(-1 * var(--space-xxl))
}

.-mt-xxl {
    margin-top: -3.375rem;
    margin-top: calc(-1 * var(--space-xxl))
}

.gap-xxxl {
    gap: 5.0625rem;
    gap: var(--space-xxxl)
}

.gap-x-xxxl {
    -moz-column-gap: 5.0625rem;
    column-gap: 5.0625rem;
    -moz-column-gap: var(--space-xxxl);
    column-gap: var(--space-xxxl)
}

.gap-y-xxxl {
    row-gap: 5.0625rem;
    row-gap: var(--space-xxxl)
}

.p-xxxl {
    padding: 5.0625rem;
    padding: var(--space-xxxl)
}

.px-xxxl {
    padding-left: 5.0625rem;
    padding-right: 5.0625rem;
    padding-left: var(--space-xxxl);
    padding-right: var(--space-xxxl)
}

.py-xxxl {
    padding-top: 5.0625rem;
    padding-bottom: 5.0625rem;
    padding-top: var(--space-xxxl);
    padding-bottom: var(--space-xxxl)
}

.m-xxxl {
    margin: 5.0625rem;
    margin: var(--space-xxxl)
}

.mx-xxxl {
    margin-left: 5.0625rem;
    margin-right: 5.0625rem;
    margin-left: var(--space-xxxl);
    margin-right: var(--space-xxxl)
}

.my-xxxl {
    margin-top: 5.0625rem;
    margin-bottom: 5.0625rem;
    margin-top: var(--space-xxxl);
    margin-bottom: var(--space-xxxl)
}

.mt-xxxl {
    margin-top: 5.0625rem;
    margin-top: var(--space-xxxl)
}

.-m-xxxl {
    margin: -5.0625rem;
    margin: calc(-1 * var(--space-xxxl))
}

.-mx-xxxl {
    margin-left: -5.0625rem;
    margin-right: -5.0625rem;
    margin-left: calc(-1 * var(--space-xxxl));
    margin-right: calc(-1 * var(--space-xxxl))
}

.-my-xxxl {
    margin-top: -5.0625rem;
    margin-bottom: -5.0625rem;
    margin-top: calc(-1 * var(--space-xxxl));
    margin-bottom: calc(-1 * var(--space-xxxl))
}

.-mt-xxxl {
    margin-top: -5.0625rem;
    margin-top: calc(-1 * var(--space-xxxl))
}

.gap-gutter {
    gap: max(1.5rem, min(4vw, 3.375rem));
    gap: var(--space-gutter)
}

.gap-x-gutter {
    -moz-column-gap: max(1.5rem, min(4vw, 3.375rem));
    column-gap: max(1.5rem, min(4vw, 3.375rem));
    -moz-column-gap: var(--space-gutter);
    column-gap: var(--space-gutter)
}

.gap-y-gutter {
    row-gap: max(1.5rem, min(4vw, 3.375rem));
    row-gap: var(--space-gutter)
}

.p-gutter {
    padding: max(1.5rem, min(4vw, 3.375rem));
    padding: var(--space-gutter)
}

.px-gutter {
    padding-left: max(1.5rem, min(4vw, 3.375rem));
    padding-left: var(--space-gutter);
    padding-right: max(1.5rem, min(4vw, 3.375rem));
    padding-right: var(--space-gutter)
}

.py-gutter {
    padding-top: max(1.5rem, min(4vw, 3.375rem));
    padding-top: var(--space-gutter);
    padding-bottom: max(1.5rem, min(4vw, 3.375rem));
    padding-bottom: var(--space-gutter)
}

.m-gutter {
    margin: max(1.5rem, min(4vw, 3.375rem));
    margin: var(--space-gutter)
}

.mx-gutter {
    margin-left: max(1.5rem, min(4vw, 3.375rem));
    margin-left: var(--space-gutter);
    margin-right: max(1.5rem, min(4vw, 3.375rem));
    margin-right: var(--space-gutter)
}

.my-gutter {
    margin-top: max(1.5rem, min(4vw, 3.375rem));
    margin-top: var(--space-gutter);
    margin-bottom: max(1.5rem, min(4vw, 3.375rem));
    margin-bottom: var(--space-gutter)
}

.mt-gutter {
    margin-top: max(1.5rem, min(4vw, 3.375rem));
    margin-top: var(--space-gutter)
}

.-m-gutter {
    margin: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin: calc(-1 * var(--space-gutter))
}

.-mx-gutter {
    margin-left: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin-left: calc(-1 * var(--space-gutter));
    margin-right: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin-right: calc(-1 * var(--space-gutter))
}

.-my-gutter {
    margin-top: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin-top: calc(-1 * var(--space-gutter));
    margin-bottom: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin-bottom: calc(-1 * var(--space-gutter))
}

.-mt-gutter {
    margin-top: calc(-1*max(1.5rem, min(4vw, 3.375rem)));
    margin-top: calc(-1 * var(--space-gutter))
}

.stack {
    display: flex;
    flex-direction: column
}

.stack.reverse {
    flex-direction: column-reverse
}

.row {
    display: flex;
    align-items: center
}

.row.reverse {
    flex-direction: row-reverse
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15ch, 100%), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 15ch), 100%), 1fr))
}

.grid-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15ch, 100%), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 15ch), 100%), 1fr))
}

.block {
    display: block;
    width: 100%
}

.inline {
    display: inline;
    vertical-align: middle
}

.inline-block {
    display: inline-block
}

.justify-center {
    justify-content: center
}

.justify-end {
    justify-content: flex-end
}

.justify-start {
    justify-content: flex-start
}

.justify-between {
    justify-content: space-between
}

.align-center {
    align-items: center
}

.align-start {
    align-items: flex-start
}

.align-end {
    align-items: flex-end
}

.align-baseline {
    align-items: baseline
}

.align-stretch {
    align-items: stretch
}

.align-self-center {
    align-self: center
}

.align-self-start {
    align-self: flex-start
}

.align-self-end {
    align-self: flex-end
}

.align-self-baseline {
    align-self: baseline
}

.align-self-stretch {
    align-self: stretch
}

.push-start {
    margin-right: auto
}

.push-center {
    margin-left: auto;
    margin-right: auto
}

.push-end {
    margin-left: auto
}

@media (max-width: 40rem) {
    .break-sm {
        order: 999;
        width: 100%;
        flex-grow: 1
    }
}

.grow {
    flex-grow: 1
}

.shrink {
    min-width: 0
}

.no-shrink {
    flex-shrink: 0
}

.full-width {
    width: 100%
}

.full-height {
    height: 100%
}

.wrap {
    flex-wrap: wrap
}

.wrap-reverse {
    flex-wrap: wrap-reverse
}

.nowrap {
    flex-wrap: nowrap;
    white-space: nowrap
}

.stack.dividers>*+* {
    border-top: 1px solid hsla(220, 40%, 60%, .2);
    border-top: 1px solid var(--color-stroke);
    margin-top: 1.5rem;
    margin-top: var(--space-lg);
    padding-top: 1.5rem;
    padding-top: var(--space-lg)
}

.row.dividers>*+* {
    border-left: 1px solid hsla(220, 40%, 60%, .2);
    border-left: 1px solid var(--color-stroke);
    margin-left: 1.5rem;
    margin-left: var(--space-lg);
    padding-left: 1.5rem;
    padding-left: var(--space-lg)
}

.float-left {
    float: left
}

.float-right {
    float: right
}

.overflow-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.overflow-visible {
    overflow: visible
}

.overflow-hidden {
    overflow: hidden
}

.scrollable,
.scrollable-x,
.scrollable-y {
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.scrollable::-webkit-scrollbar,
.scrollable-x::-webkit-scrollbar,
.scrollable-y::-webkit-scrollbar {
    display: none
}

.scrollable:before,
.scrollable-x:before,
.scrollable-y:before,
.scrollable:after,
.scrollable-x:after,
.scrollable-y:after {
    content: "";
    display: block;
    position: sticky;
    z-index: 10;
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s
}

.scrollable-x:before,
.scrollable-x:after {
    width: 40px;
    margin-left: -40px;
    align-self: stretch
}

.scrollable-x:before {
    left: 0;
    background-image: linear-gradient(to right, hsl(235, 44%, 11%), transparent);
    background-image: linear-gradient(to right, var(--color-bg), transparent)
}

.scrollable-x:after {
    right: 0;
    background-image: linear-gradient(to left, hsl(235, 44%, 11%), transparent);
    background-image: linear-gradient(to left, var(--color-bg), transparent)
}

.scrollable-x.is-scrolled-right:before,
.scrollable-x.is-scrolled-left:after {
    opacity: 1
}

.scrollable-y:before,
.scrollable-y:after {
    height: 40px;
    margin-top: -40px;
    width: 100%
}

.scrollable-y:before {
    top: 0;
    background-image: linear-gradient(to bottom, hsl(235, 44%, 11%), transparent);
    background-image: linear-gradient(to bottom, var(--color-bg), transparent)
}

.scrollable-y:after {
    bottom: 0;
    background-image: linear-gradient(to top, hsl(235, 44%, 11%), transparent);
    background-image: linear-gradient(to top, var(--color-bg), transparent)
}

.scrollable-y.is-scrolled-down:before,
.scrollable-y.is-scrolled-up:after {
    opacity: 1
}

.rotate-90 {
    transform: rotate(90deg)
}

.rotate-180 {
    transform: rotate(180deg)
}

.rotate-270 {
    transform: rotate(270deg)
}

.flip-horizontal {
    transform: scaleX(-1)
}

.flip-vertical {
    transform: scaleY(-1)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.color-text {
    color: #fff;
    color: var(--color-text)
}

.color-muted {
    color: #708bc2;
    color: var(--color-muted)
}

.color-accent {
    color: #00d4ff;
    color: var(--color-accent-text)
}

.color-success {
    color: #00a37a;
    color: var(--color-success-text)
}

.color-warning {
    color: #7a7a00;
    color: var(--color-warning-text)
}

.color-danger {
    color: #f24e0d;
    color: var(--color-danger-text)
}

.color-activity {
    color: #cf4f00;
    color: var(--color-activity-text)
}

.color-inherit {
    color: inherit
}

.text-xxs {
    font-size: .8rem;
    font-size: var(--text-xxs)
}

.text-xs {
    font-size: .875rem;
    font-size: var(--text-xs)
}

.text-sm {
    font-size: 1rem;
    font-size: var(--text-sm)
}

.text-md {
    font-size: 1.25rem;
    font-size: var(--text-md)
}

.text-lg {
    font-size: 1.75rem;
    font-size: var(--text-lg)
}

.text-xl {
    font-size: 2.5rem;
    font-size: var(--text-xl)
}

.text-xxl {
    font-size: 3rem;
    font-size: var(--text-xxl)
}

.wrap-balance {
    text-wrap: balance
}

.wrap-pretty {
    text-wrap: pretty
}

.animate-shake {
    animation: shake .8s
}

@keyframes shake {

    10%,
    90% {
        transform: translate(-1px)
    }

    20%,
    80% {
        transform: translate(2px)
    }

    30%,
    50%,
    70% {
        transform: translate(-4px)
    }

    40%,
    60% {
        transform: translate(4px)
    }
}

.animate-appear {
    animation: appear .5s
}

@keyframes appear {
    0% {
        transform: scale(.9);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.bg-emphasis,
.bg-accent,
.bg-success,
.bg-warning,
.bg-danger,
.bg-activity {
    --color-fill: rgba(255, 255, 255, .1);
    --color-stroke: rgba(255, 255, 255, .25);
    --color-muted: var(--color-text);
    --color-accent: var(--color-text);
    --color-accent-text: var(--color-text);
    background-color: #101228;
    background-color: var(--color-bg);
    color: #fff;
    color: var(--color-text)
}

.bg-surface {
    background-color: #07081299;
    background-color: var(--color-surface)
}

.bg-fill {
    background-color: #07081280;
    background-color: var(--color-fill)
}

.bg-fill-soft {
    background-color: #708bc20d;
    background-color: var(--color-fill-soft)
}

.bg-emphasis {
    --color-bg: var(--palette-emphasis);
    --color-text: var(--palette-emphasis-contrast)
}

.bg-accent {
    --color-bg: var(--palette-accent);
    --color-text: var(--palette-accent-contrast)
}

.bg-accent-soft {
    background-color: #00d4ff33;
    background-color: var(--color-accent-soft);
    color: #00d4ff;
    color: var(--color-accent-text)
}

.bg-success {
    --color-bg: var(--palette-success);
    --color-text: var(--palette-success-contrast)
}

.bg-success-soft {
    background-color: #00b88a26;
    background-color: var(--color-success-soft);
    color: #00a37a;
    color: var(--color-success-text)
}

.bg-warning {
    --color-bg: var(--palette-warning);
    --color-text: var(--palette-warning-contrast)
}

.bg-warning-soft {
    background-color: #ffffd6;
    background-color: var(--color-warning-soft);
    color: #7a7a00;
    color: var(--color-warning-text)
}

.bg-danger {
    --color-bg: var(--palette-danger);
    --color-text: var(--palette-danger-contrast)
}

.bg-danger-soft {
    background-color: #f24e0d26;
    background-color: var(--color-danger-soft);
    color: #f24e0d;
    color: var(--color-danger-text)
}

.bg-activity {
    --color-bg: var(--palette-activity);
    --color-text: var(--palette-activity-contrast)
}

.bg-activity-soft {
    background-color: #ffe6d6;
    background-color: var(--color-activity-soft);
    color: #cf4f00;
    color: var(--color-activity-text)
}

.no-pointer {
    pointer-events: none
}

.no-select {
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.clickable:disabled {
    opacity: .5;
    cursor: default
}

.clickable.is-disabled {
    opacity: .5;
    cursor: default
}

.clickable .is-inert {
    cursor: default
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert) {
    cursor: pointer
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert):hover {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.clickable.is-hovered:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert):focus {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.clickable.is-focused:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.clickable[aria-selected=true]:not(:disabled):not(.is-disabled):not(.is-inert) {
    filter: brightness(.95);
    filter: var(--filter-hover)
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert):active {
    filter: brightness(.9);
    filter: var(--filter-active)
}

.clickable:not(:disabled):not(.is-disabled):not(.is-inert):active {
    transform: scale(.97)
}

.cursor-default {
    cursor: default !important
}

.cursor-help {
    cursor: help !important
}

.cursor-pointer {
    cursor: pointer !important
}

.js .no-js-only,
.no-js .js-only {
    display: none !important
}

.rounded {
    border-radius: 20px;
    border-radius: var(--radius)
}

.pill {
    border-radius: 999px
}

.overlay-container {
    position: relative
}

.overlay,
.has-overlay:before {
    position: absolute !important
}

.overlay,
.has-overlay:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.has-overlay:before {
    content: ""
}

.truncated {
    overflow: hidden;
    position: relative;
    max-height: 15em
}

.truncated__expander {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 5em;
    background: linear-gradient(to bottom, transparent, hsl(235, 44%, 11%) 60%);
    background: linear-gradient(to bottom, transparent, var(--color-bg) 60%);
    display: flex;
    align-items: flex-end
}

.font-text {
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-text)
}

.font-display {
    font-family: Figtree, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    font-family: var(--font-display)
}

.font-mono {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, Courier New, monospace;
    font-family: var(--font-mono)
}

.weight-normal {
    font-weight: 400;
    font-weight: var(--weight-normal)
}

.weight-medium {
    font-weight: 500;
    font-weight: var(--weight-medium)
}

.weight-bold {
    font-weight: 600;
    font-weight: var(--weight-bold)
}

.underline {
    -webkit-text-decoration: underline;
    text-decoration: underline
}

.no-underline {
    -webkit-text-decoration: none !important;
    text-decoration: none !important
}

@media (max-width: 40rem) {
    .hide-sm {
        display: none !important
    }
}

@media (min-width: 40.001rem) {
    .hide-md-up {
        display: none !important
    }
}

@media (max-width: 52rem) {
    .hide-md-down {
        display: none !important
    }
}

@media (min-width: 52.001rem) {
    .hide-lg-up {
        display: none !important
    }
}

@media (max-width: 68rem) {
    .hide-lg-down {
        display: none !important
    }
}

.hide-if-not-only-child:not(:only-child),
.hide-if-empty:empty {
    display: none
}

[data-theme=dark] .light-only,
[data-theme=light] .dark-only {
    display: none
}

.caret {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: currentColor;
    color: #00d4ff;
    color: var(--color-accent);
    vertical-align: middle
}

.shadow-md {
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

@media (max-width: 40rem) {
    .contains-br br {
        display: none
    }
}

.header {
    position: relative;
    height: 6rem;
    height: var(--header-height);
    z-index: 100;
    z-index: var(--z-index-header)
}

.header .logo {
    z-index: 1
}

:root:not([data-collection=products]) .header {
    position: sticky;
    top: 0;
    margin-top: 1px
}

:root:not([data-collection=products]) .header:before {
    content: "";
    z-index: -2;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: #07081299;
    background: var(--color-surface);
    opacity: 0;
    transition: opacity .2s;
    box-shadow: 0 1px 4px #07081280;
    box-shadow: var(--shadow-sm)
}

:root:not([data-collection=products]) .header.is-stuck:before {
    opacity: 1
}

.header-link {
    color: inherit;
    padding: 10px 0;
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-weight: var(--weight-medium)
}

.header-link:hover {
    color: #00d4ff;
    color: var(--color-accent);
    -webkit-text-decoration: none;
    text-decoration: none
}

.header-link .icon {
    transition: transform .2s
}

.header-dropdown:hover:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 3.375rem);
    top: calc(100% - var(--space-xxl));
    height: 3.375rem;
    height: var(--space-xxl)
}

.header-dropdown>.menu {
    visibility: hidden;
    opacity: 0;
    transform-origin: top;
    transform: scale(.98);
    transition: opacity .2s .2s, transform .2s .2s, visibility 0s .4s;
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    width: auto;
    top: 0;
    padding-top: 6rem;
    padding-top: var(--header-height);
    padding-bottom: 2.25rem;
    padding-bottom: var(--space-xl);
    box-shadow: 0 1px 4px #07081280;
    box-shadow: var(--shadow-sm);
    max-width: none;
    overflow: visible;
    border-radius: 0
}

.header-dropdown:focus-within>.menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s .4s, transform .2s .4s, visibility 0s .4s
}

.header-dropdown:hover>.menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s .4s, transform .2s .4s, visibility 0s .4s
}

.header-dropdown:focus-within .header-link {
    color: #00d4ff;
    color: var(--color-accent)
}

.header-dropdown:hover .header-link {
    color: #00d4ff;
    color: var(--color-accent)
}

.header-dropdown:focus-within .header-link .icon {
    transform: translateY(2px)
}

.header-dropdown:hover .header-link .icon {
    transform: translateY(2px)
}

.header-menu>.enter-active,
.header-menu>.leave-active {
    transition: all .2s
}

.header-menu>.enter-from,
.header-menu>.leave-to {
    opacity: 0;
    transform: scale(1.1)
}

.header-menu>button {
    position: relative;
    z-index: 201;
    z-index: calc(var(--z-index-overlay) + 1)
}

.header-menu>button>* {
    position: absolute;
    transition: all .2s
}

.header-menu:not([open]) .icon-close {
    opacity: 0
}

.header-menu[open] .icon-open {
    opacity: 0
}

.header-menu>.menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    border-radius: 0
}

@media (max-width: 52rem) {
    :root {
        --header-height: 5rem
    }
}

@media (max-width: 999px) {
    .hero>.row {
        flex-direction: column;
        text-align: center;
        align-items: center
    }

    .hero>.row>.stack {
        align-items: center
    }
}

.logos>* {
    flex-basis: 0;
    flex-grow: 1
}

.logos img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

@media (max-width: 68rem) {
    .logos {
        flex-wrap: wrap
    }

    .logos>* {
        min-width: 80px;
        max-width: 90px
    }
}

@media (min-width: 68.001rem) {
    .logos>* {
        flex-grow: 0;
        flex-basis: 120px
    }

    .logos img {
        max-height: 80px
    }
}

.product-navbar {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: sticky;
    margin-top: 1px;
    top: 0;
    z-index: 99;
    z-index: calc(var(--z-index-header) - 1)
}

.product-navbar.is-stuck {
    box-shadow: 0 1px 4px #07081280;
    box-shadow: var(--shadow-sm)
}

.product-navbar [aria-current=page] {
    color: #00d4ff;
    color: var(--color-accent)
}

.product-navbar__cta {
    transition: opacity .2s
}

.product-navbar:not(.is-stuck) .product-navbar__cta {
    visibility: hidden;
    opacity: 0
}

.product-card {
    position: relative;
    transition: box-shadow 1s;
    overflow: hidden
}

.product-card:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(ellipse 200% 100% at 50% 100%, var(--color-product-bg), transparent);
    transition: opacity 1s
}

.product-card:focus-within {
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

.product-card:hover {
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

.product-card:not(:hover):not(:focus-within):before {
    opacity: 0
}

.contributors-circle {
    --radius: 600px;
    margin: auto;
    position: relative;
    height: 800px;
    -webkit-mask-image: linear-gradient(to top, #000 80%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-image: linear-gradient(to top, #000 80%, transparent 100%), linear-gradient(to bottom, #000 80%, transparent 100%);
    -webkit-mask-image: var(--mask-top), var(--mask-bottom);
    mask-image: var(--mask-top), var(--mask-bottom);
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect
}

.contributors-circle figure {
    max-width: 45ch;
    text-align: center;
    justify-content: center
}

.contributors-avatars>* {
    position: absolute;
    top: 50%;
    left: 50%
}

.contributors-avatars>* img {
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

@media (prefers-reduced-motion: no-preference) {
    .contributors-avatars>* img {
        animation: hover 3s infinite ease-in-out;
        animation-delay: calc(var(--index) * -.5s)
    }
}

.contributors-avatars>*:nth-of-type(1) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(24deg) translate(calc(20px * .65 + .14112 * 10px)) rotate(-24deg) scaleY(1.25);
    transform: scaleY(.8) rotate(24deg) translate(calc(var(--radius) * .65 + .14112 * 10px)) rotate(-24deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(2) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(48deg) translate(10.2058px) rotate(-48deg) scaleY(1.25);
    transform: scaleY(.8) rotate(48deg) translate(calc(var(--radius) * .65 + -.27942 * 10px)) rotate(-48deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(3) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(72deg) translate(17.1212px) rotate(-72deg) scaleY(1.25);
    transform: scaleY(.8) rotate(72deg) translate(calc(var(--radius) * .65 + .41212 * 10px)) rotate(-72deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(4) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(96deg) translate(7.6343px) rotate(-96deg) scaleY(1.25);
    transform: scaleY(.8) rotate(96deg) translate(calc(var(--radius) * .65 + -.53657 * 10px)) rotate(-96deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(5) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(120deg) translate(19.5029px) rotate(-120deg) scaleY(1.25);
    transform: scaleY(.8) rotate(120deg) translate(calc(var(--radius) * .65 + .65029 * 10px)) rotate(-120deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(6) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(144deg) translate(5.4901px) rotate(-144deg) scaleY(1.25);
    transform: scaleY(.8) rotate(144deg) translate(calc(var(--radius) * .65 + -.75099 * 10px)) rotate(-144deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(7) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(168deg) translate(21.3666px) rotate(-168deg) scaleY(1.25);
    transform: scaleY(.8) rotate(168deg) translate(calc(var(--radius) * .65 + .83666 * 10px)) rotate(-168deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(8) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(192deg) translate(calc(20px * .65 + -.90558 * 10px)) rotate(-192deg) scaleY(1.25);
    transform: scaleY(.8) rotate(192deg) translate(calc(var(--radius) * .65 + -.90558 * 10px)) rotate(-192deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(9) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(216deg) translate(22.5638px) rotate(-216deg) scaleY(1.25);
    transform: scaleY(.8) rotate(216deg) translate(calc(var(--radius) * .65 + .95638 * 10px)) rotate(-216deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(10) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(240deg) translate(3.1197px) rotate(-240deg) scaleY(1.25);
    transform: scaleY(.8) rotate(240deg) translate(calc(var(--radius) * .65 + -.98803 * 10px)) rotate(-240deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(11) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(264deg) translate(22.9991px) rotate(-264deg) scaleY(1.25);
    transform: scaleY(.8) rotate(264deg) translate(calc(var(--radius) * .65 + .99991 * 10px)) rotate(-264deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(12) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(288deg) translate(calc(20px * .65 + -.99178 * 10px)) rotate(-288deg) scaleY(1.25);
    transform: scaleY(.8) rotate(288deg) translate(calc(var(--radius) * .65 + -.99178 * 10px)) rotate(-288deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(13) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(312deg) translate(calc(20px * .65 + .9638 * 10px)) rotate(-312deg) scaleY(1.25);
    transform: scaleY(.8) rotate(312deg) translate(calc(var(--radius) * .65 + .9638 * 10px)) rotate(-312deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(14) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(336deg) translate(calc(20px * .65 + -.91652 * 10px)) rotate(-336deg) scaleY(1.25);
    transform: scaleY(.8) rotate(336deg) translate(calc(var(--radius) * .65 + -.91652 * 10px)) rotate(-336deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(15) {
    width: 110px;
    height: 110px;
    margin: -55px;
    transform: scaleY(.8) rotate(360deg) translate(21.509px) rotate(-360deg) scaleY(1.25);
    transform: scaleY(.8) rotate(360deg) translate(calc(var(--radius) * .65 + .8509 * 10px)) rotate(-360deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(16) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(396deg) translate(calc(20px * .85 + -.76825 * 10px)) rotate(-396deg) scaleY(1.25);
    transform: scaleY(.8) rotate(396deg) translate(calc(var(--radius) * .85 + -.76825 * 10px)) rotate(-396deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(17) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(420deg) translate(23.7023px) rotate(-420deg) scaleY(1.25);
    transform: scaleY(.8) rotate(420deg) translate(calc(var(--radius) * .85 + .67023 * 10px)) rotate(-420deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(18) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(444deg) translate(calc(20px * .85 + -.55879 * 10px)) rotate(-444deg) scaleY(1.25);
    transform: scaleY(.8) rotate(444deg) translate(calc(var(--radius) * .85 + -.55879 * 10px)) rotate(-444deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(19) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(468deg) translate(21.3616px) rotate(-468deg) scaleY(1.25);
    transform: scaleY(.8) rotate(468deg) translate(calc(var(--radius) * .85 + .43616 * 10px)) rotate(-468deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(20) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(492deg) translate(13.9519px) rotate(-492deg) scaleY(1.25);
    transform: scaleY(.8) rotate(492deg) translate(calc(var(--radius) * .85 + -.30481 * 10px)) rotate(-492deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(21) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(516deg) translate(18.6736px) rotate(-516deg) scaleY(1.25);
    transform: scaleY(.8) rotate(516deg) translate(calc(var(--radius) * .85 + .16736 * 10px)) rotate(-516deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(22) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(540deg) translate(16.7345px) rotate(-540deg) scaleY(1.25);
    transform: scaleY(.8) rotate(540deg) translate(calc(var(--radius) * .85 + -.02655 * 10px)) rotate(-540deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(23) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(564deg) translate(15.8522px) rotate(-564deg) scaleY(1.25);
    transform: scaleY(.8) rotate(564deg) translate(calc(var(--radius) * .85 + -.11478 * 10px)) rotate(-564deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(24) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(588deg) translate(19.5382px) rotate(-588deg) scaleY(1.25);
    transform: scaleY(.8) rotate(588deg) translate(calc(var(--radius) * .85 + .25382 * 10px)) rotate(-588deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(25) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(612deg) translate(13.1222px) rotate(-612deg) scaleY(1.25);
    transform: scaleY(.8) rotate(612deg) translate(calc(var(--radius) * .85 + -.38778 * 10px)) rotate(-612deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(26) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(636deg) translate(22.1398px) rotate(-636deg) scaleY(1.25);
    transform: scaleY(.8) rotate(636deg) translate(calc(var(--radius) * .85 + .51398 * 10px)) rotate(-636deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(27) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(660deg) translate(10.7011px) rotate(-660deg) scaleY(1.25);
    transform: scaleY(.8) rotate(660deg) translate(calc(var(--radius) * .85 + -.62989 * 10px)) rotate(-660deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(28) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(684deg) translate(24.3319px) rotate(-684deg) scaleY(1.25);
    transform: scaleY(.8) rotate(684deg) translate(calc(var(--radius) * .85 + .73319 * 10px)) rotate(-684deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(29) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(708deg) translate(8.7818px) rotate(-708deg) scaleY(1.25);
    transform: scaleY(.8) rotate(708deg) translate(calc(var(--radius) * .85 + -.82182 * 10px)) rotate(-708deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(30) {
    width: 80px;
    height: 80px;
    margin: -40px;
    transform: scaleY(.8) rotate(732deg) translate(calc(20px * .85 + .894 * 10px)) rotate(-732deg) scaleY(1.25);
    transform: scaleY(.8) rotate(732deg) translate(calc(var(--radius) * .85 + .894 * 10px)) rotate(-732deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(31) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(744deg) translate(calc(20px * 1 + -.94828 * 10px)) rotate(-744deg) scaleY(1.25);
    transform: scaleY(.8) rotate(744deg) translate(calc(var(--radius) * 1 + -.94828 * 10px)) rotate(-744deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(32) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(768deg) translate(29.8359px) rotate(-768deg) scaleY(1.25);
    transform: scaleY(.8) rotate(768deg) translate(calc(var(--radius) * 1 + .98359 * 10px)) rotate(-768deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(33) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(792deg) translate(10.0079px) rotate(-792deg) scaleY(1.25);
    transform: scaleY(.8) rotate(792deg) translate(calc(var(--radius) * 1 + -.99921 * 10px)) rotate(-792deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(34) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(816deg) translate(29.9483px) rotate(-816deg) scaleY(1.25);
    transform: scaleY(.8) rotate(816deg) translate(calc(var(--radius) * 1 + .99483 * 10px)) rotate(-816deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(35) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(840deg) translate(10.2946px) rotate(-840deg) scaleY(1.25);
    transform: scaleY(.8) rotate(840deg) translate(calc(var(--radius) * 1 + -.97054 * 10px)) rotate(-840deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(36) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(864deg) translate(29.2682px) rotate(-864deg) scaleY(1.25);
    transform: scaleY(.8) rotate(864deg) translate(calc(var(--radius) * 1 + .92682 * 10px)) rotate(-864deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(37) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(888deg) translate(11.3545px) rotate(-888deg) scaleY(1.25);
    transform: scaleY(.8) rotate(888deg) translate(calc(var(--radius) * 1 + -.86455 * 10px)) rotate(-888deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(38) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(912deg) translate(calc(20px * 1 + .78498 * 10px)) rotate(-912deg) scaleY(1.25);
    transform: scaleY(.8) rotate(912deg) translate(calc(var(--radius) * 1 + .78498 * 10px)) rotate(-912deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(39) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(936deg) translate(13.103px) rotate(-936deg) scaleY(1.25);
    transform: scaleY(.8) rotate(936deg) translate(calc(var(--radius) * 1 + -.6897 * 10px)) rotate(-936deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(40) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(960deg) translate(25.8061px) rotate(-960deg) scaleY(1.25);
    transform: scaleY(.8) rotate(960deg) translate(calc(var(--radius) * 1 + .58061 * 10px)) rotate(-960deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(41) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(984deg) translate(15.401px) rotate(-984deg) scaleY(1.25);
    transform: scaleY(.8) rotate(984deg) translate(calc(var(--radius) * 1 + -.4599 * 10px)) rotate(-984deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(42) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(1008deg) translate(23.2999px) rotate(-1008deg) scaleY(1.25);
    transform: scaleY(.8) rotate(1008deg) translate(calc(var(--radius) * 1 + .32999 * 10px)) rotate(-1008deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(43) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(1032deg) translate(18.0653px) rotate(-1032deg) scaleY(1.25);
    transform: scaleY(.8) rotate(1032deg) translate(calc(var(--radius) * 1 + -.19347 * 10px)) rotate(-1032deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(44) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(1056deg) translate(20.5308px) rotate(-1056deg) scaleY(1.25);
    transform: scaleY(.8) rotate(1056deg) translate(calc(var(--radius) * 1 + .05308 * 10px)) rotate(-1056deg) scaleY(1.25)
}

.contributors-avatars>*:nth-of-type(45) {
    width: 50px;
    height: 50px;
    margin: -25px;
    transform: scaleY(.8) rotate(1080deg) translate(20.8837px) rotate(-1080deg) scaleY(1.25);
    transform: scaleY(.8) rotate(1080deg) translate(calc(var(--radius) * 1 + .08837 * 10px)) rotate(-1080deg) scaleY(1.25)
}

@keyframes hover {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: scale(1.04) translateY(-5px)
    }
}

.team-list-item>.avatar {
    transition: all .2s
}

.team-list-item:hover>.avatar {
    transform: scale(1.05);
    box-shadow: 0 0 0 1px #07081280, 0 5px 15px #07081280;
    box-shadow: var(--shadow-md)
}

html {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
    background-image: radial-gradient(ellipse 200vw 80vh at 50% 100vh, #00377d, transparent);
    background-image: radial-gradient(ellipse 200vw 80vh at 50% 100vh, var(--background-color, #00377d), transparent);
    background-repeat: no-repeat;
    background-attachment: fixed
}

.logo {
    -webkit-text-decoration: none !important;
    text-decoration: none !important
}

.logo {
    display: inline-flex;
    align-items: flex-end;
    color: inherit
}

.logo>svg {
    height: 2em
}

.logo>img {
    height: 2em
}

.ui {
    --control-radius: 12px !important
}

.ui {
    overflow: hidden;
    height: 18em
}

.ui * {
    --radius: 12px
}

.fade-bottom-right {
    padding-bottom: 0;
    padding-right: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%), linear-gradient(to right, #000 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 100%), linear-gradient(to right, #000 80%, transparent 100%);
    -webkit-mask-image: var(--mask-bottom), var(--mask-right);
    mask-image: var(--mask-bottom), var(--mask-right);
    -webkit-mask-composite: source-in, xor;
    mask-composite: intersect;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.editorial-community {
    -moz-columns: 15ch;
    columns: 15ch
}

.editorial-community>* {
    padding-left: 1rem;
    padding-left: var(--space-md);
    text-indent: -1rem;
    text-indent: calc(-1 * var(--space-md))
}

.d-none{
    display: none !important;
}

.w-100{
    width: 100% !important;
}

.px-0{
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.py-3{
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

input:read-only {
  opacity: 0.5;
}

.hover-text-dark:hover{
    color: #000 !important;
}