:root{--bg:#f4f7ff;--ink:#1f2a44;--mut:#5b6785;--pri:#4a5bef;--pri2:#e6e9ff;--ok:#1f9d6b;--okbg:#e3f6ee;--no:#c2571a;--nobg:#fff0e4;--card:#fff;--bd:#d9def2}
*{box-sizing:border-box}
body{margin:0;font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:9}
header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:1.1rem}
nav{display:flex;flex-wrap:wrap;gap:6px}
nav button{background:none;border:0;padding:8px 12px;border-radius:999px;font:inherit;font-size:.95rem;color:var(--ink);cursor:pointer}
nav button[aria-current=true]{background:var(--pri2);color:var(--pri);font-weight:700}
main{max-width:820px;margin:0 auto;padding:20px 16px 40px}
section{animation:in .25s}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){section{animation:none}}
h1{font-size:2.4rem;margin:.2em 0}h2{margin-top:.2em}
.hero{text-align:center;padding:24px 0}.shield{font-size:4rem}
.lead{font-size:1.3rem;color:var(--pri);font-weight:600}
button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #ffb703;outline-offset:2px}
.big{background:var(--pri);color:#fff;border:0;border-radius:14px;padding:14px 28px;font:inherit;font-weight:700;cursor:pointer;margin:12px 0}
.big:hover{filter:brightness(1.08)}
.ghost{background:var(--pri2);color:var(--pri);border:0;border-radius:14px;padding:12px 20px;font:inherit;font-weight:600;cursor:pointer;margin:6px 6px 6px 0}
.note{font-size:.9rem;color:var(--mut)}
.chips{display:grid;gap:8px;margin-bottom:14px}
.chip{text-align:left;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:10px 14px;font:inherit;font-size:.95rem;cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--pri)}
label{font-weight:700;display:block;margin-top:8px}
textarea{width:100%;border:2px solid var(--bd);border-radius:12px;padding:12px;font:inherit;background:#fff;color:var(--ink)}
.callout{background:var(--pri2);border-radius:14px;padding:12px 16px}
.callout.good,.ok{background:var(--okbg)}
.card,details,.q{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px 18px;margin:10px 0}
details summary{cursor:pointer;font-weight:700}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card h4{margin:.1em 0}.urgent{border-color:#e07a3f;background:var(--nobg)}
.steps li{margin:10px 0}
.opt{display:block;width:100%;text-align:left;background:#fff;border:2px solid var(--bd);border-radius:12px;padding:12px 14px;margin:8px 0;font:inherit;cursor:pointer;color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--pri)}
.opt.right{background:var(--okbg);border-color:var(--ok)}
.opt.wrong{background:var(--nobg);border-color:var(--no)}
.fb{border-radius:12px;padding:12px 16px;margin:10px 0}
.fb.ok{background:var(--okbg)}.fb.no{background:var(--nobg)}
.bar{height:12px;background:var(--bd);border-radius:99px;overflow:hidden}.bar>i{display:block;height:100%;background:var(--pri)}
.big-num{font-size:2.6rem;font-weight:800;color:var(--pri)}
.tag{display:inline-block;background:var(--okbg);border-radius:99px;padding:2px 12px;margin:3px;font-size:.9rem}
footer{text-align:center;font-size:.85rem;color:var(--mut);padding:16px}
@media(max-width:560px){body{font-size:17px}h1{font-size:2rem}}