:root {
    --radius: 12px;
    --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --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: 700;
    --line-height-default: 1.3;
    --line-height-condensed: 1.2;
    --line-height-expanded: 1.6;
    --line-height-max: 1.8;
    --measure: 90ch;
    --z-index-fab: 100;
    --z-index-header: 200;
    --z-index-overlay: 300;
    --z-index-alerts: 400;
    --text-xxs: .75rem;
    --text-xs: .875rem;
    --text-sm: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-xxl: 2rem;
    --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: 16px;
    --space-lg: min(calc(var(--space-md) * var(--ratio)), var(--space-gutter));
    --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-x: clamp(18px, 3vw, 32px);
    --space-gutter-y: clamp(18px, 3vw, 32px);
    --space-gutter: var(--space-gutter-x);
    --control-height: 2.6em;
    --control-height-small: 2em;
    --header-padding-top: max(0px, calc(env(safe-area-inset-top) - var(--space-sm)));
    --header-height: 3.75rem;
    --sticky-offset-top: calc(var(--header-height) + var(--header-padding-top));
    --sticky-offset-bottom: 0px;
    --ease-out: cubic-bezier(.36, .66, .04, 1);
    --ease-elastic: linear(0, .005 .98%, .0253, .0582, .1009 4.91%, .2058 7.52%, .5696 15.7%, .6701, .7569, .8293 23.56%, .8941, .9429, .978 32.39%, .9996 35.01%, 1.0154, 1.0242 40.9%, 1.0282 44.49%, 1.0262 49.73%, 1.0094 63.8%, 1.0027 72.63%, .9996 83.1%, .9994 99.79%);
    --shape-check: polygon(0% 50%, 40% 90%, 100% 25%, 85% 10%, 40% 60%, 15% 35%)
}

:root,
[data-theme=light],
.Menu {
    --brand-dark: #272c45;
    --brand-darker: #15161d;
    --brand-light: #fff;
    --brand-pale: hsl(185, 52%, 96%);
    --brand-lightblue: #b3f2ff;
    --brand-cyan: #00d5ff;
    --brand-gold: #bb9a53;
    --bg-hsl: 48 20% 100%;
    --color-bg: hsl(var(--bg-hsl));
    --text-hsl: 230 28% 21%;
    --color-text: hsl(var(--text-hsl));
    --muted-hsl: 185 30% 45%;
    --color-muted: hsl(var(--muted-hsl));
    --color-fill: hsl(var(--muted-hsl) / .1);
    --color-fill-solid-hsl: 185 40% 96%;
    --color-fill-solid: hsl(var(--color-fill-solid-hsl));
    --color-fill-soft: hsl(var(--muted-hsl) / .05);
    --color-stroke: hsl(var(--muted-hsl) / .25);
    --color-emphasis: hsl(217, 16%, 22%);
    --color-emphasis-contrast: #fff;
    --primary-h: 190;
    --primary-s: 100%;
    --primary-l: 43%;
    --color-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
    --color-primary-contrast: var(--color-bg);
    --color-primary-soft: hsl(var(--primary-h) var(--primary-s) 85%);
    --color-primary-text: var(--color-primary);
    --danger-h: 17;
    --danger-s: 90%;
    --danger-l: 50%;
    --color-danger: hsl(var(--danger-h) var(--danger-s) var(--danger-l));
    --color-danger-contrast: var(--color-bg);
    --color-danger-soft: hsl(var(--danger-h) var(--danger-s) var(--danger-l) / .15);
    --color-danger-text: var(--color-danger);
    --warning-h: 40;
    --warning-s: 100%;
    --warning-l: 50%;
    --color-warning: hsl(var(--warning-h) var(--warning-s) var(--warning-l));
    --color-warning-contrast: var(--color-bg);
    --color-warning-soft: hsl(calc(var(--warning-h) + 15) var(--warning-s) var(--warning-l) / .15);
    --color-warning-text: hsl(35 var(--warning-s) 48%);
    --success-h: 165;
    --success-s: 100%;
    --success-l: 36%;
    --color-success: hsl(var(--success-h) var(--success-s) var(--success-l));
    --color-success-contrast: var(--color-bg);
    --color-success-soft: hsl(var(--success-h) var(--success-s) var(--success-l) / .15);
    --color-success-text: hsl(var(--success-h) var(--success-s) 32%);
    --pending-h: 212;
    --pending-s: 80%;
    --pending-l: 47%;
    --color-pending: hsl(var(--pending-h) var(--pending-s) var(--pending-l));
    --color-pending-contrast: var(--color-bg);
    --color-pending-soft: hsl(var(--pending-h) var(--pending-s) var(--pending-l) / .15);
    --color-pending-text: hsl(var(--pending-h) var(--pending-s) 40%);
    --feedback-h: 270;
    --feedback-s: 60%;
    --feedback-l: 65%;
    --color-feedback: hsl(var(--feedback-h) var(--feedback-s) var(--feedback-l));
    --color-feedback-contrast: var(--color-bg);
    --color-feedback-soft: hsl(var(--feedback-h) var(--feedback-s) var(--feedback-l) / .1);
    --color-feedback-text: hsl(var(--feedback-h) var(--feedback-s) 50%);
    --flag-h: 35;
    --flag-s: 100%;
    --flag-l: 61%;
    --color-flag: hsl(var(--flag-h) var(--flag-s) var(--flag-l));
    --color-flag-contrast: var(--color-bg);
    --color-flag-soft: hsl(45 var(--flag-s) var(--flag-l) / .2);
    --color-flag-text: hsl(35 var(--flag-s) 50%);
    --color-okay: #8ba212;
    --color-archive: #978e78;
    --color-archive-contrast: var(--color-bg);
    --color-learning-point: #ec7000;
    --color-neutral-fill: rgba(0 0 0 / .1);
    --color-neutral-stroke: rgba(0 0 0 / .2);
    --shadow-ring: 0 0 0 1px var(--color-fill);
    --shadow-sm: var(--shadow-ring), 0 1px 4px var(--color-fill);
    --shadow-md: var(--shadow-ring), 0 5px 15px var(--color-fill);
    --filter-hover: brightness(.97);
    --filter-active: brightness(.94);
    --color-overlay: hsl(var(--color-fill-solid-hsl) / .8)
}

[data-theme=dark],
[data-theme=dark] .Menu {
    --bg-hsl: 231 28% 20%;
    --text-hsl: 0 0% 93%;
    --muted-hsl: 231 20% 65%;
    --color-fill: rgba(0, 0, 0, .3);
    --color-fill-solid-hsl: 231 28% 15%;
    --color-fill-soft: rgba(0, 0, 0, .15);
    --color-primary-soft: hsl(231, 35%, 30%);
    --filter-hover: contrast(.8) brightness(1);
    --filter-active: contrast(.8) brightness(.8);
    --color-pending-text: hsl(var(--pending-h) var(--pending-s) 70%);
    --color-feedback-text: hsl(var(--feedback-h) 50% 60%);
    --color-neutral-fill: rgba(0 0 0 / .1);
    --color-neutral-stroke: rgba(0 0 0 / .2)
}

@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;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit
}

fieldset {
    border: 0;
    padding: 0;
    margin: 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
    }
}

@media (max-width: 699px) {
    .hide-mobile {
        display: none !important
    }
}

@media (max-width: 999px) {
    .hide-tablet-down {
        display: none !important
    }

    .invisible-tablet-down {
        visibility: hidden !important
    }

    .wrap-tablet-down {
        flex-wrap: wrap
    }
}

@media (min-width: 700px) {
    .hide-tablet-up {
        display: none !important
    }
}

@media (max-width: 1599px) {
    .hide-desktop-down {
        display: none !important
    }

    .wrap-desktop-down {
        flex-wrap: wrap
    }
}

@media (min-width: 1000px) {
    .hide-desktop-up {
        display: none !important
    }

    .wrap-desktop-up {
        flex-wrap: wrap
    }
}

:root {
    scroll-behavior: auto;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-text);
    font-weight: var(--weight-normal);
    line-height: var(--line-height-default);
    overflow-y: scroll;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none
}

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

* {
    -webkit-tap-highlight-color: transparent
}

a,
.link {
    color: var(--color-primary-text);
    text-decoration: none;
    cursor: pointer
}

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

hr {
    border: 0;
    border-top: 1px solid var(--color-fill);
    margin: var(--space-xl) 0
}

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

mark {
    display: inline-block;
    background: #ff0;
    color: #000
}

.highlight-mark mark {
    background: #ff9632
}

@keyframes animate-mark {
    50% {
        transform: scale(1.5)
    }
}

:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px
}

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

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

ui-popup>.enter-active,
ui-popup>.leave-active {
    transition-timing-function: var(--ease-elastic);
    transition-property: transform, opacity;
    transition-duration: .3s
}

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

