:root{
  --blue:#0070ad;--blue-dark:#001a70;--ink:#10151c;--body:#414d5c;--muted:#6b7a8d;
  --line:#e2e8ef;--wash:#f5f8fa;--maxw:800px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--body);background:#fff;line-height:1.65;font-size:16.5px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{color:var(--ink);font-weight:700;letter-spacing:-.015em;line-height:1.2}
a{color:var(--blue)}
.wrap{max-width:var(--maxw);margin:0 auto;
  padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}

header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;height:68px;display:flex;align-items:center;gap:16px;
  padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;color:var(--ink);text-decoration:none;font-size:15.5px;margin-right:auto}
.brand .mark{width:32px;height:32px;border-radius:5px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px}
.back{color:var(--body);text-decoration:none;font-size:14px;font-weight:600;padding:12px 0;min-height:44px;display:flex;align-items:center}
.back:hover{color:var(--blue)}

.head{background:var(--wash);border-bottom:1px solid var(--line);padding:52px 0 44px}
.head .kicker{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.head h1{font-size:clamp(1.8rem,5vw,2.5rem)}
.head p{margin-top:12px;color:var(--muted);font-size:14.5px}

main{padding:48px 0 64px}
section{margin-bottom:40px}
h2{font-size:1.22rem;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--blue);display:inline-block}
h3{font-size:1.02rem;margin:22px 0 8px}
p{margin-bottom:13px}
ul{list-style:none;display:grid;gap:9px;margin:6px 0 14px}
li{position:relative;padding-left:20px}
li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:2px;background:var(--blue)}
b,strong{color:var(--ink)}
.note{background:var(--wash);border-left:3px solid var(--blue);padding:16px 18px;font-size:14.8px;margin:18px 0}
.todo{background:#fff8e6;border-left:3px solid #d79b00;padding:16px 18px;font-size:14.8px;margin:18px 0;color:#6b5010}
table{width:100%;border-collapse:collapse;margin:8px 0 18px;font-size:14.8px}
th,td{text-align:left;padding:11px 12px;border:1px solid var(--line);vertical-align:top}
th{background:var(--wash);color:var(--ink);font-weight:700;width:38%}
.tablewrap{overflow-x:auto}

footer.foot{background:#0b1220;color:rgba(255,255,255,.55);font-size:13px;padding:26px 0}
.foot-in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:space-between;
  padding-left:max(28px,env(safe-area-inset-left));padding-right:max(28px,env(safe-area-inset-right))}
.foot-in a{color:rgba(255,255,255,.8);text-decoration:none}
.foot-in a:hover{color:#fff}

@media(max-width:620px){
  body{font-size:16px}
  .wrap,.nav-in,.foot-in{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
  .head{padding:38px 0 32px}
  main{padding:36px 0 48px}
  th{width:auto}
  table,tbody,tr,td,th{display:block}
  th{border-bottom:0}
  td{border-top:0;margin-bottom:10px}
  .foot-in{flex-direction:column}
}
@media print{header.nav,footer.foot{display:none}body{font-size:11pt}}