@font-face{font-family:Garden;src:local('Segoe UI')}*{box-sizing:border-box}body{margin:0;background:#f8f7f0;color:#263e35;font-family:Garden,'Tahoma',sans-serif;font-size:19px;line-height:1.65}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:18px;padding:13px 23px;background:#356859;color:white;min-height:54px;transition:transform .15s,background .15s}button:hover{transform:translateY(-2px);background:#274f43}button:disabled{cursor:default;opacity:.5;transform:none}button:focus-visible,input:focus-visible,summary:focus-visible{outline:4px solid #c28b32;outline-offset:4px}header{max-width:1280px;margin:auto;padding:22px 38px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e4e7db}.brand{display:flex;align-items:center;gap:12px;color:#294f42;background:none;padding:0;text-align:right;font-size:23px;font-weight:700}.brand:hover{background:none}.brand small{display:block;font-size:13px;letter-spacing:2px;font-weight:400}.brand-icon{display:grid;place-items:center;background:#e4ecda;border-radius:20px;width:58px;height:58px;font-size:30px}.header-tools{display:flex;align-items:center;gap:14px}#offline{font-size:13px;color:#677565}.icon-button{background:#eceee4;color:#3f5b4c;padding:10px 16px}.stars{background:#fff0c4;color:#8a6023;border-radius:30px;padding:8px 20px;font-weight:700}main{max-width:1200px;margin:0 auto;padding:34px 38px 70px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4vw,48px);line-height:1.3;letter-spacing:-1px;margin-bottom:16px}h2{font-size:27px}h3{font-size:21px}small,.muted{color:#6c786e;font-size:15px}.eyebrow{color:#738566;font-size:14px;letter-spacing:1px;margin-bottom:14px}.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:center;background:#e8eedf;border:1px solid #dce4d3;border-radius:32px;padding:34px 42px;margin-bottom:30px;overflow:hidden}.hero p{max-width:590px;color:#5c705f;margin-bottom:22px}.pet-garden{position:relative;min-height:220px;display:grid;place-items:center;border-radius:48% 48% 36% 36%;background:#f5efd8}.pet{font-size:110px;filter:drop-shadow(0 10px 1px #d6dec6);animation:bob 4s ease-in-out infinite}.pet-caption{position:absolute;bottom:3px;font-size:14px}.leaf{position:absolute;color:#819f70;font-size:35px}.leaf.one{top:10px;right:20px;transform:rotate(30deg)}.leaf.two{left:15px;bottom:20px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.secondary{background:#fff;color:#356859;border:1px solid #d6dece}.secondary:hover{background:#edf2e5}.section-row{display:flex;justify-content:space-between;align-items:center;gap:15px;margin:22px 0 16px}.section-row h2{margin:0}.unit-badge{background:#e5ebdc;padding:6px 15px;border-radius:30px;color:#56704f;font-size:14px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.lesson-card{display:flex;flex-direction:column;align-items:flex-start;text-align:right;gap:10px;border:1px solid #e0e4d7;background:#fffefa;color:#2e483a;min-height:190px;padding:23px;position:relative;border-radius:23px}.lesson-card:hover{background:#f0f4e7}.lesson-card.locked{background:#f0f0e9;color:#808b7e;opacity:.75}.lesson-card.current{border:2px solid #65875d;background:#f3f7ea}.lesson-number{font-size:14px;color:#718166;display:flex;width:100%;justify-content:space-between}.lesson-card strong{font-size:21px;line-height:1.4}.lesson-card .pages{font-size:14px;color:#718166;margin-top:auto}.complete-mark{color:#bf913a}.footer-note{padding-top:28px;font-size:14px;color:#7b8576}.lesson-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.lesson-top h1{font-size:30px;margin:0}.back{background:#eceee4;color:#456043}.progress{height:9px;background:#e0e6d8;border-radius:10px;margin:14px 0 26px;overflow:hidden}.progress span{display:block;background:#9bb276;height:100%;width:0;transition:width .3s}.game-shell{background:#fffefa;border:1px solid #e2e5d8;border-radius:28px;min-height:490px;padding:30px;box-shadow:0 12px 40px #32492706}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.game-heading h2{margin:0}.instruction{font-size:17px;color:#75816c;margin:10px 0 22px}.sound{background:#edf1e4;color:#456043;font-size:19px}.word-card{max-width:390px;text-align:center;margin:0 auto;padding:15px}.word-picture{width:100%;height:230px;object-fit:contain;border-radius:24px;display:block}.word-fr{font-size:34px;font-weight:600;direction:ltr;color:#315747;margin:12px 0 0}.word-ar{color:#788369;font-size:22px}.word-card button{margin-top:10px}.row-actions{display:flex;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap}.counter{text-align:center;font-size:14px;color:#77836b;margin-top:10px}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:800px;margin:24px auto}.picture-option{background:#f5f5eb;color:#35513e;padding:15px;border:2px solid transparent;min-height:210px}.picture-option img{width:100%;height:160px;object-fit:contain}.picture-option:hover{background:#ecf1e1;border-color:#9db68b}.feedback{min-height:45px;text-align:center;color:#3c734e;font-weight:600;font-size:21px}.feedback.bad{color:#9e573b}.target-audio{text-align:center;margin:15px auto}.target-audio button{padding:17px 40px;background:#dce9d1;color:#365740;font-size:24px}.answer-slots{direction:ltr;display:flex;justify-content:center;flex-wrap:wrap;gap:8px;min-height:74px;align-items:center;background:#eff2e6;border-radius:18px;padding:12px;max-width:850px;margin:22px auto}.letter-tile{min-width:52px;padding:10px 15px;background:white;color:#365740;border:1px solid #d3ddc9;font-size:27px;box-shadow:0 4px 0 #d8dfce;border-radius:12px}.tile-pool{direction:ltr;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:26px auto;max-width:850px}.text-option{font-size:26px;background:#eff3e6;color:#34523d;border:1px solid #d4dfc9;min-width:110px}.text-option:hover{background:#e0ebd2}.grammar-prompt{font-size:28px;text-align:center;direction:ltr;margin:35px 0}.order-tile{font-size:21px;direction:ltr;background:#f2f3e9;color:#34523d;border:1px solid #d5dece;max-width:100%;text-align:left}.order-tile .tiny-sound{margin-left:10px}.trace-wrap{max-width:800px;margin:auto}.trace-board{width:100%;background:#fff;border:1px solid #dce4d5;border-radius:18px;touch-action:none;direction:ltr;display:block}.trace-info{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:8px}.book-model{height:66px;width:100px;object-fit:contain;border:1px solid #d9dfd3;border-radius:12px;background:white}.trace-notice{font-size:13px;color:#818873;text-align:center}.done-screen{text-align:center;padding:35px 0}.done-screen .big-star{font-size:85px;margin:0}.done-screen h2{font-size:35px}.done-screen .pet{font-size:90px;display:inline-block}dialog{border:1px solid #d7dece;border-radius:26px;background:#fffefa;color:#304d3b;max-width:540px;width:calc(100% - 28px);padding:26px;max-height:90vh}dialog::backdrop{background:#243b2e66;backdrop-filter:blur(3px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading h2{margin:0}.dialog-heading button{background:#e9eee0;color:#34563e;padding:8px 16px}.setting{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid #e8eadf}.setting input[type=range]{width:150px;accent-color:#65875d}.setting input[type=checkbox]{width:26px;height:26px;accent-color:#65875d}dialog p{font-size:15px}dialog hr{border:0;border-top:1px solid #e0e5d8;margin:25px 0}.quiet{background:#eee9df;color:#765c43;font-size:15px;margin:10px 0}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#365d47;color:white;padding:10px 22px;border-radius:16px;display:none;max-width:90vw;z-index:10;text-align:center;font-size:16px}.review-chip{display:inline-block;border-radius:20px;padding:4px 12px;color:#7a6d37;background:#f4edce;font-size:13px}.empty{padding:60px 20px;text-align:center}.subdued{font-size:14px;color:#89927e}.error-panel{background:#fff0e5;border-radius:18px;padding:24px}.privacy-strip{font-size:14px;color:#788370;margin-top:26px;text-align:center}#reset-confirm button{margin:5px;font-size:15px}.recording-error{color:#a35535}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}@keyframes bob{50%{transform:translateY(-8px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(max-width:800px){header{padding:16px 20px}.brand{font-size:18px}.brand-icon{width:44px;height:44px}.brand small{font-size:11px}#offline{max-width:105px;font-size:11px}.header-tools{gap:7px}.stars{padding:6px 12px}main{padding:24px 20px 50px}.hero{padding:25px;grid-template-columns:1.4fr 1fr;gap:12px}.pet-garden{min-height:190px}.pet{font-size:85px}.lesson-grid{grid-template-columns:repeat(2,1fr)}.game-shell{padding:22px}.options{gap:10px}.picture-option{padding:8px;min-height:150px}.picture-option img{height:120px}}@media(max-width:520px){.hero{grid-template-columns:1fr}.pet-garden{min-height:150px;order:-1;max-width:240px;width:100%;margin:auto}.pet{font-size:75px}.hero h1{font-size:32px}.hero p{font-size:16px}.lesson-grid{grid-template-columns:1fr 1fr;gap:10px}.lesson-card{padding:16px;min-height:175px}.lesson-card strong{font-size:18px}.brand small{display:none}.brand-icon{display:none}#offline{display:none}.lesson-top{align-items:flex-start}.lesson-top h1{font-size:24px}.game-heading h2{font-size:23px}.game-shell{padding:18px 12px}.options{grid-template-columns:repeat(3,1fr);gap:5px}.picture-option img{height:90px}.picture-option{min-height:115px}.letter-tile{min-width:43px;font-size:23px;padding:8px 11px}.tile-pool{gap:8px}.word-picture{height:200px}.trace-info{font-size:13px}.game-heading .sound{font-size:16px;padding:10px}.instruction{font-size:15px}.text-option{font-size:23px;min-width:85px}.header-tools button{min-height:44px;padding:6px 12px}.order-tile{font-size:17px}}
/* One persistent native player keeps direct play available on mobile Chrome. */
body{padding-bottom:100px}#voice-player{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:8;display:flex;gap:12px;align-items:center;justify-content:center;padding:10px 18px;background:#fffefa;border:1px solid #cbd8be;box-shadow:0 5px 25px #263e3522;border-radius:20px;max-width:calc(100% - 20px)}#voice-player[hidden]{display:none}#voice-status{font-size:14px;min-width:120px;text-align:center}#lesson-audio{width:290px;height:44px}#enable-voice{font-size:14px;padding:7px 13px;min-height:42px}#toast{bottom:110px}#test-voice{margin:10px 0}#settings-dialog #test-voice{width:100%}@media(max-width:600px){#voice-player{flex-wrap:wrap;width:350px;gap:3px;padding:8px 12px}#voice-status{width:100%;font-size:12px}#lesson-audio{width:100%;height:40px}#voice-player #enable-voice{position:absolute;left:15px;bottom:12px}#toast{bottom:120px}}