.floating-tool {
  --tool-width: 104px;
  --tool-height: 69.333px;
  --tool-rest-angle: -8deg;
  --tool-held-angle: -8deg;
  --tool-hotspot-horizontal: 0.5;
  --tool-hotspot-vertical: 0.5;
  --tool-bob-distance: -5px;
  --tool-bob-angle: 3deg;
  position: absolute;
  z-index: 4;
  display: block;
  width: calc(var(--tool-width) + 12px);
  height: calc(var(--tool-height) + 45px);
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--site-tone-fff6e4, #fff6e4);
  cursor: pointer;
  touch-action: var(--tool-touch-action, pan-y pinch-zoom);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.floating-tool__slot,
.floating-tool__visual {
  display: block;
  width: var(--tool-width);
  height: var(--tool-height);
}

.floating-tool__slot { position: relative; }

.floating-tool__assembly {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: var(--tool-width);
  animation: floating-tool-sway 3.6s ease-in-out infinite;
}

.floating-tool__assembly::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -24px -24px -16px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--site-tool-glow, #ffa83d) 41.176471%, transparent) 0%, color-mix(in srgb, var(--site-tone-ff9d29, #ff9d29) 18.039216%, transparent) 36%, color-mix(in srgb, var(--site-tone-ff9d29, #ff9d29) 0.0%, transparent) 72%);
  filter: blur(8px);
  pointer-events: none;
  animation: floating-tool-glow 3s ease-in-out infinite;
}

.floating-tool__visual {
  pointer-events: none;
  transition: scale 180ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .floating-tool:not(.floating-tool--flying):hover .floating-tool__visual { scale: 1.045; }
}
.floating-tool:not(.floating-tool--flying):focus-visible .floating-tool__visual { scale: 1.045; }

.floating-tool__art {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--tool-rest-angle));
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--site-tone-ffb64f, #ffb64f) 60.0%, transparent)) drop-shadow(0 7px 5px color-mix(in srgb, var(--site-tone-020a14, #020a14) 65.098039%, transparent));
}

.floating-tool__art > img,
.floating-tool__art > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}

.floating-tool__label {
  display: block;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--site-tone-ffd48d, #ffd48d) 72.941176%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--site-tone-704116, #704116) 92.156863%, transparent), color-mix(in srgb, var(--site-tone-2b200f, #2b200f) 92.156863%, transparent));
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--site-tone-ffb94c, #ffb94c) 18.823529%, transparent);
  color: var(--site-tool-label, #fff0c5);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--site-tone-ffb94c, #ffb94c) 50.196078%, transparent));
  text-shadow: 0 0 7px color-mix(in srgb, var(--site-tone-ffad4c, #ffad4c) 60.0%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.floating-tool__label::before {
  content: "✦";
  margin-right: 5px;
  color: var(--site-tone-ffc65e, #ffc65e);
}

.floating-tool:hover .floating-tool__label {
  border-color: var(--site-tone-fff0bd, #fff0bd);
  background: linear-gradient(180deg, color-mix(in srgb, var(--site-tone-8c551e, #8c551e) 92.156863%, transparent), color-mix(in srgb, var(--site-tone-3b2912, #3b2912) 92.156863%, transparent));
}

.floating-tool--flying .floating-tool__assembly {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  margin: 0;
  transform: translate3d(var(--tool-visual-left), var(--tool-visual-top), 0);
  will-change: transform;
  animation: none;
  pointer-events: none;
}

.floating-tool--flying { z-index: 40; }

.floating-tool--flying .floating-tool__art {
  transform: rotate(var(--tool-held-angle));
  transition: transform 360ms ease-in-out;
}

.floating-tool--returning .floating-tool__art { transform: rotate(var(--tool-rest-angle)); }
.floating-tool--parked:not(.floating-tool--flying) .floating-tool__assembly { animation: none; }
.floating-tool--attached { cursor: none; }
.floating-tool--paused .floating-tool__assembly,
.floating-tool--paused .floating-tool__assembly::before { animation-play-state: paused; }
.floating-tool-cursor,
.floating-tool-cursor * { cursor: none !important; }
.floating-tool[hidden] { display: none; }

@keyframes floating-tool-sway {
  0%, 100% { transform: translateY(0) rotate(0); }
  48% { transform: translateY(var(--tool-bob-distance)) rotate(var(--tool-bob-angle)); }
}

@keyframes floating-tool-glow {
  0%, 100% { opacity: 0.42; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

.floating-tool-ghost {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  animation: floating-tool-vanish 340ms ease-in forwards;
}

.floating-tool-ghost::before { animation: none; }
.floating-tool-ghost--fade { animation-name: floating-tool-fade; animation-timing-function: ease-out; }

@keyframes floating-tool-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

.floating-tool-completion {
  position: absolute;
  z-index: 41;
  width: 96px;
  height: 96px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px var(--site-tone-ffd164, #ffd164)) drop-shadow(0 0 17px color-mix(in srgb, var(--site-tone-ff981f, #ff981f) 70.196078%, transparent));
  will-change: transform, opacity;
  animation: floating-tool-zoom 1150ms ease-in-out both, floating-tool-flash 1150ms ease-in-out both;
}

.floating-tool-completion svg { display: block; width: 100%; height: 100%; }
.floating-tool-completion__message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

@keyframes floating-tool-vanish {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-12px) scale(0.82); }
}

@keyframes floating-tool-zoom {
  from { transform: translate(-50%, -50%) scale(0.35); }
  to { transform: translate(-50%, -50%) scale(1.9); }
}

@keyframes floating-tool-flash {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}