: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-panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#0f172ae0;border-radius:8px;bottom:10px;box-shadow:0 4px 16px #0006;color:#e2e8f0;font-family:Segoe UI,system-ui,sans-serif;font-size:12px;left:10px;min-width:220px;padding:8px 10px;position:fixed;z-index:2000}.dev-panel-row{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:6px}.dev-panel-label{color:#94a3b8;font-size:11px}.dev-panel-btn{border:none;border-radius:4px;cursor:pointer;font-size:11px;font-weight:600;padding:3px 8px;transition:opacity .15s}.dev-panel-btn:hover{opacity:.85}.dev-panel-btn--exit{background:#ef444440;color:#fca5a5}.dev-panel-btn--toggle{background:#64748b4d;color:#94a3b8;min-width:36px;text-align:center}.dev-panel-btn--toggle.dev-panel-btn--on{background:#34d39933;color:#6ee7b7}.dev-panel-btn--toggle.dev-panel-btn--mirror{background:#fbbf2433;color:#fcd34d}.dev-panel-stats{border-top:1px solid #ffffff14;margin-top:4px;padding-top:6px}.dev-stats-row{display:flex;font-size:11px;gap:8px;justify-content:space-between;margin-bottom:3px}.dev-stats-row span:first-child{color:#64748b}.dev-stats-row span:last-child{font-feature-settings:"tnum";color:#cbd5e1;font-variant-numeric:tabular-nums}.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}.ob-overlay{align-items:center;animation:ob-fade-in .2s ease-out;background:#0f172a73;display:flex;inset:0;justify-content:center;padding:16px;position:fixed;z-index:10000}@keyframes ob-fade-in{0%{opacity:0}to{opacity:1}}.ob{animation:ob-slide-up .25s cubic-bezier(.22,1,.36,1);background:#fff;border-radius:16px;box-shadow:0 20px 60px #0f172a33;display:flex;flex-direction:column;max-height:90dvh;max-width:min(860px,100vw - 32px);overflow:hidden;width:100%}@keyframes ob-slide-up{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ob__header{display:flex;flex-shrink:0;justify-content:flex-end;padding:14px 16px 0}.ob__close{align-items:center;background:none;border:none;border-radius:50%;color:#9ca3af;cursor:pointer;display:flex;font-size:1rem;padding:6px;transition:color .15s,background .15s}.ob__close:hover{background:#f3f4f6;color:#374151}.ob__body{display:flex;flex:1 1;flex-direction:column;gap:14px;min-height:0;overflow-y:auto;padding:0 28px 8px}.ob__title{color:#111827;font-size:1.45rem;font-weight:700;line-height:1.3;margin:0 0 8px}.ob__text{color:#4b5563;font-size:.95rem;line-height:1.6;margin:0}.ob__video-wrapper{aspect-ratio:16/9;background:#000;border-radius:12px;flex-shrink:0;overflow:hidden;position:relative;width:100%}.ob__video-wrapper iframe{border:none;height:100%;inset:0;position:absolute;width:100%}.ob__footer{border-top:1px solid #f3f4f6;flex-shrink:0;gap:16px;justify-content:space-between;padding:14px 28px 18px}.ob__contact,.ob__footer{align-items:center;display:flex}.ob__contact{color:#6b7280;font-size:.85rem;gap:8px;margin:0}.ob__contact a{color:#5b4be8;font-weight:500;text-decoration:none}.ob__contact a:hover{text-decoration:underline}.ob__contact-icon{color:#6d5dfc;flex-shrink:0}.ob__btn{align-items:center;background:#7c4dff;border:none;border-radius:10px;box-shadow:0 2px 8px #7c4dff4d;color:#fff;cursor:pointer;display:inline-flex;flex-shrink:0;font-size:.95rem;font-weight:600;gap:8px;justify-content:center;padding:10px 24px;transition:all .15s}.ob__btn:hover{background:#6d3df0;box-shadow:0 4px 12px #7c4dff66}.ob__btn .ob__btn-icon{font-size:.9rem}@media(min-width:768px)and (max-height:760px){.ob{max-width:min(680px,100vw - 32px)}}@media(min-width:768px)and (max-height:620px){.ob{max-width:min(560px,100vw - 32px)}.ob__intro{display:none}.ob__body{padding-top:4px}}@media(max-width:767px){.ob-overlay{align-items:stretch;justify-content:stretch;padding:0}.ob{border-radius:0;height:100dvh;max-height:none;max-width:none}.ob__header{padding:calc(10px + env(safe-area-inset-top)) 12px 0}.ob__intro{display:none}.ob__body{justify-content:center;padding:0 12px}.ob__video-wrapper{border-radius:8px}.ob__footer{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}.ob__contact{font-size:.8rem}.ob__btn{border-radius:12px;min-height:44px}}@media(max-height:520px)and (orientation:landscape){.ob-overlay{align-items:stretch;justify-content:stretch;padding:0}.ob{background:#000;border-radius:0;height:100dvh;max-height:none;max-width:none;position:relative}.ob__header{left:0;padding:calc(6px + env(safe-area-inset-top)) 12px 0;position:absolute;right:0;top:0;z-index:3}.ob__close{background:#0f172a66;color:#e5e7eb}.ob__close:hover{background:#0f172a99;color:#fff}.ob__intro{display:none}.ob__body{align-items:center;justify-content:center;overflow:hidden;padding:0}.ob__video-wrapper{border-radius:0;width:min(100vw,177.7777777778dvh)}.ob__footer{background:#0000;border-top:none;bottom:calc(8px + env(safe-area-inset-bottom));padding:0;position:absolute;right:12px;z-index:3}.ob__contact{display:none}.ob__btn{box-shadow:0 8px 24px #0f172a66}}