:root { color-scheme: light; --ink: #202522; --green: #087f61; --line: #dce3de; --muted: #59635d; --paper: #ffffff; --wash: #f4f8f5; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--wash); font: 16px/1.7 Arial, "Microsoft YaHei", sans-serif; }
a { color: #06684f; }
.topbar { min-height: 68px; padding: 12px max(20px, calc((100% - 920px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); font-size: 21px; font-weight: 800; text-decoration: none; }
.brand span { color: var(--green); }
.back { font-weight: 700; text-decoration: none; }
main { width: min(100% - 32px, 920px); margin: 34px auto 56px; padding: 40px 44px; background: var(--paper); border: 1px solid var(--line); }
.kicker { margin: 0; color: var(--green); font-size: 13px; font-weight: 800; text-transform: uppercase; }
h1 { margin: 4px 0 10px; font: 700 42px/1.18 Georgia, serif; }
.meta { margin: 0 0 26px; color: var(--muted); }
.notice { padding: 16px 18px; border-left: 5px solid var(--green); background: #eaf7f1; }
h2 { margin: 34px 0 8px; font-size: 22px; }
h3 { margin: 24px 0 6px; font-size: 17px; }
p, li { color: #3f4843; }
footer { padding: 24px 16px 40px; color: var(--muted); text-align: center; }
.error-code { color: var(--green); font: 800 72px/1 Arial, sans-serif; }
@media (max-width: 600px) { .topbar { padding: 12px 16px; } main { width: 100%; margin: 0; padding: 30px 20px 44px; border-width: 0 0 1px; } h1 { font-size: 34px; } }