:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100vw;height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{width:100vw;height:100vh;position:relative;overflow:hidden}.mode-toggle-container{position:fixed;top:20px;left:20px;z-index:1000;display:flex;align-items:center;gap:1em}.toggle-label{font-size:1.1em;font-weight:600;-webkit-user-select:none;user-select:none}.mode-toggle{position:relative;width:60px;height:30px;border-radius:15px;border:2px solid #646cff;background-color:#1a1a1a80;cursor:pointer;transition:background-color .3s ease;padding:0}.mode-toggle:hover{background-color:#646cff33}.toggle-slider{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background-color:#646cff;transition:transform .3s ease}.mode-toggle.math .toggle-slider{transform:translate(30px)}.mode-toggle.reading .toggle-slider{transform:translate(0)}@media(max-width:768px){.mode-toggle-container{top:10px;left:10px;gap:.6em}.toggle-label{font-size:.9em}.mode-toggle{width:50px;height:26px;border-radius:13px}.toggle-slider{width:18px;height:18px}.mode-toggle.math .toggle-slider{transform:translate(24px)}}@media(max-width:480px){.mode-toggle-container{flex-direction:column;align-items:flex-start;gap:.5em}.toggle-label{font-size:.85em}}@media(prefers-color-scheme:light){.mode-toggle{background-color:#ffffff80;border-color:#646cff}.toggle-slider{background-color:#646cff}.toggle-label{color:#213547}}.math-mode{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em;box-sizing:border-box;gap:2em}.math-mode-header{width:100%;display:flex;justify-content:flex-end}.reset-button{padding:.75em 1.5em;font-size:1em;font-weight:700;background-color:#646cff;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.reset-button:hover{background-color:#535bf2}.reset-button:active{transform:scale(.95)}.math-mode-content{display:flex;flex-direction:column;align-items:center;gap:2em;flex:1;justify-content:center;width:100%;max-width:600px}.config-options{display:flex;flex-direction:column;gap:1.5em;margin:2em 0;align-items:center}.config-option{display:flex;flex-direction:column;align-items:center;gap:.5em;font-size:1.3em;cursor:pointer;-webkit-user-select:none;user-select:none;padding:1em 2em;border:2px solid rgba(100,108,255,.3);border-radius:12px;width:100%;max-width:300px;transition:all .2s ease}.config-option:hover{border-color:#646cff80;background-color:#646cff0d}.config-option input[type=radio]{width:24px;height:24px;cursor:pointer;accent-color:var(--primary-color, #646cff)}.mode-description{font-size:.8em;opacity:.7;font-weight:400!important}@keyframes flash-green{0%,to{background-color:transparent;border-color:#646cff}50%{background-color:#0f03;border-color:#00c800}}@keyframes flash-red{0%,to{background-color:transparent;border-color:#646cff}50%{background-color:#f003;border-color:#c80000}}.score-display{font-size:2.5em;font-weight:700;text-align:center}.problem-container{display:flex;align-items:center;justify-content:center;border:2px solid #646cff;border-radius:16px;padding:2em;min-height:250px;transition:background-color .3s ease,border-color .3s ease}.problem-container.correct{animation:flash-green .8s ease}.problem-container.wrong{animation:flash-red .8s ease}.problem{display:flex;flex-direction:column;align-items:flex-end;gap:.3em;font-size:4em;font-weight:700}.problem-line{display:flex;align-items:center;gap:.3em;min-width:3em;justify-content:flex-end}.problem-line.separator{border-top:4px solid currentColor;width:100%;min-height:0;margin-top:.2em;margin-bottom:.2em}.answer-input{width:2.5em;font-size:1em;text-align:right;border:none;background:transparent;color:inherit;font-family:inherit;font-weight:700;outline:none;padding:0;caret-color:#646cff}.answer-input::-webkit-outer-spin-button,.answer-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.answer-input[type=number]{-moz-appearance:textfield}.operator,.equals,.number{-webkit-user-select:none;user-select:none}.tiles-mode{display:flex;flex-direction:column;align-items:center;gap:3em;width:100%;max-width:600px}.tiles-question{font-size:3em;font-weight:700;text-align:center;padding:1em;border-radius:16px;background-color:#646cff1a}.tiles-problem{-webkit-user-select:none;user-select:none}.tiles-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5em;width:100%}.tile{font-size:2.5em;font-weight:700;padding:1em;border:3px solid #646cff;border-radius:16px;background-color:transparent;color:inherit;cursor:pointer;transition:all .2s ease;min-height:120px;display:flex;align-items:center;justify-content:center}.tile:hover:not(:disabled){background-color:#646cff1a;transform:scale(1.05)}.tile:active:not(:disabled){transform:scale(.98)}.tile:disabled{cursor:default}.tile.correct{background-color:#0f03;border-color:#00c800;animation:tile-correct .8s ease}.tile.wrong{background-color:#f003;border-color:#c80000;animation:tile-wrong .5s ease}@keyframes tile-correct{0%{transform:scale(1)}50%{transform:scale(1.1);background-color:#0f06}to{transform:scale(1);background-color:#0f03}}@keyframes tile-wrong{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}@media(max-width:768px){.start-screen h1{font-size:2.5em}.start-screen .instructions{font-size:1.1em}.problem{font-size:3em}.problem-line{min-width:2.5em}.score-display{font-size:2.2em;margin-bottom:1.5em}.reset-button{font-size:.9em;padding:.6em 1.2em}.problem-container{padding:1.5em;min-height:220px}.tiles-question{font-size:2.5em;padding:.8em}.tile{font-size:2em;min-height:100px}.tiles-container{gap:1.2em}}@media(max-width:480px){.start-screen{padding:1em}.start-screen h1{font-size:2em}.start-screen .instructions{font-size:1em;margin-bottom:1.5em}.config-options{gap:1em;margin:1.5em 0}.config-option{font-size:1.1em;padding:.8em 1.5em}.start-button{font-size:1.2em;padding:.6em 1.5em}.problem{font-size:2.8em;gap:.2em}.problem-line{min-width:2em;gap:.2em}.score-display{font-size:2em;margin-bottom:1em}.reset-button{font-size:.85em;padding:.5em 1em}.math-mode{padding:1em;gap:1em}.problem-container{padding:1em;min-height:180px}.answer-input{width:2em}.tiles-mode{gap:2em;padding:0 1em}.tiles-question{font-size:2em;padding:.6em}.tile{font-size:1.8em;min-height:80px;padding:.8em}.tiles-container{gap:1em}}.reading-mode{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2em 2em 8em;box-sizing:border-box}.start-screen{text-align:center;padding:2em;max-width:600px}.start-screen h1{font-size:3em;margin-bottom:.5em;color:var(--primary-color, #646cff)}.start-screen .instructions{font-size:1.3em;margin-bottom:2em;line-height:1.6;opacity:.9}.start-button{font-size:1.5em;padding:.8em 2em;border:none;border-radius:12px;background-color:var(--primary-color, #646cff);color:#fff;cursor:pointer;transition:transform .2s,background-color .2s;font-weight:600}.start-button:hover{background-color:#535bf2;transform:scale(1.05)}.start-button:active{transform:scale(.98)}.config-options{display:flex;flex-direction:column;gap:1em;margin:2em 0;align-items:center}.config-option{display:flex;align-items:center;gap:.8em;font-size:1.3em;cursor:pointer;-webkit-user-select:none;user-select:none}.config-option input[type=checkbox]{width:24px;height:24px;cursor:pointer;accent-color:var(--primary-color, #646cff)}.config-option span{font-weight:500}.config-option:hover{opacity:.8}.progress-bar{width:100%;max-width:900px;height:8px;background-color:#646cff1a;border-radius:4px;margin-top:1em;overflow:hidden}.progress-fill{height:100%;background-color:var(--primary-color, #646cff);transition:width .3s ease}.typing-container{display:flex;align-items:center;justify-content:center;max-width:900px;width:100%}.paragraph{font-size:2.5em;line-height:1.8;text-align:left;padding:1em;border-radius:16px;background-color:#646cff0d;font-family:Courier New,Courier,monospace}.word-group{display:inline-block;white-space:nowrap}.char{display:inline-block;transition:all .2s ease;padding:2px;border-radius:4px}.char.hidden{display:none}.char.current{background-color:#646cff;color:#fff;font-weight:700;transform:scale(1.2);animation:pulse 1s infinite}.char.current.error{background-color:#f59e0b;animation:shake .4s ease-in-out,errorPulse .4s ease-in-out}.char.completed{opacity:.5;color:#4ade80}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes shake{0%,to{transform:scale(1.2) translate(0)}25%{transform:scale(1.2) translate(-4px)}75%{transform:scale(1.2) translate(4px)}}@keyframes errorPulse{0%{background-color:#f59e0b}50%{background-color:#fb923c}to{background-color:#f59e0b}}.live-score{position:fixed;bottom:2.5em;left:50%;transform:translate(-50%);display:flex;gap:2em;font-size:1.5em;padding:.8em 1.5em;background-color:#0000004d;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:101}.live-score-item{display:flex;align-items:center;gap:.5em}.score-icon-small{font-size:1.2em}.score-screen{text-align:center;padding:2em;max-width:600px;animation:fadeIn .5s ease}.score-screen h1{font-size:3.5em;margin-bottom:.5em;color:#4ade80}.score-results{display:flex;justify-content:center;gap:3em;margin:2em 0}.score-item{display:flex;flex-direction:column;align-items:center;gap:.5em}.score-icon{font-size:4em}.score-value{font-size:3em;font-weight:700}.score-buttons{display:flex;gap:1.5em;justify-content:center;margin-top:2em}.continue-button,.exit-button{font-size:1.5em;padding:.8em 2em;border:none;border-radius:12px;cursor:pointer;transition:transform .2s,background-color .2s;font-weight:600}.continue-button{background-color:var(--primary-color, #646cff);color:#fff}.continue-button:hover{background-color:#535bf2;transform:scale(1.05)}.exit-button{background-color:#646cff33;color:var(--text-color, #213547)}.exit-button:hover{background-color:#646cff4d;transform:scale(1.05)}.continue-button:active,.exit-button:active{transform:scale(.98)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.reading-mode{padding:1em}.start-screen h1,.score-screen h1{font-size:2.5em}.start-screen .instructions{font-size:1.1em}.paragraph{font-size:2em;padding:.8em}.score-icon{font-size:3em}.score-value{font-size:2.5em}.live-score{font-size:1.3em}.score-results{gap:2em}}@media(max-width:480px){.reading-mode{padding:.5em}.start-screen h1,.score-screen h1{font-size:2em}.start-screen .instructions{font-size:1em;margin-bottom:1.5em}.config-options{gap:.8em;margin:1.5em 0}.config-option{font-size:1.1em}.config-option input[type=checkbox]{width:20px;height:20px}.start-button,.continue-button,.exit-button{font-size:1.2em;padding:.6em 1.5em}.paragraph{font-size:1.5em;padding:.6em;line-height:1.6}.score-icon{font-size:2.5em}.score-value{font-size:2em}.live-score{font-size:1.1em;bottom:1.5em;padding:.6em 1em;gap:1.5em}.score-results{gap:1.5em}.score-buttons{flex-direction:column;gap:1em}.continue-button,.exit-button{width:100%}}@media(prefers-color-scheme:dark){.exit-button{color:#fff}}@media(prefers-color-scheme:light){.paragraph{background-color:#646cff14}.live-score{background-color:#ffffff4d}.exit-button{color:#213547}}
