:root{--occlusion-color-1: black;--occlusion-color-2: black;--occlusion-color-3: black;--occlusion-1-size: 2px;--occlusion-2-size: 4px;--occlusion-3-size: 6px;--marker-glow: rgba(255, 0, 0, .6);--text-color: white;--accent-color: #ffcc66;--wiggle-delay: 3s;--wiggle-duration: .6s;--wiggle-angle: 5deg;--wiggle-origin-x: 50%;--wiggle-origin-y: 100%;--spring-angle: 25deg;--spring-duration: .45s;--spring-ease: ease-out;--timeline-width: 90%;--timeline-max: 800px;--stage-width: 50px;--line-thickness: 4px}.devline-wrapper{display:flex;flex-direction:column;align-items:center;color:var(--text-color);font-family:JetBrains Mono,monospace;text-align:center}.active-stage{border:4px solid var(--text-color);border-radius:10px;padding:2rem 3rem;margin-bottom:4rem;min-width:700px;max-width:750px;line-height:1.8}.active-stage h2{font-size:1.6rem;font-weight:800;margin:0}.active-stage span{color:var(--accent-color)}.active-stage p{margin-top:.8rem;color:#ccc}.timeline{position:relative;width:var(--timeline-width);max-width:var(--timeline-max);display:flex;justify-content:space-between;align-items:flex-end;padding:1rem 30px}.timeline-line{position:absolute;bottom:43px;left:0;right:0;height:var(--line-thickness);background:var(--text-color);z-index:1}.timeline-line:before,.timeline-line:after{content:"";position:absolute;width:var(--line-thickness);height:18px;background:var(--text-color);bottom:-7px}.timeline-line:before{left:0}.timeline-line:after{right:0}.stage{position:relative;width:var(--stage-width);text-align:center;z-index:2;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer}.icon-layer{position:relative}.icon{font-size:2.2rem;display:block;z-index:2;user-select:none;pointer-events:none;filter:drop-shadow(0 0 var(--occlusion-1-size) var(--occlusion-color-1)) drop-shadow(0 0 var(--occlusion-2-size) var(--occlusion-color-2)) drop-shadow(0 0 var(--occlusion-3-size) var(--occlusion-color-3))}.status-icon{position:absolute;right:-4px;bottom:-2px;font-size:1.2rem;z-index:3;user-select:none;pointer-events:none;filter:drop-shadow(0 0 var(--occlusion-1-size) var(--occlusion-color-1)) drop-shadow(0 0 var(--occlusion-2-size) var(--occlusion-color-2)) drop-shadow(0 0 var(--occlusion-3-size) var(--occlusion-color-3))}.marker{position:absolute;bottom:26px;transform:translate(-50%,-20px);font-size:3.6rem;z-index:4;opacity:0;transition:left .3s ease-in-out,opacity .3s ease-in-out,transform .35s cubic-bezier(.25,1,.5,1);user-select:none;pointer-events:none;filter:drop-shadow(0 0 6px var(--marker-glow)) drop-shadow(0 0 var(--occlusion-1-size) var(--occlusion-color-1)) drop-shadow(0 0 var(--occlusion-2-size) var(--occlusion-color-2)) drop-shadow(0 0 var(--occlusion-3-size) var(--occlusion-color-3))}.marker.visible{opacity:1;transform:translate(-50%)}@keyframes marker-wiggle{0%{transform:translate(-50%) rotate(0)}25%{transform:translate(-50%) rotate(var(--wiggle-angle))}50%{transform:translate(-50%) rotate(calc(var(--wiggle-angle) * -1))}75%{transform:translate(-50%) rotate(var(--wiggle-angle))}to{transform:translate(-50%) rotate(0)}}.marker.wiggle-once{animation:marker-wiggle var(--wiggle-duration) ease-in-out var(--wiggle-delay) 1;transform-origin:var(--wiggle-origin-x) var(--wiggle-origin-y)}@keyframes marker-spring-left{0%{transform:translate(-50%) rotate(0)}20%{transform:translate(-50%) rotate(calc(var(--spring-angle) * .6))}60%{transform:translate(-50%) rotate(calc(var(--spring-angle) * -1))}to{transform:translate(-50%) rotate(0)}}@keyframes marker-spring-right{0%{transform:translate(-50%) rotate(0)}20%{transform:translate(-50%) rotate(calc(var(--spring-angle) * -.6))}60%{transform:translate(-50%) rotate(var(--spring-angle))}to{transform:translate(-50%) rotate(0)}}.marker.spring-left{animation:marker-spring-left var(--spring-duration) var(--spring-ease) 1;transform-origin:50% 100%}.marker.spring-right{animation:marker-spring-right var(--spring-duration) var(--spring-ease) 1;transform-origin:50% 100%}.timeline-error{color:#f66;background:#ff00001a;border:1px solid #ff3333;border-radius:8px;padding:1rem;text-align:center;margin-top:1rem;font-weight:500}@media (max-width: 700px){.active-stage{min-width:90%;max-width:90%;padding:1.5rem 1rem;font-size:.9rem}.marker{font-size:2.4rem}}