:root { --paper: #f4f0e5; --ink: #192310; --olive: #35451f; --olive-dark: #202b16; --red: #d7a516; --muted: #68705c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
h1:focus { outline: none; }
#blazor-error-ui { color-scheme: light only; background: #f7e7aa; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
.loading-progress { position: absolute; display: block; width: 7rem; height: 7rem; inset: 30vh 0 auto; margin: auto; }
.loading-progress circle { fill: none; stroke: #d2cbb9; stroke-width: .5rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--red); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; }
.loading-progress-text { position: absolute; text-align: center; inset: calc(30vh + 2.9rem) 0 auto; font: 700 .65rem Arial; letter-spacing: .1em; text-transform: uppercase; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }