:root { --navy:#0A3D91; --deep:#061B3D; --blue:#1F6DFF; --teal:#00AFA0; --ink:#142D49; --muted:#5B6D82; --soft:#F5F9FC; --line:rgba(10,61,145,.11); }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:"Segoe UI","Segoe UI Variable",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:var(--navy); }
.container { width:min(860px, calc(100% - 40px)); margin:0 auto; }
.nav { border-bottom:1px solid var(--line); background:rgba(255,255,255,.95); position:sticky; top:0; z-index:5; }
.nav .container { display:flex; justify-content:space-between; align-items:center; min-height:72px; gap:16px; }
.nav img { width:180px; height:auto; display:block; }
.nav a.back { font-size:14px; font-weight:700; text-decoration:none; color:var(--navy); white-space:nowrap; }
.hero { background:linear-gradient(135deg,var(--deep),#0A3D91 70%,#0C6F86); color:#fff; padding:56px 0 48px; }
.hero .kicker { font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:#7FE7DC; }
.hero h1 { font-size:clamp(32px,5vw,46px); line-height:1.1; margin:10px 0 12px; }
.hero p { color:rgba(255,255,255,.8); max-width:640px; }
main { padding:44px 0 70px; }
.toc { background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:20px 24px; margin-bottom:34px; }
.toc b { display:block; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.toc ol { padding-left:20px; columns:2; column-gap:30px; font-size:15px; }
.toc li { margin:3px 0; break-inside:avoid; }
h2 { font-size:22px; color:var(--deep); margin:34px 0 10px; scroll-margin-top:90px; }
h3 { font-size:17px; color:var(--deep); margin:18px 0 6px; }
p, li { font-size:16px; }
p + p { margin-top:10px; }
ul.list { padding-left:22px; margin:8px 0; }
ul.list li { margin:5px 0; }
.note { background:#EAFBF8; border-left:4px solid var(--teal); border-radius:10px; padding:14px 18px; margin:18px 0; font-size:15px; }
table { width:100%; border-collapse:collapse; margin:12px 0; font-size:15px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--soft); color:var(--deep); }
footer { background:var(--deep); color:rgba(255,255,255,.75); padding:28px 0; font-size:14px; }
footer .container { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer a { color:#fff; text-decoration:none; margin-right:16px; }
@media (max-width:640px) { .toc ol { columns:1; } .nav img { width:150px; } th, td { padding:8px; } table { font-size:14px; } }