/* lingua (borg.mk) — the design system (redesign 2026-09-27, operator: "implement everything").
 * Tokens first (light, dark by system preference, dark/light by explicit choice), then the
 * components of every redesigned page: top bar, language panel, reader (text, word
 * popover, slider dock, end-of-text cards), library, practice, test runner, landing.
 * Text colours follow the operator's rule: base language = ink, target language = blue;
 * a sentence wholly in the target language is plain ink; a switched word keeps its
 * language's colour with a dotted underline. Literata is self-hosted (SIL OFL, fonts/). */
@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/literata-normal-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/literata-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Literata';font-style:normal;font-weight:400 600;font-display:swap;src:url(/static/fonts/literata-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --paper:#faf8f3; --surface:#ffffff; --ink:#1b1b1f; --ink-2:#5b5c64; --line:#e7e3da;
  --tg:#1e4fa3; --tg-soft:#e8eefa; --pop-bg:#dfe8f7; --pop-line:#b4c7e8; --dock-bg:#ebe6db; --dock-line:#d3ccbd; --track:#cdc5b4; --ok:#1e7a4c; --ok-soft:#e6f3ec; --bad:#b3261e; --bad-soft:#fbe9e7;
  --shadow:0 6px 24px rgba(20,20,30,.10), 0 1px 3px rgba(20,20,30,.08);
  --read:"Literata", "Noto Serif", Georgia, serif;
  --ui:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --r1:8px; --r2:12px; --r3:999px;
  --measure:64ch; --top:52px; --dock:72px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#131417; --surface:#1c1d21; --ink:#e9e9ec; --ink-2:#a3a4ac; --line:#2d2e34;
  --tg:#93b6ff; --tg-soft:#1d2940; --pop-bg:#27354f; --pop-line:#41557d; --dock-bg:#262830; --dock-line:#3d404a; --track:#4a4d59; --ok:#74cf9c; --ok-soft:#18301f; --bad:#ff8a80; --bad-soft:#3a1b1a;
  --shadow:0 6px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); color-scheme:dark; } }
:root[data-theme="dark"]{
  --paper:#131417; --surface:#1c1d21; --ink:#e9e9ec; --ink-2:#a3a4ac; --line:#2d2e34;
  --tg:#93b6ff; --tg-soft:#1d2940; --pop-bg:#27354f; --pop-line:#41557d; --dock-bg:#262830; --dock-line:#3d404a; --track:#4a4d59; --ok:#74cf9c; --ok-soft:#18301f; --bad:#ff8a80; --bad-soft:#3a1b1a;
  --shadow:0 6px 24px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.4); color-scheme:dark; }

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--ui)}
a{color:inherit}
:focus-visible{outline:2px solid var(--tg);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}

/* top bar: back, level, theme — quiet, sticky */
.top{position:sticky;top:0;z-index:20;height:calc(var(--top) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) var(--s4) 0;display:flex;align-items:center;gap:var(--s3);
  background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line)}
.top .back{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-2);font-size:14px;
  min-height:44px;padding:0 var(--s2) 0 0}
.top .back svg{flex:none}
.top .logo{font:500 17px/1 var(--ui);letter-spacing:-.01em;text-decoration:none;margin:0}
.top .logo span{color:var(--ink-2)}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;border-radius:var(--r3);
  color:var(--ink-2);cursor:pointer}
.iconbtn:hover{background:var(--line)}
.progress{position:fixed;left:0;top:calc(var(--top) + env(safe-area-inset-top,0px));height:2px;background:var(--tg);
  width:0;z-index:21;transition:width .1s linear}

/* the text: one column, paper, no card */
main{max-width:var(--measure);margin:0 auto;padding:var(--s6) var(--s4) calc(var(--dock) + var(--s8))}
.meta{font:600 12px/1.4 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s3)}
.meta b{font-weight:600;color:var(--tg)}
article{font:400 19px/1.62 var(--read);font-optical-sizing:auto;hyphens:manual;text-wrap:pretty}
article h1{font:600 32px/1.2 var(--read);letter-spacing:-.01em;margin:0 0 var(--s5);text-wrap:balance}
article p{margin:0 0 1.05em}
/* a switchable unit: target = blue ink only (no boxes); interactivity shows on hover/focus */
.u{cursor:pointer;border-radius:3px;transition:background-color .12s;-webkit-tap-highlight-color:transparent}
.u.tg{color:var(--tg)}
.u.tg.pure{color:inherit}
.u:hover{background:var(--tg-soft)}
.u.on{background:var(--tg-soft);box-shadow:0 0 0 2px var(--tg-soft)}

/* translation popover (desktop) / bottom sheet (phone) */
/* the word box has its own tint, never the page's colour (operator 2026-09-27: "almost not visible,
   make its background different … light and dark mode") */
