:root { --bg:#fbfcff; --fg:#23233a; --muted:#5d5f7a; --line:#e6e8f3; --violet:#5b5ecf; --sky:#3fa9e6; --display:"Jost","Avenir Next","Segoe UI",sans-serif; --body:"Figtree","Segoe UI",system-ui,sans-serif; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.7 var(--body); overflow-x: hidden; }
a { color: var(--violet); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top { background: linear-gradient(180deg, #f0f2fc 0%, var(--bg) 100%); }
header { padding-block: 22px 8px; }
header img { height: 48px; width: auto; display: block; }
h1 { font: 300 clamp(32px, 6vw, 52px)/1.15 var(--display); margin: 40px 0 10px; }
.date { color: var(--muted); font-size: 14px; margin: 0 0 40px; }
.intro { color: var(--muted); margin: 0 0 8px; }
section { padding-block: 26px; border-top: 1px solid var(--line); }
h2 { font: 400 24px/1.25 var(--display); margin: 0 0 10px; }
section p { margin: 0; color: var(--muted); }
ul { margin: 12px 0 0; padding-left: 22px; color: var(--muted); display: grid; gap: 8px; }
b { color: var(--fg); font-weight: 500; }
footer { padding-block: 32px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { text-decoration: none; }
@media (max-width: 560px) { body { font-size: 16px; } header img { height: 38px; } h1 { margin-top: 28px; } h2 { font-size: 22px; } }