:root{--color-primary: #0066CC;--color-success: #10B981;--color-error: #EF4444;--color-neutral: #6B7280;--color-neutral-light: #F3F4F6;--color-neutral-dark: #1F2937;--color-text-primary: #1F2937;--color-text-secondary: #6B7280;--color-text-subtle: #9CA3AF;--color-text-on-primary: #FFFFFF;--color-bg-primary: #FFFFFF;--color-bg-secondary: #F9FAFB;--color-bg-overlay: rgba(0, 0, 0, .5);--spacing-xs: 8px;--spacing-sm: 16px;--spacing-md: 24px;--spacing-lg: 32px;--spacing-xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color:var(--color-text-primary);background-color:var(--color-bg-secondary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3{margin:0;font-weight:600;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}.eyebrow{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-subtle);margin-bottom:var(--spacing-xs)}.subtle{color:var(--color-text-secondary);font-size:.875rem}button{font-family:inherit;font-size:1rem;font-weight:500;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease}.button{padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-sm);font-weight:500;transition:all .2s ease}.button.primary{background-color:var(--color-primary);color:var(--color-text-on-primary)}.button.primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-primary) 90%,black);transform:scale(1.02)}.button.primary:disabled{background-color:var(--color-neutral);opacity:.5;cursor:not-allowed;transform:none}.button.primary:active:not(:disabled){transform:scale(.98)}input{font-family:inherit;font-size:1rem;padding:var(--spacing-sm);border:1px solid var(--color-neutral-light);border-radius:var(--radius-sm);background-color:var(--color-bg-primary);color:var(--color-text-primary);transition:border-color .2s ease}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 20%,transparent)}input::placeholder{color:var(--color-text-subtle)}.screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-md)}.card{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--spacing-xl);max-width:600px;width:100%}.nav-home-button{width:36px;height:36px;border:2px solid var(--color-neutral-light);background-color:transparent;border-radius:var(--radius-sm);cursor:pointer;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s ease;padding:0;flex-shrink:0}.nav-home-button:hover:not(:disabled){background-color:var(--color-neutral-light);border-color:var(--color-neutral);color:var(--color-text-primary)}.nav-home-button:active:not(:disabled){transform:scale(.95)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.name-heading{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.name-input-group{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.input-label{display:block;font-size:.875rem;font-weight:500;color:var(--color-text-primary);margin-bottom:var(--spacing-xs)}.name-input{width:100%;padding:var(--spacing-sm);border:1px solid var(--color-neutral-light);border-radius:var(--radius-sm);background-color:var(--color-bg-primary);color:var(--color-text-primary);font-size:1rem;transition:border-color .2s ease,box-shadow .2s ease}.name-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 20%,transparent)}.name-input::placeholder{color:var(--color-text-subtle)}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.difficulty-card{background-color:var(--color-bg-primary);border:2px solid var(--color-neutral-light);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:all .2s ease;text-align:center;display:flex;flex-direction:column;gap:var(--spacing-xs);position:relative}.difficulty-card:hover:not(:disabled){box-shadow:var(--shadow-md);border-color:var(--color-primary)}.difficulty-card.selected{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 5%,var(--color-bg-primary))}.difficulty-card.locked{opacity:.5;cursor:not-allowed;background-color:var(--color-neutral-light)}.difficulty-card:disabled{cursor:not-allowed}.difficulty-stars{position:absolute;top:-12px;left:50%;transform:translate(-50%);background-color:var(--color-bg-primary);padding:2px var(--spacing-xs);font-size:.875rem;color:var(--color-text-secondary);letter-spacing:.1em;border:2px solid var(--color-neutral-light);border-radius:var(--radius-sm);line-height:1}.difficulty-card.selected .difficulty-stars{border-color:var(--color-primary);color:var(--color-primary)}.difficulty-card.completed .difficulty-stars{border-color:var(--color-success);color:var(--color-success)}.difficulty-card.locked .difficulty-stars{border-color:var(--color-neutral-light);color:var(--color-text-subtle)}.difficulty-title{font-size:1.125rem;font-weight:600;color:var(--color-text-primary);margin-top:var(--spacing-xs)}.difficulty-card.locked .difficulty-title{color:var(--color-text-secondary)}.difficulty-subtitle{font-size:.875rem;color:var(--color-text-secondary)}.difficulty-card.locked .difficulty-subtitle{color:var(--color-text-subtle)}.difficulty-score{font-size:.875rem;font-weight:600;color:var(--color-primary);margin-top:var(--spacing-xs)}.difficulty-card.completed{border-color:var(--color-success);background-color:color-mix(in srgb,var(--color-success) 5%,var(--color-bg-primary))}.difficulty-card.completed .difficulty-title{color:var(--color-success)}.start-button{width:100%;padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;margin-top:var(--spacing-md)}.drag-buckets-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);width:100%}.drag-area{display:flex;justify-content:center;width:100%;position:relative}.font-card-loader{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#ffffffe6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;border-radius:var(--radius-md)}.loader-spinner{display:flex;gap:var(--spacing-xs);align-items:center;justify-content:center}.spinner-dot{width:8px;height:8px;border-radius:50%;background-color:var(--color-primary);animation:loader-bounce 1.4s ease-in-out infinite both}.spinner-dot:nth-child(1){animation-delay:-.32s}.spinner-dot:nth-child(2){animation-delay:-.16s}.spinner-dot:nth-child(3){animation-delay:0s}@keyframes loader-bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1.2);opacity:1}}.draggable-card-wrapper{min-width:min(520px,92vw);height:280px;perspective:1000px;cursor:pointer}.draggable-card-wrapper.dragging{cursor:grabbing}.draggable-card-wrapper.disabled{cursor:not-allowed}.card-inner{position:relative;width:100%;height:280px;transform-style:preserve-3d}.card-front,.card-back{position:absolute;width:100%;height:280px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background-color:var(--color-bg-primary);border:2px solid var(--color-neutral-light);border-radius:var(--radius-md);padding:var(--spacing-lg) var(--spacing-xl);box-shadow:var(--shadow-md);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;user-select:none;-webkit-user-select:none;transition:all .25s ease;overflow:hidden}.card-back{transform:rotateY(180deg);overflow-y:auto;overflow-x:hidden}.draggable-card-wrapper.dragging .card-back{visibility:hidden!important;opacity:0!important;display:none!important;pointer-events:none!important;transform:rotateY(180deg) scale(0)!important}.draggable-card-wrapper.dragging .card-inner{transform:rotateY(0)!important}.draggable-card-wrapper.dragging .card-front{backface-visibility:visible!important;-webkit-backface-visibility:visible!important;transform:rotateY(0)!important}.draggable-card-wrapper:hover:not(.disabled):not(.dragging) .card-front{transform:scale(1.02);box-shadow:var(--shadow-lg)}.draggable-card-wrapper.dragging .card-front{opacity:.7;transform:scale(.95);box-shadow:var(--shadow-lg)}.draggable-card-wrapper.disabled .card-front{opacity:.6}.font-label{margin-top:var(--spacing-sm);margin:0;padding-top:16px;padding-bottom:16px;font-size:.875rem;color:var(--color-text-primary);line-height:1.5;text-transform:uppercase}.alphabet-display{font-size:clamp(16px,2.5vw,24px);line-height:1.4;color:var(--color-text-primary);margin-bottom:var(--spacing-md);word-break:break-all;max-width:100%}.font-hint{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--color-neutral-light)}.hint-title{margin:0 0 var(--spacing-xs) 0;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);font-weight:600}.hint-text{margin:0;font-size:.875rem;color:var(--color-text-primary);line-height:1.5}.flip-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:32px;height:32px;border:1px solid var(--color-neutral-light);background-color:var(--color-bg-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s ease;z-index:5;padding:0}.flip-button:hover{background-color:var(--color-bg-secondary);border-color:var(--color-primary);transform:scale(1.1)}.flip-button:active{transform:scale(.95)}.card-back .flip-button{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm)}.buckets-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--spacing-md);width:100%;max-width:800px}@media (min-width: 640px){.buckets-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 1024px){.buckets-grid{grid-template-columns:repeat(3,1fr)}}.bucket{position:relative;border:2px dashed var(--color-neutral);border-radius:var(--radius-sm);padding:var(--spacing-md);min-height:100px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:var(--spacing-xs);background-color:var(--color-bg-secondary);transition:all .2s ease}.bucket:hover{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 5%,var(--color-bg-secondary));transform:scale(1.05)}.bucket.drag-over{border:2px solid var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-secondary))}.bucket.correct{border:2px solid var(--color-success);background-color:color-mix(in srgb,var(--color-success) 10%,var(--color-bg-primary))}.bucket.incorrect{border:2px solid var(--color-error);background-color:color-mix(in srgb,var(--color-error) 10%,var(--color-bg-primary))}.bucket-label{font-weight:600;font-size:1rem;color:var(--color-text-primary)}.bucket-description{font-size:.875rem;color:var(--color-text-secondary)}.bucket-check{position:absolute;right:var(--spacing-xs);top:var(--spacing-xs);width:28px;height:28px;border-radius:50%;background-color:var(--color-success);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:var(--shadow-sm)}.bucket-x{position:absolute;right:var(--spacing-xs);top:var(--spacing-xs);width:28px;height:28px;border-radius:50%;background-color:var(--color-error);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;box-shadow:var(--shadow-sm)}.learning-moment-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:1000}.learning-moment-card{background-color:var(--color-bg-primary);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-md);max-width:680px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:0}.learning-moment-header{display:flex;align-items:flex-start;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--color-neutral-light)}.teacher-icon{width:48px;height:48px;border-radius:var(--radius-sm);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-bg-secondary));color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0}.header-content{flex:1}.teacher-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-subtle);font-weight:600;margin:0 0 4px}.teacher-title{margin:0;font-size:1.5rem;font-weight:600;color:var(--color-text-primary)}.close-button{width:36px;height:36px;border:2px solid var(--color-neutral-light);background-color:transparent;border-radius:var(--radius-sm);font-size:1.5rem;cursor:pointer;color:var(--color-text-secondary);display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.close-button:hover{background-color:var(--color-neutral-light);border-color:var(--color-neutral)}.choice-comparison-visual{display:flex;align-items:center;gap:var(--spacing-sm);justify-content:center;flex-wrap:wrap;margin:var(--spacing-sm) 0;padding:var(--spacing-xs) 0}.choice-box{border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:160px;align-items:center;text-align:center;box-shadow:0 2px 8px #00000014}.choice-box.wrong{background-color:color-mix(in srgb,var(--color-error) 12%,var(--color-bg-primary));border:2px solid var(--color-error);color:var(--color-error)}.choice-box.correct{background-color:color-mix(in srgb,var(--color-success) 12%,var(--color-bg-primary));border:2px solid var(--color-success);color:var(--color-success)}.choice-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.8;font-weight:600}.choice-box strong{font-size:1.25rem;font-weight:700;letter-spacing:.02em}.choice-arrow{font-size:2rem;color:var(--color-text-secondary);font-weight:300;opacity:.6}.summary-statement{margin:var(--spacing-sm) 0;padding:var(--spacing-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-primary)),color-mix(in srgb,var(--color-primary) 4%,var(--color-bg-primary)));border-radius:var(--radius-md);border-left:4px solid var(--color-primary);text-align:center}.summary-text{font-size:1rem;color:var(--color-text-primary);line-height:1.5}.summary-highlight{color:var(--color-primary);font-weight:700;font-size:1.125rem}.learning-sample{display:flex;flex-direction:column;gap:var(--spacing-xs);text-align:center;margin:var(--spacing-sm) 0;padding:var(--spacing-sm);background-color:var(--color-bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--color-neutral-light)}.learning-sample-text{font-size:clamp(24px,4vw,36px);font-weight:400;color:var(--color-text-primary);line-height:1.2;letter-spacing:.02em}.learning-sample-name{font-size:.875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--color-text-secondary);font-weight:600;margin-top:var(--spacing-xs)}.concept-section{margin:var(--spacing-sm) 0 var(--spacing-sm) 0;padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-neutral-light)}.section-title{margin:0 0 var(--spacing-xs) 0;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.875rem;color:var(--color-text-secondary);letter-spacing:.12em}.concept-body{margin:0 0 var(--spacing-sm) 0;color:var(--color-text-primary);line-height:1.5;font-size:.9375rem}.visual-example{margin:var(--spacing-sm) 0 0 0;padding:var(--spacing-sm);background-color:color-mix(in srgb,var(--color-neutral-light) 30%,transparent);border-radius:var(--radius-md)}.visual-example-monospace{display:flex;align-items:stretch;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.visual-example-monospace-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex:1;min-width:140px}.visual-example-box{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background-color:var(--color-bg-primary);border-radius:var(--radius-md);border:1px solid var(--color-neutral-light);width:100%}.visual-char{font-size:2rem;font-weight:400;color:var(--color-text-primary);font-family:Courier New,monospace;min-width:1.2em;text-align:center}.visual-example-label{font-size:.875rem;color:var(--color-text-secondary);text-align:center;font-weight:500}.visual-example-aperture{display:flex;align-items:stretch;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.visual-example-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex:1;min-width:140px;padding:var(--spacing-sm);background-color:var(--color-bg-primary);border:1px solid var(--color-neutral-light);border-radius:var(--radius-md)}.visual-example-letters{font-size:4rem;font-weight:400;color:var(--color-text-primary);line-height:1;letter-spacing:.1em;margin-bottom:var(--spacing-xs)}.visual-example-aperture .visual-example-letters{font-size:4.5rem;letter-spacing:.15em}.visual-example-stress{display:flex;align-items:stretch;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.visual-example-stress-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex:1;min-width:140px;padding:var(--spacing-sm);background-color:var(--color-bg-primary);border:1px solid var(--color-neutral-light);border-radius:var(--radius-md)}.stress-circle{position:relative;width:100px;height:100px;border:2px solid var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);margin-bottom:var(--spacing-xs)}.stress-letter{font-size:4rem;font-weight:400;color:var(--color-text-primary);line-height:1;z-index:1;position:relative;font-style:normal}.stress-line{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.visual-example-contrast{display:flex;align-items:stretch;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.visual-example-contrast-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);flex:1;min-width:140px;padding:var(--spacing-sm);background-color:var(--color-bg-primary);border:1px solid var(--color-neutral-light);border-radius:var(--radius-md)}.contrast-bars{display:flex;align-items:flex-end;justify-content:center;gap:var(--spacing-xs);height:70px;margin-bottom:var(--spacing-xs)}.contrast-bar{border-radius:2px;transition:all .2s ease}.visual-example-label-main{font-size:.875rem;font-weight:700;color:var(--color-text-primary);text-align:center;margin-top:var(--spacing-xs)}.visual-example-label-sub{font-size:.75rem;color:var(--color-text-secondary);text-align:center;margin-top:2px;font-weight:400}.identify-section{margin:var(--spacing-sm) 0}.tip-list{margin:var(--spacing-xs) 0 0 0;padding:0;list-style:none;color:var(--color-text-primary);line-height:1.5}.tip-list li{display:flex;align-items:flex-start;gap:var(--spacing-xs);margin-bottom:var(--spacing-xs);padding-left:0}.tip-bullet{display:inline-block;width:8px;height:8px;border-radius:50%;background-color:var(--color-primary);flex-shrink:0;margin-top:.5em}.tip-list li:last-child{margin-bottom:0}.pro-tip{margin:var(--spacing-sm) 0 var(--spacing-sm) 0;padding:var(--spacing-sm);background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 12%,var(--color-bg-primary)),color-mix(in srgb,var(--color-primary) 8%,var(--color-bg-primary)));border-radius:var(--radius-md);border:2px solid color-mix(in srgb,var(--color-primary) 20%,transparent);box-shadow:0 2px 12px #0000000f}.pro-tip .section-title{margin-bottom:var(--spacing-xs);color:var(--color-primary)}.pro-tip p{margin:0;color:var(--color-text-primary);line-height:1.5;font-size:.9375rem;font-weight:500}.try-again-button{width:100%;margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);font-size:.9375rem;font-weight:600}.emoji-burst{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:999}.emoji-burst-item{position:absolute;left:var(--x);top:var(--y);font-size:var(--size);animation:emoji-burst 1.2s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--delay);transform:translate(-50%,-50%) scale(.6);filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));will-change:transform,opacity}@keyframes emoji-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}8%{opacity:1;transform:translate(-50%,-50%) scale(1)}40%{transform:translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1)}to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.7)}}.quiz-frame{width:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl);padding:var(--spacing-md)}.quiz-content-wrapper{width:100%;position:relative}.quiz-header{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-sm);width:100%;position:relative}.quiz-header-top{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:520px}.quiz-header h2{margin:0;font-size:2rem;font-weight:600;color:var(--color-text-primary)}.progress{min-width:220px;text-align:center;display:flex;flex-direction:column;gap:var(--spacing-xs);width:100%;max-width:400px}.progress-label{font-weight:600;color:var(--color-text-secondary);font-size:.875rem}.progress-bar{height:8px;border-radius:999px;background-color:var(--color-neutral-light);overflow:hidden;width:100%}.progress-bar-fill{height:100%;background-color:var(--color-primary);border-radius:999px;transition:width .3s ease}.font-content{display:flex;flex-direction:column;gap:var(--spacing-sm);user-select:none;-webkit-user-select:none}.font-sample{font-size:clamp(32px,6vw,64px);font-weight:400;color:var(--color-text-primary);line-height:1.2}.font-meta{font-size:.875rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:500}.success-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--color-success);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);font-weight:600;z-index:100;pointer-events:none;animation:fade-in-out 1.2s ease}@keyframes fade-in-out{0%,to{opacity:0;transform:translate(-50%,-50%) scale(.9)}20%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}}.level-intro-card{text-align:center;display:flex;flex-direction:column;gap:var(--spacing-md);position:relative}.level-intro-card h2{margin:var(--spacing-xs) 0 var(--spacing-sm) 0}.level-intro-card .button{margin-top:var(--spacing-sm)}.result-card{text-align:center;display:flex;flex-direction:column;gap:0;max-width:640px}.result-card .eyebrow{margin-bottom:var(--spacing-xs)}.result-card h1{margin:0 0 var(--spacing-sm) 0}.score{display:flex;justify-content:center;align-items:baseline;gap:var(--spacing-sm);margin:var(--spacing-sm) 0 var(--spacing-xs) 0}.score-number{font-size:3rem;font-weight:700;color:var(--color-text-primary);line-height:1}.score-label{font-size:1.25rem;color:var(--color-text-secondary);font-weight:500}.recap{text-align:left;display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-neutral-light)}.recap h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--color-text-primary)}.recap-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-neutral-light)}.recap-sample{font-size:1.5rem;min-width:120px;text-align:center;font-weight:400;color:var(--color-text-primary);line-height:1.2}.recap-title{margin:0 0 var(--spacing-xs) 0;font-weight:600;font-size:1rem;color:var(--color-text-primary)}.recap-item .subtle{margin:0;font-size:.875rem;line-height:1.5}.result-card .subtle{margin-bottom:var(--spacing-md)}.unlock-section{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--color-neutral-light);text-align:center}.unlock-section .eyebrow{margin-bottom:var(--spacing-xs)}.unlock-heading{margin:0 0 var(--spacing-xs) 0;font-size:1.75rem;font-weight:700;color:var(--color-primary)}.unlock-description{margin:0;color:var(--color-text-secondary);font-size:.9375rem;line-height:1.5}.action-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding-top:var(--spacing-sm)}.restart-button{width:100%}.retry-button{width:100%;background-color:transparent;border:2px solid var(--color-neutral-light);color:var(--color-text-primary)}.retry-button:hover:not(:disabled){background-color:var(--color-neutral-light);border-color:var(--color-neutral)}.nav-home-button-text{width:100%;background-color:transparent;border:2px solid var(--color-neutral-light);color:var(--color-text-secondary);margin-top:var(--spacing-xs);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm);font-size:.875rem}.nav-home-button-text:hover:not(:disabled){background-color:var(--color-neutral-light);border-color:var(--color-neutral);color:var(--color-text-primary)}.nav-home-button-text svg{flex-shrink:0}.app{min-height:100vh;width:100%}