.lisk-slider { position: relative; width: 100%; }
.lisk-slider [hidden] { display: none !important; }
.lisk-slider__frame { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.lisk-slider__slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lisk-slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lisk-slider__controls { position: absolute; z-index: 2; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 2px; }
.lisk-slider__controls button {
    display: grid; place-items: center; width: clamp(28px, 8vw, 44px); min-height: 44px; padding: 0;
    border: 0; background: transparent; color: rgb(255 255 255 / 85%); cursor: pointer; font: 30px/1 sans-serif;
}
.lisk-slider__dot span { width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; }
.lisk-slider__dot[aria-pressed="true"] span { background: currentColor; }
.lisk-slider :focus-visible { outline: 2px solid #b75400; outline-offset: 2px; }
.lisk-slider__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lisk-slider__slide:first-child img { transform: scale(1.006); }
.lisk-slider [data-playback] {
    position: absolute; z-index: 1; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
    display: grid; place-items: center; width: 80px; height: 80px; padding: 0;
    box-sizing: border-box; border: 4px solid rgb(255 255 255 / 85%); border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
}
.lisk-slider [data-playback] span {
    box-sizing: border-box; display: block; width: 32.5px; height: 40px; opacity: .85;
    border-inline: 10px solid currentColor;
}
.lisk-slider [data-playback][data-paused="true"] span {
    border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(5px) scale(1.15);
}

@media (hover: hover) and (pointer: fine) {
    .lisk-slider:not(:hover):not(:has(:focus-visible)) :is(.lisk-slider__controls, [data-playback]) {
        opacity: 0;
        pointer-events: none;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .lisk-slider :is(.lisk-slider__controls, [data-playback]) {
        transition: opacity 0.5s ease;
    }
}
.lisk-slider__slide img[src$="/lisa-gray.webp"] { filter: saturate(0.95); }