.photo-saber-button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 0;
  text-align: inherit;
  cursor: inherit;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.photo-saber-button > img { display: block; }
.photo-saber-button:focus-visible {
  outline: 2px solid var(--wine, #572632);
  outline-offset: -3px;
}
.photo-saber-button:focus-visible::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid #fff;
  pointer-events: none;
  z-index: 2;
}
.photo-saber-effect {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.photo-saber {
  position: absolute;
  --saber-width: clamp(8px, 1vw, 13px);
  width: var(--saber-width);
  height: var(--saber-length);
  margin-left: calc(var(--saber-width) / -2);
  transform-origin: 50% 88%;
  transform: rotate(var(--strike-angle));
}
.photo-saber-blade {
  position: absolute;
  top: 0;
  bottom: 22%;
  left: 20%;
  width: 60%;
  border-radius: 100% 100% 2px 2px / 9px 9px 2px 2px;
  background: #faffff;
  box-shadow: 0 0 3px 1px #fff, 0 0 8px 3px var(--blade-color), 0 0 18px 5px var(--blade-color);
}
.photo-saber-hilt {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22%;
  border: 1px solid #303c43;
  border-radius: 2px 2px 4px 4px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 5px, #17242bbb 5px 7px),
    linear-gradient(to right, #202a31, #ccd3d6 28%, #89969d 47%, #ebeeee 62%, #25323b);
  box-shadow: 1px 2px 4px #0007;
}
.photo-saber-hilt::before {
  content: '';
  position: absolute;
  left: -25%;
  top: -5px;
  width: 150%;
  height: 6px;
  border: 1px solid #26343e;
  border-radius: 1px;
  background: linear-gradient(to right, #475761, #eff5f7, #43515a);
}
.photo-saber-hilt::after {
  content: '';
  position: absolute;
  left: 35%;
  top: 23%;
  width: 3px;
  height: 5px;
  border-radius: 1px;
  background: var(--blade-color);
  box-shadow: 0 0 3px var(--blade-color);
}
.photo-saber-effect.is-playing { animation: photo-saber-appear 1400ms linear both; }
.is-playing .photo-saber { animation: photo-saber-sweep 1400ms linear both; }
.photo-saber-effect.is-still { opacity: .94; }
.photo-saber-hearts { position: absolute; width: 0; height: 0; pointer-events: none; }
.photo-saber-heart {
  position: absolute;
  display: block;
  width: 1em;
  height: 1em;
  font: var(--heart-size) / 1 Georgia, serif;
  text-align: center;
  color: var(--heart-color);
  text-shadow: 0 1px 3px #632739, 0 0 7px #fff8;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1);
}
.is-playing .photo-saber-heart { animation: photo-heart-burst 760ms cubic-bezier(.16, .7, .3, 1) var(--impact-delay) both; }
.is-still .photo-saber-heart {
  opacity: 1;
  transform: translate(calc(-50% + var(--still-x)), calc(-50% + var(--still-y))) scale(.85);
}
@keyframes photo-saber-appear {
  0%, 100% { opacity: 0; }
  10%, 82% { opacity: .94; }
}
@keyframes photo-saber-sweep {
  0% { transform: rotate(var(--start-angle)); }
  40%, 54% { transform: rotate(var(--strike-angle)); }
  100% { transform: rotate(var(--exit-angle)); }
}
@keyframes photo-heart-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  62% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-x)), calc(-50% + var(--heart-y))) rotate(var(--heart-turn)) scale(.75); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-saber-effect.is-playing,
  .is-playing .photo-saber,
  .is-playing .photo-saber-heart { animation: none; }
}