@font-face {
  font-family: 'VT323';
  src: url('/fonts/VT323-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.schwifly.sc-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100svh;
  padding: 0;
  transform: none !important;
  background: #030807;
  color: #f0f2ed;
  overflow: hidden;
  font-family: 'VT323', monospace;
}
.schwifly__score {
  text-align: right;
  font:
    20px 'VT323',
    monospace;
  color: #c1c9c5;
}
.schwifly__score output {
  color: #55df91;
  font-size: 23px;
  margin-left: 12px;
}
.schwifly__field {
  position: absolute;
  inset: 90px 0 165px;
  overflow: visible;
}
.schwifly__field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.schwifly__calm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  background: radial-gradient(ellipse at center, #030807 10%, transparent 70%);
}
.schwifly__calm h3 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(36px, 4.5vw, 68px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-wrap: balance;
}
.schwifly__calm p {
  margin: 28px 0 36px;
  color: #a8aaa3;
  font-size: 21px;
}
.schwifly__load,
.schwifly__again,
.schwifly__finish {
  border: 1px solid #c1c8c4;
  background: #080e0c;
  color: #f3f5f1;
  border-radius: 12px;
  padding: 14px 32px;
  font:
    26px 'VT323',
    monospace;
  cursor: pointer;
}
.schwifly__hub {
  display: none;
  position: absolute;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  gap: 8px;
  padding: 8px;
  border: 1px solid #ffffff1c;
  border-radius: 18px;
  background: #101614d9;
  max-width: calc(100% - 32px);
}
.schwifly__tool {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: #dfe7e2;
  font:
    20px 'VT323',
    monospace;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.schwifly__tool:hover,
.schwifly__tool:focus-visible {
  background: #ffffff0c;
}
.schwifly__tool:disabled {
  opacity: 0.4;
  cursor: default;
}
.schwifly__mini {
  display: block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 44% 56% 63% 37%;
  border: 1px solid #d4e4e4aa;
  background: radial-gradient(
    at 25% 20%,
    #dae6e799,
    #93a6ac22 40%,
    #b2c5ce44 80%,
    #f0fcff99
  );
  box-shadow:
    inset 0 0 7px hsl(var(--hue) 85% 70% / 0.25),
    0 0 12px hsl(var(--hue) 85% 70% / 0.5);
}
.schwifly__tool:first-child .schwifly__mini {
  width: 32px;
  height: 32px;
}
.schwifly__entity {
  position: absolute;
  background: transparent;
  border: 0;
  border-radius: 50%;
  padding: 0;
  color: #f0f5f1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.schwifly__entity span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font:
    19px 'VT323',
    monospace;
  padding: 1px 5px;
  border-radius: 3px;
  background: #030807d9;
  line-height: 1;
  text-shadow:
    0 0 5px #030807,
    0 0 8px #030807;
  pointer-events: none;
}
.schwifly button:focus-visible {
  outline: 2px solid #55df91;
  outline-offset: 4px;
}
.schwifly--running .schwifly__calm,
.schwifly--finished .schwifly__calm {
  display: none;
}
.schwifly--running .schwifly__hub {
  display: flex;
}

.schwifly--dragging .schwifly__hub {
  border-color: #8bad9d;
}
html[data-world='schwifly'] .map {
  top: auto;
  bottom: 22px;
  left: 50%;
  right: auto;
  translate: -50% 0;
  flex-direction: row;
  gap: 24px;
}
html[data-world='schwifly'] .map__go {
  flex-direction: column;
  font-size: 10px;
  gap: 6px;
}
html[data-world='schwifly'] .map__go::before {
  width: 100%;
}
@media (max-width: 600px) {
  .schwifly__score {
    font-size: 18px;
  }
  .schwifly__score output {
    font-size: 17px;
    margin-left: 5px;
  }
  .schwifly__field {
    inset: 78px 0 220px;
  }
  .schwifly__calm {
    padding: 24px;
  }
  .schwifly__calm p {
    font-size: 17px;
  }
  .schwifly__hub {
    bottom: 76px;
    display: none;
    width: 330px;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }
  .schwifly--running .schwifly__hub {
    display: grid;
  }
  .schwifly__tool {
    padding: 10px 8px;
    font-size: 18px;
  }
  html[data-world='schwifly'] .map {
    gap: 15px;
  }
  html[data-world='schwifly'] .map__go {
    font-size: 8px;
  }
}
@media (max-height: 500px) and (min-width: 601px) {
  .schwifly__field {
    inset: 65px 0 125px;
  }
  .schwifly__hub {
    bottom: 53px;
    padding: 3px;
  }
  .schwifly__calm h3 {
    font-size: 28px;
    max-width: 650px;
  }
  .schwifly__calm p {
    margin: 12px 0;
  }
}

.schwifly__tool {
  position: relative;
}
.schwifly__tooltip {
  position: absolute;
  bottom: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  padding: 12px 14px;
  border: 1px solid #ffffff30;
  border-radius: 12px;
  background: #17221f;
  color: #edf4f0;
  white-space: normal;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  visibility: hidden;
}
.schwifly__tool:hover .schwifly__tooltip,
.schwifly__tool:focus-visible .schwifly__tooltip {
  visibility: visible;
}
.schwifly--dragging .schwifly__tooltip {
  visibility: hidden;
}
.schwifly__mini {
  background: radial-gradient(
    at 25% 20%,
    hsl(var(--hue) 90% 85% / 0.12),
    hsl(var(--hue) 70% 40% / 0.03) 45%,
    hsl(var(--hue) 80% 70% / 0.15)
  );
  animation: schwifly-roll var(--roll) linear infinite;
}
.schwifly__tool[data-type='1'] .schwifly__mini {
  width: 16px;
  height: 16px;
}
.schwifly__tool[data-type='3'] .schwifly__mini {
  width: 29px;
  height: 29px;
}
@keyframes schwifly-roll {
  50% {
    border-radius: 65% 35% 42% 58%;
  }
  to {
    transform: rotate(360deg);
  }
}
.schwifly__bin {
  display: none;
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  width: 56px;
  height: 64px;
  border: 1px dashed #db9595;
  border-radius: 14px;
  background: #241719;
  color: #f5b2b2;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 10px;
  gap: 4px;
}
.schwifly__bin svg {
  width: 25px;
  height: 25px;
}
.schwifly--dragging .schwifly__bin {
  display: flex;
}
.schwifly__bin--over {
  background: #7b303b;
  border-style: solid;
}
.schwifly__preview {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}
@media (max-width: 760px) {
  .schwifly__bin {
    left: auto;
    right: 0;
    top: -76px;
  }
}
@media (max-width: 600px) {
  .schwifly__tool:nth-child(odd) .schwifly__tooltip {
    left: 0;
    transform: none;
  }
  .schwifly__tool:nth-child(even) .schwifly__tooltip {
    left: auto;
    right: 0;
    transform: none;
  }
  .schwifly__tool:nth-child(n + 3) .schwifly__tooltip {
    bottom: calc(200% + 18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .schwifly__mini {
    animation: none;
  }
}

/* The global canvas display rule overrides the browser's hidden attribute. */
.schwifly__preview[hidden] {
  display: none;
}
.schwifly__entity[data-entity-type='1'] span {
  font-size: 15px;
  padding: 1px 3px;
}
.schwifly__entity[data-entity-type='0'] span {
  font-size: 22px;
}

.schwifly__scores {
  display: none;
  position: absolute;
  right: 32px;
  top: 58px;
  z-index: 6;
  align-items: flex-start;
  gap: 22px;
}
.schwifly--running .schwifly__scores {
  display: flex;
}
.schwifly--running .schwifly__field {
  top: 136px;
}
.schwifly__finish {
  padding: 8px 18px;
  font-size: 22px;
}
.schwifly__github {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  color: #b8c9c0;
  font-size: 22px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.schwifly--running .schwifly__github {
  top: 22px;
  right: 32px;
  bottom: auto;
  left: auto;
  transform: none;
}
.schwifly__velocity {
  position: relative;
  margin-top: 4px;
  cursor: help;
}
.schwifly__velocity-label {
  display: block;
  font-size: 18px;
  min-height: 18px;
}
.schwifly__velocity .schwifly__tooltip {
  top: calc(100% + 8px);
  bottom: auto;
  right: 0;
  left: auto;
  transform: none;
  width: min(330px, calc(100vw - 40px));
  font-size: 18px;
  line-height: 1.25;
  max-height: calc(100svh - 150px);
  overflow-y: auto;
  pointer-events: auto;
}
.schwifly__velocity:hover .schwifly__tooltip,
.schwifly__velocity:focus .schwifly__tooltip {
  visibility: visible;
}
.schwifly__velocity .schwifly__tooltip p {
  margin: 0 0 12px;
}
.schwifly__velocity .schwifly__tooltip ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.schwifly__velocity .schwifly__tooltip li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
}
.schwifly__results {
  position: absolute;
  inset: 110px 24px 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(
    ellipse at center,
    #030807 45%,
    #030807d9 75%,
    transparent
  );
}
.schwifly__results[hidden] {
  display: none;
}
.schwifly__results h3 {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  margin: 0;
}
.schwifly__results table {
  width: min(460px, 100%);
  border-collapse: collapse;
  font-size: 24px;
  line-height: 1.2;
}
.schwifly__results th {
  text-align: left;
  font-weight: 400;
}
.schwifly__results td,
.schwifly__results thead th:last-child {
  text-align: right;
}
.schwifly__results th,
.schwifly__results td {
  padding: 7px 0;
  border-bottom: 1px solid #ffffff20;
}
.schwifly__results thead {
  font-size: 18px;
  color: #b8c9c0;
}
@media (max-width: 600px) {
  .schwifly__scores {
    right: 20px;
    top: 54px;
    gap: 18px;
  }
  .schwifly--running .schwifly__github {
    right: 20px;
    top: 20px;
    font-size: 20px;
  }
  .schwifly__results {
    inset: 70px 24px 150px;
    gap: 20px;
  }
}
@media (max-height: 500px) and (min-width: 601px) {
  .schwifly__results {
    inset: 24px 24px 115px;
    gap: 8px;
  }
  .schwifly__results h3 {
    font-size: 32px;
    line-height: 1;
  }
  .schwifly__results th,
  .schwifly__results td {
    padding: 2px 0;
  }
  .schwifly__again {
    padding: 6px 22px;
    font-size: 22px;
  }
  .schwifly__github {
    bottom: 78px;
  }
}