*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:84px}
:root{--ink:#04121f;--teal:#14e0c0;--teal2:#0fae98;--mute:#5b6f7e}
body{font-family:Montserrat,system-ui,sans-serif;color:#14283a;background:#f4f9fa;line-height:1.75}
a{color:var(--teal2);font-weight:600}
header{position:sticky;top:0;z-index:5;background:#04121ff2;backdrop-filter:blur(10px)}
.bar{max-width:1100px;margin:auto;padding:0 22px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:21px;text-decoration:none}.logo b{color:var(--teal)}
.bar nav{display:flex;gap:18px;flex-wrap:wrap}.bar nav a{color:#dbe8ee;font-size:13px;text-decoration:none}.bar nav a:hover,.bar nav a.on{color:var(--teal)}
.hero{background:linear-gradient(135deg,#04121f,#0a3a46);color:#fff;padding:54px 22px}
.hero div{max-width:1100px;margin:auto}.hero p{color:#b5c8d1;font-size:14px;margin-top:6px}
h1{font-size:clamp(28px,5vw,42px);font-weight:800;line-height:1.15}
.layout{max-width:1100px;margin:auto;padding:36px 22px 70px;display:grid;grid-template-columns:230px 1fr;gap:40px}
.toc{position:sticky;top:84px;align-self:start;font-size:13px}.toc b{display:block;margin-bottom:8px}
.toc a{display:block;color:var(--mute);text-decoration:none;font-weight:500;padding:4px 0}.toc a:hover{color:var(--teal2)}
article h2{font-size:21px;margin:30px 0 8px;font-weight:800}article h2:first-child{margin-top:0}
article p,article li{font-size:15px;color:#2b3f50;margin-bottom:10px}article ul{padding-left:22px}
.note{background:#e8faf6;border-left:4px solid var(--teal2);padding:14px 16px;border-radius:8px;font-size:13.5px;margin-bottom:26px}
table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0 16px}th,td{border:1px solid #cfdbe2;padding:8px 10px;text-align:left;vertical-align:top}th{background:#e8faf6}
footer{background:var(--ink);color:#b5c8d1;text-align:center;padding:26px 22px;font-size:13px}footer a{color:#b5c8d1;margin:0 10px;font-weight:500}footer a:hover{color:var(--teal)}
@media(max-width:820px){.layout{grid-template-columns:1fr}.toc{position:static}.bar nav{display:none}}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}