:root{--bg:#0f1115;--fg:#e8eaf0;--muted:#9aa3b2;--accent:#7ddc8a;--card:#171a21;--line:#262b35}
@media (prefers-color-scheme: light){:root{--bg:#fbfbf9;--fg:#141618;--muted:#5b6470;--accent:#1f8a3d;--card:#ffffff;--line:#e3e6ea}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:48px 20px}h1{font-size:2rem;line-height:1.2;margin:0 0 .5rem}h2{font-size:1.25rem;margin:2rem 0 .5rem}
p,li{color:var(--fg)}.muted{color:var(--muted)}a{color:var(--accent)}header a{text-decoration:none;font-weight:600;color:var(--fg)}
header{border-bottom:1px solid var(--line)}header div{max-width:720px;margin:0 auto;padding:14px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;row-gap:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:12px 0}table{border-collapse:collapse;width:100%}td,th{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
footer{max-width:720px;margin:0 auto;padding:32px 20px;color:var(--muted);font-size:.875rem;border-top:1px solid var(--line)}

.lead{font-size:1.06rem;line-height:1.65}
ul.claims{padding-left:1.1rem}ul.claims li{margin:.55rem 0}ul.claims .effect{font-size:.88rem;margin:.15rem 0 0;line-height:1.35}
.lvl{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.03em;padding:1px 6px;border-radius:4px;border:1px solid var(--line);vertical-align:1px;white-space:nowrap}
.lvl-A{background:rgba(31,138,61,.16)}.lvl-B{background:rgba(31,138,61,.10)}.lvl-C{background:rgba(120,120,120,.14)}.lvl-D{background:rgba(120,120,120,.10)}.lvl-E{background:transparent}
a.cite{font-size:.78rem;text-decoration:none;opacity:.75}
ol.refs{padding-left:1.2rem;font-size:.9rem}ol.refs li{margin:.7rem 0}ol.refs q{display:block;margin:.25rem 0;font-style:italic;color:var(--muted)}

.card.warn{border-left:3px solid #c2410c;background:rgba(194,65,12,.07)}

/* Графіка: ролі кольорів. Світла тема — слоти 1–3 еталонної палітри; темна — їхні
   кроки під темну поверхню (не автоматичний інверс). */
:root{--viz-1:#2a78d6;--viz-2:#eb6834;--viz-3:#1baf7a;--viz-grid:#d8d8d4}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--viz-1:#3987e5;--viz-2:#d95926;--viz-3:#199e70;--viz-grid:#3a3a37}}
:root[data-theme="dark"]{--viz-1:#3987e5;--viz-2:#d95926;--viz-3:#199e70;--viz-grid:#3a3a37}
.viz-fig{margin:18px 0;padding:0}
.viz-fig figcaption{font-weight:600;margin-bottom:8px}
.viz-fig .muted{font-size:.82rem;margin:6px 0 0}
svg.viz{width:100%;height:auto;display:block;overflow:visible}
.viz-fill{fill:var(--viz-1)}
.viz-s1{fill:var(--viz-1);background:var(--viz-1)}
.viz-s2{fill:var(--viz-2);background:var(--viz-2)}
.viz-s3{fill:var(--viz-3);background:var(--viz-3)}
.viz-s3{fill:var(--viz-3);background:var(--viz-3)}
.viz-grid{stroke:var(--viz-grid);stroke-width:1}
.viz-lab{fill:var(--fg);font-size:12px}
.viz-val{fill:var(--muted);font-size:12px}
.viz-tick{fill:var(--muted);font-size:10px}
.viz-legend{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0;font-size:.85rem}
.viz-key{display:inline-flex;align-items:center;gap:6px;color:var(--fg)}
.viz-key i{width:10px;height:10px;border-radius:2px;display:inline-block}
.viz-link{fill:var(--accent);text-decoration:underline}
a:hover .viz-link{opacity:.8}

.viz-lvA{fill:var(--viz-1);background:var(--viz-1)}
.viz-lvB{fill:#5598e7;background:#5598e7}
.viz-lvC{fill:#9ec5f4;background:#9ec5f4}
.viz-lvD{fill:#c9c9c4;background:#c9c9c4}
.viz-lvE{fill:#8f8f8a;background:#8f8f8a}
.viz-band{fill:var(--line)}
.viz-stop{stroke:#d03b3b;stroke-width:2}

/* Плашки редактора: факт / міф / спірне / не для всіх (roles.md №13). */
.verdict{border-left:3px solid var(--line);border-radius:8px;padding:12px 14px;margin:16px 0;background:var(--card)}
.verdict b{display:inline-block;margin-right:.35em;letter-spacing:.01em}
.v-fact{border-left-color:#1f8a3d;background:rgba(31,138,61,.09)}
.v-fact b{color:#1f8a3d}
.v-myth{border-left-color:#c2410c;background:rgba(194,65,12,.08)}
.v-myth b{color:#c2410c}
.v-unclear{border-left-color:#9a7b12;background:rgba(154,123,18,.10)}
.v-unclear b{color:#9a7b12}
.v-care{border-left-color:#b02a2a;background:rgba(176,42,42,.08)}
.v-care b{color:#b02a2a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-fact b{color:#57c878}
 :root:not([data-theme="light"]) .v-myth b{color:#f0864f}
 :root:not([data-theme="light"]) .v-unclear b{color:#d4b53e}
 :root:not([data-theme="light"]) .v-care b{color:#e06767}}
:root[data-theme="dark"] .v-fact b{color:#57c878}
:root[data-theme="dark"] .v-myth b{color:#f0864f}
:root[data-theme="dark"] .v-unclear b{color:#d4b53e}
:root[data-theme="dark"] .v-care b{color:#e06767}

/* Форест-плот: штрихові варіанти серій (виконують роль ліній ДІ). */
.viz-st1{stroke:var(--viz-1);fill:none}
.viz-st2{stroke:var(--viz-2);fill:none}
.viz-st3{stroke:var(--viz-3);fill:none}
.ev-table{font-size:.92rem}
.ev-table td,.ev-table th{padding:8px 8px}
.ev-note{border-left:3px solid var(--line);padding:2px 0 2px 14px;margin:16px 0;color:var(--muted)}
.protocol{font-size:.9rem}
.protocol code{font-size:.84rem;word-break:break-all}

/* Позначка фортифікації в рейтингах: пояснює, чому продукт стоїть високо. */
.tag{display:inline-block;font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;
 padding:1px 6px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
 vertical-align:1px;white-space:nowrap;margin-left:6px}

/* Три схеми екранів застосунку на головній. Не скріншоти: реальних знімків у репозиторії
   немає, а малювати «ніби скріншот» означало б показати інтерфейс, якого читач не побачить. */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}
.grid-3 figure{margin:0;display:flex;flex-direction:column;gap:10px}
.grid-3 figure svg{flex:0 0 auto}
/* Знімки застосунку: ширина картки, пропорція з файлу, рамка як у пристрою. */
.shot{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.grid-3 figcaption{color:var(--muted);margin:0}
