body { font-family: Arial; background: #f4f4f9; text-align: center; }
.main-container { display: flex; flex-direction: column; align-items: center; margin-top: 20px; }

/* The Table */.table {    width: 350px; height: 350px; background: white;    border: 5px solid #333; border-radius: 50%;    position: relative; margin: 20px;    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Every philosopher circle */.phil {    position: absolute; width: 70px; height: 70px;    border-radius: 50%; border: 3px solid #555;    display: flex; align-items: center; justify-content: center;    font-size: 12px; font-weight: bold;
}

/* Every fork rectangle */.fork {    position: absolute; width: 8px; height: 35px;    background: #f1c40f; border-radius: 4px;
}

/* Philosopher positions */#p0 { left: 140px; top:  10px; }
#p1 { left: 263px; top: 100px; }
#p2 { left: 216px; top: 245px; }
#p3 { left:  64px; top: 245px; }
#p4 { left:  17px; top: 100px; }

/* Forks positions */
#f0 { left: 221px; top:  89px; transform: rotate(306deg); }
#f1 { left: 252px; top: 184px; transform: rotate( 18deg); }
#f2 { left: 171px; top: 243px; transform: rotate( 90deg); }
#f3 { left:  90px; top: 184px; transform: rotate(162deg); }
#f4 { left: 121px; top:  89px; transform: rotate(234deg); }

/* State Colors */.thinking { background: #bdc3c7; color: black; }
.hungry   { background: #e74c3c; color: white; }
.eating   { background: #2ecc71; color: white; border-color: #27ae60; }

/* Fork animation when picked up */.fork {    transition: opacity 0.5s;    opacity: 1;
}
.held {    opacity: 0.2;
}

/* Hungry blinking animation */@keyframes blink {    0%   { border-color: red; }    50%  { border-color: white; }    100% { border-color: red; }
}
.hungry {    animation: blink 1s infinite;
}

/* Eating pulse animation */@keyframes pulse {    0%   { transform: scale(1); }    50%  { transform: scale(1.1); }    100% { transform: scale(1); }
}
.eating {    animation: pulse 1s infinite;
}

.controls { background: white; padding: 15px; border-radius: 8px; width: 400px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.log { margin-top: 15px; height: 120px; overflow-y: scroll; background: #eee; width: 400px; font-size: 12px; padding: 5px; text-align: left; }
.deadlock-alert { color: red; font-weight: bold; display: none; margin-top: 10px; }
.info { margin-top: 10px; background: #fffde7; border-left: 4px solid orange;        width: 400px; padding: 10px; font-size: 12px; text-align: left;        border-radius: 4px; line-height: 1.8; }