:root { --bg:#f6f7f9; --card:#fff; --text:#1d2430; --muted:#657080; --line:#dfe3e8; --accent:#2557d6; --code:#eef1f5; --ok:#eaf7ee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; line-height:1.65; background:var(--bg); color:var(--text); }
header,main,footer { max-width:1120px; margin:0 auto; padding:24px; }
header { padding-bottom:14px; }
nav { display:flex; flex-wrap:wrap; gap:12px 16px; margin-top:12px; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
.hero,.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:24px; margin-bottom:20px; }
.hero h1 { margin-top:0; font-size:2.1rem; }
h1,h2,h3 { line-height:1.25; }
pre,code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; background:var(--code); }
pre { padding:16px; border-radius:10px; overflow:auto; } code { padding:2px 5px; border-radius:5px; }
table { border-collapse:collapse; width:100%; } th,td { padding:11px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { background:#f8f9fb; }
.small { color:var(--muted); font-size:.92rem; }
.note { border-left:4px solid var(--accent); padding:12px 16px; background:#f3f6ff; border-radius:8px; }
.price { font-size:1.35rem; font-weight:700; }
.badge { display:inline-block; border-radius:999px; padding:3px 9px; background:var(--ok); font-size:.9rem; }
ul { padding-left:1.4rem; }
footer { padding-top:8px; padding-bottom:40px; }
@media (max-width:700px){ header,main,footer{padding:16px}.hero,.card{padding:18px}.hero h1{font-size:1.65rem} }