body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.analog-clock {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    border: 8px solid #333;
    position: relative;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.center-dot {
    width: 12px;
    height: 12px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* Ensure dot is above labels */
}

.hour-label, .minute-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #333;
    text-align: center;
    z-index: 1; /* Below hands and center dot */
}

.minute-label {
    font-size: 8px; /* Reduced font size for individual minute labels */
    color: #777; /* Slightly lighter to reduce visual clutter */
    /* Ensure single-digit numbers are not too wide, may need specific widths or careful padding */
}

/* Styling for the 5-minute interval labels to make them stand out slightly more */
.minute-0, .minute-5, .minute-10, .minute-15, .minute-20, .minute-25,
.minute-30, .minute-35, .minute-40, .minute-45, .minute-50, .minute-55 {
    font-size: 9px; /* Slightly larger than other minute marks */
    color: #555; /* Slightly darker */
    font-weight: bold;
}


/* Positioning for hour labels */
/* Angle is 0 for 12, 30 for 1, 60 for 2, ..., 330 for 11 */
/* Radius for hours (e.g., 120px for a 300px clock (150px radius)) */
.hour-12 { transform: translate(-50%, -50%) translateY(-120px); }
.hour-1  { transform: translate(-50%, -50%) rotate(30deg) translateY(-120px) rotate(-30deg); }
.hour-2  { transform: translate(-50%, -50%) rotate(60deg) translateY(-120px) rotate(-60deg); }
.hour-3  { transform: translate(-50%, -50%) translateX(120px); } /* 90 deg */
.hour-4  { transform: translate(-50%, -50%) rotate(120deg) translateY(-120px) rotate(-120deg); }
.hour-5  { transform: translate(-50%, -50%) rotate(150deg) translateY(-120px) rotate(-150deg); }
.hour-6  { transform: translate(-50%, -50%) translateY(120px); } /* 180 deg */
.hour-7  { transform: translate(-50%, -50%) rotate(210deg) translateY(-120px) rotate(-210deg); }
.hour-8  { transform: translate(-50%, -50%) rotate(240deg) translateY(-120px) rotate(-240deg); }
.hour-9  { transform: translate(-50%, -50%) translateX(-120px); } /* 270 deg */
.hour-10 { transform: translate(-50%, -50%) rotate(300deg) translateY(-120px) rotate(-300deg); }
.hour-11 { transform: translate(-50%, -50%) rotate(330deg) translateY(-120px) rotate(-330deg); }

