:root {
    /* Noir newsprint: aged paper, ink, one blood-red accent. Stark, high-contrast, e-ink. */
    --concrete: #cbc7bd;   /* the desk the paper sits on */
    --paper: #f3efe4;      /* aged newsprint */
    --ink: #14110d;        /* near-black ink */
    --red: #9e1b1b;        /* blood red — used sparingly */
    --dim: #6c6658;        /* faded ink */
    --shell: 520px;
}

@media (min-width: 780px) { :root { --shell: 780px; } }

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    color: var(--ink);
    background: var(--concrete);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: underline; }
h1:focus { outline: none; }
::selection { background: var(--ink); color: var(--paper); }

#blazor-error-ui {
    background: var(--ink); color: var(--paper);
    border-top: 3px solid var(--red);
    bottom: 0; left: 0; width: 100%;
    display: none; position: fixed; z-index: 1000;
    padding: 0.6rem 1.25rem 0.7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui a { color: var(--paper); }
.blazor-error-boundary { background: var(--red); padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "THE PRESS JAMMED."; text-transform: uppercase; }

.loading-progress {
    position: relative; display: block; width: 8rem; height: 8rem; margin: 30vh auto 1rem auto;
}
.loading-progress circle {
    fill: none; stroke: #b9b4a7; stroke-width: 0.5rem;
    transform-origin: 50% 50%; transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--ink);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
    position: absolute; text-align: center; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
    inset: calc(30vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Developing…"); }

code { color: var(--ink); }