*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,"Arial Hebrew",Arial,sans-serif;background:#f4efe6;color:#1d2733;font-size:20px;line-height:1.6}
main{max-width:640px;margin:0 auto;padding:16px 16px 120px}
b{color:#0f4c75}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
header{position:sticky;top:0;z-index:5;background:#1f5f8b;color:#fff;display:flex;align-items:center;gap:10px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}
header .ghost{background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:12px;min-height:44px;padding:0 12px;font-size:18px}
header .ghost:disabled{opacity:.35}
.prog{flex:1;min-width:0}
.partname{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{height:8px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden;margin-top:4px}
#fill{height:100%;width:0;background:#ffd166;transition:width .3s}
.card{background:#fff;border-radius:20px;box-shadow:0 2px 10px rgba(0,0,0,.07);padding:20px;margin-bottom:16px}
.hero{border-radius:18px;overflow:hidden;margin:-4px 0 16px;aspect-ratio:16/9;background:#ddd}
.hero img{width:100%;height:100%;object-fit:cover}
.photo{background:#222;border-radius:14px;overflow:hidden;margin-bottom:8px}
.photo img{margin:0 auto;max-height:60vh;width:auto}
.caption{font-size:16px;color:#555;margin:0 0 12px}
h1{font-size:30px;line-height:1.3;margin:4px 0 6px;color:#0f4c75}
h2{font-size:24px;line-height:1.35;margin:0 0 12px;color:#0f4c75}
.sub{font-size:20px;margin:0 0 4px}
.teacher{color:#a0522d;font-weight:700;margin:0 0 18px}
.read p{margin:0 0 14px}
.box{background:#fff6d6;border-right:6px solid #ffb703;border-radius:12px;padding:12px 16px;margin:0 0 16px}
.two{display:grid;gap:12px}
.pro,.con{border-radius:14px;padding:12px 14px}
.pro{background:#e6f6ec;border-right:6px solid #2a9d5c}
.con{background:#fdeaea;border-right:6px solid #d64545}
.pro h3,.con h3{margin:0 0 6px;font-size:20px}
.pro ul,.con ul{margin:0;padding-right:20px}
.pro li,.con li{margin-bottom:8px}
.qtag{display:inline-block;background:#e3eef7;color:#1f5f8b;font-size:15px;font-weight:700;border-radius:10px;padding:2px 10px;margin-bottom:8px}
.q{font-size:22px;font-weight:700;margin:0 0 16px;line-height:1.45}
.opts{display:grid;gap:12px}
.opt{width:100%;text-align:right;background:#fff;border:3px solid #cdd8e3;border-radius:16px;padding:14px 16px;min-height:60px;font-size:20px;color:#1d2733;line-height:1.45;transition:background .15s}
.opt:active{transform:scale(.99)}
.opt.sel{border-color:#1f5f8b;background:#e9f2fa}
.opt.ok{border-color:#2a9d5c;background:#dff5e8}
.opt.bad{border-color:#d64545;background:#fde3e3}
.opt:disabled{cursor:default}
.tf{grid-template-columns:1fr 1fr}
.tf .opt{text-align:center;font-weight:700}
.fb{scroll-margin-bottom:120px;scroll-margin-top:80px;border-radius:16px;padding:14px 16px;margin-top:16px;font-size:20px}
.fb.ok{background:#2a9d5c;color:#fff}
.fb.bad{background:#d64545;color:#fff}
.fb.info{background:#fff6d6;color:#1d2733;border-right:6px solid #ffb703}
.fb b{color:inherit;text-decoration:underline}
.fb .big{font-size:24px;font-weight:800;display:block}
.sentence{font-size:22px;line-height:2.3;margin:0 0 16px}
.blank{display:inline-block;min-width:110px;border-bottom:3px solid #1f5f8b;text-align:center;padding:0 8px;line-height:1.5;font-weight:700;color:#0f4c75;background:#eef4fa;border-radius:8px 8px 0 0;cursor:pointer}
.blank.ok{background:#dff5e8;border-color:#2a9d5c;color:#1c6b3f}
.blank.bad{background:#fde3e3;border-color:#d64545;color:#a12a2a}
.bank{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:#fff;border:3px solid #1f5f8b;color:#0f4c75;border-radius:14px;padding:8px 16px;min-height:52px;font-size:20px;font-weight:700}
.chip:disabled{opacity:.3}
.row{border:2px solid #e2e8ef;border-radius:16px;padding:12px;margin-bottom:12px}
.row.ok{border-color:#2a9d5c;background:#f0faf4}
.row.bad{border-color:#d64545;background:#fff2f2}
.row p{margin:0 0 10px;font-weight:600}
.yrs{display:flex;gap:8px}
.yrs .chip{flex:1;padding:6px 4px}
.yrs .chip.sel{background:#1f5f8b;color:#fff}
.yrs .chip.okc{background:#2a9d5c;border-color:#2a9d5c;color:#fff}
.sortItem{width:100%;text-align:right;background:#fff;border:3px dashed #9fb3c8;border-radius:14px;padding:12px 14px;margin-bottom:10px;font-size:19px;min-height:56px}
.sortItem.cur{border-style:solid;border-color:#1f5f8b;background:#e9f2fa}
.sortItem.ok{border-style:solid;border-color:#2a9d5c;background:#dff5e8}
.sortItem.bad{border-style:solid;border-color:#d64545;background:#fde3e3}
.sortItem .tag{display:inline-block;font-size:15px;font-weight:700;border-radius:8px;padding:0 8px;margin-inline-start:6px}
.cats{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#f4efe6;padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.cat{min-height:64px;border-radius:16px;border:0;font-size:21px;font-weight:800;color:#fff}
.cat.c0{background:#2a7fb8}.cat.c1{background:#8a4fbf}
.cat:disabled{opacity:.4}
.mini{font-size:16px;margin-top:6px}
.slots{display:grid;gap:8px;margin-bottom:14px}
.slot{display:flex;gap:10px;align-items:center;border:2px dashed #9fb3c8;border-radius:14px;min-height:54px;padding:6px 10px;background:#fff;font-size:18px}
.slot .n{flex:none;width:34px;height:34px;border-radius:50%;background:#1f5f8b;color:#fff;display:grid;place-items:center;font-weight:800}
.slot.filled{border-style:solid;border-color:#1f5f8b}
.slot.ok{border-color:#2a9d5c;background:#dff5e8}
.slot.bad{border-color:#d64545;background:#fde3e3}
.slot .n.ok{background:#2a9d5c}
.pool{display:grid;gap:8px}
.pool .opt{min-height:52px;padding:10px 14px;font-size:18px}
textarea{width:100%;min-height:120px;font:inherit;font-size:20px;border:3px solid #cdd8e3;border-radius:16px;padding:12px;resize:vertical}
input[type=text]{width:100%;font:inherit;font-size:22px;border:3px solid #cdd8e3;border-radius:16px;padding:12px;min-height:56px}
label{display:block;font-weight:700;margin:8px 0 6px}
.nav{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(transparent,#f4efe6 30%);padding:18px 16px calc(14px + env(safe-area-inset-bottom));z-index:4}
.nav .in{max-width:640px;margin:0 auto;display:flex;gap:10px}
.btn{flex:1;min-height:60px;border:0;border-radius:18px;background:#1f5f8b;color:#fff;font-size:22px;font-weight:800;box-shadow:0 3px 0 #123c58}
.btn:disabled{background:#9fb3c8;box-shadow:none}
.btn.alt{background:#fff;color:#1f5f8b;border:3px solid #1f5f8b;box-shadow:none}
.btn.go{background:#2a9d5c;box-shadow:0 3px 0 #1c6b3f}
.startBtns{display:grid;gap:12px;margin-top:18px}
.small{font-size:15px;color:#666}
.end{text-align:center}
.score{font-size:56px;font-weight:900;color:#0f4c75;margin:6px 0}
.stars{font-size:40px;letter-spacing:4px}
.keys{text-align:right}
.keys li{margin-bottom:10px}
.show{background:#ffd166;border-radius:16px;padding:14px;font-size:24px;font-weight:800;margin-top:12px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:10;display:flex;align-items:center;justify-content:center;padding:12px}
.modal[hidden]{display:none}
.modalBox{width:100%;max-width:900px;color:#fff;text-align:center}
.modalBox video{width:100%;max-height:75vh;background:#000;border-radius:12px}
.modalBox .small{color:#ddd}
.close{background:#fff;color:#000;border:0;border-radius:12px;min-height:48px;padding:0 18px;font-size:20px;font-weight:700;margin-bottom:10px}
.resume{background:#e3eef7;border-radius:14px;padding:12px;margin-top:14px}
@media (min-width:700px){body{font-size:21px} .two{grid-template-columns:1fr 1fr}}