:root{--dur-snappy:.22s;--ease-snappy:cubic-bezier(.175, .885, .32, 1.1);--ease:cubic-bezier(.175, .885, .32, 1.275);--ease-smooth:cubic-bezier(.19, 1, .22, 1);--bg:#fff;--surface:#f5f5f5;--text:#000;--text-muted:#0006;--text-dim:#0000004d;--minute:#e7e7e7;--hour:#d3d3d3}*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{background:var(--bg);min-height:100svh;color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-family:Open Runde,system-ui,-apple-system,sans-serif}#app{justify-content:center;align-items:center;min-height:100svh;display:flex}.frame{background:var(--bg);flex-direction:column;align-items:center;width:min(540px,100%);height:100svh;margin:0 auto;padding:20px 16px 22px;display:flex;position:relative}.head{text-align:center;flex-direction:column;flex-shrink:0;align-items:center;gap:6px;margin-bottom:auto;line-height:normal;display:flex}.head__title{letter-spacing:-.28px;width:100%;color:var(--text);margin:0;font-size:14px;font-weight:700;line-height:normal}.head__sub{letter-spacing:-.24px;width:100%;color:var(--text-muted);margin:0;font-size:12px;font-weight:500;line-height:normal}.clock-stage{flex-direction:column;flex:0 auto;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.clock-inner{aspect-ratio:1;width:min(100%,100svh - 220px);max-width:540px;position:relative}.dial-wrap{aspect-ratio:1;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.dial{-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;display:block}.angle-labels{aspect-ratio:1;pointer-events:none;-webkit-user-select:none;user-select:none;width:88.1482%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.angle-labels svg{width:100%;height:100%;display:block;overflow:visible}.angle-labels text{fill:var(--text);letter-spacing:2px;text-transform:uppercase;opacity:.2;font-family:Open Runde,system-ui,sans-serif;font-size:10px;font-weight:500}.hand{transform-origin:50% 100%;transition:transform .35s var(--ease-smooth);will-change:transform;border-radius:8px;position:absolute;bottom:50%;left:50%;transform:translate(-50%)}.hand--minute{background:var(--minute);z-index:1;width:2.22222%;height:34.6296%}.hand--hour{background:var(--hour);z-index:2;width:2.22222%;height:19.8148%}.hand__shine{pointer-events:none;background:#fff;border-radius:8px;width:50%;height:12.8342%;position:absolute;top:1.60428%;left:50%;transform:translate(-50%)}.hand--hour .hand__shine{height:22.4299%;top:2.80374%}.cap-wrap{z-index:3;width:4.07407%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.cap{width:100%;height:auto;display:block}.controls-area{flex-shrink:0;justify-content:center;margin-top:17px;margin-bottom:auto;display:flex}.row{align-items:center;gap:6px;display:flex}.field{background:var(--surface);letter-spacing:-.44px;font-variant-numeric:tabular-nums;text-align:center;width:75px;color:var(--text);transition:background var(--dur-snappy) var(--ease-smooth);border:none;border-radius:12px;padding:4px 8px;font-family:Open Runde,system-ui,sans-serif;font-size:44px;font-weight:600;line-height:normal}.field:hover{cursor:ns-resize}.field:focus{outline-offset:2px;outline:2px solid #0000001f}.foot{letter-spacing:-.2px;text-align:center;color:var(--text);flex-shrink:0;margin:0;font-size:12px;font-weight:500;line-height:normal}.foot__muted{color:var(--text-dim)}.sr{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){.hand{transition-duration:.01ms}}