:root {
    color-scheme: light dark;
    --background: #fafbfc;
    --foreground: #24282d;
    --muted: #596168;
    --line: #d7dce0;
    --surface: #f0f3f5;
    --link: #146747;
    --warning: #88431f;
}
@media (prefers-color-scheme: dark) {
    :root {
        --background: #191b1d;
        --foreground: #e9edef;
        --muted: #b2b8be;
        --line: #41474c;
        --surface: #24282b;
        --link: #85d8ae;
        --warning: #ffc19b;
    }
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--background);
    color: var(--foreground);
    font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: 0;
}
header, main, footer { max-width: 1440px; margin: 0 auto; padding: 20px 24px; }
header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-bottom: 1px solid var(--line); }
header > a { font-size: 18px; font-weight: 650; text-decoration: none; }
nav, .links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
a { color: var(--link); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:focus-visible, .table-scroll:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
h1 { font-size: 26px; line-height: 1.3; margin: 8px 0 14px; }
h2 { font-size: 19px; margin: 0 0 12px; }
p { margin: 10px 0; overflow-wrap: anywhere; }
section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.metadata, footer { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.notice { color: var(--warning); border-left: 3px solid var(--warning); padding-left: 12px; }
.error { color: var(--warning); }
.table-scroll { max-width: 100%; overflow: auto; margin: 18px 0; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 12px; font-weight: 600; background: var(--surface); }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { background: var(--surface); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface); }
.guide-content { max-width: 1000px; overflow-wrap: anywhere; }
.guide-content h2 { margin-top: 28px; }
.guide-content li { margin: 8px 0; }
.guide-content td { white-space: normal; vertical-align: top; min-width: 140px; }
.guide-content td:first-child { width: 32%; }
footer { border-top: 1px solid var(--line); margin-top: 24px; }
@media (max-width: 600px) {
    header, main, footer { padding: 16px; }
    h1 { font-size: 23px; }
    nav a, .links a { min-height: 32px; display: inline-flex; align-items: center; }
}