/* One large example with a visible neighboring preview. */
[data-proc-viewport] {
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
[data-proc-viewport]::-webkit-scrollbar { display: none; }
[data-proc-track] { transition: none !important; }
[data-proc-track]::after { content: ""; flex: 0 0 calc(16% - 18px); }
[data-proc] {
  flex: 0 0 84% !important;
  min-width: 0;
  scroll-snap-align: start;
}
[data-proc] a:focus-visible { outline: 3px solid #fffdf7; outline-offset: -5px; }
[data-proc-prev], [data-proc-next] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px !important;
  height: 56px !important;
  border: 2px solid #fffdf7 !important;
  border-radius: 50% !important;
  background: #f2efe6 !important;
  color: #16292c !important;
  font-size: 0 !important;
  box-shadow: 0 4px 12px #0003;
  transition: background 160ms ease, box-shadow 160ms ease;
}
[data-proc-prev]::before, [data-proc-next]::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
[data-proc-prev]::before { transform: translateX(2px) rotate(-135deg); }
[data-proc-next]::before { transform: translateX(-2px) rotate(45deg); }
[data-proc-prev]:hover, [data-proc-next]:hover {
  background: #fff !important;
  box-shadow: 0 4px 16px #0005;
}
[data-proc-prev]:active, [data-proc-next]:active { background: #c9ded9 !important; }
[data-proc-prev]:focus-visible, [data-proc-next]:focus-visible {
  outline: 3px solid #a9e6dc;
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  [data-proc-prev], [data-proc-next] { transition: none; }
}