:root {
  --t1:12px; --t2:14px; --t3:16px; --t4:20px; --t5:24px; --t6:32px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --r1:8px; --r2:12px;
  --bg:#f3f3f1; --surface:#ffffff; --ink:#1f2124; --ink-2:#55595f;
  --line:#8a8f96; --accent:#2f5d8a; --accent-ink:#ffffff;
}
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) {
  --bg:#141518; --surface:#1e2024; --ink:#ececea; --ink-2:#b4b7bc;
  --line:#7d828a; --accent:#9cc3ea; --accent-ink:#10202f;
} }
:root[data-theme=dark] {
  --bg:#141518; --surface:#1e2024; --ink:#ececea; --ink-2:#b4b7bc;
  --line:#7d828a; --accent:#9cc3ea; --accent-ink:#10202f;
}
*{box-sizing:border-box}html{color-scheme:light dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:var(--t3);line-height:1.5}
a{color:var(--accent);text-underline-offset:var(--s1)}button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:calc(var(--s1)/2) solid var(--accent);outline-offset:var(--s1)}
header{height:calc(var(--s6)*2);background:var(--surface);border-bottom:calc(var(--s1)/4) solid var(--line)}
.header-inner{max-width:calc(var(--s6)*30);height:100%;margin:auto;display:flex;align-items:center;gap:var(--s4);padding:0 var(--s5)}
.logo{display:flex;align-items:center;min-height:calc(var(--s6) + var(--s3));color:var(--ink);font-size:var(--t5);font-weight:800;letter-spacing:-.035em;text-decoration:none}
.logo svg{width:var(--s5);height:var(--s5);margin-right:var(--s2);color:var(--accent)}
main{max-width:calc(var(--s6)*30);margin:auto;padding:var(--s5)}
h1,h2,h3,p{margin:0}h1{font-size:var(--t6);font-weight:700;line-height:1.25}h2{font-size:var(--t5);line-height:1.4}h3{font-size:var(--t4)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--s6) + var(--s3));min-width:calc(var(--s6) + var(--s3));padding:var(--s2) var(--s4);border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r1);background:var(--surface);color:var(--ink);font-size:var(--t3);text-decoration:none}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
footer{max-width:calc(var(--s6)*22);margin:var(--s6) auto 0;padding:0 0 calc(var(--s6)*2)}
.footer-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--t1);color:var(--ink-2);flex-wrap:wrap}
.footer-top>a{display:inline-flex;align-items:center;min-height:calc(var(--s6) + var(--s3));color:var(--ink-2)}
.theme{display:flex;gap:var(--s1)}.theme button{display:inline-flex;align-items:center;justify-content:center;min-height:calc(var(--s6) + var(--s3));min-width:calc(var(--s6) + var(--s3));padding:0 var(--s2);border:calc(var(--s1)/4) solid var(--line);border-radius:var(--r1);background:var(--surface);font-size:var(--t1)}
.theme button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
@media(max-width:600px){header{height:calc(var(--s6)*2 - var(--s3))}.header-inner{padding:0 var(--s4)}main{padding:var(--s4)}.footer-top{align-items:flex-start;flex-direction:column;gap:var(--s2)}}