:root {
    color-scheme: light;
    --page: #f4f6fa;
    --surface: #ffffff;
    --soft: #e9edf5;
    --text: #202735;
    --muted: #5f6878;
    --border: #c8cfdd;
    --accent: #4057a6;
    --on-accent: #ffffff;
    --danger: #b33a4b;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --page: #171b27;
    --surface: #212738;
    --soft: #2d3549;
    --text: #eef2ff;
    --muted: #b1bad0;
    --border: #59647d;
    --accent: #9eafff;
    --on-accent: #151a2b;
    --danger: #ff9eae;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--page);
    color: var(--text);
    font: 16px/1.5 'Roboto', sans-serif;
}
button, textarea, a { -webkit-tap-highlight-color: transparent; }
button, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .65; }
a { color: inherit; }
button, a, textarea { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--accent); }
.material-symbols-outlined { flex-shrink: 0; font-size: 22px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}