:root {
    --bg: #fbfaf7; --fg: #1d1f23; --muted: #5d636d; --line: #e3e0d8;
    --card: #ffffff; --accent: #0b6b5d; --accent-fg: #ffffff; --red: #b3261e;
    --code: #f1efe9;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14161a; --fg: #e8e6e1; --muted: #a3a8b0; --line: #2c3037;
        --card: #1b1e23; --accent: #3fb8a3; --accent-fg: #0d1513; --red: #f2867e;
        --code: #22262c;
    }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--fg);
    font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus { inset-inline-start: 16px; top: 8px; background: var(--card); padding: 6px 10px; }
a { color: var(--accent); }
.top { border-bottom: 1px solid var(--line); background: var(--card); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { font-weight: 700; font-size: 19px; color: var(--fg); text-decoration: none; }
.btn {
    display: inline-block; background: var(--accent); color: var(--accent-fg);
    padding: 9px 18px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.btn.big { padding: 13px 26px; font-size: 18px; }
.crumbs { font-size: 14px; color: var(--muted); padding-top: 14px; }
.crumbs a { color: var(--muted); }
.crumbs .sep { margin: 0 4px; }
h1 { font-size: 34px; line-height: 1.2; margin: 18px 0 8px; }
h2 { font-size: 24px; margin: 40px 0 10px; padding-top: 8px; border-top: 1px solid var(--line); }
h3 { font-size: 19px; margin: 26px 0 6px; }
.lead { font-size: 19px; color: var(--muted); }
.cta { margin: 26px 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; padding: 0; list-style: none; }
.facts li { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.facts b { display: block; font-size: 20px; }
.note { background: var(--card); border-inline-start: 4px solid var(--accent); padding: 10px 14px; border-start-end-radius: 8px; border-end-end-radius: 8px; }
.tbl { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: 15px; background: var(--card); }
th, td { border: 1px solid var(--line); padding: 6px 9px; text-align: start; vertical-align: top; }
th { background: var(--code); }
.r { color: var(--red); }
code { background: var(--code); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.toc { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; }
.toc ol { margin: 6px 0; padding-inline-start: 20px; }
.ex { background: var(--card); border: 1px dashed var(--line); border-radius: 8px; padding: 10px 14px; }
.foot { border-top: 1px solid var(--line); margin-top: 50px; padding: 20px 0; color: var(--muted); font-size: 14px; }
@media (max-width: 520px) { h1 { font-size: 28px; } body { font-size: 16px; } }
.subnav { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 14px; }
.subnav .crumbs { padding: 0; }
.langs { font-size: 14px; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.card h2 { border: 0; margin: 0 0 6px; padding: 0; font-size: 22px; }
.card h2 a { color: var(--fg); text-decoration: none; }
.card p { margin: 6px 0; }
.card .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }

/* Списки и нумерация с логическим отступом (RTL). */
main ul, main ol { padding-inline-start: 24px; }
.facts, .cards { padding-inline-start: 0; }
:lang(ar) body, body:lang(ar) { line-height: 1.85; }

/* Кость домино: числа слева направо даже в RTL-тексте. */
.tile { display: inline-flex; direction: ltr; unicode-bidi: isolate; vertical-align: middle; border: 1.5px solid var(--fg); border-radius: 5px; background: var(--card); font-weight: 700; line-height: 1; overflow: hidden; margin: 0 2px; }
.tile i { font-style: normal; min-width: 1.5em; padding: 0.3em 0.35em; text-align: center; }
.tile i + i { border-inline-start: 1.5px solid var(--fg); }
.tile.dbl { transform: none; }
.top-in .brand { margin-inline-end: auto; }
.motto { color: var(--muted); font-size: 14px; margin-inline: 14px; }
@media (max-width: 640px) { .top .motto { display: none; } }
.badge { display: inline-block; border: 1px dashed var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 15px; }
.card h3 { margin: 0 0 6px; font-size: 22px; }
.card h3 a { color: var(--fg); text-decoration: none; }
.plain { padding-inline-start: 22px; }
.plain li { margin: 8px 0; }