:root {
    color-scheme: light;
    --canvas: var(--color-canvas);
    --ink: var(--color-ink);
    --lime: var(--color-primary);
    --lime-dark: var(--color-primary-hover);
    --blue: var(--color-secondary);
    --coral: var(--color-attention);
    --surface: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
    --surface-solid: var(--color-surface-raised);
    --muted: var(--color-muted);
    --line: var(--color-border);
    --grid: var(--color-grid);
    --shadow: var(--shadow-raised);
    --radius-xl: 34px;
    --radius-lg: 24px;
    --radius-md: 15px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
}

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

html {
    min-width: 320px;
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--canvas);
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background:
        linear-gradient(var(--grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid) 1px, transparent 1px),
        var(--canvas);
    background-size: 46px 46px;
}

a {
    color: inherit;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
}

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

.skip-link {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: 12px;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
    background: var(--ink);
    transform: translateY(-150%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 16px;
    bottom: 16px;
    left: 16px;
    display: none;
    max-width: 620px;
    margin-inline: auto;
    padding: 14px 48px 14px 18px;
    border: 1px solid rgba(241, 108, 91, 0.45);
    border-radius: 14px;
    color: var(--ink);
    background: var(--surface-solid);
    box-shadow: var(--shadow);
}

#blazor-error-ui a {
    font-weight: 800;
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 10px;
    right: 14px;
    cursor: pointer;
}

.blazor-error-boundary {
    margin: 24px;
    padding: 18px;
    border-radius: 14px;
    color: white;
    background: var(--coral);
}

.blazor-error-boundary::after {
    content: "Something went wrong.";
}

.loading-progress {
    position: relative;
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 38vh auto 1rem;
}

.loading-progress circle {
    fill: none;
    stroke: rgba(31, 37, 34, 0.1);
    stroke-width: 0.55rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.loading-progress circle:last-child {
    stroke: var(--lime-dark);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 50ms ease-in-out;
}

.loading-progress-text {
    position: absolute;
    inset: calc(38vh + 2.55rem) 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-align: center;
    text-transform: uppercase;
}

.loading-progress-text::after {
    content: var(--blazor-load-percentage-text, "Loading");
}