.pop{position:fixed;z-index:30;min-width:300px;max-width:min(92vw,380px);background:var(--pop-bg);color:var(--ink);
  border:1px solid var(--pop-line);border-radius:var(--r2);box-shadow:var(--shadow);padding:var(--s3) var(--s4);display:none}
.pop.on{display:block}
.pop .lang{font:600 11px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pop .tr{font:500 20px/1.35 var(--read);margin:2px 0 var(--s3)}
.btn{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:var(--r3);padding:0 14px;min-height:40px;
  font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--tg);border-color:var(--tg);color:var(--paper)}
.btn:hover{filter:brightness(.97)}

/* the dock: slider always under the thumb */
.dock{position:fixed;z-index:25;left:50%;transform:translateX(-50%);
  bottom:calc(var(--s4) + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 2*var(--s4)));
  display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);min-height:60px;
  background:var(--dock-bg);border:1px solid var(--dock-line);border-radius:var(--r3);box-shadow:var(--shadow)}
.dock .end{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;
  font-size:22px;cursor:pointer}
.dock .end:hover{background:var(--dock-line)}
.dock .val{min-width:52px;text-align:right;font:600 15px/1 var(--ui);font-variant-numeric:tabular-nums;color:var(--tg)}
.dock .val small{display:block;font:500 11px/1.2 var(--ui);color:var(--ink-2)}
.range{flex:1;position:relative;height:40px;display:flex;align-items:center}
.range input{width:100%;margin:0;appearance:none;background:transparent;height:40px;cursor:pointer}
.range input::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--tg) var(--fill,50%),var(--track) var(--fill,50%))}
.range input::-moz-range-track{height:6px;border-radius:3px;background:var(--track)}
.range input::-moz-range-progress{height:6px;border-radius:3px;background:var(--tg)}
.range input::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--tg);box-shadow:0 1px 4px rgba(0,0,0,.2)}
.range input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);border:2px solid var(--tg)}
.ticks{position:absolute;left:13px;right:13px;top:29px;display:flex;justify-content:space-between;pointer-events:none}
.ticks i{width:2px;height:5px;background:var(--track);border-radius:1px}

/* first-visit hint above the dock (replaces the 3-step tour) */
.hint{position:fixed;z-index:24;left:50%;transform:translateX(-50%);
  bottom:calc(var(--s4) + 60px + var(--s2) + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 2*var(--s4)));
  background:var(--ink);color:var(--paper);border-radius:var(--r2);padding:var(--s2) var(--s3);font-size:14px;
  display:flex;gap:var(--s3);align-items:center}
.hint button{margin-left:auto;background:transparent;border:0;color:inherit;opacity:.8;cursor:pointer;min-height:36px}

/* end of text: the loop — check, practise, next */
.done{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line);font-family:var(--ui)}
.done h2{font:600 13px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s3)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cardlink{display:flex;flex-direction:column;gap:4px;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r2);
  background:var(--surface);text-decoration:none;min-height:112px}
.cardlink:hover{border-color:var(--tg)}
.cardlink b{font-size:16px}
.cardlink span{color:var(--ink-2);font-size:14px}
.cardlink.main{background:var(--tg);border-color:var(--tg);color:var(--paper)}
.cardlink.main span{color:color-mix(in srgb,var(--paper) 80%,transparent)}

@media (max-width:640px){
  :root{--top:48px}
  main{padding-top:var(--s5)}
  article{font-size:18px;line-height:1.6}
  article h1{font-size:26px}
  .cards{grid-template-columns:1fr}
  .cardlink{min-height:0}
  .dock{bottom:0;width:100%;border-radius:var(--r2) var(--r2) 0 0;border-width:1px 0 0;
    padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom,0px))}
  .hint{bottom:calc(64px + var(--s2) + env(safe-area-inset-bottom,0px))}
  /* phone: the translation is a bottom sheet above the dock, big and thumb-reachable */
  .pop{min-width:0;left:0 !important;right:0;top:auto !important;max-width:none;
    bottom:calc(var(--dock-h, calc(60px + env(safe-area-inset-bottom,0px))) - 1px);   /* right on the dock (reader.js measures it) */
    border-radius:var(--r2) var(--r2) 0 0;border-width:1px 0 0;padding:var(--s4) var(--s4) var(--s4)}
  .pop .tr{font-size:22px}
}
@media (prefers-reduced-motion:reduce){ .u,.progress{transition:none} }

