* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-x: hidden;
}

.header {
text-align: center;
margin: 20px 0;
color: white;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
animation: glow 2s infinite alternate;
}

@keyframes glow {
from { text-shadow: 0 0 5px rgba(0, 255, 255, 0.7); }
to { text-shadow: 0 0 20px rgba(0, 255, 255, 0.9), 0 0 30px rgba(0, 200, 255, 0.8); }
}

h1 {
font-size: 3rem;
margin-bottom: 10px;
}

.subtitle {
font-size: 1.2rem;
opacity: 0.8;
}

.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1400px;
margin-top: 20px;
}

.cell-container {
position: relative;
width: 600px;
height: 600px;
background: rgba(0, 20, 40, 0.6);
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 2px solid rgba(0, 200, 255, 0.3);
}

/* Cell Membrane */
.cell-membrane {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
border: 8px solid rgba(0, 200, 255, 0.7);
border-radius: 50%;
animation: pulse 4s infinite ease-in-out;
box-shadow: 0 0 30px rgba(0, 200, 255, 0.4);
}

@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.03); }
}

/* Nucleus */
.nucleus {
position: absolute;
top: 30%;
left: 35%;
width: 140px;
height: 140px;
background: radial-gradient(circle, #ff4081, #d81b60);
border-radius: 50%;
box-shadow: 0 0 30px rgba(255, 64, 129, 0.7);
animation: float 8s infinite ease-in-out;
z-index: 10;
}

.nucleolus {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
background: radial-gradient(circle, #ff9800, #f57c00);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: pulse 2s infinite ease-in-out;
}

/* Mitochondria */
.mitochondria {
position: absolute;
width: 120px;
height: 50px;
background: linear-gradient(to right, #4caf50, #8bc34a);
border-radius: 25px;
animation: float 12s infinite ease-in-out;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
z-index: 5;
}

.mito-inner {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 25px;
background: rgba(0, 0, 0, 0.2);
border-radius: 12.5px;
}

.mito-cristae {
position: absolute;
height: 100%;
width: 3px;
background: rgba(255, 255, 255, 0.7);
border-radius: 1.5px;
}

/* Endoplasmic Reticulum */
.er {
position: absolute;
width: 300px;
height: 200px;
border: 3px solid #9c27b0;
border-radius: 50%;
animation: rotate 40s infinite linear;
box-shadow: 0 0 20px rgba(156, 39, 176, 0.5);
z-index: 4;
}

.er-ribosomes {
position: absolute;
width: 12px;
height: 12px;
background: radial-gradient(circle, #ffeb3b, #ffc107);
border-radius: 50%;
animation: pulse 1.5s infinite ease-in-out;
}

/* Golgi Apparatus */
.golgi {
position: absolute;
width: 100px;
height: 80px;
animation: float 10s infinite ease-in-out;
z-index: 7;
}

.golgi-layer {
position: absolute;
height: 20px;
background: rgba(0, 188, 212, 0.7);
border: 1px solid rgba(0, 150, 200, 0.9);
border-radius: 5px;
box-shadow: 0 0 8px rgba(0, 188, 212, 0.6);
}

/* Lysosomes */
.lysosome {
position: absolute;
width: 40px;
height: 40px;
background: radial-gradient(circle, #f44336, #d32f2f);
border-radius: 50%;
box-shadow: 0 0 15px rgba(244, 67, 54, 0.6);
animation: float 7s infinite ease-in-out;
z-index: 6;
}

/* Centrioles */
.centriole {
position: absolute;
width: 60px;
height: 5px;
background: #00bcd4;
border-radius: 2.5px;
box-shadow: 0 0 10px rgba(0, 188, 212, 0.7);
animation: rotate 15s infinite linear;
z-index: 8;
}

/* Animation keyframes */
@keyframes float {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
25% { transform: translate(10px, -15px) rotate(2deg); }
50% { transform: translate(-15px, 5px) rotate(-2deg); }
75% { transform: translate(5px, 10px) rotate(1deg); }
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Floating particles */
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
animation: float-particle 15s infinite linear;
}

@keyframes float-particle {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-100px) translateX(50px); opacity: 0; }
}

.info-panel {
width: 500px;
background: rgba(0, 10, 30, 0.85);
border-radius: 20px;
padding: 25px;
color: white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border: 2px solid rgba(0, 200, 255, 0.3);
}

.info-panel h2 {
color: #00bcd4;
margin-bottom: 20px;
font-size: 2rem;
text-align: center;
}

.organelle-info {
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 200, 255, 0.3);
}

.organelle-info h3 {
color: #ff4081;
margin-bottom: 8px;
display: flex;
align-items: center;
}

.organelle-info .color-box {
display: inline-block;
width: 15px;
height: 15px;
margin-right: 10px;
border-radius: 3px;
}

.organelle-info p {
line-height: 1.6;
color: #e0f7fa;
}

.legend {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 20px;
}

.legend-item {
display: flex;
align-items: center;
padding: 8px 15px;
background: rgba(0, 30, 60, 0.7);
border-radius: 8px;
border: 1px solid rgba(0, 200, 255, 0.3);
}

.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
margin-right: 10px;
}

.controls {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 15px;
}

.btn {
padding: 12px 25px;
background: linear-gradient(45deg, #00bcd4, #0097a7);
color: white;
border: none;
border-radius: 50px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
background: linear-gradient(45deg, #00bcd4, #00838f);
}

.footer {
color: rgba(255, 255, 255, 0.7);
margin-top: 30px;
text-align: center;
font-size: 0.9rem;
}

@media (max-width: 1100px) {
.container {
flex-direction: column;
align-items: center;
}

.cell-container, .info-panel {
width: 90%;
max-width: 600px;
}
}

// Add interactive functionality
document.addEventListener(‘DOMContentLoaded’, function() {
const organelles = document.querySelectorAll(‘.nucleus, .mitochondria, .er, .golgi, .lysosome, .centriole’);
const infoPanel = document.querySelector(‘.info-panel’);
const organelleInfo = document.querySelectorAll(‘.organelle-info’);
const speedUpBtn = document.getElementById(‘speedUp’);
const slowDownBtn = document.getElementById(‘slowDown’);

// Add hover effect to organelles
organelles.forEach(organelle => {
organelle.addEventListener(‘mouseenter’, function() {
this.style.transform = ‘scale(1.2)’;
this.style.zIndex = ’20’;
this.style.boxShadow = ‘0 0 30px rgba(255, 255, 255, 0.8)’;
});

organelle.addEventListener(‘mouseleave’, function() {
this.style.transform = ”;
this.style.zIndex = ”;
this.style.boxShadow = ”;
});
});

// Animation speed control
let animationSpeed = 1;

speedUpBtn.addEventListener(‘click’, function() {
if (animationSpeed 0.5) {
animationSpeed -= 0.2;
updateAnimationSpeed();
}
});

function updateAnimationSpeed() {
const animatedElements = document.querySelectorAll(‘*’);
animatedElements.forEach(el => {
const style = window.getComputedStyle(el);
const animationName = style.animationName;

if (animationName && animationName !== ‘none’) {
el.style.animationDuration = (parseFloat(style.animationDuration) / animationSpeed + ‘s’;
}
});
}

// Create additional particles for effect
function createParticles() {
const cell = document.getElementById(‘cell’);
for (let i = 0; i < 30; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 6 + 2;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.left = Math.random() * 100 + '%';
particle.style.top = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 10 + 's';
particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
cell.appendChild(particle);
}
}

createParticles();
});