:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}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}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,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.home-page{padding:20px 0;text-align:center;width:100%;box-sizing:border-box}.home-header{margin-bottom:40px;padding-bottom:20px;border-bottom:1px solid #e0e0e0}.home-header h1{font-size:2.5rem;color:#2c3e50;margin-top:0;margin-bottom:10px;font-weight:600}.home-header .subtitle{font-size:1.1rem;color:#555;margin-top:0;margin-bottom:0}.tool-selection h2{font-size:1.5rem;color:#34495e;margin-top:0;margin-bottom:30px;font-weight:500}.tool-buttons-container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%}.tool-button{min-width:auto;width:80%;max-width:400px;justify-content:center}.tool-button{display:flex;align-items:center;justify-content:center;padding:18px 35px;font-size:1.1rem;font-weight:500;border:none;border-radius:8px;cursor:pointer;color:#fff;min-width:300px;box-shadow:0 4px 8px #0000001a;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.tool-button:hover{transform:translateY(-3px);box-shadow:0 6px 12px #00000026}.tool-icon{margin-right:12px;font-size:1.5em;vertical-align:middle}.tool-button-balancing{background-color:#2ecc71}.tool-button-balancing:hover{background-color:#27ae60}.tool-button-hybridization{background-color:#e67e22}.tool-button-hybridization:hover{background-color:#d35400}.balancing-container{padding:15px;text-align:left}.balancing-container h2{text-align:center;color:#2c3e50;margin-bottom:15px}.section-divider{border:none;border-top:1px solid #eee;margin:20px 0 30px}.home-button{margin-bottom:25px;background-color:#f8f9fa;border:1px solid #dee2e6;color:#495057;font-size:.9rem}.home-button:hover{background-color:#e9ecef}.balancing-menu{text-align:center}.balancing-menu h3{margin-bottom:30px;font-weight:500;color:#34495e}.menu-options{display:flex;justify-content:center;align-items:center;gap:25px;flex-wrap:wrap}.menu-button{padding:12px 25px;font-size:1rem;font-weight:500;border:none;border-radius:6px;cursor:pointer;color:#fff;min-width:200px;box-shadow:0 2px 5px #0000001a;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.menu-button:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.learn-button{background-color:#3498db}.learn-button:hover{background-color:#2980b9}.quiz-button{background-color:#9b59b6}.quiz-button:hover{background-color:#8e44ad}.learn-content,.quiz-content{margin-top:20px;padding:20px;background-color:#fdfdfe;border:1px solid #eef;border-radius:5px}.learn-content h3,.quiz-content h3{margin-top:0;color:#2c3e50;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:15px}.learn-content ol{line-height:1.8;padding-left:20px}.learn-content li{margin-bottom:10px}.back-button{display:inline-block;margin-bottom:25px;font-size:.9rem;background-color:#6c757d;color:#fff;border:none}.back-button:hover{background-color:#5a6268}@media (max-width: 600px){.menu-options{flex-direction:column;gap:15px}.menu-button{width:80%;min-width:auto}}.tutorial-heading{margin-top:40px;margin-bottom:20px;border-top:1px solid #eee;padding-top:20px;color:#16a085}.tutorial-example{margin-bottom:25px;padding:15px;border:1px solid #e7e7e7;border-radius:5px;background-color:#f9f9f9}.tutorial-example p{margin:5px 0;line-height:1.5}.tutorial-example code{font-family:Courier New,Courier,monospace;background-color:#eef;padding:2px 5px;border-radius:3px;font-size:1.05em}.tutorial-example code strong{color:#c0392b;font-weight:700}.learn-selection{padding:10px}.learn-selection h3{text-align:center;margin-bottom:10px;color:#2980b9}.learn-selection p{text-align:center;margin-bottom:30px;color:#555;font-size:.95em}.lesson-selection-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;margin-top:20px}.lesson-button,.summary-button{padding:12px 15px;font-size:.95rem;border:1px solid #bdc3c7;background-color:#fff;color:#34495e;border-radius:5px;cursor:pointer;text-align:left;transition:background-color .2s ease,border-color .2s ease,transform .1s ease;box-shadow:0 1px 3px #0000000d}.lesson-button:hover,.summary-button:hover{background-color:#ecf0f1;border-color:#95a5a6;transform:translateY(-1px)}.summary-button{border-color:#16a085;color:#16a085;font-weight:500;grid-column:1 / -1;text-align:center;margin-top:10px}.summary-button:hover{background-color:#e8f8f5}.interactive-tutorial{margin-top:15px;padding:20px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px}.interactive-tutorial h3{margin-top:0;color:#2c3e50}.interactive-tutorial code{font-family:Courier New,Courier,monospace;background-color:#eef;padding:2px 5px;border-radius:3px;font-size:1.05em}.summary-view{margin-top:15px;padding:20px;background-color:#fdfdfd;border:1px solid #eee;border-radius:5px}.summary-view h3{margin-top:0;color:#16a085;border-bottom:1px solid #eee;padding-bottom:10px;margin-bottom:15px}.summary-view ol{line-height:1.8;padding-left:25px}.summary-view li{margin-bottom:12px}.summary-view strong{color:#c0392b}.interactive-tutorial{margin-top:15px;padding:20px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px}.instruction-box{background-color:#e7f5ff;border:1px solid #b3d7ff;border-radius:5px;padding:15px;margin-bottom:25px;color:#0056b3}.instruction-box h4{margin-top:0;margin-bottom:8px;color:#004085}.instruction-box p{margin-bottom:0;line-height:1.6}.equation-display{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:30px;font-size:1.2em;padding:20px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}.coefficient-input{margin:0;text-align:center;width:30px;height:35px;font-size:1.1em;border:1px solid #ced4da;border-right:none;border-radius:4px 0 0 4px;padding-left:4px;padding-right:4px;box-sizing:border-box;color:#212529;background-color:#fff;transition:border-color .2s,box-shadow .2s}.coefficient-input:focus,.coefficient-control.highlight .coefficient-input{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.coefficient-input:disabled{background-color:#e9ecef;cursor:not-allowed}.formula{font-family:Times New Roman,Times,serif;margin:0 3px;white-space:nowrap}.plus,.arrow{margin:0 10px;font-weight:700}.atom-counts-box{background-color:#fff;border:1px solid #e9ecef;border-radius:6px;padding:20px;margin-bottom:20px}.atom-counts-box h4{margin-top:0;margin-bottom:15px;text-align:center;color:#495057}.atom-count-table{width:100%;border-collapse:collapse;margin-bottom:20px}.atom-count-table th,.atom-count-table td{border:1px solid #dee2e6;padding:10px;text-align:center;vertical-align:middle}.atom-count-table th{background-color:#f8f9fa;font-weight:500;color:#495057}.atom-count-table td:first-child{font-weight:700;width:20%}.input-table input[type=number]{width:60px;text-align:center;font-size:1em;border:1px solid #ced4da;border-radius:4px;padding:5px}.display-table td{font-size:1.1em}.display-table tr.balanced td{background-color:#d4edda;color:#155724}.display-table tr.unbalanced td{background-color:#f8d7da;color:#721c24}.display-table td:last-child{font-size:1.3em}.check-button,.next-step-button,.next-example-button{display:block;margin:25px auto 0;padding:10px 25px;font-size:1rem;font-weight:500;border:none;border-radius:5px;cursor:pointer;color:#fff;background-color:#007bff;transition:background-color .2s}.check-button:hover,.next-step-button:hover,.next-example-button:hover{background-color:#0056b3}.check-button:disabled,.next-step-button:disabled{background-color:#6c757d;cursor:not-allowed}.next-example-button{background-color:#28a745}.next-example-button:hover{background-color:#218838}.feedback.correct{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.feedback.incorrect{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.final-feedback{font-size:1.1em}sub{vertical-align:sub;font-size:.75em;line-height:1;position:relative}.formula sub{margin-left:-.1em}.coefficient-control{display:inline-flex;align-items:center;margin-right:4px;border:1px solid transparent;padding:1px}.coefficient-control.highlight{border:1px solid #007bff;border-radius:4px}.coefficient-buttons{display:flex;flex-direction:column;height:35px;box-sizing:border-box}.coefficient-button{font-size:.6em;line-height:1;padding:0 3px;cursor:pointer;border:1px solid #ccc;background-color:#f8f9fa;color:#000;height:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:15px}.coefficient-button:hover:not(:disabled){background-color:#e2e6ea}.coefficient-button:disabled{opacity:.5;cursor:not-allowed}.coefficient-button.increment{border-bottom:none;border-top-right-radius:3px}.coefficient-button.decrement{border-bottom-right-radius:3px}.formula{margin-left:2px}.count-control{display:inline-flex;align-items:center;justify-content:center}.count-input{width:45px;height:35px;text-align:center;font-size:1em;border:1px solid #ced4da;border-right:none;border-radius:4px 0 0 4px;padding:5px;box-sizing:border-box;background-color:#ffffeb;color:#212529}.count-input:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.count-control .coefficient-buttons{height:35px}@keyframes success-pop{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}.success-message{text-align:center;margin-top:20px;padding:15px 20px;background-color:#d4edda;color:#155724;border:1px solid #c3e6cb;border-radius:5px;font-size:1.1em}.success-message h4{margin:0;font-weight:700}.animate-success{animation:success-pop .5s ease-out forwards}.feedback{margin-top:15px;padding:10px;border-radius:4px;text-align:center;font-weight:500}.quiz-rules{padding:20px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin-top:15px}.quiz-rules h3{text-align:center;color:#9b59b6;margin-top:0;margin-bottom:20px}.quiz-rules ul{list-style-type:disc;margin-left:20px;margin-bottom:25px;line-height:1.7}.quiz-rules li{margin-bottom:8px}.start-quiz-button{display:block;margin:20px auto 0;padding:12px 30px;font-size:1.1rem;font-weight:500;color:#fff;background-color:#9b59b6;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s ease}.start-quiz-button:hover{background-color:#8e44ad}.quiz-in-progress{padding:20px;background-color:#fff;border:1px solid #e9ecef;border-radius:8px;margin-top:15px}.quiz-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid #eee;font-size:1.1em}.quiz-timer{font-weight:700;color:#dc3545;background-color:#f8d7da;padding:5px 10px;border-radius:4px}.quiz-question-count{font-weight:500;color:#6c757d}.quiz-question-area{margin-bottom:30px}.quiz-question-area h4{text-align:center;margin-bottom:20px;font-weight:500;color:#343a40}.quiz-equation{font-size:1.3em;padding:25px 0}.quiz-coeff-input{border-color:#adb5bd}.quiz-coeff-input:focus{border-color:#80bdff;box-shadow:0 0 0 .2rem #007bff40}.quiz-actions{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:20px;border-top:1px solid #eee}.quiz-button{padding:10px 20px;font-size:1rem;border-radius:5px;border:none;cursor:pointer;transition:background-color .2s ease,transform .1s ease}.skip-button{background-color:#ffc107;color:#343a40}.skip-button:hover{background-color:#e0a800;transform:translateY(-1px)}.next-button{background-color:#007bff;color:#fff}.next-button:hover{background-color:#0056b3;transform:translateY(-1px)}.quiz-results{padding:20px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;margin-top:15px}.quiz-results h3{text-align:center;color:#495057;margin-top:0;margin-bottom:20px}.quiz-summary-score{text-align:center;font-size:1.3em;padding:15px;background-color:#e2e3e5;border:1px solid #d6d8db;border-radius:5px;margin-bottom:30px}.quiz-summary-score strong{color:#0056b3}.quiz-results h4{margin-bottom:15px;font-weight:500;color:#495057}.results-table{width:100%;border-collapse:collapse;margin-bottom:20px;font-size:.9em;background-color:#fff}.results-table th,.results-table td{border:1px solid #dee2e6;padding:8px 10px;text-align:left;vertical-align:middle}.results-table th{background-color:#e9ecef;font-weight:600;color:#495057}.results-table tbody tr.correct td{background-color:#d4edda}.results-table tbody tr.incorrect td{background-color:#f8d7da}.results-table tbody tr.skipped td{background-color:#fff3cd;color:#664d03}.results-table td:nth-child(1),.results-table td:nth-child(5){text-align:center;font-weight:700}.results-table td:nth-child(3),.results-table td:nth-child(4){font-family:monospace}.hybridization-container{padding:15px;text-align:left}.hybridization-container h2{text-align:center;color:#2c3e50;margin-bottom:15px}.hybridization-container .home-button{margin-bottom:25px;background-color:#f8f9fa;border:1px solid #dee2e6;color:#495057;font-size:.9rem;padding:6px 12px;border-radius:4px;cursor:pointer}.hybridization-container .home-button:hover{background-color:#e9ecef}.hybridization-container .section-divider{border:none;border-top:1px solid #eee;margin:20px 0 30px}.atom-selection{text-align:center;padding:20px;background-color:#f8f9fa;border-radius:8px}.atom-selection h3{margin-top:0;margin-bottom:10px;color:#34495e}.atom-selection p{margin-bottom:25px;color:#6c757d}.atom-button-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:15px;max-width:400px;margin:0 auto}.atom-button{padding:15px 10px;font-size:1.2rem;font-weight:700;border-radius:5px;border:1px solid #ced4da;background-color:#fff;cursor:pointer;transition:background-color .2s,transform .1s}.atom-button:hover{background-color:#e9ecef;transform:scale(1.05)}.hybrid-type-selection{text-align:center;padding:20px;background-color:#f8f9fa;border-radius:8px;margin-top:20px}.hybrid-type-selection h3{margin-top:0;margin-bottom:20px;color:#34495e}.hybrid-button-group{margin-bottom:25px}.hybrid-type-selection .hybrid-button{margin:5px 8px;padding:10px 18px;font-size:1.1rem}.hybrid-type-selection .reset-button{margin-top:10px}.animation-container{padding:20px;background-color:#fff;border:1px solid #dee2e6;border-radius:8px;margin-top:20px}.animation-container h3{text-align:center;margin-top:0;margin-bottom:25px;color:#16a085}.animated-orbital-diagram{position:relative;display:flex;padding:20px 20px 20px 60px;min-height:33vh;background-color:#f0f8ff;border-radius:5px;border:1px solid #d1e7fd;margin-bottom:20px;overflow:hidden}.energy-axis{position:absolute;left:15px;top:10px;bottom:10px;width:20px;display:flex;align-items:center;justify-content:center}.energy-axis:before{content:"";position:absolute;left:50%;transform:translate(-50%);top:0;bottom:0;width:2px;background-color:#6c757d}.energy-axis:after{content:"";position:absolute;left:50%;transform:translate(-50%);top:-2px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #6c757d}.energy-axis span{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);font-size:.8em;color:#6c757d;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap}.orbitals-area{flex-grow:1;display:flex;align-items:center;position:relative}.orbital-group{display:flex;align-items:center;position:absolute;width:fit-content}.orbital-label{font-weight:700;margin-right:8px;font-size:.9em;color:#495057;width:40px;text-align:right}.orbital-boxes{display:flex;gap:3px;border:1px solid #adb5bd;padding:2px;background-color:#fff;border-radius:3px}.orbital-group-s .orbital-boxes{border-color:#2980b9;background-color:#eaf2f8}.orbital-group-p .orbital-boxes{border-color:#c0392b;background-color:#fdedec}.orbital-group-d .orbital-boxes{border-color:#f39c12;background-color:#fef5e7}.orbital-group-sp .orbital-boxes,.orbital-group-sp² .orbital-boxes,.orbital-group-sp³ .orbital-boxes,.orbital-group-sp³d .orbital-boxes,.orbital-group-sp³d² .orbital-boxes{border-color:#27ae60;background-color:#e8f8f5}.orbital-box{width:30px;height:35px;border:1px dashed #d0d0d0;background-color:transparent;display:flex;justify-content:space-around;align-items:center;padding:0 2px;box-sizing:border-box;position:relative}.electron{font-size:1.6em;font-weight:400;line-height:1;color:#000;transition:transform .3s ease-in-out,opacity .3s ease-in-out}@keyframes blink{50%{opacity:.3}}.electron-highlight{animation:blink 1s infinite;font-weight:700;color:#e74c3c}.prompt-button{position:absolute;bottom:-10px;left:50%;transform:translate(-50%);padding:5px 10px;font-size:.9em;background-color:#ffc107;color:#343a40;border:1px solid #e0a800;border-radius:4px;cursor:pointer;z-index:10}.animation-container .reset-button{display:block;margin:20px auto 0}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f8f9fa;color:#333;line-height:1.6;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}.App{display:flex;flex-direction:column;max-width:1100px;width:100%;padding:0 20px;box-sizing:border-box}.content-area{flex-grow:1;background-color:#fff;border-radius:8px;box-shadow:0 2px 15px #00000014;margin-top:20px;margin-bottom:20px;padding:30px 40px;width:100%;box-sizing:border-box}button{cursor:pointer;padding:8px 15px;border-radius:5px;border:1px solid #ccc;background-color:#eee;transition:background-color .2s}button:hover{background-color:#ddd}.app-footer{text-align:center;padding:20px 0;margin-top:auto;font-size:.9em;color:#777;border-top:1px solid #e0e0e0;width:100%;box-sizing:border-box}@media (max-width: 768px){.home-header h1{font-size:2rem}.tool-button{min-width:90%;padding:15px 25px}.tool-buttons-container{flex-direction:column;gap:20px}.content-area{padding:20px}.App{padding:0 10px}}