:root{--navy:#173b5d;--teal:#0b796d;--ink:#203448;--muted:#657487;--line:#d7e2eb;--bg:#f3f6f8;--ok:#0b6f46;--bad:#a62e3d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.55}main{max-width:1060px;margin:24px auto;padding:0 16px 52px}.hero{background:var(--navy);color:#fff;border-radius:18px;padding:28px 30px}h1{margin:0 0 8px;font-size:clamp(27px,5vw,42px)}.hero p{margin:4px 0;color:#e1edf6}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:20px}.stat{background:#244d72;border:1px solid #63819c;border-radius:10px;padding:11px}.stat b{display:block;font-size:26px}.sticky{position:sticky;top:0;z-index:8;background:rgba(243,246,248,.98);padding:8px 0}.progress,.panel,.section{background:#fff;border:1px solid var(--line);border-radius:13px}.progress{padding:9px 13px}progress{width:100%;height:8px;accent-color:var(--teal)}.panel{padding:18px;margin-top:14px}.student-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}.field label{font-weight:800;display:block;margin-bottom:5px}.field input{width:100%;font-size:16px;padding:10px;border:1px solid #b8c7d5;border-radius:8px}.section{margin-top:22px;padding:0 20px}.section h2{margin:0 -20px;padding:14px 20px;background:#edf4fa;border-radius:13px 13px 0 0;font-size:20px}.q{padding:18px 0;border-bottom:1px solid var(--line)}.q:last-child{border-bottom:0}.meta{font-size:11px;color:#61768b;font-weight:850;letter-spacing:.03em}.q h3{font-size:18px;white-space:pre-line;margin:7px 0 11px}.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice{border:1px solid #cdd9e4;border-radius:10px;padding:11px 12px;cursor:pointer;display:block;background:#fff;font-size:16px}.choice:hover{background:#f5f9fc}.feedback{margin-top:9px;padding:11px 13px;border-radius:8px;font-size:14px}.ok{background:#e8f7ef;color:#075e39}.bad{background:#fff0f2;color:#962735}.send-ok{background:#e8f7ef;color:#075e39;padding:10px 12px;border-radius:8px}.send-bad{background:#fff6e4;color:#7c5000;padding:10px 12px;border-radius:8px}button{border:0;border-radius:9px;padding:11px 17px;font-weight:800;cursor:pointer}.primary{background:var(--teal);color:#fff}.secondary{background:#e8eff6;color:#173b60}.hidden{display:none!important}.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.small{font-size:13px;color:var(--muted)}.picture-card{width:min(100%,430px);height:190px;margin:12px auto 16px;border:1px solid #d5e1eb;border-radius:18px;background:linear-gradient(145deg,#fff,#edf5f7);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 16px rgba(23,59,93,.08)}.emoji-visual{font-size:82px;line-height:1;text-align:center;filter:drop-shadow(0 3px 3px rgba(0,0,0,.08))}.context-group{display:grid;grid-template-columns:minmax(300px,43%) minmax(0,57%);gap:16px;height:min(670px,calc(100vh - 92px));min-height:480px;margin:16px 0 22px;align-items:stretch}.passage-pane,.question-pane{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}.passage-pane{background:#f7fafc;border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:10px;padding:0 16px 16px;box-shadow:0 4px 15px rgba(24,54,84,.08)}.passage-toolbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7fafc;border-bottom:1px solid var(--line);padding:10px 0 8px;margin-bottom:10px}.passage-label{font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--teal)}.passage-controls{display:flex;gap:5px}.passage-controls button{padding:5px 9px;border:1px solid #c8d5e1;background:#fff;color:var(--ink);border-radius:7px;font-size:13px}.passage-title{margin:2px 0 10px;font-size:20px}.passage-body{white-space:pre-line;font-size:18px;line-height:1.85}.question-pane{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 16px 12px}.questions-head{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--line);padding:10px 0 8px;font-size:12px;font-weight:900;letter-spacing:.08em;color:var(--teal)}
@media(max-width:800px){.context-group{grid-template-columns:1fr;grid-template-rows:minmax(190px,38vh) minmax(300px,52vh);height:calc(100vh - 72px);min-height:560px;gap:10px;margin:12px -4px 18px}.passage-body{font-size:17px;line-height:1.75}.picture-card{height:170px}.emoji-visual{font-size:72px}}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}.opts{grid-template-columns:1fr}.student-grid{grid-template-columns:1fr}.section{padding:0 13px}.section h2{margin:0 -13px;padding:13px}.hero{padding:22px 20px}.q h3{font-size:17px}}