/* Positioning for minute labels */
/* Each minute is 6 degrees (360 / 60) */
/* Radius for minutes (e.g., 95px for a 300px clock) */
.minute-0  { transform: translate(-50%, -50%) rotate(0deg) translateY(-95px) rotate(-0deg); }
.minute-1  { transform: translate(-50%, -50%) rotate(6deg) translateY(-95px) rotate(-6deg); }
.minute-2  { transform: translate(-50%, -50%) rotate(12deg) translateY(-95px) rotate(-12deg); }
.minute-3  { transform: translate(-50%, -50%) rotate(18deg) translateY(-95px) rotate(-18deg); }
.minute-4  { transform: translate(-50%, -50%) rotate(24deg) translateY(-95px) rotate(-24deg); }
.minute-5  { transform: translate(-50%, -50%) rotate(30deg) translateY(-95px) rotate(-30deg); }
.minute-6  { transform: translate(-50%, -50%) rotate(36deg) translateY(-95px) rotate(-36deg); }
.minute-7  { transform: translate(-50%, -50%) rotate(42deg) translateY(-95px) rotate(-42deg); }
.minute-8  { transform: translate(-50%, -50%) rotate(48deg) translateY(-95px) rotate(-48deg); }
.minute-9  { transform: translate(-50%, -50%) rotate(54deg) translateY(-95px) rotate(-54deg); }
.minute-10 { transform: translate(-50%, -50%) rotate(60deg) translateY(-95px) rotate(-60deg); }
.minute-11 { transform: translate(-50%, -50%) rotate(66deg) translateY(-95px) rotate(-66deg); }
.minute-12 { transform: translate(-50%, -50%) rotate(72deg) translateY(-95px) rotate(-72deg); }
.minute-13 { transform: translate(-50%, -50%) rotate(78deg) translateY(-95px) rotate(-78deg); }
.minute-14 { transform: translate(-50%, -50%) rotate(84deg) translateY(-95px) rotate(-84deg); }
.minute-15 { transform: translate(-50%, -50%) rotate(90deg) translateY(-95px) rotate(-90deg); }
.minute-16 { transform: translate(-50%, -50%) rotate(96deg) translateY(-95px) rotate(-96deg); }
.minute-17 { transform: translate(-50%, -50%) rotate(102deg) translateY(-95px) rotate(-102deg); }
.minute-18 { transform: translate(-50%, -50%) rotate(108deg) translateY(-95px) rotate(-108deg); }
.minute-19 { transform: translate(-50%, -50%) rotate(114deg) translateY(-95px) rotate(-114deg); }
.minute-20 { transform: translate(-50%, -50%) rotate(120deg) translateY(-95px) rotate(-120deg); }
.minute-21 { transform: translate(-50%, -50%) rotate(126deg) translateY(-95px) rotate(-126deg); }
.minute-22 { transform: translate(-50%, -50%) rotate(132deg) translateY(-95px) rotate(-132deg); }
.minute-23 { transform: translate(-50%, -50%) rotate(138deg) translateY(-95px) rotate(-138deg); }
.minute-24 { transform: translate(-50%, -50%) rotate(144deg) translateY(-95px) rotate(-144deg); }
.minute-25 { transform: translate(-50%, -50%) rotate(150deg) translateY(-95px) rotate(-150deg); }
.minute-26 { transform: translate(-50%, -50%) rotate(156deg) translateY(-95px) rotate(-156deg); }
.minute-27 { transform: translate(-50%, -50%) rotate(162deg) translateY(-95px) rotate(-162deg); }
.minute-28 { transform: translate(-50%, -50%) rotate(168deg) translateY(-95px) rotate(-168deg); }
.minute-29 { transform: translate(-50%, -50%) rotate(174deg) translateY(-95px) rotate(-174deg); }
.minute-30 { transform: translate(-50%, -50%) rotate(180deg) translateY(-95px) rotate(-180deg); }
.minute-31 { transform: translate(-50%, -50%) rotate(186deg) translateY(-95px) rotate(-186deg); }
.minute-32 { transform: translate(-50%, -50%) rotate(192deg) translateY(-95px) rotate(-192deg); }
.minute-33 { transform: translate(-50%, -50%) rotate(198deg) translateY(-95px) rotate(-198deg); }
.minute-34 { transform: translate(-50%, -50%) rotate(204deg) translateY(-95px) rotate(-204deg); }
.minute-35 { transform: translate(-50%, -50%) rotate(210deg) translateY(-95px) rotate(-210deg); }
.minute-36 { transform: translate(-50%, -50%) rotate(216deg) translateY(-95px) rotate(-216deg); }
.minute-37 { transform: translate(-50%, -50%) rotate(222deg) translateY(-95px) rotate(-222deg); }
.minute-38 { transform: translate(-50%, -50%) rotate(228deg) translateY(-95px) rotate(-228deg); }
.minute-39 { transform: translate(-50%, -50%) rotate(234deg) translateY(-95px) rotate(-234deg); }
.minute-40 { transform: translate(-50%, -50%) rotate(240deg) translateY(-95px) rotate(-240deg); }
.minute-41 { transform: translate(-50%, -50%) rotate(246deg) translateY(-95px) rotate(-246deg); }
.minute-42 { transform: translate(-50%, -50%) rotate(252deg) translateY(-95px) rotate(-252deg); }
.minute-43 { transform: translate(-50%, -50%) rotate(258deg) translateY(-95px) rotate(-258deg); }
.minute-44 { transform: translate(-50%, -50%) rotate(264deg) translateY(-95px) rotate(-264deg); }
.minute-45 { transform: translate(-50%, -50%) rotate(270deg) translateY(-95px) rotate(-270deg); }
.minute-46 { transform: translate(-50%, -50%) rotate(276deg) translateY(-95px) rotate(-276deg); }
.minute-47 { transform: translate(-50%, -50%) rotate(282deg) translateY(-95px) rotate(-282deg); }
.minute-48 { transform: translate(-50%, -50%) rotate(288deg) translateY(-95px) rotate(-288deg); }
.minute-49 { transform: translate(-50%, -50%) rotate(294deg) translateY(-95px) rotate(-294deg); }
.minute-50 { transform: translate(-50%, -50%) rotate(300deg) translateY(-95px) rotate(-300deg); }
.minute-51 { transform: translate(-50%, -50%) rotate(306deg) translateY(-95px) rotate(-306deg); }
.minute-52 { transform: translate(-50%, -50%) rotate(312deg) translateY(-95px) rotate(-312deg); }
.minute-53 { transform: translate(-50%, -50%) rotate(318deg) translateY(-95px) rotate(-318deg); }
.minute-54 { transform: translate(-50%, -50%) rotate(324deg) translateY(-95px) rotate(-324deg); }
.minute-55 { transform: translate(-50%, -50%) rotate(330deg) translateY(-95px) rotate(-330deg); }
.minute-56 { transform: translate(-50%, -50%) rotate(336deg) translateY(-95px) rotate(-336deg); }
.minute-57 { transform: translate(-50%, -50%) rotate(342deg) translateY(-95px) rotate(-342deg); }
.minute-58 { transform: translate(-50%, -50%) rotate(348deg) translateY(-95px) rotate(-348deg); }
.minute-59 { transform: translate(-50%, -50%) rotate(354deg) translateY(-95px) rotate(-354deg); }

