.otobon-web-slider {
    position: relative;
    margin: 1.5rem 0;
}

.otobon-web-slider__viewport {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(78%, 1fr);
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0 0.75rem;
}

.otobon-web-slider__item {
    min-width: 0;
    scroll-snap-align: start;
}

.otobon-web-slider__item > :first-child { margin-top: 0; }
.otobon-web-slider__controls { display: none; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.otobon-web-slider.is-enhanced .otobon-web-slider__controls { display: flex; }
.otobon-web-slider__button { appearance: none; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem .9rem; cursor: pointer; }
.otobon-web-slider__button:disabled { opacity: .4; cursor: default; }
.otobon-web-slider__status { font-size: .875rem; line-height: 1.4; }
.otobon-carousel .otobon-web-slider__viewport,
.otobon-slideshow .otobon-web-slider__viewport { grid-auto-columns: minmax(86%, 1fr); }
.otobon-character-slider .otobon-web-slider__viewport { grid-auto-columns: minmax(72%, 22rem); }
.otobon-scene-gallery .otobon-web-slider__viewport { grid-auto-columns: minmax(82%, 28rem); }
.otobon-panel-slider .otobon-web-slider__viewport { grid-auto-columns: minmax(88%, 36rem); }
.otobon-character-card,.otobon-scene-card,.otobon-panel-card,.otobon-lp-card { height: 100%; box-sizing: border-box; }
.otobon-web-slider img { display: block; width: 100%; height: auto; }

@media (min-width: 782px) {
    .otobon-web-slider__viewport { grid-auto-columns: minmax(42%, 1fr); }
    .otobon-carousel .otobon-web-slider__viewport,
    .otobon-slideshow .otobon-web-slider__viewport,
    .otobon-scene-gallery .otobon-web-slider__viewport { grid-auto-columns: minmax(48%, 1fr); }
    .otobon-character-slider .otobon-web-slider__viewport { grid-auto-columns: minmax(18rem, 28%); }
    .otobon-panel-slider .otobon-web-slider__viewport { grid-auto-columns: minmax(30rem, 62%); }
}

@media (prefers-reduced-motion: reduce) { .otobon-web-slider__viewport { scroll-behavior: auto; } }