ui-popup::part(backdrop),
ui-popup>:nth-child(2) {
    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 * var(--space-xs))
}

[data-placement^=bottom] {
    margin-top: var(--space-xs)
}

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

[data-placement^=right] {
    margin-left: var(--space-xs)
}

.d1 {
    font-family: var(--font-display);
    font-size: 6rem;
    font-weight: var(--weight-bold);
    line-height: 1
}

.h1,
h1 {
    font-family: var(--font-display);
    font-size: var(--text-xxl);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-condensed)
}

.h2,
h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-condensed)
}

.h3,
h3 {
    font-family: var(--font-text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-condensed)
}

.h4,
h4 {
    font-family: var(--font-text);
    font-size: var(--text-md);
    font-weight: var(--weight-bold)
}

.h5,
h5 {
    font-family: var(--font-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold)
}

.h6,
h6 {
    font-family: var(--font-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold)
}

.subtitle {
    color: var(--color-muted);
    font-size: var(--text-xxs);
    font-weight: var(--weight-bold);
    text-transform: uppercase
}

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

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

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

.content li>p:first-child {
    display: inline
}

.content>*+:where(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.8em
}

.content :is(a) {
    text-decoration: underline;
    font-weight: var(--weight-medium)
}

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

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

.content ul ul {
    list-style-type: circle
}

.content ul ul ul {
    list-style-type: square
}

.content blockquote {
    color: var(--color-muted);
    border-left: 5px solid var(--color-fill);
    padding-left: var(--space-md)
}

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

.content code {
    font-family: var(--font-mono);
    font-size: 80%
}

.content pre {
    white-space: pre-wrap
}

.content pre code {
    display: block;
    background: var(--color-fill);
    border-radius: var(--radius);
    padding: var(--space-md) !important
}

.content img {
    max-width: 100%
}

.content hr {
    border: 0;
    border-top: 3px solid var(--color-stroke);
    margin: 2em 0
}

.content table {
    border-spacing: 0;
    border-collapse: collapse;
    font-size: var(--text-xs)
}

.content table,
.content table td,
.content table th {
    border: 1px solid var(--color-fill)
}

.content table td,
.content table th {
    padding: var(--space-sm);
    text-align: left
}

.content table th {
    font-weight: var(--weight-bold)
}

.content--compact>*+* {
    margin-top: .5em
}

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

.table-container,
.tableWrapper {
    overflow: auto;
    max-width: 100%;
    width: -moz-fit-content;
    width: fit-content
}

.table-container *,
.tableWrapper * {
    overflow-wrap: normal
}

.table-container table,
.tableWrapper table {
    width: 100%
}

/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp {
    --pswp-bg: #000;
    --pswp-placeholder-bg: #222;
    --pswp-error-text-color: #f7f7f7;
    --pswp-root-z-index: 100000;
    --pswp-preloader-color: rgba(79, 79, 79, .4);
    --pswp-preloader-color-secondary: rgba(255, 255, 255, .9);
    --pswp-icon-color: #fff;
    --pswp-icon-color-secondary: #4f4f4f;
    --pswp-icon-stroke-color: #4f4f4f;
    --pswp-icon-stroke-width: 2px
}

.pswp {
    position: fixed;
    z-index: var(--pswp-root-z-index);
    display: none;
    touch-action: none;
    outline: 0;
    opacity: .003;
    contain: layout style size;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.pswp:focus {
    outline: 0
}

.pswp * {
    box-sizing: border-box
}

.pswp img {
    max-width: none
}

.pswp--open {
    display: block
}

.pswp,
.pswp__bg {
    transform: translateZ(0);
    will-change: opacity
}

.pswp__bg {
    opacity: .005;
    background: var(--pswp-bg)
}

.pswp,
.pswp__scroll-wrap {
    overflow: hidden
}

.pswp,
.pswp__scroll-wrap,
.pswp__bg,
.pswp__container,
.pswp__item,
.pswp__img,
.pswp__zoom-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.pswp {
    position: fixed
}

.pswp__img,
.pswp__zoom-wrap {
    width: auto;
    height: auto
}

.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img {
    cursor: zoom-in
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img {
    cursor: move;
    cursor: grab
}

.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active {
    cursor: grabbing
}

.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,
.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,
.pswp__img {
    cursor: zoom-out
}

.pswp__container,
.pswp__img,
.pswp__button {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pswp__item {
    z-index: 1;
    overflow: hidden
}

.pswp__hidden {
    display: none !important
}

.pswp__error-msg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    padding: 0 10px;
    margin-top: -.5em;
    font-size: 1em;
    line-height: 1;
    color: var(--pswp-error-text-color);
    text-align: center
}

.pswp__error-msg a {
    color: var(--pswp-error-text-color);
    text-decoration: underline
}

.pswp .pswp__hide-on-close {
    opacity: .005;
    will-change: opacity;
    transition: opacity var(--pswp-transition-duration) cubic-bezier(.4, 0, .22, 1);
    z-index: 10;
    pointer-events: none
}

.pswp--ui-visible .pswp__hide-on-close {
    opacity: 1;
    pointer-events: auto
}

.pswp__button {
    position: relative;
    display: block;
    width: 50px;
    height: 60px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: .85;
    -webkit-appearance: none;
    -webkit-touch-callout: none
}

.pswp__button:hover,
.pswp__button:active,
.pswp__button:focus {
    transition: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1
}

.pswp__icn {
    position: absolute;
    top: 14px;
    left: 9px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    pointer-events: none;
    fill: var(--pswp-icon-color);
    color: var(--pswp-icon-color-secondary);
    border-radius: 50%
}

.pswp__icn-shadow {
    stroke: var(--pswp-icon-stroke-color);
    stroke-width: var(--pswp-icon-stroke-width);
    fill: none
}

.pswp__icn:focus {
    outline: 0
}

div.pswp__img--placeholder,
.pswp__img--with-bg {
    background: var(--pswp-placeholder-bg)
}

.pswp__top-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    z-index: 10;
    pointer-events: none !important;
    top: env(safe-area-inset-top)
}

.pswp__top-bar>* {
    pointer-events: auto;
    will-change: opacity
}

.pswp__button--close {
    margin-right: 6px
}

.pswp__button--arrow {
    position: absolute;
    width: 75px;
    height: 100px;
    top: 50%;
    margin-top: -50px
}

.pswp__button--arrow:disabled {
    display: none;
    cursor: default
}

.pswp__button--arrow .pswp__icn {
    top: 50%;
    margin-top: -30px;
    width: 60px;
    height: 60px;
    background: none;
    border-radius: 0
}

.pswp--one-slide .pswp__button--arrow {
    display: none
}

.pswp--touch .pswp__button--arrow {
    visibility: hidden
}

.pswp--has_mouse .pswp__button--arrow {
    visibility: visible
}

.pswp__button--arrow--prev {
    right: auto;
    left: 0
}

.pswp__button--arrow--next {
    right: 0
}

.pswp__button--arrow--next .pswp__icn {
    left: auto;
    right: 14px;
    transform: scaleX(-1)
}

.pswp__button--zoom {
    display: none
}

.pswp--zoom-allowed .pswp__button--zoom {
    display: block
}

.pswp--zoomed-in .pswp__zoom-icn-bar-v {
    display: none
}

.pswp__preloader {
    position: absolute;
    display: none;
    width: 24px;
    height: 24px;
    pointer-events: none;
    border: 3px solid var(--pswp-preloader-color);
    border-left-color: var(--pswp-preloader-color-secondary);
    border-radius: 50%
}

.pswp__preloader--active {
    display: block;
    animation: pswp-fadein 333ms linear, pswp-clockwise .6s linear infinite
}

.pswp__preloader--hiding {
    animation: pswp-clockwise .6s linear infinite;
    opacity: 0 !important
}

@keyframes pswp-clockwise {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes pswp-fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.pswp__counter {
    height: 30px;
    margin: 18px auto 0 20px;
    font-size: 14px;
    line-height: 30px;
    color: var(--pswp-icon-color);
    opacity: .85
}

.pswp--one-slide .pswp__counter {
    display: none
}

.spatie-support-bubble {
    position: fixed;
    bottom: min(var(--space-gutter-x), var(--space-xl));
    right: min(var(--space-gutter-x), var(--space-xl));
    z-index: var(--z-index-overlay);
    transition: transform .2s
}

.spatie-support-bubble__container {
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: all .2s;
    font-size: 1rem;
    line-height: 1.5;
    width: -moz-max-content;
    width: max-content;
    max-width: min(40ch, calc(100% - var(--space-gutter-x) * 2));
    overflow: auto;
    margin-top: -1rem
}

.spatie-support-bubble__button {
    font-size: 1.5rem !important;
    box-shadow: var(--shadow-md)
}

.spatie-support-bubble__form form>*+* {
    margin-top: 1rem
}

.btn {
    --btn-padding: calc(.35 * var(--control-height));
    height: var(--control-height);
    background: var(--color-fill);
    color: var(--color-text);
    border-radius: var(--radius);
    border: 0;
    margin: 0;
    display: inline-flex;
    gap: var(--space-xxs);
    align-items: center;
    justify-content: center;
    padding: 0 var(--btn-padding);
    text-decoration: none !important;
    font-weight: var(--weight-medium);
    white-space: nowrap;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform .2s
}

.btn:is(:disabled, .is-disabled, [aria-disabled=true]) {
    opacity: .5;
    cursor: default
}

.btn .is-inert {
    cursor: default
}

.btn:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]) {
    cursor: pointer
}