/* Tick Mark Styling */
.tick-mark {
    position: absolute;
    left: 50%;
    top: 50%; /* All transforms are relative to the clock center */
    width: 1px; /* Thin lines */
    height: 6px; /* Standard tick length */
    background-color: #333; /* Dark color for ticks */
    transform-origin: center top; /* Rotate around their top center point */
    z-index: 0; /* Below labels and hands */
}

.tick-mark-major {
    width: 2px; /* Thicker major ticks */
    height: 10px; /* Longer major ticks */
    background-color: #000; /* Slightly darker for major ticks */
}

/* Positioning for Tick Marks */
/* Each tick is 6 degrees (360 / 60) */
/* They are translated outwards from the center.
   The height of the tick mark means its top will be at translateY(-Radius)
   and its bottom at translateY(-Radius + tickHeight).
   We want the top of the tick to be near the edge.
   Radius for tick mark outer edge: approx 142px (to be just inside 150px radius clock face, accounting for border)
   So, for a 6px tall tick, its transform-origin is top, so it extends downwards.
   We'll use translateY(-142px) to position the top of the tick.
*/
.tick-0  { transform: translate(-50%, -50%) rotate(0deg)   translateY(-142px); }
.tick-1  { transform: translate(-50%, -50%) rotate(6deg)   translateY(-142px); }
.tick-2  { transform: translate(-50%, -50%) rotate(12deg)  translateY(-142px); }
.tick-3  { transform: translate(-50%, -50%) rotate(18deg)  translateY(-142px); }
.tick-4  { transform: translate(-50%, -50%) rotate(24deg)  translateY(-142px); }
.tick-5  { transform: translate(-50%, -50%) rotate(30deg)  translateY(-142px); }
.tick-6  { transform: translate(-50%, -50%) rotate(36deg)  translateY(-142px); }
.tick-7  { transform: translate(-50%, -50%) rotate(42deg)  translateY(-142px); }
.tick-8  { transform: translate(-50%, -50%) rotate(48deg)  translateY(-142px); }
.tick-9  { transform: translate(-50%, -50%) rotate(54deg)  translateY(-142px); }
.tick-10 { transform: translate(-50%, -50%) rotate(60deg)  translateY(-142px); }
.tick-11 { transform: translate(-50%, -50%) rotate(66deg)  translateY(-142px); }
.tick-12 { transform: translate(-50%, -50%) rotate(72deg)  translateY(-142px); }
.tick-13 { transform: translate(-50%, -50%) rotate(78deg)  translateY(-142px); }
.tick-14 { transform: translate(-50%, -50%) rotate(84deg)  translateY(-142px); }
.tick-15 { transform: translate(-50%, -50%) rotate(90deg)  translateY(-142px); }
.tick-16 { transform: translate(-50%, -50%) rotate(96deg)  translateY(-142px); }
.tick-17 { transform: translate(-50%, -50%) rotate(102deg) translateY(-142px); }
.tick-18 { transform: translate(-50%, -50%) rotate(108deg) translateY(-142px); }
.tick-19 { transform: translate(-50%, -50%) rotate(114deg) translateY(-142px); }
.tick-20 { transform: translate(-50%, -50%) rotate(120deg) translateY(-142px); }
.tick-21 { transform: translate(-50%, -50%) rotate(126deg) translateY(-142px); }
.tick-22 { transform: translate(-50%, -50%) rotate(132deg) translateY(-142px); }
.tick-23 { transform: translate(-50%, -50%) rotate(138deg) translateY(-142px); }
.tick-24 { transform: translate(-50%, -50%) rotate(144deg) translateY(-142px); }
.tick-25 { transform: translate(-50%, -50%) rotate(150deg) translateY(-142px); }
.tick-26 { transform: translate(-50%, -50%) rotate(156deg) translateY(-142px); }
.tick-27 { transform: translate(-50%, -50%) rotate(162deg) translateY(-142px); }
.tick-28 { transform: translate(-50%, -50%) rotate(168deg) translateY(-142px); }
.tick-29 { transform: translate(-50%, -50%) rotate(174deg) translateY(-142px); }
.tick-30 { transform: translate(-50%, -50%) rotate(180deg) translateY(-142px); }
.tick-31 { transform: translate(-50%, -50%) rotate(186deg) translateY(-142px); }
.tick-32 { transform: translate(-50%, -50%) rotate(192deg) translateY(-142px); }
.tick-33 { transform: translate(-50%, -50%) rotate(198deg) translateY(-142px); }
.tick-34 { transform: translate(-50%, -50%) rotate(204deg) translateY(-142px); }
.tick-35 { transform: translate(-50%, -50%) rotate(210deg) translateY(-142px); }
.tick-36 { transform: translate(-50%, -50%) rotate(216deg) translateY(-142px); }
.tick-37 { transform: translate(-50%, -50%) rotate(222deg) translateY(-142px); }
.tick-38 { transform: translate(-50%, -50%) rotate(228deg) translateY(-142px); }
.tick-39 { transform: translate(-50%, -50%) rotate(234deg) translateY(-142px); }
.tick-40 { transform: translate(-50%, -50%) rotate(240deg) translateY(-142px); }
.tick-41 { transform: translate(-50%, -50%) rotate(246deg) translateY(-142px); }
.tick-42 { transform: translate(-50%, -50%) rotate(252deg) translateY(-142px); }
.tick-43 { transform: translate(-50%, -50%) rotate(258deg) translateY(-142px); }
.tick-44 { transform: translate(-50%, -50%) rotate(264deg) translateY(-142px); }
.tick-45 { transform: translate(-50%, -50%) rotate(270deg) translateY(-142px); }
.tick-46 { transform: translate(-50%, -50%) rotate(276deg) translateY(-142px); }
.tick-47 { transform: translate(-50%, -50%) rotate(282deg) translateY(-142px); }
.tick-48 { transform: translate(-50%, -50%) rotate(288deg) translateY(-142px); }
.tick-49 { transform: translate(-50%, -50%) rotate(294deg) translateY(-142px); }
.tick-50 { transform: translate(-50%, -50%) rotate(300deg) translateY(-142px); }
.tick-51 { transform: translate(-50%, -50%) rotate(306deg) translateY(-142px); }
.tick-52 { transform: translate(-50%, -50%) rotate(312deg) translateY(-142px); }
.tick-53 { transform: translate(-50%, -50%) rotate(318deg) translateY(-142px); }
.tick-54 { transform: translate(-50%, -50%) rotate(324deg) translateY(-142px); }
.tick-55 { transform: translate(-50%, -50%) rotate(330deg) translateY(-142px); }
.tick-56 { transform: translate(-50%, -50%) rotate(336deg) translateY(-142px); }
.tick-57 { transform: translate(-50%, -50%) rotate(342deg) translateY(-142px); }
.tick-58 { transform: translate(-50%, -50%) rotate(348deg) translateY(-142px); }
.tick-59 { transform: translate(-50%, -50%) rotate(354deg) translateY(-142px); }


