:root{--page:#F4F5FA;--ink:#1C1F3B;--soft:#5C6080;--line:#DDE0EC;--accent:#3B44A8;
--serif:ui-serif,"New York","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
@media (prefers-color-scheme:dark){:root{--page:#10142E;--ink:#ECEAF6;--soft:#A9AACB;
--line:#2D3363;--accent:#A3AAFF}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:1.125rem/1.6 var(--serif)}
a{color:var(--accent);text-underline-offset:.15em}
.wrap{max-width:42rem;margin:0 auto;padding-left:16px;padding-right:16px}
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;
font:600 1.15rem/1 var(--serif)}
.brand img{border-radius:22%}
nav{display:flex;gap:1.25rem;font:500 1rem/1 var(--sans)}
nav a{color:var(--soft);text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--ink)}
main{padding-top:1.25rem;padding-bottom:3rem;overflow-wrap:break-word}
h1{font-size:2.25rem;line-height:1.15;font-weight:600;margin:0 0 1rem}
h2{font-size:1.3rem;line-height:1.25;font-weight:600;margin:2rem 0 .4rem}
p,ul{margin:0 0 1rem}
ul{padding-left:1.25rem}
li{margin:.3rem 0}
strong{font-weight:600}
.hero{display:block;width:96px;height:96px;border-radius:22%;margin:.5rem 0 1.5rem;
box-shadow:0 10px 30px rgba(16,20,46,.22)}
footer{border-top:1px solid var(--line);padding-top:1.25rem;padding-bottom:2.5rem;
color:var(--soft);font:.875rem/1.6 var(--sans)}
footer a{color:inherit}
@media (min-width:640px){.wrap{padding-left:24px;padding-right:24px}h1{font-size:2.75rem}}