:root{--color-bg-dark: #0a0e1a;--color-bg-medium: #0f172a;--color-bg-light: #1e293b;--color-bg-card: rgba(30, 41, 59, .8);--color-primary: #3b82f6;--color-primary-light: #60a5fa;--color-secondary: #8b5cf6;--color-accent-yellow: #fbbf24;--color-accent-red: #ef4444;--color-accent-orange: #f97316;--color-text-primary: #f8fafc;--color-text-secondary: #94a3b8;--color-text-muted: #64748b;--glow-blue: rgba(59, 130, 246, .5);--glow-purple: rgba(139, 92, 246, .5);--glow-yellow: rgba(251, 191, 36, .5);--glow-red: rgba(239, 68, 68, .5);--glow-white: rgba(255, 255, 255, .4);--font-display: "Exo 2", sans-serif;--font-body: "Inter", system-ui, sans-serif;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background:var(--color-bg-dark);color:var(--color-text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}.stars-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:radial-gradient(ellipse at bottom,#1b2735,#090a0f);overflow:hidden}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--duration) ease-in-out infinite;opacity:var(--opacity)}@keyframes twinkle{0%,to{opacity:var(--opacity);transform:scale(1)}50%{opacity:.2;transform:scale(.8)}}.header{display:flex;flex-direction:column;align-items:center;padding:var(--space-xl) var(--space-lg);text-align:center;position:relative;z-index:10}.header-content{margin-bottom:var(--space-lg)}.header-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:800;background:linear-gradient(135deg,var(--color-primary-light),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.title-icon{font-size:1.2em;animation:pulse-glow 2s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:1;text-shadow:0 0 20px var(--glow-blue)}50%{opacity:.7;text-shadow:0 0 40px var(--glow-purple)}}.header-subtitle{font-family:var(--font-display);font-size:clamp(1rem,2.5vw,1.25rem);color:var(--color-text-secondary);font-weight:300;letter-spacing:.1em;text-transform:uppercase;margin-top:var(--space-sm)}.mode-switcher{display:flex;gap:var(--space-sm);background:var(--color-bg-card);padding:var(--space-xs);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.mode-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);background:transparent;color:var(--color-text-muted)}.mode-btn:hover{color:var(--color-text-primary)}.mode-btn--active{background:var(--color-primary);color:#fff;box-shadow:0 4px 20px var(--glow-blue)}.mode-btn .material-symbols-outlined{font-size:1.25rem}.main-content{max-width:1200px;margin:0 auto;padding:var(--space-xl) var(--space-lg);min-height:70vh}.learn-section{position:relative}.mass-toggle-container{display:flex;align-items:center;justify-content:center;gap:var(--space-lg);margin-bottom:var(--space-2xl);flex-wrap:wrap}.mass-label{font-family:var(--font-display);font-size:.875rem;font-weight:600;color:var(--color-text-muted);transition:color var(--transition-normal)}.mass-label--active{color:var(--color-accent-yellow)}.mass-label--high-active{color:var(--color-primary-light)}.toggle-switch{position:relative;width:80px;height:40px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;inset:0;background:var(--color-bg-light);border-radius:var(--radius-full);border:2px solid var(--color-accent-yellow);transition:all var(--transition-normal)}.toggle-slider:before{content:"";position:absolute;width:28px;height:28px;left:4px;top:50%;transform:translateY(-50%);background:var(--color-accent-yellow);border-radius:50%;transition:all var(--transition-normal);box-shadow:0 0 15px var(--glow-yellow)}.toggle-switch input:checked+.toggle-slider{border-color:var(--color-primary-light)}.toggle-switch input:checked+.toggle-slider:before{transform:translateY(-50%) translate(40px);background:var(--color-primary-light);box-shadow:0 0 15px var(--glow-blue)}.pathway-container{display:flex;flex-direction:column;align-items:center;gap:var(--space-xl);position:relative}.stage-node{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);cursor:pointer;transition:transform var(--transition-normal);animation:float 4s ease-in-out infinite;z-index:10}.stage-node:nth-child(2){animation-delay:-1s}.stage-node:nth-child(3){animation-delay:-2s}.stage-node:nth-child(4){animation-delay:-.5s}.stage-node:nth-child(5){animation-delay:-1.5s}.stage-node:nth-child(6){animation-delay:-2.5s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.stage-node:hover{transform:scale(1.05)}.stage-node:hover .stage-image-container{border-color:#ffffff80}.stage-node:hover .stage-overlay{opacity:1}.stage-image-container{position:relative;border-radius:50%;border:4px solid rgba(255,255,255,.2);overflow:hidden;transition:all var(--transition-normal)}.stage-image-container--sm{width:100px;height:100px}.stage-image-container--md{width:140px;height:140px}.stage-image-container--lg{width:180px;height:180px}.stage-image{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}.stage-node:hover .stage-image{transform:scale(1.1)}.stage-overlay{position:absolute;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-normal)}.stage-overlay .material-symbols-outlined{font-size:2rem;color:#fff}.glow-yellow{box-shadow:0 0 30px var(--glow-yellow)}.glow-blue{box-shadow:0 0 30px var(--glow-blue)}.glow-red{box-shadow:0 0 30px var(--glow-red)}.glow-purple{box-shadow:0 0 30px var(--glow-purple)}.glow-white{box-shadow:0 0 30px var(--glow-white)}.stage-label{background:var(--color-bg-card);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);font-family:var(--font-display);font-weight:600;font-size:.875rem;text-align:center;transition:transform var(--transition-normal)}.stage-node:hover .stage-label{transform:translateY(4px)}.split-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--space-lg);width:100%}.split-label{font-family:var(--font-display);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);background:var(--color-bg-card);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.1)}.split-container{display:flex;justify-content:center;gap:var(--space-3xl);width:100%}.connections-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connector-line{stroke:var(--color-text-muted);stroke-width:2;stroke-dasharray:8 4;opacity:.4;animation:dash-flow 20s linear infinite}@keyframes dash-flow{to{stroke-dashoffset:-1000}}.quiz-section{max-width:700px;margin:0 auto}.quiz-header{display:flex;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl)}.quiz-score{display:flex;align-items:center;gap:var(--space-sm);font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-accent-yellow);background:var(--color-bg-card);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--transition-fast)}.quiz-progress{flex:1;height:8px;background:var(--color-bg-light);border-radius:var(--radius-full);overflow:hidden}.quiz-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));border-radius:var(--radius-full);transition:width var(--transition-normal)}.quiz-card{background:var(--color-bg-card);border-radius:var(--radius-xl);padding:var(--space-xl);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:opacity var(--transition-normal)}.quiz-card-header{margin-bottom:var(--space-lg)}.quiz-stage-badge{display:flex;align-items:center;gap:var(--space-md);background:var(--color-bg-light);padding:var(--space-sm);border-radius:var(--radius-lg)}.quiz-stage-image{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}.quiz-stage-info{display:flex;flex-direction:column}.quiz-stage-label{font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.quiz-stage-name{font-family:var(--font-display);font-size:1.125rem;font-weight:600}.quiz-mass-type{font-size:.75rem;color:var(--color-primary-light)}.quiz-question{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:var(--space-lg);line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:var(--space-md)}.quiz-option{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-bg-light);border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-normal)}.quiz-option:hover:not(:disabled){border-color:var(--color-primary);background:#3b82f61a}.quiz-option:disabled{cursor:not-allowed;opacity:.5}.quiz-option--correct{border-color:#22c55e!important;background:#22c55e33!important;opacity:1!important}.quiz-option--incorrect{border-color:var(--color-accent-red)!important;background:#ef444433!important;opacity:1!important}.quiz-option-image{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);transition:border-color var(--transition-normal)}.quiz-option:hover:not(:disabled) .quiz-option-image{border-color:#fff}.quiz-option-text{display:flex;flex-direction:column}.quiz-option-title{font-weight:600;font-size:1rem}.quiz-option-hint{font-size:.75rem;color:var(--color-text-muted)}.quiz-feedback{margin-top:var(--space-lg);padding:var(--space-md);border-radius:var(--radius-lg);display:flex;align-items:flex-start;gap:var(--space-md);animation:slide-up .3s ease-out}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.quiz-feedback--correct{background:#22c55e1a;border:1px solid rgba(34,197,94,.3)}.quiz-feedback--correct .material-symbols-outlined{color:#22c55e}.quiz-feedback--incorrect{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.quiz-feedback--incorrect .material-symbols-outlined{color:var(--color-accent-red)}.quiz-feedback-title{font-weight:600;margin-bottom:var(--space-xs)}.quiz-feedback-text{font-size:.875rem;color:var(--color-text-secondary)}.quiz-complete{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid rgba(255,255,255,.1);text-align:center}.quiz-complete h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:var(--space-sm)}.quiz-complete p{color:var(--color-primary-light);font-size:1.125rem}.quiz-actions{display:flex;justify-content:center;gap:var(--space-md);margin-top:var(--space-lg)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.btn--primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 4px 20px var(--glow-blue)}.btn--primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px var(--glow-blue)}.btn--secondary{background:var(--color-bg-light);color:var(--color-text-primary);border:1px solid rgba(255,255,255,.2)}.btn--secondary:hover{background:var(--color-bg-card);border-color:#fff6}.modal-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-lg);opacity:1;transition:opacity var(--transition-normal)}.modal-overlay.hidden{opacity:0;pointer-events:none}.modal{background:var(--color-bg-medium);border-radius:var(--radius-xl);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative;border:1px solid rgba(255,255,255,.1);animation:modal-in .3s ease-out}@keyframes modal-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-close{position:absolute;top:var(--space-md);right:var(--space-md);background:var(--color-bg-light);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-primary);transition:all var(--transition-normal);z-index:10}.modal-close:hover{background:var(--color-bg-card);transform:rotate(90deg)}.modal-image-container{width:100%;aspect-ratio:1;overflow:hidden}.modal-image{width:100%;height:100%;object-fit:cover}.modal-content{padding:var(--space-xl)}.modal-title{font-family:var(--font-display);font-size:1.75rem;font-weight:700;margin-bottom:var(--space-lg);background:linear-gradient(135deg,var(--color-primary-light),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-lg)}.modal-stat{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);background:var(--color-bg-light);border-radius:var(--radius-md)}.modal-stat .material-symbols-outlined{color:var(--color-primary-light);font-size:1.5rem}.stat-label{display:block;font-size:.75rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-value{font-family:var(--font-display);font-weight:600}.modal-description{color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-lg)}.modal-fact{display:flex;gap:var(--space-md);padding:var(--space-md);background:#fbbf241a;border:1px solid rgba(251,191,36,.2);border-radius:var(--radius-md)}.modal-fact .material-symbols-outlined{color:var(--color-accent-yellow);font-size:1.5rem;flex-shrink:0}.modal-fact p{font-size:.875rem;color:var(--color-text-secondary);font-style:italic}.footer{text-align:center;padding:var(--space-xl);color:var(--color-text-muted);font-size:.875rem;border-top:1px solid rgba(255,255,255,.05)}.hidden{display:none!important}@media(max-width:768px){.header{padding:var(--space-lg) var(--space-md)}.mass-toggle-container{gap:var(--space-md)}.mass-label{font-size:.75rem}.toggle-switch{width:60px;height:32px}.toggle-slider:before{width:22px;height:22px}.toggle-switch input:checked+.toggle-slider:before{transform:translateY(-50%) translate(28px)}.stage-image-container--sm{width:80px;height:80px}.stage-image-container--md{width:110px;height:110px}.stage-image-container--lg{width:140px;height:140px}.split-container{gap:var(--space-xl)}.quiz-card{padding:var(--space-lg)}.quiz-question{font-size:1.125rem}.modal{max-height:85vh}.modal-stats{grid-template-columns:1fr}}