@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{--bg:#0d1814;--surface:#182821;--surface2:#21362b;--stroke:#3e5844;--green:#adf269;--green2:#72bc3c;--text:#f1f7ec;--muted:#b6c6b5;--shadow:#07100b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% -20%,#3d5e3e 0,transparent 55%),linear-gradient(150deg,#101b17,#09110e 85%);color:var(--text);font-family:'Outfit',system-ui,sans-serif;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.19;background-image:linear-gradient(#7d9c7455 1px,transparent 1px),linear-gradient(90deg,#7d9c7455 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden}.star{position:absolute;width:10px;height:10px;background:#85ad6d66;transform:rotate(45deg);animation:float 5s ease-in-out infinite}.s1{left:8%;top:22%}.s2{right:13%;top:15%;animation-delay:1s}.s3{left:19%;bottom:23%;animation-delay:2.5s}.s4{right:8%;bottom:25%;animation-delay:1.5s}.s5{right:27%;top:53%;animation-delay:3s}@keyframes float{50%{transform:translateY(-13px) rotate(45deg)}}
.app{position:relative;max-width:850px;padding:0 20px;margin:auto}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{color:#fff;text-decoration:none;display:flex;gap:9px;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-1px}.brand-icon{width:31px;height:31px;border:3px solid var(--green);display:grid;place-items:center;color:var(--green);transform:rotate(-10deg)}.brand-accent{color:var(--green)}.top-pill,.section-tag{font-size:11px;letter-spacing:2px;font-weight:800;color:#b4df8a;border:1px solid #547c4b;background:#213e29;padding:10px 13px;border-radius:5px}
.panel{position:relative;background:linear-gradient(153deg,#1f3429 0%,#13231b 82%);border:2px solid #4f7051;border-radius:13px;box-shadow:0 12px 0 #09120c,0 35px 70px #0008,inset 0 1px #78957244;padding:46px 65px;text-align:center;overflow:hidden}.panel:after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#355a37 0 26px,#2b4d31 26px 52px)}.hidden{display:none!important}
.hero-art{height:165px;position:relative;margin:0 auto 10px;max-width:300px}.pixel-sun{position:absolute;left:48px;top:18px;height:45px;width:45px;background:#f1d577;box-shadow:0 0 55px #e9d17b55;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.floating-block{position:absolute;left:50%;top:26px;transform:translateX(-50%) rotate(-10deg);height:115px;width:120px;background:#8c5830;border:6px solid #593a23;box-shadow:8px 11px 0 #08160d8c,0 25px 50px #0208;animation:bob 3s ease-in-out infinite}.floating-block:before{content:'';position:absolute;inset:-6px -6px 55% -6px;background:repeating-linear-gradient(90deg,#559b42 0 26px,#76b952 26px 47px,#42883c 47px 65px);border:6px solid #3b7437;border-bottom:8px solid #376c34}.floating-block:after{content:'';position:absolute;top:62px;left:21px;width:20px;height:20px;background:#664225;box-shadow:41px 17px #ac7741,-6px 30px #6a3e27,54px -19px #6d4227}@keyframes bob{50%{transform:translateX(-50%) translateY(-9px) rotate(-7deg)}}.hero-spark{position:absolute;font-size:29px;color:#f4db78}.spark-a{left:32px;top:111px}.spark-b{right:24px;top:43px;color:#91cf66}
.eyebrow{color:var(--green);font-size:12px;font-weight:800;letter-spacing:3px;margin-bottom:15px}h1,h2,p{margin-top:0}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(38px,7.6vw,69px);line-height:1.05;letter-spacing:-4px;margin:0 0 19px;font-weight:700}h1 span{display:block;color:var(--green);text-shadow:3px 4px 0 #355a29}.intro{font-size:17px;line-height:1.7;color:#c3d0c0;max-width:500px;margin:0 auto 30px}.stats{display:grid;grid-template-columns:repeat(3,1fr);max-width:470px;margin:0 auto 33px;padding:21px 5px;background:#0c1b13a6;border:1px solid #456545;border-radius:8px}.stats>div:not(:last-child){border-right:1px solid #456545}.stats strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:30px;color:#f8f9eb}.stats small{display:block;color:#a8c39f;font-size:10px;letter-spacing:1.4px;font-weight:800;margin-top:6px}.primary-btn{width:100%;max-width:410px;min-height:60px;border:2px solid #c7ff96;background:linear-gradient(#c0fc7e,#8fd44e);border-radius:7px;color:#173119;box-shadow:0 6px 0 #4c8a31,0 11px 19px #0003;font:800 15px 'Space Grotesk',sans-serif;letter-spacing:.5px;cursor:pointer;transition:transform .15s,box-shadow .15s;display:inline-flex;align-items:center;justify-content:center;gap:17px}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 8px 0 #4c8a31,0 16px 22px #0004}.primary-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #4c8a31}.primary-btn span{font-size:22px}.helper{color:#7e9d7d;font-size:12px;margin:22px 0 0}
.quiz-panel{padding-top:36px}.quiz-head,.scoreline{display:flex;align-items:center;justify-content:space-between;gap:12px}.counter{color:#d7e6d0;font-weight:800;font-size:12px;letter-spacing:1.5px}.progress-track{margin:22px 0 13px;height:13px;background:#0c1b13;border:2px solid #405943;border-radius:3px;overflow:hidden}.progress-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#98db5b 0 17px,#aae976 17px 34px);transition:width .35s}.scoreline{font-size:11px;font-weight:800;letter-spacing:1px;color:#a8bf9f}.scoreline strong{color:var(--green)}.question-symbol{display:grid;place-items:center;font-size:52px;width:106px;height:106px;margin:29px auto 22px;background:linear-gradient(130deg,#37553d,#24382c);border:2px solid #5b8056;border-radius:14px;box-shadow:0 6px 0 #0d1c13}.quiz-panel h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(21px,4vw,30px);line-height:1.35;letter-spacing:-1px;margin:0 auto 10px;max-width:610px}.question-hint{font-size:13px;color:#9bb098;margin:0 0 25px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left}.answer{width:100%;min-height:76px;display:flex;align-items:center;gap:14px;padding:14px 17px;border:2px solid #425f48;background:#21382a;border-radius:8px;color:#edf7e9;font:600 15px 'Outfit',sans-serif;cursor:pointer;transition:background .15s,border .15s,transform .15s;text-align:left}.answer:hover:not(:disabled){background:#2f5239;border-color:#9cc879;transform:translateY(-2px)}.answer:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}.answer:disabled{cursor:default}.letter{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:5px;background:#37533c;border:1px solid #668267;color:#c3dfa7;font:800 13px 'Space Grotesk',sans-serif}.answer-mark{margin-left:auto;font-size:22px;font-weight:900}.answer.correct{background:#2d6235;border-color:#abeb76}.answer.correct .letter{background:#91dc6c;color:#153a1b}.answer.incorrect{background:#5d302e;border-color:#e4887c}.answer.incorrect .letter{background:#ad5752;color:#fff}.answer.dim{opacity:.52}.feedback{min-height:0;margin-top:17px;text-align:left;display:flex;flex-direction:column;gap:5px;font-size:14px;line-height:1.5}.feedback:empty{display:none}.feedback-good,.feedback-bad{padding:13px 17px;border-radius:7px;background:#2b5131;border:1px solid #6f9f63}.feedback-bad{background:#4b322b;border-color:#a96b5f}.next-btn{margin-top:23px}
.result-icon{font-size:75px;margin:8px 0 22px}.result-panel h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,5.5vw,43px);letter-spacing:-1.6px;color:var(--green);margin:0 0 9px}.result-subtitle{color:#cbdbc6;font-size:17px}.result-score{display:flex;flex-direction:column;justify-content:center;gap:3px;max-width:290px;margin:26px auto 18px;padding:19px;border:1px solid #527a4c;border-radius:10px;background:#102119}.result-score strong{font:700 72px 'Space Grotesk',sans-serif;line-height:1;color:var(--green)}.result-score strong span{font-size:30px;color:#a8bfa2}.result-score small{letter-spacing:2px;font-weight:700;font-size:10px;color:#bed6b3}.result-meter{max-width:290px;margin:0 auto 20px;height:10px;background:#0a170d;border-radius:3px;overflow:hidden}.result-meter>div{height:100%;background:linear-gradient(90deg,#6eae3c,#baf977);transition:width .6s}.result-message{max-width:410px;margin:0 auto 27px;color:#b7cdb3;line-height:1.6}.secondary-btn{display:block;margin:23px auto 0;background:none;color:#bce99a;border:none;text-decoration:underline;text-underline-offset:4px;font:700 12px 'Outfit',sans-serif;letter-spacing:1px;cursor:pointer}.review{margin:24px auto 0;max-width:600px;text-align:left;border-top:1px solid #4a684b}.review-item{padding:15px 0;border-bottom:1px solid #3a543e}.review-item strong{font-size:14px}.review-item p{margin:5px 0 0;color:#aee586;font-size:13px}
footer{text-align:center;color:#6b8a70;font-size:10px;font-weight:800;letter-spacing:1.2px;padding:33px 10px 35px}footer span{color:#9ccf62;margin:0 7px}
@media(max-width:620px){.app{padding:0 12px}.topbar{height:75px}.brand{font-size:16px}.top-pill{letter-spacing:.5px;font-size:9px;padding:8px}.panel{padding:29px 19px 34px}.hero-art{height:140px;transform:scale(.86);transform-origin:top center;margin-bottom:-13px}.eyebrow{font-size:10px;letter-spacing:2px}h1{letter-spacing:-2.5px}.intro{font-size:15px}.stats{padding:17px 0}.stats strong{font-size:24px}.stats small{font-size:9px;letter-spacing:.5px}.answers{grid-template-columns:1fr;gap:9px}.answer{min-height:62px}.quiz-head{flex-wrap:wrap}.section-tag,.counter{font-size:10px;letter-spacing:1px}.question-symbol{margin-top:22px;width:85px;height:85px;font-size:44px}.quiz-panel h2{font-size:22px}.scoreline{font-size:9px;letter-spacing:0}footer{line-height:1.8;font-size:9px}.primary-btn{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}