.btn:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:hover, .is-hovered, [aria-selected=true]) {
    filter: var(--filter-hover)
}

.btn:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:active) {
    filter: var(--filter-active)
}

.btn:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):active {
    transform: scale(.97)
}

.btn.is-loading {
    color: transparent !important;
    position: relative
}

.btn.is-loading:before {
    content: "";
    width: 1em;
    height: 1em;
    border: .15em var(--color-muted) solid;
    border-top-color: transparent !important;
    border-radius: 50%;
    animation: spinner .6s infinite linear;
    position: absolute;
    left: calc(50% - .5em)
}

.btn.is-active,
.btn[aria-pressed=true],
.btn:has(:checked) {
    color: var(--color-text);
    background: var(--color-primary-soft);
    border-color: transparent
}

:where(:not([open]))>.btn--transparent:where(:disabled, .is-disabled, [aria-disabled=true], .is-inert),
:where(:not([open]))>.btn--transparent:where(:not(:hover, .is-hovered, :focus, .is-focused)) {
    background: transparent;
    color: var(--color-muted)
}

.btn--placeholder {
    border: 1px dashed var(--color-stroke)
}

.btn--outline {
    border: 2px solid var(--color-primary);
    background-color: transparent
}

.btn--outline:not(:disabled, .is-disabled, [aria-disabled=true]):hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    filter: none
}

.btn--sm {
    --control-height: var(--control-height-small);
    --btn-padding: calc(.25 * var(--control-height-small));
    font-size: var(--text-xs)
}

.btn--lg {
    --control-height: 3em;
    --btn-padding: 1.35em;
    font-size: var(--text-md)
}

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

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

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

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

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

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

.btn-group>:first-child,
.btn-group__first {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group>:last-child,
.btn-group__last {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.btn--icon {
    --btn-padding: calc((var(--control-height) - 24px) / 2);
    width: var(--control-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
}

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

.tabler-icon {
    stroke-width: 1.6
}

.icon--thin {
    stroke-width: 1.2
}

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

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

.with-icon {
    display: inline-flex;
    align-items: flex-start;
    vertical-align: bottom
}

.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: 9px;
    height: 9px;
    margin: .3em .1em;
    border-radius: 100%;
    background: currentColor;
    vertical-align: -5px
}

.dot-glow {
    position: relative
}

.dot-glow:before {
    content: "";
    position: absolute;
    inset: -.5em;
    border-radius: 100%;
    background: currentColor;
    animation: dot-glow 2s infinite ease-out
}

@keyframes dot-glow {
    0% {
        transform: scale(0)
    }

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

.card {
    --card-padding: var(--space-lg);
    display: block;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: var(--card-padding);
    text-decoration: none !important;
    transition: box-shadow .2s, border-color .2s
}

@media (hover: hover) {

    a.card:hover,
    .card--interactive:hover {
        box-shadow: var(--shadow-md);
        border-color: transparent;
        position: relative
    }
}

.card.is-active {
    background: var(--color-fill-solid)
}

.card--outline {
    border: 1px solid var(--color-fill)
}

.card__body {
    padding: var(--card-padding)
}

@media (max-width: 699px) {
    .card--full {
        margin: calc(-1 * var(--space-gutter)) !important;
        border-radius: 0;
        min-height: calc(100% + var(--space-gutter) * 2)
    }
}

.choice {
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs)
}

.choice:has(:disabled) {
    color: var(--color-muted);
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.2em;
    height: 1.2em;
    border: 2px solid var(--color-stroke);
    vertical-align: -.2em;
    position: relative;
    flex-shrink: 0;
    transition: transform .1s, background-color .1s, border-color .1s
}

input[type=checkbox]:is(:checked, [type=checkbox]:indeterminate),
input[type=radio]:is(:checked, [type=checkbox]:indeterminate) {
    border-color: transparent
}

input[type=checkbox]:before,
input[type=radio]:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .3s;
    background: var(--color-primary-contrast)
}

input[type=checkbox]:is(:checked, [type=checkbox]:indeterminate):before,
input[type=radio]:is(:checked, [type=checkbox]:indeterminate):before {
    transform: translate(-50%, -50%) scale(1)
}

input[type=checkbox]:not(:disabled, [aria-disabled=true]),
input[type=radio]:not(:disabled, [aria-disabled=true]) {
    cursor: pointer
}

input[type=checkbox]:not(:disabled, [aria-disabled=true]):checked:focus,
input[type=radio]:not(:disabled, [aria-disabled=true]):checked:focus {
    animation: choice-select .3s
}

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

input[type=checkbox]:not(:disabled, [aria-disabled=true]):is(:checked, [type=checkbox]:indeterminate),
input[type=radio]:not(:disabled, [aria-disabled=true]):is(:checked, [type=checkbox]:indeterminate) {
    background: var(--color-primary)
}

input[type=checkbox]:disabled,
input[type=radio]:disabled,
input[type=checkbox][aria-disabled=true],
input[type=radio][aria-disabled=true] {
    background: var(--color-fill);
    border-color: transparent
}

input[type=checkbox]:disabled:is(:checked, [type=checkbox]:indeterminate):before,
input[type=radio]:disabled:is(:checked, [type=checkbox]:indeterminate):before,
input[type=checkbox][aria-disabled=true]:is(:checked, [type=checkbox]:indeterminate):before,
input[type=radio][aria-disabled=true]:is(:checked, [type=checkbox]:indeterminate):before {
    background: var(--color-muted)
}

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

input[type=checkbox]:checked:before {
    width: 80%;
    height: 80%;
    clip-path: var(--shape-check)
}

input[type=checkbox]:indeterminate:before {
    width: 70%;
    height: 20%
}

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

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

@keyframes choice-select {
    50% {
        transform: scale(1.2)
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs)
}

.field-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-muted)
}

.field-description {
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-bottom: var(--space-xxs)
}

.field-label+.field-description {
    margin-top: -.2em
}

.Field-status {
    display: block;
    margin: .4em 0;
    font-size: 85%;
    color: var(--color-muted)
}

.Field--error .Field-status {
    color: var(--color-danger);
    font-weight: 600
}

.Field--error .input {
    border-color: var(--color-danger) !important
}

.Field--success .Field-status {
    color: var(--color-success)
}

.Field--success .input {
    border-color: var(--color-success) !important
}

.Field-text {
    font-size: 16px
}

.Fieldset {
    border-top: 2px solid var(--color-fill)
}

.Fieldset:not(:last-child) {
    margin-bottom: 40px
}

.Fieldset-legend {
    text-transform: uppercase;
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 600;
    margin-bottom: 15px;
    padding-right: 10px
}

.Row {
    display: flex;
    align-items: flex-start;
    margin-left: -.4rem;
    margin-right: -.4rem
}

.Row>* {
    margin: 0 .4rem;
    width: 100%
}

:root {
    --input-padding: calc(var(--control-height) * .3)
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: var(--color-muted);
    opacity: .5
}

input::placeholder,
textarea::placeholder {
    color: var(--color-muted);
    opacity: .5
}

.input {
    -moz-appearance: none;
    -webkit-appearance: none;
    border-radius: var(--radius);
    color: var(--color-text);
    height: var(--control-height);
    padding: 0 var(--input-padding);
    width: 100%;
    border: 1px solid var(--color-stroke);
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    box-sizing: border-box;
    flex-shrink: 0
}

.input:not(.is-disabled, :disabled):focus,
.input:not(.is-disabled, :disabled).is-focused,
.input:not(.is-disabled, :disabled):focus-within {
    border-color: var(--color-primary);
    background-color: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-primary)
}

.input:disabled,
.input.is-disabled {
    cursor: default;
    color: var(--color-muted);
    background: var(--color-fill-soft)
}

.input::-webkit-search-decoration {
    -webkit-appearance: none
}

.input-within:has(input:focus-visible) {
    box-shadow: inset 0 0 0 2px var(--color-primary)
}

