.math{max-width:600px;margin:0 auto;padding:0 2.5rem 4rem;text-align:center}.math__back{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-3);text-decoration:none;letter-spacing:.02em;transition:color .2s ease;display:inline-block;margin-bottom:1.5rem;text-align:left;width:100%}.math__back:hover{color:var(--c-accent)}.math__title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:600;color:var(--c-text);margin:0 0 .5rem;font-variation-settings:'opsz' 72}.math__desc{font-family:var(--font-body);font-size:1rem;color:var(--c-text-2);margin:0 0 2rem;line-height:1.5}.math__grade-tabs{display:flex;justify-content:center;margin-bottom:2rem}.math__grade-select{font-family:var(--font-display);font-size:1.125rem;font-weight:500;font-variation-settings:'opsz' 48;color:var(--c-text);background:var(--c-bg);border:2px solid var(--c-accent);border-radius:100px;padding:.625rem 2.5rem .625rem 1.5rem;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;transition:all .2s ease}.math__grade-select:hover{border-color:var(--c-accent-hover)}.math__grade-select:focus{outline:2px solid var(--c-accent);outline-offset:2px}.math__mode-toggle{display:inline-flex;justify-content:center;gap:.25rem;margin-bottom:1.5rem;background:var(--c-tag-bg);border-radius:100px;padding:.25rem}.math__mode-btn{font-family:var(--font-display);font-size:.9375rem;font-weight:500;font-variation-settings:'opsz' 48;color:var(--c-text-2);background:0 0;border:none;border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.math__mode-btn:hover{color:var(--c-text)}.math__mode-btn--active{background:var(--c-accent);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}.math__mode-btn--active:hover{background:var(--c-accent-hover);color:#fff}.math__stars{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.math__star{fill:none;stroke:var(--c-border);stroke-width:1.5;stroke-linejoin:round;transition:fill .3s ease,stroke .3s ease}.math__star--earned{fill:var(--c-accent);stroke:var(--c-accent)}.math__star--pop{animation:math-star-earn .5s var(--ease)}@keyframes math-star-earn{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}.math__stats{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.75rem;color:var(--c-text-3);letter-spacing:.02em;margin-bottom:1.5rem;padding:0 .25rem}.math__level{font-weight:500;color:var(--c-text-2)}.math__streak--hot{color:var(--c-accent);font-weight:500}.math__card{background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:8px;padding:2.5rem 2rem;margin-bottom:1rem;transition:border-color .2s ease}.math__card--enter{animation:math-card-enter .3s var(--ease)}@keyframes math-card-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.math__problem{display:flex;align-items:baseline;justify-content:center;gap:.5rem}.math__operand{font-family:var(--font-display);font-size:clamp(3rem,10vw,4.5rem);font-weight:600;color:var(--c-text);font-variation-settings:'opsz' 144;line-height:1}.math__problem--exponent .math__operator{display:none}.math__problem--exponent #mathB{font-size:clamp(1.5rem,5vw,2.25rem);transform:translateY(-60%);margin-left:-.25rem}.math__problem--sqrt .math__operator{order:-1;margin-right:-.25rem}.math__problem--sqrt #mathB{display:none}.math__operator{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,3.5rem);font-weight:600;color:var(--c-accent);font-variation-settings:'opsz' 144;line-height:1}.math__equals{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,3.5rem);font-weight:600;color:var(--c-text-3);font-variation-settings:'opsz' 144;line-height:1}.math__answer{font-family:var(--font-display);font-size:clamp(3rem,10vw,4.5rem);font-weight:600;color:var(--c-accent);font-variation-settings:'opsz' 144;line-height:1;min-width:2ch;display:inline-block}.math__answer--pulse{animation:math-pulse 1.5s ease-in-out infinite}@keyframes math-pulse{0%,100%{opacity:1}50%{opacity:.35}}.math__problem--hidden{display:none}.math__word-problem{text-align:left;padding:.5rem 0}.math__word-problem--hidden{display:none}.math__word-story{font-family:var(--font-body);font-size:clamp(1.125rem,3vw,1.375rem);color:var(--c-text);line-height:1.6;margin:0 0 1rem}.math__word-question{font-family:var(--font-display);font-size:clamp(1.25rem,3.5vw,1.5rem);font-weight:600;color:var(--c-accent);font-variation-settings:'opsz' 48;margin:0;line-height:1.4}.math__feedback{min-height:2rem;font-family:var(--font-display);font-size:1.125rem;font-weight:500;margin-bottom:1.5rem;transition:opacity .2s ease;font-variation-settings:'opsz' 48}.math__feedback--correct{color:var(--hl-string)}.math__feedback--wrong{color:var(--c-text-2)}.math__choices{display:grid;gap:.5rem;margin-bottom:2rem}.math__choices--small{grid-template-columns:repeat(4,1fr)}.math__choices--large{grid-template-columns:repeat(7,1fr)}.math__choice{min-height:56px;min-width:44px;font-family:var(--font-display);font-size:1.5rem;font-weight:500;font-variation-settings:'opsz' 48;color:var(--c-text);background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease,color .15s ease;-webkit-tap-highlight-color:transparent;user-select:none}.math__choice:hover{background:var(--c-tag-bg);border-color:var(--c-tag-border)}.math__choice:active{transform:scale(.95)}.math__choice--correct{background:var(--hl-string)!important;border-color:var(--hl-string)!important;color:#fff!important;transform:scale(1.08)}.math__choice--wrong{animation:math-shake .3s ease;background:var(--c-accent)!important;border-color:var(--c-accent)!important;color:#fff!important}.math__choice--highlight{background:var(--hl-string)!important;border-color:var(--hl-string)!important;color:#fff!important;animation:math-highlight-pulse .6s ease infinite}@keyframes math-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}@keyframes math-highlight-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}.math__input-group{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:2rem}.math__input-group--hidden{display:none}.math__choices--hidden{display:none}.math__input{width:5rem;font-family:var(--font-display);font-size:2rem;font-weight:600;font-variation-settings:'opsz' 72;color:var(--c-text);background:var(--c-bg-elevated);border:2px solid var(--c-border);border-radius:8px;padding:.75rem 1rem;text-align:center;transition:border-color .2s ease;-moz-appearance:textfield}.math__input::-webkit-outer-spin-button,.math__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.math__input:focus{outline:none;border-color:var(--c-accent)}.math__submit{font-family:var(--font-display);font-size:1.125rem;font-weight:500;font-variation-settings:'opsz' 48;color:#fff;background:var(--c-accent);border:none;border-radius:8px;padding:.875rem 1.5rem;cursor:pointer;transition:background .2s ease,transform .1s ease;-webkit-tap-highlight-color:transparent}.math__submit:hover{background:var(--c-accent-hover)}.math__submit:active{transform:scale(.95)}.math__actions{margin-bottom:2rem}.math__reset{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-3);background:0 0;border:1px solid var(--c-border);border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;letter-spacing:.02em;transition:all .2s ease}.math__reset:hover{color:var(--c-text);border-color:var(--c-text)}.math__info{font-family:var(--font-body);font-size:.875rem;color:var(--c-text-3);line-height:1.6;max-width:480px;margin:0 auto}@media(max-width:768px){.math{padding:0 1.5rem 3rem}.math__card{padding:2rem 1.5rem}}@media(max-width:480px){.math__choices--large{grid-template-columns:repeat(4,1fr)}.math__choice{min-height:52px;font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.math__answer--pulse,.math__card--enter,.math__star--pop,.math__choice--wrong,.math__choice--highlight{animation:none}.math__choice--correct{transform:none}}