@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");
:root{--ink:#243229;--leaf:#41664a;--leaf-dark:#294632;--cream:#f4efe4;--white:#fffdf8;--gold:#e5a93c;--coral:#d98565}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;color:var(--ink);background:radial-gradient(circle at 15% 12%,rgba(229,169,60,.15),transparent 24rem),radial-gradient(circle at 88% 78%,rgba(65,102,74,.12),transparent 25rem),var(--cream);font-family:"Manrope",system-ui,sans-serif;overflow-x:hidden}button,input{font:inherit}button{color:inherit}.is-hidden{display:none!important}
header{height:64px;padding:env(safe-area-inset-top) max(18px,calc((100vw - 900px)/2)) 0;display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:9px;font-weight:800}.brand-eyes{width:32px;height:32px;border-radius:50%;background:var(--leaf);display:flex;align-items:center;justify-content:center;gap:4px}.brand-eyes i{width:6px;height:6px;border-radius:50%;background:white}.sound-button{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.62);font-size:25px;cursor:pointer}
.kid-screen{width:min(620px,calc(100% - 28px));min-height:calc(100dvh - 64px);margin:0 auto;padding:12px 0 max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.owl-scene{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}.speech-bubble{width:min(480px,94%);min-height:88px;padding:22px 26px;border-radius:27px;background:var(--white);box-shadow:0 18px 55px rgba(47,63,48,.11);font-size:clamp(18px,4.6vw,25px);line-height:1.38;font-weight:800;text-align:center;position:relative;z-index:2}.speech-bubble:after{content:"";position:absolute;width:24px;height:24px;background:var(--white);left:calc(50% - 12px);bottom:-10px;transform:rotate(45deg);border-radius:0 0 7px 0}
.task-illustration{width:min(480px,94%);height:190px;margin:0;padding:10px;border-radius:24px;background:var(--white);box-shadow:0 18px 55px rgba(47,63,48,.12);overflow:hidden;position:relative;z-index:2}.task-illustration:after{content:"";position:absolute;width:22px;height:22px;background:var(--white);left:calc(50% - 11px);bottom:-9px;transform:rotate(45deg);border-radius:0 0 6px 0}.task-illustration img{display:block;width:100%;height:100%;object-fit:contain;border-radius:15px;background:#fff}
.explanation-visual{width:min(500px,96%);margin:0;padding:18px;border-radius:27px;background:var(--white);box-shadow:0 18px 55px rgba(47,63,48,.12);position:relative;z-index:2}.explanation-visual:after{content:"";position:absolute;width:24px;height:24px;background:var(--white);left:calc(50% - 12px);bottom:-10px;transform:rotate(45deg);border-radius:0 0 7px 0}.explanation-visual h2{margin:0 0 13px;font-size:20px;line-height:1.2;text-align:center}.visual-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:9px}.visual-group{min-width:0;padding:10px 7px 8px;border-radius:17px;background:#f5f0e5;text-align:center}.visual-group strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:13px;white-space:nowrap}.visual-objects{min-height:62px;margin-top:5px;display:flex;align-items:center;justify-content:center;gap:7px;line-height:1}.visual-symbol{font-size:42px}.visual-group b{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 8px;border-radius:19px;color:white;background:var(--leaf);font-size:20px}.explanation-visual p{margin:13px 0 0;color:var(--leaf-dark);font-size:16px;font-weight:800;text-align:center}
.owl{width:220px;height:245px;margin:25px auto 4px;position:relative;filter:drop-shadow(0 18px 18px rgba(39,58,42,.16))}.owl-body{position:absolute;left:28px;top:18px;width:164px;height:196px;border-radius:48% 48% 44% 44%;background:linear-gradient(145deg,#537a59,#355640);z-index:2}.ear{position:absolute;top:8px;width:68px;height:70px;background:#355640;transform:rotate(45deg);border-radius:14px 55px 20px 55px}.ear.left{left:34px}.ear.right{right:34px;transform:scaleX(-1) rotate(45deg)}.eye{position:absolute;top:45px;width:58px;height:58px;border-radius:50%;background:#f6efd9;display:grid;place-items:center;box-shadow:inset 0 0 0 7px rgba(229,169,60,.22)}.eye.left{left:20px}.eye.right{right:20px}.eye i{width:19px;height:23px;border-radius:50%;background:#1f3025;animation:blink 5s infinite}@keyframes blink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.08)}}.beak{position:absolute;left:70px;top:101px;width:25px;height:20px;background:var(--gold);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top}.is-talking .beak{animation:talk .32s ease-in-out infinite alternate}@keyframes talk{to{transform:scaleY(.55)}}.belly{position:absolute;left:40px;bottom:12px;width:84px;height:72px;border-radius:50% 50% 42% 42%;background:#87a27d;opacity:.65}.wing{position:absolute;top:105px;width:64px;height:99px;background:#294632;border-radius:70% 30% 70% 35%;z-index:1}.wing.left{left:5px;transform:rotate(16deg)}.wing.right{right:5px;transform:scaleX(-1) rotate(16deg)}.foot{position:absolute;bottom:20px;width:40px;height:14px;border-radius:50%;background:var(--gold);z-index:3}.foot.left{left:55px}.foot.right{right:55px}
.action-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}.summon-button{position:relative;min-width:min(390px,92%);min-height:76px;padding:0 28px;border:0;border-radius:25px;color:#fffdf8;background:linear-gradient(135deg,#e5a93c,#d97943);display:flex;align-items:center;justify-content:center;gap:14px;font-size:19px;font-weight:800;cursor:pointer;box-shadow:0 16px 34px rgba(169,99,37,.3),inset 0 1px rgba(255,255,255,.35);transition:transform .15s ease,box-shadow .15s ease;overflow:visible}.summon-button:before,.summon-button:after{content:"";position:absolute;inset:-7px;border:2px solid rgba(229,169,60,.35);border-radius:31px;animation:summon-ring 2s ease-out infinite;pointer-events:none}.summon-button:after{animation-delay:1s}.summon-button:hover{transform:translateY(-2px);box-shadow:0 19px 38px rgba(169,99,37,.34),inset 0 1px rgba(255,255,255,.35)}.summon-button:active{transform:scale(.97)}.summon-bell{display:inline-grid;place-items:center;font-size:30px;line-height:1;transform-origin:50% 10%;animation:summon-bell 1.8s ease-in-out infinite}@keyframes summon-bell{0%,68%,100%{transform:rotate(0)}74%{transform:rotate(15deg)}80%{transform:rotate(-13deg)}86%{transform:rotate(9deg)}92%{transform:rotate(-5deg)}}@keyframes summon-ring{0%,35%{opacity:0;transform:scale(.97)}55%{opacity:.7}100%{opacity:0;transform:scale(1.055)}}.camera-button{min-width:min(390px,92%);min-height:68px;border:0;border-radius:22px;color:white;background:var(--leaf);display:flex;align-items:center;justify-content:center;gap:13px;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 14px 30px rgba(48,83,57,.24);transition:transform .15s ease}.camera-button:active{transform:scale(.98)}.camera-button input{position:absolute;opacity:0;pointer-events:none}.camera-glyph{width:29px;height:23px;border:2px solid white;border-radius:7px;position:relative}.camera-glyph:before{content:"";position:absolute;width:10px;height:7px;top:-7px;left:4px;border:2px solid white;border-bottom:0;border-radius:4px 4px 0 0}.camera-glyph:after{content:"";position:absolute;width:8px;height:8px;border:2px solid white;border-radius:50%;inset:0;margin:auto}.mic-status{min-height:28px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--leaf);font-size:13px;font-weight:800}.mic-status-dot{width:9px;height:9px;border-radius:50%;background:#a0a79f;box-shadow:0 0 0 4px rgba(90,105,92,.1)}.mic-status.is-listening .mic-status-dot{background:#3f7553;animation:mic-status-pulse 1.25s ease-in-out infinite}.mic-status.is-speaking .mic-status-dot{background:var(--coral)}@keyframes mic-status-pulse{50%{box-shadow:0 0 0 8px rgba(63,117,83,.14)}}.quiet-button,.retake-button{border:0;background:transparent;color:var(--leaf);font-size:12px;font-weight:800;cursor:pointer;padding:8px 12px}.heard{margin:0;min-height:18px;color:#707a71;font-size:12px;text-align:center}
.photo-actions{width:100%;display:flex;flex-direction:column;align-items:center;gap:9px}.photo-actions input{position:absolute;opacity:0;pointer-events:none}.gallery-button{min-width:min(390px,92%);min-height:48px;border:2px solid rgba(65,102,74,.22);border-radius:18px;color:var(--leaf);background:rgba(255,253,248,.76);display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:800;cursor:pointer;transition:transform .15s ease,background .15s ease}.gallery-button:active{transform:scale(.98);background:#fffdf8}.gallery-glyph{display:inline-grid;place-items:center;width:25px;height:22px;border:2px solid currentColor;border-radius:5px;font-size:20px;line-height:1}
.text-fallback{width:min(390px,92%)}.text-fallback form{display:flex;gap:8px}.text-fallback input{min-width:0;flex:1;height:54px;padding:0 15px;border:2px solid rgba(65,102,74,.2);border-radius:17px;background:white;outline:none}.text-fallback button{width:54px;border:0;border-radius:17px;color:white;background:var(--leaf);font-size:20px}.photo-peek{position:absolute;top:8px;right:0;width:80px;transform:rotate(3deg);z-index:3}.photo-peek img{display:block;width:80px;height:64px;object-fit:cover;border:4px solid white;border-radius:12px;box-shadow:0 8px 20px rgba(40,50,42,.14)}.photo-peek span{display:block;margin-top:3px;text-align:center;font-size:9px;font-weight:800;color:var(--leaf)}
.thinking{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(244,239,228,.55);backdrop-filter:blur(2px)}.thinking i{width:11px;height:11px;border-radius:50%;background:var(--leaf);animation:bounce .7s infinite alternate}.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}@keyframes bounce{to{transform:translateY(-12px);opacity:.45}}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:20;max-width:calc(100% - 28px);padding:13px 18px;border-radius:14px;color:white;background:#803e35;font-size:13px;text-align:center}
@media(max-height:700px){.speech-bubble{min-height:70px;padding:16px 20px;font-size:18px}.task-illustration{height:145px}.explanation-visual{padding:12px}.explanation-visual h2{margin-bottom:8px;font-size:17px}.visual-group{padding:7px 5px}.visual-objects{min-height:32px;font-size:15px}.explanation-visual p{margin-top:8px;font-size:14px}.owl-stage{height:205px;transform:scale(.76);margin:-8px auto -24px}.camera-button,.mic-button{min-height:58px}}

/* Temporary supplied character art; no generated mascot is used. */
.owl-stage{--mouth-x:52%;--mouth-y:57%;width:250px;height:276px;margin:0 auto;position:relative;flex:0 0 auto}.owl-stage img.owl{position:absolute;left:0;top:22px;width:250px;height:250px;object-fit:contain;margin:0;filter:drop-shadow(0 16px 18px rgba(39,58,42,.13));transition:opacity .2s ease,transform .2s ease}.talking-mouth{position:absolute;left:var(--mouth-x);top:var(--mouth-y);width:12px;height:7px;z-index:6;opacity:0;transform:translateX(-50%) scaleY(.18);transform-origin:center top;border:2px solid #4b1608;border-radius:25% 25% 60% 60%;background:#842913;pointer-events:none}.owl-stage.is-speaking .talking-mouth{opacity:1;animation:mouth-talk .24s steps(2,end) infinite}.owl-stage.is-beak-covered .talking-mouth{opacity:0!important}.owl-stage[data-state="onboarding"],.owl-stage[data-state="shooting"]{--mouth-x:52%;--mouth-y:57%}.owl-stage[data-state="reading"]{--mouth-x:53.3%;--mouth-y:57%}.owl-stage[data-state="listening"]{--mouth-x:53.3%;--mouth-y:57.2%}.owl-stage[data-state="teaching"]{--mouth-x:39.2%;--mouth-y:57%}
.owl-eyelids,.reading-page{display:none;position:absolute;z-index:5;pointer-events:none}.owl-stage[data-state="idle"] .owl-eyelids,.owl-stage[data-state="reading"] .owl-eyelids{display:block;left:91px;top:117px;width:27px;height:12px;border-bottom:3px solid #4b1608;border-radius:0 0 50% 50%;background:#f9edc9;opacity:0;animation:reading-blink 4.2s linear infinite}.owl-stage[data-state="idle"] .owl-eyelids:after,.owl-stage[data-state="reading"] .owl-eyelids:after{content:"";position:absolute;left:55px;top:0;width:27px;height:12px;border-bottom:3px solid #4b1608;border-radius:0 0 50% 50%;background:#f9edc9}.owl-stage[data-state="reading"] .reading-page{display:block;left:117px;top:174px;width:35px;height:18px;border-top:2px solid #d59a55;border-radius:50% 50% 5px 5px;background:linear-gradient(145deg,#fff8dc 0 62%,#ecd49d 64% 100%);clip-path:polygon(0 15%,100% 0,82% 100%,12% 88%);opacity:0;transform-origin:left bottom;animation:reading-page-turn 4.2s ease-in-out infinite}
img.owl.is-changing{opacity:.45;transform:scale(.96)}

/* Живые состояния персонажа; отдельный лоадер не используется. */
img.owl[data-state="onboarding"]{animation:none}
img.owl[data-state="shooting"]{animation:none}
img.owl[data-state="reading"]{animation:none}
img.owl[data-state="listening"]{animation:none}
img.owl[data-state="teaching"]{animation:none}
.shutter-flash{position:absolute;left:50%;bottom:116px;width:58px;height:58px;z-index:6;border-radius:50%;background:radial-gradient(circle,#fff 0 14%,#fff3aa 18% 35%,rgba(255,225,86,.42) 45%,transparent 72%);animation:camera-flash .65s ease-out both;pointer-events:none}
.board-stroke{display:none;position:absolute;left:61%;bottom:77px;width:48px;height:5px;z-index:6;border-radius:5px;background:#fff9df;transform:rotate(-8deg);transform-origin:left center}
img.owl[data-state="teaching"]~.board-stroke{display:none}
@keyframes mouth-talk{0%,100%{transform:translateX(-50%) scaleY(.18)}50%{transform:translateX(-50%) scaleY(1.15)}}
@keyframes reading-blink{0%,38%,45%,73%,80%,100%{opacity:0}40%,43%,75%,78%{opacity:1}}
@keyframes reading-page-turn{0%,52%,100%{opacity:0;transform:rotateY(0deg) translateX(0)}58%{opacity:.95}72%{opacity:.95;transform:rotateY(150deg) translateX(-18px)}78%{opacity:0;transform:rotateY(175deg) translateX(-22px)}}
@keyframes camera-flash{0%{opacity:0;transform:scale(.25)}30%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.2)}}
@keyframes chalk-write{0%,15%{transform:rotate(-8deg) scaleX(.05)}70%,100%{transform:rotate(-8deg) scaleX(1)}}
.explanation-visual .transfer-question{font-size:18px;line-height:1.45}
.visual-expression{padding:20px 12px;border-radius:18px;background:#f5f0e5;color:var(--leaf-dark);font-size:clamp(28px,7vw,42px);font-weight:900;letter-spacing:.03em;line-height:1.15;text-align:center}
.owl-stage[data-state="welcome"]{--mouth-x:52%;--mouth-y:57%}img.owl[data-state="welcome"]{animation:none}
@media(max-width:600px){.kid-screen{justify-content:flex-start;padding-top:42px}}
@media(prefers-reduced-motion:reduce){img.owl[data-state],.shutter-flash,.board-stroke,.talking-mouth,.owl-eyelids,.reading-page,.summon-button:before,.summon-button:after,.summon-bell{animation:none!important}.owl-eyelids,.reading-page{display:none!important}}