/* Chord Lens — the "See it running" section.

   The three shots are not screenshots: they are the extension's own UI rebuilt
   in markup, sitting on a stylised video stage. That keeps them crisp at any
   size, honest about the dark theme, and cheap to correct when the product
   moves. The overlay is the hero's panel (panel.css); what lives here is the
   stage it sits on and the detached sheet window. */

.shots { display: grid; gap: clamp(3rem, 7vw, 5rem); }

.shot { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; margin: 0; }

.shot__body h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: 0.6rem; }
.shot__body p { color: var(--text-dim); }
.shot__body p + p { margin-top: 0.9rem; }

@media (min-width: 900px) {
  .shot { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  /* Alternate which side the stage sits on, so the column does not march.
     The wide track moves with it — the stage always gets the room. */
  .shot:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr); }
  .shot:nth-child(even) > .stage { order: 2; }
}

/* ---- The video stage --------------------------------------------------- */

.stage {
  position: relative;
  container-type: inline-size;
  padding: clamp(0.5rem, 1.4vw, 0.9rem) clamp(0.5rem, 1.4vw, 0.9rem) clamp(3.4rem, 7vw, 5.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(80% 130% at 14% 4%, rgba(64, 132, 255, 0.62), transparent 58%),
    radial-gradient(72% 115% at 86% 10%, rgba(150, 78, 245, 0.58), transparent 60%),
    radial-gradient(65% 95% at 58% 108%, rgba(255, 92, 126, 0.34), transparent 62%),
    linear-gradient(180deg, #1d2a63, #121a46 56%, #0c1130);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, 0.9);
}

/* Stand-in for the stage lighting in the video, so the panel has something to
   sit against without shipping a photograph. */
.stage::before {
  content: "";
  position: absolute;
  inset: 30% -8% -14% -8%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 72%) 24% 55% / 44% 78% no-repeat,
    radial-gradient(closest-side, rgba(120, 205, 255, 0.24), transparent 72%) 76% 82% / 38% 66% no-repeat,
    radial-gradient(closest-side, rgba(255, 150, 90, 0.16), transparent 72%) 52% 96% / 30% 50% no-repeat;
  filter: blur(8px);
  pointer-events: none;
}

.stage__player {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 clamp(0.6rem, 1.6vw, 1rem) clamp(0.55rem, 1.4vw, 0.85rem);
}

.stage__seek {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
}

.stage__seek::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6%;
  border-radius: inherit;
  background: var(--accent-hot);
}

.stage__seek::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--accent-hot);
}

.stage__time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---- The YouTube player's controls ------------------------------------ */

/* The player the extension lives in, drawn the way YouTube draws its own: a
   thin red progress line with what has buffered behind it, then play, next,
   volume and the time on the left, and the extension's own Chords button
   beside captions, settings and the view controls on the right. */
.yt {
  position: absolute;
  inset: auto 0 0;
  padding: 0 12px;
  color: #fff;
}

.yt__progress {
  position: relative;
  height: 3px;
  background: rgb(255 255 255 / 0.2);
}

.yt__buffered, .yt__played { position: absolute; inset: 0 auto 0 0; }
.yt__buffered { width: 86%; background: rgb(255 255 255 / 0.4); }
.yt__played { width: 72%; background: #f03; }

.yt__scrubber {
  position: absolute;
  top: 50%;
  left: 72%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  translate: -50% -50%;
  background: #f03;
}

.yt__controls {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6cqi, 1.1rem);
  height: 44px;
}

.yt__icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
}

.yt__icon--solid { fill: currentColor; stroke-width: 1.5; }

.yt__time {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 0 2px rgb(0 0 0 / 0.5);
}

.yt__spacer { flex: 1; }

/* The extension's button, lit because it is on: a red bar under it, the
   way YouTube marks captions that are switched on. */
.yt__chords {
  display: inline-flex;
  padding-bottom: 3px;
  border-bottom: 2px solid #f03;
}

/* Narrow players drop the view controls first, as YouTube does. */
@container (max-width: 520px) {
  .yt__icon--wide { display: none; }
}

/* ---- The overlay panel ------------------------------------------------- */

/* The panel itself, its bar, diagrams and cards are panel.css; the stage only
   adds this. The strip is still, so the beat clock on the current card is
   drawn part-run rather than animated. CSP blocks style attributes, hence a
   class. */
.ovl { position: relative; }
.ovl .card[data-state="active"] .card__fill { width: 42%; }