.lcm-page{color:#333;background:#fffef0;max-width:1200px;min-height:100vh;margin:0 auto;padding:2rem}.page-header{text-align:center;color:#fff;margin-bottom:3rem}.page-header h1{text-shadow:2px 2px 4px #0003;margin-bottom:.5rem;font-size:3rem}.page-header .subtitle{opacity:.9;max-width:600px;margin:0 auto;font-size:1.2rem}.content-grid{grid-template-columns:1fr 2fr;gap:2rem;margin-bottom:3rem;display:grid}@media (max-width:1024px){.content-grid{grid-template-columns:1fr}}.calculator-section{flex-direction:column;gap:1.5rem;display:flex}.calculator-card,.result-card,.visualization-card{background:#fff;border-radius:16px;padding:1.5rem;transition:transform .3s;box-shadow:0 10px 30px #00000026}.calculator-card:hover,.result-card:hover,.visualization-card:hover{transform:translateY(-5px)}.calculator-card h2{color:#4a5568;margin:0 0 .5rem}.instruction{color:#718096;margin-bottom:1.5rem;font-size:.9rem}.number-inputs{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.input-group{flex-direction:column;gap:.5rem;display:flex}.input-with-button{align-items:center;gap:.5rem;display:flex}.number-input{border:2px solid #e2e8f0;border-radius:8px;flex:1;padding:.75rem;font-size:1rem;transition:all .3s}.number-input:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.remove-button{color:#fff;cursor:pointer;background:#fc8181;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:1.2rem;transition:background .3s;display:flex}.remove-button:hover{background:#f56565}.input-label{color:#718096;text-align:center;font-size:.8rem}.calculator-controls{flex-direction:column;gap:1rem;display:flex}.add-button{color:#fff;cursor:pointer;background:#68d391;border:none;border-radius:8px;padding:.75rem;font-weight:500;transition:background .3s}.add-button:hover{background:#48bb78}.action-buttons{gap:1rem;display:flex}.calculate-button,.reset-button{cursor:pointer;border:none;border-radius:8px;flex:1;padding:.875rem;font-weight:600;transition:all .3s}.calculate-button{color:#fff;background:#667eea}.calculate-button:hover:not(:disabled){background:#5a67d8}.calculate-button:disabled{cursor:not-allowed;background:#cbd5e0}.reset-button{color:#4a5568;background:#edf2f7}.reset-button:hover{background:#e2e8f0}.result-card h3{color:#4a5568;margin:0 0 1rem}.lcm-result{align-items:center;gap:.5rem;font-size:1.5rem;display:flex}.lcm-result .label{color:#718096}.lcm-result .value{color:#667eea;font-size:2rem;font-weight:700}.visualization-section{flex-direction:column;gap:1.5rem;display:flex}.visualization-controls{background:#fff;border-radius:16px;flex-direction:column;gap:1rem;padding:1rem 1.5rem;display:flex;box-shadow:0 5px 15px #0000001a}.control-group{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.control-group label{color:#4a5568;cursor:pointer;align-items:center;gap:.5rem;display:flex}.speed-control{color:#4a5568;align-items:center;gap:.75rem;display:flex}.speed-control input[type=range]{width:150px}.step-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}.step-controls button{color:#4a5568;cursor:pointer;background:#fff;border:2px solid #e2e8f0;border-radius:6px;padding:.5rem 1rem;font-weight:500;transition:all .3s}.step-controls button:hover:not(:disabled){color:#fff;background:#667eea;border-color:#667eea}.step-controls button:disabled{opacity:.5;cursor:not-allowed}.step-counter{text-align:center;background:#edf2f7;border-radius:6px;min-width:120px;padding:.5rem 1rem;font-weight:500}.visualization-card .step-header{margin-bottom:1.5rem}.visualization-card h3{color:#4a5568;margin:0 0 .5rem}.progress-bar{background:#e2e8f0;border-radius:3px;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;height:100%;transition:width .5s}.explanation-box{background:#f7fafc;border-left:4px solid #667eea;border-radius:0 8px 8px 0;margin-bottom:1.5rem;padding:1rem}.explanation-box p{color:#4a5568;margin:0;line-height:1.6}.visualization-area{flex-direction:column;gap:2rem;display:flex}.numbers-area h4,.lcm-area h4{color:#4a5568;text-align:center;margin:0 0 1rem}.numbers-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;display:grid}.number-card{text-align:center;background:#f7fafc;border:2px solid #e2e8f0;border-radius:12px;padding:1rem;transition:all .3s}.number-card:hover{border-color:#667eea;box-shadow:0 5px 15px #667eea1a}.original-number{color:#667eea;margin-bottom:.75rem;font-size:2rem;font-weight:700}.factors-display{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;min-height:40px;display:flex}.factor-bubble{color:#fff;animation:float-up .5s ease-out var(--delay)forwards;opacity:0;background:#68d391;border-radius:20px;padding:.25rem .75rem;font-weight:600;transform:translateY(10px)}.factor-bubble.moving{animation:1s ease-out forwards move-to-lcm}.factor-bubble sup{margin-left:1px;font-size:.7em}.empty-factors{color:#a0aec0;font-size:.9rem;font-style:italic}.lcm-construction{text-align:center;background:#f0fff4;border:2px dashed #68d391;border-radius:12px;padding:1.5rem}.current-lcm{color:#2f855a;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.common-factors{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;min-height:60px;margin-bottom:1rem;display:flex}.common-factor{color:#fff;background:#667eea;border-radius:25px;padding:.5rem 1rem;font-size:1.1rem;font-weight:600;animation:.3s ease-out pop-in}.common-factor sup{margin-left:2px;font-size:.8em}.empty-common{color:#a0aec0;padding:1rem;font-style:italic}.final-lcm{background:#fff;border:2px solid #667eea;border-radius:8px;padding:1rem}.result-label{color:#718096;margin-bottom:.25rem;font-size:.9rem}.result-value{color:#667eea;font-size:2.5rem;font-weight:700}.factor-flow{text-align:center;color:#718096;flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem;display:flex}.flow-arrow{font-size:2rem;animation:1s infinite bounce}.flow-text{font-size:.9rem}.empty-icon{margin-bottom:1rem;font-size:4rem}.empty-state h3{color:#4a5568;margin:0 0 .5rem}.empty-state p{color:#718096;max-width:400px;margin:0 auto}.explanation-section{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 10px 30px #00000026}.explanation-section h3{color:#4a5568;text-align:center;margin:0 0 1rem}.explanation-content{max-width:800px;margin:0 auto}.explanation-content p{color:#4a5568;margin-bottom:1rem;line-height:1.6}.explanation-content li{margin-bottom:.5rem;line-height:1.6}@keyframes float-up{to{opacity:1;transform:translateY(0)}}@keyframes move-to-lcm{0%{opacity:1;transform:translate(0)scale(1)}to{opacity:0;transform:translate(var(--tx,0),var(--ty,-100px))scale(.5)}}@keyframes pop-in{0%{opacity:0;transform:scale(.3)}70%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.moving-factor-element{transition:all .5s ease-out}.factor-bubble.moving{animation:.5s infinite alternate pulse;box-shadow:0 0 20px #667eea80}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 10px #667eea4d}to{transform:scale(1.1);box-shadow:0 0 25px #667eeab3}}.factor-flow.active .flow-arrow{color:#667eea;animation:.8s infinite bounce}.factor-flow.active .flow-text{color:#667eea;font-weight:600}.common-factor{animation:.5s ease-out both pop-in}.number-card{transition:all .3s}.number-card:hover{transform:translateY(-2px)}.progress-fill{animation:2s infinite pulse-glow}@keyframes pulse-glow{0%,to{box-shadow:0 0 5px #667eea80}50%{box-shadow:0 0 15px #667eeacc}}.explanation-box{animation:.5s ease-out slide-in}@keyframes slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.empty-factors{animation:2s infinite gentle-shake}@keyframes gentle-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.student-lcm-page{background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);max-width:1400px;min-height:100vh;margin:0 auto;padding:2rem;font-family:Segoe UI,Comic Sans MS,Chalkboard,cursive}.chalk-title{text-align:center;color:#2c3e50;text-shadow:2px 2px 4px #0000001a;margin-bottom:.5rem;font-family:Chalkboard,Comic Sans MS,cursive;font-size:3.5rem}.content-grid{grid-template-columns:350px 1fr;gap:2rem;margin:2rem 0;display:grid}@media (max-width:1024px){.content-grid{grid-template-columns:1fr}}.controls-section{flex-direction:column;gap:1.5rem;display:flex}.controls-card{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:1.5rem;box-shadow:0 8px 25px #0000001a}.controls-card h2{color:#2c3e50;margin-bottom:1.5rem;font-family:Chalkboard,cursive;font-size:1.8rem}.number-inputs-student{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.student-input-group{align-items:center;gap:.5rem;display:flex}.student-input{background:#f8f9fa;border:2px solid #bdc3c7;border-radius:8px;flex:1;padding:.75rem 1rem;font-family:Comic Sans MS,cursive;font-size:1.2rem;transition:all .3s}.student-input:focus{background:#fff;border-color:#3498db;outline:none;box-shadow:0 0 0 3px #3498db33}.remove-btn{color:#e74c3c;cursor:pointer;background:#fff;border:2px solid #e74c3c;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.2rem;transition:all .3s;display:flex}.remove-btn:hover{color:#fff;background:#e74c3c}.add-btn{color:#fff;cursor:pointer;background:#2ecc71;border:none;border-radius:8px;padding:.75rem;font-family:Comic Sans MS,cursive;font-size:1rem;transition:background .3s}.add-btn:hover{background:#27ae60}.control-buttons{gap:1rem;margin:1.5rem 0;display:flex}.calculate-btn,.reset-btn{cursor:pointer;border:none;border-radius:8px;flex:1;padding:.875rem;font-family:Comic Sans MS,cursive;font-size:1.1rem;font-weight:700;transition:all .3s}.calculate-btn{color:#fff;background:#3498db}.calculate-btn:hover:not(:disabled){background:#2980b9;transform:translateY(-2px)}.calculate-btn:disabled{cursor:not-allowed;background:#bdc3c7}.reset-btn{color:#fff;background:#e74c3c}.reset-btn:hover{background:#c0392b;transform:translateY(-2px)}.animation-controls{border-top:2px dashed #bdc3c7;flex-direction:column;gap:1rem;padding-top:1rem;display:flex}.checkbox-label{color:#2c3e50;cursor:pointer;align-items:center;gap:.5rem;font-family:Comic Sans MS,cursive;display:flex}.speed-control{color:#2c3e50;align-items:center;gap:1rem;font-family:Comic Sans MS,cursive;display:flex}.speed-control input[type=range]{flex:1}.result-card{background:#fff;border:2px solid #2ecc71;border-radius:12px;padding:1.5rem;box-shadow:0 8px 25px #0000001a}.result-card h3{color:#2c3e50;margin-bottom:1rem}.lcm-result{color:#2c3e50;align-items:center;gap:.5rem;font-family:Comic Sans MS,cursive;font-size:1.5rem;display:flex}.result-value{color:#e74c3c;text-shadow:2px 2px 4px #0000001a;font-size:2.5rem;font-weight:700}.student-notebook{background:#fffef0;border:1px solid #d4d4d4;border-radius:16px;min-height:600px;padding:2rem;position:relative;overflow:hidden;box-shadow:0 10px 30px #00000026,inset 0 0 100px #8bc34a0d}.notebook-paper{background:linear-gradient(#0000 95%,#8bc34a1a 95%) 0 0/100% 40px;min-height:500px;padding:2rem;position:relative}.notebook-line{background:#8bc34a33;height:1px;margin:39px 0}.numbers-header{gap:4rem;margin-bottom:2rem;padding-left:3rem;display:flex}.number-column{text-align:center;flex:1}.number-title{color:#2c3e50;text-align:center;border-bottom:3px solid #3498db;min-width:80px;padding:.5rem;font-family:Chalkboard,cursive;font-size:2.5rem;font-weight:700;display:inline-block}.multiples-rows{z-index:1;position:relative}.multiple-row{align-items:center;gap:4rem;height:40px;margin-bottom:.5rem;padding-left:1rem;display:flex}.row-number{color:#7f8c8d;width:2rem;font-family:Comic Sans MS,cursive;font-size:1rem}.multiple-cell{text-align:center;flex:1}.multiple-number{color:#2c3e50;padding:.25rem .5rem;font-family:Comic Sans MS,cursive;font-size:1.8rem;transition:all .5s;display:inline-block;position:relative}.multiple-number.latest{color:#e74c3c;font-weight:700;animation:.8s ease-out write-in}@keyframes write-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.multiple-number.circled{color:inherit;font-weight:inherit;position:relative}.circle-animation{pointer-events:none;border:3px solid #f39c12;border-radius:50%;width:50px;height:50px;animation:1.5s ease-out draw-circle;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes draw-circle{0%{opacity:1;width:0;height:0}to{opacity:.3;width:50px;height:50px}}.empty-space{color:#bdc3c7;font-family:Comic Sans MS,cursive;font-size:1.5rem}.lcm-result-box{background:#3498db1a;border-left:5px solid #3498db;border-radius:10px;align-items:center;gap:1rem;margin-top:2rem;padding:1rem 2rem;animation:.8s ease-out slide-in;display:flex}.lcm-label{color:#2c3e50;font-family:Chalkboard,cursive;font-size:2rem;font-weight:700}.lcm-value{color:#e74c3c;text-shadow:2px 2px 4px #0000001a;font-family:Comic Sans MS,cursive;font-size:3rem;font-weight:700}.writing-hand{pointer-events:none;z-index:100;filter:drop-shadow(2px 2px 4px #0000004d);width:60px;height:60px;transition:left .5s,top .5s;position:absolute}.hand-icon{font-size:3rem;animation:.5s ease-in-out infinite alternate hand-wiggle}@keyframes hand-wiggle{0%{transform:rotate(-5deg)}to{transform:rotate(5deg)}}.ink-dot{background:#2c3e50;border-radius:50%;width:8px;height:8px;animation:.3s ease-out ink-splash;position:absolute;top:30px;left:20px}@keyframes ink-splash{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(1.5)}}.ink-canvas{pointer-events:none;z-index:50;width:100%;height:100%;position:absolute;top:0;left:0}.step-explanation{background:#34495e0d;border-left:4px solid #3498db;border-radius:10px;margin-top:2rem;padding:1.5rem}.step-title{color:#2c3e50;margin-bottom:.5rem;font-family:Chalkboard,cursive;font-size:1.3rem;font-weight:700}.step-text{color:#34495e;font-family:Comic Sans MS,cursive;line-height:1.6}.step-controls-bar{background:#fff;border-radius:12px;margin-bottom:1rem;padding:1rem;box-shadow:0 5px 15px #0000001a}.step-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}.step-btn{color:#2c3e50;cursor:pointer;background:#fff;border:2px solid #bdc3c7;border-radius:6px;padding:.5rem 1rem;font-family:Comic Sans MS,cursive;font-weight:700;transition:all .3s}.step-btn:hover:not(:disabled){color:#fff;background:#3498db;border-color:#3498db;transform:translateY(-2px)}.step-btn:disabled{opacity:.5;cursor:not-allowed}.step-info{color:#2c3e50;text-align:center;background:#ecf0f1;border-radius:20px;min-width:150px;padding:.5rem 1.5rem;font-family:Comic Sans MS,cursive;font-weight:700}.empty-state{text-align:center;background:#fff;border-radius:16px;padding:4rem 2rem;box-shadow:0 10px 30px #0000001a}.empty-icon{margin-bottom:1rem;font-size:4rem;animation:2s infinite bounce}.explanation-section{background:#fff;border:2px solid #3498db;border-radius:16px;margin-top:2rem;padding:2rem;box-shadow:0 10px 30px #0000001a}.explanation-section h3{color:#2c3e50;text-align:center;margin-bottom:1.5rem;font-family:Chalkboard,cursive;font-size:2rem}.explanation-content{max-width:800px;margin:0 auto;font-family:Comic Sans MS,cursive}.explanation-content p{color:#34495e;margin-bottom:1rem;font-size:1.1rem;line-height:1.6}.explanation-content ol{color:#34495e;margin:1.5rem 0;padding-left:2rem}.explanation-content li{margin-bottom:.75rem;padding-left:.5rem;font-size:1.1rem;line-height:1.6;position:relative}.numbers-header{gap:2rem!important;margin-bottom:.5rem!important;padding-left:1.5rem!important}.number-title{min-width:60px!important;padding:.25rem .5rem!important}.multiple-row{gap:2rem!important;height:35px!important;margin-bottom:.1rem!important;padding-left:.5rem!important}.row-number{width:1.5rem!important;font-size:.9rem!important}.multiple-number{padding:.1rem .5rem!important;font-size:1.5rem!important}.writing-hand{transform:translate(-30px,-30px)}.notebook-line{margin:34px 0!important}.lcm-result-box{margin-top:1.5rem!important;padding:.75rem 1.5rem!important}.multiple-number.circled{color:#e74c3c!important;font-weight:700!important}.multiple-number.lcm-number{text-shadow:1px 1px 2px #0000001a;color:#c0392b!important;font-size:1.6rem!important;font-weight:700!important}.circle-animation{border:3px solid #e74c3c!important;animation:1.5s ease-out draw-circle-red!important}@keyframes draw-circle-red{0%{opacity:1;border-color:#e74c3c;width:0;height:0}50%{border-color:#ff6b6b;box-shadow:0 0 15px #e74c3c80}to{opacity:.3;border-color:#e74c3c;width:50px;height:50px}}@keyframes pulse-red{0%{transform:scale(1);box-shadow:0 0 #e74c3c66}70%{transform:scale(1.05);box-shadow:0 0 0 10px #e74c3c00}to{transform:scale(1);box-shadow:0 0 #e74c3c00}}.multiple-number.latest{animation:2s infinite pulse-red}.lcm-value{color:#e74c3c!important;text-shadow:2px 2px 4px #e74c3c33!important}.result-card{background:linear-gradient(135deg,#fff 0%,#ffeaea 100%)!important;border:2px solid #e74c3c!important}.result-value{color:#e74c3c!important;text-shadow:2px 2px 4px #e74c3c4d!important}.writing-hand.lcm-writing .hand-icon{filter:hue-rotate(-30deg)saturate(1.5)}.writing-hand.lcm-writing .ink-dot{background:#e74c3c!important}.notebook-paper,.numbers-header,.multiples-rows{margin-top:0!important;padding-top:0!important}.numbers-header{margin-bottom:.25rem!important}.multiples-rows{margin-top:0!important}@media (max-width:768px){.student-lcm-page,.student-lcm-page *,.student-notebook,.student-notebook *,.lcm-label,.lcm-value,.number-title,.multiple-number,.step-title,.step-text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif!important}.student-notebook{transform:translate(100px)}.lcm-page{background:#fff}.student-lcm-page{background:#fff!important}}