/* ---------- shared: language pair chip + sheet ---------- */
.pairchip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r3);background:var(--surface);cursor:pointer;font:500 14px/1 var(--ui);color:var(--ink)}
.pairchip .ar{color:var(--ink-2)} .pairchip .caret{color:var(--ink-2);font-size:12px}
.pairchip.compact .nm{display:none}
.scrim{position:fixed;inset:0;background:rgba(10,10,15,.35);z-index:40}
.sheet{position:fixed;z-index:41;left:50%;top:84px;transform:translateX(-50%);width:min(620px,calc(100% - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:var(--s4) var(--s5) var(--s5);font-family:var(--ui)}
.sheet h2{font:600 18px/1.3 var(--ui);margin:0 0 var(--s3);display:flex;align-items:center;gap:var(--s2)}
.sheet h2 button{margin-left:auto}
.langcols{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s3);align-items:start}
.langcol .cap{font:600 12px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 var(--s2)}
.langcol ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.langcol a,.langcol span{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--r1);text-decoration:none;font-size:15px}
.langcol a:hover{background:var(--paper)}
.langcol [aria-current]{background:var(--tg-soft);color:var(--tg);font-weight:600}
.langcol .off{opacity:.35}
.langcol small{color:var(--ink-2);margin-left:auto;font-size:12.5px}
.swap{align-self:center;margin-top:28px;width:44px;height:44px;box-sizing:border-box;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;
  display:grid;place-items:center;color:var(--ink);text-decoration:none}
a.swap:hover{background:var(--line)}
@media (max-width:640px){
  .sheet{top:auto;bottom:0;transform:none;left:0;width:100%;border-radius:16px 16px 0 0;max-height:85vh;overflow:auto;padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px))}
  .langcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .langcol small{display:none}
  .langcol a,.langcol span{padding:0 8px;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cont{grid-template-columns:1fr;padding:var(--s4)}
  .cont .t{font-size:18px}
  .swap{grid-column:1 / -1;grid-row:2;justify-self:center;margin:0;order:3}
  .pairchip .nm{display:none}
}

/* ---------- shared page frame for library / practice / check ---------- */
.page{max-width:760px;margin:0 auto;padding:var(--s5) var(--s4) var(--s8)}
.h1{font:600 30px/1.2 var(--read);letter-spacing:-.01em;margin:var(--s2) 0 var(--s4);text-wrap:balance}
.eyebrow{font:600 12px/1.4 var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:0}

/* continue card */
.cont{display:grid;grid-template-columns:1fr auto;gap:var(--s2) var(--s4);align-items:center;margin:var(--s5) 0;padding:var(--s4) var(--s5);
  background:var(--tg);color:var(--paper);border-radius:16px;text-decoration:none}
.cont .k{font:600 12px/1.3 var(--ui);letter-spacing:.07em;text-transform:uppercase;opacity:.85}
.cont .t{font:600 20px/1.3 var(--read);margin:2px 0 6px}
.cont .bar{height:4px;border-radius:2px;background:color-mix(in srgb,var(--paper) 30%,transparent);overflow:hidden}
.cont .bar i{display:block;height:100%;background:var(--paper)}
.cont .go{font:600 15px/1 var(--ui);white-space:nowrap}

/* category chips */
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);overflow-x:auto;padding:2px 2px var(--s2);margin:var(--s4) -2px var(--s2);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:0 14px;border-radius:var(--r3);border:1px solid var(--line);background:var(--surface);
  font:500 14px/1 var(--ui);cursor:pointer;color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip .n{color:var(--ink-2);margin-left:6px;font-size:12.5px}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}

/* text list */
.list{list-style:none;margin:0;padding:0;display:grid}
.list li{border-bottom:1px solid var(--line)}
.list a{display:grid;grid-template-columns:1fr auto;gap:4px var(--s4);padding:var(--s4) 0;text-decoration:none;align-items:center}
.list .tt{font:600 19px/1.35 var(--read);text-wrap:pretty}
.list .mt{font:13.5px/1.4 var(--ui);color:var(--ink-2)}
.list .mt b{font-weight:600;color:var(--tg)}
.list .st{grid-row:1 / span 2;grid-column:2;font:600 13px/1 var(--ui);text-align:right;color:var(--ink-2);white-space:nowrap}
.st .ok{color:var(--ok)} .st .score{display:inline-block;padding:5px 8px;border-radius:var(--r3);background:var(--ok-soft);color:var(--ok)}
.st .new{display:inline-block;padding:5px 8px;border-radius:var(--r3);background:var(--tg-soft);color:var(--tg)}
.demo{font:12.5px/1.4 var(--ui);color:var(--ink-2);margin-top:var(--s6);padding:var(--s2) var(--s3);border:1px dashed var(--line);border-radius:var(--r1)}

/* practice hub */
.types{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s4)}
.type{display:flex;flex-direction:column;gap:6px;padding:var(--s4) var(--s5);border:1px solid var(--line);border-radius:14px;background:var(--surface);
  text-decoration:none;min-height:150px}
