:root{
  --ink:#10314f; --ink-soft:#4a627a; --ink-faint:#7089a0;
  --sky:#0ea5e9; --sky-deep:#0369a1;
  --paper:#eaf4fd; --card:#ffffff; --border:#d3e6f6;
  --font-display:ui-rounded,"SF Pro Rounded","Nunito","Quicksand","Segoe UI",system-ui,sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --ink:#e9f3fd; --ink-soft:#a7c0d6; --ink-faint:#7c99b1; --sky:#38bdf8; --sky-deep:#7dd3fc; --paper:#06182a; --card:#0e2639; --border:#1d3b52; }
}
*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background-image:linear-gradient(rgba(14,116,180,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,180,.06) 1px,transparent 1px);
  background-size:26px 26px;}
a{color:var(--sky-deep); text-decoration:none} a:hover{text-decoration:underline}
.nav{position:sticky; top:0; z-index:10; background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.nav-in{max-width:820px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--ink)}
.mark{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; font-weight:800;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep))}
.brand b{color:var(--sky-deep)}
.back{font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--ink-soft)}
main{max-width:760px; margin:0 auto; padding:clamp(36px,6vw,72px) 24px 80px}
h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.9rem,4vw,2.6rem); margin:0}
.updated{color:var(--ink-faint); font-weight:600; font-size:.9rem; margin:10px 0 0}
article{margin-top:36px; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:clamp(24px,4vw,44px);
  box-shadow:0 18px 44px -24px rgba(16,49,79,.3)}
article h2{font-family:var(--font-display); font-weight:800; font-size:1.12rem; color:var(--ink); margin:30px 0 8px; letter-spacing:-.01em}
article h2:first-child{margin-top:0}
article p{margin:0 0 12px; color:var(--ink-soft)}
article ul{margin:0 0 14px; padding-left:22px; color:var(--ink-soft)} article li{margin:6px 0}
footer{max-width:760px; margin:0 auto; padding:28px 24px 56px; color:var(--ink-faint); font-size:.85rem; border-top:1px solid var(--border)}
footer a{color:var(--ink-soft)}