.ripple-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:500;overflow:hidden}.ripple-burst{position:absolute;transform:translate(-50%,-50%)}.ripple-glow{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,#78aac380,#78aac300 70%);animation:ripple-glow-anim .5s ease-out forwards}@keyframes ripple-glow-anim{0%{transform:scale(.3);opacity:.8}to{transform:scale(2.2);opacity:0}}.ripple-ring{position:absolute;left:0;top:0;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:2px solid rgba(75,118,145,.5);animation:ripple-ring-anim .95s cubic-bezier(.2,.65,.3,1) forwards}@keyframes ripple-ring-anim{0%{transform:scale(.2);opacity:.6}to{transform:scale(6);opacity:0}}.ripple-droplet{position:absolute;left:0;top:0;width:var(--size, 7px);height:var(--size, 7px);margin:calc(var(--size, 7px) / -2) 0 0 calc(var(--size, 7px) / -2);border-radius:70% 70% 70% 0;background:var(--drop-color, #4a7a94);box-shadow:inset -1px -1px 2px #00000026,inset 1px 1px 1px #ffffff80;animation:ripple-droplet-anim .78s cubic-bezier(.25,.6,.4,1) forwards;animation-delay:var(--delay, 0ms);opacity:0}@keyframes ripple-droplet-anim{0%{transform:translate(0) rotate(var(--rot, 45deg)) scale(1);opacity:1}38%{transform:translate(calc(var(--dx) * .55),var(--peak)) rotate(var(--rot, 45deg)) scale(.95);opacity:1}to{transform:translate(var(--dx),var(--fall)) rotate(var(--rot, 45deg)) scale(.4);opacity:0}}@media (prefers-reduced-motion: reduce){.ripple-ring,.ripple-droplet,.ripple-glow{animation:none;display:none}}@font-face{font-family:Caveat;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/caveat-cyrillic-D5lnP6kL.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Caveat;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/caveat-latin-ext-Byk3UhVp.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Caveat;font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/caveat-latin-C1hSzPvX.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink: #1a6cd0;--paper: #f6f4ee;--line: rgba(26, 108, 208, .22);--accent: #4a7a94;--magic: #6b4fb5;--shadow-soft: 0 10px 26px rgba(26, 108, 208, .16);color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}body{background-color:var(--paper);background-image:url(/assets/paper-photo-BBO3Axka.jpg);background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;color:var(--ink);font-family:Caveat,Comic Sans MS,cursive,system-ui,sans-serif;font-weight:600;-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{min-height:100dvh;display:flex;flex-direction:column}button,textarea,input{font-family:inherit;color:inherit}.music-toggle{position:fixed;top:calc(env(safe-area-inset-top,0px) + .7rem);right:calc(env(safe-area-inset-right,0px) + .7rem);z-index:600;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(26,108,208,.45);background:transparent;color:#1a6cd0bf;font-size:.85rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;opacity:.85;transition:opacity .16s ease,color .16s ease,border-color .16s ease,transform .16s ease}.music-toggle:hover,.music-toggle:focus-visible{opacity:1;color:#1a6cd0e6}.music-toggle:active{transform:scale(.92)}.music-toggle.sketchy{position:fixed}.music-toggle__slash{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border-top:2.5px solid currentColor;transform:rotate(-45deg)}.app-shell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1rem,3vw,1.75rem);padding:clamp(1.25rem,5vw,3rem) clamp(1rem,6vw,2rem);width:100%;max-width:640px;margin:0 auto;text-align:center}.heading{font-size:clamp(1.5rem,1.2rem + 2vw,2.5rem);font-weight:700;margin:0;letter-spacing:.01em}.subtext{font-size:clamp(1rem,.9rem + .4vw,1.2rem);opacity:.65;margin:0}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:.7em 1.7em;font-family:inherit;font-size:clamp(1.05rem,1rem + .4vw,1.3rem);font-weight:700;transition:background .16s ease,color .16s ease,transform .16s ease;box-shadow:var(--shadow-soft)}.btn:hover,.btn:focus-visible{background:var(--ink);color:var(--paper)}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-block{display:block;width:100%}.card{background:var(--paper);border:2.5px solid var(--ink);border-radius:22px;padding:clamp(1rem,4vw,1.75rem);box-shadow:var(--shadow-soft);width:100%;font-size:clamp(1.1rem,1rem + .3vw,1.3rem);line-height:1.4}.field-wrap{width:100%;border:2.5px solid var(--ink);border-radius:16px;background:var(--paper);box-shadow:var(--shadow-soft)}textarea.field{display:block;width:100%;min-height:6.5em;resize:vertical;background:transparent;color:var(--ink);border:none;padding:.85em 1em;font-family:inherit;font-size:clamp(1.05rem,1rem + .2vw,1.2rem);outline:none}textarea.field::placeholder{font-family:inherit;opacity:.55}.field-wrap:focus-within{box-shadow:var(--shadow-soft),inset 0 0 0 1.5px var(--ink)}.topic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:.65rem;width:100%}.chat-input-wrap{width:100%}.chat-input-wrap textarea.field{min-height:3.2em}.lang-row{display:flex;gap:clamp(.75rem,4vw,1.5rem);justify-content:center;flex-wrap:wrap}.lang-circle{width:clamp(64px,18vw,92px);height:clamp(64px,18vw,92px);border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);font-weight:700;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:background .16s ease,color .16s ease,transform .16s ease}.lang-circle:hover,.lang-circle:focus-visible{background:var(--ink);color:var(--paper)}.lang-circle:active{transform:scale(.94)}.lang-circle--suggested{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:var(--shadow-soft),0 0 0 5px #1a6cd038;animation:suggested-glow 2.4s ease-in-out infinite}.lang-circle--suggested:hover,.lang-circle--suggested:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}@keyframes suggested-glow{0%,to{box-shadow:var(--shadow-soft),0 0 0 5px #1a6cd038}50%{box-shadow:var(--shadow-soft),0 0 0 9px #1a6cd014}}.character-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem}.character-img{width:clamp(120px,30vw,210px);height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.18))}.speech-bubble{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;padding:.7em 1.2em;font-size:clamp(1.15rem,1.05rem + .4vw,1.5rem);font-weight:700;max-width:32em}.speech-bubble__tail{position:absolute;top:-10px;left:50%;transform:translate(-50%) rotate(45deg);width:16px;height:16px;background:var(--paper);border-left:2.5px solid var(--ink);border-top:2.5px solid var(--ink);z-index:1}.footer{text-align:center;font-size:.95rem;font-weight:600;opacity:.55;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom,0px));letter-spacing:.02em}.sketchy{position:relative;isolation:isolate}.sketchy:before,.sketchy:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:inherit;border:2.5px solid var(--ink);background:transparent;pointer-events:none;z-index:-1}.sketchy:before{filter:url(#wobble-1);transform:rotate(-.7deg)}.sketchy:after{filter:url(#wobble-3);transform:rotate(.8deg);opacity:.75}.sketchy{border-color:transparent!important;background-clip:padding-box}@media (prefers-reduced-motion: reduce){.sketchy:before,.sketchy:after{filter:none}}@keyframes pop-in{0%{opacity:0;transform:scale(.25) translateY(46px)}55%{opacity:1;transform:scale(1.14) translateY(-10px)}75%{transform:scale(.93) translateY(2px)}90%{transform:scale(1.03) translateY(-1px)}to{opacity:1;transform:scale(1) translateY(0)}}.pop-in{animation:pop-in .72s cubic-bezier(.22,1,.36,1) both}.pop-in-delay-1{animation-delay:80ms}.pop-in-delay-2{animation-delay:.16s}.pop-in-delay-3{animation-delay:.24s}@keyframes rock-search{0%,to{transform:rotate(-6deg) translateY(0)}25%{transform:rotate(1deg) translateY(-6px)}50%{transform:rotate(6deg) translateY(0)}75%{transform:rotate(-1deg) translateY(-6px)}}.spin-character{animation:rock-search 1.15s ease-in-out infinite;transform-origin:50% 88%}@keyframes bob{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.02,1.035)}}.bob{animation:bob 3.2s ease-in-out infinite;transform-origin:50% 100%}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.breathe{display:inline-block;animation:breathe 4.4s ease-in-out .65s infinite}.breathe-block{display:block;width:100%;animation:breathe 4.4s ease-in-out .65s infinite}.breathe:hover,.breathe:focus-within,.breathe-block:hover,.breathe-block:focus-within{animation-play-state:paused}.dots:after{content:"...";display:inline-block;width:1.4em;text-align:left;animation:dots-anim 1.2s steps(1,end) infinite}@keyframes dots-anim{0%,to{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@keyframes dissolve-out{0%{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(.82) translateY(6px);filter:blur(3px)}}.dissolve-out{animation:dissolve-out .48s ease-in forwards;pointer-events:none}@keyframes dissolve-magic{0%{opacity:1;transform:scale(1);box-shadow:var(--shadow-soft),0 0 #6b4fb500}35%{transform:scale(1.08);box-shadow:var(--shadow-soft),0 0 24px 6px #6b4fb58c}to{opacity:0;transform:scale(.4);box-shadow:var(--shadow-soft),0 0 40px 14px #6b4fb500}}.dissolve-magic{animation:dissolve-magic .52s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none;color:var(--magic)!important}@keyframes scene-exit{0%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}30%{filter:blur(1px) brightness(1.25)}to{opacity:0;transform:scale(.9) translateY(-10px);filter:blur(10px) brightness(1.4)}}.scene-exit{animation:scene-exit .46s cubic-bezier(.4,0,.7,1) forwards;pointer-events:none}.sparkle-field{position:relative}.sparkle{position:absolute;color:var(--accent);font-size:clamp(1rem,3vw,1.6rem);animation:sparkle-twinkle 1.4s ease-in-out infinite}@keyframes sparkle-twinkle{0%,to{opacity:.35;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(12deg)}}@media (prefers-reduced-motion: reduce){.spin-character,.bob,.breathe,.breathe-block,.sparkle,.lang-circle--suggested{animation:none!important}}
