.traffic-playground{isolation:isolate;color:#237856;width:100%;min-width:0;height:500px;position:relative;overflow:hidden}.traffic-playground-glow{background:radial-gradient(at 50% 55%,#75ba981b,#0000 62%);animation:6s ease-in-out infinite traffic-playground-breathe;position:absolute;inset:5% 9%}.traffic-playground-map{opacity:.22;background-image:radial-gradient(#8ea487 1px,#0000 1px);background-size:22px 22px;position:absolute;inset:15px;-webkit-mask-image:radial-gradient(#000,#0000 72%);mask-image:radial-gradient(#000,#0000 72%)}.traffic-playground-map span{border:1px solid #c9d8cf40;border-radius:50%;width:14px;height:14px;position:absolute}.traffic-playground-map span:first-child{top:12%;left:21%}.traffic-playground-map span:nth-child(2){top:69%;left:11%}.traffic-playground-map span:nth-child(3){top:41%;right:8%}.traffic-playground-label{font:600 8px/1.4 var(--body,sans-serif);letter-spacing:.14em;color:#506575;align-items:center;gap:9px;display:flex;position:absolute;top:21px;left:24px}.traffic-playground-tiny-lights{gap:4px;display:flex}.traffic-playground-tiny-lights i{background:#f15b62;border-radius:50%;width:5px;height:5px}.traffic-playground-tiny-lights i:nth-child(2){background:#f5b942}.traffic-playground-tiny-lights i:nth-child(3){background:#7ce3a0}.traffic-playground-pause{z-index:7;color:#506575;font:500 10px/1 var(--body,sans-serif);cursor:pointer;background:#dce5dfc9;border:1px solid #23394a24;border-radius:20px;align-items:center;gap:6px;padding:8px 10px;display:flex;position:absolute;top:15px;right:20px}.traffic-playground-pause:hover{background:#eef1e9}.traffic-playground-pause:disabled{cursor:default;color:#506575}.traffic-playground-track{z-index:1;pointer-events:none;position:absolute;inset:0;transform:rotate(-10deg)}.traffic-playground-road{filter:drop-shadow(0 9px 10px #0004);width:100%;height:100%;overflow:visible}.traffic-playground-car{offset-path:ellipse(40.833% 26% at 50% 56%);offset-rotate:auto;offset-anchor:50% 50%;width:42px;height:25px;animation:12s linear infinite traffic-playground-drive;animation-delay:var(--car-delay);filter:drop-shadow(0 4px 2px #0007);position:absolute;top:0;left:0}.traffic-playground-car svg{width:100%;height:100%;display:block}.traffic-playground-satellite{z-index:4;font:400 10px/1.55 var(--body,sans-serif);color:#506575;background:#dce5dfec;border:1px solid #23394a25;border-radius:13px;align-items:center;gap:10px;padding:13px 14px;animation:6s ease-in-out infinite traffic-playground-float;display:flex;position:absolute;transform:rotate(-5deg);box-shadow:0 9px 28px #0003}.traffic-playground-satellite strong{color:#806021;font-size:12px;font-weight:600}.traffic-playground-dot{background:#cf7883;border:2px solid #cf788350;border-radius:50%;flex-shrink:0;width:8px;height:8px;box-shadow:0 0 10px #cf788328}.traffic-playground-idea{top:25%;left:3%}.traffic-playground-idea>svg{color:#ab4856}.traffic-playground-shared{animation-delay:-3s;top:39%;right:0;transform:rotate(5deg)}.traffic-playground-shared .traffic-playground-dot{background:#75ba98;border-color:#75ba9850;box-shadow:0 0 10px #75ba9825}.traffic-playground-credit-sign{z-index:4;color:#26301b;text-align:center;background:#eaba51;border:2px solid #f5b942;border-radius:10px;width:93px;padding:10px 7px;position:absolute;bottom:9%;left:13%;transform:rotate(-8deg);box-shadow:0 7px 20px #0003}.traffic-playground-credit-sign>span{font:700 6px/1.3 var(--body,sans-serif);letter-spacing:.15em;display:block}.traffic-playground-credit-sign strong{font:800 32px/1.15 var(--heading,sans-serif);letter-spacing:-.05em;display:block}.traffic-playground-credit-sign small{font:600 8px/1.3 var(--body,sans-serif)}.traffic-playground-credit-sign i{z-index:-1;background:#7e8c73;border-radius:0 0 3px 3px;width:5px;height:24px;position:absolute;top:100%;left:43px}.traffic-playground-center{z-index:3;flex-direction:column;align-items:center;display:flex;position:absolute;top:15%;left:50%;transform:translate(-50%)}.traffic-playground-phase{text-align:center;width:120px;height:47px;margin-bottom:8px;position:relative;transform:rotate(-5deg)}.traffic-playground-phase strong{font:700 39px/1.2 var(--heading,sans-serif);letter-spacing:-.07em;position:absolute;inset:0}.traffic-playground-ready{color:#ab4856;animation:9s linear infinite traffic-playground-ready}.traffic-playground-set{color:#806021;animation:9s linear infinite traffic-playground-set}.traffic-playground-go{color:#237856;animation:9s linear infinite traffic-playground-go}.traffic-playground-go-now{color:#237856}.traffic-playground-signal-button{color:#237856;cursor:pointer;background:0 0;border:0;border-radius:14px;flex-direction:column;align-items:center;gap:13px;padding:0 10px 8px;display:flex;position:relative}.traffic-playground-signal-button .traffic-signal.traffic-playground-signal{filter:drop-shadow(7px 14px 9px #0006);width:auto;height:210px;transition:transform .25s;transform:rotate(5deg)}.traffic-playground-signal-button:hover .traffic-playground-signal{transform:rotate(0)translateY(-3px)}.traffic-playground-signal-halo{z-index:-1;background:radial-gradient(circle,#75ba9812,#0000 70%);border:1px solid #75ba9815;border-radius:50%;width:155px;height:155px;position:absolute;top:48px;box-shadow:0 0 0 20px #75ba9805,0 0 0 40px #75ba9803}.traffic-playground-green-button{white-space:nowrap;font:500 10px/1.2 var(--body,sans-serif);background:#dce5dfe8;border:1px solid #75ba984a;border-radius:30px;align-items:center;gap:7px;padding:9px 12px;display:flex;box-shadow:0 5px 13px #0003}.traffic-playground-signal-button:hover .traffic-playground-green-button{color:#23394a;background:#75ba98}.traffic-playground-signal-button:focus-visible,.traffic-playground-pause:focus-visible{outline-offset:5px;outline:2px solid #806021}.traffic-playground-route-note{z-index:4;font:400 9px/1.5 var(--body,sans-serif);color:#506575;align-items:center;gap:6px;display:flex;position:absolute;bottom:31px;right:20px;transform:rotate(-5deg)}.traffic-playground-route-note>span{border-top:1px dashed #75ba9870;width:20px}.traffic-playground-burst{pointer-events:none;width:160px;height:180px;animation:2.4s ease-out forwards traffic-playground-burst-clock;position:absolute;top:55px}.traffic-playground-burst>svg{color:#f5b942;animation:.7s ease-in-out 3 traffic-playground-twinkle;position:absolute;top:6px;right:0}.traffic-playground-burst i{--burst-x:-80px;--burst-y:-20px;background:#7ce3a0;border-radius:2px;width:5px;height:12px;animation:1.2s ease-out forwards traffic-playground-confetti;position:absolute;top:55%;left:50%}.traffic-playground-burst i:nth-of-type(2){--burst-x:75px;--burst-y:-60px;background:#f5b942}.traffic-playground-burst i:nth-of-type(3){--burst-x:-60px;--burst-y:-85px;background:#f15b62}.traffic-playground-burst i:nth-of-type(4){--burst-x:65px;--burst-y:65px;background:#7ce3a0}.traffic-playground-burst i:nth-of-type(5){--burst-x:-75px;--burst-y:60px;background:#f5b942}.traffic-playground-burst i:nth-of-type(6){--burst-x:90px;--burst-y:5px;background:#f15b62}.traffic-playground[data-boosting=true] .traffic-signal-lamp{opacity:.22;animation:none}.traffic-playground[data-boosting=true] .traffic-signal-lamp--green{opacity:1;filter:drop-shadow(0 0 6px #75ba98b3)}.traffic-playground[data-boosting=true] .traffic-playground-car{filter:drop-shadow(0 0 7px #7ce3a077)}.traffic-playground[data-running=false] *,.traffic-playground[data-running=false] :before,.traffic-playground[data-running=false] :after{animation-play-state:paused!important}.traffic-playground-status{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes traffic-playground-drive{to{offset-distance:100%}}@keyframes traffic-playground-breathe{50%{opacity:.55;transform:scale(.92)}}@keyframes traffic-playground-float{50%{translate:0 -7px}}@keyframes traffic-playground-ready{0%,32.99%{opacity:1}33%,to{opacity:0}}@keyframes traffic-playground-set{0%,32.99%,66%,to{opacity:0}33%,65.99%{opacity:1}}@keyframes traffic-playground-go{0%,65.99%{opacity:0}66%,to{opacity:1}}@keyframes traffic-playground-burst-clock{0%,75%{opacity:1}to{opacity:0}}@keyframes traffic-playground-confetti{0%{opacity:0;transform:translate(0)rotate(0)}15%{opacity:1}to{opacity:0;transform:translate(var(--burst-x),var(--burst-y)) rotate(170deg)}}@keyframes traffic-playground-twinkle{50%{transform:scale(1.35)rotate(12deg)}}.traffic-playground--compact{height:280px}.traffic-playground--compact .traffic-playground-label{font-size:6px;top:12px;left:9px}.traffic-playground--compact .traffic-playground-pause{padding:6px 7px;font-size:8px;top:5px;right:5px}.traffic-playground--compact .traffic-playground-center{top:10%}.traffic-playground--compact .traffic-playground-phase{height:29px;margin-bottom:2px}.traffic-playground--compact .traffic-playground-phase strong{font-size:25px}.traffic-playground--compact .traffic-playground-signal-button .traffic-signal.traffic-playground-signal{height:130px}.traffic-playground--compact .traffic-playground-signal-button{gap:8px}.traffic-playground--compact .traffic-playground-green-button{padding:6px 8px;font-size:8px}.traffic-playground--compact .traffic-playground-signal-halo{width:110px;height:110px;top:20px}.traffic-playground--compact .traffic-playground-car{width:31px;height:18px}.traffic-playground--compact .traffic-playground-satellite{border-radius:9px;gap:6px;padding:8px 9px;font-size:7px}.traffic-playground--compact .traffic-playground-satellite strong{font-size:9px}.traffic-playground--compact .traffic-playground-idea{top:25%;left:0}.traffic-playground--compact .traffic-playground-shared{top:42%;right:0}.traffic-playground--compact .traffic-playground-idea>svg{display:none}.traffic-playground--compact .traffic-playground-credit-sign{width:66px;padding:6px 4px;bottom:7%;left:11%}.traffic-playground--compact .traffic-playground-credit-sign>span{font-size:5px}.traffic-playground--compact .traffic-playground-credit-sign strong{font-size:24px}.traffic-playground--compact .traffic-playground-credit-sign small{font-size:6px}.traffic-playground--compact .traffic-playground-credit-sign i{height:15px;left:29px}.traffic-playground--compact .traffic-playground-route-note{max-width:50%;font-size:6px;bottom:14px;right:5px}.traffic-playground--compact .traffic-playground-burst{width:130px;height:130px;top:25px}@media (max-width:600px){.traffic-playground:not(.traffic-playground--compact){height:370px}.traffic-playground:not(.traffic-playground--compact) .traffic-playground-center{top:15%}.traffic-playground:not(.traffic-playground--compact) .traffic-playground-signal-button .traffic-signal.traffic-playground-signal{height:160px}.traffic-playground:not(.traffic-playground--compact) .traffic-playground-phase{height:34px}.traffic-playground:not(.traffic-playground--compact) .traffic-playground-phase strong{font-size:30px}.traffic-playground-label{font-size:6px;top:15px;left:10px}.traffic-playground-pause{padding:7px;font-size:8px;top:7px;right:5px}.traffic-playground-satellite{gap:6px;padding:9px;font-size:7px}.traffic-playground-satellite strong{font-size:9px}.traffic-playground-idea{top:28%;left:0}.traffic-playground-idea>svg{display:none}.traffic-playground-shared{top:43%;right:0}.traffic-playground-dot{width:6px;height:6px}.traffic-playground-car{width:33px;height:20px}.traffic-playground-credit-sign{width:73px;padding:7px 4px;bottom:7%;left:9%}.traffic-playground-credit-sign strong{font-size:27px}.traffic-playground-credit-sign>span{font-size:5px}.traffic-playground-credit-sign small{font-size:6px}.traffic-playground-credit-sign i{height:18px;left:33px}.traffic-playground-route-note{max-width:49%;font-size:7px;bottom:23px;right:4px}}