@font-face {
    font-family: 'Archivo';
    src: url('fonts/Archivo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('fonts/Archivo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Slab';
    src: url('fonts/RobotoSlab-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --paper: #F6F4EC;
    --ink: #111111;
    --surface: #E9E6DC;
    --rule: #B9B5A8;
    --track: #D6D2C5;
    --knob: #8A877D;
    --stop: #C2261A;
    --stop-ink: #FFFFFF;
    --muted: #4A473F;
    --focus: #1D5FD1;
    --accent: #111111;
    --on-accent: #F6F4EC;
    --hover-bg: #E9E6DC;
    --hover-ink: #111111;
    --strong-hover: #4A473F;
    --on-strong-hover: #F6F4EC;
    --slider-track: #D6D2C5;
    --border: 3px;

    --device-red: #D62828;
    --device-blue: #1D5FD1;
    --device-green: #2E9E44;
    --device-yellow: #F2C200;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --gutter: var(--space-3);
    --pad: var(--space-5);

    --control: 44px;

    --text-s: 0.8125rem;
    --text-m: 1rem;
    --text-l: 1.25rem;
    --text-xl: 1.5rem;

    --font-title: var(--text-xl);
    --font-heading: var(--text-l);
    --font-body: var(--text-m);
    --font-explanation: var(--text-m);
    --font-meta: var(--text-s);
    --explanation-ink: var(--ink);

    --font-ui: 'Archivo', system-ui, sans-serif;
    --font-num: 'Roboto Slab', ui-monospace, monospace;
}

:root[data-theme="bono"] {
    --paper: #F4F1E8;
    --ink: #3D3846;
    --surface: color-mix(in srgb, #D59369 18%, #F4F1E8);
    --rule: color-mix(in oklab, #3D3846 40%, #F4F1E8);
    --track: color-mix(in oklab, #3D3846 22%, #F4F1E8);
    --knob: color-mix(in oklab, #3D3846 55%, #F4F1E8);
    --muted: color-mix(in oklab, #3D3846 75%, #F4F1E8);
    --focus: #362C47;
    --accent: #D59369;
    --on-accent: #3D3846;
    --hover-bg: #3D3846;
    --hover-ink: #F4F1E8;
    --strong-hover: #D59369;
    --on-strong-hover: #3D3846;
    --slider-track: #3D3846;
}

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

html, body {
    margin: 0;
    padding: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
}

.shell {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
}

:focus-visible {
    outline: var(--border) solid var(--focus);
    outline-offset: calc(-1 * var(--border));
}

h1:focus {
    outline: none;
}

.num {
    font-family: var(--font-num);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.notice {
    margin: var(--pad);
    padding: var(--pad);
    background: var(--paper);
    border: var(--border) solid var(--ink);
}

.notice h1 {
    margin: 0 0 8px;
    font-size: var(--font-title);
}

.notice p {
    margin: 0;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    padding: 14px var(--pad);
    background: var(--stop);
    color: var(--stop-ink);
    border-top: var(--border) solid var(--ink);
    font-weight: 700;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    color: var(--stop-ink);
    margin-left: var(--gutter);
    cursor: pointer;
}