body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{text-align:left}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;color:#fff;padding:2rem;text-align:center}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}main{padding:20px}.dom-presentation{margin:0 auto;max-width:1200px;padding:20px}.intro-section,.practice-section,.virtual-dom-section{margin-bottom:40px}.comparison-box{display:flex;gap:20px;margin:20px 0}.real-dom,.virtual-dom{background-color:#f5f5f5;border-radius:8px;flex:1 1;padding:20px}.demo-container{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1fr;margin-top:20px}.react-demo,.vanilla-demo{background-color:#fff;border:1px solid #e1e4e8;border-radius:8px;padding:20px}.code-box{background-color:#282c34;border-radius:6px;margin:10px 0;padding:15px}.code-box pre{color:#fff;font-size:14px;margin:0}.explanation{color:#666;font-size:14px;margin-top:10px}.comparison-table{border-collapse:collapse;margin:20px 0;width:100%}.comparison-table td,.comparison-table th{border:1px solid #ddd}.comparison-table th{background-color:#f5f5f5}button{background-color:#61dafb;border-radius:4px;color:#000;margin:10px 0}button:hover{background-color:#4fa8d1}.explanation-box{background-color:#f8f9fa;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:20px 0;padding:20px}.code-example{background-color:#282c34;border-radius:6px;margin:10px 0;padding:15px}.code-example pre{color:#fff;margin:0;overflow-x:auto}.presentation-container{background:linear-gradient(135deg,#f5f7fa,#c3cfe2);border-radius:20px;box-shadow:0 10px 30px #0000001a;margin:0 auto;max-width:1200px;padding:2rem}.slide{background:#fff;border-radius:15px;box-shadow:0 5px 15px #0000000d;min-height:500px;padding:2rem}.slide-title{-webkit-text-fill-color:#0000;background:linear-gradient(120deg,#84fab0,#8fd3f4);-webkit-background-clip:text;color:#2d3436;font-size:2.5rem;margin-bottom:2rem;text-align:center}.dom-tree-visualization{display:flex;justify-content:center;padding:2rem}.tree-node{align-items:center;border:2px solid #00b894;border-radius:8px;display:flex;flex-direction:column;margin:20px;padding:10px;position:relative}.tree-node:before{background:#00b894;content:"";height:20px;position:absolute;top:-20px;width:2px}.demo-element{background:#f0f2f5;border-radius:8px;margin:1rem;padding:1rem;transition:all .3s ease}.performance-demo{display:flex;justify-content:space-around;margin:2rem 0}.counter-box{background:#fff;border-radius:15px;box-shadow:0 5px 15px #0000001a;padding:2rem;transition:transform .3s ease}.counter-box:hover{transform:translateY(-5px)}.performance-meter{background:#eee;border-radius:5px;height:10px;margin-top:1rem;overflow:hidden}.meter-bar{height:100%;transition:width .3s ease;width:0}.vanilla-meter{background:linear-gradient(90deg,#ff7675,#d63031)}.react-meter{background:linear-gradient(90deg,#00b894,#00cec9)}.navigation-dots{display:flex;justify-content:center;margin:1rem 0}.dot{background:#dfe6e9;border:none;border-radius:50%;cursor:pointer;height:12px;margin:0 5px;transition:all .3s ease;width:12px}.dot.active{background:#00b894;transform:scale(1.2)}.navigation-buttons{display:flex;justify-content:space-between;margin-top:2rem}.navigation-buttons button{background:linear-gradient(135deg,#00b894,#00cec9);border:none;border-radius:25px;color:#fff;cursor:pointer;padding:.8rem 1.5rem;transition:all .3s ease}.navigation-buttons button:hover{box-shadow:0 5px 15px #00b8944d;transform:translateY(-2px)}.navigation-buttons button:disabled{cursor:not-allowed;opacity:.5}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.slide-content{animation:slideIn .5s ease-out}.dom-tutorial{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0 auto;max-width:1000px;padding:20px}.tutorial-nav{background:#f5f5f5;border-radius:8px;display:flex;gap:10px;margin-bottom:30px;padding:10px}.tutorial-nav button{background:#fff;border:none;border-radius:6px;color:#333;cursor:pointer;padding:10px 20px;transition:all .3s ease}.tutorial-nav button.active{background:#007bff;color:#fff}.tutorial-content{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:30px}.concept-box{background:#f8f9fa;border-left:4px solid #007bff;border-radius:8px;margin:20px 0;padding:20px}.dom-tree{background:#2d2d2d;border-radius:6px;color:#fff;margin:15px 0;padding:15px}.dom-tree pre{font-family:monospace;margin:0}.concept-comparison{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.comparison-table table{border-collapse:collapse;margin:20px 0;width:100%}.comparison-table td,.comparison-table th{border:1px solid #dee2e6;padding:12px;text-align:left}.comparison-table th{background:#f8f9fa}.example-container{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1fr}.example-box{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:20px}button{background:#007bff;border:none;border-radius:6px;color:#fff;cursor:pointer;padding:10px 20px;transition:all .3s ease}button:hover{background:#0056b3}h2{color:#2c3e50;margin-bottom:20px}h3{color:#34495e;margin-bottom:15px}ul{padding-left:20px}li{margin:8px 0}.dom-vs-vdom-section{padding:20px}.visual-example{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:20px 0}.dom-representation,.html-code{background:#f8f9fa;border-radius:8px;padding:15px}.tree-visualization{padding:20px}.node{margin:10px 0;padding-left:20px;position:relative}.node:before{background:#007bff;content:"";height:2px;left:0;position:absolute;top:50%;width:15px}.children{border-left:2px solid #007bff;margin-left:20px;padding-left:10px}.process-steps{align-items:flex-start;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;margin:20px 0;padding:20px}.step{flex:1 1;position:relative}.step:not(:last-child):after{color:#007bff;content:"→";position:absolute;right:-10px;top:50%;transform:translateY(-50%)}.step-number{background:#007bff;border-radius:50%;color:#fff;display:inline-block;height:30px;line-height:30px;margin-bottom:10px;width:30px}.scenario-comparison{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:20px 0}.scenario-dom,.scenario-vdom{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:20px}.key-benefits ul{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));list-style:none;padding:0}.key-benefits li{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:20px}.key-benefits strong{color:#007bff;display:block;margin-bottom:10px}.virtual-dom-deep-section{padding:20px}.concept-explanation{margin-bottom:40px}.code-visualization{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:20px 0}.real-dom-code,.virtual-dom-code{background:#1e1e1e;border-radius:8px;color:#fff;padding:20px}.real-dom-code pre,.virtual-dom-code pre{margin:0;white-space:pre-wrap}.process-steps-detailed{display:flex;flex-direction:column;gap:30px;margin:30px 0}.step-detailed{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.diff-visualization{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:15px 0}.new-vdom,.old-vdom{background:#f8f9fa;border-radius:6px;padding:15px}.diff-explanation{background:#e8f4ff;border-radius:6px;margin:15px 0;padding:15px}.benefits-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:20px 0}.benefit-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.practices-list{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:20px 0}.practice-item{background:#f8f9fa;border-left:4px solid #28a745;border-radius:8px;padding:20px}.practice-item pre{background:#1e1e1e;border-radius:6px;color:#fff;margin:10px 0;overflow-x:auto;padding:15px}.animation-box{align-items:center;background:#f8f9fa;border-radius:8px;display:flex;height:150px;justify-content:center;margin:15px 0}.update-visualization{background:#f8f9fa;border-radius:6px;margin:15px 0;padding:15px}.update-visualization pre{background:#1e1e1e;border-radius:4px;color:#fff;margin:0;padding:10px}.diagram{background:#f8f9fa;border-radius:8px;margin:30px 0;padding:20px}.dom-diagram{display:flex;justify-content:center}.diagram-node{align-items:center;border:2px solid #007bff;border-radius:6px;display:flex;flex-direction:column;margin:20px;padding:10px 20px;position:relative}.diagram-node:before{background:#007bff;content:"";height:20px;position:absolute;top:-20px;width:2px}.virtual-dom-diagram .process-flow{align-items:center;display:flex;justify-content:space-between;padding:20px}.step{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;padding:15px;text-align:center}.step-title{color:#007bff;font-weight:700;margin-bottom:10px}.arrow{color:#007bff;font-size:24px}.code-comparison{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:20px 0}.code-block{background:#f8f9fa;border-left:4px solid #007bff;border-radius:8px;padding:15px}.live-demo{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:20px 0;padding:20px}.live-demo input{border:1px solid #dee2e6;border-radius:4px;margin-bottom:10px;padding:10px;width:100%}.virtual-dom-animation{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:20px}.animation-controls{align-items:center;display:flex;gap:20px;margin-bottom:20px}.step-indicator{display:flex;gap:10px}.step-dot{background:#ddd;border-radius:50%;cursor:pointer;height:12px;transition:all .3s ease;width:12px}.step-dot.active{background:#007bff;transform:scale(1.2)}.animation-stage{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1fr;margin:20px 0}.dom-container,.vdom-container{background:#f8f9fa;border-radius:8px;padding:20px}.dom-node,.vdom-node{border:2px solid #007bff;border-radius:6px;padding:15px;transition:all .3s ease}.highlight{background:#fff3cd;border-radius:4px;padding:2px 6px;transition:all .3s ease}.diff-active{border-color:#28a745}.diff{background:#d4edda}.updating{animation:update-pulse 1s infinite}@keyframes update-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.step-explanation{background:#e8f4ff;border-radius:6px;margin-top:20px;padding:15px}.step-explanation h4{color:#007bff;margin-bottom:10px}
/*# sourceMappingURL=main.3e255667.css.map*/