:root{
  --qdx-size: 150px;
  --qdx-cx: 50%;
  --qdx-cy: 50%;
}

/* Transparent overlay */
.qdx-overlay{ position:absolute; inset:0; pointer-events:auto; background:transparent !important; }

/* Glowing play button */
.qdx-overlay .qdx-play{
  position:absolute; left:var(--qdx-cx); top:var(--qdx-cy);
  transform: translate(-50%,-50%);
  width:var(--qdx-size); height:var(--qdx-size);
  cursor:pointer; border:0; padding:0; background:transparent;
}
.qdx-play-svg{ width:100%; height:100%; }
.qdx-play-svg .ring{ fill:none; stroke:rgba(255,255,255,.92); stroke-width:3.5; filter:drop-shadow(0 0 16px rgba(255,255,255,1)); animation:qdx-pulse 2.2s ease-in-out infinite; }
.qdx-play-svg .disc{ fill:rgba(255,255,255,.18); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); stroke:rgba(255,255,255,.75); stroke-width:1.5; filter:drop-shadow(0 8px 24px rgba(0,0,0,.18)); }
.qdx-play-svg .icon{ fill:#fff; filter:drop-shadow(0 0 12px rgba(255,255,255,.95)); }
@keyframes qdx-pulse{ 0%{stroke-width:3.5;opacity:.96;transform:scale(1)} 50%{stroke-width:6;opacity:1;transform:scale(1.07)} 100%{stroke-width:3.5;opacity:.96;transform:scale(1)} }

/* Modal */
.qdx-modal[hidden]{ display:none; }
.qdx-modal{ position:fixed; inset:0; z-index:99999; }
.qdx-modal__backdrop{ position:absolute; inset:0; background:rgba(10,12,20,.68); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.qdx-modal__dialog{ position:relative; margin:5vh auto; width:min(100%,960px); aspect-ratio:16/9; background:#000; border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.45); overflow:hidden; isolation:isolate; }
.qdx-modal__frame, .qdx-modal__frame iframe{ width:100%; height:100%; display:block; border:0; }
.qdx-modal__close{ position:absolute; top:8px; right:10px; width:40px; height:40px; border-radius:999px; font-size:28px; line-height:1; border:0; cursor:pointer; background:rgba(255,255,255,.95); color:#0b1324; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.qdx-modal__close:hover{ background:#fff; }