.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background-color: #333;
    border-radius: 6px 6px 0 0; /* Rounded top */
    cursor: grab;
}

.hour-hand {
    width: 8px;
    height: 80px; /* 300px * 0.26 (approx) */
    background-color: #333;
    z-index: 3;
}

.minute-hand {
    width: 6px;
    height: 110px; /* 300px * 0.36 (approx) */
    background-color: #555;
    z-index: 4;
}

.second-hand {
    width: 3px;
    height: 140px; /* Adjusted to reach new tick marks at ~142px radius */
    background-color: #ff4500; /* Reddish-orange */
    z-index: 5;
}

.digital-clock {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch; /* Make all time-input divs same width */
}

.time-input {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.time-input label {
    flex-basis: 70px; /* Fixed width for labels */
    text-align: right;
    font-weight: bold;
    color: #333;
}

.time-input input[type="number"] {
    width: 60px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-size: 1em;
    -moz-appearance: textfield; /* Firefox */
}

.time-input input[type="number"]::-webkit-outer-spin-button,
.time-input input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.arrow-btn {
    background-color: #e0e0e0;
    border: 1px solid #ccc;
    color: #333;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    transition: background-color 0.2s;
}

.arrow-btn:hover {
    background-color: #d0d0d0;
}

.arrow-btn:active {
    background-color: #c0c0c0;
}

/* For slightly better visual separation between input and buttons */
.time-input input[type="number"] + .arrow-btn {
    margin-left: 5px;
}

/* Controls Container */
.controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10px;
}

