:root { --bg:#f6f5f1; --card:#fff; --text:#14233a; --soft:#4a5568; --line:#d9dde3; --accent:#41618a; --warn:#9b3b1b; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.demo-note { background:#fff6d6; border-bottom:1px solid #e6d58a; font-size:13px; line-height:1.5; padding:8px 14px; text-align:center; }
.wrap { max-width:760px; margin:0 auto; padding:22px 18px 48px; }
h1 { font-size:26px; line-height:1.2; margin:0 0 6px; }
h2 { font-size:19px; margin:28px 0 8px; padding-top:14px; border-top:1px solid var(--line); }
p, li { font-size:15.5px; line-height:1.6; }
.lead { color:var(--soft); font-size:16px; margin:0 0 14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0; }
table { width:100%; border-collapse:collapse; font-size:15px; }
th { text-align:left; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--soft); border-bottom:2px solid var(--text); padding:6px 8px 6px 0; }
td { border-bottom:1px solid var(--line); padding:9px 8px 9px 0; vertical-align:top; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar { height:10px; background:#e3e8ef; border-radius:5px; overflow:hidden; margin-top:6px; }
.bar > i { display:block; height:100%; background:var(--accent); }
code, pre { font-family:ui-monospace,Consolas,monospace; font-size:13px; }
pre { background:#101b2d; color:#e8eef7; padding:12px; border-radius:8px; overflow:auto; line-height:1.5; }
.flag { background:#fbece6; border:1px solid #efc7b8; border-radius:8px; padding:10px 12px; font-size:14px; line-height:1.5; margin:12px 0; }
.ok { background:#eaf5ef; border:1px solid #bfdccb; border-radius:8px; padding:10px 12px; font-size:14px; line-height:1.5; margin:12px 0; }
a { color:var(--accent); }
.foot { font-size:12.5px; color:var(--soft); margin-top:26px; line-height:1.5; }