#supercut-orbit {
  position: fixed;
  left: 22%;
  top: 69%;
  width: clamp(210px, 22vw, 280px);
  transform: translate(calc(-50% + var(--note-x, 0px) + var(--drag-x, 0px)), calc(-50% + var(--note-y, 0px) + var(--drag-y, 0px))) scale(var(--note-scale, 1));
  will-change: transform;
}
.supercut-drift {
  --rest-angle: -3;
  animation: supercut-float 10s ease-in-out -4s infinite alternate;
}
#supercut-window {
  display: block;
  position: relative;
  padding-bottom: 24px;
  perspective: 850px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  color: #fff;
  text-decoration: none;
}
.supercut-space {
  display: block;
  position: relative;
  /* Keep the video and controls in one plane for backdrop sampling. */
  transform-style: flat;
  animation: supercut-perspective 12s ease-in-out -3s infinite alternate;
}
#supercut-screen {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Composite the masked video as one surface before its parent rotates it. */
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 14px;
  --smooth-border: #ffffff45;
  background: #101018;
}
/* One alpha mask owns the outline; avoid clipping the video a second time. */
#supercut-screen.smooth-corners {
  overflow: visible;
  border-radius: 0;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}
.supercut-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 80% 110%, #bd5c6475, transparent 62%),
    radial-gradient(ellipse at 0% 0%, #58688485, transparent 70%), #15141e;
}
.supercut-placeholder strong { font-size: clamp(25px, 3vw, 36px); font-weight: 400; letter-spacing: -.045em; }
.supercut-placeholder small { font-size: 10px; opacity: .45; margin-top: 5px; letter-spacing: .04em; }
.supercut-media { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; pointer-events: none; }
.supercut-ornament {
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: max-content;
  padding-inline: 5px 11px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 30px;
  background: linear-gradient(160deg, #77778152, #36364070);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 6px 18px #0003, inset 0 1px 2px #ffffff1f;
  transform: translateX(-50%);
  pointer-events: none;
}
#supercut-link { display: block; color: inherit; text-decoration: none; }
#supercut-play-pause {
  display: grid;
  place-items: center;
  position: relative;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: white;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
/* A simple translucent circle on hover. */
@media (hover: hover) {
  #supercut-play-pause:hover, .supercut-volume-hover:hover::before {
    background: #ffffff24;
  }
}
#supercut-play-pause:focus-visible { background: #ffffff24; outline: 1px solid #ffffff80; outline-offset: 2px; }
#supercut-play-pause:active { background: #ffffff36; transform: scale(.93); }
#supercut-play-pause img { pointer-events: none; }
#supercut-play-pause[data-paused="true"] img { width: 12px; transform: translateX(1px); }
.supercut-symbol { display: block; width: 13px; height: 13px; object-fit: contain; opacity: .9; }
.supercut-symbol-volume { width: 17px; }
.supercut-volume-hover {
  display: grid;
  place-items: center;
  position: relative;
  width: 17px;
  height: 25px;
  pointer-events: auto;
  cursor: pointer;
}
.supercut-volume-hover::before {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: transparent;
  transition: background-color 180ms ease;
}
.supercut-volume-hover img { position: relative; pointer-events: none; }
.supercut-ornament .supercut-track { width: 48px; height: 3px; border-radius: 4px; background: #ffffff30; }
.supercut-track::before { content: ""; display: block; width: calc(var(--video-progress, 0) * 100%); height: 100%; border-radius: inherit; background: #fffc; }
/* A larger invisible grip surrounds the thin visible home bar. */
.supercut-handle {
  position: absolute;
  bottom: -28px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}
.supercut-handle::before {
  content: "";
  width: 38px;
  height: 3px;
  border-radius: 4px;
  background: #ffffff65;
  transition: background-color 180ms ease, transform 180ms ease;
}
@media (hover: hover) {
  .supercut-handle:hover::before { background: #ffffffd9; transform: scale(1.1, 1.15); }
}
.supercut-handle:focus-visible::before,
.supercut-handle:active::before { background: #fffffff2; transform: scale(1.1, 1.15); }
.supercut-handle:active { cursor: grabbing; }
.supercut-handle:focus-visible { outline: 1px solid #ffffff80; outline-offset: 2px; border-radius: 8px; }
.supercut-caption { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--footer-ink); opacity: .65; pointer-events: none; }
.supercut-caption span { margin-left: 3px; opacity: .65; }
#supercut-link:focus-visible { outline-offset: 8px; border-radius: 14px; }
#supercut-orbit.is-dragging #supercut-window, #supercut-orbit.is-dragging .supercut-handle { cursor: grabbing; }
#supercut-orbit.is-held .supercut-drift,
#supercut-orbit.is-held .supercut-space,
#supercut-orbit.is-suspended .supercut-drift,
#supercut-orbit.is-suspended .supercut-space,
.supercut-drift:has(:focus-visible),
.supercut-drift:has(:focus-visible) .supercut-space { animation-play-state: paused; }
@keyframes supercut-float {
  from { transform: translate(-6px, 5.25px); }
  to { transform: translate(4.5px, -6.75px); }
}
@keyframes supercut-perspective {
  from { transform: rotateX(3.1875deg) rotateY(-7.65deg); }
  to { transform: rotateX(-1.9125deg) rotateY(4.4625deg); }
}
@media (max-width: 700px) {
  #supercut-orbit { left: 27%; top: 48%; width: 155px; }
  .supercut-ornament { padding-inline: 2px 9px; height: 25px; gap: 4px; }
  .supercut-ornament .supercut-track { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .supercut-drift, .supercut-space { animation: none; }
  #supercut-play-pause, .supercut-volume-hover::before, .supercut-handle::before { transition: none; }
  #supercut-orbit { transform: translate(calc(-50% + var(--drag-x, 0px)), calc(-50% + var(--drag-y, 0px))); }
}

.supercut-caption a { color: inherit; text-decoration: none; pointer-events: auto; }