:root{--bg:#ece7db;--ink:#2a2620}*{margin:0;padding:0;box-sizing:border-box}body,html{height:100%}body{background:var(--bg);color:var(--ink);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased}main{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:32px 16px}canvas.clock{height:min(80dvh,700px);width:auto;image-rendering:pixelated;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas.clock.smooth{image-rendering:auto}canvas.clock.big{height:min(80dvh,700px)}.panel{display:flex;align-items:center;justify-content:center;gap:12px;min-height:40px}button{font:inherit;font-size:12px;color:var(--ink);background:transparent;border:1px solid var(--ink);padding:8px 16px;cursor:pointer;letter-spacing:.14em}button:hover{background:var(--ink);color:var(--bg)}.iconbtn,.iconbtn:hover{border:none;background:transparent;color:var(--ink);padding:8px}.iconbtn{opacity:.4}.iconbtn:hover{opacity:1}.icon{display:block;width:30px;height:auto;fill:currentColor}.colordots{display:grid;grid-template-columns:repeat(2,8px);grid-gap:3px;gap:3px}.colordot{width:8px;height:8px;border-radius:50%}.pressstart,.pressstart:hover{border:none;background:transparent;color:var(--ink)}.pressstart{font-size:13px;letter-spacing:.32em;padding:8px 4px 8px 8px;animation:blink 1.15s step-end infinite}.pressstart:hover{animation-play-state:paused;opacity:1}@keyframes blink{0%,59%{opacity:1}60%,to{opacity:0}}