.type:hover{border-color:var(--tg)}
.type .nm{font:600 18px/1.3 var(--ui)}
.type .ds{font:15px/1.45 var(--ui);color:var(--ink-2)}
.type .ft{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font:13px/1.3 var(--ui);color:var(--ink-2)}
.type .ft b{color:var(--tg);font-weight:600}
.type.rec{border-color:var(--tg);box-shadow:inset 0 0 0 1px var(--tg)}
.type .badge{align-self:flex-start;font:600 11.5px/1 var(--ui);padding:4px 8px;border-radius:var(--r3);background:var(--tg);color:var(--paper)}
.note{font:14px/1.5 var(--ui);color:var(--ink-2);margin:var(--s3) 0 0}

/* quiz runner */
.result{text-align:center;padding:var(--s6) 0}
.result .big{font:600 56px/1 var(--read);color:var(--tg)}
.result .sub{font:16px/1.5 var(--ui);color:var(--ink-2);margin:var(--s2) 0 var(--s5)}
.result .cards{text-align:left}
.empty{text-align:center;padding:var(--s7) var(--s4);border:1px dashed var(--line);border-radius:14px;font:15px/1.5 var(--ui);color:var(--ink-2)}
.empty b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.skel{height:18px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--surface),var(--line));background-size:200% 100%;
  animation:sk 1.2s linear infinite;margin:10px 0}
@keyframes sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* landing */
.hero{max-width:760px;margin:0 auto;padding:var(--s7) var(--s4) var(--s5)}
.hero h1{font:600 40px/1.15 var(--read);letter-spacing:-.015em;margin:0 0 var(--s3);text-wrap:balance}
.hero .lede{font:19px/1.55 var(--ui);color:var(--ink-2);margin:0 0 var(--s5);max-width:52ch}
.demo-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s5);box-shadow:var(--shadow)}
.demo-card .sent{font:400 22px/1.55 var(--read);min-height:3.2em;margin:0 0 var(--s4)}
.demo-card .dockrow{display:flex;align-items:center;gap:var(--s2)}
.demo-card .dockrow .val{min-width:52px;text-align:right;font:600 15px/1 var(--ui);color:var(--tg)}
.pick{margin-top:var(--s6)}
.pick .langcols{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s4)}
.start{display:flex;justify-content:flex-end;margin-top:var(--s4)}
.start .btn{min-height:48px;padding:0 22px;font-size:16px}
@media (max-width:640px){
  .types{grid-template-columns:1fr}
  .chips{flex-wrap:nowrap;margin-inline:calc(-1 * var(--s4));padding-inline:var(--s4)}
  .type{min-height:0}
  .hero h1{font-size:30px}
  .list .tt{font-size:17px}
  .cont{grid-template-columns:1fr;padding:var(--s4)}
  .cont .t{font-size:18px}
}

