:root{--navy:#0E2A5C;--cyan:#5FE0E8;--gold:#C9A646;--teal:#1A9A9A;--ice:#EEF8F9;--ink:#1C1D22;--brick:#B5432A;--green:#2F7D4F}
*{box-sizing:border-box}body{margin:0;font:18px/1.5 Cochin,Georgia,serif;color:var(--ink);background:#fff}
header{background:var(--navy);color:#fff;padding:18px 16px;border-bottom:6px solid var(--gold)}
header h1{margin:0;font:700 26px Seravek,"Trebuchet MS",sans-serif;color:#fff}header p{margin:4px 0 0;color:var(--cyan);font-family:Seravek,sans-serif}
main{max-width:820px;margin:0 auto;padding:16px}footer{max-width:820px;margin:24px auto;padding:0 16px;color:#5B6B7F;font-size:14px}
h2{font-family:Seravek,sans-serif;color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
button{font:700 17px Seravek,"Trebuchet MS",sans-serif;border:2px solid var(--navy);background:#fff;color:var(--navy);border-radius:10px;padding:12px 14px;cursor:pointer;min-height:48px}
button.primary{background:var(--navy);color:#fff}button:focus-visible{outline:4px solid var(--gold)}
.card{background:var(--ice);border-left:6px solid var(--teal);padding:10px 14px;border-radius:8px;margin:10px 0}
.opts{display:grid;gap:10px;margin:14px 0}.opt{text-align:left;display:flex;gap:12px;align-items:center}
.opt b{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;align-items:center;justify-content:center;flex:none}
.opt.sel{background:var(--ice);border-color:var(--teal);box-shadow:inset 0 0 0 2px var(--teal)}
.opt.ok{background:#E8F3EC;border-color:var(--green)}.opt.bad{background:#FBECE8;border-color:var(--brick)}
.fig{display:block;margin:12px auto;max-width:100%;height:auto;max-height:340px;border:1px solid #B9D3D6;border-radius:8px;padding:6px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}.timer{font:700 22px Seravek,sans-serif;color:var(--navy);margin-left:auto}
.nav{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.nav button{min-height:40px;padding:6px 10px;font-size:15px}.nav .ans{background:var(--ice)}.nav .cur{background:var(--navy);color:#fff}
.stem{font-size:21px}.big .stem{font-size:26px}.tier{font:700 13px Seravek,sans-serif;color:#8A6A1C;letter-spacing:.08em}
.why{background:#FAF3DF;border-left:6px solid var(--gold);padding:10px 14px;border-radius:8px;margin:10px 0}