:root{--bg:#f7f8fb;--panel:#ffffff;--ink:#16202e;--muted:#566476;--line:#d9dfe8;--brand:#1f4e8c;--brand2:#2c7a7b;--accent:#e0a526;--warn:#fff4d6;--warnline:#e0a526;--bad:#b3261e;--ok:#1d6b3a;--shadow:0 2px 10px rgba(16,32,48,.06)}
@media (prefers-color-scheme:dark){:root{--bg:#0f141c;--panel:#161d28;--ink:#e9eef6;--muted:#a3afc0;--line:#2a3445;--brand:#7fb0ff;--brand2:#6fd1c9;--accent:#f2c14e;--warn:#2b2513;--warnline:#c79b2c;--bad:#ff8a80;--ok:#8ee6a8;--shadow:none}}
*{box-sizing:border-box}html{font-size:100%}body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--brand)}h1,h2,h3{line-height:1.2}h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:.3em 0}.muted{color:var(--muted)}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--panel);padding:8px;z-index:9}
.demo-banner{background:var(--accent);color:#1a1300;text-align:center;padding:8px 12px;font-size:.95rem}
.top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink)}.brand .mark{font-size:1.8rem}.brand small{display:block;color:var(--muted)}
.top nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}.top nav a{min-height:44px;display:inline-flex;align-items:center;font-weight:600}
.size{font-size:.9rem;color:var(--muted)}select,button,input,textarea{font:inherit;min-height:44px}
main{max-width:1120px;margin:0 auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .3em;font-size:1.15rem}.card p{margin:.3em 0}
a.card{display:block;text-decoration:none;color:var(--ink)}a.card:hover{border-color:var(--brand)}
.group h2{margin-top:1.4em;font-size:1.25rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.badge{display:inline-block;font-size:.78rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--warn);border:1px solid var(--warnline);color:var(--ink);vertical-align:middle}
.badge.demo{background:transparent;border-color:var(--brand2);color:var(--brand2)}
.note{border-left:4px solid var(--warnline);background:var(--warn);padding:10px 14px;border-radius:0 10px 10px 0;margin:14px 0}
.note.info{border-left-color:var(--brand2);background:transparent;border:1px solid var(--line);border-left:4px solid var(--brand2)}
.hero{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:18px;padding:22px 24px;margin:6px 0 18px}
.hero h1{color:#fff}.hero p{max-width:820px;font-size:1.1rem}
.section{margin:26px 0}.section>h2{font-size:1.35rem}
button{border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 14px;cursor:pointer}
button.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
button[aria-pressed=true]{background:var(--brand2);border-color:var(--brand2);color:#fff}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
ol.chain{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}ol.chain li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px 10px}
ol.chain li.done{border-color:var(--ok);color:var(--ok);font-weight:700}
code,.hash{font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere;font-size:.9rem}
.foot{border-top:1px solid var(--line);padding:18px 20px;background:var(--panel);font-size:.95rem}.foot p{max-width:1080px;margin:.4em auto}
.emergency{font-size:1.05rem}
/* ---------- kids ---------- */
body.kids{--bg:#fff8ec;--panel:#ffffff;--ink:#23213a;--brand:#5b3cc4;--brand2:#e8590c;--line:#f0d9b5}
@media (prefers-color-scheme:dark){body.kids{--bg:#1a1630;--panel:#241f3f;--ink:#f4f1ff;--brand:#b9a5ff;--brand2:#ffa94d;--line:#3a3363}}
body.kids .hero{background:linear-gradient(135deg,#5b3cc4,#e8590c)}
.kid-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.kid-tile{background:var(--panel);border:3px solid var(--line);border-radius:22px;padding:16px;text-align:center;font-size:1.1rem;min-height:150px}
.kid-tile .ic{font-size:2.6rem;display:block}.kid-tile b{display:block;margin:.2em 0}
.kid-card{font-size:1.35rem;background:var(--panel);border:3px solid var(--line);border-radius:22px;padding:22px;text-align:center}
.big{font-size:1.25rem;padding:14px 22px;border-radius:16px}
.feedback{font-size:1.2rem;margin-top:14px}.feedback.good{color:var(--ok)}.feedback.try{color:var(--bad)}
@media (max-width:640px){main{padding:14px}.hero{padding:18px}}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.row.center{justify-content:center}.wide{width:100%}
main:focus{outline:none}
.brand .logo{height:44px;width:auto}.brand .plus,.lockup .plus{font-weight:800;color:var(--muted);font-size:1.3rem}
.lockup{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin:6px 0 14px}.lockup img{height:120px;width:auto}.lockup .plus{font-size:2.2rem}
@media (max-width:640px){.lockup img{height:80px}.brand .logo{height:36px}}