:root {
    color-scheme: light;
    --theme-color: #075985;
    --theme-color-hover: #0c4a6e;
    --theme-color-soft: #e0f2fe;
    --accent-color: #ea580c;
    --surface: #ffffff;
    --surface-muted: #f5f7fa;
    --surface-strong: #e8edf3;
    --text: #172033;
    --text-muted: #5a6576;
    --border: #d6dde7;
    --shadow-sm: 0 2px 10px rgb(15 23 42 / 8%);
    --shadow-md: 0 14px 36px rgb(15 23 42 / 12%);
    --radius-sm: 0.45rem;
    --radius-md: 0.85rem;
    --radius-lg: 1.25rem;
    --content-width: 76rem;
    --header-height: 4.25rem;
    font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
    font-synthesis: none;
    line-height: 1.65;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--surface-muted);
    color: var(--text);
}

body,
button,
input {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--theme-color);
    text-underline-offset: 0.2em;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
}

::selection {
    background: #bae6fd;
    color: #082f49;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.boot-mask {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1rem;
    background: var(--surface);
    color: var(--text-muted);
}

.boot-mask__logo {
    width: min(13rem, 60vw);
    border-radius: var(--radius-sm);
}

.boot-mask__spinner {
    width: 2.25rem;
    aspect-ratio: 1;
    border: 3px solid var(--surface-strong);
    border-top-color: var(--theme-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.fatal-error {
    width: min(42rem, calc(100% - 2rem));
    margin: 10vh auto;
    padding: 2rem;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fff1f2;
    color: #881337;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}