:root{font-family:Inter,'Segoe UI',system-ui,sans-serif;background:#f7f9fc;color:#24374a;color-scheme:light;--surface:white;--line:#e4ecf3;--muted:#69829a;--blue:#258ad9}
*{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}header,footer{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:960px;margin:auto;padding:20px 24px}header{border-bottom:1px solid var(--line)}header .brand{font-weight:800;font-size:20px}header nav{display:flex;gap:18px;font-size:13px}main{max-width:850px;margin:auto;padding:20px 24px 50px}.intro{padding:35px 0 20px}.intro>span{font-size:11px;font-weight:750;letter-spacing:.16em;color:var(--blue)}h1{font-size:clamp(32px,5vw,49px);letter-spacing:-.06em;margin:10px 0}h2{font-size:19px;margin:0 0 10px;color:inherit}p{line-height:1.8;color:var(--muted);margin:0}.intro p{font-size:14px}section{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:25px 27px;margin:15px 0;box-shadow:0 3px 14px #2c4b6708}.warn{padding:14px 20px;border:1px solid #ebc68e;border-radius:12px;color:#8d4e15;background:#fff9ed;line-height:1.6;margin:14px 0}footer{border-top:1px solid var(--line);font-size:12px}footer a{color:var(--muted)}
:root[data-theme="dark"]{background:#101a25;color:#e0eaf4;color-scheme:dark;--surface:#1b2b3a;--line:#2d4355;--muted:#a7bdcf;--blue:#82c8ff} [data-theme="dark"] section{box-shadow:0 3px 14px #0002}[data-theme="dark"] .warn{background:#493728;color:#ffd8a4;border-color:#8a6635}