select.input,
.input--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
}

.input--multiline {
    height: auto;
    padding-top: .6em;
    padding-bottom: .6em
}

.input--transparent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important
}

.input--error {
    border-color: var(--color-danger)
}

.input--placeholder {
    border: 2px dashed var(--color-stroke);
    box-shadow: none !important
}

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

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

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

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

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

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

.input-valid-indicator {
    display: flex
}

.input-valid-indicator .input {
    padding-right: 3em
}

.input-valid-indicator .input:not(.input--error):valid {
    border-color: var(--color-success)
}

.input-valid-indicator .input:not(.input--error):valid+* {
    margin-left: -1.5em;
    margin-top: .4em;
    font-size: 1.3em;
    color: var(--color-success);
    pointer-events: none;
    animation: pop-in .3s
}

.input-valid-indicator .input:not(.input--error):valid+*:before {
    content: "✓"
}

.input-valid-indicator .input--error+* {
    margin-left: -1.5em;
    margin-top: .4em;
    font-size: 1.3em;
    color: var(--color-danger);
    pointer-events: none;
    animation: pop-in .3s
}

.input-valid-indicator .input--error+*:before {
    content: "✗"
}

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

    50% {
        transform: scale(1.5)
    }
}

.logo {
    text-decoration: none !important;
    display: inline-flex;
    align-items: flex-end;
    color: inherit
}

.logo>img,
.logo>svg {
    height: 2.5em
}

.Auth {
    background-color: var(--brand-dark);
    color: var(--brand-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 0 var(--space-gutter)
}

.Auth>* {
    width: 500px;
    max-width: 100%
}

.Auth-header {
    text-align: left;
    margin-bottom: 40px;
    margin-top: 6vh;
    font-size: 33px
}

.Auth-header img {
    height: .8em
}

.Auth-body {
    --card-padding: var(--space-lg);
    display: block;
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: var(--radius);
    padding: var(--card-padding);
    text-decoration: none !important;
    transition: box-shadow .2s, border-color .2s;
    border-radius: var(--radius) !important;
    --card-padding: var(--space-gutter);
    margin-bottom: 50px;
    flex-shrink: 0;
    line-height: 1.4;
    transition: height .4s;
    overflow: hidden;
    position: relative
}

@media (min-width: 700px) {
    .Auth-body {
        font-size: 120%
    }
}

.Auth-body h1 {
    font-weight: 600;
    font-size: 130%
}

.Auth-body h2 {
    font-weight: var(--weight-bold);
    font-size: 20px;
    margin-bottom: 10px
}

.Auth-body hr {
    margin: 35px -35px;
    border: 0;
    height: 10px;
    background: var(--color-fill)
}

.Auth-body .Toolbar--actions {
    flex-direction: column;
    align-items: stretch
}

.Auth-prompt {
    color: var(--color-muted)
}

.Auth-footer {
    margin-top: auto;
    margin-bottom: 30px
}

.Auth-footer-links>li {
    display: inline;
    margin-right: 15px
}

.Auth-footer-links,
.Auth-footer-links a {
    color: var(--brand-light);
    opacity: .7
}

.Login-actions {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-weight: 400
}

.Register-heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.Register-agree a,
.Verify a {
    font-weight: var(--weight-bold)
}

.alert {
    border-radius: var(--radius);
    padding: calc(var(--space-sm) + 1px) var(--space-md);
    background: var(--color-fill);
    display: flex;
    align-items: baseline;
    font-size: var(--text-xs);
    gap: var(--space-sm);
    font-weight: var(--weight-medium)
}

.alert__icon {
    display: flex;
    font-size: var(--text-md);
    line-height: var(--line-height-default);
    align-self: flex-start
}

.alert__message {
    padding-block: 2px
}

.alert__actions {
    display: flex;
    align-items: center;
    margin-block: calc(-1 * var(--space-xs));
    margin-right: calc(-1 * var(--space-sm));
    margin-left: auto;
    gap: var(--space-sm)
}

.Toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px
}

.Toolbar--tight {
    gap: 0
}

.Toolbar--above {
    margin-bottom: 10px
}

.Toolbar--below {
    margin-top: 10px
}

.Toolbar--inline {
    display: inline-flex
}

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

.Toolbar--right,
.Toolbar.--right {
    flex-direction: row-reverse
}

.Toolbar--center {
    justify-content: center
}

.Toolbar--baseline {
    align-items: baseline
}

@media (max-width: 699px) {

    .Toolbar--actions,
    .Toolbar.--actions {
        flex-direction: column;
        align-items: stretch
    }
}

.Toolbar-text {
    color: var(--color-muted);
    padding: 0 10px
}

.Toolbar-text strong {
    font-weight: 600
}

.Toolbar-space {
    flex-grow: 1
}

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

.Justified {
    display: flex;
    justify-content: space-between
}

.Avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fill);
    vertical-align: middle;
    overflow: hidden;
    border-radius: 100%;
    text-decoration: none !important;
    fill: var(--color-muted);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    aspect-ratio: 1;
    max-width: 100%
}

.Avatar text {
    cursor: default
}

.Avatar--small {
    width: 32px;
    height: 32px
}

.Avatar--tiny {
    width: 24px;
    height: 24px
}

.AvatarList {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-xxs)
}

.AvatarList>* {
    text-decoration: none !important;
    flex-shrink: 0
}

.AvatarList>*+* {
    border-radius: 100%
}

.AvatarList .Avatar {
    width: 2.25em;
    height: 2.25em
}

.AvatarList--compact {
    flex-wrap: nowrap
}

.AvatarList--compact>*+* {
    margin-left: -10px;
    background: var(--color-bg)
}

.AvatarList--compact .Avatar {
    border: 2px solid var(--color-bg)
}

.tooltip {
    background: var(--color-emphasis);
    border-radius: var(--radius);
    box-shadow: var(--space-md);
    color: var(--color-emphasis-contrast);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    max-width: 30ch;
    padding: var(--space-xs) var(--space-sm);
    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: var(--text-xxs);
    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: var(--space-xs) var(--space-sm);
    font-size: var(--text-xxs)
}

.Menu {
    background-color: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-width: 170px;
    width: -moz-fit-content;
    width: fit-content;
    padding: 6px;
    color: var(--color-text);
    overflow: auto;
    font-weight: 400;
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1;
    max-height: 60vh;
    text-align: left
}

.Menu-item {
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    padding: .6em .8em;
    display: flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 6px
}

.Menu-item,
.Menu-item:hover {
    color: var(--color-text)
}

.Menu-item:disabled,
.Menu-item.is-disabled {
    opacity: .5;
    cursor: not-allowed
}

.Menu-item {
    cursor: pointer;
    text-decoration: none !important
}

.Menu-item:not(:disabled):hover,
.Menu-item:not(:disabled).is-hovered,
.Menu-item:not(:disabled):focus,
.Menu-item:not(:disabled):focus-within,
.Menu-item:not(:disabled)[aria-selected=true],
[open]>.Menu-item:not(:disabled) {
    background: var(--color-fill-soft)
}

.Menu-item:not(:disabled):active {
    background: var(--color-fill)
}

.Menu-item:not(:disabled).is-active,
.Menu-item:not(:disabled)[aria-current=page],
.Menu-item:not(:disabled)[aria-checked=true] {
    background: var(--color-primary-soft)
}

.Menu-item--danger {
    color: var(--color-danger) !important
}

.Menu-item-check {
    width: 1.25em;
    height: 1.25em;
    margin-left: -5px;
    margin-right: 5px;
    flex-shrink: 0
}

.Menu-item-icon {
    margin-right: 10px;
    width: 1.25em;
    height: 1.25em;
    text-align: center;
    flex-shrink: 0
}

.Menu-item-title {
    display: block;
    font-weight: 600
}

.Menu-item-description {
    display: block;
    margin-top: 2px;
    font-size: 85%;
    line-height: 1.3;
    color: var(--color-muted);
    max-width: 35ch;
    white-space: normal
}

.Menu-item-badge {
    margin-left: auto;
    padding-left: 10px;
    color: var(--color-muted);
    font-size: 85%;
    align-self: baseline
}

.Menu-item-end {
    margin-left: auto;
    padding-left: 20px
}

.Menu-divider {
    border-top: 1px solid var(--color-stroke);
    margin: 6px 10px
}

.Menu-heading {
    text-transform: uppercase;
    font-size: 85%;
    font-weight: 600;
    color: var(--color-muted);
    padding: 5px 10px
}

.Menu-heading:not(:first-child) {
    margin-top: 10px
}

ui-popup:has(>.drawer)::part(backdrop) {
    background: var(--color-overlay);
    height: 100vh
}

