/* Словарный диктант — сайт. Цвета и шрифты из дизайн-системы приложения. */
@font-face{font-family:Nunito;font-weight:600;font-display:swap;src:url(fonts/Nunito_600SemiBold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(fonts/Nunito_700Bold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(fonts/Nunito_800ExtraBold.woff) format("woff")}
@font-face{font-family:Nunito;font-weight:900;font-display:swap;src:url(fonts/Nunito_900Black.woff) format("woff")}
@font-face{font-family:Caveat;font-weight:700;font-display:swap;src:url(fonts/Caveat_700Bold.woff) format("woff")}

:root{
  --paper:#fbf8f1;--surface:#fff;--sunken:#f2eee4;--grid:#dde6f2;--margin-rule:#f2b3aa;--line:#e6dfcf;--line-strong:#8a8170;
  --ink:#1f2430;--muted:#5b6272;--primary:#2d55e0;--primary-press:#1f3fb3;--on-primary:#fff;--primary-tint:#e7edff;
  --accent:#ffc738;--accent-press:#d99a00;--on-accent:#1f2430;--accent-tint:#fff3cc;
  --correct:#12824f;--correct-ink:#0f6e45;--correct-tint:#dcf4e8;--error:#c8321f;--error-tint:#fde5e0;
  --store-bg:#1f2430;--store-ink:#fff;
  --shadow-card:0 1px 0 #e6dfcf,0 12px 28px rgba(31,36,48,.08);
  --sans:Nunito,"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--hand:Caveat,"Comic Sans MS",cursive;
  --radius:24px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#12151c;--surface:#1c202b;--sunken:#0d1016;--grid:#1a2130;--margin-rule:#5b2d2a;--line:#2c3241;--line-strong:#6b7489;
  --ink:#f3f1ea;--muted:#a7aebd;--primary:#86a2ff;--primary-press:#5a74d6;--on-primary:#0e1533;--primary-tint:#1f2a4d;
  --accent:#ffd35c;--accent-press:#b8922e;--accent-tint:#3a3220;--correct:#4fd39b;--correct-ink:#6fe0ad;--correct-tint:#16352a;--error:#ff8a78;--error-tint:#3b1f1b;
  --store-bg:#f3f1ea;--store-ink:#12151c;--shadow-card:0 1px 0 #2c3241,0 12px 28px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#12151c;--surface:#1c202b;--sunken:#0d1016;--grid:#1a2130;--margin-rule:#5b2d2a;--line:#2c3241;--line-strong:#6b7489;
  --ink:#f3f1ea;--muted:#a7aebd;--primary:#86a2ff;--primary-press:#5a74d6;--on-primary:#0e1533;--primary-tint:#1f2a4d;
  --accent:#ffd35c;--accent-press:#b8922e;--accent-tint:#3a3220;--correct:#4fd39b;--correct-ink:#6fe0ad;--correct-tint:#16352a;--error:#ff8a78;--error-tint:#3b1f1b;
  --store-bg:#f3f1ea;--store-ink:#12151c;--shadow-card:0 1px 0 #2c3241,0 12px 28px rgba(0,0,0,.35);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background-color:var(--paper);color:var(--ink);font:600 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:-1px -1px}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:var(--primary);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,label:focus-within{outline:3px solid var(--primary);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-weight:900;line-height:1.08;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.muted{color:var(--muted)}
.hand{font-family:var(--hand);font-weight:700;color:var(--error);letter-spacing:0}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* шапка */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:900;font-size:18px;white-space:nowrap}
.brand img{width:36px;height:36px;border-radius:10px}
.brand em{font-style:normal;font-weight:700;color:var(--muted);font-size:15px}
@media (max-width:640px){.brand em{display:none}}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px}
.nav a:hover{color:var(--primary)}
@media (max-width:860px){.nav{display:none}.top .btn{margin-left:auto}}

/* кнопки */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 22px;border-radius:16px;
  background:var(--primary);color:var(--on-primary);font:800 16px/1 var(--sans);text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 var(--primary-press);transition:transform 90ms,box-shadow 90ms}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--primary-press)}
.btn--sm{height:40px;padding:0 16px;font-size:14px;border-radius:12px;box-shadow:0 3px 0 var(--primary-press)}
.btn--accent{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 0 var(--accent-press)}
.btn--ghost{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:20px;height:20px}

/* кнопки магазинов. Перед запуском заменить на официальные значки App Store и RuStore из их брендбуков. */
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 20px 0 14px;border-radius:14px;background:var(--store-bg);color:var(--store-ink);text-decoration:none;transition:transform 120ms}
.store:hover{transform:translateY(-2px)}
.store .si{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--primary);color:#fff;flex:none}
.store .si svg{width:18px;height:18px}
.store span{display:flex;flex-direction:column;line-height:1.1}
.store small{font-size:11.5px;font-weight:700;opacity:.8}
.store b{font-size:19px;font-weight:900}

/* карточки */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-card)}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.fill{fill:currentColor;stroke:none}

/* подвал */
.foot{margin-top:40px;padding-block:32px 40px;border-top:2px solid var(--margin-rule);font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a{color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* плашка о cookie */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;background:var(--surface);color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-card),0 12px 40px rgba(20,30,80,.18);font-size:15px;line-height:1.4}
.cookie p{margin:0;flex:1 1 320px}
.cookie a{color:var(--primary);font-weight:700}
.cookie div{display:flex;gap:10px}