:root{color-scheme:light dark;--canvas:#F5F4F1;--surface:#FFFFFF;--ink:#15202D;--sub:#4C5C70;--line:#DCE3EB;--accent:#22364E}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,sans-serif}main{max-width:760px;margin:0 auto;padding:56px 24px 80px}h1{font-size:clamp(32px,7vw,44px);line-height:1.1;letter-spacing:-1.5px}h2{font-size:23px;margin-top:36px}a{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}header img{max-width:100%;height:auto;display:block}small{color:var(--sub)}.note{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}footer{border-top:1px solid var(--line);margin-top:44px;padding-top:20px}@media(prefers-color-scheme:dark){:root{--canvas:#101923;--surface:#182637;--ink:#F5F4F1;--sub:#A6B6CC;--line:#22364E;--accent:#C98254}}

.document-banner {
  background-color: #cbd9e6;
  background-image: linear-gradient(110deg, #dbe5ef, #bfd0e0);
  color: #152436;
}
.document-width {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 48px) 24px;
}
.document-banner img { width: 180px; }
.document-banner h1 { margin: 24px 0 0; }
.document-banner + main { padding-top: 32px; }
@media (prefers-color-scheme: dark) {
  .document-banner {
    background-color: #22364e;
    background-image: linear-gradient(110deg, #22364e, #344b65);
    color: #f5f4f1;
  }
}