@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&display=swap");
:root{--bg1:#063f2d;--bg2:#08764e;--bg3:#b8f0cf;--ink:#103d2e;--muted:#6b8b7d;--mint:#dff8e9;--mint2:#c9f1da;--deep:#087848;--green:#10a968;--lime:#dff47e;--gold:#ffd65a;--pink:#ff8fba;--blue:#76cfff;--purple:#bca4ff;--orange:#ffad63;--line:rgba(255,255,255,.42);--shadow:0 18px 45px rgba(0,50,34,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Nunito,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink)}body{background:radial-gradient(circle at 10% 0%,#1bb77a 0,transparent 28%),linear-gradient(160deg,var(--bg1),#08764e 42%,#8fe3b3 100%);padding-bottom:66px}button{font:inherit;color:inherit}
.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid rgba(255,255,255,.22);background:rgba(4,63,44,.90);backdrop-filter:blur(14px);position:sticky;top:0;z-index:30}.brand{border:0;background:transparent;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;color:#fff}.brand-mark{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#dfffa9,#9debc0);box-shadow:0 8px 20px rgba(0,0,0,.16),inset 0 0 0 2px rgba(255,255,255,.55);font-size:26px}.brand b{display:block;font-size:18px;line-height:1}.brand small{display:block;color:#bfe8d1;font-size:12px;margin-top:5px;font-weight:800}.voice{border:1px solid rgba(255,255,255,.18);border-radius:18px;padding:11px 15px;background:rgba(215,255,230,.13);color:#fff;font-weight:900;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
main{min-height:calc(100vh - 140px)}.screen{display:none;max-width:1040px;margin:0 auto;padding:30px 18px}.screen.active{display:block}.hero{padding:28px 4px 25px;color:#fff}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.20em;color:#a7e8c5}.hero h1{font-size:clamp(40px,8vw,74px);line-height:.96;margin:10px 0 13px;letter-spacing:-.045em;text-shadow:0 6px 20px rgba(0,0,0,.12)}.hero p{margin:0;color:#d8f6e4;font-size:18px;font-weight:800}
.year-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.year-card,.topic-card{border:1px solid rgba(255,255,255,.42);background:linear-gradient(145deg,rgba(232,255,241,.96),rgba(193,242,211,.94));box-shadow:0 12px 28px rgba(0,55,35,.16);border-radius:25px;padding:18px;display:flex;align-items:center;text-align:left;cursor:pointer;transition:.18s transform,.18s box-shadow;min-height:98px}.year-card:hover,.topic-card:hover{transform:translateY(-3px);box-shadow:0 22px 40px rgba(0,55,35,.22)}.year-visual{width:66px;height:66px;border-radius:21px;display:grid;place-items:center;background:var(--year-bg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.62),0 9px 18px rgba(0,50,34,.12);font-size:31px;margin-right:14px;flex:none}.year-copy strong{display:block;font-size:20px}.year-copy small{display:block;color:#5b7f70;font-weight:900;margin-top:5px;font-size:12px}.chev{margin-left:auto;color:#4f826d;font-size:30px}
.section-head{display:grid;grid-template-columns:120px 1fr 120px;gap:12px;align-items:start;margin-bottom:20px}.text-btn,.close-btn{border:0;background:rgba(221,255,235,.12);border-radius:14px;cursor:pointer;font-weight:900;color:#e5fff0;padding:9px 12px}.section-head .eyebrow{color:#b9efd0}.section-head h2{font-size:36px;margin:6px 0 3px;letter-spacing:-.03em;color:#fff}.section-head p{margin:0;color:#d0f1dd;font-weight:800}.topic-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.topic-card{border-radius:20px;padding:15px;min-height:78px}.topic-icon{width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,#fff0a8,#c5ee75);display:grid;place-items:center;font-size:25px;margin-right:12px;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.65)}.topic-text strong{display:block;font-size:16px}.topic-text span{display:block;color:#47705f;font-weight:900;margin-top:3px;font-size:12px}.topic-text small{display:block;color:#769487;font-weight:800;margin-top:2px}
.quiz-shell{max-width:780px;margin:0 auto}.quiz-top{display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;gap:8px;margin-bottom:12px}.quiz-title{text-align:center;font-weight:900;color:#eafff1}.quiz-meta{display:flex;justify-content:flex-end;align-items:center;gap:7px;color:#d7f6e3;font-size:13px;font-weight:900}.speak-btn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(227,255,239,.15);color:#fff;cursor:pointer}
.question-card{background:linear-gradient(145deg,rgba(226,250,235,.98),rgba(194,239,210,.97));border:1px solid rgba(255,255,255,.5);border-radius:30px;padding:18px 20px;box-shadow:0 20px 50px rgba(0,53,35,.20)}.question-tag{display:inline-flex;background:linear-gradient(135deg,#efffb4,#d5f36e);border:1px solid #b5d968;border-radius:999px;padding:9px 14px;font-weight:900;font-size:12px;color:#416b2f}.visual-wrap{margin:12px 0 3px}.visual-wrap.empty{display:none}.visual-art{position:relative;min-height:210px;border-radius:24px;background:linear-gradient(145deg,#c9f4dc,#a9e9c6);border:1px solid rgba(62,160,108,.20);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}.visual-art:before,.visual-art:after{content:"";position:absolute;border:2px solid rgba(51,155,103,.18);border-radius:50%;pointer-events:none}.visual-art:before{width:185px;height:185px}.visual-art:after{width:315px;height:315px}.visual-items{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(85px,1fr));width:min(100%,650px);gap:13px;padding:20px}.visual-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;animation:pop .3s ease both}.visual-icon{width:92px;height:82px;border-radius:23px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#eefdf4);box-shadow:0 10px 20px rgba(0,70,45,.13),inset 0 0 0 2px rgba(255,255,255,.75);overflow:hidden}.visual-icon svg{width:82px;height:72px;display:block}.visual-label{font-size:11px;font-weight:900;color:#35684f;text-align:center;line-height:1.15;max-width:110px}.question-label{margin-top:8px;text-align:center;color:#719485;font-size:11px;letter-spacing:.18em;font-weight:900}.question-card h2{text-align:center;font-size:25px;line-height:1.2;margin:10px 10px 4px;letter-spacing:-.02em}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}.answer{min-height:76px;border:1px solid rgba(255,255,255,.60);background:linear-gradient(145deg,rgba(230,251,239,.98),rgba(193,239,210,.96));border-radius:19px;display:flex;align-items:center;gap:12px;text-align:left;padding:10px 15px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(0,70,45,.13);transition:.15s}.answer:hover{transform:translateY(-2px);border-color:#71c995}.answer:disabled{cursor:default}.answer.wrong{border-color:#ef8ba5;background:#ffe8ee;animation:shake .22s}.answer.correct{border-color:#5edb93;background:#d9f8e6}.letter{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#c7f0d9;font-weight:900;flex:none}.answer:nth-child(2) .letter{background:#c9e9ff}.answer:nth-child(3) .letter{background:#f0f7a9}.answer:nth-child(4) .letter{background:#ffd6e8}.feedback{min-height:48px;margin:11px 0 0;border-radius:17px;display:grid;place-items:center;text-align:center;font-weight:900;font-size:14px;opacity:0;transition:.2s}.feedback.ok,.feedback.bad{opacity:1}.feedback.ok{background:#d6f7e2;color:#087848}.feedback.bad{background:#ffe7ed;color:#b43c59}.next-btn{width:100%;min-height:58px;border:0;border-radius:18px;margin-top:10px;background:linear-gradient(90deg,#0db16c,#046c3c);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 16px 28px rgba(4,108,60,.24)}.next-btn.hidden{display:none}footer{position:fixed;z-index:19;bottom:0;left:0;right:0;height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:rgba(4,63,44,.92);border-top:1px solid rgba(255,255,255,.18);color:#c6ecd5;font-size:11px;font-weight:900;backdrop-filter:blur(10px)}
@keyframes pop{from{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:760px){.year-grid,.topic-grid{grid-template-columns:1fr}.screen{padding:24px 14px}.hero h1{font-size:45px}.section-head{grid-template-columns:1fr;gap:4px}.quiz-top{grid-template-columns:1fr 1.2fr 1fr}.answers{grid-template-columns:1fr}.question-card h2{font-size:22px}.visual-art{min-height:190px}.visual-items{grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}.visual-icon{width:96px;height:78px}.visual-icon svg{width:86px;height:70px}}
@media(max-width:420px){.topbar{padding:0 13px;height:76px}.voice{font-size:11px;padding:9px 10px}.brand-mark{width:43px;height:43px}.brand b{font-size:16px}.brand small{font-size:10px}.question-card{padding:15px}.visual-art{min-height:184px}.visual-items{gap:9px;padding:12px}.visual-icon{width:88px;height:72px}.visual-icon svg{width:79px;height:65px}.visual-label{font-size:10px}.question-card h2{font-size:21px}}