:root{color-scheme:dark;--bg:#0b0d12;--card:#10151b;--fg:#e6e9f0;--mut:#b4bccb;--line:#232c3d;--accent:#6ea8fe;--leader:#ffe680}
*{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.7}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--leader);color:#0b0d12;padding:.6rem 1rem;border-radius:.5rem;font-weight:700;z-index:9}
.skip:focus{top:.5rem}
a{color:var(--accent);text-underline-offset:.2em}
a:hover{color:var(--leader)}
:focus-visible{outline:3px solid var(--leader);outline-offset:3px;border-radius:.25rem}
header,main,footer{max-width:46rem;margin:0 auto;padding:1rem 1.25rem}
header{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding:0}
.brand{font-weight:800;color:var(--fg);text-decoration:none;font-size:1.1rem}
h1{font-size:2rem;line-height:1.2;margin:1.5rem 0 1rem}
h2{font-size:1.4rem;line-height:1.3;margin:2.5rem 0 .75rem;padding-top:1rem;border-top:1px solid var(--line)}
h3{font-size:1.1rem;margin:1.5rem 0 .4rem}
.answer{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:.75rem;padding:1rem 1.25rem}
.cta{display:inline-block;margin:1rem 0;padding:.7rem 1.2rem;background:var(--accent);color:#0b0d12;font-weight:700;border-radius:.6rem;text-decoration:none}
.cta:hover{background:var(--leader);color:#0b0d12}
li{margin:.4rem 0}
@media(max-width:30rem){html{font-size:112.5%}h1{font-size:1.65rem}}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}