.crossfader-wrapper{max-width:100%}
.crossfader-video{position:relative;width:100%;background:#000;overflow:hidden}
.crossfader-video-layer{width:100%;height:100%;object-fit:contain;background:#000}
.crossfader-video-finished{position:relative;display:block;filter:saturate(1) contrast(1) brightness(1)}
.crossfader-video-raw{position:absolute;inset:0;filter:saturate(0.35) contrast(0.95) brightness(0.98);clip-path:inset(0 0 0 88%)}/* default 12% */
/* Layer order (bottom→top): video → finished-label(2) → handle(4) → raw-label(6) → controls(8) */
.crossfader-label{position:absolute;top:var(--label-inset,8px);z-index:2;font-family:var(--label-font);font-size:var(--label-size);font-weight:var(--label-weight);color:var(--label-color);background:var(--label-bg);border-radius:var(--label-radius);padding:var(--label-padding);opacity:.95;pointer-events:none;user-select:none;transition:opacity .25s}
.crossfader-label-finished{left:var(--label-inset,8px)}
.crossfader-label-raw{right:var(--label-inset,8px);z-index:6}
.crossfader-handle{position:absolute;top:0;bottom:0;left:12%;width:0;cursor:ew-resize;outline:none;z-index:4}.crossfader-handle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.crossfader-hairline{position:absolute;top:0;bottom:0;left:calc(var(--cf-hairline-width,3px)/-2);width:var(--cf-hairline-width,3px);opacity:var(--cf-hairline-opacity,1);background:var(--cf-hairline-color,#fff)}
.crossfader-hairline.has-gradient{background:var(--cf-hairline-gradient)}
.crossfader-grip{position:absolute;top:50%;left:calc(var(--cf-grip-size,32px)/-2);transform:translateY(-50%);width:var(--cf-grip-size,32px);height:var(--cf-grip-size,32px);border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.5)}
.crossfader-grip:after{content:'';display:block;width:12px;height:12px;border-left:2px solid #fff;border-right:2px solid #fff}
/* Controls overlay — hidden by default, revealed on wrapper hover */
.crossfader-controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;z-index:8;pointer-events:none;opacity:0;transition:opacity .2s}
.crossfader-wrapper:hover .crossfader-controls{opacity:1}
.crossfader-btn-play,.crossfader-btn-stop{pointer-events:auto;width:56px;height:56px;border-radius:50%;border:none;background:var(--label-bg,rgba(0,0,0,.55));color:var(--label-color,#fff);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;backdrop-filter:blur(3px)}
.crossfader-btn-play svg,.crossfader-btn-stop svg{width:42%;height:42%;display:block}
.crossfader-btn-play:hover,.crossfader-btn-stop:hover{transform:scale(1.08)}.crossfader-btn-play:focus-visible,.crossfader-btn-stop:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Touch: tap reveals controls for 3s */
.crossfader-controls.touch-visible{opacity:1}
/* Stop button hidden until playing */
.crossfader-btn-stop{display:none}
.crossfader-controls.is-playing .crossfader-btn-play{display:none}
.crossfader-controls.is-playing .crossfader-btn-stop{display:flex}