.drawer {
    background: var(--color-bg);
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    max-height: none !important;
    margin: 0;
    height: 100vh;
    max-width: 85vw !important;
    min-width: min(70vw, 30ch);
    box-shadow: var(--shadow-md);
    padding-inline: var(--space-lg);
    padding-top: calc(var(--space-lg) + env(safe-area-inset-top));
    padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
    z-index: var(--z-index-overlay);
    overflow: auto;
    transition: transform .3s !important
}

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

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

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

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

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--control-height);
    padding: var(--space-sm) var(--space-md);
    font-weight: var(--weight-medium);
    text-decoration: none !important;
    color: var(--color-text);
    border-radius: 99px;
    width: 100%;
    transition: transform .2s;
    transform: none !important
}

.nav-link:is(:disabled, .is-disabled, [aria-disabled=true]) {
    opacity: .5;
    cursor: default
}

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

.nav-link:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]) {
    cursor: pointer
}

.nav-link:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:hover, .is-hovered, [aria-selected=true]) {
    filter: var(--filter-hover)
}

.nav-link:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:active) {
    filter: var(--filter-active)
}

.nav-link:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):active {
    transform: scale(.97)
}

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

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

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

.nav-link:not(:disabled):where(:hover, :focus) {
    background: var(--color-fill)
}

.nav-link.is-active,
.nav-link[aria-current=page],
.nav-link[aria-selected=true] {
    filter: none !important;
    background: var(--color-primary-soft);
    font-weight: var(--weight-bold)
}

.nav-link.is-active .icon,
.nav-link[aria-current=page] .icon,
.nav-link[aria-selected=true] .icon {
    stroke-width: 2px
}

.nav-divider {
    margin: var(--space-md) var(--space-sm)
}

.nav--sm {
    font-size: var(--text-xs)
}

.nav--sm .nav-link {
    padding: var(--space-xs) var(--space-sm);
    gap: var(--space-xs);
    min-height: 0
}

.nav--row {
    display: flex;
    flex-direction: row
}

.nav--row .nav-link {
    width: auto;
    gap: var(--space-xxs);
    padding: var(--space-xs) var(--space-sm);
    min-height: 0
}

@media (max-width: 699px) {
    .nav--collapsible {
        display: flex;
        flex-direction: row
    }

    .nav--collapsible .nav-link {
        width: auto;
        gap: var(--space-xs)
    }
}

.nav-sub {
    display: flex;
    flex-direction: column;
    margin-left: var(--space-lg);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-md)
}

:not(.is-active, [aria-current=page], [aria-selected=true])+.nav-sub:not(:has(.is-active, [aria-current=page], [aria-selected=true])) {
    display: none
}

.nav-sub-link {
    display: block;
    color: inherit;
    padding-block: var(--space-xxs);
    font-size: var(--text-xs)
}

.nav-sub-link.is-active,
.nav-sub-link[aria-current=page],
.nav-sub-link[aria-selected=true] {
    color: var(--color-primary-text);
    font-weight: var(--weight-bold);
    text-decoration: none
}

.Badge {
    padding: .2em .4em;
    border-radius: 4px;
    font-weight: var(--weight-bold);
    display: inline-block;
    color: var(--color-flag);
    border: 2px solid;
    line-height: 1
}

.badge {
    border-radius: 999px;
    background: var(--color-fill);
    color: var(--color-muted);
    border: 0;
    margin: 0;
    font-size: var(--text-xxs);
    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: .25em .6em;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0
}

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

.badge .icon {
    stroke-width: 2.5
}

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

.container {
    margin-inline: auto;
    padding-left: max(var(--space-gutter-x), env(safe-area-inset-left));
    padding-right: max(var(--space-gutter-x), env(safe-area-inset-right));
    max-width: 1599px;
    width: 100%
}

.container--wide {
    max-width: none
}

.section {
    padding-block: var(--space-gutter-y)
}

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

.stack-borders>:not(:last-child) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.stack-borders>*+* {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

:not(:focus-within)>.when-focus-within-parent {
    display: none
}

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

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

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

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

.justify-center {
    justify-content: center
}

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

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

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

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

.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-stretch {
    align-self: stretch
}

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

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

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

.push-start {
    margin-inline-end: auto
}

.push-center {
    margin-inline: auto
}

.push-end {
    margin-inline-start: auto
}

@media (max-width: 699px) {
    .break-mobile {
        order: 999;
        width: 100%;
        flex-grow: 1
    }
}

.grow {
    flex-grow: 1
}

.shrink {
    flex-shrink: 1;
    min-width: 0;
    min-height: 0
}

.no-shrink {
    flex-shrink: 0
}

.full-width {
    width: 100%
}

.full-height {
    height: 100%
}

@media (max-width: 699px) {
    .full-width-mobile {
        width: 100% !important
    }

    .grow-mobile {
        flex-grow: 1
    }
}

@media (max-width: 999px) {
    .full-width-tablet-down {
        width: 100% !important
    }

    .grow-tablet-down {
        flex-grow: 1
    }
}

.wrap {
    flex-wrap: wrap
}

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

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

.dividers>*+* {
    border-top: 1px solid var(--color-stroke);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg)
}

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

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.overflow-visible {
    overflow: visible
}

.overflow-hidden {
    overflow: hidden
}

.overflow-clip {
    overflow: clip
}

.overflow-auto {
    overflow: auto;
    --sticky-offset-top: 0px;
    --sticky-offset-bottom: 0px;
    overscroll-behavior-y: contain
}

.scrollable {
    overflow: auto
}

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

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

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

.scrollable-x {
    overflow-x: auto
}

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

.scrollable-x:before {
    left: -1px;
    background-image: linear-gradient(to right, var(--color-bg), transparent)
}

.scrollable-x:after {
    right: -1px;
    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 {
    overflow-y: auto
}

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

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

.scrollable-y:after {
    bottom: 0;
    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-45 {
    transform: rotate(45deg)
}

.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)
}

.transition {
    transition: all var(--transition-duration)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.color-inherit {
    color: inherit
}

.color-text {
    color: var(--color-text) !important
}

.color-muted {
    --color-text: var(--color-muted);
    color: var(--color-text)
}

.color-gold {
    color: var(--brand-gold)
}

.bg-default {
    background-color: var(--color-bg)
}

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

.bg-fill-soft {
    background-color: var(--color-fill-soft)
}

.bg-fill-solid {
    background-color: var(--color-fill-solid)
}

.bg-brand {
    --color-bg: var(--color-fill);
    --color-text: var(--brand-light);
    --color-muted: rgba(255, 255, 255, .5);
    --color-stroke: rgba(255, 255, 255, .15);
    --color-fill: rgba(0, 0, 0, .5);
    --color-primary-contrast: var(--brand-dark);
    --color-warning-contrast: var(--brand-dark);
    background-color: var(--brand-dark);
    color: var(--color-text)
}

.bg-gold {
    background-color: var(--brand-gold);
    color: var(--color-bg)
}

.bg-bookmark {
    background-color: var(--color-bookmark) !important;
    color: var(--color-bg) !important
}

.color-okay {
    color: var(--color-okay) !important
}

.color-bookmark {
    color: var(--color-bookmark) !important
}

.color-flag {
    --color-text: var(--color-flag-text);
    --color-muted: var(--color-flag-text);
    color: var(--color-text) !important
}

.color-flag-bg {
    --color-text: var(--color-flag);
    --color-muted: var(--color-flag);
    color: var(--color-text) !important
}

.bg-flag {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-flag-contrast);
    --color-muted: var(--color-flag-contrast);
    background-color: var(--color-flag) !important;
    color: var(--color-text) !important
}

.bg-flag-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-flag-soft) !important
}

.color-feedback {
    --color-text: var(--color-feedback-text);
    --color-muted: var(--color-feedback-text);
    color: var(--color-text) !important
}

.color-feedback-bg {
    --color-text: var(--color-feedback);
    --color-muted: var(--color-feedback);
    color: var(--color-text) !important
}

.bg-feedback {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-feedback-contrast);
    --color-muted: var(--color-feedback-contrast);
    background-color: var(--color-feedback) !important;
    color: var(--color-text) !important
}

.bg-feedback-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-feedback-soft) !important
}

.color-pending {
    --color-text: var(--color-pending-text);
    --color-muted: var(--color-pending-text);
    color: var(--color-text) !important
}

.color-pending-bg {
    --color-text: var(--color-pending);
    --color-muted: var(--color-pending);
    color: var(--color-text) !important
}

.bg-pending {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-pending-contrast);
    --color-muted: var(--color-pending-contrast);
    background-color: var(--color-pending) !important;
    color: var(--color-text) !important
}

.bg-pending-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-pending-soft) !important
}

