body{background-color:#f8f9fa}.timer-circle{position:relative;width:200px;height:200px;border-radius:50%;background-color:#e9ecef;display:flex;justify-content:center;align-items:center;margin:2rem auto}.timer-progress{top:0;left:0;border-radius:50%;clip:rect(0,200px,200px,100px)}.timer-circle:before,.timer-progress{position:absolute;width:100%;height:100%}.timer-circle:before{content:"";border-right:15px solid transparent;border-top:15px solid transparent;border-color:#dc3545 #dc3545 transparent transparent;border-style:solid;border-width:15px;border-radius:50%;transform:rotate(45deg)}.timer-text{font-size:2.5rem;font-weight:700;color:#dc3545;z-index:1}.timeline{position:relative;padding-left:30px;border-left:2px solid #ced4da;margin-left:10px}.timeline-point{left:-11px;top:0;width:20px;height:20px;border-radius:50%;border:2px solid #ced4da}.timeline-plane,.timeline-point{position:absolute;background-color:#fff}.timeline-plane{left:-9px;top:50%;transform:translateY(-50%) rotate(90deg);padding:2px}