/* Fixed offsets are part of the original hand-lettered artwork. */
.werkflo-logo {
  position: relative;
  width: 481px;
  height: 480px;
  overflow: visible;
  isolation: isolate;
  flex: none;
  cursor: pointer;
  outline-offset: 8px;
}
.werkflo-logo:focus-visible { outline: 2px solid var(--accent-cyan); }
.logo-intact-contour { position: absolute; inset: 0; display: none; }
.werkflo-logo[data-playing="false"] .logo-intact-contour { display: block; }
.werkflo-logo[data-playing="false"] .logo-layer-28 > :not(.logo-intact-contour),
.werkflo-logo[data-playing="false"] .logo-layer-44 > :not(.logo-intact-contour) { visibility: hidden; }
.werkflo-logo img {
  user-select: none;
  pointer-events: none;
}
.logo-layer-1 { position: absolute; display: contents; left: 0; top: 0; }
.logo-layer-2 { position: absolute; inset: 0; pointer-events: none; }
.logo-layer-3 { position: absolute; inset: 16.12% 88.19% 73.87% 0; }
.logo-layer-4 { position: absolute; display: block; inset: 0; max-width: none; }
.logo-layer-5 { position: absolute; inset: 25.74% 88.19% 47.33% 0; }
.logo-layer-6 { position: absolute; inset: 52.73% 76.83% 7.7% 0.29%; }
.logo-layer-7 { position: absolute; inset: -3.67% -4.49% -3.69% -6.36%; }
.logo-layer-8 { display: block; max-width: none; }
.logo-layer-9 { position: absolute; height: 73.4px; left: 77.09px; top: 377.32px; width: 88.141px; }
.logo-layer-10 { position: absolute; height: 73.4px; left: 0; overflow: clip; top: 0; width: 88.141px; }
.logo-layer-11 { position: absolute; display: contents; inset: 6.6% 5.49%; }
.logo-layer-12 { position: absolute; inset: 6.6% 5.49%; }
.logo-layer-13 { position: absolute; inset: -7.6% -6.17%; }
.logo-layer-14 { position: absolute; height: 203.8px; left: 168.47px; top: 247.8px; width: 128.989px; }
.logo-layer-15 { position: absolute; height: 203.8px; left: 0; opacity: 0; overflow: clip; top: 0; width: 128.989px; }
.logo-layer-16 { position: absolute; display: contents; inset: 2.56% 3.75% 2.38% 15.16%; }
.logo-layer-17 { position: absolute; inset: 2.56% 3.75% 2.38% 15.16%; }
.logo-layer-18 { position: absolute; inset: -2.5% -4.63%; }
.logo-layer-19 { position: absolute; height: 203.8px; left: 0; overflow: clip; top: 0; width: 128.989px; }
.logo-layer-20 { position: absolute; display: contents; inset: 2.38% 3.75%; }
.logo-layer-21 { position: absolute; inset: 2.38% 3.75%; }
.logo-layer-22 { position: absolute; inset: -2.49% -4.06%; }
.logo-layer-23 { position: absolute; height: 147.274px; left: 167.09px; top: 304.32px; width: 79.601px; }
.logo-layer-24 { position: absolute; height: 147.274px; left: 0; overflow: clip; top: 0; width: 79.601px; }
.logo-layer-25 { position: absolute; display: contents; inset: 3.29% 6.08%; }
.logo-layer-26 { position: absolute; inset: 3.29% 6.08%; }
.logo-layer-27 { position: absolute; inset: -3.52% -6.92%; }
.logo-layer-28 { position: absolute; height: 236.847px; left: 106.4px; top: 247.99px; width: 140.296px; }
.logo-layer-29 { position: absolute; height: 236.847px; left: 0; overflow: clip; top: 0; width: 68.2px; }
.logo-layer-30 { position: absolute; height: 236.847px; left: 0; overflow: clip; top: 0; width: 140.296px; }
.logo-layer-31 { position: absolute; display: contents; inset: 2.04% 3.45%; }
.logo-layer-32 { position: absolute; inset: 2.04% 3.45%; }
.logo-layer-33 { position: absolute; inset: -2.13% -3.71%; }
.logo-layer-34 { position: absolute; inset: 14.13% 53.78% 70.27% 8.05%; }
.logo-layer-35 { position: absolute; inset: 14.13% 68.59% 76.12% 26.48%; }
.logo-layer-36 { position: absolute; height: 167.091px; left: 66.94px; overflow: clip; top: 69.76px; width: 73.36px; }
.logo-layer-37 { position: absolute; height: 236.847px; left: -66.94px; overflow: clip; top: -69.76px; width: 140.296px; }
.logo-layer-38 { position: absolute; height: 71.2px; left: 66.94px; overflow: clip; top: 0; width: 73.36px; }
.logo-layer-39 { position: absolute; height: 236.847px; left: -66.94px; overflow: clip; top: 0; width: 140.296px; }
.logo-layer-40 { position: absolute; display: flex; inset: 20.29% 3.92% 10.4% 54.84%; align-items: center; justify-content: center; }
.logo-layer-41 { flex: none; height: hypot(-37.943cqw,90.7711cqh); width: hypot(62.057cqw,9.22889cqh); transform: rotate(14deg) skewX(0.01deg); }
.logo-layer-42 { position: relative; width: 100%; height: 100%; }
.logo-layer-43 { position: absolute; inset: -2.25% -5.52%; }
.logo-layer-44 { position: absolute; height: 185.135px; left: 89.78px; top: 72.54px; width: 113.987px; }
.logo-layer-45 { position: absolute; height: 185.135px; left: 0; overflow: clip; top: 0; width: 35px; }
.logo-layer-46 { position: absolute; height: 185.135px; left: 0; overflow: clip; top: 0; width: 113.987px; }
.logo-layer-47 { position: absolute; display: contents; inset: 2.62% 4.24%; }
.logo-layer-48 { position: absolute; inset: 2.62% 4.24%; }
.logo-layer-49 { position: absolute; inset: -2.76% -4.64%; }
.logo-layer-50 { position: absolute; height: 124.4px; left: 33.76px; overflow: clip; top: 0; width: 80.224px; }
.logo-layer-51 { position: absolute; height: 185.135px; left: -33.76px; overflow: clip; top: 0; width: 113.987px; }
.logo-layer-52 { position: absolute; height: 62.123px; left: 33.76px; overflow: clip; top: 123.01px; width: 80.224px; }
.logo-layer-53 { position: absolute; height: 185.135px; left: -33.76px; overflow: clip; top: -123.01px; width: 113.987px; }
.logo-layer-54 { position: absolute; inset: 26.13% 69.87% 41.36% 9.02%; }
.logo-layer-55 { position: absolute; inset: -4.49% -6.89%; }
.logo-layer-56 { position: absolute; background-color: #000; inset: 44.29% 81.39% 49.61% 16.61%; }
.logo-layer-57 { position: absolute; display: contents; inset: 29.97% 86.75% 45.28% 2.69%; }
.logo-layer-58 { position: absolute; display: flex; inset: 29.97% 86.75% 45.28% 2.69%; align-items: center; justify-content: center; }
.logo-layer-59 { flex: none; height: hypot(50.4193cqw,94.2391cqh); width: hypot(49.5807cqw,-5.76088cqh); transform: rotate(-15.2deg) skewX(-2.32deg); }
.logo-layer-60 { position: absolute; inset: -6.1% -26.83%; }
.logo-layer-61 { position: absolute; display: flex; inset: 38.67% 90.98% 53.9% 6.91%; align-items: center; justify-content: center; }
.logo-layer-62 { flex: none; height: hypot(80.2747cqw,98.4522cqh); width: hypot(19.7253cqw,-1.54783cqh); transform: rotate(-15.41deg) skewX(-2.35deg); }
.logo-layer-63 { background-color: #000; position: relative; border-radius: 8px; width: 100%; height: 100%; }
.logo-layer-64 { position: absolute; inset: 41.47% 22.56% 18.52% 55.84%; }
.logo-layer-65 { position: absolute; inset: 79.94% 22.56% 6.93% 55.84%; }
.logo-layer-66 { position: absolute; height: 338px; left: 161.22px; top: 0; width: 320px; }
.logo-layer-67 { position: absolute; inset: 22.82% 10.69% 23.69% 7.15%; }
.logo-layer-68 { position: absolute; inset: -1.94% -1.33%; }
.logo-layer-69 { position: absolute; height: 7.204px; left: 673.93px; top: 76.02px; width: 9.345px; }
.logo-layer-70 { position: absolute; inset: -13.88% -10.7% -13.88% -10.71%; }
.logo-layer-71 { position: absolute; height: 8.398px; left: 671.6px; top: 75.18px; width: 15.162px; }
.logo-layer-72 { position: absolute; inset: -11.91% -6.6%; }
.logo-layer-73 { position: absolute; height: 6.278px; left: 673.67px; top: 73.89px; width: 10.563px; }
.logo-layer-74 { position: absolute; inset: -15.93% -9.47%; }
.logo-layer-75 { position: absolute; height: 5.122px; left: 670.28px; top: 75.75px; width: 15.133px; }
.logo-layer-76 { position: absolute; inset: -19.52% -6.61% -19.53% -6.61%; }
.logo-layer-77 { position: absolute; height: 10.832px; left: 673.15px; top: 74.28px; width: 17.643px; }
.logo-layer-78 { position: absolute; inset: -9.23% -5.67%; }
.logo-layer-79 { position: absolute; height: 14.128px; left: 681.66px; top: 83.38px; width: 1.183px; }
.logo-layer-80 { position: absolute; inset: -7.08% -84.56% -7.08% -84.58%; }
.logo-layer-81 { position: absolute; height: 10.126px; left: 672.12px; top: 72.84px; width: 12.354px; }
.logo-layer-82 { position: absolute; inset: -9.88% -8.1% -9.88% -8.09%; }
.logo-layer-83 { position: absolute; height: 490px; left: 0; opacity: 0; top: 0; width: 600px; }
.logo-layer-84 { position: absolute; height: 81.505px; left: 41.74px; opacity: 0; top: 178.5px; width: 42.588px; }
.logo-layer-85 { position: absolute; height: 82px; left: 0; top: 0; width: 43px; }
.logo-layer-86 { position: absolute; display: contents; inset: 0 0.96% 0.6% 0; }
.logo-layer-87 { position: absolute; inset: 0 0.96% 0.6% 0; }
.logo-layer-88 { position: absolute; inset: -8.59% -16.44%; }
.logo-layer-89 { position: absolute; height: 148.552px; left: 182.44px; opacity: 0; top: 244.3px; width: 48.72px; }
.logo-layer-90 { position: absolute; height: 149px; left: 0; top: 0; width: 49px; }
.logo-layer-91 { position: absolute; display: contents; inset: 0 0.57% 0.3% 0; }
.logo-layer-92 { position: absolute; inset: 0 0.57% 0.3% 0; }
.logo-layer-93 { position: absolute; inset: -4.71% -14.37%; }
.logo-layer-94 { position: absolute; height: 298.9px; left: 466.17px; opacity: 0; top: 52.2px; width: 72.872px; }
.logo-layer-95 { position: absolute; height: 299px; left: 0; top: 0; width: 73px; }
.logo-layer-96 { position: absolute; display: contents; inset: 0.55% 5.06% 0.12% 3.37%; }
.logo-layer-97 { position: absolute; inset: 0.55% 5.06% 0.12% 3.37%; }
.logo-layer-98 { position: absolute; inset: -2.36% -10.47%; }