:root{
  --ink:#10233f; --soft:#5b6b82; --line:#e3e9f2; --panel:#ffffff;
  --sky:#eaf3ff; --mint:#e9fbf3; --sun:#fff6e0;
  --go:#2563eb; --go-d:#1d4ed8; --ok:#16a34a; --no:#e11d48;
  --r:22px; --shadow:0 10px 30px rgba(16,35,63,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:"Quicksand","Nunito","Ubuntu",system-ui,Arial,sans-serif;
  color:var(--ink); background:linear-gradient(170deg,var(--sky) 0%,#f6faff 45%,var(--mint) 100%);
  -webkit-text-size-adjust:100%}
.wrap{max-width:980px; margin:0 auto; padding:22px 18px 40px}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px}
.brand{font-weight:800; font-size:22px; letter-spacing:-.01em}
.brand span{color:#e9a836}
.who{font-size:14px; color:var(--soft); font-weight:700}
h1{font-size:30px; margin:0 0 4px; letter-spacing:-.02em}
.lead{color:var(--soft); margin:0 0 20px; font-size:16px}
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
a.card{display:block; text-decoration:none; color:inherit; background:var(--panel);
  border-radius:var(--r); padding:20px; box-shadow:var(--shadow); border:2px solid transparent;
  transition:transform .12s ease, border-color .12s ease}
a.card:hover{transform:translateY(-3px)}
.card .em{font-size:38px; line-height:1}
.card h2{margin:10px 0 2px; font-size:20px}
.card p{margin:0; color:var(--soft); font-size:14px; min-height:38px}
.bar{height:10px; border-radius:99px; background:#eef2f8; margin-top:14px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:currentColor}
.card .meta{display:flex; justify-content:space-between; font-size:12.5px; color:var(--soft); margin-top:7px; font-weight:700}
.pill{display:inline-block; font-size:12px; font-weight:800; padding:4px 10px; border-radius:99px;
  background:var(--sun); color:#8a5a00}
.panel{background:var(--panel); border-radius:26px; box-shadow:var(--shadow); padding:22px}
.rounds{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-top:6px}
a.round{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  border:2px solid var(--line); border-radius:16px; padding:12px 14px; font-weight:700; background:#fff}
a.round .n{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:#eef4ff; color:var(--go-d); font-size:14px}
a.round.done{border-color:#bbf7d0; background:#f2fdf6}
a.round.test{border-color:#fde68a; background:#fffbeb}
.stars{display:flex; gap:7px; align-items:center}
.star{width:26px; height:26px; border-radius:50%; background:#eef2f8; color:#cbd5e1;
  display:grid; place-items:center; font-size:15px}
.star.on{background:#fde68a; color:#f59e0b}
.q{font-size:clamp(40px,10vw,64px); font-weight:800; display:flex; gap:16px; align-items:center;
  justify-content:center; margin:14px 0 6px; letter-spacing:-.02em}
.q .box{min-width:96px; height:78px; border:4px solid var(--go); border-radius:18px;
  background:#f2f7ff; display:grid; place-items:center; font-size:44px}
.frames{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:6px 0 14px}
.frame{display:grid; grid-template-columns:repeat(5,44px); grid-template-rows:repeat(2,44px);
  border:3px solid var(--ink); border-radius:10px; overflow:hidden; background:#fff}
.cell{border:1px solid #dbe3ee; display:grid; place-items:center}
.dot{width:30px; height:30px; border-radius:50%; box-shadow:inset -5px -5px 0 rgba(0,0,0,.12)}
.opts{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:12px}
button.opt{font-weight:800; font-size:30px; font-family:inherit; padding:16px 0; border-radius:18px; border:3px solid #cfe0ff;
  background:#fff; color:var(--go-d); box-shadow:0 5px 0 #cfe0ff; cursor:pointer}
button.opt:active{transform:translateY(3px); box-shadow:0 2px 0 #cfe0ff}
button.opt.right{border-color:#86efac; box-shadow:0 5px 0 #86efac; background:#f0fdf4; color:#15803d}
button.opt.wrong{border-color:#fda4af; box-shadow:0 5px 0 #fda4af; background:#fff1f2; color:#be123c}
button.opt[disabled]{opacity:.55}
.row{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:14px}
.btn{font-weight:800; font-size:17px; font-family:inherit; padding:12px 20px; border-radius:16px; border:none; cursor:pointer;
  text-decoration:none; display:inline-block}
.btn.go{background:var(--go); color:#fff; box-shadow:0 5px 0 var(--go-d)}
.btn.ghost{background:#fff; color:var(--go-d); border:3px solid #cfe0ff; box-shadow:0 5px 0 #cfe0ff}
.say{min-height:30px; font-weight:800; font-size:19px; text-align:center; margin-top:10px}
.say.ok{color:var(--ok)} .say.no{color:var(--no)}
.done{text-align:center; padding:18px 6px}
.done .big{font-size:58px}
.done h2{font-size:26px; margin:6px 0}
.tick{font-size:15px; color:var(--soft)}
@media (max-width:560px){
  .opts{grid-template-columns:repeat(3,1fr)}
  .frame{grid-template-columns:repeat(5,34px); grid-template-rows:repeat(2,34px)}
  .dot{width:23px;height:23px}
}