:root{--background-color: #f7c4c5;--primary-color: #d32f2f;--secondary-color: #1a1a1a;--accent-color: #333;--hour-width: 14px;--hour-height: 20%;--minute-width: 12px;--minute-height: 30%;--second-width: 4px;--second-height: 35%;--hand-radius: 4px;--pivot-size: 20px;--spring-transition: transform .15s cubic-bezier(.2, 1.5, .5, 1);--max-watch-size: 720px}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--background-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;transition:background .5s ease}.watch-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem}.timezone-select{padding:.75rem 2.5rem .75rem 1.5rem;background:#00000014;border:none;border-radius:2rem;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--accent-color);transition:background .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.timezone-select:hover{background-color:#0000001f}.timezone-select:focus{outline:none;background-color:#0000001f}.controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.hand-style-select{padding:.75rem 2.5rem .75rem 1.5rem;background:#00000014;border:none;border-radius:2rem;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--accent-color);transition:background .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.hand-style-select:hover,.hand-style-select:focus{outline:none;background-color:#0000001f}.upload-btn{padding:.75rem 1.5rem;background:#00000014;border:none;border-radius:2rem;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;color:var(--accent-color);transition:background .2s}.upload-btn:hover{background-color:#0000001f}.watch{position:relative;width:min(90vw,var(--max-watch-size));height:min(90vw,var(--max-watch-size));border-radius:50%}.watch-face{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;transition:opacity .5s ease}.hands-container{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);pointer-events:none}.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:var(--hand-radius);will-change:transform;transition:var(--spring-transition),width .3s ease,height .3s ease,background .3s ease}.hour-hand{width:var(--hour-width);height:var(--hour-height);background:var(--primary-color);margin-left:calc(var(--hour-width) / -2);z-index:10}.minute-hand{width:var(--minute-width);height:var(--minute-height);background:var(--primary-color);margin-left:calc(var(--minute-width) / -2);z-index:11}.second-hand{width:var(--second-width);height:var(--second-height);background:var(--primary-color);margin-left:calc(var(--second-width) / -2);z-index:12}.center-pivot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--pivot-size);height:var(--pivot-size);background:var(--secondary-color);border-radius:50%;z-index:20;transition:width .3s ease,height .3s ease,background .3s ease}@media(max-width:480px){.watch{width:95vw;height:95vw}.hour-hand{width:calc(var(--hour-width) * .7);margin-left:calc(var(--hour-width) * .7 / -2)}.minute-hand{width:calc(var(--minute-width) * .7);margin-left:calc(var(--minute-width) * .7 / -2)}.center-pivot{width:calc(var(--pivot-size) * .8);height:calc(var(--pivot-size) * .8)}}