body {
    font-family: 'Inter', sans-serif;
}
.clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 8px solid #1f2937; /* gray-800 */
    background-color: #111827; /* gray-900 */
    position: relative;
    box-shadow: 0 0 25px rgba(74, 222, 128, 0.5), inset 0 0 15px rgba(0,0,0,0.5);
}
.hand {
    --rotation: 0;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%) rotate(calc(var(--rotation) * 1deg));
    transform-origin: bottom;
    border-radius: 10px;
}
.hour-hand {
    width: 8px;
    height: 80px;
    background-color: #f9fafb; /* gray-50 */
}
.minute-hand {
    width: 6px;
    height: 110px;
    background-color: #d1d5db; /* gray-300 */
}
.second-hand {
    width: 3px;
    height: 130px;
    background-color: #4ade80; /* green-400 */
}
.center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background-color: #4ade80; /* green-400 */
    border-radius: 50%;
    border: 2px solid #111827; /* gray-900 */
    z-index: 10;
}