/* ---- layout ---- */
.examples-list { width:100%; max-width:920px; margin:0 auto; }

/* example row */
.example-row {
  display:flex;
  gap:1rem;
  align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
  padding: 12px;
  border-radius: 10px;
  margin-bottom:30px;
}

/* left controls column */
.example-left {
  width: 180px;
  min-width: 140px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding-left:6px;
}

/* title and play button */
.example-title {
  font-weight:700;
  font-size:1.05rem;
  color:#e6eefc;
}
.play-btn {
  --size:40px;
  width: var(--size);
  height: var(--size);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  color: white;
  border: 1px solid rgba(255,255,255,0.06);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight:700;
  font-size:16px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.play-btn.playing {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79,70,229,0.25), inset 0 -6px 24px rgba(147,51,234,0.05);
}

/* right media column */
.example-right {
  width:100%;
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* image container with overlayed cursor line */
.image-wrap {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius:8px;
  overflow:hidden;
  background:#0b1116;
  align-self:flex-start;
  box-shadow: 0 6px 20px rgba(3,6,23,0.6);
}
.image-wrap img {
  width:100%;
  height:100px;
  display:block;
}

/* green cursor line on the image */
.cursor-line {
  position:absolute;
  top:0;
  bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(94,255,129,0.9), rgba(7,195,73,0.95));
  left:0%;
  transform:translateX(-50%);
  pointer-events:none;
  mix-blend-mode:screen;
}

/* timeline area */
.timeline-wrap {
  width: 100%;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* range (timeline) styling - white thumb */
.scrub {
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:10px;
  background: rgba(255,255,255,0.04);
  border-radius:8px;
  position:relative;
  outline:none;
}

/* track */
.scrub::-webkit-slider-runnable-track {
  height: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.03) 100%);
  border-radius:8px;
}
.scrub::-moz-range-track {
  height:10px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-radius:8px;
}

/* thumb (white) */
.scrub::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border: 2px solid rgba(0,0,0,0.45);
  margin-top: -2px; /* centers thumb on track height */
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: grab;
}
.scrub:active::-webkit-slider-thumb { cursor:grabbing; }

.scrub::-moz-range-thumb {
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border:2px solid rgba(0,0,0,0.45);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  cursor: grab;
}

/* time labels under the scrub */
.time-labels {
  display:flex;
  justify-content:space-between;
  font-size: .85rem;
  color: var(--muted);
  width:100%;
}
.time-current, .time-total { font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; }

/* responsive: collapse left column on narrow screens */
@media (max-width:720px) {
  .example-row { flex-direction:column; align-items:flex-start; }
  .example-left { flex-direction:row; gap:12px; width:100%; align-items:center; }
  .image-wrap, .timeline-wrap { width:100%; }
}