:root{
 color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
 color:#23372f;background:#f7f7f1;font-synthesis:none;text-rendering:optimizeLegibility;
 --green:#1d5947;--green-dark:#174536;--green-soft:#e8f1eb;--cream:#f7f7f1;--beige:#eee9dc;--ink:#23372f;--muted:#758279;--line:#e8e9df;
}
*{box-sizing:border-box;scroll-margin-top:84px}
body{margin:0;min-height:100vh;background:var(--cream);color:var(--ink);padding-bottom:88px}
button,input,select{font:inherit}
.topbar{height:72px;background:rgba(255,255,250,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 980px)/2));position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(145deg,#34765d,#174536);color:#fff;display:grid;place-items:center;font-weight:900;letter-spacing:-1px;box-shadow:0 7px 16px #17453630}
.brand strong,.brand small{display:block}.brand strong{font-size:15px}.brand small{font-size:11px;color:#859087;margin-top:3px}
.install-btn{border:1px solid #d8e6db;border-radius:12px;padding:10px 15px;background:var(--green-soft);color:var(--green-dark);font-weight:800}
.container{width:min(920px,calc(100% - 32px));margin:0 auto}
.hero{position:relative;overflow:hidden;margin:25px 0 32px;padding:clamp(27px,5vw,45px);border-radius:27px;background:linear-gradient(125deg,#174536 0%,#23664f 65%,#56866a 100%);color:#fff;box-shadow:0 17px 38px #17453620}
.hero:after{content:"";position:absolute;width:250px;height:250px;border:1px solid #ffffff20;border-radius:50%;right:-92px;top:-105px;box-shadow:0 0 0 27px #ffffff09,0 0 0 56px #ffffff06}
.eyebrow{text-transform:uppercase;letter-spacing:1.45px;font-size:10px;font-weight:850;color:#829184;margin:0 0 11px}
.hero .eyebrow{color:#c9ddce}
.hero h1{position:relative;z-index:1;font-size:clamp(34px,7vw,53px);line-height:1.07;letter-spacing:-2px;margin:0;max-width:650px}
.hero h1 span{color:#d7e8d6}
.hero>p:not(.eyebrow){position:relative;z-index:1;color:#e0ece2;max-width:520px;line-height:1.65;font-size:15px;margin:16px 0 0}
.stats{position:relative;z-index:1;display:flex;gap:10px;margin-top:27px;max-width:510px}
.stats div{flex:1;background:#ffffff13;border:1px solid #ffffff27;border-radius:15px;padding:12px 14px}
.stats strong,.stats span{display:block}.stats strong{font-size:23px;color:#fff}.stats span{font-size:10px;color:#e0ece2;margin-top:4px;font-weight:650}
.game-section{padding:2px 0 10px}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:16px;gap:12px}
.section-heading .eyebrow{color:#788d7e;margin-bottom:7px}
.section-heading h2{font-size:clamp(23px,4vw,28px);letter-spacing:-.8px;margin:0;color:#263c31}
.pill{font-size:11px;font-weight:750;color:#41634f;background:#e9eee5;padding:8px 12px;border-radius:30px;white-space:nowrap}
.game-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:15px}
.game-tab{min-height:88px;background:#fff;border:1px solid #e6e8df;color:#526358;padding:13px 10px;border-radius:17px;font-weight:800;font-size:13px;cursor:pointer;box-shadow:0 4px 14px #253b2e08;transition:transform .18s,border-color .18s,box-shadow .18s}
.game-tab span{display:block;font-size:23px;margin-bottom:7px}
.game-tab.active{background:linear-gradient(145deg,#2d7055,#194b3a);color:#fff;border-color:#28634b;box-shadow:0 9px 22px #1745362b;transform:translateY(-2px)}
.game-card{background:#fff;border:1px solid #e7e8df;border-radius:23px;padding:clamp(21px,5vw,35px);box-shadow:0 12px 34px #263b2e0a}
.game-meta{display:flex;justify-content:space-between;align-items:center;color:#7a897d;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.game-meta span:first-child{color:#286149;background:#edf4ee;padding:7px 10px;border-radius:30px}
.game-meta span:last-child{background:#f4f3ed;padding:7px 10px;border-radius:30px}
.difficulty-label{display:block;margin:22px 0 7px;color:#46594c;font-size:12px;font-weight:800}
.difficulty-select{width:100%;margin:0 0 7px;padding:13px 14px;border:1px solid #e0e5dc;border-radius:12px;background:#fbfcf9;color:#263b30;font:inherit;font-size:14px}
.difficulty-select:focus,.game-card input:focus{outline:3px solid #34765d20;border-color:#34765d}
.game-card h2{font-size:clamp(22px,4vw,27px);margin:22px 0 9px;letter-spacing:-.6px;color:#263b30}
.question{font-size:16px;line-height:1.7;color:#68786c;margin:0 0 23px}
.answer-label{display:block;font-size:12px;font-weight:850;color:#405347;margin-bottom:8px}
.game-card input{width:100%;border:1px solid #e0e5dc;border-radius:13px;padding:15px 16px;background:#fbfcf9;color:#23372f;font:inherit;font-size:16px;outline:none}
.game-card input::placeholder{color:#a0aaa0}
.game-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:15px}
.primary-btn,.secondary-btn{min-height:46px;border:0;border-radius:12px;padding:12px 18px;font-weight:850;cursor:pointer;transition:transform .15s}
.primary-btn{background:linear-gradient(135deg,#34765d,#1c5943);color:#fff;box-shadow:0 6px 15px #1d594733}
.secondary-btn{background:#edf1e9;color:#3f604b}
.primary-btn:active,.secondary-btn:active,.game-tab:active{transform:scale(.98)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed}
.feedback{min-height:20px;font-size:13px;font-weight:750;margin:11px 0 0}
.feedback.good{color:#16815b}.feedback.bad{color:#a96c2b}
.hint{background:#f8f2e5;border:1px solid #eee4ce;border-radius:12px;padding:12px 14px;color:#80683e;font-size:13px;line-height:1.5}
.letters{display:flex;gap:8px;flex-wrap:wrap;margin:-7px 0 22px}
.letters span{width:42px;height:46px;border-radius:12px;background:#edf3ec;border:1px solid #dfe9dd;color:#24533d;display:grid;place-items:center;font-size:19px;font-weight:900}
.bottom-note{display:flex;gap:13px;align-items:center;margin:22px 0 30px;padding:17px 18px;background:linear-gradient(110deg,#edf3e9,#f1ecdf);border:1px solid #e6e8db;border-radius:16px;color:#596d5d;font-size:13px;line-height:1.6}
.bottom-note p{margin:0}.bottom-note span{font-size:22px}
.bottom-nav{position:fixed;z-index:10;bottom:0;left:0;right:0;min-height:72px;padding:8px max(18px,calc((100% - 520px)/2)) calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);background:rgba(255,255,250,.96);backdrop-filter:blur(16px);border-top:1px solid #e5e8df;box-shadow:0 -7px 24px #263b2e0a}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:#879287;font-size:19px;border-radius:12px}
.nav-item small{font-size:10px;font-weight:750;letter-spacing:.1px}
.nav-item.active{color:#1d5947}.nav-item.active span{background:#e8f1e9;border-radius:12px;padding:1px 14px}
footer{text-align:center;padding:20px 15px 25px;color:#929c91;font-size:11px}footer span{padding:0 5px}
.game-tab:focus-visible,.primary-btn:focus-visible,.secondary-btn:focus-visible,.install-btn:focus-visible,.nav-item:focus-visible{outline:3px solid #9bbda5;outline-offset:3px}
@media(max-width:560px){
 .topbar{height:66px;padding:0 16px}.hero{margin:17px 0 26px;padding:26px 21px;border-radius:22px}.hero h1{letter-spacing:-1.5px}.hero>p:not(.eyebrow){font-size:14px}
 .stats{gap:7px;margin-top:22px}.stats div{padding:11px 9px;border-radius:13px}.stats strong{font-size:21px}.stats span{font-size:9px}
 .section-heading{align-items:center}.section-heading h2{font-size:23px}.pill{font-size:10px;padding:7px 9px}
 .game-tabs{gap:7px}.game-tab{min-height:82px;font-size:11px;padding:11px 4px;border-radius:14px}.game-tab span{font-size:21px;margin-bottom:5px}
 .game-card{padding:21px 18px;border-radius:20px}.game-card h2{font-size:22px}.question{font-size:15px}
 .game-actions button{flex:1;padding:12px 10px}.letters span{width:39px;height:43px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}