:root{--keyboard-inset-height:0px;--viewport-height:100svh}#root,body,html{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-repeat:repeat;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;overflow-x:hidden;padding:0}#root{box-sizing:border-box;display:flex;flex-direction:column;min-height:100svh;min-height:100dvh}.app-container{display:flex;flex:1 1;flex-direction:column}.landing-container{align-items:center;background-color:#5542b2;display:flex;flex:1 1;justify-content:center;width:100%;z-index:2000}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.tooltip{background:#4b5563!important;border-radius:4px!important;font-size:12px!important;padding:4px 8px!important}.fraction-exercise-container{background:#ffffffe6;border-radius:10px;box-shadow:0 2px 10px #0000001a;margin:0 auto;max-width:800px;padding:20px}@media (max-width:768px){.fraction-exercise{padding:1rem}.answer-input{align-items:flex-start;flex-direction:column}.fraction-input{margin-bottom:1rem}}.dev-mode-disable{background:#0009;border:none;border-radius:4px;bottom:10px;color:#fff;cursor:pointer;font-size:12px;left:10px;opacity:.8;padding:6px 10px;position:fixed;z-index:2000}.dev-mode-disable:hover{opacity:1}.student-login{width:100%}.student-login form{align-items:center;display:flex;flex-direction:column}.code-input-container{display:flex;gap:10px;justify-content:space-between;margin:20px 0}.code-input{background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:24px;height:50px;text-align:center;transition:all .2s;width:100%}.code-input.error{background-color:#fef2f2;border-color:#ef4444}.code-input:focus{border-color:#4f46e5;box-shadow:0 0 0 2px #4f46e533;outline:none}.code-input:focus.error{border-color:#ef4444;box-shadow:0 0 0 2px #ef444433}.error-message{color:#ef4444;font-size:14px;margin-top:8px;text-align:center}.button{align-items:center;background:#4f46e5;border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-weight:500;gap:8px;justify-content:center;margin-top:20px;padding:12px;transition:background .2s;width:100%}.button:hover{background:#4338ca}.teacher-login-link{color:#6b7280;font-size:14px;margin-top:20px;padding:8px 0;text-align:center;width:100%}.teacher-login-link button{background:none;border:none;color:#4f46e5;cursor:pointer;display:inline;font-size:14px;font-weight:600;margin:0;padding:0 4px;text-decoration:underline}.teacher-login-link button:hover{color:#4338ca;text-decoration:none}.title{font-size:1.5rem;font-weight:600;margin-bottom:24px}.subtitle,.title{color:#4f46e5;text-align:center}.subtitle{margin-bottom:20px}.loading{margin-top:10px;text-align:center}.input-container{margin:20px 0;position:relative;width:100%}.input-icon{color:#6b7280;left:12px;position:absolute;top:12px}.name-input{border:1px solid #e5e7eb;border-radius:8px;font-size:14px;margin-left:0;padding:12px 12px 12px 40px;transition:border-color .2s;width:calc(100% - 52px)}.provider-section{margin-top:14px;width:100%}.provider-caption{color:#9ca3af;font-size:12px;margin-bottom:8px;text-align:center}.provider-buttons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.provider-divider{align-items:center;color:#9ca3af;display:flex;font-size:12px;gap:10px;margin:14px 0 10px;width:100%}.provider-divider:after,.provider-divider:before{background:#e5e7eb;content:"";flex:1 1;height:1px}.error-display-container{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;min-height:100vh;position:fixed;right:0;top:0;z-index:1000}.error-display-container .error-display-content{align-items:center;animation:fadeIn .3s ease-out;background-color:#fff;border:1px solid #f3f4f6;border-radius:12px;box-shadow:0 10px 25px #0003;display:flex;flex-direction:column;gap:1.5rem;max-width:500px;padding:2.5rem;text-align:center;width:90%}.error-display-container .error-display-content .error-icon{color:#ef4444;font-size:3.5rem;margin-bottom:.5rem}.error-display-container .error-display-content .error-illustration{display:block;filter:drop-shadow(0 0 5px rgba(0,0,0,.1));margin:1rem auto;max-width:300px;width:80%}.error-display-container .error-display-content .error-title{color:#ef4444;font-size:1.75rem;font-weight:700;margin:0}.error-display-container .error-display-content .error-message{color:#4b5563;font-size:1.1rem;line-height:1.6;margin:0}.error-display-container .error-display-content .error-retry-button{background-color:#4f46e5;border:none;border-radius:6px;box-shadow:0 2px 4px #4f46e54d;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;margin-top:1rem;padding:.75rem 2rem;text-decoration:none;transition:all .2s}.error-display-container .error-display-content .error-retry-button:hover{background-color:#4338ca;box-shadow:0 4px 6px #4f46e566;transform:translateY(-1px)}.error-display-container .error-display-content .error-retry-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.oauth-error{-webkit-backdrop-filter:none;backdrop-filter:none;padding:32px 16px;position:static}.oauth-error .error-display-content{border:none;border-radius:18px;box-shadow:0 20px 50px #4f46e526;position:relative}.oauth-error-message{color:#4b5563;line-height:1.5;margin:.2rem 0}.oauth-error-details{background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;margin-top:1.5rem;padding:16px;text-align:left;width:100%}.oauth-error-details .details-heading{color:#6b7280;display:block;font-weight:600;margin-bottom:6px}.oauth-error-details code{color:#111827;display:block;font-size:.95rem;word-break:break-word}.oauth-error-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}@media(min-width:520px){.oauth-error-actions{flex-direction:row}}.error-secondary-button{background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 2px 4px #4f46e51a;color:#4f46e5;cursor:pointer;font-size:1rem;font-weight:600;padding:.75rem 2rem;transition:all .2s}.error-secondary-button:hover{box-shadow:0 4px 6px #4f46e533;transform:translateY(-1px)}.oauth-error-support-hint{color:#9ca3af;font-size:.9rem;margin-top:20px}.loading-spinner-container{align-items:center;bottom:0;display:flex;justify-content:center;left:0;min-height:100vh;position:fixed;right:0;top:0;z-index:1000}.loading-spinner-container .loading-spinner-content{align-items:center;display:flex;flex-direction:column;gap:1rem}.loading-spinner-container .loading-spinner-content .loading-text{color:#4f46e5;font-size:1.2rem;font-weight:500}.loading-spinner-container .loading-spinner-content .loading-subtext{color:#6b7280;font-size:.95rem;max-width:420px;text-align:center}