.clock-maker{display:grid;gap:16px}.clock-stage{display:grid;justify-items:center;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:#fbfefe;padding:16px}.clock-canvas-wrap{display:grid;width:100%;max-width:760px;justify-items:center;border-radius:8px;background:var(--mist);padding:14px;overflow:auto}.clock-canvas-wrap canvas{display:block;max-width:100%;height:auto;border-radius:8px}.clock-actions{display:flex;flex-wrap:wrap;gap:10px}.clock-actions .button{min-height:44px}.clock-meta{margin:0;border-radius:8px;padding:12px;background:#edf6f9db;color:var(--muted);font-weight:800}.clock-meta.is-valid{background:#83c5be38;color:var(--deep-teal)}.clock-output{display:grid;gap:10px;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:#fbfefe;padding:14px}.clock-output h3{margin:0;color:var(--ink);font-size:1rem}.clock-code{width:100%;min-height:96px;resize:vertical;border:1px solid rgba(0,109,119,.14);border-radius:8px;background:var(--mist);color:var(--ink);padding:14px;font:.9rem/1.5 ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;white-space:pre-wrap}@media (max-width: 720px){.clock-stage,.clock-output{padding:12px}.clock-actions{display:grid;grid-template-columns:1fr}}