:root { --ink:#1c2333; --ink-soft:#4a5268; --bg:#ffffff; --tint:#f0f5ff;
  --brand:#1e40af; --brand2:#10b981; --accent:#06b6d4; --line:#e6eaf3; --radius:14px; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; }
.wrap { max-width:860px; margin:0 auto; padding:0 20px; }
header.top { background:linear-gradient(135deg,#1e40af,#1d4ed8 55%,#10b981); color:#fff; padding:14px 0; }
header.top .wrap { display:flex; align-items:center; gap:12px; }
header.top a.logo { color:#fff; text-decoration:none; font-weight:800; font-size:17px; }
header.top a.play { margin-left:auto; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.65);
  color:#fff; text-decoration:none; font-weight:700; font-size:14px; border-radius:999px;
  padding:7px 16px; white-space:nowrap; }
header.top a.play:hover { background:rgba(255,255,255,.3); }
a.bigbtn { display:inline-block; background:var(--brand); color:#fff; font-weight:800;
  text-decoration:none; border-radius:12px; padding:12px 22px; font-size:16px; margin:10px 0 4px; }
a.bigbtn:hover { background:#1a3799; }
nav.crumbs { font-size:14px; color:var(--ink-soft); padding:18px 0 0; }
nav.crumbs a { color:var(--brand); text-decoration:none; }
nav.crumbs a:hover { text-decoration:underline; }
h1 { font-size:clamp(26px,5vw,38px); line-height:1.15; margin:14px 0 10px; }
p.lede { color:var(--ink-soft); font-size:17px; margin-bottom:8px; }
section { margin:34px 0; }
h2 { font-size:22px; margin-bottom:14px; }
ul.words { list-style:none; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
ul.words li { padding:12px 16px; border-bottom:1px solid var(--line); }
ul.words li:last-child { border-bottom:none; }
ul.words li:nth-child(odd) { background:var(--tint); }
.w { font-weight:700; font-size:17px; }
.t { color:var(--ink-soft); }
.t::before { content:"— "; }
.ex { font-size:14.5px; margin-top:3px; }
.exb { font-size:13.5px; color:var(--ink-soft); }
.conv { border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; }
.conv h3 { font-size:16px; color:var(--ink-soft); font-weight:700; margin-bottom:12px; }
.turn { margin-bottom:12px; max-width:85%; }
.turn.b { margin-left:auto; text-align:right; }
[dir="rtl"] .turn.b { margin-left:0; margin-right:auto; text-align:left; }
.turn .line { font-weight:600; font-size:16.5px; }
.turn .base { font-size:14px; color:var(--ink-soft); }
.cta { background:linear-gradient(135deg,#1e40af,#10b981); color:#fff; border-radius:18px;
  padding:30px 24px; text-align:center; }
.cta h2 { color:#fff; }
.cta p { opacity:.92; margin-bottom:18px; }
.cta a.btn { display:inline-block; background:#fff; color:var(--brand); font-weight:800;
  text-decoration:none; border-radius:12px; padding:13px 26px; font-size:16px; }
.cta .apps { margin-top:14px; font-size:14px; }
.cta .apps a { color:#fff; }
.pager { display:flex; justify-content:space-between; gap:12px; font-size:15px; }
.pager a { color:var(--brand); text-decoration:none; max-width:48%; }
.pager a:hover { text-decoration:underline; }
.also { font-size:15px; color:var(--ink-soft); }
.also a { color:var(--brand); text-decoration:none; white-space:nowrap; }
.also a:hover { text-decoration:underline; }
ul.toc { list-style:none; }
ul.toc > li { margin-bottom:22px; }
ul.toc h3 { font-size:17px; margin-bottom:8px; }
ul.toc ul { list-style:none; }
ul.toc ul li { padding:5px 0; border-bottom:1px solid var(--line); font-size:15.5px;
  display:flex; justify-content:space-between; gap:10px; }
ul.toc ul li a { color:var(--brand); text-decoration:none; }
ul.toc ul li a:hover { text-decoration:underline; }
ul.toc ul li .meta { color:var(--ink-soft); font-size:13.5px; flex:none; }
.langgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.langgrid a { display:block; border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; text-decoration:none; color:var(--ink); font-weight:700; }
.langgrid a:hover { border-color:var(--brand); }
.langgrid .sub { display:block; font-weight:400; font-size:13.5px; color:var(--ink-soft); margin-top:2px; }
footer { padding:40px 0 56px; color:var(--ink-soft); font-size:14.5px; text-align:center; }
footer a { color:var(--brand); text-decoration:none; }
footer a:hover { text-decoration:underline; }
footer .links { margin-bottom:10px; }
footer .links a { margin:0 10px; }