:root {
    --paper: #f3efe5;
    --paper-light: #fbf9f3;
    --paper-deep: #e5decf;
    --ink: #20231f;
    --muted: #68675f;
    --rule: #b9b2a5;
    --rule-dark: #77756d;
    --accent: #a13f2f;
    --accent-dark: #7d3023;
    --warning: #d7a62f;
    --info: #777b78;
    --success: #456c52;
    --shadow: 4px 4px 0 #d7d0c2;
    --serif: Georgia, "Times New Roman", serif;
    --sans: "Segoe UI", Arial, sans-serif;
    color-scheme: light;
    font-family: var(--serif);
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--paper);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .52) 0 1px, transparent 1.5px),
        radial-gradient(circle at 78% 64%, rgba(63, 55, 45, .05) 0 1px, transparent 1.5px);
    background-size: 31px 31px, 43px 43px;
}

button,
textarea,
input {
    font: inherit;
}

button,
label[for] {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
textarea:focus-visible,
input:focus-visible,
label[for="artwork-upload"]:has(+ input:focus-visible) {
    outline: 3px solid var(--accent-dark);
    outline-offset: 3px;
}

h1:focus {
    outline: none;
}

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

::selection {
    color: var(--paper-light);
    background: var(--accent);
}

#blazor-error-ui {
    position: fixed;
    z-index: 1000;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: none;
    max-width: 46rem;
    margin-inline: auto;
    padding: 1rem 3rem 1rem 1.25rem;
    border: 1px solid var(--ink);
    color: var(--paper-light);
    background: var(--accent-dark);
    box-shadow: var(--shadow);
    font-family: var(--sans);
}

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

#blazor-error-ui .dismiss {
    position: absolute;
    top: .75rem;
    right: 1rem;
    cursor: pointer;
}

.blazor-error-boundary {
    margin: 2rem;
    padding: 1rem;
    border: 1px solid var(--accent-dark);
    color: var(--accent-dark);
    background: #f6dfda;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}