/* Мобильный вид первый: проверяется на ширине 320 точек. */
:root{--ink:#1d2021;--muted:#6b6b6b;--line:#dcd7cf;--bg:#fbf9f6;--accent:#3a6b4f;--bad:#a33}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:17px/1.5 -apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:34rem;margin:0 auto;padding:1rem}
h1{font-size:1.4rem;margin:.6rem 0 1rem}
a{color:var(--accent)}
.top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
     padding:.7rem 1rem;border-bottom:1px solid var(--line);background:#fff}
.brand{font-weight:600;text-decoration:none;color:var(--ink)}
.top nav{display:flex;gap:.9rem;align-items:center}
.inline{display:inline}
.card{display:flex;flex-direction:column;gap:.35rem;background:#fff;
      border:1px solid var(--line);border-radius:.6rem;padding:1rem}
label{font-size:.85rem;color:var(--muted)}
input{font:inherit;padding:.6rem;border:1px solid var(--line);border-radius:.4rem;
      background:#fff;color:var(--ink);width:100%}
button{font:inherit;margin-top:.8rem;padding:.7rem 1rem;border:0;border-radius:.4rem;
       background:var(--accent);color:#fff;cursor:pointer;min-height:2.75rem}
button.link{background:none;color:var(--accent);padding:0;margin:0;min-height:0;
            text-decoration:underline}
/* Кольцо фокуса видимое: по клавиатуре должно быть понятно, где ты. */
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);
  outline-offset:2px}
.error{color:var(--bad);border-left:3px solid var(--bad);padding-left:.6rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.counts{padding-left:1.1rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.45rem .3rem;border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Материал */
h2{font-size:1.1rem;margin:1.4rem 0 .5rem}
.list{list-style:none;padding:0}
.list li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.reading{margin:.6rem 0}
.vocab{margin:0}
.vocab dt{font-weight:600;margin-top:.8rem}
.vocab dd{margin:.15rem 0 0 0}
.example{font-style:italic;color:#555;margin-top:.15rem}
/* Перевод под стикером: сначала вспомни, потом подсмотри. */
.sticker{background:var(--ink);color:transparent;border-radius:.25rem;padding:0 .25rem;
         cursor:pointer;user-select:none}
.sticker:hover,.sticker:focus,.sticker.open{background:none;color:inherit}
.talk li,.questions li{margin:.5rem 0}
.options{list-style:none;padding:0;margin:.3rem 0 0}
.options li{padding:.1rem 0}
.big{display:inline-block;padding:.7rem 1.1rem;background:var(--accent);color:#fff;
     border-radius:.4rem;text-decoration:none;min-height:2.75rem}