:root{--bg: #f6f7fc;--bg-tint-a: #fff0f7;--bg-tint-b: #eaf5ff;--surface: #ffffff;--surface-2: #fbfcff;--line: #e7eaf4;--line-strong: #d8dcec;--ink: #191d3d;--ink-soft: #6b7394;--ink-faint: #9aa1be;--pink: #ff3d9a;--pink-deep: #d81b76;--pink-soft: #ffe8f3;--sky: #1cb0f6;--sky-deep: #0b8ccb;--sky-soft: #e4f5fe;--gem: #e93b3b;--gem-deep: #c02222;--gem-soft: #ffe9e7;--grass: #58cc02;--grass-deep: #45a302;--grass-soft: #ecf9dd;--sun: #ffc800;--sun-deep: #e0a100;--sun-soft: #fff4d3;--grape: #a55bff;--grape-deep: #8033e0;--grape-soft: #f3ebff;--coral: #ff7a3d;--coral-deep: #e05a1c;--coral-soft: #ffeee4;--mint: #16c7b0;--mint-deep: #0da090;--mint-soft: #e2f8f5;--sky-2: var(--sky-soft);--sun-2: var(--sun-soft);--bubble: var(--pink);--bubble-2: var(--pink-soft);--mint-2: var(--mint-soft);--grape-2: var(--grape-soft);--cream: var(--surface-2);--radius: 24px;--radius-sm: 16px;--radius-xs: 12px;--shadow-xs: 0 1px 2px rgba(25, 29, 61, .06);--shadow-sm: 0 2px 6px rgba(25, 29, 61, .07), 0 1px 2px rgba(25, 29, 61, .05);--shadow: 0 12px 26px -10px rgba(25, 29, 61, .18), 0 2px 6px rgba(25, 29, 61, .06);--shadow-lg: 0 26px 50px -18px rgba(25, 29, 61, .28), 0 4px 12px rgba(25, 29, 61, .08);--font: "Nunito", "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Baloo 2", "Nunito", system-ui, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{font-family:var(--font);font-weight:600;color:var(--ink);background:var(--bg);background-image:radial-gradient(1100px 620px at 8% -10%,var(--bg-tint-a) 0%,transparent 62%),radial-gradient(900px 560px at 100% 0%,var(--bg-tint-b) 0%,transparent 58%);background-attachment:fixed;overflow-x:hidden;-webkit-font-smoothing:antialiased}.bg-bubbles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:0}.bg-bubbles span{position:absolute;border-radius:50%;opacity:.09;filter:blur(10px);animation:float 16s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(12deg)}}.app{position:relative;z-index:1;min-height:100%;max-width:900px;margin:0 auto;padding:18px 16px 44px}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.15;letter-spacing:-.015em}h1{font-size:clamp(28px,6vw,42px);font-weight:800}h2{font-size:clamp(21px,4.2vw,28px);font-weight:700}p{margin:0;line-height:1.5}.muted{color:var(--ink-soft);font-weight:600}.center{text-align:center}.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card-soft{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm);padding:18px}.hero{--hero-fg: #ffffff;--hero-sub: rgba(255, 255, 255, .9);position:relative;overflow:hidden;border-radius:var(--radius);padding:22px 24px;color:var(--hero-fg);background:linear-gradient(135deg,#e5217f,#a81264);box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;top:-80px;right:-40px;width:170px;height:170px;border-radius:50%;background:#ffffff1a}.hero>*{position:relative;z-index:1}.hero h1,.hero h2{color:var(--hero-fg)}.hero .hero-sub{margin-top:6px;font-size:16px;font-weight:700;color:var(--hero-sub)}.hero-sky{background:linear-gradient(135deg,#0a78ae,#6326c4)}.hero-sun{--hero-fg: #43290a;--hero-sub: rgba(67, 41, 10, .78);background:linear-gradient(135deg,var(--sun) 0%,var(--coral) 100%)}.btn{--btn-bg: var(--sun);--btn-edge: var(--sun-deep);--btn-fg: var(--ink);font-family:var(--font);font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--btn-fg);background:var(--btn-bg);border:none;border-radius:999px;padding:14px 26px;cursor:pointer;box-shadow:0 4px 0 var(--btn-edge),var(--shadow-sm);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px}.btn:hover:not(:disabled){filter:brightness(1.04)}.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--btn-edge)}.btn:disabled{background:#e6e9f4;color:#a7aec7;box-shadow:0 4px #d6dbeb;border-color:transparent;cursor:not-allowed}.btn:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.btn-lg{font-size:23px;padding:18px 34px;min-height:66px}.btn-block{width:100%}.btn-sky{--btn-bg: var(--sky);--btn-edge: var(--sky-deep);--btn-fg: #fff}.btn-mint{--btn-bg: var(--mint);--btn-edge: var(--mint-deep);--btn-fg: #fff}.btn-bubble{--btn-bg: var(--pink);--btn-edge: var(--pink-deep);--btn-fg: #fff}.btn-grape{--btn-bg: var(--grape);--btn-edge: var(--grape-deep);--btn-fg: #fff}.btn-grass{--btn-bg: var(--grass);--btn-edge: var(--grass-deep);--btn-fg: #fff}.btn-ghost{--btn-bg: var(--surface);--btn-edge: var(--line-strong);--btn-fg: var(--ink);border:1.5px solid var(--line)}.icon-btn{width:50px;height:50px;min-height:50px;padding:0;font-size:22px;border-radius:50%}.topbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.topbar .spacer{flex:1}.pill{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;font-weight:800;font-size:16px;color:var(--ink);box-shadow:var(--shadow-sm);white-space:nowrap}.pill-gem{color:var(--gem);border-color:var(--gem-soft);background:linear-gradient(180deg,#fff 0%,var(--gem-soft) 160%)}.pill-sun{color:var(--sun-deep);border-color:var(--sun-soft);background:linear-gradient(180deg,#fff 0%,var(--sun-soft) 160%)}.pill-coral{color:var(--coral-deep);border-color:var(--coral-soft);background:linear-gradient(180deg,#fff 0%,var(--coral-soft) 160%)}.pill-sky{color:var(--sky-deep);border-color:var(--sky-soft);background:linear-gradient(180deg,#fff 0%,var(--sky-soft) 160%)}.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--sky)}.chip-hot{background:var(--coral)}.chip-sale{background:var(--pink)}.chip-new{background:var(--sky)}.mascot{display:block;filter:drop-shadow(0 10px 14px rgba(25,29,61,.16))}.mascot.bounce{animation:bounce 1.6s ease-in-out infinite}.mascot.cheer{animation:cheer .7s ease-in-out 2}.mascot.think{animation:wobble 1s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes cheer{0%,to{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}@keyframes wobble{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}.speech{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:22px;padding:16px 18px;box-shadow:var(--shadow-sm);font-size:18px;font-weight:700;flex:1}.speech:before{content:"";position:absolute;left:-8px;top:24px;width:16px;height:16px;background:var(--surface);border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);border-bottom-left-radius:4px;transform:rotate(45deg)}.tutor-row{display:flex;align-items:flex-start;gap:12px}.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}@media (max-width: 560px){.grid-3{grid-template-columns:repeat(2,1fr)}}.tile{position:relative;overflow:hidden;border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 16px;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;text-align:center;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;font-family:var(--font);font-weight:700;color:var(--ink)}.tile:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent, transparent)}.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-strong)}.tile:active{transform:translateY(1px);box-shadow:var(--shadow-xs)}.tile:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.tile-row{text-align:left}.tile .tile-emoji{font-size:44px;display:block;line-height:1.15}.tile .tile-title{font-family:var(--font-display);font-weight:800;font-size:20px;margin-top:6px;color:color-mix(in srgb,var(--accent, #191d3d) 65%,#191d3d)}.tile .tile-sub{font-size:14.5px;font-weight:600;color:var(--ink-soft)}.tile.locked{filter:grayscale(.7) opacity(.55);cursor:not-allowed}.tile.selected{border-color:var(--accent, var(--pink));background:var(--accent-soft, var(--pink-soft));box-shadow:var(--shadow)}.icon-tile{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:15px;font-size:27px;background:var(--accent-soft, var(--sky-soft));flex:none}.word-card{background:linear-gradient(180deg,#fff 0%,var(--surface-2) 100%);border:1.5px solid var(--line);border-radius:28px;box-shadow:var(--shadow);padding:26px 20px;text-align:center;animation:pop-in .35s cubic-bezier(.34,1.56,.64,1)}.word-emoji{font-size:clamp(70px,20vw,110px);line-height:1}.word-native{font-family:var(--font-display);font-size:clamp(34px,8vw,52px);font-weight:800;margin-top:6px;word-break:break-word}.word-roman{font-size:21px;font-weight:700;color:var(--ink-soft)}.word-meaning{font-size:17px;font-weight:700;color:var(--ink-soft)}[dir=rtl]{direction:rtl}.answers{display:grid;gap:12px;margin-top:18px}.answer{font-family:var(--font);font-size:22px;font-weight:800;padding:18px;border-radius:var(--radius-sm);border:2px solid var(--line-strong);background:var(--surface);box-shadow:0 3px #cdd3e6,var(--shadow-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;min-height:74px;transition:transform .1s ease,border-color .12s ease,background .12s ease;color:var(--ink)}.answer:hover:not(:disabled){border-color:var(--sky);background:var(--sky-soft)}.answer:active:not(:disabled){transform:translateY(3px);box-shadow:0 0 #cdd3e6}.answer:focus-visible{outline:3px solid var(--sky);outline-offset:3px}.answer.correct{background:var(--grass-soft);border-color:var(--grass);color:var(--grass-deep);box-shadow:0 3px 0 var(--grass);animation:pop .35s ease}.answer.wrong{background:var(--gem-soft);border-color:var(--gem);color:var(--gem-deep);box-shadow:0 3px 0 var(--gem);animation:shake .4s ease}.answer:disabled{cursor:default}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.06)}to{transform:scale(1)}}@keyframes pop-in{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.progress-track{height:16px;background:#e9ecf6;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px #191d3d14}.progress-fill{position:relative;height:100%;background:linear-gradient(90deg,var(--pink) 0%,var(--grape) 100%);border-radius:999px;transition:width .4s cubic-bezier(.34,1.4,.64,1)}.progress-fill:after{content:"";position:absolute;inset:3px 8px auto 8px;height:3px;border-radius:999px;background:#ffffff73}.progress-sky .progress-fill{background:linear-gradient(90deg,var(--sky) 0%,var(--mint) 100%)}.progress-grass .progress-fill{background:linear-gradient(90deg,var(--grass) 0%,var(--sun) 100%)}.stars{display:flex;gap:8px;justify-content:center;font-size:42px}.stars .star{filter:grayscale(1) opacity(.28);transform:scale(.85);transition:all .25s ease}.stars .star.on{filter:drop-shadow(0 4px 8px rgba(255,200,0,.45));transform:scale(1);animation:star-pop .45s cubic-bezier(.34,1.56,.64,1)}@keyframes star-pop{0%{transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.25) rotate(10deg)}to{transform:scale(1) rotate(0)}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;overflow:hidden}.confetti i{position:absolute;top:-20px;width:11px;height:16px;border-radius:3px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}.mic-btn{width:128px;height:128px;border-radius:50%;border:none;background:linear-gradient(180deg,var(--pink) 0%,var(--pink-deep) 100%);color:#fff;font-size:54px;cursor:pointer;box-shadow:0 6px 0 var(--pink-deep),var(--shadow);display:flex;align-items:center;justify-content:center;margin:0 auto;transition:transform .1s ease,box-shadow .1s ease}.mic-btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--pink-deep),var(--shadow-xs)}.mic-btn.recording{background:linear-gradient(180deg,var(--gem) 0%,var(--gem-deep) 100%);box-shadow:0 6px 0 var(--gem-deep),var(--shadow);animation:pulse 1.1s ease-in-out infinite}.mic-btn:disabled{filter:grayscale(.6) opacity(.55)}@keyframes pulse{0%,to{box-shadow:0 6px 0 var(--gem-deep),0 0 #e93b3b80}50%{box-shadow:0 6px 0 var(--gem-deep),0 0 0 24px #e93b3b00}}.canvas-wrap{position:relative;width:100%;aspect-ratio:1;max-width:380px;margin:0 auto;border:1.5px solid var(--line);border-radius:var(--radius);background:repeating-linear-gradient(45deg,#fff,#fff 12px,#f5f7ff 12px,#f5f7ff 24px);box-shadow:var(--shadow);overflow:hidden;touch-action:none}.canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.chat{display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow-y:auto;padding:4px}.bubble{max-width:82%;padding:12px 16px;border-radius:20px;font-size:17px;font-weight:700;border:1.5px solid var(--line);box-shadow:var(--shadow-sm);animation:pop-in .25s ease}.bubble.kiko{align-self:flex-start;background:var(--surface);border-bottom-left-radius:6px}.bubble.child{align-self:flex-end;background:linear-gradient(135deg,var(--sky) 0%,var(--sky-deep) 100%);border-color:transparent;color:#fff;border-bottom-right-radius:6px}.bubble .sub{font-size:14.5px;color:var(--ink-soft);margin-top:2px}.bubble.child .sub{color:#ffffffd9}.input{font-family:var(--font);font-size:20px;font-weight:700;padding:14px 18px;border:2px solid var(--line);border-radius:var(--radius-sm);width:100%;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs);transition:border-color .15s ease,box-shadow .15s ease}.input::placeholder{color:var(--ink-faint);font-weight:600}.input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 4px var(--sky-soft)}.badge-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(180deg,#fff 0%,var(--sun-soft) 100%);border:1.5px solid var(--sun);border-radius:18px;padding:10px 14px;font-weight:800;font-size:12.5px;color:var(--ink);box-shadow:var(--shadow-sm);min-width:88px}.badge-chip .b-emoji{font-size:30px}.row{display:flex;gap:12px;align-items:center}.row-wrap{flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:14px}.mt-2{margin-top:8px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.notice{background:var(--sky-soft);border:1.5px solid #bfe6fb;border-left:5px solid var(--sky);border-radius:var(--radius-sm);padding:13px 15px;font-weight:700;font-size:15.5px;color:var(--ink);box-shadow:var(--shadow-xs)}.notice-sun{background:var(--sun-soft);border-color:#ffe49b;border-left-color:var(--sun)}.notice-gem{background:var(--gem-soft);border-color:#ffcdc7;border-left-color:var(--gem)}.thinking-dots span{display:inline-block;color:var(--ink-faint);animation:blink 1.2s infinite;font-size:24px}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,to{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}.seg{display:flex;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px;box-shadow:var(--shadow-sm)}.seg-btn{flex:1;font-family:var(--font);font-weight:800;font-size:18px;color:var(--ink);background:transparent;border:none;border-radius:999px;padding:12px;cursor:pointer;min-height:48px}.seg-btn.on{background:var(--sun);box-shadow:0 3px #191d3d33}.chips-row{display:flex;gap:8px;flex-wrap:wrap}.filter-chip{font-family:var(--font);font-weight:800;font-size:15px;color:var(--ink);background:#fff;border:3px solid rgba(25,29,61,.12);border-radius:999px;padding:8px 14px;cursor:pointer;min-height:44px}.filter-chip.on{border-color:var(--ink);background:var(--sun-soft, #fff2cc);box-shadow:0 3px #191d3d26}.fact{background:#fff8e1;border:3px dashed var(--sun);border-radius:var(--radius-sm);padding:14px 16px;font-weight:700;font-size:16px;line-height:1.45;color:var(--ink)}.linklike{font:inherit;color:var(--grape, #7b61ff);font-weight:800;background:none;border:none;padding:0;cursor:pointer;text-decoration:underline}.screen-anim{animation:screen-in .28s cubic-bezier(.22,1,.36,1)}@keyframes screen-in{0%{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}