/* Reset / base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; color: #fff; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
html, body { scroll-behavior: auto; }

/* Header controls */
#controls {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
#controls .brand { font-weight: 700; letter-spacing: .5px; }
#controls .actions { display: flex; align-items: center; gap: 12px; }
#controls button { background:#111; color:#fff; border:1px solid #333; border-radius:10px; padding:6px 10px; cursor:pointer; }
#controls button[aria-pressed="true"] { background:#1b1b1b; border-color:#555; }
#controls .speed { display:inline-flex; align-items:center; gap:8px; font-size:12px; opacity:.9; }
#controls input[type="range"] { width: 160px; }
#controls .ticks { display:inline-flex; gap:8px; opacity:.7; }
#controls .ticks span { display:inline-block; width:10px; text-align:center; }

/* Conveyor container */
#video-grid { position: relative; width: 100%; }
#rows { width: 100%; contain: content; }
.video-row { display: flex; width: 100%; line-height: 0; gap: 0; }
.video-row > video { display: block; background: #000; }

#sentinel-top, #sentinel-bottom { width: 100%; height: 1px; }

@media (prefers-reduced-motion: reduce) { #controls { position: static; } }


/* SNAKEOIL mobile no-UI tweaks */
@media (max-width: 768px) {
  #controls .actions { display: none !important; } /* hide slider + toggle on mobile */
}
html, body { overflow-x: hidden; }
input[type="range"] { touch-action: pan-y; }