.color-danger {
    --color-text: var(--color-danger-text);
    --color-muted: var(--color-danger-text);
    color: var(--color-text) !important
}

.color-danger-bg {
    --color-text: var(--color-danger);
    --color-muted: var(--color-danger);
    color: var(--color-text) !important
}

.bg-danger {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-danger-contrast);
    --color-muted: var(--color-danger-contrast);
    background-color: var(--color-danger) !important;
    color: var(--color-text) !important
}

.bg-danger-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-danger-soft) !important
}

.color-warning {
    --color-text: var(--color-warning-text);
    --color-muted: var(--color-warning-text);
    color: var(--color-text) !important
}

.color-warning-bg {
    --color-text: var(--color-warning);
    --color-muted: var(--color-warning);
    color: var(--color-text) !important
}

.bg-warning {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-warning-contrast);
    --color-muted: var(--color-warning-contrast);
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important
}

.bg-warning-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-warning-soft) !important
}

.color-success {
    --color-text: var(--color-success-text);
    --color-muted: var(--color-success-text);
    color: var(--color-text) !important
}

.color-success-bg {
    --color-text: var(--color-success);
    --color-muted: var(--color-success);
    color: var(--color-text) !important
}

.bg-success {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-success-contrast);
    --color-muted: var(--color-success-contrast);
    background-color: var(--color-success) !important;
    color: var(--color-text) !important
}

.bg-success-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-success-soft) !important
}

.color-primary {
    --color-text: var(--color-primary-text);
    --color-muted: var(--color-primary-text);
    color: var(--color-text) !important
}

.color-primary-bg {
    --color-text: var(--color-primary);
    --color-muted: var(--color-primary);
    color: var(--color-text) !important
}

.bg-primary {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-primary-contrast);
    --color-muted: var(--color-primary-contrast);
    background-color: var(--color-primary) !important;
    color: var(--color-text) !important
}

.bg-primary-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-primary-soft) !important
}

.color-emphasis {
    --color-text: var(--color-emphasis-text);
    --color-muted: var(--color-emphasis-text);
    color: var(--color-text) !important
}

.color-emphasis-bg {
    --color-text: var(--color-emphasis);
    --color-muted: var(--color-emphasis);
    color: var(--color-text) !important
}

.bg-emphasis {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    --color-text: var(--color-emphasis-contrast);
    --color-muted: var(--color-emphasis-contrast);
    background-color: var(--color-emphasis) !important;
    color: var(--color-text) !important
}

.bg-emphasis-soft {
    --color-fill: var(--color-neutral-fill);
    --color-stroke: var(--color-neutral-stroke);
    background-color: var(--color-emphasis-soft) !important
}

.text-xxl {
    font-size: var(--text-xxl) !important
}

@media (max-width: 699px) {
    .text-xxl-mobile {
        font-size: var(--text-xxl) !important
    }
}

.text-xl {
    font-size: var(--text-xl) !important
}

@media (max-width: 699px) {
    .text-xl-mobile {
        font-size: var(--text-xl) !important
    }
}

.text-lg {
    font-size: var(--text-lg) !important
}

@media (max-width: 699px) {
    .text-lg-mobile {
        font-size: var(--text-lg) !important
    }
}

.text-md {
    font-size: var(--text-md) !important
}

@media (max-width: 699px) {
    .text-md-mobile {
        font-size: var(--text-md) !important
    }
}

.text-sm {
    font-size: var(--text-sm) !important
}

@media (max-width: 699px) {
    .text-sm-mobile {
        font-size: var(--text-sm) !important
    }
}

.text-xs {
    font-size: var(--text-xs) !important
}

@media (max-width: 699px) {
    .text-xs-mobile {
        font-size: var(--text-xs) !important
    }
}

.text-xxs {
    font-size: var(--text-xxs) !important
}

@media (max-width: 699px) {
    .text-xxs-mobile {
        font-size: var(--text-xxs) !important
    }
}

.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
    }
}

.animate-slide-down {
    animation: slide-down var(--transition-duration) var(--transition-easing)
}

@keyframes slide-down {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: none
    }
}

.switcher {
    display: flex;
    flex-wrap: wrap;
    --threshold: 30rem
}

.switcher>* {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc((var(--threshold) - 100%) * 999)
}

.no-pointer {
    pointer-events: none
}

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

.clickable {
    transition: transform .2s
}

.clickable:is(:disabled, .is-disabled, [aria-disabled=true]) {
    opacity: .5;
    cursor: default
}

.clickable .is-inert {
    cursor: default
}

.clickable:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]) {
    cursor: pointer
}

.clickable:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:hover, .is-hovered, [aria-selected=true]) {
    filter: var(--filter-hover)
}

.clickable:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):is(:active) {
    filter: var(--filter-active)
}

.clickable:not(:disabled, .is-disabled, [aria-disabled=true], .is-inert, [aria-current=page]):active {
    transform: scale(.97)
}

.rounded {
    border-radius: var(--radius)
}

.rounded-lg {
    border-radius: calc(var(--radius) * 2)
}

.rounded-full {
    border-radius: 999px
}

.overlay-container {
    position: relative
}

.overlay,
.pseudo-overlay:before {
    position: absolute;
    inset: 0;
    z-index: 3
}

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

.above-overlay {
    position: relative;
    z-index: 4
}

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

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

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

.placeholder-text {
    color: var(--color-muted);
    font-style: italic
}

.pre-line {
    white-space: pre-line
}

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

.measure {
    max-width: var(--measure)
}

.measure-narrow {
    max-width: 55ch
}

.measure-narrower {
    max-width: 45ch
}

.more-items {
    font-size: 90%;
    color: var(--color-muted);
    font-weight: 600
}

.more-items:hover {
    opacity: .6
}

.payment {
    border: 1px dashed var(--color-stroke);
    color: var(--color-muted);
    padding: .2em .4em;
    border-radius: 5px;
    font-size: 90%;
    cursor: default;
    white-space: nowrap;
    display: inline-flex;
    align-items: center
}

.payment>*+* {
    margin-left: 2px
}

.payment .icon {
    font-size: 80%
}

.payment--color-pending {
    border: transparent;
    background: var(--color-warning-soft);
    color: var(--color-warning)
}

.payment--color-paid {
    border: transparent;
    background: var(--color-success-soft);
    color: var(--color-success)
}

.current-contributions {
    color: var(--color-warning)
}

.past-contributions {
    color: var(--color-success)
}

