
:root { --ink:#1c1c28; --sub:#5c5c70; --line:#e3e3ec; --accent:#4338ca; --bg:#ffffff; --wash:#f6f6fa; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#ececf4; --sub:#a0a0b8; --line:#32323f; --accent:#a5b4fc; --bg:#15151c; --wash:#1d1d26; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:var(--ink); background:var(--bg); }
main { max-width: 46rem; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.site-header { display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; padding:.9rem 1.25rem; border-bottom:1px solid var(--line); }
.site-header .brand { font-weight:700; font-size:1.05rem; color:var(--ink); }
.site-header nav { display:flex; flex-wrap:wrap; gap:.75rem; font-size:.9rem; }
h1 { font-size:1.7rem; line-height:1.25; margin:1rem 0 .4rem; }
h1 .sub { font-weight:400; color:var(--sub); font-size:1.15rem; }
h2 { font-size:1.15rem; margin:1.8rem 0 .6rem; border-bottom:1px solid var(--line); padding-bottom:.3rem; }
h3 { font-size:1rem; margin:1.2rem 0 .4rem; }
.native { color:var(--sub); font-weight:400; }
.crumbs { font-size:.85rem; color:var(--sub); margin-top:.8rem; }
.facts { color:var(--sub); font-size:.95rem; }
table { border-collapse:collapse; width:100%; max-width:26rem; }
td { padding:.28rem .6rem; border-bottom:1px solid var(--line); }
td.pron { color:var(--sub); white-space:nowrap; width:11rem; }
.verb-list { columns:2; column-gap:2rem; padding-left:1.2rem; }
.verb-list li { break-inside:avoid; margin:.15rem 0; }
.gloss { color:var(--sub); font-size:.85rem; }
.letters a, .letters strong { display:inline-block; padding:.15rem .45rem; }
.example { color:var(--sub); }
.related p { line-height:2; }
.site-footer { border-top:1px solid var(--line); margin-top:2rem; padding:1.25rem; font-size:.9rem; color:var(--sub); }
.site-footer .cta { background:var(--wash); padding:.8rem 1rem; border-radius:.6rem; max-width:46rem; margin:0 auto 1rem; }
@media (max-width: 480px) { .verb-list { columns:1; } td.pron { width:auto; } }
