:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#252824;background:#f5f4f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;min-height:320px;display:flex;flex-direction:column}header,footer{display:flex;justify-content:space-between;align-items:center;padding:24px 36px}header{gap:16px;flex-shrink:0}.brand{font-size:12px;letter-spacing:2px;font-weight:650}.brand-dot{color:#e16742;font-size:22px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,.hand:focus-visible{outline:2px solid #b95839;outline-offset:6px}.fullscreen{display:grid;place-items:center;border:1px solid #dcded6;background:transparent;border-radius:50%;width:42px;height:42px;color:#53584e}.fullscreen:hover{background:#eaece4}main{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:4px 20px 18px}.clock-wrap{width:100%;height:100%;min-height:0}#clock{display:block;width:100%;height:100%;overflow:visible}.face{fill:#fafaf7;stroke:#e2e3db;stroke-width:1.4;filter:drop-shadow(0 14px 24px #303b2510)}.tick{stroke:#c0c4b8;stroke-width:1.3}.tick.major{stroke:#535b4e;stroke-width:3}.number{font-size:35px;fill:#3a4036;font-weight:400;font-variant-numeric:tabular-nums}.face-brand{font-size:9px;letter-spacing:3px;fill:#a4aa9b}.hour-line{stroke:#343d30;stroke-width:12}.minute-line{stroke:#343d30;stroke-width:7}.second-line{stroke:#de6745;stroke-width:2.5}.hand line{stroke-linecap:round}.hit{stroke:transparent;stroke-width:26;pointer-events:stroke}.hour-line,.minute-line,.second-line{pointer-events:none}.pin{fill:#de6745}.hand{touch-action:none}.paused .hand{cursor:grab}.paused .hand:active{cursor:grabbing}.hand:focus-visible .hit{stroke:#de674533}.controls{display:flex;flex-direction:column;align-items:center;margin-top:16px;gap:12px}input{font-family:inherit;font-size:28px;font-weight:350;letter-spacing:2px;color:#343d30;font-variant-numeric:tabular-nums;border:1px solid transparent;border-radius:8px;background:transparent;padding:5px 8px;max-width:220px;text-align:center;color-scheme:light}input:disabled{opacity:1;-webkit-text-fill-color:#343d30}input:not(:disabled){border-color:#d8ddcf;background:#fafaf7}input::-webkit-calendar-picker-indicator{display:none}input:focus-visible{outline:2px solid #b95839;outline-offset:3px}.toggle{border:0;border-radius:30px;background:#36442f;color:#fff;min-width:116px;padding:13px 23px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px}.toggle:hover{background:#48593e}.buttons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.realtime{border:1px solid #cdd3c6;border-radius:30px;background:transparent;color:#36442f;padding:12px 18px;font-size:13px}.realtime:hover{background:#eaece4}#hint{color:#878c81;font-size:12px;min-height:18px;margin:0;text-align:center;line-height:1.5}footer{flex-shrink:0;font-size:11px;color:#909588;padding-top:14px;padding-bottom:22px}footer a{color:inherit;text-decoration:none}footer a:hover{color:#343d30}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}body:fullscreen{background:#f5f4f0;height:100dvh;overflow:auto}@media(max-width:600px){header,footer{padding:18px 22px}.brand{font-size:10px;letter-spacing:1.5px}.controls{margin-top:12px;gap:10px}input{font-size:26px}footer{font-size:10px}main{padding-inline:12px}}@media(max-height:560px) and (min-width:650px){main{grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:minmax(0,1fr);align-items:center;gap:24px}.controls{margin:0;max-width:260px}header,footer{padding-block:12px}}
body:fullscreen .brand,body:fullscreen .face-brand,body:fullscreen footer,body:fullscreen .controls{display:none}
body:fullscreen header{position:absolute;top:0;right:0;z-index:1}
body:fullscreen main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:20px}
.second-mode{display:flex;align-items:center;gap:8px;font-size:12px;color:#53584e}.second-mode select{font:inherit;color:#36442f;background:#fafaf7;border:1px solid #cdd3c6;border-radius:8px;padding:8px;cursor:pointer}.second-mode select:focus-visible{outline:2px solid #b95839;outline-offset:3px}