:root{--primary-color:#fc7212;--secondary-color:#4ecdc4;--accent-color:#ffe66d;--dark-color:#292f36;--light-color:#f7fff7}.circular-clock-container{display:flex;justify-content:flex-start;align-items:center;min-height:685px;padding:2rem}.clock-face{position:relative;width:380px;height:400px;border-radius:50%;border:0;margin:50px auto;box-shadow:0 4px 20px rgba(252,114,18,.1),0 2px 6px rgba(0,0,0,.05);border:1px solid rgba(252,114,18,.15)}.card,.clock-face{display:flex;justify-content:center;align-items:center}.card{position:absolute;top:50%;left:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;background-color:var(--primary-color);border:2px solid #fff;border-radius:10px;cursor:pointer;transition:all .3s ease;font-weight:700;color:#000}.card:hover{transform:scale(1.1) translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0));color:var(--dark-color);z-index:10}.card-content{text-align:center;transition:transform .3s ease}.center-content{position:absolute;text-align:center;font-size:1.2rem;max-width:60%;min-width:120px;min-height:100px;display:flex;align-items:center;justify-content:center;word-break:break-word;transition:all .3s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.typewriter{overflow:hidden;border-right:3px solid #ff9800;white-space:pre-wrap;margin:0 auto;animation:typing 3.5s steps(40),blink-caret .75s step-end infinite}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:#ff9800}}.center-content-updated{animation:fadeIn .5s ease}@media (max-width:768px){.clock-face{width:300px;height:300px}.card{width:45px;height:45px;margin-top:-22.5px;margin-left:-22.5px;font-size:.9rem}}