*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:root{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fffffff2;background-color:#0a0a0f;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", Consolas, Monaco, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 2rem;--text-4xl: 2.5rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--color-primary: #6366f1;--color-primary-light: #818cf8;--color-secondary: #8b5cf6;--color-success: #10b981;--color-success-light: #6ee7b7;--color-success-text: #4ade80;--color-error: #ef4444;--color-error-light: #f87171;--color-error-text: #f87171;--color-warning: #f97316;--color-info: #3b82f6;--color-gold: #fbbf24;--cat-fundamentals: #10b981;--cat-nomenclature: #6366f1;--cat-calculations: #f59e0b;--cat-structure: #ec4899;--text-primary: rgba(255, 255, 255, .95);--text-secondary: rgba(255, 255, 255, .7);--text-muted: rgba(255, 255, 255, .5);--surface-bg: #0a0a0f;--surface-overlay: rgba(255, 255, 255, .05);--surface-1: rgba(255, 255, 255, .03);--surface-2: rgba(255, 255, 255, .06);--surface-3: rgba(255, 255, 255, .09);--border-subtle: rgba(255, 255, 255, .08);--border-default: rgba(255, 255, 255, .12);--border-strong: rgba(255, 255, 255, .2);--border-primary: rgba(255, 255, 255, .2);--border-1: rgba(255, 255, 255, .08);--border-2: rgba(255, 255, 255, .12);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .15);--shadow-md: 0 4px 16px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .25);--shadow-button: 0 4px 15px rgba(99, 102, 241, .4);--shadow-button-hover: 0 6px 20px rgba(99, 102, 241, .5);--shadow-glow: 0 0 20px rgba(99, 102, 241, .5);--shadow-card: 0 4px 20px rgba(0, 0, 0, .15);--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .25);--gradient-primary: linear-gradient(135deg, #6366f1, #8b5cf6);--gradient-success: linear-gradient(135deg, #10b981, #059669);--gradient-error: linear-gradient(135deg, #ef4444, #dc2626);--gradient-warning: linear-gradient(135deg, #f97316, #ea580c);--gradient-info: linear-gradient(135deg, #3b82f6, #2563eb);--gradient-gold: linear-gradient(135deg, #fbbf24, #f59e0b);--gradient-card-front: linear-gradient(135deg, #2d2d3a, #1e1e28);--gradient-card-back: linear-gradient(135deg, #1e3a2f, #1a2e26);--gradient-hero: linear-gradient(135deg, rgba(99, 102, 241, .1), rgba(139, 92, 246, .1));--duration-fast: .15s;--duration-base: .2s;--duration-slow: .3s;--duration-enter: .4s;--anim-duration-fast: .15s;--anim-duration-base: .2s;--anim-duration-slow: .3s;--anim-duration-enter: .4s;--ease-default: ease;--ease-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out-smooth: cubic-bezier(.4, 0, .2, 1);--transition-base: .2s ease;--transition-fast: .15s ease;--transition-slow: .3s ease;--z-base: 0;--z-dropdown: 10;--z-sticky: 20;--z-fixed: 30;--z-modal-backdrop: 40;--z-modal: 50;--z-toast: 60;--z-celebration: 70;--container-width: 600px;--container-width-wide: 700px;--panel-padding: 2rem 1.5rem;--panel-padding-mobile: 1.5rem 1rem;--panel-gap: 1.5rem;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--vh: 1vh}html{overflow-x:hidden;touch-action:manipulation}html,body{touch-action:manipulation;-ms-touch-action:manipulation}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;max-width:100vw;overflow-x:hidden}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:not(:focus-visible),[role=button]:focus:not(:focus-visible){outline:none}button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}@keyframes success-pop{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes slide-down-fade{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes ripple{0%{transform:scale(0);opacity:.4}to{transform:scale(2.5);opacity:0}}@keyframes highlight-change{0%{background-color:transparent}30%{background-color:#6366f14d}to{background-color:transparent}}.question-progress{border-radius:4px;padding:0 .25rem;transition:background-color var(--anim-duration-slow) ease-out}.question-progress.highlight{animation:highlight-change var(--anim-duration-enter) var(--ease-in-out-smooth)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(prefers-color-scheme:light){:root{color:#000000e6;background-color:#fafafa;--text-primary: rgba(0, 0, 0, .9);--text-secondary: rgba(0, 0, 0, .7);--text-muted: rgba(0, 0, 0, .5);--surface-bg: #fafafa;--surface-overlay: rgba(0, 0, 0, .05);--surface-1: rgba(0, 0, 0, .02);--surface-2: rgba(0, 0, 0, .04);--surface-3: rgba(0, 0, 0, .06);--border-subtle: rgba(0, 0, 0, .08);--border-default: rgba(0, 0, 0, .12);--border-strong: rgba(0, 0, 0, .2);--border-primary: rgba(0, 0, 0, .15);--border-1: rgba(0, 0, 0, .06);--border-2: rgba(0, 0, 0, .1);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);--shadow-card: 0 4px 20px rgba(0, 0, 0, .08);--shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .12);--gradient-card-front: linear-gradient(135deg, #f5f5f7, #e8e8ec);--gradient-card-back: linear-gradient(135deg, #e8f5e9, #e0f2e1);--color-success-text: #16a34a;--color-error-text: #dc2626}a:hover{color:#747bff}button{background-color:#f9f9f9}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:inherit;font-weight:500;text-decoration:none;cursor:pointer;border:none;border-radius:var(--radius-md);transition:all var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn--sm{padding:var(--space-2) var(--space-3);font-size:.875rem;min-height:36px}.btn--md{padding:var(--space-3) var(--space-6);font-size:1rem;min-height:44px}.btn--lg{padding:var(--space-4) var(--space-8);font-size:1.125rem;min-height:52px}.btn--full{width:100%}.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-button)}.btn--primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.btn--primary:active:not(:disabled){transform:translateY(0)}.btn--secondary{background:var(--surface-overlay);color:var(--text-primary);border:1px solid var(--border-primary)}.btn--secondary:hover:not(:disabled){background:#6366f11a;border-color:#6366f166;transform:translateY(-2px)}.btn--secondary:active:not(:disabled){transform:translateY(0)}.btn--success{background:var(--gradient-success);color:#fff;box-shadow:0 4px 15px #10b98166}.btn--success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98180}.btn--success:active:not(:disabled){transform:translateY(0)}.btn--danger{background:var(--gradient-error);color:#fff;box-shadow:0 4px 15px #ef444466}.btn--danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ef444480}.btn--danger:active:not(:disabled){transform:translateY(0)}.btn--ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border-primary)}.btn--ghost:hover:not(:disabled){background:var(--surface-overlay);color:var(--text-primary);border-color:var(--border-2)}.btn--icon{padding:var(--space-2);aspect-ratio:1;min-height:auto}.btn--icon.btn--sm{width:36px}.btn--icon.btn--md{width:44px}.btn--icon.btn--lg{width:52px}.btn--loading{color:transparent;pointer-events:none}.btn--loading:after{content:"";position:absolute;width:1.25em;height:1.25em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btn-spin .75s linear infinite}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:scale(0);opacity:0;transition:transform .4s ease,opacity .4s ease;border-radius:inherit}.btn:active:not(:disabled):before{transform:scale(2.5);opacity:0;transition:transform 0s,opacity 0s;animation:btn-ripple var(--anim-duration-slow) var(--ease-out-expo)}@keyframes btn-ripple{0%{transform:scale(0);opacity:.4}to{transform:scale(2.5);opacity:0}}@media(prefers-color-scheme:light){.btn--secondary{background:#fff;border-color:var(--border-primary);color:var(--text-primary)}.btn--secondary:hover:not(:disabled){background:#6366f114}.btn--ghost{background:transparent;color:var(--text-muted)}.btn--ghost:hover:not(:disabled){background:var(--surface-overlay);color:var(--text-primary)}}.btn--subtle{background:transparent;color:var(--text-muted);border:none;font-weight:500}.btn--subtle:hover:not(:disabled){color:var(--text-primary);background:var(--surface-overlay)}.next-button{padding:var(--space-3) var(--space-8);font-size:1rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-button);min-height:44px}.next-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.next-button:active:not(:disabled){transform:translateY(0)}.done-button{padding:var(--space-3) var(--space-8);font-size:1rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);background:var(--gradient-primary);color:#fff;box-shadow:var(--shadow-button);min-height:44px}.done-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.done-button:active:not(:disabled){transform:translateY(0)}.end-button{padding:var(--space-3) var(--space-6);font-size:1rem;font-weight:500;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);background:transparent;color:var(--text-muted);min-height:44px}.end-button:hover:not(:disabled){color:var(--text-primary);background:var(--surface-overlay)}.btn--warning{background:var(--gradient-warning);color:#fff;box-shadow:0 4px 15px #f9731666}.btn--warning:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f9731680}.btn--warning:active:not(:disabled){transform:translateY(0)}.btn-action{width:100%;height:52px;font-weight:var(--font-semibold, 600)}.btn-row{display:flex;gap:var(--space-3)}.btn-row>*{flex:1}.srs-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.srs-btn{height:56px;font-size:var(--text-base, 1rem);font-weight:var(--font-semibold, 600);border-radius:var(--radius-md);border:none;color:#fff;cursor:pointer;transition:all var(--transition-base);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.srs-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.srs-btn:disabled{opacity:.5;cursor:not-allowed}.srs-btn--again{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #dc26264d}.srs-btn--again:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #dc262666}.srs-btn--again:active:not(:disabled){transform:translateY(0)}.srs-btn--hard{background:linear-gradient(135deg,#ea580c,#c2410c);box-shadow:0 4px 12px #ea580c4d}.srs-btn--hard:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #ea580c66}.srs-btn--hard:active:not(:disabled){transform:translateY(0)}.srs-btn--good{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px #16a34a4d}.srs-btn--good:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #16a34a66}.srs-btn--good:active:not(:disabled){transform:translateY(0)}.srs-btn--easy{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #2563eb4d}.srs-btn--easy:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #2563eb66}.srs-btn--easy:active:not(:disabled){transform:translateY(0)}.srs-btn__interval{font-size:var(--text-xs, .75rem);font-weight:var(--font-normal, 400);opacity:.85}@media(max-width:480px){.btn--sm{min-height:40px;padding:var(--space-2) var(--space-4)}.btn--md{min-height:48px}.btn--lg{min-height:56px}.srs-btn{height:52px}}.card{background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-base)}.card--interactive{cursor:pointer}.card--interactive:hover{background:var(--surface-2);border-color:var(--border-2);transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}.card--interactive:active{transform:translateY(-1px)}.card--highlight{border-color:#6366f14d;background:linear-gradient(135deg,#6366f114,#8b5cf60d)}.card--highlight:hover{border-color:#6366f180;background:linear-gradient(135deg,#6366f11f,#8b5cf614)}.card--inset{background:var(--surface-overlay);box-shadow:inset 0 1px 3px #0000001a}.card--success{background:#22c55e1a;border-color:#22c55e4d}.card--error{background:#ef44441a;border-color:#ef44444d}.card--sm{padding:var(--space-4);border-radius:var(--radius-md)}.card--lg{padding:var(--space-8);border-radius:var(--radius-xl)}.card--accent{position:relative;overflow:hidden}.card--accent:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent, var(--color-primary));opacity:0;transition:opacity var(--transition-base)}.card--accent:hover:before{opacity:1}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.card__title{margin:0;font-size:1rem;font-weight:600;color:var(--text-primary);line-height:1.3}.card__subtitle{margin:0;font-size:.875rem;color:var(--text-muted);line-height:1.5}.card__icon{font-size:1.75rem;line-height:1;flex-shrink:0}.card__footer{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-1)}.card-grid{display:grid;gap:var(--space-4)}.card-grid--2{grid-template-columns:repeat(2,1fr)}.card-grid--3{grid-template-columns:repeat(3,1fr)}.card-grid--auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}@media(prefers-color-scheme:light){.card{background:#fff;border-color:var(--border-1)}.card--interactive:hover{background:#00000005;box-shadow:var(--shadow-card-hover)}.card--highlight{background:linear-gradient(135deg,#6366f10f,#8b5cf60a)}.card--highlight:hover{background:linear-gradient(135deg,#6366f11a,#8b5cf60f)}.card--inset{background:#00000005;box-shadow:inset 0 1px 3px #0000000d}.card--success{background:#22c55e14;border-color:#22c55e40}.card--error{background:#ef444414;border-color:#ef444440}.card__title{color:#000000e6}}@media(max-width:768px){.card-grid--3{grid-template-columns:repeat(2,1fr)}}.card--accent-left{position:relative;padding-left:calc(var(--space-5) + 4px)}.card--accent-left:before{content:"";position:absolute;top:var(--space-3);bottom:var(--space-3);left:0;width:4px;border-radius:var(--radius-full);background:var(--card-accent, var(--color-primary))}.card--accent-left.card--success:before{background:var(--color-success)}.card--accent-left.card--error:before{background:var(--color-error)}.flashcard{aspect-ratio:3 / 2;max-width:340px;margin:0 auto;perspective:1000px}.flashcard-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease-out, cubic-bezier(.4, 0, .2, 1))}.flashcard--flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;padding:var(--space-6);border-radius:var(--radius-xl);text-align:center}.flashcard-front{background:var(--gradient-card-front);border:2px solid rgba(99,102,241,.3)}.flashcard-back{background:var(--gradient-card-back);border:2px solid rgba(16,185,129,.3);transform:rotateY(180deg)}.flashcard-front .flashcard-text{font-size:var(--text-xl);font-weight:var(--font-semibold, 600);color:var(--text-primary)}.flashcard-back .flashcard-text{font-family:var(--font-mono);font-size:var(--text-2xl);color:var(--color-success-light)}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);font-size:var(--text-xs, .75rem);font-weight:var(--font-semibold, 600);border-radius:var(--radius-full);line-height:1.4}.badge--success{background:#10b98126;color:var(--color-success)}.badge--error{background:#ef444426;color:var(--color-error-light)}.badge--warning{background:#f9731626;color:var(--color-warning)}.badge--info{background:#3b82f626;color:var(--color-info)}.badge--primary{background:#6366f126;color:var(--color-primary-light)}.badge--gold{background:#fbbf2426;color:var(--color-gold)}.badge__icon{font-size:1em;line-height:1}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}@media(max-width:480px){.card{padding:var(--space-4);border-radius:var(--radius-md)}.card--lg{padding:var(--space-6);border-radius:var(--radius-lg)}.card-grid--2,.card-grid--3,.card-grid--auto{grid-template-columns:1fr}.flashcard{max-width:300px}.flashcard-face{padding:var(--space-4)}}@media(prefers-color-scheme:light){.flashcard-front{border-color:#6366f133}.flashcard-back{border-color:#10b98133}.flashcard-back .flashcard-text{color:var(--color-success)}}.page-transition{animation:page-enter var(--anim-duration-enter) var(--ease-out-expo)}.page-transition--exit{animation:page-exit var(--anim-duration-slow) var(--ease-in-out-smooth)}@keyframes page-enter{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes page-exit{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-10px) scale(.98)}}.page-transition--fade{animation:fade-in var(--anim-duration-slow) ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes page-enter-design{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.page-enter{animation:page-enter-design var(--duration-enter, .4s) var(--ease-out) forwards}.animate-slide-up{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.animate-slide-down{animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.animate-scale-in{animation:scale-in var(--anim-duration-slow) var(--ease-out-back) backwards}@keyframes scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.animate-pop-in{animation:pop-in var(--anim-duration-slow) var(--ease-out-back) backwards}@keyframes pop-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.stagger-children>*{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.stagger-children>*:nth-child(1){animation-delay:0ms}.stagger-children>*:nth-child(2){animation-delay:50ms}.stagger-children>*:nth-child(3){animation-delay:.1s}.stagger-children>*:nth-child(4){animation-delay:.15s}.stagger-children>*:nth-child(5){animation-delay:.2s}.stagger-children>*:nth-child(6){animation-delay:.25s}.stagger-children>*:nth-child(7){animation-delay:.3s}.stagger-children>*:nth-child(8){animation-delay:.35s}.stagger-children>*:nth-child(9){animation-delay:.4s}.stagger-children>*:nth-child(10){animation-delay:.45s}.stagger-children--fast>*{animation-duration:var(--anim-duration-slow)}.stagger-children--fast>*:nth-child(1){animation-delay:0ms}.stagger-children--fast>*:nth-child(2){animation-delay:30ms}.stagger-children--fast>*:nth-child(3){animation-delay:60ms}.stagger-children--fast>*:nth-child(4){animation-delay:90ms}.stagger-children--fast>*:nth-child(5){animation-delay:.12s}.stagger-children--fast>*:nth-child(6){animation-delay:.15s}.stagger-children--fast>*:nth-child(7){animation-delay:.18s}.stagger-children--fast>*:nth-child(8){animation-delay:.21s}.stagger-children--fast>*:nth-child(9){animation-delay:.24s}.stagger-children--fast>*:nth-child(10){animation-delay:.27s}.animate-press{transition:transform var(--anim-duration-fast) ease}.animate-press:active{transform:scale(.97)}.animate-lift{transition:transform var(--transition-base),box-shadow var(--transition-base)}.animate-lift:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)}.animate-pulse{animation:pulse 2s var(--ease-in-out-smooth) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.animate-glow{animation:glow 2s ease-in-out infinite alternate}@keyframes glow{0%{box-shadow:0 0 5px #6366f14d}to{box-shadow:0 0 15px #6366f180}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.pop{animation:pop var(--duration-slow, .3s) var(--ease-spring)}.animate-success{animation:success-pop var(--anim-duration-slow) var(--ease-out-back)}@keyframes shake-feedback{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.shake{animation:shake-feedback var(--duration-slow, .3s) ease}.animate-error{animation:shake var(--anim-duration-slow) var(--ease-out-expo)}.animate-celebrate{animation:celebrate .6s var(--ease-out-back)}@keyframes celebrate{0%{transform:scale(1)}25%{transform:scale(1.1) rotate(-3deg)}50%{transform:scale(1.15) rotate(3deg)}75%{transform:scale(1.05) rotate(-1deg)}to{transform:scale(1) rotate(0)}}.skeleton{background:linear-gradient(90deg,var(--surface-1) 25%,var(--surface-3) 50%,var(--surface-1) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton--text{height:1em;margin-bottom:.5em}.skeleton--text:last-child{width:75%}.skeleton--circle{border-radius:50%}.skeleton--button{height:44px;border-radius:var(--radius-md)}.spinner{width:24px;height:24px;border:3px solid var(--border-1);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}.spinner--sm{width:16px;height:16px;border-width:2px}.spinner--lg{width:32px;height:32px;border-width:4px}.delay-1{animation-delay:.1s!important}.delay-2{animation-delay:.2s!important}.delay-3{animation-delay:.3s!important}.delay-4{animation-delay:.4s!important}.delay-5{animation-delay:.5s!important}@keyframes checkmark-draw{0%{stroke-dashoffset:100;opacity:0}20%{opacity:1}to{stroke-dashoffset:0;opacity:1}}.checkmark-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:checkmark-draw .6s var(--ease-out-expo) forwards}@keyframes icon-bounce-big{0%{transform:scale(0);opacity:0}40%{transform:scale(1.4);opacity:1}60%{transform:scale(.85)}80%{transform:scale(1.15)}to{transform:scale(1)}}.icon-bounce-big{animation:icon-bounce-big .6s var(--ease-out-back) forwards}@keyframes success-pulse{0%{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 0 15px #10b98100}to{box-shadow:0 0 #10b98100}}.success-pulse{animation:success-pulse .8s var(--ease-out) forwards}@keyframes particle-scale{0%{transform:scale(0) rotate(0);opacity:1}to{transform:scale(1) rotate(180deg);opacity:0}}.particle-burst{position:relative}.particle-burst:before,.particle-burst:after{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;pointer-events:none}.particle-burst.active:before{background:radial-gradient(circle,rgba(16,185,129,.3) 0%,transparent 70%);animation:particle-scale .6s var(--ease-out) forwards}@keyframes gentle-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.gentle-shake{animation:gentle-shake .4s var(--ease-out) forwards}@keyframes error-fade-pulse{0%{background-color:#ef444433}50%{background-color:#ef44444d}to{background-color:#ef44441a}}.error-fade-pulse{animation:error-fade-pulse .6s var(--ease-out) forwards}@keyframes icon-wobble{0%{transform:scale(0) rotate(0)}40%{transform:scale(1.2) rotate(-10deg)}60%{transform:scale(.9) rotate(10deg)}80%{transform:scale(1.05) rotate(-5deg)}to{transform:scale(1) rotate(0)}}.icon-wobble{animation:icon-wobble .5s var(--ease-out-back) forwards}@keyframes stagger-reveal{0%{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.stagger-reveal>*{animation:stagger-reveal .4s var(--ease-out) backwards}.stagger-reveal>*:nth-child(1){animation-delay:.1s}.stagger-reveal>*:nth-child(2){animation-delay:.18s}.stagger-reveal>*:nth-child(3){animation-delay:.26s}.stagger-reveal>*:nth-child(4){animation-delay:.34s}.stagger-reveal>*:nth-child(5){animation-delay:.42s}.stagger-reveal>*:nth-child(6){animation-delay:.5s}@keyframes counter-roll{0%{opacity:0;transform:translateY(-20px) rotateX(-90deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}.counter-roll{animation:counter-roll .4s var(--ease-out-back) forwards;transform-style:preserve-3d}.btn-ripple{position:relative;overflow:hidden}.btn-ripple:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:width .4s ease,height .4s ease,opacity .4s ease}.btn-ripple:active:after{width:200%;height:200%;opacity:0;transition:0s}.press-enhanced{transition:transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.press-enhanced:active{transform:scale(.95) translateY(2px);box-shadow:0 2px 8px #0003}@keyframes success-glow{0%,to{box-shadow:0 0 5px #10b9814d,0 0 10px #10b98133}50%{box-shadow:0 0 15px #10b98166,0 0 30px #10b9814d}}.success-glow{animation:success-glow 1.5s ease-in-out}@keyframes grade-bounce{0%{transform:scale(0);opacity:0}50%{transform:scale(1.3)}70%{transform:scale(.9)}85%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.grade-bounce{animation:grade-bounce .7s var(--ease-out-back) forwards}@media(prefers-reduced-motion:reduce){.page-transition,.page-transition--exit,.page-transition--fade,.animate-slide-up,.animate-slide-down,.animate-scale-in,.animate-pop-in,.stagger-children>*,.stagger-children--fast>*,.animate-pulse,.animate-glow,.animate-success,.animate-error,.animate-celebrate,.skeleton,.checkmark-draw,.icon-bounce-big,.success-pulse,.particle-burst:before,.gentle-shake,.error-fade-pulse,.icon-wobble,.stagger-reveal>*,.counter-roll,.success-glow,.grade-bounce{animation:none!important;transition:none!important}.animate-lift:hover,.animate-press:active,.press-enhanced:active{transform:none!important}.checkmark-draw{stroke-dashoffset:0!important;opacity:1!important}.icon-bounce-big,.icon-wobble,.counter-roll,.grade-bounce{transform:scale(1)!important;opacity:1!important}.stagger-reveal>*{opacity:1!important;transform:translateY(0)!important;filter:blur(0)!important}}.input{height:48px;padding:0 var(--space-4);background:var(--surface-2);border:2px solid var(--border-default);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-base);color:var(--text-primary);transition:border-color var(--transition-base),box-shadow var(--transition-base);width:100%}.input::placeholder{color:var(--text-muted)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.input:disabled{opacity:.5;cursor:not-allowed}.input--sm{height:40px;padding:0 var(--space-3);font-size:var(--text-sm)}.input--lg{height:56px;padding:0 var(--space-5);font-size:var(--text-lg)}.input--success{border-color:var(--color-success);background:#10b9811a}.input--error{border-color:var(--color-error);background:#ef44441a}.keypad-display{min-height:56px;padding:var(--space-3) var(--space-4);background:var(--surface-2);border:2px solid var(--border-default);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-2xl);text-align:center;color:var(--text-primary);display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-base),background-color var(--transition-base)}.keypad-display--empty{color:var(--text-muted)}.keypad-display--correct{border-color:var(--color-success);background:#10b9811a;color:var(--color-success)}.keypad-display--incorrect{border-color:var(--color-error);background:#ef44441a;color:var(--color-error)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);max-width:280px;margin:0 auto}.keypad--4col{grid-template-columns:repeat(4,1fr);max-width:340px}.keypad-btn{height:52px;font-family:inherit;font-size:var(--text-lg);font-weight:var(--font-semibold, 600);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.keypad-btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--border-default)}.keypad-btn:active:not(:disabled){transform:scale(.95)}.keypad-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.keypad-btn:disabled{opacity:.5;cursor:not-allowed}.keypad-btn--action{background:var(--surface-3);color:var(--text-secondary)}.keypad-btn--submit{background:var(--gradient-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-button)}.keypad-btn--submit:hover:not(:disabled){box-shadow:var(--shadow-button-hover)}.keypad-btn--danger{color:var(--color-error)}.keypad-btn--span2{grid-column:span 2}.progress{height:8px;background:var(--surface-2);border-radius:var(--radius-full);overflow:hidden}.progress--sm{height:4px}.progress--lg{height:12px}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width .3s ease}.progress-fill--success{background:var(--gradient-success)}.progress-fill--warning{background:var(--gradient-warning)}.progress-fill--error{background:var(--gradient-error)}.progress-ring{width:56px;height:56px}.progress-ring--sm{width:40px;height:40px}.progress-ring--lg{width:72px;height:72px}.progress-ring circle{fill:none;stroke-width:4;stroke-linecap:round}.progress-ring-bg{stroke:var(--surface-2)}.progress-ring-fill{stroke:var(--color-primary);transform-origin:center;transform:rotate(-90deg);transition:stroke-dashoffset .5s ease}.progress-ring-fill--success{stroke:var(--color-success)}.progress-ring-fill--gold{stroke:var(--color-gold)}.form-field{display:flex;flex-direction:column;gap:var(--space-2)}.form-label{font-size:var(--text-sm);font-weight:var(--font-medium, 500);color:var(--text-secondary)}.form-hint{font-size:var(--text-xs);color:var(--text-muted)}.form-error{font-size:var(--text-xs);color:var(--color-error)}.select{height:48px;padding:0 var(--space-4);padding-right:var(--space-8);background:var(--surface-2);border:2px solid var(--border-default);border-radius:var(--radius-md);font-family:inherit;font-size:var(--text-base);color:var(--text-primary);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--space-3) center;transition:border-color var(--transition-base),box-shadow var(--transition-base);width:100%}.select:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.checkbox,.radio{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox input,.radio input{appearance:none;width:20px;height:20px;background:var(--surface-2);border:2px solid var(--border-default);cursor:pointer;transition:all var(--transition-fast)}.checkbox input{border-radius:var(--radius-sm)}.radio input{border-radius:50%}.checkbox input:checked,.radio input:checked{background:var(--color-primary);border-color:var(--color-primary)}.checkbox input:checked:after{content:"";display:block;width:6px;height:10px;margin:2px auto;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.radio input:checked:after{content:"";display:block;width:8px;height:8px;margin:4px auto;background:#fff;border-radius:50%}.checkbox input:focus-visible,.radio input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-color-scheme:light){.input,.keypad-display,.select{background:#fff;border-color:var(--border-default)}.keypad-btn{background:#fff}.keypad-btn:hover:not(:disabled){background:var(--surface-2)}.keypad-btn--action{background:var(--surface-1)}.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.checkbox input,.radio input{background:#fff}}@media(max-width:480px){.input{height:52px}.keypad-btn{height:56px}.keypad{gap:var(--space-3)}}.rank-icon{display:inline-block;vertical-align:middle;flex-shrink:0}.rank-icon--small{width:24px;height:24px}.rank-icon--medium{width:32px;height:32px}.rank-icon--large{width:48px;height:48px}.rank-shape{fill:var(--rank-color);stroke:var(--rank-color);stroke-width:.5;transition:fill .3s ease,stroke .3s ease}.rank-shape--stroke{fill:none;stroke:var(--rank-color);stroke-width:1;opacity:.7}.rank-shape--gem{fill:var(--rank-color);stroke:none;filter:brightness(1.2)}.rank-icon--unranked .rank-shape{fill:none;stroke-width:1.2}.rank-icon--initiate .rank-icon-group{animation:initiate-breathe 4s ease-in-out infinite;transform-origin:center}@keyframes initiate-breathe{0%,to{opacity:.85}50%{opacity:1}}.rank-icon--developing{filter:drop-shadow(0 0 1px var(--rank-color));animation:developing-glow 3.5s ease-in-out infinite}@keyframes developing-glow{0%,to{filter:drop-shadow(0 0 1px var(--rank-color))}50%{filter:drop-shadow(0 0 4px var(--rank-color))}}.rank-icon--trained{animation:trained-shimmer 3s ease-in-out infinite}.rank-icon--trained .rank-icon-group{transform-origin:center}@keyframes trained-shimmer{0%,to{filter:drop-shadow(0 0 2px var(--rank-color)) brightness(1)}50%{filter:drop-shadow(0 0 5px var(--rank-color)) brightness(1.15)}}.rank-icon--capable{animation:capable-glow 2.5s ease-in-out infinite}.rank-icon--capable .rank-icon-group{animation:capable-pulse 2.5s ease-in-out infinite;transform-origin:center}@keyframes capable-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes capable-glow{0%,to{filter:drop-shadow(0 0 2px var(--rank-color)) drop-shadow(0 0 4px #ffaa00)}50%{filter:drop-shadow(0 0 5px var(--rank-color)) drop-shadow(0 0 8px #ffcc33)}}.rank-icon--proficient{animation:proficient-gleam 2.2s ease-in-out infinite}.rank-icon--proficient .rank-icon-group{animation:proficient-pulse 2.2s ease-in-out infinite;transform-origin:center}@keyframes proficient-gleam{0%,to{filter:drop-shadow(0 0 3px var(--rank-color)) drop-shadow(0 0 6px #88cccc)}50%{filter:drop-shadow(0 0 6px var(--rank-color)) drop-shadow(0 0 10px #66ddee)}}@keyframes proficient-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.025)}}.rank-icon--advanced{animation:advanced-sparkle 2s ease-in-out infinite}.rank-icon--advanced .rank-icon-group{animation:advanced-pulse 2s ease-in-out infinite;transform-origin:center}@keyframes advanced-sparkle{0%{filter:drop-shadow(0 0 4px var(--rank-color)) drop-shadow(2px 0 5px #ff99cc) drop-shadow(-2px 0 5px #99ddff)}33%{filter:drop-shadow(0 0 5px var(--rank-color)) drop-shadow(2px 0 6px #ffcc99) drop-shadow(-2px 0 6px #cc99ff)}66%{filter:drop-shadow(0 0 5px var(--rank-color)) drop-shadow(2px 0 6px #99ffcc) drop-shadow(-2px 0 6px #ff99cc)}to{filter:drop-shadow(0 0 4px var(--rank-color)) drop-shadow(2px 0 5px #ff99cc) drop-shadow(-2px 0 5px #99ddff)}}@keyframes advanced-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.03)}}.rank-icon--expert{animation:expert-aura 1.8s ease-in-out infinite}.rank-icon--expert .rank-icon-group{animation:expert-sway 1.8s ease-in-out infinite;transform-origin:center}.rank-icon--expert .rank-shape--gem{animation:expert-gem-twinkle 1.2s ease-in-out infinite}@keyframes expert-aura{0%,to{filter:drop-shadow(0 0 4px var(--rank-color)) drop-shadow(0 0 8px #bb77ee) drop-shadow(0 0 12px #7744aa)}50%{filter:drop-shadow(0 0 6px var(--rank-color)) drop-shadow(0 0 10px #cc88ff) drop-shadow(0 0 15px #9955cc)}}@keyframes expert-sway{0%,to{transform:scale(1) rotate(0)}25%{transform:scale(1.01) rotate(1deg)}75%{transform:scale(1.01) rotate(-1deg)}}@keyframes expert-gem-twinkle{0%,to{filter:brightness(1.2)}50%{filter:brightness(1.6)}}.rank-icon--elite{animation:elite-blaze 2.5s ease-in-out infinite}.rank-icon--elite .rank-icon-group{animation:elite-breathe 2.5s ease-in-out infinite;transform-origin:center}.rank-icon--elite .rank-shape--gem{animation:elite-gem-sparkle 1.5s ease-in-out infinite}.rank-icon--elite .rank-shape--gem:nth-child(odd){animation-delay:.2s}.rank-icon--elite .rank-shape--gem:nth-child(2n){animation-delay:.5s}@keyframes elite-blaze{0%,to{filter:drop-shadow(0 0 5px var(--rank-color)) drop-shadow(0 0 10px #ff9933) drop-shadow(0 0 15px #ffcc00)}33%{filter:drop-shadow(0 0 7px var(--rank-color)) drop-shadow(0 0 12px #ffaa44) drop-shadow(0 0 18px #ffdd33)}66%{filter:drop-shadow(0 0 6px var(--rank-color)) drop-shadow(0 0 11px #ff8822) drop-shadow(0 0 16px #ffbb00)}}@keyframes elite-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes elite-gem-sparkle{0%,to{filter:brightness(1.2);opacity:1}25%{filter:brightness(1.8);opacity:1}50%{filter:brightness(1.4);opacity:.9}75%{filter:brightness(2);opacity:1}}@media(prefers-reduced-motion:reduce){.rank-icon--initiate .rank-icon-group,.rank-icon--developing,.rank-icon--trained,.rank-icon--trained .rank-icon-group,.rank-icon--capable,.rank-icon--capable .rank-icon-group,.rank-icon--proficient,.rank-icon--proficient .rank-icon-group,.rank-icon--advanced,.rank-icon--advanced .rank-icon-group,.rank-icon--expert,.rank-icon--expert .rank-icon-group,.rank-icon--expert .rank-shape--gem,.rank-icon--elite,.rank-icon--elite .rank-icon-group,.rank-icon--elite .rank-shape--gem{animation:none}.rank-icon--proficient,.rank-icon--advanced,.rank-icon--expert,.rank-icon--elite{filter:drop-shadow(0 0 3px var(--rank-color))}}.orbiting-electrons{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none;z-index:0}.electron-shell{position:absolute;top:50%;left:50%;border-radius:50%;animation:orbit linear infinite}.electron{--electron-size: 2px;position:absolute;width:var(--electron-size);height:var(--electron-size);background:radial-gradient(circle at 30% 30%,#67e8f9,#06b6d4);border-radius:50%;box-shadow:0 0 6px #06b6d4cc,0 0 12px #06b6d466;top:calc(50% - var(--electron-size) / 2);left:calc(50% - var(--electron-size) / 2);transform:rotate(var(--electron-angle)) translateY(calc(-1 * var(--shell-radius) + var(--electron-size) / 2));animation:electron-glow 1.5s ease-in-out infinite;animation-delay:var(--electron-delay)}.orbiting-electrons--large .electron{--electron-size: 3px;box-shadow:0 0 8px #06b6d4e6,0 0 16px #06b6d480}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes electron-glow{0%,to{opacity:.7;box-shadow:0 0 6px #06b6d4cc,0 0 12px #06b6d466}50%{opacity:1;box-shadow:0 0 10px #06b6d4,0 0 20px #06b6d499}}.level-atom-container .electron-shell{opacity:0;transform:scale(0);animation:shell-materialize var(--duration-slow) var(--ease-spring) forwards,orbit linear infinite;animation-delay:calc(.15s + var(--shell-index, 0) * .1s),calc(.15s + var(--shell-index, 0) * .1s)}@keyframes shell-materialize{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}.level-up-atom-container .electron-shell{opacity:0;transform:scale(0);animation:celebration-shell-appear var(--duration-enter) var(--ease-spring) forwards,orbit linear infinite;animation-delay:calc(var(--duration-enter) + var(--shell-index, 0) * .12s),calc(var(--duration-enter) + var(--shell-index, 0) * .12s)}@keyframes celebration-shell-appear{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.electron-shell{animation:none}.electron{animation:none;opacity:1}.level-atom-container .electron-shell,.level-up-atom-container .electron-shell{animation:none;opacity:1;transform:scale(1)}}.nucleus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;z-index:2}.nucleus--large{width:64px;height:64px}.nucleus-particle{position:absolute;border-radius:50%;animation:particle-pulse 2s ease-in-out infinite}.nucleus .nucleus-particle{width:4px;height:4px}.nucleus--large .nucleus-particle{width:5px;height:5px}.nucleus-proton{background:radial-gradient(circle at 30% 30%,#fca5a5,#ef4444);box-shadow:0 0 4px #ef444499,inset 0 1px 1px #ffffff4d}.nucleus-neutron{background:radial-gradient(circle at 30% 30%,#93c5fd,#3b82f6);box-shadow:0 0 4px #3b82f699,inset 0 1px 1px #ffffff4d}@keyframes particle-pulse{0%,to{opacity:.9}50%{opacity:1}}@keyframes particle-jiggle{0%,to{translate:0 0}25%{translate:calc(var(--jiggle-intensity, 0) * .3px) calc(var(--jiggle-intensity, 0) * -.3px)}50%{translate:calc(var(--jiggle-intensity, 0) * -.2px) calc(var(--jiggle-intensity, 0) * .4px)}75%{translate:calc(var(--jiggle-intensity, 0) * .4px) calc(var(--jiggle-intensity, 0) * .2px)}}.nucleus--jiggle .nucleus-particle{animation:particle-pulse 2s ease-in-out infinite,particle-jiggle calc(.8s - var(--jiggle-intensity, 0) * .05s) ease-in-out infinite}.level-atom-container .nucleus{opacity:0;transform:translate(-50%,-50%) scale(0);animation:nucleus-appear var(--duration-slow) var(--ease-spring) forwards;animation-delay:.1s}@keyframes nucleus-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}70%{transform:translate(-50%,-50%) scale(1.15)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.level-up-atom-container .nucleus{opacity:0;transform:translate(-50%,-50%) scale(0);animation:celebration-nucleus-appear var(--duration-enter) var(--ease-spring) forwards;animation-delay:var(--duration-slow)}@keyframes celebration-nucleus-appear{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.2)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media(prefers-reduced-motion:reduce){.nucleus-particle,.nucleus--jiggle .nucleus-particle{animation:none;opacity:1}.level-atom-container .nucleus,.level-up-atom-container .nucleus{animation:none;opacity:1;transform:translate(-50%,-50%) scale(1)}}.element-collection-panel{max-width:1200px;margin:0 auto;padding:var(--space-4)}.element-collection-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.element-collection-header h1{flex:1;margin:0;font-size:1.5rem;font-weight:700}.element-collection-summary{padding:.5rem 1rem;background:linear-gradient(135deg,#6366f126,#8b5cf61a);border:1px solid rgba(99,102,241,.2);border-radius:12px;font-size:.9rem;font-weight:600;color:#a5b4fc}.element-collection-description{margin:0 0 1.5rem;font-size:.9rem;color:var(--text-muted);text-align:center}.periodic-table-container{overflow-x:auto;padding-bottom:1rem}.periodic-table-grid{display:grid;grid-template-columns:repeat(18,minmax(28px,1fr));grid-template-rows:repeat(10,minmax(28px,1fr));gap:2px;min-width:500px;margin-bottom:1.5rem}.periodic-table-grid:before{content:"";grid-row:8;grid-column:1 / -1;height:8px}.element-card{display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;min-width:28px;min-height:28px;padding:2px;border-radius:4px;border:1px solid transparent;cursor:pointer;transition:all .15s ease;font-family:inherit}.element-card--unlocked{background:var(--element-color);border-color:#fff3;color:#000000d9}.element-card--unlocked:hover{transform:scale(1.15);z-index:10;box-shadow:0 4px 12px #0000004d}.element-card--locked{background:#64646426;border-color:#64646433;color:#666}.element-card--locked:hover{background:#64646440}.element-card--current{animation:current-element-pulse 2s ease-in-out infinite;box-shadow:0 0 12px #6366f199;border:2px solid rgba(99,102,241,.8)!important;z-index:5}@keyframes current-element-pulse{0%,to{box-shadow:0 0 12px #6366f199}50%{box-shadow:0 0 20px #6366f1e6,0 0 30px #6366f166}}.element-number{font-size:.5rem;font-weight:500;line-height:1;opacity:.7}.element-symbol{font-size:.75rem;font-weight:700;line-height:1.1}.element-locked{font-size:.7rem;font-weight:700}.element-group-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem;padding:1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px}.legend-item{display:flex;align-items:center;gap:.35rem;font-size:.7rem;color:var(--text-muted)}.legend-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}.element-popup-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:popup-fade-in .2s ease}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}.element-popup{position:relative;width:90%;max-width:320px;padding:2rem;background:var(--surface-1);border:2px solid var(--element-color);border-radius:20px;text-align:center;animation:popup-scale-in .25s ease}@keyframes popup-scale-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.element-popup-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.element-popup-close:hover{background:#fff3;color:#fff}.element-popup-header{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;margin:0 auto 1rem;background:var(--element-color);border-radius:16px;color:#000000d9}.element-popup-header--locked{background:#64646433;color:#666}.element-popup-number{font-size:.9rem;font-weight:500;opacity:.7}.element-popup-symbol{font-size:2.5rem;font-weight:700;line-height:1}.element-popup-name{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;color:var(--element-color)}.element-popup-group{display:inline-block;padding:.25rem .75rem;background:#ffffff0d;border-radius:20px;font-size:.8rem;color:var(--text-muted);margin-bottom:1rem}.element-popup-unlock-info{padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);text-align:left}.element-popup-unlock-info p{margin:0 0 .5rem;font-size:.85rem;color:var(--text-secondary)}.element-popup-unlock-info p:last-child{margin-bottom:0}.element-popup-unlock-info strong{color:#ffffffe6}.element-popup-locked-message{margin:1rem 0 0;font-size:.9rem;color:var(--text-muted)}@media(prefers-color-scheme:light){.element-collection-summary{background:linear-gradient(135deg,#6366f11a,#8b5cf614);border-color:#6366f126;color:#6366f1}.element-card--locked{background:#0000000f;border-color:#0000001a;color:#999}.element-group-legend{background:#00000005;border-color:#0000000f}.element-popup{background:#fff}.element-popup-close{background:#0000000f;color:#666}.element-popup-close:hover{background:#0000001a;color:#333}.element-popup-group{background:#0000000a}.element-popup-unlock-info{border-color:#00000014}.element-popup-unlock-info p{color:#666}.element-popup-unlock-info strong{color:#333}}@media(max-width:600px){.element-collection-panel{padding:var(--space-3)}.element-collection-header h1{font-size:1.25rem}.periodic-table-grid{gap:1px;grid-template-columns:repeat(18,minmax(20px,1fr));grid-template-rows:repeat(10,minmax(20px,1fr));min-width:360px}.element-card{min-width:20px;min-height:20px}.element-number{font-size:.4rem}.element-symbol{font-size:.55rem}.element-locked{font-size:.5rem}.element-group-legend{gap:.5rem 1rem;padding:.75rem}.legend-item{font-size:.6rem}.legend-color{width:10px;height:10px}.element-popup{padding:1.5rem}.element-popup-header{width:80px;height:80px}.element-popup-symbol{font-size:2rem}.element-popup-name{font-size:1.25rem}}@media(prefers-reduced-motion:reduce){.element-popup-overlay,.element-popup{animation:none}.element-card--unlocked:hover{transform:none}}.level-overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#000000b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;animation:overlay-fade-in var(--duration-base) var(--ease-default) forwards}.level-overlay:focus{outline:none}@keyframes overlay-fade-in{to{opacity:1}}.level-overlay.closing{animation:overlay-fade-out .15s ease forwards}@keyframes overlay-fade-out{to{opacity:0}}.level-overlay-card{position:relative;background:var(--surface-bg);border-radius:var(--radius-lg);padding:var(--space-4);width:95vw;max-width:1000px;height:95vh;max-height:750px;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);transform:scale(.95);animation:card-scale-in var(--duration-base) var(--ease-default) forwards;overflow:hidden}@keyframes card-scale-in{to{transform:scale(1)}}.level-overlay.closing .level-overlay-card{animation:card-scale-out .15s ease forwards}@keyframes card-scale-out{to{transform:scale(.95)}}.level-overlay-header{display:flex;justify-content:flex-end;padding:.25rem;flex-shrink:0}.level-overlay-close{z-index:var(--z-dropdown);width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border-default);border-radius:var(--radius-full);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-fast) var(--ease-default)}.level-overlay-close:hover{background:#fff3;color:#fff}.level-hero{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem;flex-shrink:0}.level-atom{position:relative;width:80px;height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transform:scale(.4);transform-origin:center}.level-element-name{font-size:1.1rem;font-weight:700;color:var(--text-primary, #fff);margin:0}.level-number{font-size:.8rem;color:var(--text-secondary, rgba(255, 255, 255, .7));margin:0;display:flex;align-items:center;gap:.5rem}.prestige-badge{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-gold);text-shadow:0 0 8px rgba(251,191,36,.5)}.level-stats-strip{display:flex;align-items:center;justify-content:center;padding:.5rem 1rem;flex-shrink:0}.rank-display{display:flex;align-items:center;gap:.75rem}.rank-info{display:flex;flex-direction:column;gap:.15rem}.rank-name{font-size:1rem;font-weight:600;color:var(--text-primary, #fff)}.rank-accuracy{font-size:.8rem;color:var(--text-secondary, rgba(255, 255, 255, .6))}.rank-name.unranked{color:var(--text-secondary, rgba(255, 255, 255, .5))}.level-overlay-card .periodic-table-container{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center}.level-overlay-card .periodic-table-grid{display:grid;grid-template-columns:repeat(18,1fr);grid-auto-rows:1fr;gap:2px;width:100%;min-width:540px}.level-overlay-card .element-card{min-width:0;min-height:0;aspect-ratio:1;width:100%;padding:1px}.level-overlay-card .element-number{display:none}.level-overlay-card .element-symbol,.level-overlay-card .element-locked{font-size:clamp(.55rem,1.8vw,.95rem)}@media(prefers-color-scheme:light){.level-overlay-close{background:#0000000f;border-color:#0000001a;color:#666}.level-overlay-close:hover{background:#0000001a;color:#333}.rank-name{color:#1e1e2e}.rank-name.unranked{color:#999}.rank-accuracy{color:#666}}@media(max-width:700px){.level-overlay-card{width:100vw;max-width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;padding:0;gap:0}.level-overlay-header{position:absolute;top:0;right:0;padding:.75rem;z-index:10}.level-overlay-close{width:36px;height:36px;background:#0000004d;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.level-hero{flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:1.5rem 1rem 1rem;margin:.75rem .75rem 0;background:linear-gradient(135deg,#6366f114,#8b5cf60d,#06b6d40d);border:1px solid rgba(255,255,255,.06);border-radius:16px;animation:hero-fade-in .3s ease .1s backwards}@keyframes hero-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.level-atom{width:160px;height:160px;transform:scale(.8);margin-bottom:.25rem;animation:atom-scale-in .4s ease .15s backwards}@keyframes atom-scale-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(.8)}}.level-element-name{font-size:1.5rem;font-weight:800;text-align:center;background:linear-gradient(135deg,#fff,#ffffffd9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:text-fade-in .3s ease .2s backwards}@keyframes text-fade-in{0%{opacity:0}to{opacity:1}}.level-number{font-size:1rem;justify-content:center;animation:text-fade-in .3s ease .25s backwards}.prestige-badge{font-size:.85rem;padding:.15rem .5rem;background:linear-gradient(135deg,#ffd70026,#ffd7000d);border:1px solid rgba(255,215,0,.25);border-radius:8px;box-shadow:0 0 12px #ffd70033}.level-stats-strip{display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;margin:.5rem .75rem;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:12px;animation:stats-fade-in .3s ease .3s backwards}@keyframes stats-fade-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.rank-display{display:flex;align-items:center;gap:.85rem}.rank-info{gap:.2rem}.rank-name{font-size:1.1rem;font-weight:700}.rank-accuracy{font-size:.85rem}.level-overlay-card .periodic-table-container{flex:1;padding:0 .5rem .75rem;align-items:flex-start;animation:table-fade-in .3s ease .35s backwards}@keyframes table-fade-in{0%{opacity:0}to{opacity:1}}.level-overlay-card .periodic-table-grid{gap:2px;min-width:100%;padding:.25rem}.level-overlay-card .element-card{border-radius:3px}.level-overlay-card .element-symbol,.level-overlay-card .element-locked{font-size:clamp(.5rem,2.5vw,.8rem)}.level-overlay-card .element-card.current-level{box-shadow:0 0 0 2px #06b6d499,0 0 8px #06b6d466}}@media(max-width:700px)and (prefers-color-scheme:light){.level-overlay-close{background:#fffc;border-color:#0000001a;color:#333}.level-hero{background:linear-gradient(135deg,#6366f10f,#8b5cf60a,#06b6d40a);border-color:#0000000f}.level-element-name{background:linear-gradient(135deg,#1e1e2e,#333);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.level-stats-strip{background:#00000005;border-color:#0000000d}.rank-name{color:#1e1e2e}.rank-accuracy{color:#666}}@media(max-width:700px)and (max-height:600px){.level-hero{padding:.75rem 1rem .5rem;margin-top:.5rem}.level-atom{width:100px;height:100px;transform:scale(.5);margin-bottom:0}@keyframes atom-scale-in{0%{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(.5)}}.level-element-name{font-size:1.2rem}.level-number{font-size:.85rem}.level-stats-strip{padding:.5rem .75rem;margin:.35rem .75rem}.rank-name{font-size:1rem}.rank-accuracy{font-size:.75rem}}@media(max-width:700px)and (max-height:500px){.level-hero{flex-direction:row;padding:.5rem 1rem;gap:1rem}.level-atom{width:60px;height:60px;transform:scale(.3)}@keyframes atom-scale-in{0%{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(.3)}}.level-element-name{font-size:1rem}.level-number{font-size:.75rem}.level-stats-strip{padding:.4rem .6rem;margin:.25rem .75rem}.rank-display{gap:.6rem}.rank-name{font-size:.9rem}.rank-accuracy{font-size:.7rem}}@media(prefers-reduced-motion:reduce){.level-overlay,.level-overlay.closing,.level-overlay-card,.level-hero,.level-atom,.level-element-name,.level-number,.level-stats-strip,.level-overlay-card .periodic-table-container{animation:none;opacity:1;transform:none}.level-atom{transform:scale(.4)}@media(max-width:700px){.level-atom{transform:scale(.8)}}@media(max-width:700px)and (max-height:600px){.level-atom{transform:scale(.5)}}@media(max-width:700px)and (max-height:500px){.level-atom{transform:scale(.3)}}}.xp-circle-container{position:fixed;top:calc(var(--safe-top, 0px) + var(--space-8));right:calc(var(--safe-right, 0px) + var(--space-8));z-index:var(--z-fixed);width:64px;height:64px;cursor:pointer;transition:transform var(--duration-base) var(--ease-default);animation:xp-bar-enter var(--duration-enter) var(--ease-spring);overflow:visible}@keyframes xp-bar-enter{0%{opacity:0;transform:scale(.8) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes xp-glow-pulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}}@keyframes xp-ring-shimmer{0%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.3) saturate(1.2)}to{filter:brightness(1) saturate(1)}}@media(prefers-reduced-motion:reduce){.xp-circle-container{animation:none}.xp-glow-orb,.xp-progress-fill{animation:none!important}}.xp-circle-container:hover{transform:scale(1.1)}.xp-circle-container:hover .xp-glow-orb{opacity:1;transform:translate(-50%,-50%) scale(1.15)}.xp-circle-container:hover .xp-level-badge{box-shadow:0 0 20px color-mix(in srgb,var(--category-color, #06b6d4) 70%,transparent),0 4px 16px #0006,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003}.xp-circle-container:focus{outline:none}.xp-circle-container:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}.xp-glow-orb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:radial-gradient(circle at center,color-mix(in srgb,var(--category-color, #06b6d4) 40%,transparent) 0%,color-mix(in srgb,var(--category-color, #06b6d4) 15%,transparent) 40%,transparent 70%);opacity:.6;animation:xp-glow-pulse 3s ease-in-out infinite;pointer-events:none;z-index:0}.xp-progress-ring{position:absolute;top:0;left:0;transform:rotate(-90deg);z-index:2}.xp-progress-bg{fill:none;stroke:#ffffff14}.xp-progress-track{fill:none;stroke:#0000004d}.xp-progress-fill{fill:none;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);animation:xp-ring-shimmer 4s ease-in-out infinite}.xp-progress-highlight{fill:none;stroke:#ffffff4d;stroke-linecap:round}.xp-level-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;box-shadow:0 0 15px color-mix(in srgb,var(--category-color, #06b6d4) 50%,transparent),0 4px 12px #0006,inset 0 2px 4px #ffffff40,inset 0 -2px 6px #00000026;z-index:3;transition:box-shadow var(--duration-base) var(--ease-default);border:1px solid rgba(255,255,255,.15)}.xp-level-badge:before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(ellipse 80% 50% at 50% 20%,rgba(255,255,255,.2) 0%,transparent 60%);pointer-events:none}.xp-element-symbol{font-size:1.15rem;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4),0 0 10px rgba(255,255,255,.2);line-height:1;z-index:1}.xp-prestige-badge{position:absolute;top:-2px;right:-2px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--gradient-gold);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--surface-bg);box-shadow:0 2px 6px #0006,0 0 12px #fbbf2480,inset 0 1px 2px #ffffff4d;z-index:var(--z-dropdown);border:1px solid rgba(255,255,255,.2)}.xp-progress-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--duration-slow) var(--ease-out),transform var(--duration-slow) var(--ease-out)}.xp-progress-view.visible{opacity:1;transform:scale(1)}.xp-progress-view.hidden{opacity:0;transform:scale(.85);pointer-events:none}.xp-atom-view{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity var(--duration-slow) var(--ease-spring),transform var(--duration-slow) var(--ease-spring)}.xp-atom-view.visible{opacity:1;transform:scale(1)}.xp-atom-view.hidden{opacity:0;transform:scale(.8);pointer-events:none}@media(prefers-reduced-motion:reduce){.xp-progress-view,.xp-atom-view{transition:none}.xp-progress-view.hidden,.xp-atom-view.hidden{transform:scale(1)}}.level-up-overlay{position:fixed;inset:0;z-index:var(--z-celebration);display:flex;align-items:center;justify-content:center;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background var(--duration-slow) var(--ease-default),backdrop-filter var(--duration-slow) var(--ease-default);cursor:pointer}.level-up-overlay.visible{background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.level-up-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);opacity:0;transform:scale(.5);transition:opacity var(--duration-slow) var(--ease-default),transform var(--duration-enter) var(--ease-spring);position:relative}.level-up-overlay.visible .level-up-content{opacity:1;transform:scale(1)}.level-up-atom-container{position:relative;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.level-up-title{font-size:var(--text-4xl);font-weight:800;color:var(--color-gold);text-shadow:0 0 20px rgba(251,191,36,.5),0 2px 4px rgba(0,0,0,.3);margin:0;animation:title-glow 1.5s ease-in-out infinite}@keyframes title-glow{0%,to{text-shadow:0 0 20px rgba(251,191,36,.5),0 2px 4px rgba(0,0,0,.3)}50%{text-shadow:0 0 40px rgba(251,191,36,.8),0 2px 4px rgba(0,0,0,.3)}}.level-up-subtitle{font-size:var(--text-xl);color:var(--text-primary);margin:0}.level-up-hint{font-size:var(--text-sm);color:var(--text-muted);margin:0;margin-top:var(--space-4)}.prestige-overlay{position:fixed;inset:0;z-index:var(--z-celebration);display:flex;align-items:center;justify-content:center;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background var(--duration-enter) var(--ease-default),backdrop-filter var(--duration-enter) var(--ease-default);cursor:default;overflow:hidden}.prestige-overlay.visible{background:#000000e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.prestige-overlay[data-phase=idle]{cursor:pointer}.prestige-overlay:focus{outline:none}.prestige-shockwave{position:absolute;width:100px;height:100px;border-radius:50%;border:4px solid rgba(255,215,0,.8);opacity:0;pointer-events:none}.prestige-overlay[data-phase=periodic-complete] .prestige-shockwave,.prestige-overlay[data-phase=prestige-reveal] .prestige-shockwave,.prestige-overlay[data-phase=idle] .prestige-shockwave{animation:shockwave 1s ease-out forwards;animation-delay:0s}@keyframes shockwave{0%{transform:scale(0);opacity:1;border-width:4px}70%{opacity:.6}to{transform:scale(8);opacity:0;border-width:1px}}.prestige-periodic-flash{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);opacity:0;transform:scale(.5);pointer-events:none;z-index:var(--z-base)}.prestige-overlay[data-phase=periodic-complete] .prestige-periodic-flash{animation:flash-appear 1.5s ease-out forwards}.prestige-periodic-number{font-size:8rem;font-weight:900;color:gold;text-shadow:0 0 60px rgba(255,215,0,.9),0 0 120px rgba(255,215,0,.6),0 0 180px rgba(255,215,0,.3);animation:number-glow .5s ease-out infinite alternate}.prestige-periodic-text{font-size:1.5rem;font-weight:700;color:#fffffff2;text-transform:uppercase;letter-spacing:.3em;text-shadow:0 0 20px rgba(255,215,0,.5)}@keyframes flash-appear{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1.1)}40%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1.2)}}@keyframes number-glow{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.prestige-particles-container{position:absolute;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center}.prestige-particle{position:absolute;border-radius:50%;pointer-events:none}.prestige-particle-burst{width:12px;height:12px;background:radial-gradient(circle,gold,#ff8c00);box-shadow:0 0 10px #ffd700cc,0 0 20px #ff8c0080;opacity:0}.prestige-overlay[data-phase=periodic-complete] .prestige-particle-burst,.prestige-overlay[data-phase=prestige-reveal] .prestige-particle-burst,.prestige-overlay[data-phase=idle] .prestige-particle-burst{animation:particle-burst 1.2s ease-out forwards;animation-delay:var(--particle-delay, 0s)}@keyframes particle-burst{0%{opacity:1;transform:rotate(var(--particle-angle)) translate(0)}20%{opacity:1}to{opacity:0;transform:rotate(var(--particle-angle)) translate(200px)}}.prestige-particle-sparkle{width:var(--sparkle-size, 6px);height:var(--sparkle-size, 6px);background:#fff;box-shadow:0 0 8px #ffffffe6,0 0 16px #ffd70080;opacity:0;left:50%;top:50%;transform:translate(var(--sparkle-x),var(--sparkle-y))}.prestige-overlay[data-phase=prestige-reveal] .prestige-particle-sparkle,.prestige-overlay[data-phase=idle] .prestige-particle-sparkle{animation:particle-sparkle 1s ease-out forwards;animation-delay:var(--sparkle-delay, 0s)}@keyframes particle-sparkle{0%{opacity:0;transform:translate(var(--sparkle-x),var(--sparkle-y)) scale(0)}30%{opacity:1;transform:translate(var(--sparkle-x),var(--sparkle-y)) scale(1.2)}to{opacity:0;transform:translate(var(--sparkle-x),var(--sparkle-y)) scale(0)}}.prestige-particle-rising{width:6px;height:6px;background:linear-gradient(135deg,gold,#fff);box-shadow:0 0 10px #ffd70099;opacity:0;bottom:-20px;left:calc(50% + var(--rising-x, 0px))}.prestige-overlay[data-phase=prestige-reveal] .prestige-particle-rising,.prestige-overlay[data-phase=idle] .prestige-particle-rising{animation:particle-rise var(--rising-duration, 3s) ease-out infinite;animation-delay:var(--rising-delay, 0s)}@keyframes particle-rise{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:.8}90%{opacity:.3}to{opacity:0;transform:translateY(-100vh) scale(.5)}}.prestige-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);opacity:0;transform:scale(.5);transition:opacity var(--duration-enter) var(--ease-default),transform .6s var(--ease-spring);position:relative;z-index:2}.prestige-overlay[data-phase=prestige-reveal] .prestige-content,.prestige-overlay[data-phase=idle] .prestige-content{opacity:1;transform:scale(1)}.prestige-rings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:220px;height:220px;pointer-events:none}.prestige-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,215,0,.4);opacity:0;animation:ring-pulse 2s ease-in-out infinite;animation-delay:var(--ring-delay, 0s);transform:scale(calc(1 + var(--ring-index, 0) * .15))}@keyframes ring-pulse{0%,to{opacity:.2;transform:scale(calc(1 + var(--ring-index, 0) * .15))}50%{opacity:.6;transform:scale(calc(1.05 + var(--ring-index, 0) * .15))}}.prestige-overlay[data-prestige-level="3"] .prestige-ring,.prestige-overlay[data-prestige-level="4"] .prestige-ring,.prestige-overlay[data-prestige-level="5"] .prestige-ring{border-color:#ffd70099;box-shadow:0 0 20px #ffd7004d}.prestige-atom-container{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;animation:prestige-glow-pulse 2s ease-in-out infinite}@keyframes prestige-glow-pulse{0%,to{filter:drop-shadow(0 0 20px rgba(255,215,0,.4))}50%{filter:drop-shadow(0 0 40px rgba(255,215,0,.8))}}.prestige-title{font-size:var(--text-3xl);font-weight:800;background:linear-gradient(135deg,var(--color-gold) 0%,#ffec8b 50%,#daa520 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;margin:0;animation:prestige-title-glow 1.5s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(251,191,36,.6))}@keyframes prestige-title-glow{0%,to{filter:drop-shadow(0 0 20px rgba(255,215,0,.6))}50%{filter:drop-shadow(0 0 40px rgba(255,215,0,1))}}.prestige-message{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--color-gold);margin:0;text-shadow:0 0 10px rgba(251,191,36,.5)}.prestige-subtitle{font-size:var(--text-base);color:var(--text-primary);margin:0}.prestige-element-note{font-size:var(--text-sm);color:var(--text-secondary);margin:0}.prestige-hint{font-size:var(--text-sm);color:var(--text-muted);margin:0;margin-top:var(--space-4);opacity:0;transition:opacity var(--duration-slow) var(--ease-default)}.prestige-overlay[data-phase=idle] .prestige-hint{opacity:1}@media(prefers-reduced-motion:reduce){.prestige-overlay,.prestige-content{transition:none}.prestige-overlay.visible{background:#000000e6;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.prestige-overlay[data-phase=prestige-reveal] .prestige-content,.prestige-overlay[data-phase=idle] .prestige-content{opacity:1;transform:scale(1)}.prestige-shockwave,.prestige-particle-burst,.prestige-particle-sparkle,.prestige-particle-rising,.prestige-ring,.prestige-periodic-flash{display:none}.prestige-atom-container,.prestige-title{animation:none;filter:drop-shadow(0 0 30px rgba(255,215,0,.7))}.prestige-hint{opacity:1;transition:none}}@media(max-width:480px){.prestige-periodic-number{font-size:5rem}.prestige-periodic-text{font-size:1rem;letter-spacing:.15em}.prestige-title{font-size:2.25rem}.prestige-message{font-size:1rem}.prestige-atom-container,.prestige-rings{width:180px;height:180px}}.rank-progress-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#0000;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:background .3s ease,backdrop-filter .3s ease;cursor:pointer}.rank-progress-overlay:focus{outline:none}.rank-progress-overlay.visible{background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.rank-progress-overlay.visible.demotion{background:#000000bf}.rank-progress-content{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;opacity:0;transform:scale(.8);transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1)}.rank-progress-overlay.visible .rank-progress-content{opacity:1;transform:scale(1)}.rank-progress-overlay.demotion .rank-progress-content{transition:opacity .3s ease,transform .3s ease}.rank-progress-title{font-size:2.5rem;font-weight:800;margin:0}.rank-progress-title.promotion{color:var(--color-gold, #ffd700);text-shadow:0 0 20px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.3);animation:title-glow 1.5s ease-in-out infinite}.rank-progress-title.demotion{color:#ffffffb3;font-size:2rem}@keyframes title-glow{0%,to{text-shadow:0 0 20px rgba(255,215,0,.5),0 2px 4px rgba(0,0,0,.3)}50%{text-shadow:0 0 40px rgba(255,215,0,.8),0 2px 4px rgba(0,0,0,.3)}}.rank-progress-tool{font-size:1rem;color:var(--text-muted, rgba(255, 255, 255, .6));margin:0;text-transform:uppercase;letter-spacing:.1em}.rank-transition{display:flex;align-items:center;gap:1.5rem;margin:1.5rem 0}.rank-badge{display:flex;flex-direction:column;align-items:center;gap:.5rem}.rank-icon-wrapper{display:flex;align-items:center;justify-content:center;width:64px;height:64px}.rank-celebration-icon{width:56px;height:56px}.rank-celebration-icon--current{width:64px;height:64px}.rank-badge .rank-name{font-size:1rem;font-weight:600}.rank-badge .rank-name.unranked{color:#5c5c5c}.rank-badge.previous{opacity:.6}.rank-badge.current{animation:badge-appear .5s ease .3s both}@keyframes badge-appear{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.rank-arrow{font-size:2rem;color:#ffffff80;animation:arrow-bounce .6s ease .2s both}.rank-arrow.promotion{color:var(--color-gold, #ffd700)}@keyframes arrow-bounce{0%{transform:translate(-10px);opacity:0}50%{transform:translate(5px)}to{transform:translate(0);opacity:1}}.rank-progress-message{font-size:1.1rem;color:#ffffffe6;margin:0}.rank-progress-overlay.demotion .rank-progress-message{color:#ffffffb3;font-size:1rem}.rank-progress-hint{font-size:.875rem;color:var(--text-muted, rgba(255, 255, 255, .4));margin:0;margin-top:1rem}.celebration-particles{position:absolute;top:50%;left:50%;width:0;height:0;pointer-events:none}.particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--color);animation:particle-fly 1s ease-out var(--delay) both}@keyframes particle-fly{0%{transform:rotate(var(--angle)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--angle)) translateY(-150px) scale(0);opacity:0}}@media(max-width:480px){.rank-progress-title{font-size:2rem}.rank-progress-title.demotion{font-size:1.75rem}.rank-icon-wrapper{width:52px;height:52px}.rank-celebration-icon{width:44px;height:44px}.rank-celebration-icon--current{width:52px;height:52px}.rank-badge .rank-name{font-size:.875rem}.rank-transition{gap:1rem}.rank-arrow{font-size:1.5rem}}.achievement-card{display:flex;gap:var(--space-3);padding:var(--space-4);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);transition:all var(--duration-base) var(--ease-default)}.achievement-card:hover{background:var(--surface-2);border-color:var(--border-default)}.achievement-card--unlocked{background:linear-gradient(135deg,#10b98114,#06b6d40d);border-color:#10b98133}.achievement-card--unlocked:hover{background:linear-gradient(135deg,#10b9811f,#06b6d414);border-color:#10b9814d}.achievement-card--secret{background:var(--surface-1);border-color:var(--border-subtle);opacity:.7}.achievement-card--secret:hover{opacity:.85}.achievement-icon-wrapper{position:relative;flex-shrink:0}.achievement-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--surface-2);border-radius:var(--radius-md);font-size:var(--text-2xl)}.achievement-card--unlocked .achievement-icon{background:linear-gradient(135deg,#10b98133,#06b6d426)}.achievement-card--secret .achievement-icon{background:var(--surface-3);color:var(--text-muted);font-weight:var(--font-bold);font-size:var(--text-xl)}.achievement-unlocked-badge{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--gradient-success);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #10b98166}.achievement-unlocked-badge:after{content:"✓";font-size:10px;font-weight:var(--font-bold);color:#fff}.achievement-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}.achievement-name{margin:0;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-primary);line-height:1.3}.achievement-card--secret .achievement-name{color:var(--text-muted)}.achievement-description{margin:0;font-size:var(--text-xs);color:var(--text-secondary);line-height:1.4}.achievement-card--secret .achievement-description{font-style:italic;color:var(--text-muted)}.achievement-progress{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}.achievement-progress-bar{flex:1;height:4px;background:var(--surface-3);border-radius:var(--radius-full);overflow:hidden}.achievement-progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}.achievement-progress-text{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.achievement-date{font-size:var(--text-xs);color:var(--color-success-light);margin-top:var(--space-1)}@media(prefers-color-scheme:light){.achievement-card{background:#fff;border-color:var(--border-subtle);box-shadow:var(--shadow-sm)}.achievement-card:hover{background:#fff;box-shadow:var(--shadow-md)}.achievement-card--unlocked{background:linear-gradient(135deg,#10b9810f,#06b6d40a);border-color:#10b98126}.achievement-card--unlocked:hover{background:linear-gradient(135deg,#10b98114,#06b6d40f)}.achievement-icon{background:var(--surface-3)}.achievement-card--unlocked .achievement-icon{background:linear-gradient(135deg,#10b98126,#06b6d41a)}.achievement-progress-bar{background:var(--surface-3)}.achievement-date{color:var(--color-success)}}@media(max-width:480px){.achievement-card{padding:var(--space-3)}.achievement-icon{width:40px;height:40px;font-size:var(--text-xl)}.achievement-card--secret .achievement-icon{font-size:var(--text-lg)}.achievement-unlocked-badge{width:16px;height:16px}.achievement-unlocked-badge:after{font-size:9px}}.achievement-panel{width:100%;max-width:var(--container-width-wide);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));min-height:100dvh}.achievement-panel-header{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-8)}.achievement-panel-header .back-button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--space-2);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.achievement-panel-header .back-button:hover{background:var(--surface-2);border-color:var(--border-default);color:var(--text-primary)}.achievement-panel-header h1{flex:1;margin:0;font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary)}.achievement-summary{display:flex;align-items:center;padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,#6366f126,#8b5cf61a);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--color-primary-light)}.achievement-categories{display:flex;flex-direction:column;gap:var(--space-8)}.achievement-category{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.achievement-category:nth-child(1){animation-delay:50ms}.achievement-category:nth-child(2){animation-delay:.1s}.achievement-category:nth-child(3){animation-delay:.15s}.achievement-category:nth-child(4){animation-delay:.2s}.achievement-category:nth-child(5){animation-delay:.25s}.achievement-category:nth-child(6){animation-delay:.3s}.achievement-category:nth-child(7){animation-delay:.35s}.achievement-category:nth-child(8){animation-delay:.4s}.achievement-category-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 var(--space-4) 0;padding-bottom:var(--space-2);border-bottom:1px solid var(--border-subtle);font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.achievement-category-count{font-size:var(--text-xs);font-weight:var(--font-medium);font-variant-numeric:tabular-nums;color:var(--text-muted);padding:var(--space-1) var(--space-2);background:var(--surface-2);border-radius:var(--radius-sm)}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3)}@media(prefers-color-scheme:light){.achievement-summary{background:linear-gradient(135deg,#6366f11a,#8b5cf614);border-color:#6366f126;color:var(--color-primary)}.achievement-category-count{background:var(--surface-3)}}@media(max-width:480px){.achievement-panel{padding:var(--space-10) var(--space-4) var(--space-6)}.achievement-panel-header{gap:var(--space-3);margin-bottom:var(--space-6)}.achievement-panel-header h1{font-size:var(--text-xl)}.achievement-summary{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}.achievement-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.achievement-category{animation:none}}.achievement-celebration-overlay{position:fixed;inset:0;z-index:var(--z-celebration);display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:#000000d9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--duration-slow) var(--ease-out);cursor:pointer}.achievement-celebration-overlay.visible{opacity:1}.achievement-celebration-content{text-align:center;max-width:320px;animation:celebration-bounce .5s var(--ease-spring)}@keyframes celebration-bounce{0%{opacity:0;transform:scale(.5) translateY(30px)}50%{transform:scale(1.05) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.achievement-celebration-icon{font-size:5rem;margin-bottom:var(--space-4);animation:icon-glow 1.5s ease-in-out infinite}@keyframes icon-glow{0%,to{filter:drop-shadow(0 0 20px rgba(251,191,36,.5))}50%{filter:drop-shadow(0 0 40px rgba(251,191,36,.8))}}.achievement-celebration-title{margin:0 0 var(--space-2) 0;font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-gold);text-transform:uppercase;letter-spacing:.1em}.achievement-celebration-name{margin:0 0 var(--space-2) 0;font-size:var(--text-3xl);font-weight:var(--font-bold);color:#fff;line-height:1.2}.achievement-celebration-description{margin:0 0 var(--space-6) 0;font-size:var(--text-base);color:var(--text-secondary);line-height:1.5}.achievement-celebration-hint{margin:0;font-size:var(--text-sm);color:var(--text-muted)}.achievement-celebration-overlay:before,.achievement-celebration-overlay:after{content:"";position:absolute;width:100%;height:100%;pointer-events:none}@media(prefers-color-scheme:light){.achievement-celebration-title{color:#f59e0b}}@media(max-width:480px){.achievement-celebration-overlay{padding:var(--space-4)}.achievement-celebration-content{max-width:280px}.achievement-celebration-icon{font-size:4rem;margin-bottom:var(--space-3)}.achievement-celebration-title{font-size:var(--text-base)}.achievement-celebration-name{font-size:var(--text-2xl)}.achievement-celebration-description{font-size:var(--text-sm);margin-bottom:var(--space-4)}.achievement-celebration-hint{font-size:var(--text-xs)}}@media(prefers-reduced-motion:reduce){.achievement-celebration-content,.achievement-celebration-icon{animation:none}.achievement-celebration-overlay{transition:none}}.animated-background{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0}.molecule{position:absolute;opacity:0;animation:bg-float-up linear infinite}.molecule__hexagon{width:60px;height:52px;position:relative}.molecule__hexagon:before{content:"";position:absolute;width:100%;height:100%;background:transparent;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);border:1px solid currentColor;box-sizing:border-box}.molecule__hexagon:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70%;height:70%;clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);border:1px solid currentColor;opacity:.5}.molecule__atom{width:8px;height:8px;border-radius:50%;background:currentColor}.molecule__atom--large{width:12px;height:12px}.molecule__atom--small{width:5px;height:5px}.molecule__structure{display:flex;align-items:center;gap:4px}.molecule__bond{width:20px;height:1px;background:currentColor}.molecule__bond--double{height:4px;background:linear-gradient(to bottom,currentColor 0%,currentColor 30%,transparent 30%,transparent 70%,currentColor 70%,currentColor 100%)}.molecule__orbital{width:40px;height:40px;border:1px solid currentColor;border-radius:50%;position:relative}.molecule__orbital:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:currentColor;border-radius:50%}.molecule__orbital:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(60deg);width:100%;height:100%;border:1px solid currentColor;border-radius:50%;opacity:.6}.molecule__ion{font-size:16px;font-weight:300;line-height:1}.molecule--primary{color:#6366f11f}.molecule--secondary{color:#8b5cf61a}.molecule--accent{color:#10b98114}@keyframes bg-float-up{0%{opacity:0;transform:translateY(100vh) rotate(0)}5%{opacity:1}95%{opacity:1}to{opacity:0;transform:translateY(-100px) rotate(360deg)}}@keyframes drift{0%,to{transform:translate(0)}50%{transform:translate(30px)}}.molecule:nth-child(1){left:5%;animation-duration:45s;animation-delay:0s}.molecule:nth-child(2){left:15%;animation-duration:55s;animation-delay:-8s}.molecule:nth-child(3){left:25%;animation-duration:50s;animation-delay:-15s}.molecule:nth-child(4){left:35%;animation-duration:60s;animation-delay:-5s}.molecule:nth-child(5){left:45%;animation-duration:48s;animation-delay:-20s}.molecule:nth-child(6){left:55%;animation-duration:52s;animation-delay:-12s}.molecule:nth-child(7){left:65%;animation-duration:58s;animation-delay:-25s}.molecule:nth-child(8){left:75%;animation-duration:46s;animation-delay:-3s}.molecule:nth-child(9){left:85%;animation-duration:54s;animation-delay:-18s}.molecule:nth-child(10){left:92%;animation-duration:50s;animation-delay:-30s}.molecule:nth-child(11){left:10%;animation-duration:62s;animation-delay:-35s}.molecule:nth-child(12){left:30%;animation-duration:47s;animation-delay:-40s}.molecule:nth-child(13){left:50%;animation-duration:56s;animation-delay:-22s}.molecule:nth-child(14){left:70%;animation-duration:51s;animation-delay:-28s}.molecule:nth-child(15){left:88%;animation-duration:59s;animation-delay:-10s}.molecule__inner{animation:drift 8s ease-in-out infinite}.molecule:nth-child(2n) .molecule__inner{animation-direction:reverse;animation-duration:10s}.molecule:nth-child(3n) .molecule__inner{animation-duration:12s}@media(prefers-color-scheme:light){.molecule--primary{color:#6366f126}.molecule--secondary{color:#8b5cf61f}.molecule--accent{color:#10b9811a}}@media(prefers-reduced-motion:reduce){.molecule{animation:none!important;opacity:.03;transform:none}.molecule__inner{animation:none!important}.molecule:nth-child(1){top:10%}.molecule:nth-child(2){top:20%}.molecule:nth-child(3){top:30%}.molecule:nth-child(4){top:40%}.molecule:nth-child(5){top:50%}.molecule:nth-child(6){top:60%}.molecule:nth-child(7){top:70%}.molecule:nth-child(8){top:80%}.molecule:nth-child(9){top:15%}.molecule:nth-child(10){top:35%}.molecule:nth-child(11){top:55%}.molecule:nth-child(12){top:75%}.molecule:nth-child(13){top:25%}.molecule:nth-child(14){top:45%}.molecule:nth-child(15){top:65%}}.mastery-indicator{display:flex;flex-direction:column;align-items:center;gap:.25rem;flex-shrink:0}.mastery-indicator--unranked{opacity:.7}.mastery-ring--unranked{background:transparent!important;border:2px dashed #5c5c5c}.mastery-ring--unranked:before{inset:2px}.mastery-ring-dash{position:relative;font-size:1rem;font-weight:700;color:#5c5c5c;line-height:1}.mastery-ring{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--rank-color, var(--color-primary-light)) calc(var(--progress) * 1%),var(--border-subtle) calc(var(--progress) * 1%));position:relative}.mastery-ring:before{content:"";position:absolute;inset:4px;border-radius:50%;background:#1a1a2e}.mastery-ring .rank-icon{position:relative}.mastery-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}.mastery-ring--elite{background:conic-gradient(var(--color-gold) 0%,var(--color-error) 25%,var(--color-gold) 50%,var(--color-error) 75%,var(--color-gold) 100%);animation:elite-glow 2s ease-in-out infinite}@keyframes elite-glow{0%,to{box-shadow:0 0 8px #fbbf2499,0 0 16px #ef444466}50%{box-shadow:0 0 12px #fbbf24cc,0 0 24px #ef444499}}@media(prefers-color-scheme:light){.mastery-ring{background:conic-gradient(var(--rank-color, var(--color-primary)) calc(var(--progress) * 1%),var(--border-subtle) calc(var(--progress) * 1%))}.mastery-ring:before{background:#fafafa}.mastery-ring--elite{background:conic-gradient(var(--color-gold) 0%,var(--color-error) 25%,var(--color-gold) 50%,var(--color-error) 75%,var(--color-gold) 100%)}}@media(max-width:480px){.mastery-ring{width:36px;height:36px}.mastery-ring:before{inset:3px}.mastery-ring .rank-icon{width:20px;height:20px}.mastery-label{font-size:.55rem}}@media(max-width:360px){.mastery-ring{width:30px;height:30px}.mastery-ring:before{inset:2px}.mastery-ring .rank-icon{width:18px;height:18px}.mastery-label{font-size:.5rem}}@media(prefers-color-scheme:light){.challenge-timer{background:#6366f11a;color:#6366f1}.challenge-timer--urgent{background:#fbbf241a;color:#d97706}.challenge-timer--critical{background:#ef44441a;color:#dc2626}}@media(prefers-reduced-motion:reduce){.challenge-timer--critical{animation:none}}@media(prefers-color-scheme:light){.challenge-card{background:#fff;border-color:#00000014}.challenge-card--complete{background:#10b9810f;border-color:#10b98126}.challenge-description{color:#000000d9}.challenge-progress-bar{background:#00000014}.challenge-xp-badge{background:#6366f11a;color:#6366f1}.difficulty-easy{background:#22c55e1a;color:#16a34a}.difficulty-medium{background:#fbbf241a;color:#d97706}.difficulty-hard{background:#ef44441a;color:#dc2626}}@media(max-width:600px){.challenge-card{flex-direction:column;align-items:stretch;gap:.75rem;padding:.75rem}.challenge-header{gap:.5rem}.challenge-icon{font-size:1.1rem}.challenge-description{font-size:.8rem}.challenge-reward{display:flex;justify-content:flex-end}}@media(prefers-reduced-motion:reduce){.challenge-claim-btn{animation:none}}.weekly-challenge-card.challenge-card--complete{background:#8b5cf61a;border-color:#8b5cf640}.weekly-progress-bar .challenge-progress-fill,.weekly-challenge-card.challenge-card--complete .challenge-progress-fill{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.weekly-bonus-claim-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:8px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;animation:weekly-bonus-glow 2s ease-in-out infinite}@keyframes weekly-bonus-glow{0%,to{box-shadow:0 0 #8b5cf666}50%{box-shadow:0 0 15px 5px #8b5cf680}}@media(prefers-color-scheme:light){.weekly-challenges-section{border-top-color:#0000001a}.weekly-challenges-header h3{color:#000000e6}.days-remaining{background:#0000000d}.weekly-challenge-card{background:#8b5cf60a;border-color:#8b5cf61f}.weekly-xp-badge{background:#8b5cf61a;color:#7c3aed}.weekly-bonus-card{background:#8b5cf60a;border-color:#8b5cf61a}.weekly-bonus-card--ready{background:#8b5cf614;border-color:#8b5cf633}.weekly-bonus-text{color:#000000d9}.weekly-bonus-pending{background:#8b5cf60d;color:#7c3aed66}.weekly-bonus-claimed{background:#8b5cf626;color:#7c3aed}}@media(prefers-reduced-motion:reduce){.weekly-bonus-claim-btn{animation:none}}.daily-challenges{background:linear-gradient(135deg,#6366f114,#8b5cf60d);border:1px solid rgba(99,102,241,.15);border-radius:16px;margin-bottom:2rem;overflow:hidden;animation:daily-challenges-fade-in var(--anim-duration-enter, .4s) var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) backwards;animation-delay:75ms}@keyframes daily-challenges-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.daily-challenges-header{display:flex;flex-direction:column;gap:.75rem;width:100%;padding:1rem 1.25rem;background:transparent;border:none;cursor:pointer;transition:background .2s ease}.daily-challenges-header:hover{background:#ffffff08}.daily-challenges-header:focus:not(:focus-visible){outline:none}.daily-challenges-header-top{display:flex;justify-content:space-between;align-items:center;width:100%}.daily-challenges-title-row{display:flex;align-items:center;gap:.75rem}.daily-challenges-header h3{margin:0;font-size:1rem;font-weight:600;color:#fffffff2}.daily-challenges-date{font-size:.75rem;color:var(--text-muted);padding:.25rem .5rem;background:#ffffff0d;border-radius:6px}.daily-challenges-summary{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:100%}.collapsed-summary-group{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;background:#6366f114;border-radius:8px}.collapsed-summary-group--weekly{background:#8b5cf614}.collapsed-summary-label{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#a5b4fc}.collapsed-summary-label--weekly{color:#c4b5fd}.collapsed-days-remaining{font-size:.65rem;font-weight:500;color:var(--text-muted)}.collapsed-summary-left,.collapsed-summary-right{display:flex;align-items:center;gap:.4rem}.daily-challenges-progress-dots{display:flex;gap:.35rem}.progress-dot{width:8px;height:8px;border-radius:50%;background:#fff3;transition:all .3s ease}.progress-dot--complete{background:#10b981;box-shadow:0 0 6px #10b98180}.progress-dot--claimed{background:#6ee7b7;opacity:.6}.progress-dot--weekly{background:#8b5cf64d}.progress-dot--weekly.progress-dot--complete{background:#a78bfa;box-shadow:0 0 6px #a78bfa80}.daily-challenges-count{font-size:.8rem;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}.daily-challenges-count--complete{color:#10b981}.daily-challenges-reward-indicator{display:flex;align-items:center;justify-content:center;width:18px;height:18px;background:linear-gradient(135deg,#f59e0b,#d97706);border-radius:50%;font-size:.7rem;font-weight:700;color:#fff;animation:reward-pulse 1.5s ease-in-out infinite}@keyframes reward-pulse{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 8px 3px #f59e0b80}}.daily-challenges-chevron{font-size:1.2rem;font-weight:600;color:var(--text-muted);transform:rotate(90deg);transition:transform .3s ease}.daily-challenges-chevron--up{transform:rotate(-90deg)}.daily-challenges-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}.daily-challenges--collapsed .daily-challenges-content{grid-template-rows:0fr}.daily-challenges-content-inner{overflow:hidden;padding:0 1.25rem 1.25rem}.daily-challenges--collapsed .daily-challenges-content-inner{padding-top:0;padding-bottom:0}.challenges-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.challenge-card{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.875rem 1rem;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:12px;transition:all .2s ease}.challenge-card--complete{background:#10b98114;border-color:#10b98133}.challenge-card--claimed{opacity:.6}.challenge-header{display:flex;align-items:flex-start;gap:.75rem;flex:1;min-width:0}.challenge-icon{font-size:1.25rem;flex-shrink:0}.challenge-info{flex:1;min-width:0}.challenge-description{margin:0 0 .5rem;font-size:.85rem;color:#ffffffe6;line-height:1.3}.challenge-progress-row{display:flex;align-items:center;gap:.5rem}.challenge-progress-bar{flex:1;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.challenge-progress-fill{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:3px;transition:width .3s ease}.challenge-card--complete .challenge-progress-fill{background:linear-gradient(90deg,#10b981,#059669)}.challenge-progress-text{font-size:.7rem;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.challenge-reward{flex-shrink:0}.challenge-xp-badge{display:inline-block;padding:.25rem .5rem;background:#6366f126;border-radius:6px;font-size:.7rem;font-weight:600;color:#a5b4fc}.challenge-claim-btn{padding:.35rem .75rem;background:linear-gradient(135deg,#10b981,#059669);border:none;border-radius:6px;font-size:.75rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease;animation:claim-pulse 1.5s ease-in-out infinite}@keyframes claim-pulse{0%,to{box-shadow:0 0 #10b98166}50%{box-shadow:0 0 8px 3px #10b98180}}.challenge-claim-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px #10b98166}.challenge-claimed-badge{display:inline-block;padding:.25rem .5rem;background:#10b98126;border-radius:6px;font-size:.7rem;font-weight:500;color:#6ee7b7}.daily-bonus{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#fbbf240d;border:1px solid rgba(251,191,36,.15);border-radius:12px;transition:all .3s ease}.daily-bonus--available{background:#fbbf241a;border-color:#fbbf244d}.daily-bonus--claimed{opacity:.6}.daily-bonus-info{display:flex;align-items:center;gap:.75rem}.daily-bonus-icon{font-size:1.5rem}.daily-bonus-text{display:flex;flex-direction:column}.daily-bonus-label{font-size:.9rem;font-weight:600;color:#fffffff2}.daily-bonus-description{font-size:.75rem;color:var(--text-muted)}.daily-bonus-xp-badge{padding:.35rem .75rem;background:#fbbf2426;border-radius:8px;font-size:.8rem;font-weight:600;color:#fcd34d}.daily-bonus-claim-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:8px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;animation:bonus-glow 2s ease-in-out infinite}@keyframes bonus-glow{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 15px 5px #f59e0b80}}.daily-bonus-claim-btn:hover{transform:scale(1.05)}.daily-bonus-claimed-badge{padding:.35rem .75rem;background:#fbbf2433;border-radius:8px;font-size:.8rem;font-weight:600;color:#fcd34d}@media(prefers-color-scheme:light){.daily-challenges{background:linear-gradient(135deg,#6366f10f,#8b5cf60a);border-color:#6366f11f}.daily-challenges-header:hover{background:#00000005}.daily-challenges-header h3{color:#000000e6}.daily-challenges-date{background:#0000000d}.progress-dot{background:#00000026}.collapsed-summary-group{background:#6366f10f}.collapsed-summary-group--weekly{background:#8b5cf60f}.collapsed-summary-label{color:#6366f1}.collapsed-summary-label--weekly{color:#8b5cf6}.collapsed-days-remaining{border-left-color:#0000001a}.progress-dot--weekly{background:#8b5cf633}.progress-dot--weekly.progress-dot--complete{background:#8b5cf6}.challenge-card{background:#fff;border-color:#00000014}.challenge-card--complete{background:#10b9810f;border-color:#10b98126}.challenge-description{color:#000000d9}.challenge-progress-bar{background:#00000014}.challenge-xp-badge{background:#6366f11a;color:#6366f1}.daily-bonus{background:#fbbf240a;border-color:#fbbf241a}.daily-bonus--available{background:#fbbf2414;border-color:#fbbf2433}.daily-bonus-label{color:#000000e6}.daily-bonus-xp-badge{background:#fbbf241a;color:#b45309}}@media(max-width:600px){.daily-challenges{margin-bottom:1.5rem}.daily-challenges-header{padding:.875rem 1rem;gap:.5rem}.daily-challenges-title-row{flex:1;min-width:0}.daily-challenges-summary{grid-template-columns:1fr 1fr;gap:.5rem}.daily-challenges-header h3{font-size:.9rem}.daily-challenges-date{font-size:.7rem;padding:.2rem .4rem}.collapsed-summary-group{padding:.35rem .5rem;gap:.25rem}.collapsed-summary-left,.collapsed-summary-right{gap:.25rem}.collapsed-summary-label,.collapsed-days-remaining{font-size:.55rem}.progress-dot{width:6px;height:6px}.daily-challenges-content-inner{padding:0 1rem 1rem}.daily-challenges--collapsed .daily-challenges-content-inner{padding-top:0;padding-bottom:0}.challenge-card{flex-direction:column;align-items:stretch;gap:.75rem;padding:.75rem}.challenge-header{gap:.5rem}.challenge-icon{font-size:1.1rem}.challenge-description{font-size:.8rem}.challenge-reward{display:flex;justify-content:flex-end}.daily-bonus{flex-direction:column;gap:.75rem;padding:.875rem}.daily-bonus-info{width:100%}}.challenge-title-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.challenge-difficulty{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:.15rem .4rem;border-radius:4px}.difficulty-easy{background:#22c55e26;color:#4ade80}.difficulty-medium{background:#fbbf2426;color:#fbbf24}.difficulty-hard{background:#ef444426;color:#f87171}.challenge-timer{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;padding:.15rem .4rem;background:#6366f126;color:#a5b4fc;border-radius:4px}.challenge-timer--urgent{background:#fbbf2426;color:#fbbf24}.challenge-timer--critical{background:#ef444426;color:#f87171;animation:timer-pulse .5s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.6}}.challenge-card--expired{opacity:.5;background:#ef44440d;border-color:#ef444426}.challenge-expired-badge{display:inline-block;padding:.25rem .5rem;background:#ef444426;border-radius:6px;font-size:.7rem;font-weight:500;color:#f87171}.challenge-start-btn{padding:.35rem .75rem;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:6px;font-size:.75rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s ease}.challenge-start-btn:hover{transform:scale(1.05);box-shadow:0 2px 8px #6366f166}.weekly-challenges-section{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.weekly-challenges-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.weekly-challenges-header h3{margin:0;font-size:1rem;font-weight:600;color:#fffffff2}.days-remaining{font-size:.75rem;color:var(--text-muted);padding:.25rem .5rem;background:#ffffff0d;border-radius:6px}.weekly-challenges-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.weekly-challenge-card{background:#8b5cf60d;border-color:#8b5cf626}.weekly-progress-bar .challenge-progress-fill{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}.weekly-xp-badge{background:#8b5cf626;color:#c4b5fd}.weekly-claim-btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.weekly-bonus-card{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:#8b5cf60d;border:1px solid rgba(139,92,246,.15);border-radius:12px;transition:all .3s ease}.weekly-bonus-card--ready{background:#8b5cf61a;border-color:#8b5cf64d}.weekly-bonus-info{display:flex;align-items:center;gap:.75rem}.weekly-bonus-icon{font-size:1.25rem}.weekly-bonus-text{font-size:.85rem;color:#ffffffd9}.weekly-bonus-claim-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#8b5cf6,#7c3aed);border:none;border-radius:8px;font-size:.85rem;font-weight:700;color:#fff;cursor:pointer;transition:all .2s ease;animation:bonus-glow 2s ease-in-out infinite}.weekly-bonus-claim-btn:hover{transform:scale(1.05)}.weekly-bonus-pending{padding:.35rem .75rem;background:#8b5cf61a;border-radius:8px;font-size:.8rem;font-weight:600;color:#c4b5fd80}.weekly-bonus-claimed{padding:.35rem .75rem;background:#8b5cf633;border-radius:8px;font-size:.8rem;font-weight:600;color:#c4b5fd}@media(prefers-color-scheme:light){.difficulty-easy{background:#22c55e1a;color:#16a34a}.difficulty-medium{background:#fbbf241a;color:#d97706}.difficulty-hard{background:#ef44441a;color:#dc2626}.challenge-timer{background:#6366f11a;color:#6366f1}.challenge-timer--urgent{background:#fbbf241a;color:#d97706}.challenge-timer--critical{background:#ef44441a;color:#dc2626}.weekly-challenges-section{border-top-color:#0000001a}.weekly-challenges-header h3{color:#000000e6}.days-remaining{background:#0000000d}.weekly-challenge-card{background:#8b5cf60a;border-color:#8b5cf61f}.weekly-xp-badge{background:#8b5cf61a;color:#7c3aed}.weekly-bonus-card{background:#8b5cf60a;border-color:#8b5cf61a}.weekly-bonus-card--ready{background:#8b5cf614;border-color:#8b5cf633}.weekly-bonus-text{color:#000000d9}.weekly-bonus-pending{background:#8b5cf60d;color:#7c3aed66}.weekly-bonus-claimed{background:#8b5cf626;color:#7c3aed}}@media(max-width:600px){.weekly-challenges-section{margin-top:1rem;padding-top:1rem}.weekly-challenges-header h3{font-size:.9rem}.weekly-bonus-card{flex-direction:column;gap:.75rem;padding:.875rem}.weekly-bonus-info{width:100%}}@media(prefers-reduced-motion:reduce){.daily-challenges,.challenge-claim-btn,.daily-bonus-claim-btn,.daily-challenges-reward-indicator,.weekly-bonus-claim-btn{animation:none}.daily-challenges-content,.daily-challenges-chevron{transition:none}.challenge-timer--critical{animation:none}}.streak-indicator{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;border-radius:16px;background:linear-gradient(135deg,#fb923c14,#f973160d);border:1px solid rgba(251,146,60,.15);transition:all .2s ease}.streak-indicator--active{background:linear-gradient(135deg,#fb923c1f,#f9731614);border-color:#fb923c40}.streak-left{display:flex;align-items:center;gap:.75rem}.streak-flame-container{position:relative;display:flex;align-items:center;justify-content:center}.streak-flame{font-size:1.75rem;animation:flame-flicker 1.5s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(249,115,22,.3))}@keyframes flame-flicker{0%,to{transform:scale(1) rotate(-2deg)}25%{transform:scale(1.05) rotate(2deg)}50%{transform:scale(1.1) rotate(-1deg)}75%{transform:scale(1.05) rotate(1deg)}}.streak-info{display:flex;flex-direction:column;gap:.125rem}.streak-count-row{display:flex;align-items:baseline;gap:.375rem}.streak-count{font-size:1.5rem;font-weight:700;color:#fb923c;font-variant-numeric:tabular-nums;line-height:1}.streak-label{font-size:.85rem;font-weight:500;color:#fb923cb3}.streak-next-hint{font-size:.7rem;color:var(--text-muted);font-weight:500}.streak-max-hint{font-size:.7rem;font-weight:600;color:#fdba74}.streak-right{flex:1;max-width:120px}.streak-bar-container{position:relative;padding-top:1.6rem}.streak-current-mult{position:absolute;top:0;transform:translate(-50%);font-size:.7rem;font-weight:700;color:#fff;white-space:nowrap;background:linear-gradient(135deg,#f97316,#ea580c);padding:.15rem .4rem;border-radius:4px;box-shadow:0 2px 6px #f9731666}.streak-progress-track{position:relative;height:6px;background:#fb923c26;border-radius:3px;overflow:hidden}.streak-progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#fb923c,#f97316);border-radius:3px;transition:width .5s ease;box-shadow:0 0 8px #f9731666}@media(prefers-color-scheme:light){.streak-indicator{background:linear-gradient(135deg,#fb923c0f,#f973160a);border-color:#fb923c1f}.streak-indicator--active{background:linear-gradient(135deg,#fb923c1a,#f973160f);border-color:#fb923c33}.streak-count{color:#ea580c}.streak-label{color:#ea580c99}.streak-progress-track{background:#fb923c1a}.streak-max-hint{color:#c2410c}}@media(max-width:600px){.streak-indicator{padding:.875rem 1rem;gap:.75rem}.streak-left{gap:.5rem}.streak-flame{font-size:1.5rem}.streak-count{font-size:1.25rem}.streak-label{font-size:.75rem}.streak-next-hint,.streak-max-hint{font-size:.65rem}.streak-right{max-width:90px}.streak-current-mult{font-size:.65rem;padding:.1rem .3rem}}@media(max-width:360px){.streak-right{display:none}}@media(prefers-reduced-motion:reduce){.streak-flame{animation:none}.streak-progress-fill{transition:none}}.home-page{max-width:var(--container-width-wide);margin:0 auto;padding:var(--space-6)}.home-hero{text-align:center;margin-bottom:2.5rem;padding:4rem 1.5rem 3.5rem;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(139,92,246,.2) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 70% 100%,rgba(99,102,241,.15) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 20% 80%,rgba(236,72,153,.1) 0%,transparent 50%),linear-gradient(180deg,#6366f114,#0f0f19f2);border-radius:28px;border:1px solid rgba(99,102,241,.25);position:relative;overflow:hidden;animation:hero-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards}@keyframes hero-fade-in{0%{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.hero-hex-grid{position:absolute;inset:0;opacity:.08;color:#8b5cf6;pointer-events:none}.hero-hex-grid svg{width:100%;height:100%}.hero-atoms{position:absolute;inset:0;pointer-events:none;overflow:hidden}.hero-atom{position:absolute;display:flex;align-items:center;justify-content:center}.atom-symbol{font-size:.9rem;font-weight:700;color:#fff9;z-index:1}.atom-orbital{position:absolute;width:32px;height:32px;border:1.5px solid rgba(139,92,246,.3);border-radius:50%;animation:orbital-pulse 3s ease-in-out infinite}@keyframes orbital-pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.2);opacity:.7}}.hero-atom--1{top:15%;left:10%;animation:float-atom 8s ease-in-out infinite}.hero-atom--2{top:25%;right:12%;animation:float-atom 7s ease-in-out infinite 1s}.hero-atom--3{bottom:20%;left:15%;animation:float-atom 9s ease-in-out infinite 2s}.hero-atom--4{bottom:25%;right:8%;animation:float-atom 6s ease-in-out infinite .5s}.hero-atom--2 .atom-orbital{border-color:#ec48994d}.hero-atom--3 .atom-orbital{border-color:#10b9814d}.hero-atom--4 .atom-orbital{border-color:#fbbf244d}.hero-atom--2 .atom-symbol{color:#ec4899b3}.hero-atom--3 .atom-symbol{color:#10b981b3}.hero-atom--4 .atom-symbol{color:#fbbf24b3}@keyframes float-atom{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-8px) rotate(5deg)}75%{transform:translateY(6px) rotate(-3deg)}}.hero-molecule{position:absolute;font-size:.75rem;font-weight:600;padding:.35rem .6rem;background:#6366f126;border:1px solid rgba(99,102,241,.25);border-radius:8px;color:#a5b4fccc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hero-molecule--1{top:18%;left:25%;animation:float-molecule 10s ease-in-out infinite}.hero-molecule--2{bottom:15%;right:20%;animation:float-molecule 12s ease-in-out infinite 1.5s;background:#ec48991f;border-color:#ec489940;color:#f472b6cc}@keyframes float-molecule{0%,to{transform:translateY(0) translate(0)}33%{transform:translateY(-10px) translate(5px)}66%{transform:translateY(5px) translate(-5px)}}.hero-orbital-decoration{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;pointer-events:none}.orbital-ring{position:absolute;top:50%;left:50%;border:1px solid rgba(139,92,246,.15);border-radius:50%}.orbital-ring--1{width:120px;height:120px;margin:-60px 0 0 -60px;animation:orbit-rotate 20s linear infinite}.orbital-ring--2{width:160px;height:80px;margin:-40px 0 0 -80px;transform:rotateX(60deg);animation:orbit-rotate 15s linear infinite reverse}.orbital-ring--3{width:180px;height:90px;margin:-45px 0 0 -90px;transform:rotateX(60deg) rotate(60deg);animation:orbit-rotate 25s linear infinite}@keyframes orbit-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.orbital-nucleus{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:radial-gradient(circle,#8b5cf6cc,#6366f166);border-radius:50%;box-shadow:0 0 20px #8b5cf680,0 0 40px #8b5cf64d}.hero-content{position:relative;z-index:2}.home-hero h1{position:relative;margin:0 0 1rem;padding-bottom:.1em;font-size:2.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.2;background:linear-gradient(135deg,#818cf8,#c084fc 40%,#f0abfc,#818cf8);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-flow 8s ease-in-out infinite;text-shadow:0 0 60px rgba(139,92,246,.3)}@keyframes gradient-flow{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.tagline-container{display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:1.15rem}.tagline-part{color:var(--text-secondary);font-weight:400;transition:all .3s ease}.tagline-divider{color:#8b5cf666;font-weight:300}.home-hero .tagline{position:relative;color:var(--text-secondary);margin:0;font-size:1.15rem;font-weight:400}.streak-section{margin-bottom:1.5rem;animation:category-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards;animation-delay:50ms}.tagline-emphasis{display:inline-block;animation:do-emphasis 1.5s ease-out .5s backwards;background:linear-gradient(135deg,#a78bfa,#f0abfc,#c084fc);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline-emphasis strong em{font-style:italic}@keyframes do-emphasis{0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0 transparent)}20%{transform:scale(1.3);filter:brightness(1.4) drop-shadow(0 0 12px rgba(139,92,246,.8))}40%{transform:scale(1.15);filter:brightness(1.2) drop-shadow(0 0 8px rgba(139,92,246,.5))}to{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0 transparent)}}.tool-category{margin-bottom:2rem;animation:category-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards}.tool-category:nth-of-type(3){animation-delay:.15s}.tool-category:nth-of-type(4){animation-delay:.3s}.tool-category:nth-of-type(5){animation-delay:.45s}.tool-category:nth-of-type(6){animation-delay:.6s}.tool-category:nth-of-type(7){animation-delay:.75s}@keyframes category-fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tool-category:last-child{margin-bottom:0}.category-header{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding-left:.25rem}.category-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:1rem}.category-icon--fundamentals{background:linear-gradient(135deg,#10b98133,#06b6d433);color:#6ee7b7}.category-icon--nomenclature{background:linear-gradient(135deg,#6366f133,#8b5cf633);color:#a5b4fc}.category-icon--calculations{background:linear-gradient(135deg,#fbbf2433,#f9731633);color:#fcd34d}.category-icon--structure{background:linear-gradient(135deg,#ec489933,#ef444433);color:#f9a8d4}.category-icon--reactions{background:linear-gradient(135deg,#22c55e33,#10b98133);color:#86efac}.category-header h2{margin:0;font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.tool-grid>*{animation:card-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards}.tool-category:nth-of-type(3) .tool-grid>*:nth-child(1){animation-delay:.25s}.tool-category:nth-of-type(3) .tool-grid>*:nth-child(2){animation-delay:.33s}.tool-category:nth-of-type(3) .tool-grid>*:nth-child(3){animation-delay:.41s}.tool-category:nth-of-type(3) .tool-grid>*:nth-child(4){animation-delay:.49s}.tool-category:nth-of-type(3) .tool-grid>*:nth-child(5){animation-delay:.57s}.tool-category:nth-of-type(4) .tool-grid>*:nth-child(1){animation-delay:.4s}.tool-category:nth-of-type(4) .tool-grid>*:nth-child(2){animation-delay:.48s}.tool-category:nth-of-type(4) .tool-grid>*:nth-child(3){animation-delay:.56s}.tool-category:nth-of-type(4) .tool-grid>*:nth-child(4){animation-delay:.64s}.tool-category:nth-of-type(4) .tool-grid>*:nth-child(5){animation-delay:.72s}.tool-category:nth-of-type(5) .tool-grid>*:nth-child(1){animation-delay:.55s}.tool-category:nth-of-type(5) .tool-grid>*:nth-child(2){animation-delay:.63s}.tool-category:nth-of-type(5) .tool-grid>*:nth-child(3){animation-delay:.71s}.tool-category:nth-of-type(5) .tool-grid>*:nth-child(4){animation-delay:.79s}.tool-category:nth-of-type(5) .tool-grid>*:nth-child(5){animation-delay:.87s}.tool-category:nth-of-type(6) .tool-grid>*:nth-child(1){animation-delay:.7s}.tool-category:nth-of-type(6) .tool-grid>*:nth-child(2){animation-delay:.78s}.tool-category:nth-of-type(6) .tool-grid>*:nth-child(3){animation-delay:.86s}.tool-category:nth-of-type(6) .tool-grid>*:nth-child(4){animation-delay:.94s}.tool-category:nth-of-type(6) .tool-grid>*:nth-child(5){animation-delay:1.02s}.tool-category:nth-of-type(7) .tool-grid>*:nth-child(1){animation-delay:.85s}.tool-category:nth-of-type(7) .tool-grid>*:nth-child(2){animation-delay:.93s}.tool-category:nth-of-type(7) .tool-grid>*:nth-child(3){animation-delay:1.01s}.tool-category:nth-of-type(7) .tool-grid>*:nth-child(4){animation-delay:1.09s}.tool-category:nth-of-type(7) .tool-grid>*:nth-child(5){animation-delay:1.17s}@keyframes card-fade-in{0%{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.tool-card{display:flex;flex-direction:column;align-items:center;padding:var(--space-4) var(--space-4) var(--space-5);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);background:var(--card-bg, var(--surface-1));border:1px solid var(--card-border, var(--border-1));text-align:center;position:relative;overflow:hidden;min-height:44px}.tool-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--card-accent, var(--color-primary));opacity:0;transition:opacity .25s ease}.tool-card:hover{background:var(--card-bg-hover, var(--surface-2));border-color:var(--card-border-hover, var(--border-2));transform:translateY(-3px);box-shadow:var(--shadow-card-hover)}.tool-card:hover:before{opacity:1}.tool-card:focus:not(:focus-visible){outline:none}.tool-card-rank{margin-bottom:var(--space-3);position:relative}.tool-card-title{margin:0 0 var(--space-1) 0;font-size:.95rem;font-weight:600;color:#fffffff2;line-height:1.3}.tool-card-rank:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--card-accent, var(--color-primary)) 15%,transparent) 0%,transparent 70%);pointer-events:none;transition:opacity .3s ease}.tool-card:hover .tool-card-rank:before{opacity:1.5}.tool-card-rank .mastery-indicator{position:static}.tool-card-rank .mastery-ring{width:48px;height:48px}.tool-card-rank .mastery-label{font-size:.6rem;margin-top:.25rem}.tool-card-desc{margin:0;font-size:.75rem;color:var(--text-muted);line-height:1.4}.tool-card--sigfig,.tool-card--units{--card-accent: #10b981;--card-bg: rgba(16, 185, 129, .08);--card-bg-hover: rgba(16, 185, 129, .12);--card-border: rgba(16, 185, 129, .15);--card-border-hover: rgba(16, 185, 129, .25)}.tool-card--compounds,.tool-card--ions{--card-accent: #6366f1;--card-bg: rgba(99, 102, 241, .08);--card-bg-hover: rgba(99, 102, 241, .12);--card-border: rgba(99, 102, 241, .15);--card-border-hover: rgba(99, 102, 241, .25)}.tool-card--electron,.tool-card--oxidation,.tool-card--model3d{--card-accent: #ec4899;--card-bg: rgba(236, 72, 153, .08);--card-bg-hover: rgba(236, 72, 153, .12);--card-border: rgba(236, 72, 153, .15);--card-border-hover: rgba(236, 72, 153, .25)}.tool-card--reactiontype,.tool-card--balance{--card-accent: #22c55e;--card-bg: rgba(34, 197, 94, .08);--card-bg-hover: rgba(34, 197, 94, .12);--card-border: rgba(34, 197, 94, .15);--card-border-hover: rgba(34, 197, 94, .25)}.tool-card--molar,.tool-card--percentcomp,.tool-card--stoich,.tool-card--limiting,.tool-card--gaslaw,.tool-card--thermo,.tool-card--solution{--card-accent: #f59e0b;--card-bg: rgba(245, 158, 11, .08);--card-bg-hover: rgba(245, 158, 11, .12);--card-border: rgba(245, 158, 11, .15);--card-border-hover: rgba(245, 158, 11, .25)}.tool-card--comprehensive{--card-accent: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)}.comprehensive-review-section{margin-bottom:2rem;animation:category-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards;animation-delay:.1s}.comprehensive-review-section .tool-card--comprehensive{width:100%;flex-direction:row;align-items:center;gap:var(--space-4);padding:var(--space-5);text-align:left;background:linear-gradient(135deg,#6366f114,#ec489914,#f59e0b14);border:1px solid rgba(139,92,246,.2)}.comprehensive-review-section .tool-card-text{flex:1;text-align:left}.comprehensive-review-section .tool-card-title,.comprehensive-review-section .tool-card-desc{text-align:left}.comprehensive-review-section .tool-card-rank{margin:0 0 0 var(--space-4)}.comprehensive-review-section .tool-card-rank:before{background:radial-gradient(circle,rgba(139,92,246,.2) 0%,transparent 70%)}.comprehensive-review-section .tool-card--comprehensive:before{background:linear-gradient(135deg,#6366f1,#ec4899,#f59e0b)}.comprehensive-review-section .tool-card--comprehensive:hover{background:linear-gradient(135deg,#6366f11f,#ec48991f,#f59e0b1f);border-color:#8b5cf64d}.progress-card{margin-top:2rem;padding:1.5rem;background:linear-gradient(135deg,#6366f114,#8b5cf60d);border:1px solid rgba(99,102,241,.15);border-radius:20px;display:flex;align-items:center;gap:1.5rem}.progress-card-info{flex:1;min-width:0}.progress-card-info h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#fffffff2}.progress-card-info p{margin:0;font-size:.9rem;color:var(--text-muted)}.progress-card-action{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#6366f126;border:1px solid rgba(99,102,241,.3);border-radius:12px;color:var(--color-primary-light);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.progress-card-action:hover{background:#6366f140;transform:translate(2px)}.progress-card-action .arrow{transition:transform .2s ease}.progress-card-action:hover .arrow{transform:translate(4px)}.progress-stats{display:flex;gap:1.5rem;margin-top:.75rem}.progress-stat{display:flex;align-items:baseline;gap:.35rem}.progress-stat-value{font-size:1.25rem;font-weight:700;color:#fffffff2}.progress-stat-label{font-size:.75rem;color:var(--text-muted)}@media(prefers-color-scheme:light){.home-hero{background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(139,92,246,.12) 0%,transparent 50%),radial-gradient(ellipse 60% 40% at 70% 100%,rgba(99,102,241,.1) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 20% 80%,rgba(236,72,153,.06) 0%,transparent 50%),linear-gradient(180deg,#6366f10d,#fffffff2);border-color:#6366f12e}.hero-hex-grid{opacity:.06;color:#6366f1}.atom-symbol{color:#00000080}.hero-atom--2 .atom-symbol{color:#db277799}.hero-atom--3 .atom-symbol{color:#05966999}.hero-atom--4 .atom-symbol{color:#d9770699}.hero-molecule{background:#6366f11a;color:#6366f1cc}.hero-molecule--2{background:#db277714;color:#db2777cc}.orbital-ring{border-color:#6366f11f}.orbital-nucleus{background:radial-gradient(circle,#6366f199,#6366f14d);box-shadow:0 0 15px #6366f14d,0 0 30px #6366f133}.home-hero h1{background:linear-gradient(135deg,#6366f1,#8b5cf6 40%,#a855f7,#6366f1);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none}.tagline-divider{color:#6366f159}.tagline-emphasis{background:linear-gradient(135deg,#7c3aed,#a855f7,#8b5cf6);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.category-icon--fundamentals{background:linear-gradient(135deg,#10b98126,#06b6d426);color:#059669}.category-icon--nomenclature{background:linear-gradient(135deg,#6366f126,#8b5cf626);color:#6366f1}.category-icon--calculations{background:linear-gradient(135deg,#fbbf2426,#f9731626);color:#d97706}.category-icon--structure{background:linear-gradient(135deg,#ec489926,#ef444426);color:#db2777}.category-icon--reactions{background:linear-gradient(135deg,#22c55e26,#10b98126);color:#16a34a}.tool-card{background:var(--card-bg, white);border-color:var(--card-border, var(--border-1))}.tool-card:hover{background:var(--card-bg-hover, var(--surface-1));border-color:var(--card-border-hover, var(--border-2));box-shadow:var(--shadow-card-hover)}.tool-card--sigfig,.tool-card--units{--card-bg: rgba(16, 185, 129, .06);--card-bg-hover: rgba(16, 185, 129, .1);--card-border: rgba(16, 185, 129, .12);--card-border-hover: rgba(16, 185, 129, .2)}.tool-card--compounds,.tool-card--ions{--card-bg: rgba(99, 102, 241, .06);--card-bg-hover: rgba(99, 102, 241, .1);--card-border: rgba(99, 102, 241, .12);--card-border-hover: rgba(99, 102, 241, .2)}.tool-card--electron,.tool-card--oxidation,.tool-card--model3d{--card-bg: rgba(236, 72, 153, .06);--card-bg-hover: rgba(236, 72, 153, .1);--card-border: rgba(236, 72, 153, .12);--card-border-hover: rgba(236, 72, 153, .2)}.tool-card--reactiontype,.tool-card--balance{--card-bg: rgba(34, 197, 94, .06);--card-bg-hover: rgba(34, 197, 94, .1);--card-border: rgba(34, 197, 94, .12);--card-border-hover: rgba(34, 197, 94, .2)}.tool-card--molar,.tool-card--percentcomp,.tool-card--stoich,.tool-card--limiting,.tool-card--gaslaw,.tool-card--thermo,.tool-card--solution{--card-bg: rgba(245, 158, 11, .06);--card-bg-hover: rgba(245, 158, 11, .1);--card-border: rgba(245, 158, 11, .12);--card-border-hover: rgba(245, 158, 11, .2)}.tool-card-title{color:#000000e6}.progress-card{background:linear-gradient(135deg,#6366f10f,#8b5cf60a);border-color:#6366f11f}.progress-card-info h3,.progress-stat-value{color:#000000e6}.progress-card-action{background:#6366f11a;border-color:#6366f133;color:var(--color-primary)}.progress-card-action:hover{background:#6366f12e}}@media(min-width:768px){.tool-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.tool-card{padding:var(--space-5) var(--space-5) var(--space-6)}.tool-card-rank .mastery-ring{width:52px;height:52px}.tool-card-rank .mastery-label{font-size:.65rem}.home-hero{padding:5rem 3rem 4.5rem}.home-hero h1{font-size:3.25rem}.tagline-container{font-size:1.25rem;gap:.75rem}.hero-orbital-decoration{width:280px;height:280px}.orbital-ring--1{width:160px;height:160px;margin:-80px 0 0 -80px}.orbital-ring--2{width:220px;height:110px;margin:-55px 0 0 -110px}.orbital-ring--3{width:260px;height:130px;margin:-65px 0 0 -130px}.atom-symbol{font-size:1rem}.atom-orbital{width:40px;height:40px}.hero-molecule{font-size:.85rem;padding:.4rem .75rem}}@media(min-width:1024px){.home-page{max-width:900px}.tool-grid{gap:var(--space-6)}}@media(max-width:600px){.home-page{padding:var(--space-4)}.home-hero{padding:3rem var(--space-4) 2.5rem;border-radius:var(--radius-xl);margin-bottom:var(--space-6)}.home-hero h1{font-size:2rem}.tagline-container{font-size:1.05rem;gap:.4rem}.hero-orbital-decoration{width:140px;height:140px;opacity:.6}.orbital-ring--1{width:80px;height:80px;margin:-40px 0 0 -40px}.orbital-ring--2{width:110px;height:55px;margin:-27px 0 0 -55px}.orbital-ring--3{width:130px;height:65px;margin:-32px 0 0 -65px}.hero-atom{opacity:.7}.atom-symbol{font-size:.7rem}.atom-orbital{width:24px;height:24px}.hero-molecule{font-size:.65rem;padding:.25rem .5rem}.hero-molecule--1{top:12%;left:18%}.hero-molecule--2{bottom:12%;right:15%}.hero-atom--1{top:12%;left:5%}.hero-atom--2{top:20%;right:8%}.hero-atom--3{bottom:15%;left:8%}.hero-atom--4{bottom:18%;right:5%}.home-hero .tagline{font-size:.95rem}.tool-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.tool-card{padding:var(--space-3);min-height:120px}.tool-card-rank{margin-bottom:var(--space-2)}.tool-card-rank .mastery-ring{width:40px;height:40px}.tool-card-rank .mastery-label{font-size:.6rem}.tool-card-title{font-size:.9rem;line-height:1.25}.tool-card-desc{font-size:.8rem;line-height:1.4}.category-header{gap:.5rem;margin-bottom:.75rem}.category-icon{width:28px;height:28px;font-size:.875rem}.category-header h2{font-size:.8rem}.tool-category{margin-bottom:1.5rem}.comprehensive-review-section .tool-card--comprehensive{padding:var(--space-4);gap:var(--space-3)}.comprehensive-review-section .tool-card-rank .mastery-ring{width:40px;height:40px}.progress-card{flex-direction:column;align-items:stretch;gap:var(--space-4);padding:var(--space-5)}.progress-card-action{justify-content:center}.progress-stats{gap:var(--space-4)}}.progress-links-section{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem;animation:category-fade-in var(--anim-duration-enter) var(--ease-out-expo) backwards;animation-delay:.9s}.progress-link-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#fbbf2414,#f59e0b0d);border:1px solid rgba(251,191,36,.2);border-radius:14px;cursor:pointer;transition:all .2s ease;text-align:left}.progress-link-card:hover{background:linear-gradient(135deg,#fbbf241f,#f59e0b14);border-color:#fbbf244d;transform:translateY(-2px)}.progress-link-card--collection{background:linear-gradient(135deg,#6366f114,#8b5cf60d);border-color:#6366f133}.progress-link-card--collection:hover{background:linear-gradient(135deg,#6366f11f,#8b5cf614);border-color:#6366f14d}.progress-link-icon{font-size:1.5rem;flex-shrink:0}.progress-link-info{flex:1;min-width:0}.progress-link-info h3{margin:0 0 .125rem;font-size:.9rem;font-weight:600;color:#fffffff2}.progress-link-info p{margin:0;font-size:.75rem;color:var(--text-muted)}.progress-link-arrow{font-size:1rem;color:var(--text-muted);transition:transform .2s ease}.progress-link-card:hover .progress-link-arrow{transform:translate(4px)}@media(prefers-color-scheme:light){.progress-link-card{background:linear-gradient(135deg,#fbbf240f,#f59e0b0a);border-color:#fbbf2426}.progress-link-card:hover{background:linear-gradient(135deg,#fbbf241a,#f59e0b0f)}.progress-link-card--collection{background:linear-gradient(135deg,#6366f10f,#8b5cf60a);border-color:#6366f11f}.progress-link-card--collection:hover{background:linear-gradient(135deg,#6366f11a,#8b5cf60f)}.progress-link-info h3{color:#000000e6}}@media(max-width:600px){.progress-links-section{grid-template-columns:1fr}}@media(max-width:360px){.home-page{padding:var(--space-3)}.home-hero{padding:2.5rem var(--space-3) 2rem;margin-bottom:var(--space-5)}.home-hero h1{font-size:1.75rem}.tagline-container{font-size:.9rem;gap:.3rem}.hero-atom--3,.hero-atom--4,.hero-molecule--2{display:none}.hero-orbital-decoration{width:100px;height:100px;opacity:.4}.orbital-ring--1{width:60px;height:60px;margin:-30px 0 0 -30px}.orbital-ring--2{width:80px;height:40px;margin:-20px 0 0 -40px}.orbital-ring--3{display:none}.home-hero .tagline{font-size:.875rem}.tool-grid{gap:var(--space-2)}.tool-card{padding:var(--space-2);min-height:110px}.tool-card-rank{margin-bottom:var(--space-1)}.tool-card-rank .mastery-ring{width:32px;height:32px}.tool-card-rank .mastery-label{font-size:.5rem}.tool-card-title{font-size:.8rem}.tool-card-desc{font-size:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.category-icon{width:24px;height:24px;font-size:.75rem;border-radius:6px}.category-header h2{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.home-hero,.tool-category,.tool-grid>*,.tagline-emphasis,.streak-section,.comprehensive-review-section,.progress-links-section,.hero-atom,.hero-molecule,.atom-orbital,.orbital-ring,.home-hero h1{animation:none}.orbital-ring--2{transform:rotateX(60deg)}.orbital-ring--3{transform:rotateX(60deg) rotate(60deg)}}.srs-summary{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-lg)}.srs-summary-empty{flex-direction:row;gap:var(--space-3);background:#10b9811a;border-color:#10b98133;color:var(--color-success)}.srs-summary-icon{font-size:var(--text-xl)}.srs-summary-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--font-medium)}.srs-summary-counts{display:flex;gap:var(--space-3);flex-wrap:wrap;justify-content:center}.srs-count{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-sm);font-weight:var(--font-semibold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full)}.srs-count-overdue{background:#ef444426;color:var(--color-error-light)}.srs-count-due{background:#f9731626;color:var(--color-warning)}.srs-count-new{background:#3b82f626;color:var(--color-info)}@media(prefers-color-scheme:light){.srs-summary{background:#6366f114;border-color:#6366f126}.srs-summary-empty{background:#10b98114;border-color:#10b98126;color:var(--color-success-text)}.srs-count-overdue{background:#ef44441f;color:var(--color-error-text)}.srs-count-due{background:#f973161f;color:#ea580c}.srs-count-new{background:#3b82f61f;color:#2563eb}}.level-selector{display:flex;flex-direction:column;gap:var(--space-3)}.level-selector-title{margin:0 0 var(--space-2) 0;font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.level-options{display:flex;flex-direction:column;gap:var(--space-2)}.level-card{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.level-card:hover{background:var(--surface-2);border-color:var(--border-default)}.level-card:has(input:checked){background:#6366f11a;border-color:#6366f14d}.level-card input[type=radio]{margin-top:2px;cursor:pointer;accent-color:var(--color-primary);width:18px;height:18px;flex-shrink:0}.level-info{display:flex;flex-direction:column;gap:var(--space-1);flex:1}.level-label{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}.level-description{font-size:var(--text-sm);color:var(--text-muted);line-height:1.4}.level-example{font-size:var(--text-xs);color:var(--color-primary-light);font-family:var(--font-mono);margin-top:var(--space-1)}.level-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-semibold);border-radius:var(--radius-full);flex-shrink:0}.level-badge--due{background:#f9731626;color:var(--color-warning)}.level-badge--new{background:#3b82f626;color:var(--color-info)}@media(prefers-color-scheme:light){.level-card{background:var(--surface-1)}.level-card:hover{background:var(--surface-2)}.level-card:has(input:checked){background:#6366f114;border-color:#6366f140}.level-example{color:var(--color-primary)}}@media(max-width:480px){.level-card{padding:var(--space-3) var(--space-4)}.level-label{font-size:var(--text-sm)}}.compound-setup-panel{max-width:var(--container-width);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));display:flex;flex-direction:column;gap:var(--space-6);min-height:100dvh}.compound-setup-panel .back-button{position:absolute;top:var(--space-4);left:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default);min-height:44px;min-width:44px}.compound-setup-panel .back-button:hover{color:var(--text-primary);background:var(--surface-2)}.compound-setup-panel .back-button svg{width:20px;height:20px}.compound-setup-panel .panel-header{text-align:center;margin-top:var(--space-8)}.compound-setup-panel h1{margin:0 0 var(--space-2) 0;font-size:var(--text-3xl);font-weight:var(--font-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.compound-setup-panel .subtitle{color:var(--text-muted);margin:0;font-size:var(--text-base)}.compound-setup-panel .panel-content{flex:1;display:flex;flex-direction:column;gap:var(--space-6)}.compound-setup-panel .start-section{text-align:center;margin-top:auto;padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}.compound-setup-panel .card-count{color:var(--text-muted);margin:0 0 var(--space-4) 0;font-size:var(--text-sm)}.compound-setup-panel .start-button{width:100%;height:52px;font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-button)}.compound-setup-panel .start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.compound-setup-panel .start-button:active:not(:disabled){transform:translateY(0)}.compound-setup-panel .start-button:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;box-shadow:none;opacity:.5}.compound-setup-panel .warning{color:var(--color-error-light);font-size:var(--text-sm);margin:var(--space-3) 0 0 0}@media(prefers-color-scheme:light){.compound-setup-panel h1{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.compound-setup-panel .start-button:disabled{background:var(--surface-3)}}@media(max-width:480px){.compound-setup-panel{padding:var(--space-10) var(--space-4) var(--space-6);gap:var(--space-4)}.compound-setup-panel .back-button{top:var(--space-3);left:var(--space-3)}.compound-setup-panel .panel-header{margin-top:var(--space-6)}.compound-setup-panel h1{font-size:var(--text-2xl)}.compound-setup-panel .start-section{padding-top:var(--space-4)}}.ion-setup-panel{max-width:var(--container-width);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));display:flex;flex-direction:column;gap:var(--space-6);min-height:100dvh}.ion-setup-panel .back-button{position:absolute;top:var(--space-4);left:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default);min-height:44px;min-width:44px}.ion-setup-panel .back-button:hover{color:var(--text-primary);background:var(--surface-2)}.ion-setup-panel .back-button svg{width:20px;height:20px}.ion-setup-panel .panel-header{text-align:center;margin-top:var(--space-8)}.ion-setup-panel h1{margin:0 0 var(--space-2) 0;font-size:var(--text-3xl);font-weight:var(--font-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ion-setup-panel .subtitle{color:var(--text-muted);margin:0;font-size:var(--text-base)}.ion-setup-panel .panel-content{flex:1;display:flex;flex-direction:column;gap:var(--space-6)}.ion-setup-panel .start-section{text-align:center;margin-top:auto;padding-top:var(--space-6);border-top:1px solid var(--border-subtle)}.ion-setup-panel .card-count{color:var(--text-muted);margin:0 0 var(--space-4) 0;font-size:var(--text-sm)}.ion-setup-panel .start-button{width:100%;height:52px;font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-button)}.ion-setup-panel .start-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.ion-setup-panel .start-button:active:not(:disabled){transform:translateY(0)}.ion-setup-panel .start-button:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;box-shadow:none;opacity:.5}.ion-setup-panel .warning{color:var(--color-error-light);font-size:var(--text-sm);margin:var(--space-3) 0 0 0}@media(prefers-color-scheme:light){.ion-setup-panel h1{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ion-setup-panel .start-button:disabled{background:var(--surface-3)}}@media(max-width:480px){.ion-setup-panel{padding:var(--space-10) var(--space-4) var(--space-6);gap:var(--space-4)}.ion-setup-panel .back-button{top:var(--space-3);left:var(--space-3)}.ion-setup-panel .panel-header{margin-top:var(--space-6)}.ion-setup-panel h1{font-size:var(--text-2xl)}.ion-setup-panel .start-section{padding-top:var(--space-4)}}.flashcard-container{perspective:1000px;width:100%;max-width:340px;aspect-ratio:3 / 2;margin:0 auto}.flashcard{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}.flashcard-container.revealed .flashcard{transform:rotateY(180deg)}.flashcard-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);border-radius:var(--radius-xl);text-align:center;overflow:hidden}.flashcard-front{background:var(--gradient-card-front);border:2px solid rgba(99,102,241,.3);box-shadow:0 10px 40px #0006,0 0 0 1px #ffffff0d inset}.flashcard-back{background:var(--gradient-card-back);border:2px solid rgba(16,185,129,.3);box-shadow:0 10px 40px #0006,0 0 0 1px #ffffff0d inset;transform:rotateY(180deg)}.card-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.15em;color:var(--text-muted);margin-bottom:var(--space-4);font-weight:var(--font-medium)}.card-content{font-size:var(--text-3xl);font-weight:var(--font-semibold);text-align:center;line-height:1.2;padding:0 var(--space-2);word-break:break-word}.card-content.question{color:var(--color-primary-light)}.card-content.answer{color:var(--color-success-light)}.card-hint{position:absolute;bottom:var(--space-5);font-size:var(--text-sm);color:var(--text-muted);font-style:italic}.card-tier{position:absolute;bottom:var(--space-5);font-size:var(--text-xs);color:var(--text-muted);text-transform:capitalize;background:var(--surface-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full)}@media(prefers-color-scheme:light){.flashcard-front{background:var(--gradient-card-front);border-color:#646cff33;box-shadow:0 10px 40px #0000001a,0 0 0 1px #00000008 inset}.flashcard-back{background:var(--gradient-card-back);border-color:#10b98133;box-shadow:0 10px 40px #0000001a,0 0 0 1px #00000008 inset}.card-content.question{color:var(--color-primary)}.card-content.answer{color:#059669}}@media(max-width:480px){.flashcard-container{max-width:100%;aspect-ratio:4 / 3}.flashcard-face{padding:var(--space-5)}.card-content{font-size:var(--text-2xl)}.card-label{margin-bottom:var(--space-3)}.card-hint,.card-tier{bottom:var(--space-4)}}.srs-feedback{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.srs-rating-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);width:100%}.srs-rating-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-1);height:56px;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);font-weight:var(--font-semibold);color:#fff;position:relative;overflow:hidden}.srs-rating-button:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#ffffff4d;border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:width .4s ease,height .4s ease,opacity .4s ease}.srs-rating-button:active:not(:disabled):after{width:200%;height:200%;opacity:0;transition:0s}.srs-rating-button:disabled{opacity:.5;cursor:not-allowed}.rating-label{font-size:var(--text-base)}.rating-key{font-size:var(--text-xs);opacity:.7;font-family:var(--font-mono)}.srs-rating-1{background:linear-gradient(135deg,#dc2626,#b91c1c);box-shadow:0 4px 12px #dc26264d}.srs-rating-1:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #dc262666}.srs-rating-2{background:linear-gradient(135deg,#ea580c,#c2410c);box-shadow:0 4px 12px #ea580c4d}.srs-rating-2:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #ea580c66}.srs-rating-3{background:linear-gradient(135deg,#16a34a,#15803d);box-shadow:0 4px 12px #16a34a4d}.srs-rating-3:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #16a34a66}.srs-rating-4{background:linear-gradient(135deg,#2563eb,#1d4ed8);box-shadow:0 4px 12px #2563eb4d}.srs-rating-4:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #2563eb66}.srs-rating-button:active:not(:disabled){transform:scale(.95) translateY(1px)}@media(max-width:480px){.srs-rating-buttons{gap:var(--space-2)}.srs-rating-button{height:52px}.rating-label{font-size:var(--text-sm)}.rating-key{display:none}}.progress-indicator{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:100%;max-width:340px}.progress-text{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.progress-count{font-weight:var(--font-semibold);color:var(--color-primary-light);font-variant-numeric:tabular-nums}.progress-label{color:var(--text-muted);font-size:var(--text-xs)}.progress-bar{width:100%;height:8px;background:var(--surface-2);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}@media(prefers-color-scheme:light){.progress-count{color:var(--color-primary)}}@media(max-width:480px){.progress-indicator{max-width:100%}.progress-text{font-size:var(--text-xs)}}.quiz-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-8);max-width:400px;margin:0 auto;min-height:60dvh}.quiz-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.quiz-complete>*:nth-child(1){animation-delay:0ms}.quiz-complete>*:nth-child(2){animation-delay:80ms}.quiz-complete>*:nth-child(3){animation-delay:.16s}.quiz-complete>*:nth-child(4){animation-delay:.24s}.quiz-complete>*:nth-child(5){animation-delay:.32s}.complete-icon{width:80px;height:80px;margin-bottom:var(--space-6);color:var(--color-success)}.complete-icon svg{width:100%;height:100%}.complete-icon .checkmark-draw{stroke-dasharray:50;stroke-dashoffset:50;animation:checkmark-draw .6s var(--ease-out) .4s forwards}@keyframes checkmark-draw{to{stroke-dashoffset:0}}.quiz-complete h2{margin:0 0 var(--space-4) 0;font-size:var(--text-2xl);font-weight:var(--font-bold);background:var(--gradient-success);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.complete-stats{font-size:var(--text-lg);color:var(--text-secondary);margin:0 0 var(--space-2) 0}.complete-stats strong{color:var(--color-primary-light);font-variant-numeric:tabular-nums}.complete-message{color:var(--text-muted);margin:0 0 var(--space-8) 0;font-size:var(--text-base)}.return-button{width:100%;height:52px;font-size:var(--text-lg);font-weight:var(--font-semibold);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-button)}.return-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.return-button:active{transform:translateY(0)}@media(prefers-color-scheme:light){.quiz-complete h2{background:linear-gradient(135deg,#059669 0%,var(--color-success) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.complete-stats strong{color:var(--color-primary)}}@media(max-width:480px){.quiz-complete{padding:var(--space-6);min-height:50dvh}.complete-icon{width:64px;height:64px;margin-bottom:var(--space-5)}.quiz-complete h2{font-size:var(--text-xl)}.complete-stats{font-size:var(--text-base)}.return-button{height:48px}}.help-button{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff9;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}.help-button:hover{border-color:#ffffff80;color:#ffffffe6;background:#ffffff1a}.help-button:active{transform:scale(.95)}@media(prefers-color-scheme:light){.help-button{border-color:#0003;color:#00000080}.help-button:hover{border-color:#0006;color:#000000b3;background:#0000000d}}.help-popup-overlay{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;animation:help-overlay-fade-in .25s var(--ease-out-expo) forwards;padding:1rem}.help-popup-overlay:focus{outline:none}@keyframes help-overlay-fade-in{to{opacity:1}}.help-popup-overlay.closing{animation:help-overlay-fade-out .15s ease forwards}@keyframes help-overlay-fade-out{to{opacity:0}}.help-popup-card{position:relative;background:linear-gradient(165deg,#ffffff14,#ffffff08);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-xl);padding:0;min-width:320px;max-width:420px;max-height:80vh;overflow:hidden;box-shadow:0 8px 32px #0000004d,0 0 0 1px #ffffff0d inset;transform:scale(.92) translateY(20px);animation:help-card-enter .3s var(--ease-out-back) forwards}@keyframes help-card-enter{to{transform:scale(1) translateY(0)}}.help-popup-overlay.closing .help-popup-card{animation:help-card-exit .15s ease forwards}@keyframes help-card-exit{to{transform:scale(.95) translateY(10px);opacity:0}}.help-popup-header{position:relative;padding:1.25rem 1.5rem;background:linear-gradient(135deg,#6366f126,#8b5cf61a);border-bottom:1px solid rgba(255,255,255,.08)}.help-popup-header:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.help-popup-margin-line{display:none}.help-popup-close{position:absolute;top:.875rem;right:.875rem;width:32px;height:32px;border:none;background:#ffffff14;color:var(--text-secondary);font-size:1.25rem;font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);transition:all var(--transition-fast);line-height:1}.help-popup-close:hover{background:#ffffff1f;color:var(--text-primary);transform:scale(1.05)}.help-popup-close:active{transform:scale(.95)}.help-popup-title{font-size:1.125rem;font-weight:600;color:var(--text-primary);margin:0;padding-right:2.5rem;display:flex;align-items:center;gap:.625rem}.help-popup-title:before{content:"?";display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--gradient-primary);border-radius:var(--radius-full);font-size:.875rem;font-weight:700;color:#fff;flex-shrink:0}.help-popup-content{padding:1.25rem 1.5rem;overflow-y:auto;max-height:calc(80vh - 140px);color:var(--text-secondary)}.help-popup-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.875rem}.help-popup-rule{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-md);padding:.875rem 1rem;transition:all var(--transition-fast)}.help-popup-rule:hover{background:#ffffff0d;border-color:#ffffff1a}.help-popup-rule-title{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);font-size:.9rem;font-weight:600;margin-bottom:.375rem}.help-popup-rule-title:before{content:"";width:6px;height:6px;background:var(--color-primary);border-radius:var(--radius-full);flex-shrink:0}.help-popup-rule-description{margin:0;font-size:.85rem;line-height:1.55;color:var(--text-secondary);padding-left:.875rem}.help-popup-rule-example{display:inline-flex;align-items:center;gap:.375rem;margin-top:.5rem;margin-left:.875rem;font-size:.8rem;color:var(--color-primary-light);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Monaco,monospace;background:#6366f11f;padding:.25rem .625rem;border-radius:var(--radius-sm);border:1px solid rgba(99,102,241,.2)}.help-popup-rule-example:before{content:"e.g.";font-family:inherit;font-size:.7rem;color:var(--text-muted);font-style:italic}.help-popup-tips{margin-top:1rem;padding:.875rem 1rem;background:linear-gradient(135deg,#fbbf2414,#f59e0b0d);border:1px solid rgba(251,191,36,.15);border-radius:var(--radius-md)}.help-popup-tips-title{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--color-gold);margin:0 0 .625rem;text-transform:uppercase;letter-spacing:.03em}.help-popup-tips-title:before{content:"💡";font-size:.9rem}.help-popup-tips-list{margin:0;padding-left:1.125rem;font-size:.8rem;color:var(--text-secondary);line-height:1.6}.help-popup-tips-list li{margin-bottom:.375rem}.help-popup-tips-list li:last-child{margin-bottom:0}.help-popup-tips-list li::marker{color:var(--color-gold)}.help-popup-hint{text-align:center;font-size:.7rem;color:var(--text-muted);margin:0;padding:.75rem 1.5rem;background:#00000026;border-top:1px solid rgba(255,255,255,.05)}@media(prefers-reduced-motion:reduce){.help-popup-overlay,.help-popup-overlay.closing,.help-popup-card,.help-popup-overlay.closing .help-popup-card{animation:none;opacity:1;transform:none}}@media(max-width:480px){.help-popup-card{max-width:calc(100% - 1.5rem);min-width:auto;width:100%}.help-popup-header{padding:1rem 1.25rem}.help-popup-content{padding:1rem 1.25rem;max-height:calc(75vh - 130px)}.help-popup-title{font-size:1rem}.help-popup-rule{padding:.75rem}}@media(prefers-color-scheme:light){.help-popup-overlay{background:#0006}.help-popup-card{background:linear-gradient(165deg,#fffffff2,#f8fafcfa);border-color:#00000014;box-shadow:0 8px 32px #0000001f,0 0 0 1px #00000008 inset}.help-popup-header{background:linear-gradient(135deg,#6366f114,#8b5cf60d);border-bottom-color:#0000000f}.help-popup-close{background:#0000000d;color:var(--text-muted)}.help-popup-close:hover{background:#00000014;color:var(--text-primary)}.help-popup-rule{background:#00000005;border-color:#0000000f}.help-popup-rule:hover{background:#0000000a;border-color:#0000001a}.help-popup-rule-example{background:#6366f114;border-color:#6366f126;color:var(--color-primary)}.help-popup-tips{background:linear-gradient(135deg,#fbbf241a,#f59e0b0f);border-color:#fbbf2433}.help-popup-hint{background:#00000008;border-top-color:#0000000f}}.flashcard-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.flashcard-panel .panel-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.flashcard-panel .header-row{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%}.flashcard-wrapper{width:100%;max-width:380px;position:relative;z-index:1}.flashcard-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);position:relative;z-index:2;width:100%;max-width:340px}.controls-primary{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:52px}.control-button{padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-medium);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);min-height:44px}.reveal-button{width:100%;height:52px;background:var(--gradient-primary);color:#fff;font-weight:var(--font-semibold);box-shadow:var(--shadow-button)}.reveal-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.reveal-button:active{transform:translateY(0)}.end-button{background:transparent;color:var(--text-muted);font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}.end-button:hover{color:var(--text-secondary);background:var(--surface-2)}@media(prefers-color-scheme:light){.end-button:hover{background:var(--surface-3)}}@media(min-width:768px){.flashcard-panel{gap:var(--space-8)}.flashcard-controls{max-width:380px}}@media(max-width:480px){.flashcard-panel{padding:var(--space-10) var(--space-4) var(--space-6);gap:var(--space-4);max-width:100%}.flashcard-wrapper{max-width:100%}.flashcard-controls{align-items:stretch;max-width:100%}.controls-primary{min-height:46px}.reveal-button{height:48px}}.sigfig-question{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);background:var(--gradient-card-front);border:1px solid rgba(99,102,241,.3);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);min-height:180px;width:100%;max-width:380px}.question-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:var(--space-4);font-weight:var(--font-medium)}.question-value{font-size:var(--text-3xl);font-weight:var(--font-semibold);color:var(--color-primary-light);text-align:center;font-family:var(--font-mono);letter-spacing:.05em}@media(prefers-color-scheme:light){.sigfig-question{background:linear-gradient(145deg,#fff,#f3f4f6);border:1px solid rgba(99,102,241,.2);box-shadow:var(--shadow-md)}.question-value{color:var(--color-primary)}}@media(max-width:480px){.sigfig-question{padding:var(--space-5);min-height:150px;max-width:100%}.question-value{font-size:var(--text-2xl)}}.feedback-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.feedback-icon__svg{width:100%;height:100%}.feedback-icon--correct .feedback-icon__circle{fill:#10b98126;stroke:var(--color-success);stroke-width:1.5}.feedback-icon--correct .feedback-icon__check{stroke:var(--color-success);stroke-width:2.5;fill:none;stroke-dasharray:100;stroke-dashoffset:100}.feedback-icon--incorrect .feedback-icon__circle{fill:#ef444426;stroke:var(--color-error);stroke-width:1.5}.feedback-icon--incorrect .feedback-icon__x{stroke:var(--color-error);stroke-width:2.5;fill:none}.feedback-icon.particle-burst.active:before{background:radial-gradient(circle,rgba(16,185,129,.4) 0%,transparent 70%)}@media(prefers-color-scheme:light){.feedback-icon--correct .feedback-icon__circle{fill:#10b9811a}.feedback-icon--incorrect .feedback-icon__circle{fill:#ef44441a}}@media(prefers-reduced-motion:reduce){.feedback-icon__check{stroke-dashoffset:0!important}.feedback-icon__svg{animation:none!important}}.sigfig-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:380px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.sigfig-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.sigfig-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.feedback-header{display:flex;align-items:center;gap:var(--space-2);font-weight:var(--font-semibold);font-size:var(--text-lg)}.sigfig-feedback.correct .feedback-header{color:var(--color-success-light)}.sigfig-feedback.incorrect .feedback-header{color:var(--color-error-light)}.feedback-explanation{margin:0;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}@media(prefers-color-scheme:light){.sigfig-feedback.correct{background:#10b98114;border-color:#10b98140}.sigfig-feedback.incorrect{background:#ef444414;border-color:#ef444440}.sigfig-feedback.correct .feedback-header{color:var(--color-success)}.sigfig-feedback.incorrect .feedback-header{color:var(--color-error)}.feedback-explanation{color:var(--text-secondary)}}@media(max-width:480px){.sigfig-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.feedback-header{font-size:var(--text-base)}.feedback-explanation{font-size:var(--text-xs)}}.keypad-display{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;min-height:3.5rem;padding:var(--space-3) var(--space-4);background:var(--surface-2);border-radius:var(--radius-md);border:2px solid var(--border-default);transition:all var(--duration-base) var(--ease-default)}.keypad-display.correct{background:#10b9811a;border-color:var(--color-success);animation:pop var(--duration-slow) var(--ease-spring)}.keypad-display.incorrect{background:#ef44441a;border-color:var(--color-error);animation:shake var(--duration-slow) var(--ease-default)}.keypad-value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary);text-align:center;min-width:3rem}.keypad-value.placeholder{color:var(--text-muted)}.keypad-display.correct .keypad-value{color:var(--color-success)}.keypad-display.incorrect .keypad-value{color:var(--color-error)}.keypad-unit{font-size:var(--text-base);color:var(--text-secondary);margin-left:var(--space-1)}.keypad-value sup{font-size:.65em;vertical-align:super}@media(prefers-color-scheme:light){.keypad-display{background:var(--surface-1);border-color:var(--border-default)}.keypad-display.correct{background:#10b98114;border-color:var(--color-success)}.keypad-display.incorrect{background:#ef444414;border-color:var(--color-error)}.keypad-value{color:var(--text-primary)}.keypad-display.correct .keypad-value{color:var(--color-success)}.keypad-display.incorrect .keypad-value{color:var(--color-error)}}@media(max-width:480px){.keypad-display{min-height:3rem;padding:var(--space-2) var(--space-3)}.keypad-value{font-size:1.5rem}.keypad-unit{font-size:var(--text-sm)}}.keypad-button{display:flex;align-items:center;justify-content:center;min-height:52px;min-width:0;font-size:var(--text-lg);font-weight:var(--font-semibold);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-2);color:var(--text-primary);cursor:pointer;transition:all var(--duration-base) var(--ease-default);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden}.keypad-button:after{content:"";position:absolute;width:100%;height:100%;top:50%;left:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);opacity:0;border-radius:inherit}.keypad-button:active:not(:disabled):after{animation:ripple var(--duration-slow) var(--ease-out)}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.keypad-button:hover:not(:disabled){background:#6366f126;border-color:#6366f166;transform:translateY(-1px)}.keypad-button:active:not(:disabled){transform:translateY(0)}.keypad-button:disabled{cursor:default;opacity:.5}.keypad-button--number{background:var(--surface-2)}.keypad-button--action{background:#ffffff08;color:var(--text-secondary)}.keypad-button--action:hover:not(:disabled){background:#ef444426;border-color:#ef444466;color:var(--color-error-light)}.keypad-button--special{background:#ffffff08;color:var(--text-secondary)}.keypad-button--special:hover:not(:disabled){background:#6366f11a;border-color:#6366f14d;color:var(--text-primary)}.keypad-button--active{background:#6366f140!important;border-color:#6366f180!important;color:var(--color-primary)!important}.keypad-button--submit{background:var(--gradient-primary);border-color:transparent;color:#fff;box-shadow:var(--shadow-button)}.keypad-button--submit:hover:not(:disabled){background:var(--gradient-primary);border-color:transparent;transform:translateY(-2px);box-shadow:0 6px 20px #6366f180}.keypad-button--submit:disabled{background:var(--surface-2);border-color:var(--border-subtle);box-shadow:none;opacity:.5}.keypad-button--wide{grid-column:span 2}.keypad-button--full-width{grid-column:span 3}@media(prefers-color-scheme:light){.keypad-button{background:#fff;border-color:var(--border-default);color:var(--text-primary)}.keypad-button:hover:not(:disabled){background:#6366f114;border-color:#6366f14d}.keypad-button--action{background:#00000005;color:var(--text-secondary)}.keypad-button--action:hover:not(:disabled){background:#ef44441a;border-color:#ef44444d;color:var(--color-error)}.keypad-button--special{background:#00000005;color:var(--text-secondary)}.keypad-button--special:hover:not(:disabled){background:#6366f10d;border-color:#6366f140;color:var(--text-primary)}.keypad-button--submit{color:#fff}.keypad-button--submit:disabled{background:#0000000d;border-color:var(--border-default);color:var(--text-muted)}.keypad-button--active{background:#6366f126!important;border-color:#6366f166!important}}@media(min-width:768px){.keypad-button{min-height:56px;font-size:1.5rem}}@media(max-width:480px){.keypad-button{min-height:44px;font-size:1.125rem;border-radius:var(--radius-sm);padding:0 var(--space-1)}}.keypad{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%;max-width:280px;margin:0 auto}.keypad--unit-conversion{max-width:320px}.keypad-grid{display:grid;gap:var(--space-2);width:100%;min-width:0}.keypad-grid--basic,.keypad-grid--auto-submit,.keypad-grid--oxidation-state,.keypad-grid--decimal{grid-template-columns:repeat(3,1fr)}.keypad-grid--scientific{grid-template-columns:repeat(4,1fr)}@media(min-width:768px){.keypad{max-width:320px}.keypad--unit-conversion{max-width:360px}}@media(max-width:480px){.keypad{max-width:min(240px,70vw);overflow:hidden}.keypad--unit-conversion{max-width:min(280px,80vw)}.keypad-grid{gap:var(--space-1)}}.sigfig-panel{max-width:var(--container-width);margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.sigfig-panel .back-button{position:absolute;top:var(--space-4);left:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-default);min-height:44px;min-width:44px}.sigfig-panel .back-button:hover{color:var(--text-primary);background:var(--surface-2)}.sigfig-panel .back-button svg{width:20px;height:20px}.sigfig-panel .panel-header{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-6);text-align:center}.sigfig-panel h1{margin:0;font-size:var(--text-2xl);font-weight:var(--font-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sigfig-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.sigfig-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-10) var(--space-6);text-align:center}.sigfig-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.sigfig-complete>*:nth-child(1){animation-delay:0ms}.sigfig-complete>*:nth-child(2){animation-delay:80ms}.sigfig-complete>*:nth-child(3){animation-delay:.16s}.sigfig-complete>*:nth-child(4){animation-delay:.24s}.sigfig-complete>*:nth-child(5){animation-delay:.32s}.sigfig-complete h2{margin:0;font-size:var(--text-2xl);font-weight:var(--font-bold);background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sigfig-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}.sigfig-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-variant-numeric:tabular-nums}.sigfig-complete .done-button{margin-top:var(--space-4);width:100%;max-width:280px}.sigfig-panel .next-button{width:100%;max-width:380px}.sigfig-panel .end-button{margin-top:auto;width:100%;max-width:380px}@media(prefers-color-scheme:light){.sigfig-panel h1,.sigfig-complete h2{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sigfig-complete .complete-score{color:var(--text-primary)}}@media(min-width:768px){.sigfig-panel{gap:var(--space-8)}}@media(max-width:480px){.sigfig-panel{padding:var(--space-10) var(--space-4) var(--space-6);gap:var(--space-4)}.sigfig-panel .back-button{top:var(--space-3);left:var(--space-3)}.sigfig-panel .panel-header{margin-top:var(--space-4)}.sigfig-panel h1{font-size:var(--text-xl)}.sigfig-complete{padding:var(--space-8) var(--space-4)}.sigfig-complete .complete-score{font-size:var(--text-3xl)}}@media(prefers-reduced-motion:reduce){.sigfig-complete>*{animation:none}}.equation-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6);background:#6366f11a;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.2);width:100%;max-width:400px}.equation-unbalanced{font-size:var(--text-xl);color:var(--text-muted);text-align:center;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-subtle);width:100%;font-family:var(--font-mono)}.equation-input-row{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap}.equation-side{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;justify-content:center}.compound{display:flex;align-items:center;gap:var(--space-1)}.formula{font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--text-primary);font-family:var(--font-mono)}.operator{font-size:var(--text-lg);color:var(--text-muted);margin:0 var(--space-1)}.arrow{font-size:var(--text-lg);color:var(--text-muted);margin:0 var(--space-2)}.coefficient-box{width:3.5rem;height:3rem;font-size:var(--text-xl);font-weight:var(--font-semibold);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:2px solid var(--border-default);background:var(--surface-2);color:var(--text-primary);cursor:pointer;transition:all var(--duration-base) var(--ease-default);padding:0;min-height:44px;font-family:var(--font-mono)}.coefficient-box:hover:not(:disabled){border-color:var(--color-primary);background:#6366f11a}.coefficient-box.selected{border-color:var(--color-primary);background:#6366f126;box-shadow:var(--shadow-glow)}.coefficient-box:disabled{cursor:default}.coefficient-box.correct{background:#10b98126;border-color:var(--color-success);color:var(--color-success-light);animation:pop var(--duration-slow) var(--ease-spring)}.coefficient-box.incorrect{background:#ef444426;border-color:var(--color-error);color:var(--color-error-light);animation:shake var(--duration-slow) var(--ease-default)}.coefficient-placeholder{color:var(--text-muted);font-weight:var(--font-normal)}@media(prefers-color-scheme:light){.equation-display{background:#6366f114;border-color:#6366f126}.equation-unbalanced{color:var(--text-muted);border-bottom-color:var(--border-subtle)}.coefficient-box{background:var(--surface-2);border-color:var(--border-default)}.coefficient-box:hover:not(:disabled){border-color:#6366f166;background:#6366f10d}.coefficient-box.selected{border-color:var(--color-primary);background:#6366f11a;box-shadow:0 0 0 3px #6366f126}.coefficient-box.correct{background:#10b9811a;border-color:var(--color-success);color:var(--color-success)}.coefficient-box.incorrect{background:#ef44441a;border-color:var(--color-error);color:var(--color-error)}}@media(min-width:768px){.equation-display{padding:var(--space-8)}.coefficient-box{width:4rem;height:3.25rem;font-size:var(--text-2xl)}}@media(max-width:480px){.equation-display{padding:var(--space-4) var(--space-3);gap:var(--space-3);max-width:100%}.equation-unbalanced{font-size:var(--text-base);padding-bottom:var(--space-2)}.equation-input-row{flex-direction:column;gap:var(--space-2);width:100%}.equation-side{flex-wrap:nowrap;gap:var(--space-1);width:100%;justify-content:center}.arrow{font-size:var(--text-base);margin:var(--space-1) 0;transform:rotate(90deg)}.compound{gap:2px}.formula{font-size:var(--text-sm)}.operator{font-size:var(--text-sm);margin:0 2px}.coefficient-box{width:2.5rem;height:2.25rem;font-size:var(--text-base);border-radius:var(--radius-sm);min-height:36px}}@media(prefers-reduced-motion:reduce){.coefficient-box.correct,.coefficient-box.incorrect{animation:none}}.balance-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:400px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.balance-feedback .feedback-header{display:flex;align-items:center;gap:var(--space-2)}.balance-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.balance-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.balance-feedback .feedback-text{font-weight:var(--font-semibold);font-size:var(--text-lg)}.balance-feedback.correct .feedback-text{color:var(--color-success-light)}.balance-feedback.incorrect .feedback-text{color:var(--color-error-light)}.feedback-content{display:flex;flex-direction:column;gap:var(--space-2)}.correct-equation{font-size:var(--text-lg);font-weight:var(--font-medium);font-family:var(--font-mono);color:var(--text-primary)}@media(prefers-color-scheme:light){.balance-feedback.correct{background:#10b98114;border-color:#10b98140}.balance-feedback.incorrect{background:#ef444414;border-color:#ef444440}.balance-feedback.correct .feedback-text{color:var(--color-success)}.balance-feedback.incorrect .feedback-text{color:var(--color-error)}}@media(max-width:480px){.balance-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.balance-feedback .feedback-text,.correct-equation{font-size:var(--text-base)}}@media(prefers-reduced-motion:reduce){.balance-feedback{animation:none}}.balance-panel{width:100%;max-width:400px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + env(safe-area-inset-top));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.balance-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.balance-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.balance-prompt{font-size:var(--text-base);color:var(--text-secondary);text-align:center}.balance-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.balance-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.balance-complete>*:nth-child(1){animation-delay:0ms}.balance-complete>*:nth-child(2){animation-delay:80ms}.balance-complete>*:nth-child(3){animation-delay:.16s}.balance-complete>*:nth-child(4){animation-delay:.24s}.balance-complete>*:nth-child(5){animation-delay:.32s}.balance-complete h2{margin:0;font-size:var(--text-2xl);color:var(--color-primary-light);font-weight:var(--font-semibold)}.balance-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.balance-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-family:var(--font-mono)}.balance-complete .done-button{margin-top:var(--space-4)}.balance-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.balance-panel .question-progress{color:var(--text-muted)}.balance-prompt{color:var(--text-secondary)}.balance-complete h2{color:var(--color-primary)}}@media(min-width:768px){.balance-panel{gap:var(--space-8)}}@media(max-width:480px){.balance-panel{padding:var(--space-8) var(--space-4) var(--space-6);gap:var(--space-5);max-width:100%}}@media(prefers-reduced-motion:reduce){.balance-complete>*{animation:none}}.formula-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;width:100%;max-width:380px}.formula-prompt{font-size:var(--text-base);color:var(--text-secondary)}.formula-value{font-size:var(--text-4xl);font-weight:var(--font-semibold);color:var(--text-primary);padding:var(--space-4) var(--space-6);background:#6366f11a;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.25);font-family:var(--font-mono);letter-spacing:.02em}@media(prefers-color-scheme:light){.formula-prompt{color:var(--text-secondary)}.formula-value{background:#6366f114;border-color:#6366f133}}@media(max-width:480px){.formula-display{max-width:100%}.formula-value{font-size:var(--text-3xl);padding:var(--space-3) var(--space-5)}}.mass-breakdown{width:100%;max-width:380px;padding:var(--space-5);background:var(--surface-1);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);animation:slide-down-fade var(--duration-enter) var(--ease-out)}.breakdown-title{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-3);font-weight:var(--font-medium)}.breakdown-row{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm)}.element-equals{color:var(--text-muted)}.element-contribution{color:var(--text-primary);font-weight:var(--font-medium);font-family:var(--font-mono)}.element-plus{color:var(--text-muted);margin-left:auto}.breakdown-total{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.total-label{font-size:var(--text-sm);color:var(--text-muted);font-weight:var(--font-medium)}.total-value{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--color-primary-light);font-family:var(--font-mono)}@media(prefers-color-scheme:light){.mass-breakdown{background:var(--surface-1);border-color:var(--border-subtle)}.element-info{color:var(--text-secondary)}.total-value{color:var(--color-primary)}}@media(min-width:768px){.mass-breakdown{padding:var(--space-6)}}@media(max-width:480px){.mass-breakdown{max-width:100%;padding:var(--space-4)}.breakdown-row{font-size:var(--text-xs);flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){.mass-breakdown{animation:none}}.molar-mass-panel{width:100%;max-width:400px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + env(safe-area-inset-top));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.molar-mass-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.molar-mass-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.molar-mass-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:380px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.molar-mass-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.molar-mass-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.molar-mass-feedback .feedback-text{font-weight:var(--font-semibold);font-size:var(--text-lg)}.molar-mass-feedback.correct .feedback-text{color:var(--color-success-light)}.molar-mass-feedback.incorrect .feedback-text{color:var(--color-error-light)}.molar-mass-feedback strong{font-weight:var(--font-semibold);font-family:var(--font-mono)}.molar-mass-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.molar-mass-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.molar-mass-complete>*:nth-child(1){animation-delay:0ms}.molar-mass-complete>*:nth-child(2){animation-delay:80ms}.molar-mass-complete>*:nth-child(3){animation-delay:.16s}.molar-mass-complete>*:nth-child(4){animation-delay:.24s}.molar-mass-complete>*:nth-child(5){animation-delay:.32s}.molar-mass-complete h2{margin:0;font-size:var(--text-2xl);color:var(--color-primary-light);font-weight:var(--font-semibold)}.molar-mass-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.molar-mass-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-family:var(--font-mono)}.molar-mass-complete .done-button{margin-top:var(--space-4)}.molar-mass-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.molar-mass-panel .question-progress{color:var(--text-muted)}.molar-mass-feedback.correct{background:#10b98114;border-color:#10b98140}.molar-mass-feedback.incorrect{background:#ef444414;border-color:#ef444440}.molar-mass-feedback.correct .feedback-text{color:var(--color-success)}.molar-mass-feedback.incorrect .feedback-text{color:var(--color-error)}.molar-mass-complete h2{color:var(--color-primary)}}@media(min-width:768px){.molar-mass-panel{gap:var(--space-8)}}@media(max-width:480px){.molar-mass-panel{padding:var(--space-8) var(--space-4) var(--space-6);gap:var(--space-5);max-width:100%}.molar-mass-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.molar-mass-feedback .feedback-text{font-size:var(--text-base)}}@media(prefers-reduced-motion:reduce){.molar-mass-feedback,.molar-mass-complete>*{animation:none}}@media(prefers-color-scheme:light){.tier-selector h2{color:#1f2937}.tier-option{background:#fff;border-color:var(--border-primary)}.tier-option:hover{background:#6366f10d}.tier-label{color:#1f2937}.tier-description{color:#0009}.tier-example{color:#0006}}@media(min-width:768px){.tier-options{max-width:450px}}@media(prefers-color-scheme:light){.equation-container{background:#6366f10d;border-color:#6366f126}.equation-value{color:#1f2937}.problem-info{background:#00000005;border-color:var(--border-subtle)}.given-value,.target-value{color:#1f2937}.conditions{color:#0009}}@media(max-width:480px){.equation-value{font-size:1rem}.given-info,.target-info,.hint-info{flex-direction:column;gap:var(--space-1)}.given-label,.target-label,.hint-label{min-width:auto}}.stoichiometry-feedback .feedback-message{text-align:center;margin-bottom:1rem}.stoichiometry-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.stoichiometry-feedback .incorrect-header{justify-content:flex-start}.stoichiometry-feedback .incorrect-text{color:var(--color-error-text);font-size:1rem}.stoichiometry-feedback .user-answer-text{color:#fff9;font-size:.9rem;margin-top:.25rem}.stoichiometry-feedback .solution-breakdown{padding-top:1rem;border-top:1px solid var(--border-subtle)}.stoichiometry-feedback .breakdown-title{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem}@media(prefers-color-scheme:light){.stoichiometry-feedback.correct{background:#22c55e1a}.stoichiometry-feedback.incorrect{background:#ef44441a}.stoichiometry-feedback .user-answer-text{color:#0009}.step-number{color:#0006}.step-text{color:#000000b3}.final-value{color:var(--color-primary)}}@media(max-width:480px){.step{font-size:.8rem}}@media(prefers-reduced-motion:reduce){.stoichiometry-feedback{animation:none}}.stoichiometry-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--panel-gap);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.panel-title{font-size:1.75rem;font-weight:600;color:#a5b4fc;margin:0}.question-header{display:flex;align-items:center;gap:1rem;width:100%;justify-content:center}.tier-badge{padding:.25rem .75rem;background:#6366f133;border:1px solid rgba(99,102,241,.4);border-radius:20px;font-size:.8rem;font-weight:500;color:#a5b4fc;text-transform:capitalize}.question-progress{font-size:.9rem;color:#fff9}.tier-selector{width:100%;text-align:center}.tier-selector h2{font-size:1.25rem;color:#fff;margin-bottom:var(--space-6)}.tier-options{display:flex;flex-direction:column;gap:var(--space-4);width:100%;max-width:400px;margin:0 auto}.tier-option{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-6);background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-align:left;min-height:44px}.tier-option:hover{background:#6366f11a;border-color:#6366f166;transform:translateY(-2px)}.tier-label{font-size:1.1rem;font-weight:600;color:#fff}.tier-description{font-size:.9rem;color:var(--text-secondary)}.tier-example{font-size:.8rem;color:#fff6;font-family:monospace}.question-display{width:100%;display:flex;flex-direction:column;gap:1rem}.equation-container{text-align:center;padding:1rem;background:#6366f11a;border-radius:var(--radius-md);border:1px solid rgba(99,102,241,.2)}.equation-label{font-size:.85rem;color:var(--text-secondary);margin-bottom:.5rem}.equation-value{font-size:1.25rem;font-weight:500;color:#fff;font-family:monospace}.problem-info{display:flex;flex-direction:column;gap:.75rem;padding:1rem;background:#ffffff08;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.08)}.given-info,.target-info,.hint-info{display:flex;gap:.5rem;flex-wrap:wrap}.given-label,.target-label,.hint-label{font-weight:500;color:var(--text-secondary);min-width:100px}.given-value,.target-value,.hint-value{color:#fff}.conditions{color:#fff9;font-size:.9em}.answer-input-container{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--surface-overlay);border-radius:var(--radius-md);border:2px solid rgba(255,255,255,.15);transition:all var(--transition-base)}.answer-input-container:focus-within{border-color:#6366f180;background:#6366f11a}.answer-input-container.correct{background:#22c55e26;border-color:#22c55e80;animation:success-pop var(--anim-duration-slow) var(--ease-out-back)}.answer-input-container.incorrect{background:#ef444426;border-color:#ef444480;animation:shake var(--anim-duration-slow) var(--ease-out-expo)}.answer-input{width:10rem;font-size:1.5rem;font-weight:600;text-align:right;background:transparent;border:none;color:#fff;outline:none}.answer-input::placeholder{color:#ffffff4d}.answer-input-container.correct .answer-input{color:var(--color-success-text)}.answer-input-container.incorrect .answer-input{color:var(--color-error-text)}.answer-unit{font-size:1.1rem;color:#fff9}.back-button,.end-button{margin-top:auto}.stoichiometry-feedback{width:100%;padding:var(--space-5);border-radius:var(--radius-md);animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo)}.stoichiometry-feedback.correct{background:#22c55e1a}.stoichiometry-feedback.incorrect{background:#ef44441a}.feedback-message{text-align:center;margin-bottom:1rem}.stoichiometry-feedback.correct .feedback-message{color:var(--color-success-text);font-size:1.25rem;font-weight:600}.incorrect-text{color:var(--color-error-text);font-size:1rem}.user-answer-text{color:#fff9;font-size:.9rem;margin-top:.25rem}.step{display:flex;gap:.5rem;font-size:.9rem}.step-number{color:#fff6;min-width:1.5rem}.step-text{color:var(--text-secondary)}.final-answer{display:flex;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--border-subtle)}.final-label{font-weight:500;color:var(--text-secondary)}.final-value{font-weight:600;color:#a5b4fc}.stoichiometry-complete{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;text-align:center}.stoichiometry-complete>*{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.stoichiometry-complete>*:nth-child(1){animation-delay:0ms}.stoichiometry-complete>*:nth-child(2){animation-delay:80ms}.stoichiometry-complete>*:nth-child(3){animation-delay:.16s}.stoichiometry-complete>*:nth-child(4){animation-delay:.24s}.stoichiometry-complete>*:nth-child(5){animation-delay:.32s}.stoichiometry-complete>*:nth-child(6){animation-delay:.4s}.stoichiometry-complete h2{margin:0;font-size:1.75rem;color:#a5b4fc}.complete-tier{font-size:1rem;color:var(--text-secondary)}.stoichiometry-complete .complete-score{font-size:3rem;font-weight:700;color:#fff}.stoichiometry-complete .complete-percentage{font-size:1.5rem;color:var(--text-secondary)}.stoichiometry-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.panel-title{color:var(--color-primary)}.tier-badge{background:#6366f11a;border-color:#6366f14d;color:var(--color-primary)}.question-progress{color:var(--text-muted)}.tier-option{background:#fff;border-color:var(--border-primary)}.tier-option:hover{background:#6366f10d}.tier-label{color:#1f2937}.tier-description{color:#0009}.tier-example{color:#0006}.equation-container{background:#6366f10d;border-color:#6366f126}.equation-value{color:#1f2937}.problem-info{background:#00000005;border-color:var(--border-subtle)}.given-value,.target-value{color:#1f2937}.conditions{color:#0009}.answer-input-container{background:#fff;border-color:#0000001f}.answer-input-container:focus-within{border-color:#6366f180;background:#6366f10d}.answer-input{color:#1f2937}.answer-input::placeholder{color:#0000004d}.answer-unit{color:var(--text-muted)}.stoichiometry-feedback.correct{background:#22c55e1a}.stoichiometry-feedback.incorrect{background:#ef44441a}.step-text{color:#000000b3}.final-value,.stoichiometry-complete h2{color:var(--color-primary)}.stoichiometry-complete .complete-score{color:#1f2937}.stoichiometry-complete .complete-percentage{color:#0009}}@media(min-width:768px){.stoichiometry-panel{gap:var(--space-8)}.tier-options{max-width:450px}}@media(max-width:480px){.stoichiometry-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.equation-value{font-size:1rem}.answer-input{width:8rem;font-size:1.25rem}.step{font-size:.8rem}.given-info,.target-info,.hint-info{flex-direction:column;gap:var(--space-1)}.given-label,.target-label,.hint-label{min-width:auto}}@media(prefers-reduced-motion:reduce){.stoichiometry-feedback,.stoichiometry-complete>*{animation:none}.answer-input-container.correct,.answer-input-container.incorrect{animation:none}}.tier-selector{padding:1rem;text-align:center}.tier-selector h2{margin-bottom:1.5rem;color:var(--text-primary);font-size:1.5rem}.tier-options{display:flex;flex-direction:column;gap:1rem;max-width:400px;margin:0 auto}.tier-option{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:left}.tier-option:hover{border-color:var(--accent-primary);background:var(--surface-hover);transform:translateY(-2px)}.tier-option:active{transform:translateY(0)}.tier-label{font-size:1.25rem;font-weight:600;color:var(--text-primary)}.tier-description{font-size:.95rem;color:var(--text-secondary)}.tier-example{font-size:.85rem;color:var(--text-tertiary);font-style:italic}.lr-question-display{padding:1rem;background:var(--surface-secondary);border-radius:12px;margin-bottom:1rem}.lr-equation-container{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-primary)}.lr-equation-label{font-size:.85rem;color:var(--text-tertiary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.lr-equation{font-size:1.25rem;font-weight:500;color:var(--text-primary);font-family:var(--font-mono, monospace);word-break:break-word}.lr-given-amounts{margin-bottom:1rem}.lr-given-label{font-size:.85rem;color:var(--text-tertiary);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.lr-amounts-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.lr-amount-item{font-size:1.1rem;color:var(--text-primary);padding:.5rem .75rem;background:var(--surface-primary);border-radius:8px;font-family:var(--font-mono, monospace)}.lr-question-text{font-size:1.1rem;color:var(--text-primary);font-weight:500;padding:.75rem;background:var(--accent-primary-light, rgba(59, 130, 246, .1));border-radius:8px;border-left:3px solid var(--accent-primary)}.lr-answer-input{padding:.5rem}.lr-choice-label{font-size:.9rem;color:var(--text-secondary);margin-bottom:1rem;text-align:center}.lr-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem;margin-bottom:1rem}.lr-choice-button{padding:1rem 1.5rem;font-size:1.25rem;font-family:var(--font-mono, monospace);background:var(--surface-secondary);border:2px solid var(--border-primary);border-radius:10px;cursor:pointer;transition:all .2s ease;color:var(--text-primary)}.lr-choice-button:hover:not(:disabled){border-color:var(--accent-primary);background:var(--surface-hover)}.lr-choice-button.selected{border-color:var(--accent-primary);background:var(--accent-primary-light, rgba(59, 130, 246, .15))}.lr-choice-button.correct{border-color:var(--success);background:var(--success-light, rgba(34, 197, 94, .15));color:var(--success)}.lr-choice-button.incorrect{border-color:var(--error);background:var(--error-light, rgba(239, 68, 68, .15));color:var(--error)}.lr-choice-button:disabled{cursor:not-allowed;opacity:.7}.lr-submit-button{display:block;width:100%;max-width:200px;margin:1rem auto 0;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;background:var(--accent-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease}.lr-submit-button:hover{background:var(--accent-primary-hover, #2563eb)}.lr-feedback{padding:1rem;border-radius:12px;margin-top:1rem;animation:fadeIn .3s ease}.lr-feedback.correct{background:var(--success-light, rgba(34, 197, 94, .1));border:1px solid var(--success)}.lr-feedback.incorrect{background:var(--error-light, rgba(239, 68, 68, .1));border:1px solid var(--error)}.feedback-message{margin-bottom:1rem}.feedback-header{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:600}.feedback-header.correct{color:var(--success)}.incorrect-header{flex-direction:row}.incorrect-text{color:var(--text-primary)}.incorrect-text strong{color:var(--success)}.user-answer-text{margin-top:.5rem;color:var(--text-secondary);font-size:.9rem}.solution-breakdown{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border-primary)}.breakdown-title{font-weight:600;color:var(--text-primary);margin-bottom:.75rem}.solution-steps{display:flex;flex-direction:column;gap:.5rem}.step{display:flex;align-items:flex-start;gap:.5rem;font-size:.95rem;color:var(--text-secondary)}.step-number{font-weight:600;color:var(--accent-primary);min-width:1.5rem}.step-text{flex:1}.step-indent{padding-left:2rem}.step-formula{font-family:var(--font-mono, monospace);color:var(--text-primary);min-width:4rem}.step-value{font-family:var(--font-mono, monospace);color:var(--text-primary)}.step-highlight{background:var(--accent-primary-light, rgba(59, 130, 246, .1));padding:.25rem .5rem;border-radius:4px;margin:.125rem 0}.step-label{font-size:.85rem;color:var(--accent-primary);font-weight:500;margin-left:.5rem}.final-answer{margin-top:1rem;padding:.75rem;background:var(--surface-primary);border-radius:8px;display:flex;align-items:center;gap:.5rem}.final-label{font-weight:600;color:var(--text-secondary)}.final-value{font-size:1.1rem;font-weight:600;color:var(--success);font-family:var(--font-mono, monospace)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.limiting-reactant-panel{padding:1rem;max-width:600px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.panel-title{text-align:center;color:var(--text-primary);margin-bottom:1.5rem;font-size:1.75rem}.question-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:.5rem}.tier-badge{padding:.375rem .75rem;background:var(--accent-primary);color:#fff;border-radius:6px;font-size:.85rem;font-weight:600;text-transform:capitalize}.question-progress{font-size:.9rem;color:var(--text-secondary)}.next-button{display:block;width:100%;max-width:200px;margin:1rem auto;padding:.875rem 1.5rem;font-size:1rem;font-weight:600;background:var(--accent-primary);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease}.next-button:hover{background:var(--accent-primary-hover, #2563eb)}.end-button{display:block;width:100%;max-width:200px;margin:1rem auto;padding:.75rem 1.25rem;font-size:.9rem;background:transparent;color:var(--text-tertiary);border:1px solid var(--border-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.end-button:hover{background:var(--surface-secondary);color:var(--text-secondary);border-color:var(--border-secondary)}.back-button{display:block;width:100%;max-width:200px;margin:2rem auto 0;padding:.75rem 1.25rem;font-size:.9rem;background:transparent;color:var(--text-secondary);border:1px solid var(--border-primary);border-radius:8px;cursor:pointer;transition:all .2s ease}.back-button:hover{background:var(--surface-secondary);border-color:var(--border-secondary)}.lr-complete{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;flex:1}.lr-complete h2{font-size:1.75rem;color:var(--text-primary);margin-bottom:1rem}.complete-tier{font-size:1.1rem;color:var(--text-secondary);margin-bottom:1.5rem}.complete-score{font-size:3rem;font-weight:700;color:var(--accent-primary);margin-bottom:.5rem}.complete-percentage{font-size:2rem;font-weight:600;color:var(--success);margin-bottom:2rem}.done-button{padding:1rem 3rem;font-size:1.1rem;font-weight:600;background:var(--accent-primary);color:#fff;border:none;border-radius:10px;cursor:pointer;transition:background .2s ease}.done-button:hover{background:var(--accent-primary-hover, #2563eb)}@media(prefers-color-scheme:light){.difficulty-selector h2{color:#1f2937}.difficulty-option{background:#fff;border-color:var(--border-primary)}.difficulty-option:hover{background:#6366f10d}.difficulty-label{color:#1f2937}.difficulty-description{color:#0009}.difficulty-example{color:#0006}}@media(min-width:768px){.difficulty-options{max-width:450px}}.conversion-question .given-value{display:flex;align-items:baseline;gap:.5rem}.conversion-question .given-value .value{font-size:2rem;font-weight:700;color:#fff}.conversion-question .given-value .unit{font-size:1.25rem;color:#a5b4fc}@media(prefers-color-scheme:light){.conversion-question{background:#6366f10d;border-color:#6366f126}.conversion-question .given-value .value{color:#1f2937}.conversion-question .given-value .unit{color:var(--color-primary)}.conversion-arrow{color:#0006}.target-unit .unit-label{color:#0009}}@media(max-width:480px){.conversion-question .given-value .value{font-size:1.5rem}.conversion-question .given-value .unit{font-size:1rem}.conversion-values{gap:var(--space-4)}}.conversion-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.conversion-feedback .incorrect-header{justify-content:flex-start}.conversion-feedback .solution-breakdown{padding-top:1rem;border-top:1px solid var(--border-subtle)}.conversion-feedback .breakdown-title{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem}@media(prefers-color-scheme:light){.conversion-feedback.correct{background:#22c55e1a}.conversion-feedback.incorrect{background:#ef44441a}.conversion-feedback .user-answer-text{color:#0009}.calculation-step{color:var(--color-primary);background:#6366f10d}}@media(max-width:480px){.calculation-step{font-size:.85rem}}@media(prefers-reduced-motion:reduce){.conversion-feedback{animation:none}}.unit-conversion-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--panel-gap);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.unit-conversion-panel .panel-title{font-size:1.75rem;font-weight:600;color:#a5b4fc;margin:0}.unit-conversion-panel .question-header{display:flex;align-items:center;gap:1rem;width:100%;justify-content:center}.difficulty-badge{padding:.25rem .75rem;background:#6366f133;border:1px solid rgba(99,102,241,.4);border-radius:20px;font-size:.8rem;font-weight:500;color:#a5b4fc;text-transform:capitalize}.unit-conversion-panel .question-progress{font-size:.9rem;color:#fff9}.difficulty-selector{width:100%;text-align:center}.difficulty-selector h2{font-size:1.25rem;color:#fff;margin-bottom:1.5rem}.difficulty-options{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:400px;margin:0 auto}.difficulty-option{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--space-6);background:var(--surface-1);border:1px solid var(--border-1);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);text-align:left;min-height:44px}.difficulty-option:hover{background:#6366f11a;border-color:#6366f166;transform:translateY(-2px)}.difficulty-label{font-size:1.1rem;font-weight:600;color:#fff}.difficulty-description{font-size:.9rem;color:var(--text-secondary)}.difficulty-example{font-size:.8rem;color:#fff6;font-family:monospace}.conversion-question{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;background:#6366f11a;border-radius:12px;border:1px solid rgba(99,102,241,.2)}.question-prompt{font-size:1rem;color:var(--text-secondary)}.conversion-values{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:center}.given-value{display:flex;align-items:baseline;gap:.5rem}.given-value .value{font-size:2rem;font-weight:700;color:#fff}.given-value .unit{font-size:1.25rem;color:#a5b4fc}.conversion-arrow{font-size:1.5rem;color:#fff6}.target-unit .unit-label{font-size:1.25rem;color:#fff9}.unit-conversion-panel .back-button,.unit-conversion-panel .end-button{margin-top:auto}.conversion-feedback{width:100%;padding:1.25rem;border-radius:12px;animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo)}.conversion-feedback.correct{background:#22c55e1a}.conversion-feedback.incorrect{background:#ef44441a}.conversion-feedback .feedback-message{text-align:center;margin-bottom:1rem}.conversion-feedback.correct .feedback-message{color:var(--color-success-text);font-size:1.25rem;font-weight:600}.conversion-feedback .incorrect-text{color:var(--color-error-text);font-size:1rem}.conversion-feedback .user-answer-text{color:#fff9;font-size:.9rem;margin-top:.25rem}.solution-breakdown{padding-top:1rem;border-top:1px solid var(--border-subtle)}.breakdown-title{font-size:.9rem;color:var(--text-secondary);margin-bottom:.75rem}.calculation-step{font-size:1rem;color:#a5b4fc;font-family:monospace;text-align:center;padding:.5rem;background:#6366f11a;border-radius:8px}.unit-conversion-complete{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;text-align:center}.unit-conversion-complete>*{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.unit-conversion-complete>*:nth-child(1){animation-delay:0ms}.unit-conversion-complete>*:nth-child(2){animation-delay:80ms}.unit-conversion-complete>*:nth-child(3){animation-delay:.16s}.unit-conversion-complete>*:nth-child(4){animation-delay:.24s}.unit-conversion-complete>*:nth-child(5){animation-delay:.32s}.unit-conversion-complete>*:nth-child(6){animation-delay:.4s}.unit-conversion-complete h2{margin:0;font-size:1.75rem;color:#a5b4fc}.complete-difficulty{font-size:1rem;color:var(--text-secondary)}.unit-conversion-complete .complete-score{font-size:3rem;font-weight:700;color:#fff}.unit-conversion-complete .complete-percentage{font-size:1.5rem;color:var(--text-secondary)}.unit-conversion-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.unit-conversion-panel .panel-title{color:var(--color-primary)}.difficulty-badge{background:#6366f11a;border-color:#6366f14d;color:var(--color-primary)}.unit-conversion-panel .question-progress{color:var(--text-muted)}.difficulty-option{background:#fff;border-color:var(--border-primary)}.difficulty-option:hover{background:#6366f10d}.difficulty-label{color:#1f2937}.difficulty-description{color:#0009}.difficulty-example{color:#0006}.conversion-question{background:#6366f10d;border-color:#6366f126}.given-value .value{color:#1f2937}.given-value .unit{color:var(--color-primary)}.conversion-arrow{color:#0006}.target-unit .unit-label{color:#0009}.conversion-feedback.correct{background:#22c55e1a}.conversion-feedback.incorrect{background:#ef44441a}.calculation-step{color:var(--color-primary);background:#6366f10d}.unit-conversion-complete h2{color:var(--color-primary)}.unit-conversion-complete .complete-score{color:#1f2937}.unit-conversion-complete .complete-percentage{color:#0009}}@media(min-width:768px){.unit-conversion-panel{gap:var(--space-8)}.difficulty-options{max-width:450px}}@media(max-width:480px){.unit-conversion-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.given-value .value{font-size:1.5rem}.given-value .unit{font-size:1rem}.conversion-values{gap:var(--space-4)}.calculation-step{font-size:.85rem}}@media(prefers-reduced-motion:reduce){.conversion-feedback,.unit-conversion-complete>*{animation:none}}.element-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;width:100%;max-width:380px}.element-prompt{font-size:var(--text-base);color:var(--text-secondary)}.element-value{font-size:var(--text-4xl);font-weight:var(--font-semibold);color:var(--text-primary);padding:var(--space-4) var(--space-8);background:#6366f11a;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.25)}.element-name{font-weight:var(--font-semibold)}.element-symbol{font-family:var(--font-mono);font-size:var(--text-4xl)}.element-atomic-number{font-family:var(--font-mono)}.config-value{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);padding:var(--space-4) var(--space-6);background:#6366f11a;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.25);font-family:var(--font-mono);letter-spacing:.03em}@media(prefers-color-scheme:light){.element-prompt{color:var(--text-secondary)}.element-value,.config-value{background:#6366f114;border-color:#6366f133}}@media(max-width:480px){.element-display{max-width:100%}.element-value{font-size:var(--text-3xl);padding:var(--space-3) var(--space-6)}.element-symbol{font-size:var(--text-3xl)}.config-value{font-size:var(--text-lg);padding:var(--space-3) var(--space-4)}}.config-input-container{width:100%;max-width:380px}.input-row{display:flex;gap:var(--space-3)}.config-input{flex:1;height:48px;padding:0 var(--space-4);font-size:var(--text-base);font-family:var(--font-mono);border:2px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-primary);transition:all var(--duration-base) var(--ease-default);outline:none}.config-input:focus{border-color:var(--color-primary);background:#6366f10d;box-shadow:var(--shadow-glow)}.config-input:disabled{opacity:.6;cursor:not-allowed}.config-input::placeholder{color:var(--text-muted)}.config-input-container.correct .config-input{background:#10b9811a;border-color:var(--color-success);animation:pop var(--duration-slow) var(--ease-spring)}.config-input-container.incorrect .config-input{background:#ef44441a;border-color:var(--color-error);animation:shake var(--duration-slow) var(--ease-default)}.config-input-container.correct .config-input{color:var(--color-success-light)}.config-input-container.incorrect .config-input{color:var(--color-error-light)}.submit-button{min-width:80px;height:48px;padding:0 var(--space-4);font-size:var(--text-base);font-weight:var(--font-semibold);color:#fff;background:var(--gradient-primary);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default);box-shadow:var(--shadow-button)}.submit-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-lg)}.submit-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.submit-button:disabled{opacity:.5;cursor:not-allowed}.config-preview{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-muted);font-family:var(--font-mono);text-align:center}@media(prefers-color-scheme:light){.config-input{background:var(--surface-2);border-color:var(--border-default)}.config-input:focus{border-color:var(--color-primary);background:#6366f108}.config-input-container.correct .config-input{background:#10b98114;border-color:var(--color-success);color:var(--color-success)}.config-input-container.incorrect .config-input{background:#ef444414;border-color:var(--color-error);color:var(--color-error)}}@media(max-width:480px){.config-input-container{max-width:100%}.input-row{flex-direction:column;gap:var(--space-2)}.config-input{height:52px;min-height:52px;padding:var(--space-3) var(--space-4);font-size:var(--text-base)}.submit-button{width:100%;height:48px}}@media(min-width:768px){.config-input-container{max-width:450px}}@media(prefers-reduced-motion:reduce){.config-input-container.correct .config-input,.config-input-container.incorrect .config-input{animation:none}}.config-feedback{width:100%;max-width:380px;padding:var(--space-5);border-radius:var(--radius-lg);animation:slide-down-fade var(--duration-enter) var(--ease-out)}.config-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.25)}.config-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.25)}.config-feedback .feedback-header-row{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.config-feedback .feedback-header-text{font-size:var(--text-lg);font-weight:var(--font-semibold)}.config-feedback.correct .feedback-header-text{color:var(--color-success-light)}.config-feedback.incorrect .feedback-header-text{color:var(--color-error-light)}.feedback-details{display:flex;flex-direction:column;gap:var(--space-2)}.feedback-row{display:flex;gap:var(--space-2);align-items:baseline;flex-wrap:wrap;font-size:var(--text-sm)}.feedback-label{color:var(--text-muted)}.feedback-value{font-family:var(--font-mono);color:var(--text-primary)}.feedback-value.correct-answer{font-weight:var(--font-semibold);color:var(--color-success-light)}.exception-explanation{margin-top:var(--space-3);padding:var(--space-3);background:#fbbf241a;border:1px solid rgba(251,191,36,.25);border-radius:var(--radius-md);display:flex;gap:var(--space-2);align-items:flex-start}.exception-icon{width:1.25rem;height:1.25rem;background:var(--color-gold);color:#000;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--font-bold);font-size:var(--text-xs);flex-shrink:0}.exception-text{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.exception-text strong{color:var(--color-gold)}@media(prefers-color-scheme:light){.config-feedback.correct{background:#10b98114;border-color:#10b98133}.config-feedback.incorrect{background:#ef444414;border-color:#ef444433}.config-feedback.correct .feedback-header-text{color:var(--color-success)}.config-feedback.incorrect .feedback-header-text{color:var(--color-error)}.feedback-value.correct-answer{color:var(--color-success)}.exception-explanation{background:#fbbf2414;border-color:#fbbf2433}.exception-text{color:var(--text-secondary)}}@media(max-width:480px){.config-feedback{max-width:100%;padding:var(--space-4)}.feedback-row{font-size:var(--text-xs)}}@media(min-width:768px){.config-feedback{max-width:450px}}@media(prefers-reduced-motion:reduce){.config-feedback{animation:none}}.electron-config-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.electron-config-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:calc(-1 * var(--space-4))}.electron-config-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.tier-selection{width:100%;max-width:380px;text-align:center}.tier-selection h2{margin:0 0 var(--space-6) 0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-primary-light)}.tier-options{display:flex;flex-direction:column;gap:var(--space-3)}.tier-button{padding:var(--space-4) var(--space-5);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-1);cursor:pointer;transition:all var(--duration-base) var(--ease-default);text-align:left;min-height:44px}.tier-button:hover{background:#6366f11a;border-color:#6366f14d;transform:translateY(-2px)}.tier-button:active{transform:translateY(0)}.tier-button-label{font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-1)}.tier-button-description{font-size:var(--text-sm);color:var(--text-secondary)}.noble-gas-toggle{margin-top:var(--space-6);display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.noble-gas-toggle label{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--text-secondary);font-size:var(--text-sm)}.noble-gas-toggle input[type=checkbox]{width:1rem;height:1rem;cursor:pointer;accent-color:var(--color-primary)}.back-button,.next-button,.end-button,.done-button{min-height:44px;padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.back-button{margin-top:var(--space-6);background:transparent;border:1px solid var(--border-default);color:var(--text-secondary)}.back-button:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-primary)}.end-button{background:transparent;border:1px solid var(--border-default);color:var(--text-secondary)}.electron-config-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-8);text-align:center}.electron-config-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.electron-config-complete>*:nth-child(1){animation-delay:0ms}.electron-config-complete>*:nth-child(2){animation-delay:80ms}.electron-config-complete>*:nth-child(3){animation-delay:.16s}.electron-config-complete>*:nth-child(4){animation-delay:.24s}.electron-config-complete>*:nth-child(5){animation-delay:.32s}.electron-config-complete h2{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-primary-light)}.electron-config-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.electron-config-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary)}.electron-config-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.tier-selection h2{color:var(--color-primary)}.tier-button{background:var(--surface-1);border-color:var(--border-subtle)}.tier-button:hover{background:#6366f114;border-color:#6366f140}.electron-config-complete h2{color:var(--color-primary)}}@media(min-width:768px){.electron-config-panel{gap:var(--space-8)}}@media(max-width:480px){.electron-config-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.tier-selection,.next-button{max-width:100%}}@media(prefers-reduced-motion:reduce){.electron-config-complete>*{animation:none}}.compound-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;width:100%;max-width:380px}.compound-prompt{font-size:var(--text-base);color:var(--text-secondary)}.compound-prompt strong{color:var(--color-primary-light);font-weight:var(--font-semibold)}.compound-formula{font-size:var(--text-4xl);font-weight:var(--font-semibold);color:var(--text-primary);padding:var(--space-4) var(--space-8);background:#6366f11a;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.25);font-family:var(--font-mono)}.compound-charge{font-size:var(--text-xl);color:var(--text-muted);margin-left:var(--space-1);vertical-align:super}.compound-name{font-size:var(--text-sm);color:var(--text-muted);font-style:italic}.compound-hint{font-size:var(--text-xs);color:var(--color-gold);padding:var(--space-1) var(--space-3);background:#fbbf241a;border-radius:var(--radius-sm);border:1px solid rgba(251,191,36,.25)}@media(prefers-color-scheme:light){.compound-prompt{color:var(--text-secondary)}.compound-prompt strong{color:var(--color-primary)}.compound-formula{background:#6366f114;border-color:#6366f133}.compound-charge,.compound-name{color:var(--text-muted)}.compound-hint{color:#b45309;background:#fbbf241a;border-color:#fbbf2433}}@media(max-width:480px){.compound-display{max-width:100%}.compound-formula{font-size:var(--text-3xl);padding:var(--space-3) var(--space-6)}.compound-charge{font-size:var(--text-lg)}}.oxidation-feedback{width:100%;max-width:380px;padding:var(--space-5);border-radius:var(--radius-lg);text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.oxidation-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.oxidation-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.25)}.oxidation-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.25)}.oxidation-feedback.correct .feedback-text{color:var(--color-success-light);font-weight:var(--font-semibold)}.oxidation-feedback.incorrect .feedback-text{color:var(--text-secondary)}.oxidation-feedback strong{font-weight:var(--font-bold);color:var(--color-error-light)}.feedback-content{display:flex;flex-direction:column;gap:var(--space-3)}.feedback-explanation{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5;text-align:left}@media(prefers-color-scheme:light){.oxidation-feedback.correct{background:#10b98114;border-color:#10b98133}.oxidation-feedback.incorrect{background:#ef444414;border-color:#ef444433}.oxidation-feedback.correct .feedback-text{color:var(--color-success)}.oxidation-feedback strong{color:var(--color-error)}.feedback-explanation{color:var(--text-secondary)}}@media(max-width:480px){.oxidation-feedback{max-width:100%;padding:var(--space-4)}}@media(prefers-reduced-motion:reduce){.oxidation-feedback{animation:none}}.oxidation-state-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.oxidation-state-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:calc(-1 * var(--space-4))}.oxidation-state-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.next-button,.end-button,.done-button{min-height:44px;padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.next-button{width:100%;max-width:380px;background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-button)}.next-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.next-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.end-button{margin-top:auto;background:transparent;border:1px solid var(--border-default);color:var(--text-secondary)}.end-button:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-primary)}.done-button{background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-button)}.done-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.oxidation-state-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-8);text-align:center}.oxidation-state-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.oxidation-state-complete>*:nth-child(1){animation-delay:0ms}.oxidation-state-complete>*:nth-child(2){animation-delay:80ms}.oxidation-state-complete>*:nth-child(3){animation-delay:.16s}.oxidation-state-complete>*:nth-child(4){animation-delay:.24s}.oxidation-state-complete>*:nth-child(5){animation-delay:.32s}.oxidation-state-complete h2{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-primary-light)}.oxidation-state-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.oxidation-state-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary)}.oxidation-state-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.oxidation-state-complete h2{color:var(--color-primary)}}@media(min-width:768px){.oxidation-state-panel{gap:var(--space-8)}}@media(max-width:480px){.oxidation-state-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.next-button{max-width:100%}}@media(prefers-reduced-motion:reduce){.oxidation-state-complete>*{animation:none}}.molecule-viewer{position:relative;width:100%;max-width:400px;aspect-ratio:1;background:#0f172acc;border-radius:var(--radius-lg);border:1px solid rgba(99,102,241,.2);overflow:hidden;contain:layout}.retry-btn{margin-top:.75rem;padding:.5rem 1.25rem;min-height:44px;font-size:.9rem;font-weight:500;background:var(--color-primary);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-base)}.retry-btn:hover{background:var(--color-primary-hover, #4f46e5);transform:translateY(-1px)}.retry-btn:active{transform:translateY(0)}.retry-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.retry-count{margin-top:.5rem;font-size:.75rem;color:var(--text-tertiary, #9ca3af)}.reset-view-btn{position:absolute;bottom:.75rem;right:.75rem;width:2.5rem;height:2.5rem;min-height:44px;min-width:44px;font-size:1.25rem;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);color:#fff;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.reset-view-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-color-scheme:light){.molecule-viewer{background:#f1f5f9e6;border-color:#6366f126}.reset-view-btn{background:#fffc;border-color:#00000026;color:#1f2937}.reset-view-btn:hover{background:#6366f126;border-color:#6366f14d}}@media(min-width:768px){.molecule-viewer{max-width:450px}}@media(max-width:480px){.molecule-viewer{max-width:100%}}@media(prefers-reduced-motion:reduce){.loading-spinner{animation:none}.viewer-container{transition:none}}.render-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;min-height:44px;font-size:.875rem;font-weight:500;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--surface-overlay);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.render-btn svg{opacity:.7;flex-shrink:0}.render-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-color-scheme:light){.render-btn{background:#fff;color:#4b5563}.render-btn.active{background:#6366f126;color:var(--color-primary)}}@media(max-width:480px){.render-mode-toggle{flex-wrap:wrap;justify-content:center}.render-btn{padding:var(--space-2) var(--space-3);font-size:.8rem}.render-btn span{display:none}}.formula-input{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:400px}.formula-display{position:relative;min-height:3.5rem;padding:1rem 1.25rem;background:var(--surface-overlay);border:2px solid var(--border-primary);border-radius:var(--radius-md);font-size:1.5rem;font-weight:600;color:#fff;display:flex;align-items:center;transition:all var(--transition-base)}.formula-display--correct{background:#22c55e26;border-color:#22c55e80}.formula-display--incorrect{background:#ef444426;border-color:#ef444480}.formula-display--disabled{opacity:.6;cursor:default}.formula-value{flex:1}.formula-value sub{font-size:.75em;vertical-align:sub}.formula-placeholder{color:var(--text-muted);font-weight:400}.formula-keypad{display:flex;flex-direction:column;gap:.5rem}.keypad-row{display:flex;gap:.375rem;justify-content:center;flex-wrap:wrap}.keypad-row--numbers{flex-wrap:nowrap}.keypad-btn{min-width:2.5rem;min-height:48px;padding:0 .75rem;font-size:1rem;font-weight:600;border:1px solid var(--border-primary);border-radius:var(--radius-md);background:var(--surface-overlay);color:#fff;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.keypad-btn:hover:not(:disabled){background:#6366f126;border-color:#6366f166;transform:translateY(-1px)}.keypad-btn:active:not(:disabled){transform:translateY(0)}.keypad-btn:disabled{opacity:.5;cursor:default}.keypad-btn--number{min-width:2.25rem;font-family:inherit}.keypad-btn--element{min-width:3rem;font-family:inherit;background:#6366f11a;border-color:#6366f14d}.keypad-btn--element:hover:not(:disabled){background:#6366f140;border-color:#6366f180}.keypad-btn--special{background:#6366f11a;color:var(--color-primary-light)}.keypad-btn--action{background:#ef44441a;color:#f87171}.keypad-btn--action:hover:not(:disabled){background:#ef444433;border-color:#ef444466}.keypad-btn--clear{min-width:4rem;font-size:.875rem}.keypad-btn--submit{width:100%;min-height:52px;margin-top:.25rem;font-size:1.1rem;background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-button)}.keypad-btn--submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.keypad-btn--submit:disabled{opacity:.5;background:var(--surface-overlay);box-shadow:none}@media(prefers-color-scheme:light){.formula-display{background:#fff;border-color:var(--border-primary);color:#1f2937}.formula-display:focus-within{border-color:#6366f180;box-shadow:0 0 0 3px #6366f126}.formula-display--correct{background:#22c55e1a;border-color:#22c55e80}.formula-display--incorrect{background:#ef44441a;border-color:#ef444480}.keypad-btn{background:#fff;color:#1f2937}.keypad-btn:hover:not(:disabled){background:#6366f11a}.keypad-btn--element{background:#6366f114}.keypad-btn--element:hover:not(:disabled){background:#6366f126}.keypad-btn--special{background:#6366f114;color:var(--color-primary)}.keypad-btn--action{background:#ef444414;color:#dc2626}}@media(max-width:480px){.formula-input{max-width:100%}.formula-display{min-height:3rem;padding:.875rem 1rem;font-size:1.25rem}.keypad-row{gap:2px}.keypad-btn{min-width:0;flex:1;height:2.5rem;padding:0 .25rem;font-size:.875rem;border-radius:6px}.keypad-row--numbers .keypad-btn{flex:1 1 0;min-width:0;max-width:calc((100% - 18px)*.1)}.keypad-btn--element{flex:0 0 auto;min-width:2.25rem;padding:0 .5rem}.keypad-btn--submit{height:2.75rem;font-size:1rem}}.model3d-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}@media(prefers-color-scheme:light){.model3d-feedback.correct{background:#22c55e1a;color:var(--color-success-text)}.model3d-feedback.incorrect{background:#ef44441a;color:var(--color-error-text)}.answer-formula{color:#1f2937}}@media(max-width:480px){.model3d-feedback{padding:var(--space-3) var(--space-4)}.feedback-answer{flex-direction:column;gap:var(--space-1)}}@media(prefers-reduced-motion:reduce){.model3d-feedback{animation:none}}.model3d-panel{width:100%;max-width:var(--container-width-wide);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--panel-gap);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.model3d-panel .question-progress{font-size:.9rem;color:#fff9;margin-top:-1rem}.model3d-prompt{font-size:1.1rem;color:var(--text-secondary);text-align:center}.molecule-viewer{position:relative;width:100%;max-width:400px;aspect-ratio:1;background:#0f172acc;border-radius:16px;border:1px solid rgba(99,102,241,.2);overflow:hidden;contain:layout}.viewer-container{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s ease}.viewer-container canvas{display:block;width:100%!important;height:100%!important}.viewer-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:var(--text-secondary);font-size:.9rem}.loading-spinner{width:32px;height:32px;border:3px solid rgba(99,102,241,.2);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewer-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--color-error-text);font-size:.9rem}.error-icon{font-size:2rem}.reset-view-btn{position:absolute;bottom:.75rem;right:.75rem;width:2.5rem;height:2.5rem;font-size:1.25rem;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.reset-view-btn:hover{background:#6366f14d;border-color:#6366f180}.render-mode-toggle{display:flex;gap:.5rem}.render-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.875rem;font-weight:500;border:1px solid var(--border-primary);border-radius:8px;background:var(--surface-overlay);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base)}.render-btn svg{opacity:.7}.render-btn:hover:not(:disabled){background:#6366f11a;border-color:#6366f14d}.render-btn.active{background:#6366f133;border-color:#6366f180;color:#fff}.render-btn.active svg{opacity:1}.render-btn:disabled{opacity:.5;cursor:default}.model3d-feedback{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:1rem;text-align:center;animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo);width:100%;max-width:400px}.model3d-feedback.correct{background:#22c55e26;color:var(--color-success-text)}.model3d-feedback.incorrect{background:#ef444426;color:var(--color-error-text)}.feedback-content{display:flex;flex-direction:column;gap:.5rem}.feedback-message{font-size:1.1rem;font-weight:600}.feedback-answer{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;align-items:baseline}.answer-label{color:var(--text-secondary);font-size:.9rem}.answer-formula{font-size:1.25rem;font-weight:600;color:#fff}.answer-name{font-size:.9rem;color:var(--text-secondary)}.feedback-details{display:flex;justify-content:center;gap:.5rem;font-size:.85rem;margin-top:.25rem}.detail-label{color:var(--text-muted)}.detail-value{color:var(--text-secondary)}.model3d-complete{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;text-align:center}.model3d-complete>*{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.model3d-complete>*:nth-child(1){animation-delay:0ms}.model3d-complete>*:nth-child(2){animation-delay:80ms}.model3d-complete>*:nth-child(3){animation-delay:.16s}.model3d-complete>*:nth-child(4){animation-delay:.24s}.model3d-complete h2{margin:0;font-size:1.75rem;color:#a5b4fc}.model3d-complete .complete-score{font-size:3rem;font-weight:700;color:#fff}.model3d-complete .complete-percentage{font-size:1.5rem;color:var(--text-secondary)}.model3d-complete .done-button{margin-top:var(--space-4)}.model3d-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.model3d-panel .question-progress{color:var(--text-muted)}.model3d-prompt{color:#0009}.molecule-viewer{background:#f1f5f9e6;border-color:#6366f126}.reset-view-btn{background:#fffc;border-color:#00000026;color:#1f2937}.reset-view-btn:hover{background:#6366f126;border-color:#6366f14d}.render-btn{background:#fff;color:#4b5563}.render-btn.active{background:#6366f126;color:var(--color-primary)}.model3d-feedback.correct{background:#22c55e1a;color:var(--color-success-text)}.model3d-feedback.incorrect{background:#ef44441a;color:var(--color-error-text)}.answer-formula{color:#1f2937}.model3d-complete h2{color:var(--color-primary)}.model3d-complete .complete-score{color:#1f2937}.model3d-complete .complete-percentage{color:#0009}.model3d-panel .end-button:hover{background:var(--surface-overlay);color:#000c;border-color:#00000040}}@media(min-width:768px){.model3d-panel{gap:var(--space-8)}.molecule-viewer{max-width:450px}}@media(max-width:480px){.model3d-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.molecule-viewer{max-width:100%}.render-mode-toggle{flex-wrap:wrap;justify-content:center}.render-btn{padding:var(--space-2) var(--space-3);font-size:.8rem}.render-btn span{display:none}.model3d-feedback{padding:var(--space-3) var(--space-4)}.feedback-answer{flex-direction:column;gap:var(--space-1)}}@media(prefers-reduced-motion:reduce){.model3d-feedback,.model3d-complete>*{animation:none}.loading-spinner{animation:none}}.selector-description{color:var(--text-secondary);max-width:400px;line-height:1.5}.type-chip,.difficulty-chip{padding:var(--space-3) var(--space-4);min-height:44px;border-radius:var(--radius-md);background:var(--surface-overlay);border:2px solid rgba(255,255,255,.15);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all var(--transition-base)}.type-chip:focus-visible,.difficulty-chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-color-scheme:light){.question-type-selector h2{color:#1f2937}.selector-section h3{color:var(--text-muted)}.type-chip,.difficulty-chip{background:#fff;border-color:#0000001f;color:#0009}.type-chip.selected,.difficulty-chip.selected{background:#6366f11a;border-color:#6366f166;color:var(--color-primary)}}@media(max-width:480px){.question-type-selector{padding:var(--space-4)}.question-type-selector h2{font-size:1.5rem}}@media(prefers-reduced-motion:reduce){.question-type-selector{animation:none}}.percent-comp-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center;width:100%}.display-info{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1);min-width:240px}.info-value{font-weight:600;color:#fff;font-family:var(--font-mono)}.percent-table{background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1);overflow:hidden;width:100%}.percent-table-header .table-cell{font-weight:600;color:#fffc;white-space:nowrap}.table-cell{flex:1;padding:var(--space-3) var(--space-4);text-align:center;font-size:1.1rem}.element-symbol{font-weight:600;color:#fff;font-size:1.1rem}.percent-value{font-family:var(--font-mono);color:var(--text-secondary);font-size:1.1rem}@media(prefers-color-scheme:light){.display-prompt{color:#0009}.display-formula{color:#1f2937;background:#6366f11a;border-color:#6366f133}.display-info{background:#00000005;border-color:var(--border-subtle)}.info-label{color:#0009}.info-value{color:#1f2937}.percent-table{background:#fff;border-color:var(--border-subtle)}.percent-table-header{background:#6366f10d}.percent-table-header .table-cell{color:#000000b3}.element-symbol{color:#1f2937}.percent-value{color:#0009}}@media(max-width:480px){.display-formula{font-size:2rem;padding:var(--space-3) var(--space-6)}.display-info{min-width:auto;width:100%}}.element-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-3) var(--space-4);min-width:60px;min-height:44px;background:var(--surface-overlay);border:2px solid rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.element-chip:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.chip-value{font-size:.95rem;font-family:var(--font-mono);color:#ffffffb3}.chip-correct{font-size:.9rem;font-family:var(--font-mono);color:var(--color-success-text)}.percent-results-summary{display:flex;flex-direction:column;gap:var(--space-2);width:100%;padding:var(--space-4);background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1)}.result-row{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:1.1rem}@media(prefers-color-scheme:light){.element-chip{background:#fff;border-color:#0000001f}.element-chip:hover:not(:disabled){border-color:#6366f166;background:#6366f10d}.element-chip.selected{border-color:#6366f199;background:#6366f11a}.chip-symbol{color:#1f2937}.chip-value,.keypad-label{color:#0009}.keypad-label strong{color:#1f2937}.keypad-hint{color:#0006}.percent-results-summary{background:#00000005;border-color:var(--border-subtle)}.result-symbol{color:#1f2937}.result-user{color:#0009}.result-arrow{color:#0006}}.percent-comp-feedback{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:1rem;text-align:center;animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo);width:100%;max-width:400px}.percent-comp-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.feedback-text{font-size:1.1rem;font-weight:500}.breakdown-molar-mass{font-size:1rem;color:var(--text-secondary);font-family:var(--font-mono)}.breakdown-row{display:flex;align-items:center;gap:var(--space-2);font-size:1.1rem;flex-wrap:wrap}.element-info{color:var(--text-secondary);font-family:var(--font-mono)}.element-contribution{color:#fff;font-family:var(--font-mono)}.element-percent{color:#a5b4fc;font-weight:600;font-family:var(--font-mono)}@media(prefers-color-scheme:light){.percent-comp-feedback.correct{background:#22c55e1a}.percent-comp-feedback.incorrect{background:#ef44441a}.percent-breakdown{background:#00000005;border-color:var(--border-subtle)}.breakdown-title{color:var(--text-muted)}.breakdown-molar-mass{color:#0009}.element-info{color:#000000b3}.element-equals,.element-arrow{color:#0006}.element-contribution{color:#1f2937}.element-percent{color:var(--color-primary)}.formula-text{color:#00000080}}@media(min-width:768px){.percent-breakdown{padding:var(--space-6)}}@media(max-width:480px){.percent-comp-feedback{padding:var(--space-3) var(--space-4)}.breakdown-row{font-size:1rem}}@media(prefers-reduced-motion:reduce){.percent-comp-feedback{animation:none}}.percent-comp-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--panel-gap);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.percent-comp-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:-1rem}.percent-comp-panel .question-progress{font-size:.9rem;color:#fff9}.question-type-selector{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-8);text-align:center;animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo)}.question-type-selector h2{font-size:1.75rem;color:#fff;margin:0}.selector-description{color:var(--text-secondary);max-width:400px}.selector-section{width:100%;max-width:400px}.selector-section h3{font-size:.9rem;color:#fff9;margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:.05em}.type-chips,.difficulty-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}.type-chip,.difficulty-chip{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--surface-overlay);border:2px solid rgba(255,255,255,.15);color:var(--text-secondary);font-size:.9rem;cursor:pointer;transition:all var(--transition-base)}.type-chip:hover,.difficulty-chip:hover{border-color:#6366f180;background:#6366f11a}.type-chip.selected,.difficulty-chip.selected{background:#6366f133;border-color:#6366f199;color:#fff}.start-button{margin-top:var(--space-4)}.percent-comp-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.display-prompt{font-size:1.1rem;color:var(--text-secondary)}.display-formula{font-size:2.5rem;font-weight:600;color:#fff;padding:var(--space-4) var(--space-8);background:#6366f126;border-radius:var(--radius-md);border:1px solid rgba(99,102,241,.3)}.display-info{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-5);background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1)}.info-row{display:flex;justify-content:space-between;gap:var(--space-4)}.info-label{color:var(--text-secondary)}.info-value{font-weight:600;color:#fff}.percent-table{background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1);overflow:hidden;min-width:200px}.percent-table-header{display:flex;background:#6366f11a;border-bottom:1px solid var(--border-1)}.percent-table-header .table-cell{font-weight:600;color:#fffc}.percent-table-row{display:flex;border-bottom:1px solid var(--border-subtle)}.percent-table-row:last-child{border-bottom:none}.table-cell{flex:1;padding:var(--space-3) var(--space-4);text-align:center}.element-symbol{font-weight:600;color:#fff}.percent-value{font-family:monospace;color:var(--text-secondary)}.percent-input-grid{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);width:100%}.element-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}.element-chip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-3) var(--space-4);min-width:60px;background:var(--surface-overlay);border:2px solid rgba(255,255,255,.15);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base)}.element-chip:hover:not(:disabled){border-color:#6366f166;background:#6366f11a}.element-chip.selected{border-color:#6366f1cc;background:#6366f133;box-shadow:0 0 0 2px #6366f14d}.element-chip.has-value{border-color:#6366f180}.element-chip.correct{background:#22c55e26;border-color:#22c55e80}.element-chip.incorrect{background:#ef444426;border-color:#ef444480}.element-chip:disabled{cursor:default}.chip-symbol{font-size:1.1rem;font-weight:600;color:#fff}.chip-value{font-size:.75rem;font-family:monospace;color:#ffffffb3}.element-chip.correct .chip-value{color:var(--color-success-text)}.element-chip.incorrect .chip-value{color:var(--color-error-text);text-decoration:line-through}.chip-correct{font-size:.7rem;font-family:monospace;color:var(--color-success-text)}.percent-keypad-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);width:100%;max-width:320px}.keypad-label{font-size:.95rem;color:var(--text-secondary)}.keypad-label strong{color:#fff;font-size:1.1rem}.keypad-hint{font-size:.8rem;color:#fff6;text-align:center}.percent-results-summary{display:flex;flex-direction:column;gap:var(--space-2);width:100%;max-width:280px;padding:var(--space-4);background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1)}.result-row{display:flex;align-items:center;gap:var(--space-2);font-family:monospace;font-size:.9rem}.result-symbol{font-weight:600;color:#fff;min-width:30px}.result-user{color:var(--text-secondary)}.result-row.correct .result-user{color:var(--color-success-text)}.result-row.incorrect .result-user{color:var(--color-error-text);text-decoration:line-through}.result-arrow{color:#fff6}.result-correct{color:var(--color-success-text);font-weight:500}.result-check{color:var(--color-success-text);margin-left:auto}.formula-input-container{width:100%;max-width:320px;display:flex;flex-direction:column;gap:var(--space-2)}.formula-input{width:100%;padding:var(--space-4);background:var(--surface-overlay);border:2px solid rgba(255,255,255,.15);border-radius:var(--radius-md);color:#fff;font-size:1.5rem;text-align:center;font-family:inherit;transition:all var(--transition-base)}.formula-input:focus{border-color:#6366f180;background:#6366f11a;outline:none}.formula-input::placeholder{color:#ffffff4d}.formula-input-container.correct .formula-input{background:#22c55e26;border-color:#22c55e80;color:var(--color-success-text)}.formula-input-container.incorrect .formula-input{background:#ef444426;border-color:#ef444480;color:var(--color-error-text)}.formula-hint{font-size:.8rem;color:#fff6;text-align:center}.percent-comp-feedback{padding:var(--space-4) var(--space-6);border-radius:var(--radius-md);font-size:1rem;text-align:center;animation:slide-down-fade var(--anim-duration-enter) var(--ease-out-expo)}.percent-comp-feedback.correct{background:#22c55e26;color:var(--color-success-text)}.percent-comp-feedback.incorrect{background:#ef444426;color:var(--color-error-text);display:flex;flex-direction:column;gap:var(--space-4)}.percent-comp-feedback strong{font-weight:600}.percent-breakdown{width:100%;padding:var(--space-4);background:var(--surface-1);border-radius:var(--radius-md);border:1px solid var(--border-1);text-align:left}.breakdown-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3);flex-wrap:wrap;gap:var(--space-2)}.breakdown-title{font-size:.9rem;color:#fff9}.breakdown-molar-mass{font-size:.85rem;color:var(--text-secondary);font-family:monospace}.breakdown-elements{display:flex;flex-direction:column;gap:var(--space-2)}.breakdown-row{display:flex;align-items:center;gap:var(--space-2);font-size:.9rem;flex-wrap:wrap}.element-info{color:var(--text-secondary);font-family:monospace}.element-equals,.element-arrow{color:#fff6}.element-contribution{color:#fff;font-family:monospace}.element-percent{color:#a5b4fc;font-weight:600;font-family:monospace}.breakdown-formula{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.formula-text{font-size:.85rem;color:#ffffff80;font-style:italic}.percent-comp-panel .submit-button{min-width:200px}.percent-comp-panel .end-button{margin-top:auto}.percent-comp-complete{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:3rem 2rem;text-align:center}.percent-comp-complete>*{animation:slide-up-fade var(--anim-duration-enter) var(--ease-out-expo) backwards}.percent-comp-complete>*:nth-child(1){animation-delay:0ms}.percent-comp-complete>*:nth-child(2){animation-delay:80ms}.percent-comp-complete>*:nth-child(3){animation-delay:.16s}.percent-comp-complete>*:nth-child(4){animation-delay:.24s}.percent-comp-complete>*:nth-child(5){animation-delay:.32s}.percent-comp-complete h2{margin:0;font-size:1.75rem;color:#a5b4fc}.percent-comp-complete .complete-score{font-size:3rem;font-weight:700;color:#fff}.percent-comp-complete .complete-percentage{font-size:1.5rem;color:var(--text-secondary)}.percent-comp-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.percent-comp-panel .question-progress{color:var(--text-muted)}.question-type-selector h2{color:#1f2937}.selector-section h3{color:var(--text-muted)}.type-chip,.difficulty-chip{background:#fff;border-color:#0000001f;color:#0009}.type-chip.selected,.difficulty-chip.selected{background:#6366f11a;border-color:#6366f166;color:var(--color-primary)}.display-prompt{color:#0009}.display-formula{color:#1f2937;background:#6366f11a;border-color:#6366f133}.display-info{background:#00000005;border-color:var(--border-subtle)}.info-label{color:#0009}.info-value{color:#1f2937}.percent-table{background:#fff;border-color:var(--border-subtle)}.percent-table-header{background:#6366f10d}.percent-table-header .table-cell{color:#000000b3}.element-symbol{color:#1f2937}.percent-value{color:#0009}.element-chip{background:#fff;border-color:#0000001f}.element-chip:hover:not(:disabled){border-color:#6366f166;background:#6366f10d}.element-chip.selected{border-color:#6366f199;background:#6366f11a}.chip-symbol{color:#1f2937}.chip-value,.keypad-label{color:#0009}.keypad-label strong{color:#1f2937}.keypad-hint{color:#0006}.percent-results-summary{background:#00000005;border-color:var(--border-subtle)}.result-symbol{color:#1f2937}.result-user{color:#0009}.result-arrow{color:#0006}.formula-input{background:#fff;border-color:#0000001f;color:#1f2937}.formula-input:focus{border-color:#6366f180;background:#6366f10d}.formula-input::placeholder{color:#0000004d}.formula-hint{color:#0006}.percent-breakdown{background:#00000005;border-color:var(--border-subtle)}.breakdown-title{color:var(--text-muted)}.breakdown-molar-mass{color:#0009}.element-info{color:#000000b3}.element-equals,.element-arrow{color:#0006}.element-contribution{color:#1f2937}.element-percent{color:var(--color-primary)}.formula-text{color:#00000080}.percent-comp-complete h2{color:var(--color-primary)}.percent-comp-complete .complete-score{color:#1f2937}.percent-comp-complete .complete-percentage{color:#0009}}@media(min-width:768px){.percent-comp-panel{gap:var(--space-8)}.percent-breakdown{padding:var(--space-6)}}@media(max-width:480px){.percent-comp-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.display-formula{font-size:2rem;padding:var(--space-3) var(--space-6)}.formula-input{font-size:1.25rem;padding:var(--space-3)}.breakdown-row{font-size:.85rem}.question-type-selector{padding:var(--space-4)}.question-type-selector h2{font-size:1.5rem}}@media(prefers-reduced-motion:reduce){.percent-comp-feedback,.percent-comp-complete>*,.question-type-selector{animation:none}}.gas-law-panel{width:100%;max-width:400px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + env(safe-area-inset-top));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.gas-law-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap}.gas-law-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.gas-law-panel .tier-badge{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-primary-muted);color:var(--color-primary-light);font-weight:var(--font-medium)}.gas-law-question{width:100%;max-width:380px;text-align:center}.question-law-badge{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.question-law-badge .law-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}.question-law-badge .law-formula{font-family:var(--font-mono);color:var(--color-primary-light);font-size:var(--text-sm)}.question-prompt{color:var(--text-primary);font-size:var(--text-lg);line-height:1.6}.question-prompt p{margin:var(--space-2) 0}.question-prompt p:first-child{margin-top:0}.question-prompt p:last-child{margin-bottom:0}.gas-law-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:380px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.gas-law-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.gas-law-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.gas-law-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.gas-law-feedback .feedback-text{font-weight:var(--font-semibold);font-size:var(--text-lg)}.gas-law-feedback.correct .feedback-text{color:var(--color-success-light)}.gas-law-feedback.incorrect .feedback-text{color:var(--color-error-light)}.gas-law-feedback .feedback-content{display:flex;flex-direction:column;gap:var(--space-2)}.gas-law-feedback .user-answer{font-size:var(--text-sm);color:var(--text-muted)}.gas-law-feedback strong{font-weight:var(--font-semibold);font-family:var(--font-mono)}.gas-law-feedback .explanation{width:100%;text-align:left;padding-top:var(--space-3);border-top:1px solid var(--border-primary)}.gas-law-feedback .explanation-title{font-weight:var(--font-semibold);color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-2)}.gas-law-feedback .explanation p{margin:var(--space-1) 0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}.gas-law-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.gas-law-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.gas-law-complete>*:nth-child(1){animation-delay:0ms}.gas-law-complete>*:nth-child(2){animation-delay:80ms}.gas-law-complete>*:nth-child(3){animation-delay:.16s}.gas-law-complete>*:nth-child(4){animation-delay:.24s}.gas-law-complete>*:nth-child(5){animation-delay:.32s}.gas-law-complete h2{margin:0;font-size:var(--text-2xl);color:var(--color-primary-light);font-weight:var(--font-semibold)}.gas-law-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.gas-law-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-family:var(--font-mono)}.gas-law-complete .done-button{margin-top:var(--space-4)}.gas-law-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.gas-law-panel .question-progress{color:var(--text-muted)}.gas-law-feedback.correct{background:#10b98114;border-color:#10b98140}.gas-law-feedback.incorrect{background:#ef444414;border-color:#ef444440}.gas-law-feedback.correct .feedback-text{color:var(--color-success)}.gas-law-feedback.incorrect .feedback-text{color:var(--color-error)}.gas-law-complete h2{color:var(--color-primary)}}@media(min-width:768px){.gas-law-panel{gap:var(--space-8)}}@media(max-width:480px){.gas-law-panel{padding:var(--space-8) var(--space-4) var(--space-6);gap:var(--space-5);max-width:100%}.gas-law-question{max-width:100%}.question-prompt{font-size:var(--text-base)}.gas-law-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.gas-law-feedback .feedback-text{font-size:var(--text-base)}}@media(prefers-reduced-motion:reduce){.gas-law-feedback,.gas-law-complete>*{animation:none}}.equation-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6);background:var(--surface-1);border-radius:var(--radius-lg);border:1px solid var(--border-default);width:100%;max-width:480px}.equation-prompt{font-size:var(--text-base);color:var(--text-secondary)}.equation-formula{font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary);font-family:var(--font-mono);text-align:center;word-break:break-word;line-height:1.4}@media(max-width:480px){.equation-display{padding:var(--space-4)}.equation-formula{font-size:var(--text-xl)}}.reaction-type-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);width:100%;max-width:480px}.reaction-type-button{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-3);min-height:80px;background:var(--surface-1);border:2px solid var(--border-default);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.reaction-type-button:hover:not(:disabled){background:var(--surface-2);border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.reaction-type-button:active:not(:disabled){transform:translateY(0)}.reaction-type-button:disabled{cursor:not-allowed;opacity:.6}.reaction-type-button.selected{border-color:var(--color-primary);background:var(--color-primary-subtle)}.reaction-type-button.correct{border-color:var(--color-success);background:var(--color-success-subtle);animation:pulse-correct .3s ease-out}.reaction-type-button.incorrect{border-color:var(--color-error);background:var(--color-error-subtle);animation:shake .3s ease-out}.type-name{font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--text-primary)}.type-pattern{font-size:var(--text-xs);font-family:var(--font-mono);color:var(--text-muted)}@keyframes pulse-correct{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@media(max-width:360px){.reaction-type-selector{grid-template-columns:1fr}.reaction-type-button{min-height:60px;padding:var(--space-3) var(--space-4)}}@media(prefers-reduced-motion:reduce){.reaction-type-button{transition:none}.reaction-type-button.correct,.reaction-type-button.incorrect{animation:none}}.reaction-type-feedback{width:100%;max-width:480px;padding:var(--space-4);border-radius:var(--radius-md);text-align:center;animation:slide-up-fade var(--duration-enter) var(--ease-out)}.reaction-type-feedback.correct{background:var(--color-success-subtle);border:1px solid var(--color-success);color:var(--color-success)}.reaction-type-feedback.incorrect{background:var(--color-error-subtle);border:1px solid var(--color-error)}.reaction-type-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.reaction-type-feedback .feedback-text{font-size:var(--text-lg);font-weight:var(--font-semibold);color:inherit}.reaction-type-feedback.incorrect .feedback-text{color:var(--text-primary)}.reaction-type-feedback .feedback-content{display:flex;flex-direction:column;gap:var(--space-3)}.reaction-type-feedback .feedback-explanation{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}@keyframes slide-up-fade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.reaction-type-feedback{animation:none}}.reaction-type-panel{width:100%;max-width:var(--container-width);margin:0 auto;padding:var(--panel-padding);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:calc(var(--vh, 1vh) * 100 - 4rem)}.reaction-type-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);margin-top:calc(-1 * var(--space-4))}.reaction-type-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.reaction-type-panel .next-button,.reaction-type-panel .end-button,.reaction-type-panel .done-button{min-height:44px;padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:var(--font-semibold);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-base) var(--ease-default)}.reaction-type-panel .next-button{width:100%;max-width:380px;background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-button)}.reaction-type-panel .next-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.reaction-type-panel .next-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.reaction-type-panel .end-button{margin-top:auto;background:transparent;border:1px solid var(--border-default);color:var(--text-secondary)}.reaction-type-panel .end-button:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-primary)}.reaction-type-panel .done-button{background:var(--gradient-primary);border:none;color:#fff;box-shadow:var(--shadow-button)}.reaction-type-panel .done-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.reaction-type-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-8);text-align:center}.reaction-type-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.reaction-type-complete>*:nth-child(1){animation-delay:0ms}.reaction-type-complete>*:nth-child(2){animation-delay:80ms}.reaction-type-complete>*:nth-child(3){animation-delay:.16s}.reaction-type-complete>*:nth-child(4){animation-delay:.24s}.reaction-type-complete>*:nth-child(5){animation-delay:.32s}.reaction-type-complete h2{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-primary-light)}.reaction-type-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.reaction-type-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary)}.reaction-type-complete .done-button{margin-top:var(--space-4)}@media(prefers-color-scheme:light){.reaction-type-complete h2{color:var(--color-primary)}}@media(min-width:768px){.reaction-type-panel{gap:var(--space-8)}}@media(max-width:480px){.reaction-type-panel{padding:var(--panel-padding-mobile);gap:var(--panel-gap);max-width:100%}.reaction-type-panel .next-button{max-width:100%}}@media(prefers-reduced-motion:reduce){.reaction-type-complete>*{animation:none}}.thermo-panel{width:100%;max-width:400px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + env(safe-area-inset-top));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.thermo-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap}.thermo-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.thermo-panel .tier-badge{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-primary-muted);color:var(--color-primary-light);font-weight:var(--font-medium)}.thermo-question{width:100%;max-width:380px;text-align:center}.question-calc-badge{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.question-calc-badge .calc-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}.question-calc-badge .calc-formula{font-family:var(--font-mono);color:var(--color-primary-light);font-size:var(--text-sm)}.thermo-question .question-prompt{color:var(--text-primary);font-size:var(--text-lg);line-height:1.6}.thermo-question .question-prompt p{margin:var(--space-2) 0}.thermo-question .question-prompt p:first-child{margin-top:0}.thermo-question .question-prompt p:last-child{margin-bottom:0}.thermo-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:380px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.thermo-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.thermo-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.thermo-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.thermo-feedback .feedback-text{font-weight:var(--font-semibold);font-size:var(--text-lg)}.thermo-feedback.correct .feedback-text{color:var(--color-success-light)}.thermo-feedback.incorrect .feedback-text{color:var(--color-error-light)}.thermo-feedback .feedback-content{display:flex;flex-direction:column;gap:var(--space-2)}.thermo-feedback .user-answer{font-size:var(--text-sm);color:var(--text-muted)}.thermo-feedback strong{font-weight:var(--font-semibold);font-family:var(--font-mono)}.thermo-feedback .explanation{width:100%;text-align:left;padding-top:var(--space-3);border-top:1px solid var(--border-primary)}.thermo-feedback .explanation-title{font-weight:var(--font-semibold);color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-2)}.thermo-feedback .explanation p{margin:var(--space-1) 0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;white-space:pre-wrap}.thermo-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.thermo-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.thermo-complete>*:nth-child(1){animation-delay:0ms}.thermo-complete>*:nth-child(2){animation-delay:80ms}.thermo-complete>*:nth-child(3){animation-delay:.16s}.thermo-complete>*:nth-child(4){animation-delay:.24s}.thermo-complete>*:nth-child(5){animation-delay:.32s}.thermo-complete h2{margin:0;font-size:var(--text-2xl);color:var(--color-primary-light);font-weight:var(--font-semibold)}.thermo-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.thermo-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-family:var(--font-mono)}.thermo-complete .done-button{margin-top:var(--space-4)}.thermo-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.thermo-panel .question-progress{color:var(--text-muted)}.thermo-feedback.correct{background:#10b98114;border-color:#10b98140}.thermo-feedback.incorrect{background:#ef444414;border-color:#ef444440}.thermo-feedback.correct .feedback-text{color:var(--color-success)}.thermo-feedback.incorrect .feedback-text{color:var(--color-error)}.thermo-complete h2{color:var(--color-primary)}}@media(min-width:768px){.thermo-panel{gap:var(--space-8)}}@media(max-width:480px){.thermo-panel{padding:var(--space-8) var(--space-4) var(--space-6);gap:var(--space-5);max-width:100%}.thermo-question{max-width:100%}.thermo-question .question-prompt{font-size:var(--text-base)}.thermo-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.thermo-feedback .feedback-text{font-size:var(--text-base)}}@media(prefers-reduced-motion:reduce){.thermo-feedback,.thermo-complete>*{animation:none}}.solution-panel{width:100%;max-width:400px;margin:0 auto;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + env(safe-area-inset-top));padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:var(--space-6);min-height:100dvh}.solution-panel .panel-header{display:flex;align-items:center;justify-content:center;gap:var(--space-3);flex-wrap:wrap}.solution-panel .question-progress{font-size:var(--text-sm);color:var(--text-muted)}.solution-panel .tier-badge{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--color-primary-muted);color:var(--color-primary-light);font-weight:var(--font-medium)}.solution-question{width:100%;max-width:380px;text-align:center}.solution-question .question-calc-badge{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--surface-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-primary)}.solution-question .question-calc-badge .calc-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}.solution-question .question-calc-badge .calc-formula{font-family:var(--font-mono);color:var(--color-primary-light);font-size:var(--text-sm)}.solution-question .question-prompt{color:var(--text-primary);font-size:var(--text-lg);line-height:1.6}.solution-question .question-prompt p{margin:var(--space-2) 0}.solution-question .question-prompt p:first-child{margin-top:0}.solution-question .question-prompt p:last-child{margin-bottom:0}.solution-feedback{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);width:100%;max-width:380px;text-align:center;animation:slide-down-fade var(--duration-enter) var(--ease-out)}.solution-feedback.correct{background:#10b9811a;border:1px solid rgba(16,185,129,.3)}.solution-feedback.incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.solution-feedback .feedback-header{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}.solution-feedback .feedback-text{font-weight:var(--font-semibold);font-size:var(--text-lg)}.solution-feedback.correct .feedback-text{color:var(--color-success-light)}.solution-feedback.incorrect .feedback-text{color:var(--color-error-light)}.solution-feedback .feedback-content{display:flex;flex-direction:column;gap:var(--space-2)}.solution-feedback .user-answer{font-size:var(--text-sm);color:var(--text-muted)}.solution-feedback strong{font-weight:var(--font-semibold);font-family:var(--font-mono)}.solution-feedback .explanation{width:100%;text-align:left;padding-top:var(--space-3);border-top:1px solid var(--border-primary)}.solution-feedback .explanation-title{font-weight:var(--font-semibold);color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-2)}.solution-feedback .explanation p{margin:var(--space-1) 0;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;white-space:pre-wrap}.solution-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-12) var(--space-6);text-align:center}.solution-complete>*{animation:slide-up-fade var(--duration-enter) var(--ease-out) backwards}.solution-complete>*:nth-child(1){animation-delay:0ms}.solution-complete>*:nth-child(2){animation-delay:80ms}.solution-complete>*:nth-child(3){animation-delay:.16s}.solution-complete>*:nth-child(4){animation-delay:.24s}.solution-complete>*:nth-child(5){animation-delay:.32s}.solution-complete h2{margin:0;font-size:var(--text-2xl);color:var(--color-primary-light);font-weight:var(--font-semibold)}.solution-complete .complete-score{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary);font-family:var(--font-mono)}.solution-complete .complete-percentage{font-size:var(--text-xl);color:var(--text-secondary);font-family:var(--font-mono)}.solution-complete .done-button{margin-top:var(--space-4)}.solution-panel .end-button{margin-top:auto}@media(prefers-color-scheme:light){.solution-panel .question-progress{color:var(--text-muted)}.solution-feedback.correct{background:#10b98114;border-color:#10b98140}.solution-feedback.incorrect{background:#ef444414;border-color:#ef444440}.solution-feedback.correct .feedback-text{color:var(--color-success)}.solution-feedback.incorrect .feedback-text{color:var(--color-error)}.solution-complete h2{color:var(--color-primary)}}@media(min-width:768px){.solution-panel{gap:var(--space-8)}}@media(max-width:480px){.solution-panel{padding:var(--space-8) var(--space-4) var(--space-6);gap:var(--space-5);max-width:100%}.solution-question{max-width:100%}.solution-question .question-prompt{font-size:var(--text-base)}.solution-feedback{padding:var(--space-3) var(--space-4);max-width:100%}.solution-feedback .feedback-text{font-size:var(--text-base)}}@media(prefers-reduced-motion:reduce){.solution-feedback,.solution-complete>*{animation:none}}.question-renderer{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center}.tool-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:#6366f126;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-primary-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.question-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.question-prompt{color:var(--text-secondary);font-size:var(--text-sm);margin:0}.question-value,.question-formula{font-size:var(--text-3xl);font-weight:var(--font-semibold);color:var(--text-primary);font-family:var(--font-mono)}.question-target{color:var(--text-muted);font-size:var(--text-base);margin:0}.question-hint{color:var(--text-muted);font-size:var(--text-sm)}.question-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.question-content--flashcard{gap:var(--space-2)}.flashcard-answer{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);width:100%}.answer-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:var(--space-2)}.answer-value{font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--color-success)}.equation-display{display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--text-xl);font-family:var(--font-mono)}.equation-display .arrow{color:var(--text-muted)}.question-content--stoichiometry{text-align:left;align-items:flex-start;width:100%}.question-given{font-size:var(--text-xl);font-weight:var(--font-medium);color:var(--text-primary)}.question-find{color:var(--text-secondary);font-size:var(--text-base);margin:var(--space-2) 0}.equation-prominent{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);margin-top:var(--space-4);padding:var(--space-4);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-md);width:100%}.equation-line{font-size:var(--text-lg);font-weight:var(--font-medium);color:var(--text-primary);font-family:var(--font-mono);text-align:center}.equation-arrow{font-size:var(--text-xl);color:var(--text-muted)}.equation-line .coefficient{color:var(--color-primary-light)}.question-element{font-size:var(--text-4xl);font-weight:var(--font-bold);color:var(--text-primary)}.question-config{font-size:var(--text-xl);font-family:var(--font-mono);color:var(--text-primary);word-break:break-word}.question-compound-name{color:var(--text-muted);font-size:var(--text-sm);font-style:italic;margin:0}.question-percents{font-size:var(--text-base);color:var(--text-primary);font-family:var(--font-mono)}.question-given-mass{color:var(--text-secondary);font-size:var(--text-sm);margin:0}.question-content--gas-law{text-align:center}.gas-law-badge{display:inline-flex;padding:var(--space-2) var(--space-3);background:#0ea5e926;border:1px solid rgba(14,165,233,.3);border-radius:var(--radius-md);margin-bottom:var(--space-3)}.gas-law-badge .law-type{font-weight:var(--font-semibold);color:#0ea5e9;font-size:var(--text-sm);text-transform:capitalize}.question-prompt-lines{display:flex;flex-direction:column;gap:var(--space-2)}.question-prompt-lines .question-prompt{font-size:var(--text-base);color:var(--text-primary);line-height:1.5}.question-content--thermo{text-align:center}.thermo-badge{display:inline-flex;padding:var(--space-2) var(--space-3);background:#f9731626;border:1px solid rgba(249,115,22,.3);border-radius:var(--radius-md);margin-bottom:var(--space-3)}.thermo-badge .calc-type{font-weight:var(--font-semibold);color:#f97316;font-size:var(--text-sm);text-transform:capitalize}@media(max-width:480px){.question-renderer{padding:var(--space-4)}.question-value,.question-formula{font-size:var(--text-2xl)}.question-element{font-size:var(--text-3xl)}.equation-line{font-size:var(--text-base)}}.srs-controls{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.srs-controls .reveal-button{width:100%;max-width:300px;padding:var(--space-4) var(--space-6);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-lg);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.srs-controls .reveal-button:hover{background:var(--color-primary-light);transform:translateY(-2px)}.srs-controls .rate-prompt{color:var(--text-secondary);font-size:.9rem;margin:0}.input-switcher{display:flex;flex-direction:column;gap:var(--space-4)}.balance-input-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}.feedback-renderer{padding:var(--space-4);border-radius:var(--radius-lg);animation:feedback-slide-in var(--duration-slow) var(--ease-out)}@keyframes feedback-slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback-renderer.correct{background:#10b9811a;border:1px solid var(--color-success)}.feedback-renderer.incorrect{background:#ef44441a;border:1px solid var(--color-error)}.feedback-status{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}.status-icon{font-size:var(--text-2xl)}.feedback-renderer.correct .status-icon{color:var(--color-success)}.feedback-renderer.incorrect .status-icon{color:var(--color-error)}.status-text{font-size:var(--text-lg);font-weight:var(--font-semibold)}.feedback-renderer.correct .status-text{color:var(--color-success)}.feedback-renderer.incorrect .status-text{color:var(--color-error)}.feedback-answers{display:flex;flex-direction:column;gap:var(--space-2)}.answer-row{display:flex;align-items:baseline;gap:var(--space-2)}.feedback-renderer .answer-label{font-size:var(--text-sm);color:var(--text-muted);min-width:100px}.feedback-renderer .answer-value{font-family:var(--font-mono);font-size:var(--text-base)}.user-answer{color:var(--text-secondary);text-decoration:line-through;opacity:.7}.correct-answer{color:var(--color-success);font-weight:var(--font-semibold)}.feedback-explanation{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.feedback-explanation p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5}@media(max-width:480px){.answer-row{flex-direction:column;gap:var(--space-1)}.feedback-renderer .answer-label{min-width:0}}.comprehensive-review-complete{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);padding:var(--space-6);text-align:center;animation:complete-fade-in var(--duration-enter) var(--ease-out)}@keyframes complete-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.comprehensive-review-complete h2{margin:0;font-size:var(--text-2xl);font-weight:var(--font-semibold);color:var(--text-primary)}.grade-display{display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.grade-display.grade-bounce{animation-delay:.2s}.grade-letter{font-size:6rem;font-weight:800;line-height:1;text-shadow:0 4px 20px currentColor}.grade-label{font-size:var(--text-sm);color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em}.score-section{display:flex;gap:var(--space-6);justify-content:center}.score-item{display:flex;flex-direction:column;align-items:center}.score-value{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);font-variant-numeric:tabular-nums}.score-label{font-size:var(--text-xs);color:var(--text-muted)}.composite-score{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-4) var(--space-8);background:var(--gradient-hero);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-xl)}.composite-label{font-size:var(--text-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.composite-value{font-size:var(--text-4xl);font-weight:800;color:var(--color-primary-light);font-variant-numeric:tabular-nums}.tool-breakdown{width:100%;max-width:400px}.tool-breakdown h3{margin:0 0 var(--space-4) 0;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);text-align:left}.breakdown-grid{display:flex;flex-direction:column;gap:var(--space-2)}.breakdown-item{display:grid;grid-template-columns:80px 1fr 50px;align-items:center;gap:var(--space-3)}.breakdown-tool{font-size:var(--text-xs);color:var(--text-secondary);text-align:left}.breakdown-bar-container{height:8px;background:var(--surface-2);border-radius:var(--radius-full);overflow:hidden}.breakdown-bar{height:100%;border-radius:var(--radius-full);transition:width var(--duration-enter) var(--ease-out)}.breakdown-stats{font-size:var(--text-xs);color:var(--text-muted);text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}.action-buttons{display:flex;gap:var(--space-3);width:100%;max-width:320px}.action-button{flex:1;min-height:52px;padding:var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.action-button--secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-subtle)}.action-button--secondary:hover{background:var(--surface-1);border-color:var(--border-default)}.action-button--primary{background:var(--gradient-primary);color:#fff;border:none;box-shadow:var(--shadow-button)}.action-button--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.action-button--primary:active{transform:translateY(0)}@media(max-width:480px){.comprehensive-review-complete{padding:var(--space-4)}.grade-letter{font-size:4rem}.score-section{flex-wrap:wrap;gap:var(--space-4)}.breakdown-item{grid-template-columns:70px 1fr 40px;gap:var(--space-2)}.breakdown-tool{font-size:.7rem}}.comprehensive-review-panel{display:flex;flex-direction:column;min-height:100dvh;padding:var(--space-12) var(--space-4) var(--space-8);padding-top:calc(var(--space-12) + var(--safe-top));padding-bottom:calc(var(--space-8) + var(--safe-bottom));max-width:var(--container-width);margin:0 auto}.loading{display:flex;align-items:center;justify-content:center;height:200px;color:var(--text-muted);font-size:var(--text-base)}.review-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}.progress-section{flex:1}.progress-text{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:var(--space-2)}.progress-bar-container{height:8px;background:var(--surface-2);border-radius:var(--radius-full);overflow:hidden}.progress-bar{height:100%;background:var(--gradient-primary);border-radius:var(--radius-full);transition:width var(--duration-slow) var(--ease-out)}.streak-badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);background:#fbbf2426;border:1px solid rgba(251,191,36,.3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold)}.streak-flame{font-size:var(--text-base)}.streak-count{font-size:var(--text-sm);font-weight:var(--font-semibold);color:var(--color-gold)}.review-content{flex:1;display:flex;flex-direction:column;gap:var(--space-4)}.next-button{min-height:44px;padding:var(--space-3) var(--space-6);background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--duration-base) var(--ease-out);margin-top:var(--space-2);align-self:center;box-shadow:var(--shadow-button)}.next-button:hover{transform:translateY(-2px);box-shadow:var(--shadow-button-hover)}.next-button:active{transform:translateY(0)}.review-footer{margin-top:auto;padding-top:var(--space-4)}.end-button{width:100%;min-height:44px;padding:var(--space-3) var(--space-4);background:transparent;color:var(--text-muted);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.end-button:hover{background:var(--surface-1);color:var(--text-primary);border-color:var(--border-default)}@media(max-width:480px){.comprehensive-review-panel{padding:var(--space-6) var(--space-3) var(--space-6);padding-top:calc(var(--space-6) + var(--safe-top));padding-bottom:calc(var(--space-6) + var(--safe-bottom))}.review-header{flex-direction:column;gap:var(--space-3);align-items:stretch}.streak-badge{align-self:center}}.app{width:100%;min-height:100vh;min-height:calc(var(--vh, 1vh) * 100);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right);position:relative}.app-content{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:2rem;animation:page-enter var(--anim-duration-enter) var(--ease-out-expo);position:relative;z-index:1}#root{max-width:100%;width:100%;margin:0;padding:0}.page-wrapper{width:100%;animation:page-enter var(--anim-duration-enter) var(--ease-out-expo)}@media(min-width:768px){.app-content{padding-top:2.5rem}}@media(min-width:1024px){.app-content{padding-top:3rem}}@media(prefers-reduced-motion:reduce){.app-content,.page-wrapper{animation:none}}.error-boundary{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--surface-primary)}.error-boundary-content{text-align:center;max-width:400px}.error-boundary-content h1{font-size:1.75rem;font-weight:600;margin-bottom:1rem;color:var(--text-primary)}.error-message{color:var(--text-muted);margin-bottom:1.5rem;font-size:.95rem;line-height:1.5}.error-reset-button{padding:.75rem 2rem;font-size:1rem;font-weight:500;border:none;border-radius:8px;background:var(--color-primary);color:#fff;cursor:pointer;transition:opacity .15s ease}.error-reset-button:hover{opacity:.9}.error-reset-button:active{opacity:.8}