*{box-sizing:border-box}:root{color-scheme:dark}
html{font-size:112.5%;background:#0f172a}
body{margin:0;background:#0f172a;color:#e2e8f0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.55}
[lang="ru"]{font-family:Georgia,'Times New Roman','Noto Serif',serif}
:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}
.wrap{max-width:42rem;margin:0 auto;padding:1.5rem 1rem 4rem}
a{color:#93c5fd;text-decoration:none}a:hover{text-decoration:underline}
header.site{margin:0 0 1.5rem}
header.site .snav{display:flex;align-items:center;justify-content:flex-end;gap:1rem;font-size:.75rem;line-height:1rem}
header.site .snav a{color:#94a3b8}
header.site .snav a:hover{color:#e2e8f0;text-decoration:none}
/* Zone tappable ~42 px sans changer la hauteur de la barre : le padding agrandit
   la cible, la marge négative l'annule pour le flex. Miroir exact de `py-3 -my-3`
   côté app (Header.jsx) — le contrat de chrome l'exige, cf. check-chrome.mjs. */
header.site .snav a,header.site .snav .scr{padding:.75rem 0;margin:-.75rem 0}
header.site .snav .scr{background:none;border:0;font:inherit;font-size:.875rem;line-height:1.25rem;color:#64748b;cursor:pointer}
header.site .snav .scr:hover{color:#cbd5e1}
html.ru-cursive header.site .snav .scr{color:#93c5fd}
h1{font-size:22px;line-height:1.35;font-weight:600;margin:0 0 16px}
.ru{font-size:46px;font-weight:700;line-height:1.15;margin:0 0 10px;overflow-wrap:break-word;color:#93c5fd}
.card{background:#1e293b;border:1px solid #334155;border-radius:16px;padding:20px;margin:0 0 14px}
.card p{margin:6px 0}
.lbl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin:14px 0 2px}
.card .lbl:first-child{margin-top:0}
.sub{color:#94a3b8;font-size:15px}
.player{display:flex;align-items:center;gap:12px;margin-top:8px}
.player .pp{flex-shrink:0;width:40px;height:40px;border:0;border-radius:9999px;background:#2563eb;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s}
.player .pp:hover{background:#3b82f6}
.player .pp svg{width:18px;height:18px;fill:#fff}
.player .ptrack{flex:1;height:4px;border-radius:9999px;background:#334155;overflow:hidden}
.player .pfill{display:block;height:100%;width:0;background:#3b82f6;border-radius:9999px;transition:width .1s linear}
.player audio{display:none}
.freq{font-size:13px;color:#64748b;margin:14px 0 0}
/* Bas de la page « test » : texte nu, gris, sans carte ni gras ni couleur. La
   page n'a qu'un but, le bouton ; le reste se lit si on le cherche (et par
   Google). La question est juste un peu moins grise que sa réponse. */
.fine{font-size:13px;line-height:1.6;color:#64748b;margin:10px 0}
.faq{margin-top:18px}
.faq .q{color:#94a3b8}
.cta-wrap{text-align:center;margin:22px 0 6px}.cta-test{display:inline-block;background:#2563eb;color:#fff;font-weight:600;font-size:16px;padding:13px 26px;border-radius:12px;text-decoration:none}.cta-test:hover{background:#3b82f6;text-decoration:none}.cta-note{text-align:center;color:#64748b;font-size:13px;margin:0 0 26px}.sample{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px;background:#0f172a;border:1px solid #1e293b;border-radius:12px;padding:14px;margin:10px 0 4px}.sample [lang="ru"]{color:#93c5fd;font-size:22px}.sample .cur{font-style:italic}.sample-lbl{color:#64748b;font-size:12px}.sample-sep{color:#334155;margin:0 6px}.scale{list-style:none;padding:0;margin:10px 0 4px}.scale li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid #1e293b}.scale li:last-child{border-bottom:0}.scale b{color:#93c5fd;min-width:28px}.scale-w{color:#e2e8f0;min-width:92px;font-variant-numeric:tabular-nums}.scale-d{color:#64748b;font-size:14px}.how{margin:10px 0 4px;padding-left:18px}.how li{padding:3px 0;color:#cbd5e1}.faq{margin-top:22px}.faq .q{color:#e2e8f0;font-weight:600;margin:16px 0 2px}.faq .fine{margin:0}.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:13px 16px;margin:16px 0;color:#cbd5e1;font-weight:500;font-size:15px}
.cta:hover{border-color:#475569;text-decoration:none}
.cta b[lang="ru"]{color:#93c5fd;font-weight:600}
.cta .cta-arrow{color:#93c5fd;font-size:18px;line-height:1;flex-shrink:0}
.nextprev{display:flex;gap:12px}
.nextprev>span{flex:1}
.nextprev a{flex:1;min-width:0;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:10px 14px;font-size:14px;color:#cbd5e1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nextprev a:hover{border-color:#475569;text-decoration:none}
.nextprev a.nx{text-align:right}
ul.words{list-style:none;padding:0;margin:16px 0;columns:2;gap:24px}
ul.words li{margin:2px 0;break-inside:avoid}
ul.words a{display:block;color:#cbd5e1;padding:3px 0}
ul.words a:hover{color:#fff;text-decoration:none}
ul.words a span[lang="ru"]{color:#93c5fd;font-weight:500}
input.search{width:100%;padding:12px 14px;border:1px solid #334155;border-radius:12px;background:#1e293b;color:#e2e8f0;font-size:16px;margin:4px 0 8px}
input.search::placeholder{color:#64748b}
input.search:focus{outline:none;border-color:#2563eb}
.rom{font-size:16px;color:#94a3b8;margin:-4px 0 14px}
nav.letters{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
nav.letters a,nav.letters span.on{display:block;min-width:34px;text-align:center;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:4px 8px;font-size:15px;color:#cbd5e1}
nav.letters a:hover{border-color:#475569;text-decoration:none}
nav.letters span.on{border-color:#2563eb;color:#fff}
nav.themes{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
nav.themes a,nav.themes span.on{display:block;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:4px 10px;font-size:14px;color:#cbd5e1}
nav.themes a:hover{border-color:#475569;text-decoration:none}
nav.themes span.on{border-color:#2563eb;color:#fff}
.dl a{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:12px 16px;margin:8px 0;color:#e2e8f0;font-weight:500}
.dl a:hover{border-color:#475569;text-decoration:none}
.dl .pdf{font-size:12px;font-weight:700;color:#93c5fd;border:1px solid #334155;border-radius:6px;padding:2px 8px}
.nextprev{margin-bottom:14px}
.card ul.words{margin:8px 0 0}
ul.words .nr{color:#64748b;font-size:13px;font-variant-numeric:tabular-nums;margin-right:6px}
footer{margin-top:2.5rem;padding-top:1.25rem;padding-bottom:1rem;border-top:1px solid #334155;font-size:.75rem;line-height:1rem;color:#64748b;text-align:center}
footer a{color:inherit}
footer a:hover{color:#94a3b8}
footer p{margin:0}
footer .support{color:#475569}
footer .cur{color:#cbd5e1;font-weight:600}
footer button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0}
footer .support a,footer .btc{text-decoration:underline}
footer .about{margin-top:.75rem}
footer .about a{color:#334155;font-size:.875rem;line-height:1.25rem;text-decoration:none}
footer .about a:hover{color:#64748b}
html.ru-cursive [lang="ru"]{font-style:italic}
/* L'aperçu du test COMPARE imprimerie vs manuscrit : l'échantillon « imprimerie »
   doit rester droit même quand la préférence globale est la cursive, sinon les deux
   идти sont identiques et la démo n'a plus de sens. On force donc l'échantillon sans
   .cur en normal, avec une spécificité qui bat la règle globale ci-dessus. */
html.ru-cursive .sample [lang="ru"]:not(.cur){font-style:normal}
@media(max-width:520px){.wrap{padding:1.25rem 1rem 3rem}h1{font-size:20px}.ru{font-size:36px}.card{padding:16px}ul.words{columns:1}}