:root { --ink:#14213d; --paper:#f7f5f0; --accent:#c1121f; --muted:#6b7280; --card:#fff; --line:#e5e1d8; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.5 system-ui, sans-serif; color:var(--ink); background:var(--paper); }
.top { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:var(--ink); }
.top .brand { color:#fff; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; }
.top button { background:none; color:#fff; border:1px solid #fff6; border-radius:6px; padding:6px 10px; }
main { max-width:900px; margin:0 auto; padding:16px; }
.inline { display:inline; }
.stack { display:grid; gap:12px; max-width:420px; }
.stack label { display:grid; gap:4px; font-weight:600; }
input, select, button { font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; }
button, .btn { background:var(--ink); color:#fff; border:0; cursor:pointer; text-decoration:none; padding:10px 16px; border-radius:8px; display:inline-block; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:12px 0; }
.error { color:var(--accent); font-weight:600; }
.muted { color:var(--muted); }
.agents { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
.agent-card { min-height:150px; display:grid; place-items:center; gap:8px; padding:16px; background:var(--card);
  border:2px solid var(--line); border-radius:16px; text-decoration:none; color:var(--ink); font-weight:700; }
.agent-card:hover { border-color:var(--ink); }
.avatar { width:72px; height:72px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:32px; }
dt { font-weight:700; } dd { margin:0 0 10px; }
.link { background:none; color:var(--ink); text-decoration:underline; padding:0 6px; } .notice { border-color:var(--ink); font-weight:600; }
.profile { display:grid; gap:4px; }
.profile fieldset { display:grid; gap:12px; }
.profile legend { font-weight:800; font-size:1.1em; padding:0 6px; }
.profile label { display:grid; gap:4px; font-weight:600; }
.profile textarea { font:inherit; padding:10px; border:1px solid var(--line); border-radius:8px; }
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.profile .chip { display:inline-flex; align-items:center; gap:6px; font-weight:500; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; background:var(--paper); cursor:pointer; }
.chip:has(input:checked) { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip input { margin:0; }
.stage h3 { margin:8px 0 4px; font-size:.95em; }
.graphemes { display:flex; flex-wrap:wrap; gap:6px; }
.profile .g { display:grid; gap:2px; justify-items:center; padding:4px; border:1px solid var(--line); border-radius:8px; min-width:72px; }
.g span { font-size:1.15em; font-weight:800; }
.g select { padding:2px 4px; font-size:.8em; }
.g-known { background:#e8f3ea; border-color:#9cc9a5; } .g-focus { background:#fff1c2; border-color:#e0b100; }
.g-skip { background:#eee; color:var(--muted); }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.tabs a { padding:8px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none; color:var(--ink); background:var(--card); }
.tabs a.on { background:var(--ink); color:#fff; }
.wordgrid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; font-size:22px; }
.wordgrid li { padding:8px; border:1px solid var(--line); border-radius:8px; text-align:center; background:#fff; }
.ladder { font-size:26px; display:grid; gap:6px; padding-left:28px; }
.elkonin { margin:14px 0; } .elk-word { font-size:22px; font-weight:700; margin-bottom:6px; }
.elk-row { display:flex; gap:6px; } .elkonin-box { width:64px; height:64px; border:3px solid var(--ink); display:grid; place-items:center; font-size:24px; }
.step .graphemes { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.g { border:1px solid var(--line); border-radius:8px; padding:4px 8px; font-size:14px; display:inline-flex; gap:6px; align-items:center; }
.g b { font-size:18px; }
.print main { max-width:none; } .print-title { font-size:28px; }
.print-ladder .blank { display:inline-block; width:180px; border-bottom:2px solid #000; height:34px; }
@media print { .top, .btn, button, .tabs, form { display:none !important; } body { background:#fff; } .card { border:0; } }
.hint { font-size:15px; color:var(--muted); margin-left:8px; } .answer-key { margin-top:40px; font-size:12px; color:var(--muted); border-top:1px dashed #999; padding-top:6px; }