:root {
    color-scheme: light;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --text-strong: #14212b;
    --text: #31414d;
    --text-muted: #687985;
    --surface: #ffffff;
    --surface-soft: #f4f7f8;
    --surface-strong: #e8eef0;
    --border: #d7e0e4;
    --primary: #0b6b62;
    --primary-hover: #08564f;
    --focus: #1769aa;
    --success: #1f6f43;
    --warning: #8a5b00;
    --danger: #9c2b2b;
    --info: #245f88;
    --radius-sm: 0.35rem;
    --radius-md: 0.7rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgb(20 33 43 / 0.08);
    --shadow-md: 0 12px 30px rgb(20 33 43 / 0.10);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --content-width: 92rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); color: var(--text); background: var(--surface-soft); }
img, svg { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--primary); text-decoration-thickness: 0.08em; text-underline-offset: 0.16em; }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 65%, white); outline-offset: 2px; }
h1, h2, h3 { color: var(--text-strong); line-height: 1.18; margin-block: 0 0.65em; }
h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2vw, 1.65rem); }
h3 { font-size: 1.1rem; }
p { margin-block: 0 1rem; }
small { color: var(--text-muted); }
code, pre { font-family: var(--font-mono); }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); margin: 0; }
legend { color: var(--text-strong); font-weight: 700; padding-inline: var(--space-2); }
label { color: var(--text-strong); font-weight: 650; }
input, select, textarea {
    width: 100%;
    border: 1px solid #bcc9cf;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-strong);
    padding: 0.72rem 0.8rem;
}
input:hover, select:hover, textarea:hover { border-color: #91a4ad; }
textarea { resize: vertical; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.8rem 0.85rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { background: var(--surface-soft); color: var(--text-strong); font-size: 0.83rem; letter-spacing: 0.02em; }
tbody tr:hover { background: #fbfdfd; }
.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;
}