:root {
    color-scheme: light;
    --page: #ffffff;
    --ink: #000000;
    --muted: #707070;
    --line: #e6e6e6;
    --surface: #f5f5f5;
    --hover: #dedede;
    --font-body: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --font-brand: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #000000;
    --ink: #ffffff;
    --muted: #a0a0a0;
    --line: #292929;
    --surface: #161616;
    --hover: #333333;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: #000000;
        --ink: #ffffff;
        --muted: #a0a0a0;
        --line: #292929;
        --surface: #161616;
        --hover: #333333;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 36px; }
body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--ink); color: var(--page); }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
svg { display: block; flex-shrink: 0; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 6px;
}
main:focus { outline: none; }
button:disabled { cursor: wait; }
.skip-link {
    position: fixed;
    z-index: 10;
    top: 16px;
    left: 16px;
    padding: 12px 20px;
    background: var(--ink);
    color: var(--page);
    border-radius: 8px;
    transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }
.text-button {
    min-height: 44px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--muted);
}
.text-button:hover { text-decoration-color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}