@font-face {
  font-family: Furl Pixel;
  src: url(furl-fonts/PressStart2P-Regular.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* OG Furl's four separate tiles, offsets, skew and hover colors. The loader
 * keeps the original tall silhouette; the header uses a compact height. */
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark) {
  display: flex;
  font:
    24px/1 "Furl Pixel",
    monospace;
  font-weight: 400;
  letter-spacing: 0;
  height: 3em;
  transform: skewY(2deg) skewX(17deg);
  user-select: none;
  -webkit-user-select: none;
}
:root[data-furl-theme="playful"] .furl-wordmark {
  font-size: 22px;
  height: 1.65em;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span {
  --furl-logo-active: 0;
  position: relative;
  width: 1em;
  flex: 0 0 1em;
  transform: skewY(calc(7deg * var(--furl-logo-active)))
    scale(calc(1 + 0.3 * var(--furl-logo-active)));
  text-shadow: 3px 0
    color-mix(
      in srgb,
      var(--letter-shadow),
      #fe00be calc(100% * var(--furl-logo-active))
    );
  box-shadow: calc(6px * var(--furl-logo-active)) 0 #edff00;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span:nth-child(1) {
  color: #9699f6;
  background: light-dark(#e1d8fd, #423953);
  border-bottom-left-radius: 1em;
  --letter-shadow: #7d346b;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span:nth-child(2) {
  top: 4px;
  right: -2px;
  color: #f56197;
  background: light-dark(#d3dcff, #33455c);
  --letter-shadow: #00ffee;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span:nth-child(3) {
  top: -4px;
  right: -2px;
  color: #2cd2c4;
  background: light-dark(#fdd6f6, #523b52);
  --letter-shadow: #00ffee;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span:nth-child(4) {
  top: 1px;
  right: -3px;
  color: #ffb440;
  background: light-dark(#caf1cd, #304b46);
  border-bottom-right-radius: 3em;
  --letter-shadow: #009aff;
}
:is(.furl-loading-logo, :root[data-furl-theme="playful"] .furl-wordmark)
  > span:hover {
  --furl-logo-active: 1 !important;
}
.furl-loading {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}
.furl-loading-spin {
  animation: furl-logo-spin 1.6s linear infinite;
}
.furl-loading-logo > span {
  animation: 1080ms steps(1, end) infinite;
}
.furl-loading-logo > span:nth-child(1) {
  animation-name: furl-logo-f;
}
.furl-loading-logo > span:nth-child(2) {
  animation-name: furl-logo-u;
}
.furl-loading-logo > span:nth-child(3) {
  animation-name: furl-logo-r;
}
.furl-loading-logo > span:nth-child(4) {
  animation-name: furl-logo-l;
}
@keyframes furl-logo-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Six 180ms beats: F U R L R U. Simulated hover and real hover share a style. */
@keyframes furl-logo-f {
  0% {
    --furl-logo-active: 1;
  }
  16.6667%,
  100% {
    --furl-logo-active: 0;
  }
}
@keyframes furl-logo-u {
  0%,
  33.3333%,
  100% {
    --furl-logo-active: 0;
  }
  16.6667%,
  83.3333% {
    --furl-logo-active: 1;
  }
}
@keyframes furl-logo-r {
  0%,
  50%,
  83.3333%,
  100% {
    --furl-logo-active: 0;
  }
  33.3333%,
  66.6667% {
    --furl-logo-active: 1;
  }
}
@keyframes furl-logo-l {
  0%,
  66.6667%,
  100% {
    --furl-logo-active: 0;
  }
  50% {
    --furl-logo-active: 1;
  }
}
:root[data-furl-motion="false"] .furl-loading-spin,
:root[data-furl-motion="false"] .furl-loading-logo > span {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .furl-loading-spin,
  .furl-loading-logo > span {
    animation: none;
  }
}