/* production additions */
.top .logo{display:flex;align-items:center;line-height:0;color:var(--ink)}
.top .logo .logo-svg{height:24px;width:auto}
.top .logo .tld{color:var(--ink-2)}
dialog.langs{border:0;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
dialog.langs::backdrop{background:rgba(10,10,15,.35)}
dialog.langs .sheet{position:fixed}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
article h1.hl{cursor:pointer}
.pop.peek{pointer-events:none}
@media (max-width:640px){ .pop.peek{display:none} }
.cardlink.off{opacity:.6;cursor:default}
.cardlink.off:hover{border-color:var(--line)}
main .note{font:14px/1.5 var(--ui);color:var(--ink-2)}
.hint button{white-space:nowrap}
.langcols.one{grid-template-columns:1fr}
.langcols.one small{margin-left:auto}
.chips a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chips a.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chips a.chip[aria-current] .n{color:inherit;opacity:.7}

/* ---------- the tests (ported from reader.css, restyled through the tokens) ---------- */
:root{--card:var(--surface);--muted:var(--ink-2);--bg:var(--paper);--tg-bg:var(--tg-soft);--ok-bg:var(--ok-soft);--bad-bg:var(--bad-soft);
  --hover:color-mix(in srgb,var(--line) 60%,var(--surface));--flip:var(--ink);--flip-bg:var(--line)}
.quiz{min-height:160px}
/* the test card (operator: "put more work into the tests' design"): the task
   as a quiet callout, a progress bar for item tests, the passages set apart,
   lettered choice cards, a clear primary button in a footer row */
.qtask{margin:0 0 22px;padding:10px 14px;border-left:3px solid var(--tg);border-radius:0 10px 10px 0;
  background:var(--hover);color:var(--muted);font:14px/1.5 var(--ui)}
.qhead{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.qprog{flex:1;height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.qprog span{display:block;height:100%;background:var(--tg);border-radius:3px;transition:width .3s}
.qnum{flex:none;white-space:nowrap;color:var(--muted);font:600 12.5px var(--ui)}
.qfrom{margin:0 0 16px;color:var(--muted);font:12.5px/1.4 var(--ui)}
.qsent{font:17px/1.8 var(--read);margin:0 0 12px}
.qsent mark{background:var(--tg-bg);color:var(--tg);padding:1px 4px;border-radius:4px}
.qstage{font-size:19px;padding:16px 18px;border-radius:12px;background:var(--hover);margin:0 0 18px}
/* word order: a hint line, the answer tray, the tiles to place */
.qhint{color:var(--muted);font:italic 16px/1.5 var(--read);margin:-8px 0 16px;
  padding-left:12px;border-left:3px solid var(--line)}
.qhintbox{margin:-8px 0 16px}
.linkish{border:0;background:none;padding:0;color:var(--tg);font:13px var(--ui);
  text-decoration:underline dotted;cursor:pointer}
.qline{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:60px;box-sizing:border-box;padding:10px 12px;
  border:2px dashed var(--line);border-radius:12px;margin:0 0 16px;transition:border-color .2s,background .2s}
.qline.full{border-style:solid;border-color:var(--tg)}
.qline.ok{border-style:solid;border-color:var(--ok);background:var(--ok-bg)}
.qline.bad{border-style:solid;border-color:var(--bad);background:var(--bad-bg)}
.qpool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:44px;margin:0 0 6px}
.tile{font:17px/1.3 var(--read);padding:7px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .12s,border-color .12s}
.tile:hover:not(:disabled){transform:translateY(-1px);border-color:var(--tg)}
.qline .tile{background:var(--tg-bg);border-color:transparent;color:var(--tg);box-shadow:none}
.tile.fixed{background:var(--hover);border-color:transparent;color:var(--ink);box-shadow:none;cursor:default}
.tile:disabled{cursor:default}
.qfin{font:17px var(--read);color:var(--muted)}
/* choices: lettered cards (meaning in two columns, reading in one) */
.qopts{display:flex;flex-direction:column;gap:8px;margin:0 0 6px}
.qopts.grid{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:600px){ .qopts.grid{grid-template-columns:1fr} }
.qopt{display:flex;align-items:center;gap:12px;text-align:left;font:16px/1.4 var(--read);
  padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:border-color .12s,background .12s}
.qopt:hover:not(:disabled){border-color:var(--tg);background:var(--hover)}
.qopt:disabled{cursor:default}
.qkey{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);color:var(--muted);font:600 12px var(--ui)}
.qopt.chosen{border-color:var(--tg);background:var(--tg-bg)}
.qopt.chosen .qkey{background:var(--tg);border-color:var(--tg);color:var(--card)}
.qopt.ok{border-color:var(--ok);background:var(--ok-bg)}
.qopt.ok .qkey{background:var(--ok);border-color:var(--ok);color:var(--card)}
.qopt.bad{border-color:var(--bad);background:var(--bad-bg)}
.qopt.bad .qkey{background:var(--bad);border-color:var(--bad);color:var(--card)}
.qquest{margin:18px 0 0}
.qq{display:flex;gap:10px;align-items:baseline;margin:0 0 10px;font:600 15px/1.45 var(--ui)}
.qqn{flex:none;color:var(--tg)}
/* the footer row: what happened on the left, the button on the right */
.qactions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  margin:22px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.qcenter{justify-content:center;border-top:0;padding-top:0}
.qbtn.primary{font:600 14px/1 var(--ui);padding:11px 24px;border-radius:10px;
  border:1px solid var(--tg);background:var(--tg);color:var(--card);cursor:pointer}
.qbtn.primary:hover:not(:disabled){filter:brightness(1.08);background:var(--tg)}
.qbtn.primary:disabled{background:var(--hover);border-color:var(--line);color:var(--muted);opacity:1;cursor:default}
.qverdict{font:600 15px var(--ui)}
.qverdict.ok{color:var(--ok)}
.qverdict.bad{color:var(--bad)}
.qsol{flex-basis:100%;order:-1;padding:10px 14px;border-radius:10px;background:var(--hover);
  font:16px/1.5 var(--read)}
.qsollabel{display:block;color:var(--muted);font:12.5px var(--ui);margin-bottom:2px}
.qdone{text-align:center;padding:12px 0 4px}
.qres{font:700 22px/1.3 var(--ui);margin:8px 0 4px}
.qbest{color:var(--muted);font-size:13px;margin:0 0 6px}
.qmsg{color:var(--muted);text-align:center}
.qmarks{color:var(--muted);font-size:13px}
/* error correction and gaps: passages with numbered places */
.qpass{margin:0 0 20px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.qpass:last-of-type{border-bottom:0;padding-bottom:0}
.qptitle{margin:0 0 6px;color:var(--muted);font:600 11.5px/1.4 var(--ui);
  letter-spacing:.04em;text-transform:uppercase}
.qpass .qsent{margin:0}
/* a place looks like a target-language word in the reader (operator); a
   click opens its options in a list right under it */
.pwrap{position:relative;display:inline-block}
.place{position:relative;font:inherit;color:var(--tg);background:var(--tg-bg);border:0;padding:0 3px;border-radius:4px;
  cursor:pointer}
/* above the neighbouring places, so the whole frame shows (operator) */
.place:hover:not(:disabled),.place.active{outline:1px solid var(--tg);z-index:1}
/* answered: the reader's "switched by a click" colour, so what is done stands out (operator) */
.place.set{color:var(--flip);background:var(--flip-bg)}
.place.set:hover:not(:disabled),.place.set.active{outline-color:var(--flip)}
.place sup{font:600 10px var(--ui);color:var(--muted);margin-right:2px}
.place.gap{min-width:3em}
.place:disabled{cursor:default}
.place.ok{color:var(--ink);background:var(--ok-bg);outline:1px solid var(--ok)}
.place.bad{color:var(--ink);background:var(--bad-bg);outline:1px solid var(--bad)}
/* the find test's solution over the learner's marks (operator: marks stay,
   mistakes numbered, one click; "my wrong selections red, solutions green"):
   every mistake green, solid when marked, dashed when missed; a correct word
   marked red */
.place.found,.place.missed{cursor:default;color:var(--ink);background:var(--ok-bg)}
.place.found{outline:2px solid var(--ok)}
.place.missed{outline:2px dashed var(--ok)}
.pmenu{position:absolute;left:0;top:calc(100% + 4px);z-index:20;display:flex;flex-direction:column;
  min-width:max(100%,7em);padding:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.14)}
.popt{font:16px/1.3 var(--read);text-align:left;white-space:nowrap;padding:6px 10px;border:0;
  border-radius:6px;background:transparent;color:var(--ink);cursor:pointer}
.popt:hover{background:var(--hover)}
.popt.chosen{background:var(--tg-bg);color:var(--tg)}
.mk{cursor:pointer;border-radius:3px;padding:0 1px}
.mk:hover{background:var(--hover)}
.mk.on{outline:2px solid var(--tg);outline-offset:0;background:var(--tg-bg)}
.mk.wrong{cursor:default;outline:2px solid var(--bad);background:var(--bad-bg)}
.mk.wrong:hover{background:var(--bad-bg)}
.qexpl{list-style:none;margin:20px 0 4px;padding:12px 16px;border-radius:12px;background:var(--hover);
  font-size:14px;line-height:1.7}
.qexpl sup{color:var(--muted)}
.qexpl b{font:600 16px var(--read)}
.qmean{color:var(--muted)}

/* practice: hub + runner (redesign) */
#practice .types .type .ft .lv{font-variant-numeric:tabular-nums}
.type.off{opacity:.45;pointer-events:none}
.runhead{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s4)}
.runhead .back{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink-2);text-decoration:none;font:500 14px/1 var(--ui)}
.runtitle{margin-left:auto;font:600 13px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:var(--s5)}
.qbig{font:600 22px/1.35 var(--read);margin:0 0 var(--s4);text-wrap:balance}
.qbtn{font:600 14px/1 var(--ui);padding:11px 20px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.qbtn.primary{background:var(--tg);border-color:var(--tg);color:var(--paper)}
.qactions .qbtn + .qbtn{margin-left:var(--s2)}
.quiz .result{padding:var(--s4) 0}
.quiz .result .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);text-align:left;margin-top:var(--s4)}
@media (max-width:640px){
  .quiz{padding:var(--s4);border-radius:12px}
  .quiz .result .cards{grid-template-columns:1fr}
  .qbig{font-size:20px}
  .qopts.grid{grid-template-columns:1fr}
}
.offline{margin:0;padding:8px 16px;background:var(--ink);color:var(--paper);font:14px/1.4 var(--ui);text-align:center}
.type.mywords{border-style:dashed}
ul.nf{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;gap:6px;font:14px/1.5 var(--ui);color:var(--ink-2)}
ul.nf b{color:var(--ink);font-weight:600}
/* no italic anywhere: Literata's Cyrillic italic has only the Russian forms of б г д п т, not the
   Macedonian / Serbian ones (checked 2026-09-27), so hints are upright and muted */
