:root {
    color-scheme: light;
    --md-sys-color-primary: #1f5fa8;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #d9eaff;
    --md-sys-color-on-primary-container: #0b1d33;
    --md-sys-color-secondary: #4d6078;
    --md-sys-color-secondary-container: #d8e4f6;
    --md-sys-color-surface: #f7faff;
    --md-sys-color-surface-container: #eef3f9;
    --md-sys-color-surface-container-high: #e4ebf4;
    --md-sys-color-surface-variant: #dde5ef;
    --md-sys-color-outline: #bcc7d6;
    --md-sys-color-on-surface: #17202b;
    --md-sys-color-on-surface-variant: #5a6675;
    --md-sys-color-error: #b3261e;
    --shadow-soft: 0 8px 20px rgba(20, 38, 63, 0.05);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #9ecaff;
    --md-sys-color-on-primary: #002c54;
    --md-sys-color-primary-container: #123454;
    --md-sys-color-on-primary-container: #d1e5ff;
    --md-sys-color-secondary: #b7c8dd;
    --md-sys-color-secondary-container: #2b3a49;
    --md-sys-color-surface: #111923;
    --md-sys-color-surface-container: #18222d;
    --md-sys-color-surface-container-high: #202c38;
    --md-sys-color-surface-variant: #283542;
    --md-sys-color-outline: #4f6173;
    --md-sys-color-on-surface: #e8eef6;
    --md-sys-color-on-surface-variant: #b1bfce;
    --md-sys-color-error: #ffb4ab;
    --shadow-soft: 0 12px 24px rgba(0, 0, 0, 0.24);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    font-family: "Roboto Flex", "Segoe UI", sans-serif;
    color: var(--md-sys-color-on-surface);
    background-color: #edf3fb;
    background-image:
        linear-gradient(45deg, rgba(31, 95, 168, 0.045) 25%, transparent 25%, transparent 75%, rgba(31, 95, 168, 0.045) 75%, rgba(31, 95, 168, 0.045)),
        linear-gradient(-45deg, rgba(31, 95, 168, 0.045) 25%, transparent 25%, transparent 75%, rgba(31, 95, 168, 0.045) 75%, rgba(31, 95, 168, 0.045));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}

:root[data-theme="dark"] body {
    background-color: #101822;
    background-image:
        linear-gradient(45deg, rgba(158, 202, 255, 0.045) 25%, transparent 25%, transparent 75%, rgba(158, 202, 255, 0.045) 75%, rgba(158, 202, 255, 0.045)),
        linear-gradient(-45deg, rgba(158, 202, 255, 0.045) 25%, transparent 25%, transparent 75%, rgba(158, 202, 255, 0.045) 75%, rgba(158, 202, 255, 0.045));
}

button,
input:not([type="range"]),
select {
    font: inherit;
}

code {
    font-family: "Consolas", "Courier New", monospace;
    background: rgba(31, 95, 168, 0.08);
    padding: 0.1rem 0.32rem;
    border-radius: 5px;
}

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