@media (max-width: 699px) {
    :root {
        --gutter: var(--space-gutter)
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    :root {
        --gutter: 20px
    }
}

@media (min-width: 1000px) {
    :root {
        --gutter: 30px
    }
}

.feature {
    display: flex
}

.feature .icon {
    margin-right: 1rem;
    flex-shrink: 0;
    font-size: 200%
}

@keyframes flagged {
    50% {
        transform: scale(1.5) rotate(-10deg)
    }
}

.FlagButton.is-flagged {
    color: var(--color-bg) !important;
    background: var(--color-flag) !important
}

.FlagButton.is-flagged .icon {
    animation: flagged .4s ease-in-out 1
}

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

.underline {
    text-decoration: underline
}

.subscribe-overlay {
    background-color: hsl(var(--bg-hsl) / .8);
    background-image: radial-gradient(farthest-side, var(--color-warning-soft) 30%, transparent);
    background-repeat: no-repeat;
    color: var(--color-warning-text);
    backdrop-filter: blur(1px) grayscale(.8);
    -webkit-backdrop-filter: blur(1px) grayscale(.8);
    border-radius: var(--radius)
}

.subscribe-overlay--interactive {
    overflow: hidden
}

.subscribe-overlay--interactive>* {
    transition: transform .5s var(--ease-elastic), opacity .5s
}

.subscribe-overlay--interactive:not(:hover, :focus-within) {
    background-image: none;
    color: var(--color-muted)
}

.subscribe-overlay--interactive:not(:hover, :focus-within)>:first-child {
    transform: translateY(4rem)
}

.subscribe-overlay--interactive:not(:hover, :focus-within)>:not(:first-child) {
    opacity: 0;
    transform: translateY(4rem)
}

.subscribe-overlay--disabled {
    background-image: none;
    color: var(--color-muted)
}

.sticky-top,
.sticky-bottom {
    position: sticky;
    transition: box-shadow .2s
}

.sticky-top {
    top: var(--sticky-offset-top);
    margin-top: 1px;
    z-index: 5
}

.sticky-top.is-stuck {
    box-shadow: 0 1px var(--color-fill), 0 10px 10px -10px var(--color-stroke)
}

.sticky-bottom {
    bottom: var(--sticky-offset-bottom);
    margin-bottom: 1px;
    z-index: 4
}

.sticky-bottom.is-stuck {
    box-shadow: 0 -1px var(--color-fill), 0 -10px 10px -10px var(--color-stroke)
}

@media (max-width: 699px) {
    .sticky-bottom.is-stuck {
        padding-bottom: max(var(--space-gutter), env(safe-area-inset-bottom)) !important
    }
}

.transition {
    transition: all .3s
}

.uppercase {
    text-transform: uppercase
}

.faq {
    padding: var(--space-lg);
    border-radius: var(--radius);
    transition: all .3s;
    background: var(--color-bg)
}

.faq>summary {
    cursor: pointer;
    padding: var(--space-md) var(--space-lg);
    margin-block: calc(-1 * var(--space-lg));
    margin-inline: calc(-1 * var(--space-lg));
    transition: all .3s;
    display: flex;
    justify-content: space-between
}

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

.faq>summary:after {
    content: "+";
    font-family: var(--font-system);
    font-weight: 400;
    font-size: var(--text-xl);
    color: var(--color-muted);
    line-height: 1;
    margin-block: -.25em
}

.faq[open] {
    padding: var(--space-lg)
}

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

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

.position-relative {
    position: relative
}

@media print {
    .hide-print {
        display: none
    }
}

@media (hover: hover) {
    .hide-hover {
        display: none
    }
}

.shadow-sm {
    box-shadow: var(--shadow-sm)
}

.shadow-md {
    box-shadow: var(--shadow-md)
}

.line-height-max {
    --line-height-expanded: var(--line-height-max)
}

.line-height-expanded {
    line-height: var(--line-height-expanded)
}

.line-height-condensed {
    line-height: var(--line-height-condensed)
}

.has-controls:not(:hover, :focus-visible) .controls:not(:focus-visible) {
    opacity: 0
}

.has-controls:is(:hover, :focus-visible) .controls-inverse:not(:focus-visible) {
    opacity: 0
}

.overlap {
    display: grid;
    grid-template-columns: 1fr
}

.overlap>* {
    grid-area: 1 / 1
}

.opacity-50 {
    opacity: .5
}

.opacity-25 {
    opacity: .25
}

.spoiler {
    filter: blur(5px);
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.cursor-move {
    cursor: move
}

.visibility-hidden {
    visibility: hidden
}

.font-mono {
    font-family: var(--font-mono)
}

.thumbnail {
    float: right;
    width: 8rem;
    max-width: 30%;
    aspect-ratio: 1;
    margin-left: var(--space-md);
    margin-bottom: var(--space-md);
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm)
}

.gap-gutter {
    gap: var(--space-gutter)
}

.gap-y-gutter {
    row-gap: var(--space-gutter)
}

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

.p-gutter {
    padding: var(--space-gutter)
}

.px-gutter {
    padding-inline: var(--space-gutter)
}

.py-gutter {
    padding-block: var(--space-gutter)
}

.pt-gutter {
    padding-top: var(--space-gutter)
}

.pb-gutter {
    padding-bottom: var(--space-gutter)
}

.m-gutter {
    margin: var(--space-gutter)
}

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

.mx-gutter {
    margin-inline: var(--space-gutter)
}

.-mx-gutter {
    margin-inline: calc(-1 * var(--space-gutter))
}

.my-gutter {
    margin-block: var(--space-gutter)
}

.-my-gutter {
    margin-block: calc(-1 * var(--space-gutter))
}

.mt-gutter {
    margin-top: var(--space-gutter)
}

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

.mb-gutter {
    margin-bottom: var(--space-gutter)
}

.-mb-gutter {
    margin-bottom: calc(-1 * var(--space-gutter))
}

.gap-xxxl {
    gap: var(--space-xxxl)
}

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

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

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

.px-xxxl {
    padding-inline: var(--space-xxxl)
}

.py-xxxl {
    padding-block: var(--space-xxxl)
}

.pt-xxxl {
    padding-top: var(--space-xxxl)
}

.pb-xxxl {
    padding-bottom: var(--space-xxxl)
}

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

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

.mx-xxxl {
    margin-inline: var(--space-xxxl)
}

.-mx-xxxl {
    margin-inline: calc(-1 * var(--space-xxxl))
}

.my-xxxl {
    margin-block: var(--space-xxxl)
}

.-my-xxxl {
    margin-block: calc(-1 * var(--space-xxxl))
}

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

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

.mb-xxxl {
    margin-bottom: var(--space-xxxl)
}

.-mb-xxxl {
    margin-bottom: calc(-1 * var(--space-xxxl))
}

.gap-xxl {
    gap: var(--space-xxl)
}

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

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

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

.px-xxl {
    padding-inline: var(--space-xxl)
}

.py-xxl {
    padding-block: var(--space-xxl)
}

.pt-xxl {
    padding-top: var(--space-xxl)
}

.pb-xxl {
    padding-bottom: var(--space-xxl)
}

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

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

.mx-xxl {
    margin-inline: var(--space-xxl)
}

.-mx-xxl {
    margin-inline: calc(-1 * var(--space-xxl))
}

.my-xxl {
    margin-block: var(--space-xxl)
}

.-my-xxl {
    margin-block: calc(-1 * var(--space-xxl))
}

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

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

.mb-xxl {
    margin-bottom: var(--space-xxl)
}

.-mb-xxl {
    margin-bottom: calc(-1 * var(--space-xxl))
}

.gap-xl {
    gap: var(--space-xl)
}

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

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

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

.px-xl {
    padding-inline: var(--space-xl)
}

.py-xl {
    padding-block: var(--space-xl)
}

.pt-xl {
    padding-top: var(--space-xl)
}

.pb-xl {
    padding-bottom: var(--space-xl)
}

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

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

.mx-xl {
    margin-inline: var(--space-xl)
}

.-mx-xl {
    margin-inline: calc(-1 * var(--space-xl))
}

.my-xl {
    margin-block: var(--space-xl)
}

.-my-xl {
    margin-block: calc(-1 * var(--space-xl))
}

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

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

.mb-xl {
    margin-bottom: var(--space-xl)
}

.-mb-xl {
    margin-bottom: calc(-1 * var(--space-xl))
}

.gap-lg {
    gap: var(--space-lg)
}

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

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

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

.px-lg {
    padding-inline: var(--space-lg)
}

.py-lg {
    padding-block: var(--space-lg)
}

.pt-lg {
    padding-top: var(--space-lg)
}

.pb-lg {
    padding-bottom: var(--space-lg)
}

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

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

.mx-lg {
    margin-inline: var(--space-lg)
}

.-mx-lg {
    margin-inline: calc(-1 * var(--space-lg))
}

.my-lg {
    margin-block: var(--space-lg)
}

.-my-lg {
    margin-block: calc(-1 * var(--space-lg))
}

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

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

.mb-lg {
    margin-bottom: var(--space-lg)
}

.-mb-lg {
    margin-bottom: calc(-1 * var(--space-lg))
}

.gap-md {
    gap: var(--space-md)
}

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

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

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

.px-md {
    padding-inline: var(--space-md)
}

.py-md {
    padding-block: var(--space-md)
}

.pt-md {
    padding-top: var(--space-md)
}

.pb-md {
    padding-bottom: var(--space-md)
}

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

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

.mx-md {
    margin-inline: var(--space-md)
}

.-mx-md {
    margin-inline: calc(-1 * var(--space-md))
}

.my-md {
    margin-block: var(--space-md)
}

.-my-md {
    margin-block: calc(-1 * var(--space-md))
}

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

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

.mb-md {
    margin-bottom: var(--space-md)
}

.-mb-md {
    margin-bottom: calc(-1 * var(--space-md))
}

.gap-sm {
    gap: var(--space-sm)
}

.gap-y-sm {
    row-gap: var(--space-sm)
}

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

.p-sm {
    padding: var(--space-sm)
}

.px-sm {
    padding-inline: var(--space-sm)
}

.py-sm {
    padding-block: var(--space-sm)
}

.pt-sm {
    padding-top: var(--space-sm)
}

.pb-sm {
    padding-bottom: var(--space-sm)
}

.m-sm {
    margin: var(--space-sm)
}

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

.mx-sm {
    margin-inline: var(--space-sm)
}

.-mx-sm {
    margin-inline: calc(-1 * var(--space-sm))
}

.my-sm {
    margin-block: var(--space-sm)
}

.-my-sm {
    margin-block: calc(-1 * var(--space-sm))
}

.mt-sm {
    margin-top: var(--space-sm)
}

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

.mb-sm {
    margin-bottom: var(--space-sm)
}

.-mb-sm {
    margin-bottom: calc(-1 * var(--space-sm))
}

.gap-xs {
    gap: var(--space-xs)
}

.gap-y-xs {
    row-gap: var(--space-xs)
}

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

.p-xs {
    padding: var(--space-xs)
}

.px-xs {
    padding-inline: var(--space-xs)
}

.py-xs {
    padding-block: var(--space-xs)
}

.pt-xs {
    padding-top: var(--space-xs)
}

.pb-xs {
    padding-bottom: var(--space-xs)
}

.m-xs {
    margin: var(--space-xs)
}

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

.mx-xs {
    margin-inline: var(--space-xs)
}

.-mx-xs {
    margin-inline: calc(-1 * var(--space-xs))
}

.my-xs {
    margin-block: var(--space-xs)
}

.-my-xs {
    margin-block: calc(-1 * var(--space-xs))
}

.mt-xs {
    margin-top: var(--space-xs)
}

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

.mb-xs {
    margin-bottom: var(--space-xs)
}

.-mb-xs {
    margin-bottom: calc(-1 * var(--space-xs))
}

.gap-xxs {
    gap: var(--space-xxs)
}

.gap-y-xxs {
    row-gap: var(--space-xxs)
}

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

.p-xxs {
    padding: var(--space-xxs)
}

.px-xxs {
    padding-inline: var(--space-xxs)
}

.py-xxs {
    padding-block: var(--space-xxs)
}

.pt-xxs {
    padding-top: var(--space-xxs)
}

.pb-xxs {
    padding-bottom: var(--space-xxs)
}

.m-xxs {
    margin: var(--space-xxs)
}

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

.mx-xxs {
    margin-inline: var(--space-xxs)
}

.-mx-xxs {
    margin-inline: calc(-1 * var(--space-xxs))
}

.my-xxs {
    margin-block: var(--space-xxs)
}

.-my-xxs {
    margin-block: calc(-1 * var(--space-xxs))
}

.mt-xxs {
    margin-top: var(--space-xxs)
}

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

.mb-xxs {
    margin-bottom: var(--space-xxs)
}

.-mb-xxs {
    margin-bottom: calc(-1 * var(--space-xxs))
}

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

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

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

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

.px-px {
    padding-inline: var(--space-px)
}

.py-px {
    padding-block: var(--space-px)
}

.pt-px {
    padding-top: var(--space-px)
}

.pb-px {
    padding-bottom: var(--space-px)
}

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

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

.mx-px {
    margin-inline: var(--space-px)
}

.-mx-px {
    margin-inline: calc(-1 * var(--space-px))
}

.my-px {
    margin-block: var(--space-px)
}

.-my-px {
    margin-block: calc(-1 * var(--space-px))
}

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

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

.mb-px {
    margin-bottom: var(--space-px)
}

.-mb-px {
    margin-bottom: calc(-1 * var(--space-px))
}

.gap-0 {
    gap: var(--space-0)
}

.gap-y-0 {
    row-gap: var(--space-0)
}

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

.p-0 {
    padding: var(--space-0)
}

.px-0 {
    padding-inline: var(--space-0)
}

.py-0 {
    padding-block: var(--space-0)
}

.pt-0 {
    padding-top: var(--space-0)
}

.pb-0 {
    padding-bottom: var(--space-0)
}

.m-0 {
    margin: var(--space-0)
}

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

.mx-0 {
    margin-inline: var(--space-0)
}

.-mx-0 {
    margin-inline: calc(-1 * var(--space-0))
}

.my-0 {
    margin-block: var(--space-0)
}

.-my-0 {
    margin-block: calc(-1 * var(--space-0))
}

.mt-0 {
    margin-top: var(--space-0)
}

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

.mb-0 {
    margin-bottom: var(--space-0)
}

.-mb-0 {
    margin-bottom: calc(-1 * var(--space-0))
}

.pb-safe {
    padding-bottom: max(var(--space-gutter), env(safe-area-inset-bottom)) !important
}

.cursor-default {
    cursor: default
}

.middots>* {
    vertical-align: middle
}

.middots>*+*:before {
    content: " · "
}

.wrap-balance {
    text-wrap: balance
}

.skeleton {
    background: var(--color-fill);
    border-radius: var(--radius);
    animation: skeleton 3s infinite
}

.skeleton,
.skeleton * {
    color: transparent !important
}

@keyframes skeleton {
    50% {
        opacity: .5
    }
}

.nav-dropdown {
    position: relative;
    z-index: var(--z-index-header);
    padding: 10px 0
}

.nav-dropdown>.Menu {
    visibility: hidden;
    opacity: 0;
    transform-origin: top left;
    transform: scale(.9);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
    position: absolute;
    top: 100%;
    background: var(--brand-darker);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 10px;
    --color-text: var(--brand-light)
}

.nav-dropdown:is(:hover, :focus-within)>.Menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s, transform .2s
}

