*{box-sizing:border-box}:root{--ink:#243239;--muted:#768487;--cream:#fff9ef;--coral:#f47e68;--peach:#ffe6d7}html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:Kanit,system-ui,sans-serif}body{overflow-x:hidden}.simple-page{min-height:100vh;width:min(100%,760px);margin:auto;padding:32px 28px;position:relative;display:flex;flex-direction:column;align-items:center}.simple-page:before,.simple-page:after{content:"";position:fixed;border-radius:50%;z-index:-1}.simple-page:before{width:340px;height:340px;background:#ffe9bd;top:-130px;right:-100px}.simple-page:after{width:260px;height:260px;background:#d9f0df;bottom:-110px;left:-80px}.brand{display:flex;align-items:center;gap:9px;font:800 20px Nunito,sans-serif;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:var(--coral);color:white;font-size:21px;transform:rotate(-8deg)}.choice-panel{width:min(100%,520px);margin:auto 0;padding:34px;background:rgba(255,255,255,.88);border:1px solid #fff;border-radius:30px;box-shadow:0 22px 70px #a97b3c17}.eyebrow{color:var(--coral);font-size:14px;font-weight:600;margin-bottom:12px}.choice-panel h1{font-size:clamp(31px,6vw,52px);line-height:1.15;letter-spacing:-1.5px;margin:0 0 25px}.choice-panel h1 em{font-style:normal;color:var(--coral)}.age-choice,.category-choice{display:flex;align-items:center;width:100%;text-decoration:none;border:2px solid var(--coral);background:#fffaf7;padding:16px;border-radius:18px;color:var(--ink);text-align:left;cursor:pointer;font-family:inherit}.age-icon,.category-icon{display:grid;place-items:center;width:48px;height:48px;background:var(--peach);border-radius:15px;font-size:26px}.age-choice>span:nth-child(2),.category-choice>span:nth-child(2){display:grid;margin-left:14px}.age-choice strong,.category-choice strong{font-size:18px}.age-choice small,.category-choice small{font-size:12px;color:var(--muted)}.checkmark{margin-left:auto;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--coral);color:white;font-size:14px}.age-choice:not(.selected){opacity:.6;border-color:#d8d3ca}.age-choice:not(.selected) .checkmark{background:#c9c4b9}.primary-button{display:block;width:100%;margin-top:18px;border:0;border-radius:15px;padding:16px;background:var(--ink);color:#fff;text-align:center;text-decoration:none;font:600 16px Kanit;cursor:pointer}.primary-button span{float:right;font-size:22px;line-height:16px}.back-button{position:absolute;top:30px;left:28px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);text-decoration:none;font-size:24px;box-shadow:0 5px 18px #c8ab8330;z-index:2}.category-page .brand{margin-top:4px}.category-list{display:grid;gap:11px}.category-choice{border-width:1px;box-shadow:0 12px 30px #a97b3c12}.arrow{margin-left:auto;color:var(--coral);font-size:25px}.flashcard-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;position:relative}.flashcard-wrap{width:min(100%,560px);perspective:1300px;touch-action:none;position:relative}.flashcard-wrap .back-button.card-control{top:18px;left:18px;z-index:5}.flashcard-wrap .speaker-button.card-control{top:18px;right:18px;z-index:5}.flashcard{--drag-x:0px;--drag-rotate:0deg;height:min(78vh,650px);min-height:410px;position:relative;transform:translateX(var(--drag-x)) rotate(var(--drag-rotate));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .18s ease,box-shadow .3s ease;cursor:pointer;outline:none}.flashcard.dragging{transition:none;cursor:grabbing;box-shadow:0 35px 70px #8f633244}.flashcard.swipe-left{transition:transform .18s ease-in,opacity .18s ease-in;transform:translateX(-105%) rotate(-10deg);opacity:0}.flashcard.swipe-right{transition:transform .18s ease-in,opacity .18s ease-in;transform:translateX(105%) rotate(10deg);opacity:0}.flashcard.enter-from-left{animation:enterFromLeft .18s ease-out both}.flashcard.enter-from-right{animation:enterFromRight .18s ease-out both}@keyframes enterFromLeft{from{opacity:0;transform:translateX(-42%) rotate(-4deg)}to{opacity:1;transform:translateX(0) rotate(0)}}@keyframes enterFromRight{from{opacity:0;transform:translateX(42%) rotate(4deg)}to{opacity:1;transform:translateX(0) rotate(0)}}.flashcard.flipped{transform:translateX(var(--drag-x)) rotate(var(--drag-rotate)) rotateY(180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 24px 55px #8f633422}.card-front{display:grid;place-items:center;background:#e8e0d5}.card-front img{height:100%;width:100%;display:block;object-fit:cover;padding:0;background:#e8e0d5;opacity:1;transition:opacity .22s ease}.card-front img.variant-fade{opacity:.08}.card-back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;flex-direction:column;background:#ffe9cc;padding:30px}.speaker-button{position:absolute;top:18px;right:18px;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.8);font-size:22px;cursor:pointer;z-index:2;box-shadow:0 5px 15px #a8795830}.speaker-button.speaking{animation:speakerPulse .8s ease-in-out infinite}@keyframes speakerPulse{50%{transform:scale(1.12);background:#fff}}.back-decoration{position:absolute;top:22px;left:28px;color:#eea07a;font-size:30px}.back-animal{font-size:50px;margin:18px 0 7px}.thai-name{font-size:42px;font-weight:700;color:var(--coral);line-height:1.1}.english-name{font:800 26px Nunito;color:var(--ink);margin-top:2px}.animal-description{white-space:pre-line;text-align:center;color:#8d745f;font-size:14px;line-height:1.65;margin:18px 0 0;max-width:82%}@media(max-width:600px){.simple-page{padding:24px 20px}.choice-panel{padding:24px;border-radius:24px}.back-button{top:22px;left:20px}.flashcard-page{padding:20px}.flashcard{min-height:390px;height:75vh}.card-face{border-radius:24px}.thai-name{font-size:40px}.english-name{font-size:25px}}