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