:root{--navy:#081a33;--ink:#15283b;--muted:#526679;--green:#167846;--line:#d7e1e8;--paper:#f4f7fa}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.55 system-ui,-apple-system,Segoe UI,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:#315f85}button:focus-visible,a:focus-visible{outline:3px solid #237cc4;outline-offset:3px}[hidden]{display:none!important}.wrap{width:min(1060px,calc(100% - 32px));margin:auto}.top{background:var(--navy);border-bottom:4px solid var(--green)}.top .wrap{display:flex;justify-content:space-between;align-items:center;min-height:66px;gap:20px}.brand{font-weight:850;font-size:23px;color:white;text-decoration:none;letter-spacing:-1px}.brand span{color:#75d6a0}.back{color:#e9eff5;text-decoration:none;font-size:16px}main{padding:25px 0 36px}.eyebrow{color:var(--green);font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin:0}h1{font-size:clamp(29px,4vw,43px);letter-spacing:-.03em;line-height:1.14;margin:8px 0 10px}h2{font-size:27px;line-height:1.2;margin:0 0 15px}p{margin:0 0 16px}.intro{color:var(--muted);margin-bottom:16px}.tabs{display:flex;gap:8px;border-bottom:2px solid var(--line);margin-bottom:18px}.tab{border:0;background:transparent;font-weight:800;color:var(--muted);padding:12px 20px;border-bottom:4px solid transparent;margin-bottom:-2px;min-height:48px}.tab[aria-selected=true]{color:var(--green);border-color:var(--green)}.card{background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden}.note-top{display:flex;align-items:center;justify-content:space-between;padding:16px 22px 0;gap:10px;font-size:15px;color:var(--muted)}.note-content{display:grid;grid-template-columns:1fr 1.1fr;gap:26px;align-items:center;padding:22px}.note-copy b{color:var(--green)}.note-copy p{margin:0}.visual{margin:0;background:#f2f7fa;border-radius:12px;overflow:hidden}.visual img{width:100%;height:260px;object-fit:contain;display:block}.caption{color:var(--muted);font-size:15px;line-height:1.4;margin:10px 0 0}.visual-frame .caption{padding:0 5px}.controls{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:0 22px 20px}.btn{min-height:46px;padding:9px 17px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font-weight:750;text-decoration:none;text-align:center}.primary{background:var(--navy);color:white;border-color:var(--navy)}.btn:disabled{opacity:.42;cursor:default}.animation-controls{display:flex;gap:8px;margin-top:10px}.animation-controls button{font-size:15px;min-height:40px;padding:6px 12px}.next-lesson{display:flex;justify-content:flex-end;margin-top:18px}.question-top{display:flex;justify-content:space-between;color:var(--muted);font-size:15px;margin-bottom:10px}.practice-card{padding:24px;max-width:760px;margin:auto}.practice-card h2{font-size:25px}.question-image{width:100%;height:160px;object-fit:contain;background:#f2f7fa;border-radius:10px;margin:0 0 13px}.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.option{min-width:0;min-height:65px;padding:11px;border:2px solid #c9d8e3;border-radius:10px;background:white;color:var(--ink);font-size:18px;line-height:1.22;font-weight:700}.option:hover:not(:disabled){border-color:#356f9d;background:#f0f6fc}.option.correct{background:#eaf7ef;border-color:#167846;color:#12633e}.option.wrong{background:#fff2e5;border-color:#ad5b18;color:#82420e}.feedback{min-height:100px;font-size:17px;line-height:1.4;padding:14px 0 8px}.feedback b{color:var(--green)}.practice-next{width:100%}.results{text-align:center;padding:30px}.big-score{font-size:45px;font-weight:850;color:var(--green)}.results .btn{margin:6px}.support-note{font-size:15px;color:var(--muted);margin:14px 0 0}.resources{font-size:15px;color:var(--muted);margin-top:24px}.resources summary{cursor:pointer;font-weight:700}.resources p{margin:10px 0}.resources a{overflow-wrap:anywhere}footer{border-top:1px solid var(--line);padding:20px 0;font-size:14px;color:var(--muted)}.dialog{border:1px solid var(--line);border-radius:14px;max-width:900px;width:95vw;padding:18px}.dialog::backdrop{background:#081a3399}.dialog img{width:100%;max-height:70dvh;object-fit:contain}.enlarge{float:right;background:none;border:0;color:#315f85;font-size:14px;min-height:36px}.frame-number{font-size:14px;color:var(--green)}
@media(max-width:700px){body{font-size:17px}.top .wrap{min-height:54px}.brand{font-size:21px}.back{font-size:14px}.wrap{width:calc(100% - 24px)}main{padding:16px 0 22px}h1{font-size:29px}.intro{font-size:16px;line-height:1.4}.note-top{padding:12px 16px 0}.note-content{grid-template-columns:1fr;padding:16px;gap:13px}.note-content h2{font-size:24px;margin-bottom:10px}.visual img{height:clamp(130px,27dvh,215px)}.caption{font-size:14px}.controls{padding:0 16px 16px}.tabs{margin-bottom:12px}.tab{padding:9px 16px}.practice-card{padding:16px}.option{font-size:16px;min-height:57px}.practice-card h2{font-size:22px;margin-bottom:12px}.question-image{height:135px}.feedback{font-size:16px;min-height:90px}.next-lesson .btn{width:100%}body.practising .top,body.practising .lesson-heading,body.practising .intro,body.practising .resources,body.practising footer,body.practising .next-lesson{display:none}body.practising main{padding:6px 0 max(6px,env(safe-area-inset-bottom))}body.practising .tabs{margin-bottom:8px}body.practising .tab{min-height:42px;padding:6px 16px}body.practising .question-top{margin-bottom:8px}body.practising .practice-card{padding:12px}body.practising .question-image{height:clamp(80px,calc(100dvh - 450px),150px)}body.practising .feedback{min-height:88px;padding-top:10px}body.practising .support-note{display:none}}
@media(max-height:660px) and (max-width:700px){body.practising .option{font-size:15px;padding:8px;min-height:53px}body.practising .practice-card h2{font-size:20px}.question-image{margin-bottom:8px}body.practising .feedback{min-height:80px;font-size:15px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.top,.tabs,.controls,.next-lesson,.animation-controls,.enlarge,footer,#practice,.resources{display:none!important}.wrap{width:100%}.note-content{grid-template-columns:1fr 1fr}.card{border:0}body{background:white}}