section.clock {  }
section.clock > .wrap {  }
section.clock .clocks { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; margin: 0; padding: 0; }
section.clock .clockAnalog { display: flex; align-items: center; justify-content: center; position: relative; width: 200px; aspect-ratio: 1 / 1; margin-inline: 0; border: 1px solid var(--rududu-black); border-radius: 50%; background: var(--ambient-shape-color, var(--rududu-shape-red)); box-shadow: none; }
section.clock .clockAnalog,
section.clock .clockDigital { cursor: pointer; }
section.clock .clockAnalog:focus-visible,
section.clock .clockDigital:focus-visible { outline: 2px solid var(--rududu-red); outline-offset: 4px; }
section.clock .clockAnalog::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--rududu-yellow); z-index: 5; }
section.clock .clockAnalog .hour,
section.clock .clockAnalog .minute,
section.clock .clockAnalog .second { position: absolute; bottom: 50%; left: calc(50% - 3px); transform-origin: center bottom; border-radius: 999px; }
section.clock .clockAnalog .hour { width: 6px; height: 30%; background: var(--rududu-black); }
section.clock .clockAnalog .minute { width: 6px; height: 42%; background: var(--rududu-black); }
section.clock .clockAnalog .second { width: 2px; height: 48%; left: calc(50% - 1px); background: var(--rududu-yellow); }
section.clock .clockDigital { display: flex; align-items: center; justify-content: center; width: 200px; aspect-ratio: 1 / 1; margin-inline: 0; border: 1px solid var(--rududu-black); border-radius: 50%; background: var(--ambient-shape-color, var(--rududu-shape-red)); }
section.clock .clockDigital .time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; padding: 24px; }
section.clock .clockDigital .time > div { display: block;
    width: 100%;
    color: var(--rududu-black);
    font-size: 80px;
    font-weight: 800;
    line-height: 72px;
    text-align: center; }
section.clock .clockDigital .time .minute::before { content: none; }
section.clock.countdown-mode-hours .clockDigital .time .second { display: none; }
section.clock.countdown-mode-minutes .clockDigital .time .hour { display: none; }
section.clock.countdown-alarm::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--rududu-red) 86%, transparent); pointer-events: none; animation: digitalClockSiren 0.7s ease-in-out infinite; }

section.clock .actions {  }
section.clock .actions button { border-color: var(--rududu-black); background: var(--rududu-black); color: var(--rududu-white); }
section.clock .actions button:hover { background: var(--rududu-black); color: var(--rududu-white); }
@keyframes digitalClockSiren {
    0% { opacity: 0.08; }
    30% { opacity: 1; }
    50% { opacity: 0.12; }
    80% { opacity: 1; }
    100% { opacity: 0.08; }
}