:root { --ink:#0f172a; --bg:#ffffff; --accent:#1a73e8; --on-accent:#ffffff; --soft:#f1f5f9; }
@media (prefers-color-scheme: dark) { :root { --ink:#e2e8f0; --bg:#0f172a; --accent:#7ab8ff; --on-accent:#07111f; --soft:#1e293b; } }
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.65; font-size:1.06rem; }
main { max-width: 680px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
a { color: var(--accent); }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:4px; }
h1 { font-size: 2rem; line-height:1.25; } h2 { margin-top:2.2rem; }
.skip { position:fixed; z-index:10; top:0.5rem; left:0.5rem; transform:translateY(-200%);
  background:var(--bg); padding:0.5rem 0.75rem; border-radius:0.5rem; }
.skip:focus { transform:none; }
header.site { padding-block:1rem; padding-inline:max(1.25rem, calc(50vw - 320px)); border-bottom: 1px solid var(--soft); }
header.site a { text-decoration:none; font-weight:700; color:var(--ink); }
.cta { display:inline-block; background:var(--accent); color:var(--on-accent); padding:0.7rem 1.3rem;
  border-radius:10px; text-decoration:none; font-weight:600; margin-top:1rem; }
.card { background:var(--soft); border-radius:14px; padding:1.1rem 1.3rem; margin:1rem 0; }
footer { max-width:680px; margin:0 auto; padding:2rem 1.25rem; font-size:0.9rem; }