.footer {
    font-size: 90%;
    background-color: var(--brand-darker);
    color: var(--color-primary)
}

.footer a {
    color: var(--brand-light)
}

.footer-nav {
    -moz-columns: 3;
    columns: 3
}

.footer-nav li {
    margin-bottom: 25px
}

.footer-social a:hover {
    color: var(--color-primary)
}

@media (max-width: 699px) {
    .footer-container {
        flex-direction: column
    }

    .footer-nav {
        -moz-columns: 2;
        columns: 2
    }
}

@media (max-width: 999px) {
    .footer {
        padding: 40px 0
    }
}

@media (min-width: 1000px) {
    .footer {
        padding: 90px 0 65px
    }

    .footer-nav {
        width: 50%
    }

    .footer-community {
        text-align: right
    }
}

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

    .home-hero-features {
        justify-content: center;
        text-align: center
    }

    .home-hero-features>* {
        align-items: center
    }
}

.home-hero-features>* {
    min-width: 5ch;
    flex-basis: 7ch
}

.home-hero-features a {
    text-decoration: none
}

.home-hero-features a:hover {
    color: var(--color-primary)
}

.home-heading {
    display: flex;
    text-align: center;
    align-items: center;
    font-size: var(--text-md)
}

.home-heading:before,
.home-heading:after {
    color: var(--color-primary-text);
    font-size: 1.5em;
    vertical-align: middle;
    font-weight: 400
}

.home-heading:before {
    content: "(";
    margin-right: .3em
}

.home-heading:after {
    content: ")";
    margin-left: .3em
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.feature>a {
    cursor: zoom-in
}

.feature figcaption {
    margin: 0 auto;
    max-width: 60ch;
    padding: 0 5%;
    margin-top: var(--space-md)
}

.page-view {
    overflow: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.page-view::-webkit-scrollbar {
    display: none
}

.page-view>* {
    scroll-snap-align: center
}

.page-view-index {
    margin-top: var(--space-gutter);
    text-align: center
}

.page-view-index button {
    padding: 5px
}

.page-view-index button:before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--color-text)
}

.page-view-index button:not(.is-active) {
    opacity: .2
}

.screenshots {
    display: flex;
    justify-content: space-around
}

.screenshots>* {
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0
}

.screenshots2 {
    justify-content: center
}

.screenshots2>* {
    flex-basis: 30ch;
    flex-grow: 1
}

.screenshots2 img {
    max-width: 100%;
    height: auto;
    width: auto;
    max-height: 60vh
}

picture img {
    height: auto;
    width: 100%
}

.screenshots--mobile {
    gap: var(--space-lg)
}

@media (max-width: 999px) {
    .page-view {
        justify-content: flex-start
    }

    .page-view>* {
        min-width: 100%
    }

    .screenshots picture {
        max-height: 70vh;
        overflow: hidden;
        position: relative
    }

    .screenshots picture:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: calc(70vh - 50px);
        background: linear-gradient(to bottom, transparent, var(--color-bg))
    }
}

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

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

@media (max-width: 999px) {
    .logos>* {
        min-width: 80px;
        max-width: 90px
    }
}

@media (min-width: 1000px) {
    .logos>* {
        max-width: 150px
    }
}

.page {
    background: var(--color-bg);
    color: var(--color-text);
    padding: 80px 0
}

@media (max-width: 699px) {
    .page {
        padding: 20px 0
    }
}

.page-content {
    max-width: 800px
}

:root {
    scroll-padding-top: 50px;
    background: var(--color-fill-solid);
    scroll-behavior: smooth;
    --header-height: 0px;
    --space-gutter-x: clamp(1.7rem, 5vw, 6rem);
    --space-gutter-y: clamp(4rem, 7vw, 7rem)
}

@media (min-width: 700px) {
    :root {
        font-size: 100%
    }
}

@media (max-width: 699px) {
    :root {
        font-size: 90%
    }
}

:root,
[data-theme=light] {
    --color-primary: var(--brand-cyan);
    --color-primary-contrast: var(--brand-dark)
}

::-moz-selection {
    background: var(--color-primary);
    color: var(--color-primary-contrast)
}

::selection {
    background: var(--color-primary);
    color: var(--color-primary-contrast)
}

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