@import "https://fonts.googleapis.com/css2?family=Varela+Round&family=Heebo:wght@400;600;700;800&display=swap";
.sp-page{--sp-ink:#2d2a4a;--sp-ink-soft:#5c5680;--sp-violet:#7c3aed;--sp-violet-deep:#6d28d9;--sp-card:#fffdf9;--sp-option-bg:#fbf9ff;--sp-border:#e2d9fa;--sp-sky:#bfdcff;--sp-success:#15803d;--sp-success-bg:#d3f5dd;--sp-success-border:#4ade80;--sp-wrong:#b91c1c;--sp-wrong-bg:#ffdcd6;--sp-wrong-border:#f87171;--sp-sun:#facc15;--sp-sun-bg:#fff4c2;--sp-sun-ink:#92400e;--sp-clay:inset 2px 2px 6px #ffffffe6, inset -3px -3px 8px #5d4a9c14, 6px 8px 18px #5d4a9c29;--sp-clay-small:inset 1px 1px 4px #ffffffe6, inset -2px -2px 6px #5d4a9c14, 4px 5px 12px #5d4a9c24;--sp-bounce:cubic-bezier(.34, 1.56, .64, 1);min-height:100dvh;color:var(--sp-ink);text-align:center;direction:rtl;background:linear-gradient(165deg,#d4e9ff 0%,#ece3ff 48%,#ffeede 100%);flex-direction:column;justify-content:flex-start;align-items:center;gap:16px;padding:18px 14px 36px;font-family:Varela Round,Heebo,Assistant,Rubik,Arial Hebrew,sans-serif;display:flex;position:relative;overflow-x:hidden}.sp-page:before,.sp-page:after{content:"";pointer-events:none;z-index:0;border-radius:50%;position:fixed}.sp-page:before{background:radial-gradient(circle at 35% 35%,#fffc,#bfdcff59);width:220px;height:220px;top:-70px;left:-70px}.sp-page:after{background:radial-gradient(circle at 35% 35%,#ffffffb3,#fde0bf66);width:180px;height:180px;bottom:-60px;right:-50px}.sp-page>*{z-index:1;position:relative}.sp-topbar{align-items:center;gap:12px;width:100%;max-width:560px;display:flex}.sp-mute{border:3px solid var(--sp-border);background:var(--sp-card);width:52px;height:52px;color:var(--sp-violet);box-shadow:var(--sp-clay-small);cursor:pointer;transition:transform .2s var(--sp-bounce), box-shadow .2s ease-out;border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.sp-mute:hover{transform:translateY(-2px)scale(1.05)}.sp-mute:active{transform:scale(.94)}.sp-progress{direction:ltr;background:#ffffffa6;border-radius:999px;flex:1;height:18px;overflow:hidden;box-shadow:inset 2px 2px 5px #5d4a9c1f}.sp-progress-fill{height:100%;transition:width .5s var(--sp-bounce);background:linear-gradient(90deg,#34d399,#38bdf8,#a78bfa);border-radius:999px}.sp-score-chip{background:var(--sp-card);border:3px solid var(--sp-border);min-width:52px;height:52px;box-shadow:var(--sp-clay-small);border-radius:999px;flex:none;justify-content:center;align-items:center;gap:4px;padding:0 14px;font-size:19px;font-weight:700;display:flex}.sp-card{background:var(--sp-card);width:100%;max-width:560px;box-shadow:var(--sp-clay);border-radius:30px;padding:24px 18px 28px}.sp-counter{color:var(--sp-ink-soft);margin:0 0 6px;font-size:15px;font-weight:600}.sp-practice-tag{color:var(--sp-violet);border:2px solid var(--sp-border);background:#f1eaff;border-radius:999px;margin-inline-start:8px;padding:2px 12px;font-size:14px;font-weight:700;display:inline-block}.sp-panel-note{color:var(--sp-ink-soft);margin:12px 0 0;font-size:14px;font-weight:600;line-height:1.5}.sp-emoji{cursor:pointer;width:108px;height:108px;box-shadow:var(--sp-clay-small);animation:sp-bounce-in .5s var(--sp-bounce);transition:transform .2s var(--sp-bounce);background:linear-gradient(145deg,#e8f3ff,#f3ecff);border:none;border-radius:50%;justify-content:center;align-items:center;margin:6px auto 10px;font-family:inherit;font-size:58px;line-height:1;display:flex}.sp-emoji:hover{transform:scale(1.06)}.sp-emoji:active{transform:scale(.94)}.sp-emoji:focus-visible{outline:3px solid var(--sp-violet);outline-offset:3px}.sp-emoji-listen{color:var(--sp-violet);animation:sp-bounce-in .5s var(--sp-bounce), sp-listen-pulse 2s ease-in-out .6s infinite;background:linear-gradient(145deg,#ece3ff,#e0edff)}@keyframes sp-listen-pulse{0%,to{box-shadow:var(--sp-clay-small), 0 0 0 0 #7c3aed59}50%{box-shadow:var(--sp-clay-small), 0 0 0 12px #7c3aed00}}.sp-question-row{justify-content:center;align-items:center;gap:12px;margin:4px 0 20px;display:flex}.sp-question{color:var(--sp-violet);margin:0;font-size:26px;font-weight:800}.sp-speak{border:3px solid var(--sp-border);background:var(--sp-option-bg);width:44px;height:44px;color:var(--sp-violet);box-shadow:var(--sp-clay-small);cursor:pointer;transition:transform .2s var(--sp-bounce);border-radius:50%;justify-content:center;align-items:center;display:flex}.sp-speak:hover{transform:translateY(-2px)scale(1.05)}.sp-speak:active{transform:scale(.94)}.sp-options{grid-template-columns:1fr 1fr;gap:14px;display:grid}.sp-options.is-hidden{display:none}.sp-option{min-height:76px;color:var(--sp-ink);background:var(--sp-option-bg);border:3px solid var(--sp-border);box-shadow:var(--sp-clay-small);cursor:pointer;transition:transform .2s var(--sp-bounce), background .2s ease-out, border-color .2s ease-out, opacity .3s ease-out;border-radius:22px;padding:12px 8px;font-family:inherit;font-size:clamp(24px,7vw,32px);font-weight:700}.sp-option:hover:not(:disabled){border-color:var(--sp-sky);background:#f0f7ff;transform:translateY(-4px)scale(1.02)}.sp-option:active:not(:disabled){transform:scale(.95)}.sp-option:focus-visible,.sp-btn-primary:focus-visible,.sp-mute:focus-visible,.sp-bulb:focus-visible{outline:3px solid var(--sp-violet);outline-offset:3px}.sp-option.is-correct{background:var(--sp-success-bg);border-color:var(--sp-success-border);color:var(--sp-success);animation:sp-pop .45s var(--sp-bounce)}.sp-option.is-wrong{background:var(--sp-wrong-bg);border-color:var(--sp-wrong-border);color:var(--sp-wrong);cursor:not-allowed;animation:.4s ease-out sp-shake,.9s ease-out 1.1s forwards sp-melt}.sp-option.is-wrong:before{content:"✗ ";vertical-align:middle;font-size:.7em}.sp-option.is-faded{opacity:.12}.sp-option:disabled{cursor:default}.sp-skip{min-height:48px;color:var(--sp-ink-soft);border:3px dashed var(--sp-border);cursor:pointer;transition:transform .2s var(--sp-bounce), background .2s ease-out, color .2s ease-out;background:0 0;border-radius:999px;align-items:center;gap:8px;margin-top:14px;padding:8px 22px;font-family:inherit;font-size:17px;font-weight:700;display:inline-flex}.sp-skip:hover{background:var(--sp-option-bg);color:var(--sp-violet);transform:translateY(-2px)}.sp-skip:focus-visible{outline:3px solid var(--sp-violet);outline-offset:3px}.sp-feedback{justify-content:center;align-items:center;min-height:72px;margin-top:18px;display:flex}.sp-solved{animation:sp-bounce-in .4s var(--sp-bounce);flex-direction:column;align-items:center;gap:10px;display:flex}.sp-feedback-correct{color:var(--sp-success);margin:0;font-size:22px;font-weight:800}.sp-big-word{color:var(--sp-success);background:var(--sp-success-bg);border:3px solid var(--sp-success-border);box-shadow:var(--sp-clay-small);border-radius:20px;padding:8px 28px;font-size:clamp(36px,11vw,48px);font-weight:800;line-height:1.3}.sp-letter-key{color:var(--sp-violet);text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:3px}.sp-feedback-why{color:var(--sp-ink-soft);margin:0;font-size:17px;font-weight:600;line-height:1.5}.sp-continue{min-height:52px;transition:background .5s ease-out, color .5s ease-out, transform .2s var(--sp-bounce), box-shadow .2s ease-out;align-items:center;gap:8px;padding:10px 30px;font-size:19px;display:inline-flex}.sp-continue:disabled,.sp-continue:disabled:hover,.sp-continue:disabled:active{color:#8f8ca0;cursor:default;background:#d6d4de;transform:none;box-shadow:inset 1px 1px 4px #fff9,inset -2px -2px 6px #5d4a9c14}.sp-bulb{min-height:52px;color:var(--sp-sun-ink);background:var(--sp-sun-bg);border:3px solid var(--sp-sun);box-shadow:var(--sp-clay-small);cursor:pointer;transition:transform .2s var(--sp-bounce);border-radius:999px;align-items:center;gap:8px;padding:10px 24px;font-family:inherit;font-size:19px;font-weight:700;animation:1.6s ease-in-out infinite sp-bulb-glow;display:inline-flex}.sp-bulb:hover{transform:translateY(-2px)scale(1.04)}.sp-bulb:active{transform:scale(.95)}.sp-hint{text-align:right;color:var(--sp-sun-ink);background:var(--sp-sun-bg);border:3px solid var(--sp-sun);box-shadow:var(--sp-clay-small);animation:sp-bounce-in .4s var(--sp-bounce);border-radius:18px;align-items:center;gap:10px;margin:0;padding:12px 18px;font-size:18px;font-weight:600;line-height:1.5;display:flex}.sp-hint-icon{flex:none}.sp-start,.sp-end{margin-top:7vh;padding:36px 24px 40px}.sp-start-emoji{width:128px;height:128px;box-shadow:var(--sp-clay-small);animation:sp-bounce-in .6s var(--sp-bounce);background:linear-gradient(145deg,#e8f3ff,#ffeede);border-radius:50%;justify-content:center;align-items:center;margin:0 auto;font-size:68px;line-height:1;display:flex}.sp-start-letters{color:var(--sp-violet);letter-spacing:2px;font-size:50px;font-weight:800}.sp-title{color:var(--sp-violet);margin:14px 0 6px;font-size:34px;font-weight:800}.sp-subtitle{color:var(--sp-ink-soft);margin:0 0 18px;font-size:18px;line-height:1.6}.sp-letter-chips{justify-content:center;gap:10px;margin-bottom:26px;display:flex}.sp-chip{color:var(--sp-violet);border:3px solid var(--sp-border);box-shadow:var(--sp-clay-small);background:#f1eaff;border-radius:999px;padding:9px 16px;font-size:18px;font-weight:700}.sp-star{color:#f59e0b}.sp-toggle{color:var(--sp-ink-soft);background:var(--sp-option-bg);border:3px solid var(--sp-border);box-shadow:var(--sp-clay-small);cursor:pointer;border-radius:999px;align-items:center;gap:10px;margin-top:18px;padding:8px 16px;font-family:inherit;font-size:15px;font-weight:700;transition:color .2s ease-out,border-color .2s ease-out;display:inline-flex}.sp-toggle.is-on{color:var(--sp-violet);border-color:#c4b5fd}.sp-toggle:focus-visible{outline:3px solid var(--sp-violet);outline-offset:3px}.sp-toggle-track{direction:ltr;background:#d8d3ea;border-radius:999px;flex:none;width:44px;height:24px;padding:2px;transition:background .2s ease-out;display:flex}.sp-toggle.is-on .sp-toggle-track{background:var(--sp-violet)}.sp-toggle-knob{width:20px;height:20px;transition:transform .2s var(--sp-bounce);background:#fff;border-radius:50%;box-shadow:0 1px 3px #2d2a4a4d}.sp-toggle.is-on .sp-toggle-knob{transform:translate(20px)}.sp-bank-size{color:var(--sp-ink-soft);margin:-8px 0 20px;font-size:15px;font-weight:600}.sp-panel{background:var(--sp-option-bg);border:3px solid var(--sp-border);box-shadow:var(--sp-clay-small);text-align:right;border-radius:20px;margin-top:26px;padding:16px 18px}.sp-panel-title{color:var(--sp-violet);align-items:center;gap:8px;margin:0 0 12px;font-size:18px;font-weight:800;display:flex}.sp-learn-chips{flex-wrap:wrap;gap:8px;display:flex}.sp-learn-chip{color:var(--sp-success);background:var(--sp-success-bg);border:2px solid var(--sp-success-border);border-radius:999px;padding:6px 14px;font-size:18px;font-weight:700}.sp-history{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.sp-history-row{background:#fff;border-radius:12px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:16px;font-weight:600;display:flex}.sp-history-date{color:var(--sp-ink-soft)}.sp-history-score{color:var(--sp-ink);align-items:center;gap:6px;font-weight:800;display:inline-flex}.sp-btn-primary{color:#fff;background:linear-gradient(145deg, #8b5cf6, var(--sp-violet-deep));cursor:pointer;min-height:62px;transition:transform .2s var(--sp-bounce), box-shadow .2s ease-out;border:none;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 44px;font-family:inherit;font-size:22px;font-weight:800;display:inline-flex;box-shadow:inset 2px 2px 6px #ffffff59,inset -3px -3px 8px #00000026,6px 8px 18px #6d28d959}.sp-btn-primary:hover{transform:translateY(-3px)scale(1.03)}.sp-btn-primary:active{transform:scale(.95)}.sp-final-score{color:var(--sp-ink-soft);margin:6px 0 26px;font-size:20px}.sp-final-number{color:var(--sp-violet);margin-inline-end:6px;font-size:46px;font-weight:800}@keyframes sp-pop{0%{transform:scale(1)}50%{transform:scale(1.09)}to{transform:scale(1)}}@keyframes sp-shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes sp-bounce-in{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes sp-bulb-glow{0%,to{box-shadow:var(--sp-clay-small), 0 0 0 0 #facc1580}50%{box-shadow:var(--sp-clay-small), 0 0 0 10px #facc1500}}@keyframes sp-melt{to{opacity:.12;transform:scale(.96)}}@media (prefers-reduced-motion:reduce){.sp-page *{transition:none!important;animation:none!important}.sp-page .sp-option.is-wrong{opacity:.2}}@media (max-height:760px){.sp-page{gap:10px;padding:10px 12px 16px}.sp-card{border-radius:24px;padding:14px 14px 18px}.sp-counter{margin-bottom:2px;font-size:13px}.sp-emoji{width:78px;height:78px;margin:4px auto 6px;font-size:42px}.sp-emoji-listen svg{width:34px;height:34px}.sp-question-row{margin:2px 0 12px}.sp-question{font-size:21px}.sp-speak{width:38px;height:38px}.sp-options{gap:10px}.sp-option{border-radius:18px;min-height:60px;padding:8px 6px;font-size:clamp(21px,6vw,26px)}.sp-skip{min-height:42px;margin-top:10px;padding:6px 18px;font-size:15px}.sp-feedback{min-height:48px;margin-top:10px}.sp-big-word{padding:6px 22px;font-size:clamp(30px,9vw,40px)}.sp-feedback-correct{font-size:19px}.sp-feedback-why{font-size:15px}.sp-solved{gap:8px}.sp-continue{min-height:46px;font-size:17px}}@media (min-width:768px){.sp-page{padding-top:36px}.sp-card{padding:32px 36px 36px}.sp-emoji{width:120px;height:120px;font-size:64px}.sp-option{min-height:88px}}