:root {
    --z-index-reconnect-dialog: 50;
    --z-index-page-notifications: 40;
    --z-index-dialog: 30;
    --z-index-navigation: 20;
    --z-index-navigation-overlay: 10;

    --spacing-xs: 0.25em;
    --spacing-sm: 0.5em;
    --spacing-md: 0.75em;
    --spacing-lg: 1em;
    --spacing-xl: 1.25em;
    --spacing-2xl: 1.5em;

    --spacing-content: var(--spacing-xl);
    --spacing-related: var(--spacing-sm);
    --spacing-internal: var(--spacing-sm);
    --spacing-input: var(--spacing-sm);

    --font-size-base: 1rem;
    --font-size-2xs: 0.813em;
    --font-size-xs: 0.875em;
    --font-size-sm: 0.938em;
    --font-size-md: 1em;
    --font-size-lg: 1.125em;
    --font-size-xl: 1.25em;
    --font-size-2xl: 1.5em;

    --border-width-content: 1px;
    --border-width-panel: 1px;
    --border-width-input: 1px;
    --border-width-button: 1px;

    --border-radius-xs: 0.188em;
    --border-radius-sm: 0.25em;
    --border-radius-md: 0.5em;
    --border-radius-lg: 0.75em;
    --border-radius-full: 100em;
    --border-radius-content: var(--border-radius-md);
    --border-radius-panel: var(--border-radius-md);
    --border-radius-input: var(--border-radius-md);
    --border-radius-button: var(--border-radius-md);
    --border-radius-collapsible-content: var(--border-radius-md);

    --shadow-content: 0 .1em .2em rgb(0 0 0 / 10%);
    --shadow-panel: 0 .1em .2em rgb(0 0 0 / 10%);
    --shadow-popout: 0 .15em .25em rgb(0 0 0 / 15%);
    --shadow-notification: 0 .15em .25em rgb(0 0 0 / 15%);
    --shadow-input: 0 .065em .125em 0 rgb(0 0 0 / 5%);
    --shadow-tab: 0 .065em .125em 0 rgb(0 0 0 / 7.5%);
    --shadow-faint: 0 .065em .125em 0 rgb(0 0 0 / 5%);

    --outline-width: 2px;
    --outline-rest: var(--outline-width) solid transparent;
    --outline-focus: var(--outline-width) solid var(--color-outline-focus);
    --outline-focus-visible: var(--outline-width) solid var(--color-outline-focus-visible);
    --outline-offset: var(--outline-width);
    --outline-offset-negative: calc(var(--outline-width) * -1);

    --input-border-rest: var(--border-width-input) solid var(--color-input-border);
    --input-border-hover: var(--border-width-input) solid var(--color-input-border-hover);
    --input-border-focus: var(--border-width-input) solid transparent;
    --input-border-error: var(--border-width-input) solid transparent;

    --input-outline-rest: var(--outline-rest);
    --input-outline-focus: var(--outline-width) solid var(--color-outline-focus-visible);
    --input-outline-error: var(--outline-width) solid var(--color-outline-error);

    --input-width-xs: 5em;
    --input-width-sm: 10em;
    --input-width-md: 20em;
    --input-width-lg: 30em;
    --input-width-text: var(--input-width-md);
    --input-width-search: var(--input-width-md);
    --input-width-email: var(--input-width-lg);
    --input-width-password: var(--input-width-md);
    --input-width-number: var(--input-width-sm);
    --input-width-select: var(--input-width-md);
    --input-width-textarea: var(--input-width-lg);

    --input-height-base: 2.25em;
    --input-height-textarea: 5em;

    --button-base-width: 2.25em;
    --button-base-height: 2.25em;

    --input-line-height: 1.125em;
    --button-line-height: 1.125em;
    --textarea-line-height: 1.4em;

    --paragraph-width-optimal: 70ch;

    --transition-duration: .2s;
    --transition-duration-fast: .1s;
    --transition-input:
        outline var(--transition-duration) ease,
        border-color var(--transition-duration-fast) ease;

    --reconnect-dialog-backdrop-filter: blur(8px);

    --loading-spinner-size: 1.5em;
    --loading-spinner-thickness: .35em;
    --loading-spinner-animation-duration: .75s;
}

/* Box Sizing Reset */
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* Base */
:root {
    background-color: var(--color-body-background);
    color: var(--color-body-text);
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    transition:
        background-color var(--transition-duration-fast) ease,
        color var(--transition-duration-fast) ease;
}

/* Typography */
a {
    color: var(--color-link-text);
}

a:hover {
    color: var(--color-link-text-hover);
    text-decoration: none;
}

a:focus-visible {
    outline: var(--outline-focus-visible);
}

a[disabled] {
    opacity: var(--control-opacity-disabled);
    pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-body-text);
}

h1[disabled],
h2[disabled],
h3[disabled],
h4[disabled],
h5[disabled] {
    opacity: 50%;
}

h1 {
    font-size: var(--font-size-2xl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: var(--font-size-lg);
}

h4 {
    font-size: var(--font-size-md);
}

h5 {
    font-size: var(--font-size-base);
}

p {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

p:not(.expand) {
    max-width: var(--paragraph-width-optimal);
}

strong {
    font-weight: 700;
}

label {
    margin: 0;
    font-size: inherit;
}

ul,
ol {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0 0 0 var(--spacing-content);
}

ul {
    list-style-type: disc;
}

li {
    margin: 0;
}

li::marker {
    color: var(--color-body-text-faint);
}

hr {
    align-self: stretch;
    margin: 0;
    border-width: var(--border-width-content) 0 0;
    border-style: solid;
    border-color: var(--color-border-faint-5);
}

blockquote {
    margin: 0;
    padding:
        var(--spacing-internal)
        var(--spacing-content);
    border-left: var(--spacing-xxs) solid var(--color-border-faint-5);
    color: var(--color-body-text);
    font-style: italic;
    font-weight: 500;
}

code {
    padding: 0 calc(var(--spacing-sm) / 2);
    margin: 0 calc(var(--spacing-sm) / 2) 0 0;
    background-color: var(--color-code-background);
    color: var(--color-code-text);
    border-radius: var(--border-radius-sm);
    font-family: monospace;
    font-size: var(--font-size-lg);
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

svg.icon {
    display: block;
    width: 1em;
    height: 1em;
    min-width: 1em;
}