*{box-sizing:border-box}body{margin:0;background:#fff7e8;color:#24324a;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.app{min-height:100vh;display:flex;justify-content:center;padding:18px}.phone{width:min(760px,100%);min-height:calc(100vh - 36px);background:#fffdf8;border-radius:30px;overflow:hidden;box-shadow:0 12px 40px rgba(36,50,74,.12);position:relative}.top{display:flex;justify-content:space-between;align-items:center;padding:20px 22px}.logo{font-weight:900;letter-spacing:.12em}.lang{border:0;background:#fff0c8;border-radius:999px;padding:10px 14px;font-weight:800;cursor:pointer}.hero{padding:8px 24px 22px;text-align:center}.hero h1{font-size:clamp(34px,8vw,58px);margin:8px 0 4px;line-height:1}.hero p{margin:0;color:#657087;font-size:17px}.buddy{margin:18px auto 8px;width:130px;height:130px;border-radius:42%;display:grid;place-items:center;background:#e7f4ff;font-size:74px}.section{padding:0 22px 24px}.section-title{font-size:20px;font-weight:900;margin:8px 0 12px}.letters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.letter{border:0;border-radius:22px;background:#f3f7ff;padding:16px 8px;cursor:pointer;font-size:28px;font-weight:900;min-height:92px;color:#2c5b9e}.letter small{display:block;font-size:12px;margin-top:5px;color:#68758b;font-weight:700}.lesson{display:none;padding:20px 22px 28px;text-align:center}.lesson.show{display:block}.back{border:0;background:transparent;font-weight:800;cursor:pointer;float:left;font-size:16px}.big-letter{font-size:clamp(110px,30vw,190px);font-weight:1000;line-height:.85;margin:30px 0 8px;color:#2c5b9e}.word{font-size:clamp(30px,8vw,48px);font-weight:950;margin:6px 0}.subword{color:#69758a;font-size:18px}.object{width:min(300px,75vw);height:220px;margin:18px auto;border-radius:34px;background:#f5f0ff;display:grid;place-items:center;font-size:120px;cursor:pointer;border:0}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}.speak{border:0;border-radius:18px;padding:15px 20px;background:#2c5b9e;color:white;font-size:18px;font-weight:900;cursor:pointer}.repeat{border:0;border-radius:18px;padding:15px 20px;background:#ffe7a8;color:#5a4210;font-size:18px;font-weight:900;cursor:pointer}.hint{margin-top:16px;color:#69758a;font-size:14px}.phrase{margin:20px auto 0;max-width:520px;padding:16px;border-radius:22px;background:#eef8ed;font-weight:800}.footer{text-align:center;color:#8992a1;font-size:12px;padding:12px 20px 24px}@media(max-width:480px){.phone{border-radius:0;min-height:100vh}.app{padding:0}.letters{grid-template-columns:repeat(3,1fr)}.letter{min-height:82px}}