/* Generic styles for toggle buttons */
#themeToggleButton,
#modeToggleButton {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #333;
    padding: 8px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 1em; /* Default font size */
    line-height: 1.2;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    outline: none;
    text-align: center;
}

#modeToggleButton {
    min-width: 90px; /* Ensure enough space for "▶️ Live" or "⏸️ Manual" */
}

#themeToggleButton {
    font-size: 1.2em; /* Make icon a bit larger */
    min-width: auto; /* Allow it to be smaller, fitting the icon */
    padding: 8px 10px; /* Adjust padding for icon */
}

#themeToggleButton:hover,
#modeToggleButton:hover {
    background-color: #e0e0e0;
}

#themeToggleButton:focus,
#modeToggleButton:focus {
    box-shadow: 0 0 3px #2196F3;
}

/* Dark Mode Styles (Applied after general styles) */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* Dark mode styles for toggle buttons */
body.dark-mode #themeToggleButton,
body.dark-mode #modeToggleButton {
    background-color: #2c2c2c;
    border: 1px solid #555;
    color: #f0f0f0;
}

body.dark-mode #themeToggleButton:hover,
body.dark-mode #modeToggleButton:hover {
    background-color: #3a3a3a;
}

body.dark-mode .container {
    background-color: #1e1e1e;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

body.dark-mode .analog-clock {
    background-color: #2c2c2c;
    border: 8px solid #555;
    box-shadow: 0 0 15px rgba(255,255,255,0.15);
}

body.dark-mode .center-dot {
    background-color: #e0e0e0;
}

body.dark-mode .hour-label,
body.dark-mode .minute-label {
    color: #c0c0c0;
}

body.dark-mode .minute-0, body.dark-mode .minute-5, body.dark-mode .minute-10,
body.dark-mode .minute-15, body.dark-mode .minute-20, body.dark-mode .minute-25,
body.dark-mode .minute-30, body.dark-mode .minute-35, body.dark-mode .minute-40,
body.dark-mode .minute-45, body.dark-mode .minute-50, body.dark-mode .minute-55 {
    color: #dcdcdc;
    font-weight: bold;
}

body.dark-mode .tick-mark {
    background-color: #aaa;
}

body.dark-mode .tick-mark-major {
    background-color: #ccc;
}

body.dark-mode .hand {
    background-color: #e0e0e0; /* General hand color for dark mode */
}

body.dark-mode .hour-hand {
    background-color: #c0c0c0; /* Specific if needed, or keep general */
}

body.dark-mode .minute-hand {
    background-color: #b0b0b0; /* Specific if needed */
}

body.dark-mode .second-hand {
    background-color: #ff6347; /* Tomato, good contrast on dark */
}

body.dark-mode .digital-clock .time-input {
    background-color: #2c2c2c;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.05);
}

body.dark-mode .digital-clock .time-input label {
    color: #c0c0c0;
}

body.dark-mode .digital-clock .time-input input[type="number"] {
    background-color: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555;
}

body.dark-mode .arrow-btn {
    background-color: #4a4a4a;
    border: 1px solid #666;
    color: #e0e0e0;
}

body.dark-mode .arrow-btn:hover {
    background-color: #5a5a5a;
}

body.dark-mode .arrow-btn:active {
    background-color: #6a6a6a;
}