:root{--bg:#0b0d12;--panel:#151922;--line:#2a3140;--text:#eef1f6;--muted:#aab3c5;--accent:#6ea8ff;--accent2:#ff7ac6;--ok:#6ee7a0;--bad:#ff8a8a;--fs:100%;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:root[data-theme="light"]{--bg:#f6f7fb;--panel:#fff;--line:#cfd5e2;--text:#12151c;--muted:#4a5468;--accent:#1857c4;--accent2:#b0126b;--ok:#0a6b34;--bad:#a01212}
:root[data-theme="contrast"]{--bg:#000;--panel:#000;--line:#fff;--text:#fff;--muted:#fff;--accent:#ffe600;--accent2:#00ffff;--ok:#00ff6a;--bad:#ff6a6a}
:root[data-font="dyslexic"]{--font:"Comic Sans MS","Trebuchet MS",Verdana,sans-serif}
:root[data-spacing="wide"] body{line-height:1.9;letter-spacing:.04em;word-spacing:.16em}
*{box-sizing:border-box}
html{font-size:var(--fs)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
:root[data-access="on"] :focus-visible{outline-width:5px}
:root[data-access="on"] body{font-size:1.15rem;line-height:1.9}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#000;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}
header.top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
header.top .brand{font-weight:800;font-size:1.25rem;text-decoration:none;color:var(--text)}
header.top nav{display:flex;gap:.9rem;flex-wrap:wrap;flex:1}
header.top nav a{color:var(--muted);text-decoration:none;padding:.25rem .1rem}
header.top nav a[aria-current="page"],header.top nav a:hover{color:var(--text);text-decoration:underline}
.cog{background:none;border:1px solid var(--line);color:var(--text);border-radius:.6rem;padding:.4rem .7rem;font-size:1rem;cursor:pointer}
main{max-width:56rem;margin:0 auto;padding:1.2rem 1rem 4rem}
h1{font-size:2rem;line-height:1.2;margin:.4rem 0 .6rem}
h2{margin-top:2rem}
.lead{color:var(--muted);font-size:1.1rem}
.banner{border:1px solid var(--accent);background:var(--panel);border-radius:.8rem;padding:.8rem 1rem;margin:1rem 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:.9rem;padding:1rem;margin:1rem 0}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.yes::before{content:"✅ "}.no::before{content:"🚫 "}
ul.plain{list-style:none;padding:0}ul.plain li{margin:.35rem 0}
label{display:block;margin:.6rem 0 .2rem;font-weight:600}
input[type=text],input[type=email],textarea,select{width:100%;padding:.65rem;border-radius:.5rem;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
input[type=checkbox]{width:1.2rem;height:1.2rem;vertical-align:middle}
button.btn,a.btn{display:inline-block;margin:.5rem .5rem .5rem 0;padding:.7rem 1.1rem;border-radius:.6rem;border:1px solid var(--accent);background:var(--accent);color:#000;font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
button.btn.alt{background:none;color:var(--text);border-color:var(--line)}
button.fb{background:#1877f2;border-color:#1877f2;color:#fff}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.msg{min-height:1.5rem;margin:.4rem 0}.msg.ok{color:var(--ok)}.msg.bad{color:var(--bad)}
.post{border-top:1px solid var(--line);padding:.8rem 0}
.post small{color:var(--muted)}
dialog#settings{max-width:26rem;width:calc(100% - 2rem);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:1rem;padding:1rem}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog fieldset{border:1px solid var(--line);border-radius:.6rem;margin:.6rem 0}
footer{border-top:1px solid var(--line);padding:1.2rem 1rem;color:var(--muted);text-align:center}
.tag{display:inline-block;border:1px solid var(--line);border-radius:1rem;padding:.05rem .6rem;font-size:.85rem;color:var(--muted)}
.timeline li{margin:.8rem 0}
@media (prefers-reduced-motion:no-preference){:root:not([data-motion="off"]) body{animation:fade .6s ease both}@keyframes fade{from{opacity:0}to{opacity:1}}}
.h0{margin-top:0}.small{font-size:.9rem}
