:root{
  --paper:#f6f2e9; --card:#fffdf7; --ink:#1c1a16; --ink2:#5c564a; --line:#d8d0bd;
  --blue:#122e6b; --blue2:#1d3f8f; --red:#b5122e; --gold:#8a6c1f;
  --ok:#2c6e3f; --hard:#a86a1f; --again:#a01c1c;
  --shadow:0 1px 2px rgba(28,26,22,.08),0 8px 24px rgba(28,26,22,.09);
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Georgia,serif;
  --sans:"Avenir Next","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;
  background-image:radial-gradient(rgba(28,26,22,.03) 1px,transparent 1px);background-size:22px 22px;
  display:flex;flex-direction:column;overscroll-behavior-y:contain}
.bar{height:4px;display:flex;flex:none}
.bar i{flex:1}.bar i:nth-child(1){background:var(--blue)}.bar i:nth-child(2){background:#fffdf7}.bar i:nth-child(3){background:var(--red)}
header{flex:none;padding:10px 14px 6px;display:flex;align-items:center;gap:10px}
h1{font-family:var(--serif);font-size:17px;letter-spacing:.08em;color:var(--blue);flex:1}
h1 b{color:var(--red);font-weight:inherit}
.hstat{font-size:11.5px;color:var(--ink2);text-align:right;line-height:1.35}
.hstat b{color:var(--blue);font-size:14px}
main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 14px 24px}
.wrap{max-width:640px;margin:0 auto}
.screen{display:none}.screen.on{display:block;animation:in .25s ease}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* home */
.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);margin-top:8px}
.hero h2{font-family:var(--serif);font-size:20px;color:var(--blue);margin-bottom:4px}
.hero p{font-size:14px;color:var(--ink2)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 4px}
.num{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:10px 6px;text-align:center}
.num b{display:block;font-family:var(--serif);font-size:24px;color:var(--blue);line-height:1.1}
.num.due b{color:var(--red)} .num span{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.go{display:block;width:100%;margin-top:16px;font:inherit;font-weight:600;font-size:17px;padding:15px;border:none;border-radius:12px;
  background:var(--blue);color:#fdfbf4;cursor:pointer;box-shadow:var(--shadow)}
.go:disabled{background:var(--line);color:var(--ink2);box-shadow:none}
.sect{margin-top:18px}
.sect h3{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink2);cursor:pointer}
.chip.on{border-color:var(--blue);background:var(--blue);color:#fdfbf4;font-weight:600}
select{font:inherit;font-size:14px;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)}
.mini{font-size:12px;color:var(--ink2);margin-top:8px;line-height:1.45}
.linkbtn{background:none;border:none;font:inherit;font-size:12.5px;color:var(--blue2);text-decoration:underline;cursor:pointer;padding:0}
/* card */
.qcard{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:16px;padding:20px 18px;box-shadow:var(--shadow);margin-top:8px}
.qcard.rA{border-top-color:var(--red)} .qcard.rB{border-top-color:var(--blue2)} .qcard.rC{border-top-color:var(--gold)}
.qmeta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:10.5px;color:var(--ink2);margin-bottom:10px}
.badge{font-weight:700;letter-spacing:.06em;border:1.2px solid;border-radius:4px;padding:1.5px 6px}
.bA{color:var(--red);border-color:var(--red)}.bB{color:var(--blue2);border-color:var(--blue2)}
.bC{color:var(--gold);border-color:var(--gold)}.bD{color:var(--ink2);border-color:var(--line)}
.upd{font-weight:700;color:#1f6b3a;background:#e6f4ea;border:1px solid #a9d3b6;border-radius:4px;padding:1.5px 6px}
.tag{background:var(--paper);border-radius:4px;padding:1.5px 7px}
.qtext{font-family:var(--serif);font-size:22px;line-height:1.35}
.maj{display:inline-block;font-size:10.5px;color:#8a4a00;background:#fdf2e2;border:1px solid #e8cfa8;border-radius:5px;padding:2px 7px;margin-bottom:8px}
.reveal{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px;animation:in .2s ease}
.alab{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.atext{font-size:17px;line-height:1.45}
.alt{margin-top:10px;font-size:14px;color:var(--ink2)}
.alt li{margin-left:16px;margin-top:3px}
.jb{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.jr{margin-bottom:8px}
.jl{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--blue2);font-weight:600;display:block;margin-bottom:2px}
.jr.warn .jl{color:var(--red)}
.jr.warn .jt{background:#fdf3f0;border-left:2px solid var(--red);padding:6px 10px;border-radius:0 6px 6px 0}
.jt{font-size:14px;line-height:1.5}
.jsrc{font-size:11.5px;color:var(--ink2);font-style:italic;border-top:1px solid var(--line);padding-top:6px}
/* buttons */
.acts{position:sticky;bottom:0;background:linear-gradient(rgba(246,242,233,0),var(--paper) 30%);padding:14px 0 4px;margin-top:14px}
.show{display:block;width:100%;font:inherit;font-weight:600;font-size:17px;padding:15px;border:none;border-radius:12px;background:var(--blue);color:#fdfbf4;cursor:pointer;box-shadow:var(--shadow)}
.grade{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.g{font:inherit;font-size:13px;font-weight:600;padding:13px 4px;border:1.5px solid;border-radius:11px;background:var(--card);cursor:pointer;line-height:1.25}
.g small{display:block;font-size:10px;font-weight:400;opacity:.75;margin-top:2px}
.g1{color:var(--again);border-color:var(--again)}.g2{color:var(--hard);border-color:var(--hard)}
.g3{color:var(--ok);border-color:var(--ok)}.g4{color:var(--blue2);border-color:var(--blue2)}
.g:active{transform:scale(.97)}
/* mcq */
.opt{display:block;width:100%;text-align:left;font:inherit;font-size:15px;background:var(--card);border:1.5px solid var(--line);
  border-radius:11px;padding:12px 14px;margin-bottom:8px;cursor:pointer;line-height:1.4}
.opt.pick{border-color:var(--blue);background:#eef1f8}
.opt.good{border-color:var(--ok);background:#eaf4ec}
.opt.bad{border-color:var(--again);background:#f9ecec}
/* done */
.done{text-align:center;padding:30px 16px}
.done .big{font-family:var(--serif);font-size:44px;color:var(--blue)}
.done h2{font-family:var(--serif);font-size:22px;color:var(--blue);margin:8px 0}
.done p{color:var(--ink2);font-size:14.5px}
footer{flex:none;text-align:center;font-size:10.5px;color:var(--ink2);padding:8px 14px calc(8px + env(safe-area-inset-bottom))}
@media(min-width:700px){ .qtext{font-size:25px} main{padding:10px 20px 30px} }

/* --- утилитарные классы вместо инлайновых style=: строгий CSP на своём домене
   запрещает style-src 'unsafe-inline', а значит и атрибуты style в разметке.
   Блок идёт последним, чтобы перебивать одноимённые свойства компонентов. --- */
.u-center{justify-content:center}
.u-g14{gap:14px}
.u-m0{margin:0}
.u-mt6{margin-top:6px}
.u-mt8{margin-top:8px}
.u-mt10{margin-top:10px}
.u-mt12{margin-top:12px}
.u-mt14{margin-top:14px}
.u-ml-auto{margin-left:auto}
.u-mw260{max-width:260px;margin:18px auto 0}
.u-mw290{max-width:290px}
.u-nolink{text-decoration:none}
.u-tac{text-align:center}
.u-fs165{font-size:16.5px}
.u-fs19{font-size:19px}
.u-fs21{font-size:21px;margin-top:6px}
.u-sub{color:var(--ink2);font-size:14px;margin-top:6px}
.u-eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.u-blw5{border-left-width:5px}
.u-dim{opacity:.55}
.u-soft{opacity:.7;font-weight:400}
.u-grade{flex:1;min-width:80px;padding:11px 8px;font-size:13.5px}
.u-hidden{display:none}

.loaderr{max-width:36rem;margin:4rem auto;padding:1.5rem;border-radius:.75rem;
 background:#fff5f5;border:1px solid #f0c0c0;color:#7a1020;font:16px/1.5 system-ui,sans-serif;
 text-align:center}