:root {
    color-scheme: light dark;
    --color-brand: #ef2f50;
    --color-brand-text: #9c1730;
    --color-brand-action: #c9163a;
    --color-brand-action-hover: #a91231;
    --color-canvas: #f1f3f2;
    --color-surface: #ffffff;
    --color-surface-subtle: #f7f8f7;
    --color-navigation: #000000;
    --color-on-brand: #ffffff;
    --color-on-navigation: #ffffff;
    --color-text: #000000;
    --color-muted: #626262;
    --color-border: #737b76;
    --color-border-subtle: #dedfdf;
    --color-danger: #7d1024;
    --color-danger-surface: #fff0f2;
    --color-danger-border: #b51d38;
    --color-danger-action: #b42318;
    --color-on-danger: #ffffff;
    --color-success: #356b00;
    --color-success-surface: #edf8e8;
    --color-success-border: #5fb904;
    --color-warning: #654100;
    --color-warning-surface: #fff8e8;
    --color-warning-border: #c17b00;
    --color-link: #1a73e8;
    --color-focus: #007aff;
    --color-shadow: rgb(0 0 0 / 12%);
    --color-overlay: rgb(0 0 0 / 58%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-brand-text: #ff8da1;
        --color-canvas: #000000;
        --color-surface: #23262a;
        --color-surface-subtle: #2d3035;
        --color-text: #ffffff;
        --color-muted: #bbbbbb;
        --color-border: #6f757b;
        --color-border-subtle: #4f5459;
        --color-danger: #ffb4ab;
        --color-danger-surface: #3c1418;
        --color-danger-border: #ff7b72;
        --color-success: #b9f6a1;
        --color-success-surface: #173612;
        --color-success-border: #7cd954;
        --color-warning: #ffdda1;
        --color-warning-surface: #402c09;
        --color-warning-border: #e8a344;
        --color-link: #8ab4f8;
        --color-focus: #73b7ff;
        --color-shadow: rgb(0 0 0 / 45%);
        --color-overlay: rgb(0 0 0 / 75%);
    }
}

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

html,
body,
#app {
    min-height: 100%;
}

html {
    background: var(--color-canvas);
}

body {
    margin: 0;
    background: var(--color-canvas);
    color: var(--color-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.5;
}

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

a[href],
button:not(:disabled) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: color-mix(
        in srgb,
        var(--color-brand-action) 18%,
        transparent
    );
}

button:not(:disabled) {
    cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
    outline: 0.2rem solid var(--color-focus);
    outline-offset: 0.15rem;
}

h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    text-wrap: balance;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#blazor-error-ui {
    position: fixed;
    z-index: 2000;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    display: none;
    padding: 1rem;
    border: 0.0625rem solid var(--color-danger-border);
    border-radius: 0.5rem;
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

#blazor-error-ui .reload {
    color: inherit;
    font-weight: 700;
}

#blazor-error-ui .reload:hover {
    text-decoration-thickness: 0.15em;
}

#blazor-error-ui .reload:focus-visible {
    outline: 0.2rem solid currentColor;
    outline-offset: 0.15rem;
}