.periodic-table-segment{display:flex;flex-direction:column;gap:2rem}.table-header{text-align:center}.table-header h3{font-size:1.8rem;color:var(--dark-bg);margin-bottom:.5rem}.hint{color:#7f8c8d;font-size:1rem}.elements-grid{display:grid;grid-template-columns:2fr auto 1fr;gap:2rem;align-items:center}.metal-section h4,.oxygen-section h4{text-align:center;color:var(--primary-color);margin-bottom:1rem;font-size:1.2rem}.metal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}.element-card{background:#fff;border:3px solid;border-radius:var(--border-radius);padding:1rem;cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;box-shadow:0 2px 8px #0000001a}.element-card.metal{border-color:var(--metal-color)}.element-card.metal:hover{transform:translateY(-5px);box-shadow:0 6px 20px #00000026}.element-card.metal.selected{background:linear-gradient(135deg,var(--metal-color)15,white);box-shadow:0 0 20px var(--metal-color) 60}.element-card.oxygen{border-color:#e74c3c;background:linear-gradient(135deg,#e74c3c1a,#fff)}.element-symbol{font-size:2.5rem;font-weight:700;color:var(--dark-bg)}.element-charge{position:absolute;top:.5rem;right:.5rem;font-size:1rem;font-weight:600;color:var(--accent-color)}.element-name{font-size:.9rem;color:#7f8c8d;font-weight:500}.element-en{display:flex;gap:.3rem;align-items:baseline;padding:.3rem .8rem;background:#3498db1a;border-radius:20px;margin-top:.3rem}.en-label{font-size:.75rem;color:#7f8c8d;font-weight:600}.en-value{font-size:1.1rem;color:var(--primary-color);font-weight:700}.comparison-arrow{display:flex;flex-direction:column;align-items:center;gap:.5rem}.arrow-line{width:3px;height:60px;background:linear-gradient(to bottom,var(--primary-color),var(--accent-color));border-radius:10px}.arrow-text{font-size:1.5rem;font-weight:700;color:var(--primary-color);background:#fff;padding:.5rem 1rem;border-radius:50%;border:3px solid var(--primary-color)}.oxygen-section{display:flex;flex-direction:column;align-items:center;gap:1rem}.oxygen-note{text-align:center;font-size:.9rem;color:#7f8c8d;font-style:italic}.table-footer{text-align:center;padding:1.5rem;background:#3498db0d;border-radius:var(--border-radius)}.table-footer p{font-size:1rem;color:#555}@media (max-width: 1024px){.elements-grid{grid-template-columns:1fr;gap:2rem}.comparison-arrow{transform:rotate(90deg)}.metal-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}@media (max-width: 768px){.metal-grid{grid-template-columns:repeat(2,1fr)}.element-symbol{font-size:2rem}}.electronegativity-comparison{display:flex;flex-direction:column;gap:2rem;padding:1rem 0}.electronegativity-comparison h3{text-align:center;font-size:1.6rem;color:var(--dark-bg);margin-bottom:1rem}.comparison-container{display:flex;flex-direction:column;gap:1.5rem}.en-item{display:grid;grid-template-columns:120px 1fr;gap:1.5rem;align-items:center}.en-label-box{display:flex;align-items:center;justify-content:center;gap:.3rem;padding:1rem;border:3px solid;border-radius:var(--border-radius);background:#fff;font-size:1.8rem;font-weight:700;color:var(--dark-bg);box-shadow:0 2px 8px #0000001a}.oxygen-box{border-color:#e74c3c;background:linear-gradient(135deg,#e74c3c1a,#fff)}.en-bar-container{position:relative;height:50px;background:#ecf0f1;border-radius:25px;overflow:visible;box-shadow:inset 0 2px 4px #0000001a}.en-bar{height:100%;border-radius:25px;position:relative;transition:width 1s ease-out;box-shadow:0 2px 8px #0003}.metal-bar{background:linear-gradient(90deg,var(--primary-color),var(--primary-color)dd)}.oxygen-bar{background:linear-gradient(90deg,#e74c3c,#c0392b)}.en-value-label{position:absolute;right:-60px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:700;color:var(--dark-bg);background:#fff;padding:.3rem .8rem;border-radius:20px;box-shadow:0 2px 8px #0000001a}.difference-display{margin-top:1rem}.difference-card{background:linear-gradient(135deg,#3498db1a,#9b59b61a);border:2px solid var(--primary-color);border-radius:var(--border-radius);padding:1.5rem;text-align:center}.difference-label{font-size:1.1rem;color:#7f8c8d;margin-bottom:.75rem;font-weight:600}.difference-calculation{font-size:1.3rem;color:var(--dark-bg);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}.difference-value{font-size:2.5rem;font-weight:700;color:var(--accent-color);margin:0 .5rem}.difference-meaning{font-size:1.1rem;color:var(--primary-color);font-weight:600;padding:.5rem 1rem;background:#fff;border-radius:20px;display:inline-block;margin-top:.5rem}.explanation-box{background:#2ecc711a;border-left:4px solid var(--secondary-color);padding:1.5rem;border-radius:var(--border-radius)}.explanation-box p{font-size:1rem;line-height:1.7;color:#555}.explanation-box strong{color:var(--secondary-color)}@media (max-width: 768px){.en-item{grid-template-columns:100px 1fr;gap:1rem}.en-label-box{font-size:1.5rem;padding:.75rem}.en-bar-container{height:40px}.en-value-label{font-size:1.2rem;right:-50px}.difference-value{font-size:2rem}}.electron-flow-animation{display:flex;flex-direction:column;gap:2rem;padding:1rem 0}.electron-flow-animation h3{text-align:center;font-size:1.6rem;color:var(--dark-bg);margin-bottom:.5rem}.molecule-container{position:relative;padding:3rem 2rem;background:linear-gradient(135deg,#ecf0f180,#bdc3c74d);border-radius:var(--border-radius);min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden}.molecule-structure{display:flex;align-items:center;gap:0;position:relative;z-index:2}.atom{width:80px;height:80px;border-radius:50%;border:4px solid;display:flex;align-items:center;justify-content:center;background:#fff;position:relative;z-index:3}.metal-atom{border-color:var(--primary-color);box-shadow:0 0 20px #3498db66}.oxygen-atom{border-color:#e74c3c;box-shadow:0 0 25px #e74c3c66;background:linear-gradient(135deg,#fff,#e74c3c1a)}.hydrogen-atom{width:60px;height:60px;border-color:#3498db;box-shadow:0 0 15px #3498db4d}.atom-label{font-size:1.5rem;font-weight:700;color:var(--dark-bg)}.bond{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.bond-line{width:60px;height:4px;background:#34495e;position:relative}.bond-mo .bond-line{background:linear-gradient(90deg,var(--primary-color),#e74c3c)}.bond-oh{flex-direction:column;gap:.3rem}.bond-oh .bond-line.weakening{background:linear-gradient(90deg,#e74c3c,#3498db);opacity:.6;animation:weaken-pulse 2s ease-in-out infinite}@keyframes weaken-pulse{0%,to{opacity:.6;height:4px}50%{opacity:.3;height:3px}}.bond-status{font-size:.75rem;color:#e74c3c;font-weight:600;background:#fff;padding:.2rem .5rem;border-radius:10px;position:absolute;top:-25px;white-space:nowrap}.electron-flow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;pointer-events:none;z-index:2}.electron-particle{position:absolute;left:35%;top:48%;font-size:1.2rem;font-weight:700;color:#3498db;background:#3498db33;padding:.3rem .5rem;border-radius:50%;border:2px solid #3498db;box-shadow:0 0 10px #3498db80}.density-gradient{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--border-radius);pointer-events:none;z-index:1}.flow-explanation{background:#fff;border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 2px 8px #0000001a}.explanation-card h4{font-size:1.3rem;color:var(--primary-color);margin-bottom:1rem;text-align:center}.explanation-steps{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.step{display:flex;gap:1rem;align-items:flex-start;padding:1rem;background:#3498db0d;border-radius:8px;border-left:4px solid var(--primary-color)}.step-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--primary-color);color:#fff;border-radius:50%;font-weight:700;flex-shrink:0}.step p{margin:0;color:#555;line-height:1.6;flex:1}.intensity-indicator{display:flex;align-items:center;gap:1rem;padding:1rem;background:#9b59b61a;border-radius:8px}.intensity-indicator>span:first-child{font-weight:600;color:var(--dark-bg);white-space:nowrap}.intensity-bar{flex:1;height:24px;background:#ecf0f1;border-radius:12px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.intensity-fill{height:100%;background:linear-gradient(90deg,var(--secondary-color),var(--accent-color));border-radius:12px;transition:width 1s ease-out}.intensity-label{font-weight:700;color:var(--accent-color);white-space:nowrap}@media (max-width: 768px){.molecule-container{padding:2rem 1rem;min-height:200px}.molecule-structure{transform:scale(.8)}.atom{width:60px;height:60px}.hydrogen-atom{width:50px;height:50px}.atom-label{font-size:1.2rem}.bond-line{width:40px}.intensity-indicator{flex-direction:column;align-items:stretch}}.proton-release-visualization{display:flex;flex-direction:column;gap:2rem;padding:1rem 0}.proton-release-visualization h3{text-align:center;font-size:1.6rem;color:var(--dark-bg);margin-bottom:.5rem}.release-container{display:flex;flex-direction:column;gap:2rem}.molecule-section{background:linear-gradient(135deg,#ecf0f180,#bdc3c74d);border-radius:var(--border-radius);padding:2rem;position:relative;min-height:250px}.before-after{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;align-items:center}.state-box{background:#fff;border-radius:var(--border-radius);padding:1.5rem;text-align:center;box-shadow:0 2px 8px #0000001a}.state-label{display:block;font-size:.9rem;color:#7f8c8d;font-weight:600;text-transform:uppercase;margin-bottom:1rem}.molecule-display{font-size:1.8rem;font-weight:700;color:var(--dark-bg);margin-bottom:.75rem;display:flex;align-items:center;justify-content:center;gap:.3rem;flex-wrap:wrap}.molecule-part{display:inline-flex;align-items:center}.molecule-part.metal{color:var(--primary-color)}.molecule-part.oxygen{color:#e74c3c}.molecule-part.hydrogen{color:#3498db}.molecule-part.hydroxide{color:#e74c3c}.bond{color:#7f8c8d;font-weight:400}.bond.weakened{opacity:.5;text-decoration:line-through}.state-description{font-size:.9rem;color:#555;font-style:italic}.transition-arrow{font-size:3rem;color:var(--primary-color);font-weight:700}.proton-release{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}.proton-particle{width:70px;height:70px;background:linear-gradient(135deg,#f39c12,#e67e22);border:4px solid #d68910;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff;box-shadow:0 0 30px #f39c1299;animation:proton-glow 1s ease-in-out infinite}@keyframes proton-glow{0%,to{box-shadow:0 0 30px #f39c1299}50%{box-shadow:0 0 50px #f39c12e6}}.release-label{background:var(--warning-color);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:700;font-size:1rem;box-shadow:0 2px 8px #0003}.acidity-indicator{display:flex;justify-content:center}.acidity-card{background:#fff;border-radius:var(--border-radius);padding:2rem;box-shadow:0 4px 12px #00000026;max-width:500px;width:100%;border:3px solid}.acidity-card.strong{border-color:#e74c3c;background:linear-gradient(135deg,#e74c3c0d,#fff)}.acidity-card.moderate{border-color:#f39c12;background:linear-gradient(135deg,#f39c120d,#fff)}.acidity-card.weak{border-color:#3498db;background:linear-gradient(135deg,#3498db0d,#fff)}.acidity-card.minimal{border-color:#95a5a6;background:linear-gradient(135deg,#95a5a60d,#fff)}.acidity-icon{text-align:center;font-size:3rem;margin-bottom:1rem}.acidity-card h4{text-align:center;font-size:1.5rem;color:var(--dark-bg);margin-bottom:1rem}.acidity-description{text-align:center;font-size:1.1rem;color:#555;margin-bottom:1.5rem;line-height:1.6}.acidity-meter{display:flex;flex-direction:column;gap:.5rem}.meter-label{font-weight:600;color:var(--dark-bg);text-align:center}.meter-bar{height:30px;background:#ecf0f1;border-radius:15px;overflow:hidden;box-shadow:inset 0 2px 4px #0000001a}.meter-fill{height:100%;border-radius:15px;transition:width 1s ease-out}.meter-fill.strong{background:linear-gradient(90deg,#f39c12,#e74c3c)}.meter-fill.moderate{background:linear-gradient(90deg,#3498db,#f39c12)}.meter-fill.weak{background:linear-gradient(90deg,#2ecc71,#3498db)}.meter-fill.minimal{background:linear-gradient(90deg,#ecf0f1,#95a5a6)}.meter-labels{display:flex;justify-content:space-between;font-size:.85rem;color:#7f8c8d}.chemical-equation{background:#3498db0d;border-radius:var(--border-radius);padding:1.5rem;text-align:center}.chemical-equation h4{font-size:1.2rem;color:var(--primary-color);margin-bottom:1rem}.equation-display{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;font-size:1.3rem;font-weight:600;color:var(--dark-bg)}.equation-arrow{font-size:1.5rem;color:var(--primary-color)}.equation-plus{font-size:1.5rem;color:#7f8c8d}.equation-part.proton{color:var(--warning-color);font-weight:700;background:#f39c121a;padding:.3rem .6rem;border-radius:8px}.key-insight{margin-top:1rem}.insight-box{background:linear-gradient(135deg,#2ecc711a,#3498db1a);border-left:4px solid var(--secondary-color);border-radius:var(--border-radius);padding:1.5rem}.insight-box h4{font-size:1.2rem;color:var(--secondary-color);margin-bottom:.75rem}.insight-box p{font-size:1rem;line-height:1.7;color:#555}@media (max-width: 768px){.before-after{grid-template-columns:1fr;gap:1rem}.transition-arrow{transform:rotate(90deg);font-size:2rem}.molecule-display{font-size:1.5rem}.proton-particle{width:60px;height:60px;font-size:1.5rem}.equation-display{font-size:1.1rem}}.electronegativity-bridge{display:flex;flex-direction:column;gap:2rem}.instruction-panel{background:#fff;border-radius:var(--border-radius);padding:1.5rem 2rem;box-shadow:var(--box-shadow)}.instruction-content h2{color:var(--primary-color);font-size:1.5rem;margin-bottom:.75rem}.instruction-content p{color:#555;font-size:1.05rem;line-height:1.6}.visualization-area{background:#fff;border-radius:var(--border-radius);padding:2rem;box-shadow:var(--box-shadow);min-height:500px;position:relative}.stages-container{display:flex;flex-direction:column;gap:3rem}.inline-navigation{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-top:1rem;padding:1rem;background:#1d2757;border-radius:var(--border-radius);border:2px dashed var(--primary-color)}.continue-prompt{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}.continue-prompt p{font-size:1.2rem;font-weight:600;color:var(--primary-color);margin:0}.arrow-down{font-size:2.5rem;color:var(--primary-color);font-weight:700}.btn-pulse{position:relative;animation:pulse 2s infinite;box-shadow:0 4px 15px #3498db66!important;font-size:1.1rem!important;padding:1rem 2rem!important;display:flex;align-items:center;gap:.75rem}.btn-pulse .arrow{font-size:1.3rem;font-weight:700}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 4px 15px #3498db66}50%{transform:scale(1.05);box-shadow:0 6px 25px #3498db99}}.control-panel{background:#fff;border-radius:var(--border-radius);padding:1.5rem 2rem;box-shadow:var(--box-shadow)}.controls{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}@media (max-width: 768px){.visualization-area{padding:1rem;min-height:400px}.stages-container{gap:2rem}.inline-navigation{padding:.75rem 1rem}.continue-prompt p{font-size:1rem}.arrow-down{font-size:2rem}.btn-pulse{font-size:1rem!important;padding:.875rem 1.5rem!important}.controls{flex-direction:column}.controls .btn{width:100%}}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2rem 2rem 1.5rem;text-align:center;box-shadow:0 2px 10px #0000001a}.app-header h1{font-size:2.5rem;color:var(--dark-bg);margin-bottom:.5rem;font-weight:700}.subtitle{font-size:1.1rem;color:#7f8c8d;font-weight:400}.app-main{flex:1;padding:2rem;max-width:1400px;width:100%;margin:0 auto}.app-footer{background:#2c3e50f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-light);padding:1.5rem 2rem;text-align:center;font-size:1rem}.app-footer p{max-width:800px;margin:0 auto;line-height:1.6}.btn{padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:.5rem}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover{background:#2980b9;transform:translateY(-2px);box-shadow:0 4px 12px #3498db66}.btn-secondary{background:#95a5a6;color:#fff}.btn-secondary:hover{background:#7f8c8d;transform:translateY(-2px);box-shadow:0 4px 12px #95a5a666}.btn-accent{background:var(--accent-color);color:#fff}.btn-accent:hover{background:#c0392b;transform:translateY(-2px);box-shadow:0 4px 12px #e74c3c66}@media (max-width: 768px){.app-header h1{font-size:1.8rem}.subtitle{font-size:.95rem}.app-main{padding:1rem}.btn{padding:.6rem 1.2rem;font-size:.9rem}}:root{--primary-color: #3498db;--secondary-color: #2ecc71;--accent-color: #e74c3c;--warning-color: #f39c12;--dark-bg: #2c3e50;--light-bg: #ecf0f1;--text-dark: #2c3e50;--text-light: #ffffff;--border-radius: 12px;--box-shadow: 0 4px 6px rgba(0, 0, 0, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{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:#1d2757;color:var(--text-dark);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh;display:flex;flex-direction:column}