:root{--ink:#102a43;--muted:#61758a;--cream:#fff9ec;--paper:#fffdf8;--sun:#ffca3a;--coral:#ff6b5e;--mint:#48c9a4;--sky:#50a8e8;--violet:#7968e8;--line:#dfe7ec;--shadow:0 20px 55px rgba(16,42,67,.14)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--ink);font-family:"Noto Sans Thai",sans-serif;background:var(--cream);overflow-x:hidden}.ambient{position:fixed;border-radius:50%;filter:blur(2px);opacity:.38;z-index:-1}.ambient-one{width:520px;height:520px;background:#ffe08a;top:-220px;right:-130px}.ambient-two{width:400px;height:400px;background:#b9eadc;bottom:-220px;left:-170px}.app-shell{width:min(1160px,calc(100% - 36px));margin:auto}.topbar{height:96px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:"Chakra Petch",sans-serif;font-size:.74rem;line-height:1.05;letter-spacing:.12em}.brand b{font-size:1.18rem;letter-spacing:.04em}.brand-mark{display:grid;place-items:center;width:50px;height:50px;border:2px solid var(--ink);border-radius:14px;background:var(--sun);font:700 1.15rem "Chakra Petch";transform:rotate(-4deg);box-shadow:4px 4px 0 var(--ink)}.stats{display:flex;align-items:center;gap:12px}.stats>span{background:rgba(255,255,255,.75);border:1px solid var(--line);padding:10px 14px;border-radius:99px}.icon-button,.back-button{border:0;background:transparent;color:var(--ink);cursor:pointer}.icon-button{width:42px;height:42px;border-radius:50%;background:var(--ink);color:white;font-size:1rem}.view{display:none}.view.active{display:block}.hero{min-height:500px;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:48px;padding:35px 0 55px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font:700 .76rem "Chakra Petch","Noto Sans Thai";color:#ce4f44}.hero h1{font-size:clamp(3rem,6vw,5.4rem);line-height:.96;margin:14px 0 25px;letter-spacing:-.045em}.hero h1 em{font-style:normal;color:var(--coral);position:relative}.lead{max-width:570px;font-size:1.12rem;line-height:1.9;color:var(--muted)}button{font:inherit}.primary-button,.secondary-button{border:2px solid var(--ink);border-radius:14px;padding:14px 22px;font-weight:700;cursor:pointer;transition:.2s transform,.2s box-shadow}.primary-button{background:var(--sun);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}.primary-button:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}.primary-button span{margin-left:25px}.secondary-button{background:white}.hero-visual{height:410px;position:relative;display:grid;place-items:center}.core{width:245px;height:245px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:white;border:12px solid white;box-shadow:0 0 0 3px var(--ink),var(--shadow);font:700 6.5rem "Chakra Petch";position:relative;z-index:2}.core sup{font-size:2rem;position:absolute;top:65px;right:60px;color:var(--sun)}.core i{position:absolute;font-style:normal;font-size:.92rem;bottom:55px;color:#a9d7f5}.orbit{position:absolute;border:2px dashed rgba(16,42,67,.28);border-radius:50%}.orbit-one{width:340px;height:340px;animation:spin 24s linear infinite}.orbit-two{width:405px;height:245px;transform:rotate(25deg)}@keyframes spin{to{transform:rotate(360deg)}}.float-card{position:absolute;padding:11px 16px;border:2px solid var(--ink);border-radius:10px;font:700 .9rem "Chakra Petch";box-shadow:4px 4px 0 var(--ink);z-index:3}.card-a{background:#b7eadc;left:5%;top:18%}.card-b{background:#acd9f5;right:0;top:23%;transform:rotate(5deg)}.card-c{background:#ffafa6;right:7%;bottom:18%;transform:rotate(-4deg)}.section-heading{display:flex;align-items:end;justify-content:space-between;margin:25px 0}.section-heading h2{font-size:2.3rem;margin:5px 0}.section-heading>p{color:var(--muted)}.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-bottom:70px}.level-card{min-height:235px;padding:24px;border:2px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:5px 5px 0 var(--ink);position:relative;overflow:hidden;cursor:pointer;transition:.2s}.level-card:hover:not(.locked){transform:translateY(-5px)}.level-card.locked{opacity:.48;cursor:not-allowed;box-shadow:none}.level-card.complete:after{content:"✓";position:absolute;right:20px;top:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);font-weight:800}.level-number{font:700 .8rem "Chakra Petch";letter-spacing:.12em}.level-icon{font-size:2.4rem;margin:25px 0 13px}.level-card h3{margin:0 0 8px;font-size:1.35rem}.level-card p{margin:0;color:var(--muted);line-height:1.55}.level-card:nth-child(2){background:#eef9f6}.level-card:nth-child(3){background:#fff2ef}.level-card:nth-child(4){background:#eef7fd}.level-card:nth-child(5){background:#f2f0ff}.level-card:nth-child(6){background:#fff5d6}.game-top{display:flex;align-items:center;justify-content:space-between;padding:24px 0 18px}.back-button{font-weight:700}.level-tag{font-size:.78rem;font-weight:700;letter-spacing:.08em;background:var(--ink);color:white;border-radius:99px;padding:8px 15px}.progress-track{height:9px;background:#e1e8e9;border-radius:99px;overflow:hidden}.progress-track i{display:block;height:100%;width:0;background:var(--mint);transition:width .35s}.challenge-card{max-width:820px;margin:52px auto 100px;padding:42px;background:var(--paper);border:2px solid var(--ink);border-radius:28px;box-shadow:9px 9px 0 var(--ink)}.challenge-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.86rem;font-weight:700}.challenge-card h2{font-size:clamp(1.45rem,3vw,2.1rem);margin:24px 0 18px}.equation-box{padding:27px;margin:15px 0 26px;background:#f3f6f7;border-radius:17px;text-align:center;font:700 clamp(1.5rem,4vw,2.4rem) "Chakra Petch"}.answers{display:grid;grid-template-columns:1fr 1fr;gap:13px}.answer{border:2px solid var(--line);background:white;border-radius:14px;padding:17px;text-align:left;font-weight:700;cursor:pointer;transition:.18s}.answer:hover:not(:disabled){border-color:var(--ink);transform:translateY(-2px)}.answer.correct{border-color:#209b78;background:#e9faf5}.answer.wrong{border-color:#df5348;background:#fff0ee}.feedback{margin-top:22px;padding:16px 18px;border-radius:13px;background:#edf8f5;color:#167a5e;font-weight:600}.feedback.error{background:#fff0ee;color:#b53d34}.next-button{display:block;margin:24px 0 0 auto}.result-card{max-width:620px;text-align:center;margin:70px auto 100px;background:white;border:2px solid var(--ink);border-radius:30px;padding:48px;box-shadow:10px 10px 0 var(--ink)}.result-burst{display:grid;place-items:center;width:105px;height:105px;margin:0 auto 20px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);font-size:3rem}.result-card h2{font-size:2.3rem;margin:10px}.result-card>p:not(.eyebrow){color:var(--muted)}.result-score{display:flex;flex-direction:column;margin:28px auto;width:145px;padding:18px;border-radius:18px;background:#f3f6f7}.result-score strong{font:700 2.2rem "Chakra Petch"}.result-actions{display:flex;justify-content:center;gap:12px}footer{text-align:center;padding:20px 15px 36px;color:var(--muted);font-size:.8rem}@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:45px}.hero-visual{height:330px}.core{width:205px;height:205px;font-size:5rem}.orbit-one{width:285px;height:285px}.orbit-two{width:320px}.level-grid{grid-template-columns:1fr 1fr}.challenge-card{padding:26px}.topbar{height:82px}}@media(max-width:540px){.app-shell{width:min(100% - 24px,1160px)}.hero h1{font-size:2.8rem}.hero-visual{transform:scale(.85);margin:-25px}.level-grid{grid-template-columns:1fr}.answers{grid-template-columns:1fr}.stats>span{padding:8px 10px}.result-card{padding:32px 20px}.result-actions{flex-direction:column}}