Picture-in-Picture Mini Player

<!-- Picture-in-Picture Mini Player — hover/focus the mini window to reveal its controls -->
<div class="nuda-vp2-pip">
  <div class="nuda-vp2-pip__main" aria-hidden="true"></div>
  <div class="nuda-vp2-pip__mini">
    <div class="nuda-vp2-pip__mini-surface" aria-hidden="true"></div>
    <button class="nuda-vp2-pip__mini-play" type="button" aria-label="Play">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5 L19 12 L8 19 Z" /></svg>
    </button>
    <button class="nuda-vp2-pip__mini-close" type="button" aria-label="Close picture-in-picture">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2.4" stroke-linecap="round">
        <path d="M5 5 L19 19 M19 5 L5 19" />
      </svg>
    </button>
  </div>
  <button class="nuda-vp2-pip__toggle" type="button" aria-pressed="true" aria-label="Toggle picture-in-picture">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <rect x="3" y="4" width="18" height="14" rx="2" />
      <rect x="12" y="11" width="7" height="5" rx="1" fill="currentColor" stroke="none" />
    </svg>
  </button>
</div>

.nuda-vp2-pip {
  position: relative;
  width: 300px;
  height: 170px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg,#1c1c22,#0a0a0c);
}

.nuda-vp2-pip__main {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%,rgba(228,255,84,.12),transparent 55%);
}

.nuda-vp2-pip__mini {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 104px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(135deg,#2a2a32,#131316);
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 24px rgba(0,0,0,.55);
  transition: transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease;
}

.nuda-vp2-pip:hover .nuda-vp2-pip__mini {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 32px rgba(0,0,0,.6);
}

.nuda-vp2-pip__mini-surface {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%,rgba(228,255,84,.18),transparent 60%);
}

.nuda-vp2-pip__mini-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.7);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(228,255,84,.92);
  border: none;
  color: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease,transform .2s ease;
}

.nuda-vp2-pip__mini:hover .nuda-vp2-pip__mini-play,.nuda-vp2-pip__mini-play:focus-visible {
  opacity: 1;
  transform: translate(-50%,-50%) scale(1);
}

.nuda-vp2-pip__mini-play svg {
  width: 10px;
  height: 10px;
  margin-left: 1px;
}

.nuda-vp2-pip__mini-close {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: none;
  color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease;
}

.nuda-vp2-pip__mini:hover .nuda-vp2-pip__mini-close,.nuda-vp2-pip__mini-close:focus-visible {
  opacity: 1;
}

.nuda-vp2-pip__mini-close svg {
  width: 8px;
  height: 8px;
}

.nuda-vp2-pip__toggle {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  border: none;
  color: #e4ff54;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}

.nuda-vp2-pip__toggle:hover {
  background: rgba(228,255,84,.2);
}

.nuda-vp2-pip__toggle:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

.nuda-vp2-pip__toggle svg {
  width: 16px;
  height: 16px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-vp2-pip__mini,.nuda-vp2-pip__mini-play,.nuda-vp2-pip__mini-close,.nuda-vp2-pip__toggle {
    transition: none;
  }
  .nuda-vp2-pip:hover .nuda-vp2-pip__mini {
    transform: none;
  }
}