:root{--color-primary: #4f46e5;--color-primary-hover: #4338ca;--color-secondary: #64748b;--color-background: #ffffff;--color-surface: #f8fafc;--color-text: #1e293b;--color-text-muted: #64748b;--color-border: #e2e8f0;--color-error: #ef4444;--color-success: #22c55e;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-fancy: "Cinzel", serif;--font-family-body: "Alegreya", serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text);background-color:var(--color-background)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s ease;text-decoration:none}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{background-color:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-border)}.input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-background)}.input:focus{outline:2px solid var(--color-primary);outline-offset:-1px;border-color:var(--color-primary)}.card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.welcome-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100dvh;padding-top:var(--spacing-xl);overscroll-behavior:none;pointer-events:none}.ornate-header{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1}.ornate-header-image{width:15rem;height:auto;margin-bottom:var(--spacing-sm)}.welcome-prelude{font-family:var(--font-family-fancy);font-size:1.15rem;font-weight:400;color:#1a1a2e;margin:0}.signed-in-name{font-family:var(--font-family-fancy);font-size:1.5rem;font-weight:400;color:#1a1a2e;margin:0}.welcome-title{font-family:var(--font-family-fancy);font-size:3rem;font-weight:400;color:#1a1a2e;margin:0}.ornate-title{font-family:var(--font-family-fancy);font-size:2rem;font-weight:400;color:#1a1a2e;margin:0}.welcome-subtitle{font-family:var(--font-family-fancy);font-size:1.9rem;font-weight:400;color:#1a1a2e;margin:0}.fading-line-button{--fading-line-light-opacity: .8;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);background:none;border:none;cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-2xl);text-decoration:none}.fading-line{width:15.625rem;height:1px;background:linear-gradient(to right,transparent,#1a1a2e 30%,#1a1a2e 70%,transparent);transition:box-shadow .2s ease}.fading-line-text{font-family:var(--font-family-body);font-size:var(--font-size-2xl);font-weight:400;color:#1a1a2e;line-height:1;transition:text-shadow .2s ease}.fading-line-button:hover .fading-line{box-shadow:0 0 8px #1a1a2e80}.fading-line-button:hover .fading-line-text{text-shadow:0 0 8px rgba(26,26,46,.4)}.fading-line-button--light .fading-line{background:linear-gradient(to right,transparent,rgba(255,255,255,var(--fading-line-light-opacity)) 30%,rgba(255,255,255,var(--fading-line-light-opacity)) 70%,transparent)}.fading-line-button--light .fading-line-text{color:rgba(255,255,255,var(--fading-line-light-opacity))}.fading-line-button--light:hover .fading-line{box-shadow:0 0 8px rgba(255,255,255,calc(var(--fading-line-light-opacity) - .3))}.fading-line-button--light:hover .fading-line-text{text-shadow:0 0 8px rgba(255,255,255,calc(var(--fading-line-light-opacity) - .4))}.fading-line-button--disabled{opacity:.5;cursor:not-allowed}.fading-line-button--disabled:hover .fading-line{box-shadow:none}.fading-line-button--disabled:hover .fading-line-text{text-shadow:none}.auth-landing-card{display:flex;flex-direction:column;align-items:center;margin-top:var(--spacing-2xl)}.auth-landing-card .fading-line-button{margin-top:var(--spacing-md)}.auth-landing-card .fading-line-button:first-of-type{margin-top:0}.guest-link{background:none;border:none;color:#1a1a2e;font-family:var(--font-family-body);font-size:var(--font-size-base);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-md);transition:text-shadow .2s ease}.guest-link:hover:not(:disabled){text-shadow:0 0 8px rgba(26,26,46,.4)}.guest-link:disabled{cursor:not-allowed;opacity:.5}.auth-prompt{color:#1a1a2e;font-family:var(--font-family-body);font-size:var(--font-size-base);margin:0 0 var(--spacing-md) 0;text-align:center}.back-link{background:none;border:none;color:#1a1a2e;font-family:var(--font-family-body);font-size:var(--font-size-base);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);margin-top:var(--spacing-lg);transition:text-shadow .2s ease}.back-link:hover{text-shadow:0 0 8px rgba(26,26,46,.4)}.back-link--light{color:var(--color-text-light)}.back-link--light:hover{text-shadow:0 0 8px var(--color-text-light-glow)}.auth-card-dark{--color-text-light: rgba(255, 255, 255, .8);--color-text-light-glow: rgba(255, 255, 255, .4);--color-border-light: rgba(255, 255, 255, .2);--color-border-light-focus: rgba(255, 255, 255, .5);background:#000000bf;border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:400px;margin-top:var(--spacing-2xl);display:flex;flex-direction:column;align-items:center}.auth-card-dark .ornate-title{font-family:var(--font-family-body);color:var(--color-text-light);text-align:center;margin-bottom:var(--spacing-sm)}.auth-card-dark .auth-subtitle-dark{color:var(--color-text-light);font-family:var(--font-family-body);font-size:var(--font-size-base);text-align:center;margin:0 0 var(--spacing-lg) 0}.auth-card-dark .form-group{margin-bottom:var(--spacing-md);width:100%}.auth-card-dark .form-label-dark{display:block;font-family:var(--font-family-body);font-size:var(--font-size-sm);font-weight:400;color:var(--color-text-light);margin-bottom:var(--spacing-xs)}.auth-card-dark .input-dark{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-family:var(--font-family-body);font-size:var(--font-size-base);background:#1a1a1a;border:1px solid var(--color-border-light);border-radius:var(--radius-md);color:#fff}.auth-card-dark .input-dark::placeholder{color:var(--color-text-light-glow)}.auth-card-dark .input-dark:focus{outline:none;border-color:var(--color-border-light-focus)}.auth-card-dark .checkbox-label-dark{display:flex;align-items:flex-start;gap:var(--spacing-sm);font-family:var(--font-family-body);font-size:var(--font-size-sm);color:var(--color-text-light);cursor:pointer}.auth-card-dark .checkbox-label-dark input[type=checkbox]{margin-top:2px;cursor:pointer}.auth-card-dark .checkbox-label-dark a{color:var(--color-text-light)}.auth-card-dark .checkbox-label-dark a:hover{text-decoration:underline}.auth-card-dark .form-error{color:#ff6b6b;text-align:center}.auth-card-dark .back-link--light{color:var(--color-text-light)}.auth-card-dark .back-link--light:hover{text-shadow:0 0 8px var(--color-text-light-glow)}.otp-input-group-dark{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-lg)}.otp-input-dark{width:3rem;height:3.5rem;text-align:center;font-size:var(--font-size-2xl);font-weight:600;background:#1a1a1a;border:1px solid var(--color-border-light);border-radius:var(--radius-md);color:#fff}.otp-input-dark:focus{outline:none;border-color:var(--color-border-light-focus)}.learning-card{background:#ffffff1a;border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:400px;align-self:center;display:flex;flex-direction:column;align-items:center;text-align:center}.learning-card .fading-line-button{margin-top:var(--spacing-lg)}.learning-card-title{font-family:var(--font-family-body);font-size:var(--font-size-2xl);font-weight:400;color:#fffc;margin:0 0 var(--spacing-md) 0}.learning-card-message{font-family:var(--font-family-body);font-size:var(--font-size-base);color:#fffc;line-height:1.5;margin:0}.global-keyboard-input{position:fixed;top:-100px;left:0;opacity:0;width:1px;height:1px;border:none;padding:0;margin:0;caret-color:transparent;color:transparent}html:has(.learning-viewport),body:has(.learning-viewport){overflow:hidden;position:fixed;width:100%;height:100%;background:#000}html:has(.welcome-screen),body:has(.welcome-screen){overflow:hidden;position:fixed;width:100%;height:100%}.background-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;justify-content:center;align-items:center;z-index:0}.background-media{position:relative;width:100vw;height:100dvh;max-width:calc(100dvh * 20 / 9);max-height:calc(100vw * 20 / 9)}.background-media>*{position:absolute;top:0;right:0;bottom:0;left:0}.background-image{width:100%;height:100%;object-fit:cover;object-position:center}.background-fading{animation:fade-to-black 1s ease-out forwards}.background-fading-fast{animation:fade-to-black .25s ease-out forwards}@keyframes fade-to-black{0%{opacity:1}to{opacity:0}}.app-overlay{position:relative;z-index:1;min-height:100dvh;pointer-events:none}button,a,input,select,textarea,[role=button]{pointer-events:auto}.settings-icon{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:100;background:none;border:none;cursor:pointer;padding:var(--spacing-xs);opacity:.7;transition:opacity .2s ease;pointer-events:auto}.settings-icon:hover{opacity:1}.settings-icon img{width:2rem;height:2rem}.main-content{padding-inline:var(--spacing-xl);min-height:100dvh;display:flex;justify-content:center;align-items:flex-start;pointer-events:none}.auth-container{width:100%;max-width:480px;margin-top:var(--spacing-2xl)}.auth-card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-md)}.auth-title{font-size:var(--font-size-2xl);font-weight:600;text-align:center;margin-bottom:var(--spacing-lg)}.auth-subtitle{color:var(--color-text-muted);text-align:center;margin-bottom:var(--spacing-lg)}.form-group{margin-bottom:var(--spacing-md)}.form-label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--spacing-xs)}.form-error{color:var(--color-error);font-size:var(--font-size-sm);margin-top:var(--spacing-xs)}.checkbox-label{display:flex;align-items:flex-start;gap:var(--spacing-sm);font-size:var(--font-size-sm);cursor:pointer}.checkbox-label input[type=checkbox]{margin-top:2px;cursor:pointer}.checkbox-label a{color:var(--color-primary)}.checkbox-label a:hover{text-decoration:underline}.btn-full{width:100%}.auth-divider{display:flex;align-items:center;margin:var(--spacing-lg) 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-bottom:1px solid var(--color-border)}.auth-divider span{padding:0 var(--spacing-md);color:var(--color-text-muted);font-size:var(--font-size-sm)}.auth-options{display:flex;flex-direction:column;gap:var(--spacing-sm)}.auth-link{text-align:center;margin-top:var(--spacing-md)}.auth-link a,.auth-link button{color:var(--color-primary);text-decoration:none;background:none;border:none;cursor:pointer;font-size:inherit}.auth-link a:hover,.auth-link button:hover{text-decoration:underline}.role-select{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.role-option{flex:1;padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;text-align:center;transition:border-color .15s ease}.role-option:hover{border-color:var(--color-primary)}.role-option.selected{border-color:var(--color-primary);background-color:#4f46e50d}.role-option-title{font-weight:500;margin-bottom:var(--spacing-xs)}.role-option-desc{font-size:var(--font-size-sm);color:var(--color-text-muted)}.otp-input-group{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-lg)}.otp-input{width:3rem;height:3.5rem;text-align:center;font-size:var(--font-size-2xl);font-weight:600;border:1px solid var(--color-border);border-radius:var(--radius-md)}.otp-input:focus{outline:2px solid var(--color-primary);outline-offset:-1px;border-color:var(--color-primary)}.dashboard{width:100%;max-width:800px}.dashboard-card{background-color:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.dashboard-title{font-size:var(--font-size-xl);font-weight:600;margin-bottom:var(--spacing-md)}.dashboard-subtitle{color:var(--color-text-muted);margin-bottom:var(--spacing-lg)}.loading-container{display:flex;justify-content:center;align-items:center;min-height:200px}.loading-spinner{width:2.5rem;height:2.5rem;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.intro-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;justify-content:center;align-items:flex-end;padding:var(--spacing-xl);padding-bottom:3rem}.learning-viewport{position:fixed;top:0;left:0;right:0;height:var(--visual-viewport-height, 100vh);z-index:10;background:#000;display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md);overflow:hidden;touch-action:none;overscroll-behavior:none}.learning-header{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:var(--spacing-sm) 0;flex-shrink:0}.learning-header-back{background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-xl);cursor:pointer;padding:var(--spacing-sm);margin:calc(-1 * var(--spacing-sm));border-radius:var(--radius-md);transition:color .15s,background-color .15s}.learning-header-back:hover{color:var(--color-text);background-color:#ffffff1a}.learning-header-name{color:var(--color-text-muted);font-size:var(--font-size-sm)}.learning-container{width:100%;max-width:600px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.profile-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.feedback-correct{color:var(--color-success)}.feedback-incorrect{color:var(--color-error)}.feedback-word{font-size:var(--font-size-2xl);font-weight:600;margin-top:var(--spacing-md)}.feedback-comparison{margin-bottom:var(--spacing-lg)}.feedback-item{margin-bottom:var(--spacing-md)}.feedback-label{color:var(--color-text-muted);font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.feedback-actual{font-size:var(--font-size-xl);text-decoration:line-through;color:var(--color-error)}.feedback-expected{font-size:var(--font-size-2xl);font-weight:600;color:var(--color-success)}.spelling-input{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--spacing-sm);color:#fff;padding:var(--spacing-md)}.spelling-title{font-size:var(--font-size-lg);font-weight:500;margin:0}.spelling-repeat{background:none;border:none;color:#fff;cursor:pointer;padding:var(--spacing-sm);opacity:.8;transition:opacity .15s}.spelling-repeat:hover{opacity:1}.spelling-hidden-input{position:absolute;opacity:0;pointer-events:none;caret-color:transparent;color:transparent}.spelling-display{font-size:2.5rem;font-weight:300;min-height:3.5rem;border-bottom:2px solid rgba(255,255,255,.3);padding:var(--spacing-xs) var(--spacing-lg);min-width:12.5rem;text-align:center;cursor:text}.spelling-caret{display:inline-block;width:2px;height:1.2em;background-color:#fff;margin-left:1px;vertical-align:text-bottom;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.spelling-submit{background:#ffffff26;border:none;color:#fff;font-size:var(--font-size-md);font-weight:500;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s;margin-top:var(--spacing-sm)}.spelling-submit:hover:not(:disabled){background:#ffffff40}.spelling-submit:disabled{opacity:.5;cursor:not-allowed}.crash-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:var(--spacing-xl);background:#000;color:#fff;text-align:center}.crash-title{font-family:var(--font-family-fancy);font-size:2rem;font-weight:400;margin:0 0 var(--spacing-md) 0}.crash-message{font-family:var(--font-family-body);font-size:var(--font-size-base);color:var(--color-text-muted);margin:0 0 var(--spacing-lg) 0}.crash-code{font-family:monospace;font-size:var(--font-size-sm);background:#ffffff1a;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);margin-bottom:var(--spacing-xl);-webkit-user-select:all;user-select:all}.crash-reload{font-family:var(--font-family-body);font-size:var(--font-size-base);background:#ffffff26;border:none;color:#fff;padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-md);cursor:pointer;transition:background-color .15s}.crash-reload:hover{background:#ffffff40}.story-text{font-family:Eagle Lake,cursive;font-weight:400;color:#2c1810;line-height:1.5;margin:0}