:root{
  --bg:#f3f5f8; --paper:#fff; --ink:#18212f; --muted:#5d6878; --line:#d9dee6; --accent:#28457a; --soft:#e8edf4;
  --der:#1f63c6; --die:#c8323c; --das:#1e8a4c; --pl:#b88a00;
  --f-word:"Literata", Georgia, serif; --f-ui:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#11161e; --paper:#1a212c; --ink:#e7ebf1; --muted:#9aa5b5; --line:#2c3644; --accent:#8fb0ea; --soft:#232c39;
  --der:#6aa5ff; --die:#ff7a80; --das:#5fd08f; --pl:#e5bd45; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.6}
a{color:var(--accent)}
.wrap{max-width:1040px;margin:0 auto;padding:18px 16px 56px}
.lead,.wrap>p,h1{max-width:760px}
.q{max-width:860px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.brand{font-family:var(--f-word);font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--ink)}
.top nav{display:flex;gap:14px;font-size:.95rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:6px 0 2px}
.crumbs a{color:var(--muted)}
h1{font-family:var(--f-word);font-size:clamp(1.6rem,5vw,2.2rem);line-height:1.2;margin:.3em 0 .4em;text-wrap:balance}
h2{font-family:var(--f-word);font-size:1.3rem;margin:1.8em 0 .5em}
.lead{font-size:1.08rem;color:var(--ink)}
.muted{color:var(--muted)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.btn{display:inline-block;background:var(--accent);color:var(--paper);text-decoration:none;font-weight:700;padding:12px 18px;border-radius:10px}
.btn.ghost{background:var(--soft);color:var(--ink)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
.tablewrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:1rem}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
tr:last-child td{border-bottom:0}
td.de{font-family:var(--f-word);font-weight:600}
.pl{display:block;font-family:var(--f-ui);font-weight:400;font-size:.8rem;color:var(--muted)}
.der{color:var(--der)} .die{color:var(--die)} .das{color:var(--das)}
.pos{font-size:.8rem;color:var(--muted);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0;padding:0;list-style:none}
.grid a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-decoration:none;color:var(--ink);height:100%}
.grid a small{display:block;color:var(--muted)}
.q{margin:0 0 10px;padding:12px 14px;background:var(--paper);border:1px solid var(--line);border-radius:10px}
.q .s{font-family:var(--f-word);font-weight:600;font-size:1.05rem}
.q b.ans{color:var(--das)}
.q .t{color:var(--muted);font-size:.95rem}
.q .w{font-size:.95rem;margin-top:4px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.9rem}
footer{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
footer a{color:var(--muted)}