.qhint{font-style:normal}
/* the one header (operator 2026-09-27: logo centred, everything else in a fixed place):
   left the language chip, the logo in the exact middle, right Library · Practice · theme */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--s3);
  padding-inline:max(var(--s4),calc((100% - 1120px) / 2))}
.top .tl{justify-self:start;display:flex;align-items:center;min-width:0}
.top .logo{justify-self:center}
.top .tr{justify-self:end;display:flex;align-items:center;gap:var(--s1)}
.navlink{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:var(--r3);
  text-decoration:none;color:var(--ink-2);font:500 14px/1 var(--ui);white-space:nowrap}
.navlink:hover{background:var(--line);color:var(--ink)}
.navlink[aria-current]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.navlink svg{flex:none}
/* the reader: the text's level above the title, beside the meta line */
.metarow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);margin:0 0 var(--s3)}
.metarow .meta{margin:0}
@media (max-width:640px){
  .top{gap:var(--s2)}
  .navlink{padding:0 9px}
  .navlink .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top .tr .iconbtn{width:36px}
}
/* the header stays put (operator 2026-09-27: "when you reach the end … header tries to disappear
   … and back"): fixed to the window instead of sticky, the page starts below it, and no
   elastic overscroll bounce of the page (it moved sticky — and in some browsers fixed — bars) */
