.analog-clock-container{position:relative;width:clamp(250px,60vmin,400px);height:clamp(250px,60vmin,400px);margin:30px auto}.clock-face{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:var(--color-surface);border:4px solid var(--color-text-primary);box-shadow:inset 0 0 15px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1);transition:background-color .3s ease,border-color .3s ease}.clock-marking{position:absolute;width:1px;height:6px;left:calc(50% - (var(--tick-width)/2));top:0;transform-origin:50% var(--center-y, 150px);background-color:var(--color-text-secondary);transition:background-color .3s ease}.clock-marking.hour-mark{background-color:var(--color-text-primary)}.clock-number{position:absolute;transform:translate(-50%,-50%);font-size:clamp(.8rem,3vmin,1.2rem);font-weight:500;color:var(--color-text-primary);transition:color .3s ease;user-select:none}.clock-hand,.hour-hand,.minute-hand{background-color:var(--color-text-primary);z-index:2}.clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;border-radius:5px 5px 0 0;transition:background-color .3s ease}.hour-hand,.minute-hand{width:6px;height:25%}.minute-hand{width:4px;height:35%;z-index:3}.second-hand{width:2px;height:40%;background-color:var(--color-accent);z-index:4}.pivot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:12px;height:12px;background-color:var(--color-text-primary);border-radius:50%;border:2px solid var(--color-background);z-index:5;transition:background-color .3s ease,border-color .3s ease}.clock-switcher{margin-top:25px;font-size:.9rem;text-align:center}.clock-switcher a{color:var(--color-text-secondary);text-decoration:none;display:inline-flex;align-items:center;padding:5px 10px;border-radius:6px;transition:color .2s ease,background-color .2s ease}.clock-switcher a:hover{color:var(--color-accent);background-color:rgba(128,128,128,.1)}.clock-switcher .material-symbols-outlined{font-size:16px;margin-right:4px}:fullscreen .main-content{justify-content:center}:fullscreen .analog-clock-container{width:clamp(300px,80vmin,600px);height:clamp(300px,80vmin,600px)}:fullscreen .clock-face{background-color:#000!important;border-color:#fff!important;box-shadow:none!important}:fullscreen .clock-marking{background-color:#8e8e93!important}:fullscreen .clock-number{color:#fff!important;font-size:clamp(1rem,4vmin,1.8rem)!important}:fullscreen .clock-hand,:fullscreen .clock-marking.hour-mark{background-color:#fff!important}:fullscreen .hour-hand{width:8px!important}:fullscreen .minute-hand{width:6px!important}:fullscreen .second-hand{width:3px!important;background-color:var(--color-accent)!important}:fullscreen .pivot{background-color:#fff!important;border-color:#000!important;width:15px!important;height:15px!important}:fullscreen .clock-switcher{display:none!important}