.container{--uib-color:black;--uib-speed:1.4s;--uib-bg-opacity:.1;transform-origin:50%;overflow:visible}.car{fill:none;stroke:var(--uib-color);stroke-dasharray:15 85;stroke-dashoffset:0;stroke-linecap:round;animation:travel var(--uib-speed) linear infinite;will-change:stroke-dasharray, stroke-dashoffset;transition:stroke .5s}.track{stroke:var(--uib-color);opacity:var(--uib-bg-opacity);transition:stroke .5s}@keyframes travel{0%{stroke-dashoffset:0}to{stroke-dashoffset:-100px}}
.switch{--shadow-color:var(--color-dark);--transition100:.1s;--color-dark:#0c0f14;--color-gray:#52555a;transition:var(--transition100);-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:30px;align-items:center;width:50px;height:24px;padding:4px;display:flex;position:relative;overflow:hidden}.switch .svg{transition:var(--transition100);position:absolute}.switch .moon{fill:var(--color-gray);width:14px;height:14px;right:5px}.switch .sun{border-radius:50%;justify-content:center;align-items:center;width:12px;height:12px;margin-left:2px;display:flex;top:8px;transform:translateY(-50%)scale(.5)}.switch .sun .dot{z-index:1;width:3px;height:3px;box-shadow:11px 0px 0px var(--shadow-color), 10.3px 0px 0px var(--shadow-color), -11px 0px 0px var(--shadow-color), -10.3px 0px 0px var(--shadow-color), 0px -11px 0px var(--shadow-color), 0px -10.3px 0px var(--shadow-color), 0px 11px 0px var(--shadow-color), 0px 10.3px 0px var(--shadow-color), 8px 8px 0px var(--shadow-color), 7.3px 7.3px 0px var(--shadow-color), 8px -8px 0px var(--shadow-color), 7.3px -7.3px 0px var(--shadow-color), -8px -8px 0px var(--shadow-color), -7.3px -7.3px 0px var(--shadow-color), -8px 8px 0px var(--shadow-color), -7.3px 7.3px 0px var(--shadow-color);background:#fff;border-radius:50%;display:block;position:relative}.switch .sun .dot:before{border:2px solid var(--color-dark);content:"";background:#fff;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.switch .circle{transition:var(--transition100);appearance:none;background-color:#fff;border-radius:50%;width:16px;height:16px;position:relative;left:0}.switch:hover .circle{margin-left:3px}.switch:hover .circle:checked{margin-left:-3px}.switch:hover .moon{right:7px}.switch:hover .sun{margin-left:5px}.switch .circle:checked{left:calc(100% - 16px)}.switch:has(.circle:checked)>.sun{opacity:0}.switch:not(:has(.circle:checked))>.sun{opacity:1}.switch:has(.circle:checked)>.moon{opacity:1}.switch:not(:has(.circle:checked))>.moon{opacity:0}