.clock-layout{display:block}
.clock-readout{display:flex;width:100%;min-width:0;flex-direction:column;align-items:flex-start;gap:8px}
.clock-time-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px}
.analog-clock{width:104px;height:104px;flex:0 0 auto;margin-top:0;align-self:center;color:var(--ink-text)}
.analog-clock svg{display:block;width:100%;height:100%}
.analog-face{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.54);stroke-width:1.5}
.analog-ticks{fill:none;stroke:rgba(255,255,255,.75);stroke-linecap:round;stroke-width:1.5}
.clock-hand{stroke:currentColor;stroke-linecap:round}
.hour-hand{stroke-width:3.5}
.minute-hand{stroke-width:2.4}
.second-hand{stroke:#f1c64c;stroke-width:1.4}
.analog-center{fill:#f1c64c;stroke:currentColor;stroke-width:1}
html[data-theme="dark"] .clockcard{background:#292927;color:#f5f5f1}
html[data-theme="dark"] .clockcard .muted{color:#c6c6bf}
html[data-theme="dark"] .clockcard .cardhead{border-color:#4d4d47}
html[data-theme="dark"] .clockcard button{background:#fff;color:#252522}
html[data-theme="dark"] .analog-clock{color:#f5f5f1}
@media(max-width:600px){.clock-time-row{gap:10px}.analog-clock{width:82px;height:82px;margin-top:0}.clocktime{font-size:clamp(27px,7.5vw,34px)}}
@media(max-width:360px){.analog-clock{width:70px;height:70px;margin-top:0}.clocktime{font-size:clamp(24px,7vw,27px)}}
.analog-clock{color:#453124}
.clock-rim{fill:#5a3926;stroke:#c79b5b;stroke-width:1.2}
.analog-face{fill:#f3e6c5;stroke:#513a29;stroke-width:1.2}
.clock-inner-ring{fill:none;stroke:#d2b782;stroke-width:.65}
.minute-ticks line{stroke:#765637;stroke-opacity:.58;stroke-width:.65;stroke-linecap:round}
.analog-ticks line{stroke:#59412c;stroke-width:1.1;stroke-linecap:round}
.clock-numerals{fill:#35291f;font-family:Georgia,'Times New Roman',serif;font-size:7px;font-weight:700;text-anchor:middle;dominant-baseline:middle}
.hour-hand,.minute-hand{stroke:#453124}
.analog-center{fill:#c18d3d;stroke:#f5e5c5;stroke-width:1}