html{overscroll-behavior-y:none;scroll-padding-top:calc(var(--top) + env(safe-area-inset-top,0px) + 8px)}
body{overscroll-behavior-y:none;padding-top:calc(var(--top) + env(safe-area-inset-top,0px))}
.top{position:fixed;top:0;left:0;right:0;z-index:20}
/* the word popover (operator 2026-09-27: "so big it can not fit the screen"; the "show in X"
   switch removed: "it does not have any meaning for me"): label + ✕, the translation, then
   two lines, hear the word / hear the sentence, only when the browser has a voice */
.pophead{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.popx{width:32px;height:32px;margin:-6px -10px -6px 0;font-size:14px;flex:none}
.pop .tr{margin:2px 0 0;overflow-wrap:anywhere}
.pop .say{display:flex;flex-direction:column;align-items:flex-start;margin-top:var(--s2)}
.pop .say .linkish{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:2px 0;
  font:500 15px/1.3 var(--ui);text-align:left;white-space:normal}
.pop .say svg{flex:none}
.pop.peek .popx,.pop.peek .say{display:none}
@media (max-width:640px){
  .pop{padding:var(--s3) var(--s4)}
  .pop .tr{font-size:21px}
  .pop .say .linkish{min-height:40px}
}
.pop .popx:hover{background:var(--pop-line)}
/* header left (operator 2026-09-27: "not show both flags … only the target … the level … right to
   it"): one pill, learned language | level; the level shown is <html data-level> (set in <head>) */
#pair{display:inline-flex;align-items:stretch}
#pair .pairchip:first-child{border-radius:var(--r3) 0 0 var(--r3)}
#pair .lvchip{border-radius:0 var(--r3) var(--r3) 0;border-left-width:0}
.lvchip .lvl{display:none;align-items:baseline;gap:6px}
html[data-level="A"] .lvchip .lvl[data-l="A"],html[data-level="B"] .lvchip .lvl[data-l="B"],
html[data-level="C"] .lvchip .lvl[data-l="C"]{display:inline-flex}
.lvchip .lvl b{font-weight:700}
.lvchip .lvl .nm{color:var(--ink-2)}
/* the level panel: A · B · C with name and CEFR, the current one marked */
.lvlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lvlist a,.lvlist button{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:48px;padding:0 14px;
  border:0;border-radius:var(--r1);background:transparent;color:var(--ink);font:500 16px/1.3 var(--ui);text-decoration:none;
  text-align:left;cursor:pointer}
.lvlist b{min-width:1.1em;font-size:17px}
.lvlist small{margin-left:auto;color:var(--ink-2);font-size:13px}
.lvlist a:hover,.lvlist button:hover{background:var(--paper)}
html[data-level="A"] .lvlist [data-set-level="A"],html[data-level="B"] .lvlist [data-set-level="B"],
html[data-level="C"] .lvlist [data-set-level="C"]{background:var(--tg-soft);color:var(--tg);font-weight:600}
@media (min-width:641px){ .lvsheet{width:min(400px,calc(100% - 32px))} }
@media (max-width:640px){ #pair .pairchip{padding:0 10px} }
/* the options list of the errors and gaps tests: the same tint as the word box (operator 2026-09-27:
   "also change backgrounds of the dropdown selection of options") */
.pmenu{background:var(--pop-bg);border-color:var(--pop-line)}
.pmenu .popt:hover{background:color-mix(in srgb,var(--pop-line) 55%,var(--pop-bg))}
.pmenu .popt.chosen{background:var(--surface);color:var(--tg);font-weight:600}
/* landing / onboarding (operator 2026-09-27: "redesign the onboarding"): one line, one
   paragraph, the demo (used like the reader), the site-wide level, the language to learn,
   the other reading languages as small chips */
.home{max-width:760px;margin:0 auto;padding:var(--s7) var(--s4) var(--s8)}
.home .hero{max-width:none;margin:0 0 var(--s5);padding:0}
.home .hero .lede{margin:0}
.home .step{margin-top:var(--s7)}
.home h2{font:600 24px/1.25 var(--read);margin:0 0 var(--s3)}
.home .note{margin:var(--s2) 0 0}
.demo-card .eyebrow{margin-bottom:10px}
.demo-card .fl{font-size:22px}
.lvcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.lvcard{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s3) var(--s4);border:1px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--ink);font:500 15px/1.3 var(--ui);text-align:left;cursor:pointer}
.lvcard b{font:600 28px/1.1 var(--read)}
.lvcard small{color:var(--ink-2);font-size:12.5px}
.lvcard:hover{border-color:var(--pop-line)}
html[data-level="A"] .lvcard[data-set-level="A"],html[data-level="B"] .lvcard[data-set-level="B"],
html[data-level="C"] .lvcard[data-set-level="C"]{border-color:var(--tg);background:var(--tg-soft);color:var(--tg);box-shadow:inset 0 0 0 1px var(--tg)}
.learn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s2)}
.learn a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--s4);border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);text-decoration:none;font:500 16px/1.3 var(--ui)}
.learn a:hover{border-color:var(--tg);color:var(--tg)}
.learn .fl{font-size:22px}
.learn small{margin-left:auto;color:var(--ink-2);font-size:12.5px}
.readin{margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line)}
.readin .chips{margin-top:var(--s2)}
@media (max-width:640px){
  .home{padding-top:var(--s5)}
  .home h2{font-size:21px}
  .lvcard{padding:var(--s3)}
  .learn{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .learn a{padding:0 var(--s3)}
  .learn small{display:none}
  .pop.free{bottom:0;padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px))}
}
/* the end's "✓ read · next text" (operator 2026-09-27): read_mark capitalised */
.cardlink .cap{display:inline-block}
.cardlink .cap::first-letter{text-transform:uppercase}
/* my progress (practice ?progress=1, operator 2026-09-27) */
.report section{margin:0 0 var(--s6)}
.report h2{font:600 18px/1.3 var(--ui);margin:0 0 var(--s3)}
.report .cap{font:600 12px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:var(--s4) 0 var(--s2)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.stats div{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.stats b{display:block;font:600 28px/1.1 var(--read);color:var(--ink)}
.stats span{display:block;margin-top:4px;font:500 13px/1.3 var(--ui);color:var(--ink-2)}
.stats small{font-size:12px}
.cal{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-auto-columns:1fr;gap:3px;max-width:420px}
.cal i,.legend i{display:block;aspect-ratio:1;border-radius:3px;background:var(--line)}
.cal .c1,.legend .c1{background:color-mix(in srgb,var(--tg) 30%,var(--line))}
.cal .c2,.legend .c2{background:color-mix(in srgb,var(--tg) 55%,var(--line))}
.cal .c3,.legend .c3{background:color-mix(in srgb,var(--tg) 80%,var(--line))}
.cal .c4,.legend .c4{background:var(--tg)}
.cal .cx{background:transparent}
.legend{display:flex;align-items:center;gap:4px;margin:var(--s2) 0 0;font:12px/1 var(--ui);color:var(--ink-2)}
.legend i{width:12px}
.tablewrap{overflow-x:auto}
.rtable{width:100%;border-collapse:collapse;font:14px/1.4 var(--ui)}
.rtable th,.rtable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.rtable th:first-child,.rtable td:first-child{text-align:left;padding-left:0}
.rtable thead th{font:600 12px/1.3 var(--ui);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.rtable tbody th{font-weight:600}
.rtable.hist th,.rtable.hist td{text-align:left}
.rtable.hist td.sc{text-align:right;font-variant-numeric:tabular-nums}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(60px,2fr) auto;align-items:center;gap:var(--s3);font:14px/1.3 var(--ui)}
.bars .bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.bars .bar i{display:block;height:100%;background:var(--bad)}
.bars .n{color:var(--ink-2);font-variant-numeric:tabular-nums}
.type.myprogress{border-style:solid}   /* not "progress": that class is the reader's fixed progress line */
@media (max-width:640px){
  .stats div{padding:var(--s3)}
  .stats b{font-size:24px}
  .bars li{grid-template-columns:minmax(0,1fr) 80px auto}
}