:root{--sky-top:#e6f1fb;--sky-bottom:#fbf3ea;--glow-sky:#bcd9f48c;--glow-mint:#bfeadb80;--glow-peach:#ffd9c48c;--ink:#1e2b3c;--ink-soft:#5a6b80;--ink-faint:#8e9bab;--blue:#3f6fa6;--blue-deep:#2f5a8c;--blue-soft:#dbe9f7;--coral:#ff8a6b;--mint:#8fd3c4;--cream:#fbf3e4;--glass:#fffcf7c7;--glass-border:#1e2b3c12;--shadow-soft:0 8px 24px #3f6fa61a;--shadow-lift:0 14px 34px #2f5a8c47;--radius-pill:999px;--radius-lg:22px;--radius-md:14px;--font:"Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--gutter:20px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);color:var(--ink);background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);-webkit-font-smoothing:antialiased;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit}.app{width:100%;height:100%;position:relative;overflow:hidden}.atmosphere{pointer-events:none;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.atmosphere:before,.atmosphere:after,.atmosphere .atmosphere__glow{content:"";filter:blur(60px);border-radius:50%;position:absolute}.atmosphere:before{background:radial-gradient(closest-side,#ffffffe6,#fff0);width:70vmax;height:70vmax;top:42%;left:50%;transform:translate(-50%,-50%)}.atmosphere:after{background:radial-gradient(closest-side, var(--glow-sky), #bcd9f400);width:48vmax;height:48vmax;top:-12vmax;right:-14vmax}.atmosphere .atmosphere__glow{background:radial-gradient(closest-side, var(--glow-peach), #ffd9c400);width:46vmax;height:46vmax;bottom:-18vmax;left:-16vmax}.atmosphere .atmosphere__glow--mint{background:radial-gradient(closest-side, var(--glow-mint), #bfeadb00);width:30vmax;height:30vmax;bottom:4vmax;left:auto;right:-6vmax}.scene{position:absolute;top:0;bottom:0;left:0;right:0}.scene canvas{touch-action:none;display:block}.hud{pointer-events:none;padding:calc(var(--gutter) + var(--safe-top)) var(--gutter) calc(var(--gutter) + var(--safe-bottom));flex-direction:column;justify-content:space-between;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.hud>*{pointer-events:auto}.topbar{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.brand{color:var(--ink);align-items:center;gap:12px;text-decoration:none;display:inline-flex}.brand__mark{background:linear-gradient(150deg, var(--blue) 0%, var(--blue-deep) 100%);border-radius:15px;flex:none;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 8px 20px #2f5a8c47,inset 0 1px #ffffff40}.brand__mark svg{width:26px;height:26px}.brand__text{flex-direction:column;line-height:1.1;display:flex}.brand__name{letter-spacing:-.02em;font-size:19px;font-weight:800}.brand__tag{color:var(--ink-soft);margin-top:2px;font-size:12.5px;font-weight:600}.view-switch{background:var(--glass);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft), inset 0 0 0 1px var(--glass-border);gap:2px;padding:4px;display:inline-flex}.view-switch__btn{border-radius:var(--radius-pill);min-width:38px;height:38px;color:var(--ink-soft);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0 12px;font-size:12.5px;font-weight:700;transition:background .18s,color .18s,box-shadow .18s;display:inline-flex}.view-switch__btn svg{flex:none;width:16px;height:16px}.view-switch__label{display:none}.view-switch__btn:hover{color:var(--ink)}.view-switch__btn[aria-pressed=true]{background:var(--blue);color:#fff;box-shadow:0 4px 12px #2f5a8c47}.bottombar{flex-direction:column;align-items:center;gap:14px;display:flex}.hint{color:var(--ink-soft);background:var(--glass);-webkit-backdrop-filter:blur(16px);border-radius:var(--radius-pill);box-shadow:var(--shadow-soft), inset 0 0 0 1px var(--glass-border);align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;transition:opacity .22s,transform .22s;display:inline-flex}.hint[data-visible=false]{opacity:0;pointer-events:none;transform:translateY(6px)}.hint__desktop{display:none}.hint strong{color:var(--ink);font-weight:800}.hint__dot{background:#fff3e2;border-radius:50%;flex:none;width:9px;height:9px;box-shadow:0 0 0 2px #1e2b3c2e}.hint__dot[data-side=b]{background:var(--blue);box-shadow:0 0 0 2px #3f6fa640}.hint[data-tone=check]{box-shadow:var(--shadow-soft), inset 0 0 0 2px #e8452a;color:#8a2413}.hint[data-tone=end]{background:var(--blue);color:#fff}.hint[data-tone=end] strong{color:#fff}.promo{background:var(--glass);-webkit-backdrop-filter:blur(18px);border-radius:var(--radius-lg);box-shadow:0 16px 40px #2f5a8c2e, inset 0 0 0 1px var(--glass-border);justify-items:center;gap:10px;max-width:100%;padding:14px 14px 10px;display:grid}.promo__title{font-family:var(--font);color:var(--ink);font-size:14px;font-weight:800}.promo__options{gap:8px;display:flex}.promo__btn{cursor:pointer;width:68px;height:76px;box-shadow:0 4px 12px #1f2a3714, inset 0 0 0 1px var(--glass-border);background:#fff;border:0;border-radius:16px;align-content:center;place-items:center;gap:2px;transition:transform .14s,box-shadow .14s;display:grid}.promo__btn:hover{box-shadow:0 8px 18px #2f5a8c29, inset 0 0 0 1.5px var(--blue);transform:translateY(-2px)}.promo__glyph{color:#c9ad8f;font-size:30px;line-height:1}.promo__btn[data-side=b] .promo__glyph{color:var(--blue)}.promo__name{color:var(--ink-soft);font-size:11.5px;font-weight:700}.promo__cancel{color:var(--ink-faint);cursor:pointer;background:0 0;border:0;padding:4px 8px;font-size:12.5px;font-weight:700}@media (max-width:380px){.promo__btn{width:60px;height:70px}}.cta{cursor:pointer;border-radius:var(--radius-pill);background:linear-gradient(135deg, #4a7db8 0%, var(--blue-deep) 100%);color:#fff;letter-spacing:.01em;height:56px;box-shadow:var(--shadow-lift), inset 0 1px 0 #ffffff38;border:0;align-items:center;gap:12px;padding:0 30px 0 32px;font-size:16.5px;font-weight:800;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;display:inline-flex}.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px #2f5a8c57,inset 0 1px #ffffff38}.cta:active{transform:translateY(0)scale(.98)}.cta__icon{background:#ffffff2e;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;display:grid}.cta__icon svg{width:15px;height:15px}@media (min-width:720px){:root{--gutter:28px}.brand__name{font-size:21px}.brand__mark{border-radius:16px;width:50px;height:50px}.view-switch__label,.hint__desktop{display:inline}.cta{height:60px;padding:0 32px 0 36px;font-size:17px}}.lesson{-webkit-backdrop-filter:blur(18px);border-radius:var(--radius-lg);width:min(100%,520px);box-shadow:0 16px 40px #2f5a8c29, inset 0 0 0 1px var(--glass-border);background:#fffdf9e6;gap:10px;padding:12px 16px 14px;display:grid}.lesson__head{justify-content:space-between;align-items:center;gap:10px;display:flex}.lesson__progress{gap:3px;display:inline-flex}.lesson__progress i{background:#1e2b3c1f;border-radius:2px;width:10px;height:4px}.lesson__progress i[data-now=true]{background:#ffcc1f;width:18px;box-shadow:0 0 0 1.5px #8a6a0059}.lesson__progress i[data-done=true]{background:#19b58a}.lesson__tools{gap:4px;display:inline-flex}.lesson__tool{color:var(--ink-faint);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:700}.lesson__tool:hover{color:var(--ink);background:#1e2b3c0f}.lesson__tool--big{color:var(--ink-soft);font-size:13.5px}.lesson__body{gap:3px;transition:opacity .26s,transform .26s;display:grid}.lesson__body[data-visible=false]{opacity:0;transform:translateY(4px)}.lesson__title{letter-spacing:-.01em;color:#16233a;font-size:17px;font-weight:900}.lesson__text{color:#1a2740;margin:0;font-size:15.5px;line-height:1.42}.lesson__turn{color:#6a5200;background:#fff3bf;border-radius:999px;align-items:center;gap:8px;padding:6px 12px 6px 10px;font-size:14.5px;font-weight:800;display:inline-flex;box-shadow:inset 0 0 0 1.5px #ffcc1f}.lesson__turnDot{background:#ffcc1f;border-radius:50%;width:10px;height:10px;animation:1.6s ease-in-out infinite lessonPulse;box-shadow:0 0 0 3px #ffcc1f4d}@keyframes lessonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}@media (prefers-reduced-motion:reduce){.lesson__turnDot{animation:none}}.lesson__feedback{border-radius:12px;align-items:center;gap:8px;padding:8px 12px;font-size:14px;font-weight:800;display:inline-flex}.lesson__fbIcon{border-radius:50%;flex:none;place-items:center;width:20px;height:20px;display:grid}.lesson__fbIcon svg{width:12px;height:12px}.lesson__feedback[data-kind=success]{color:#0f6b52;background:#d6f5ea;animation:.32s cubic-bezier(.2,.8,.2,1) fbPop;box-shadow:inset 0 0 0 1.5px #19b58a}.lesson__feedback[data-kind=success] .lesson__fbIcon{color:#fff;background:#19b58a}.lesson__feedback[data-kind=retry]{color:#8a4413;background:#fff0e3;animation:.36s fbShake;box-shadow:inset 0 0 0 1.5px #ff8a3d}.lesson__feedback[data-kind=retry] .lesson__fbIcon{color:#fff;background:#ff8a3d}@keyframes fbPop{0%{opacity:.6;transform:scale(.96)}60%{transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes fbShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}@media (prefers-reduced-motion:reduce){.lesson__feedback{animation:none}}.lesson__options{flex-wrap:wrap;gap:8px;display:flex}.lesson__option{cursor:pointer;box-shadow:inset 0 0 0 1px var(--glass-border);background:#fff;border:0;border-radius:999px;padding:9px 14px;font-size:14px;font-weight:700}.lesson__continue{cursor:pointer;background:linear-gradient(135deg, #4a7db8 0%, var(--blue-deep) 100%);color:#fff;border:0;border-radius:999px;justify-self:end;height:44px;padding:0 22px;font-size:15px;font-weight:800;transition:transform .16s;box-shadow:0 10px 24px #2f5a8c42}.lesson__continue:hover{transform:translateY(-1px)}.lesson__continue:disabled{opacity:.5;cursor:default;transform:none}.lesson__end{flex-direction:column;align-items:flex-end;gap:6px;display:flex}@media (max-width:720px){.lesson{padding:10px 14px 12px}.lesson__text{font-size:14.5px}}.picker{-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px #2f5a8c1f, inset 0 0 0 1px var(--glass-border);background:#fffdf9cc;border-radius:999px;gap:6px;padding:6px;display:inline-flex}.picker__pill{width:34px;height:34px;color:var(--ink-soft);cursor:pointer;background:#1e2b3c0f;border:0;border-radius:999px;place-items:center;font-size:13px;font-weight:800;transition:transform .14s,background .14s;display:inline-grid}.picker__pill:hover{background:#1e2b3c1a;transform:translateY(-1px)}.picker__pill svg{width:15px;height:15px}.picker__pill[data-done=true]{color:#fff;background:#19b58a}.picker__pill[data-next=true]{color:#16233a;background:#ffcc1f;box-shadow:0 0 0 2px #8a6a0059}@media (max-width:720px){.picker__pill{width:32px;height:32px}}.qa{left:12px;bottom:calc(12px + var(--safe-bottom));z-index:5;color:#f1ede6;background:#1e2b3ce6;border-radius:12px;gap:8px;width:230px;max-width:calc(100vw - 24px);padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;display:grid;position:absolute;box-shadow:0 10px 30px #00000040}.qa__title{letter-spacing:.12em;color:#ffb199;font-size:11px;font-weight:800}.qa__buttons{gap:4px;display:grid}.qa__btn{cursor:pointer;text-align:left;color:#f1ede6;font:inherit;background:#ffffff1a;border:0;border-radius:7px;padding:7px 9px;font-weight:700}.qa__btn:hover{background:#ffffff2e}.qa__btn[aria-pressed=true]{background:#5480b6}.qa__btn--reset{background:#ff8a6b40;margin-top:4px}.qa__hint{color:#cfe0f4;line-height:1.4}.qa__state{color:#9fb3c8;gap:3px;font-size:10.5px;display:grid}.qa__state code{word-break:break-all;color:#f1ede6}@media (max-width:720px){.qa{bottom:auto;top:calc(80px + var(--safe-top));width:200px;font-size:11px}}