/* Scoped styles: no framework, global reset, or animation dependency. */
.sg-replay {
  --sg-ink: #0f172a;
  --sg-muted: #475569;
  --sg-line: #cbd5e1;
  --sg-panel: #f8fafc;
  --sg-accent: #047857;
  --sg-selected: #ecfdf5;
  --sg-selected-ink: #065f46;
  margin: 0;
  min-width: 0;
  color: var(--sg-ink);
}
.dark .sg-replay {
  --sg-ink: #f1f5f9;
  --sg-muted: #cbd5e1;
  --sg-line: #334155;
  --sg-panel: #0f172a;
  --sg-accent: #6ee7b7;
  --sg-selected: #064e3b;
  --sg-selected-ink: #d1fae5;
}
.sg-replay [hidden] { display: none !important; }
.sg-replay__picker {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 16px;
}
.sg-replay__group { min-width: 0; }
.sg-replay__legend {
  display: block;
  margin: 0 0 8px;
  color: var(--sg-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sg-replay__choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-replay button,
.sg-replay__link {
  min-height: 44px;
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--sg-panel);
  color: var(--sg-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}
.sg-replay button:hover,
.sg-replay__link:hover { border-color: var(--sg-accent); }
.sg-replay button[aria-pressed="true"] {
  border-color: var(--sg-accent);
  background: var(--sg-selected);
  color: var(--sg-selected-ink);
  box-shadow: inset 0 0 0 1px var(--sg-accent);
}
.sg-replay button:focus-visible,
.sg-replay a:focus-visible,
.sg-replay video:focus-visible {
  outline: 3px solid var(--sg-accent);
  outline-offset: 4px;
}
.sg-replay__frame {
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--sg-line);
  border-radius: 18px;
  background: #1b1b1b;
  box-shadow: 0 20px 50px -30px rgb(15 23 42 / .6);
}
.sg-replay__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 892;
  object-fit: contain;
  background: #1b1b1b;
}
.sg-replay__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}
.sg-replay__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-replay__meta { margin: 0; color: var(--sg-muted); font-size: 13px; line-height: 1.5; }
.sg-replay__caption { margin: 14px 0 0; color: var(--sg-muted); font-size: 14px; line-height: 1.7; }
.sg-replay__caption strong { color: var(--sg-ink); font-weight: 650; }
.sg-replay__notice {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--sg-accent);
  background: var(--sg-panel);
  color: var(--sg-ink);
  font-size: 14px;
  line-height: 1.6;
}
.sg-replay__fallback { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.sg-replay__fallback a { color: var(--sg-accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 520px) {
  .sg-replay__picker { gap: 14px; }
  .sg-replay__group { width: 100%; }
  .sg-replay__choices { gap: 6px; }
  .sg-replay__choices button { flex: 1 1 auto; padding-inline: 10px; font-size: 13px; }
  .sg-replay__frame { border-radius: 12px; }
  .sg-replay__bar { align-items: flex-start; }
  .sg-replay__actions { width: 100%; }
  .sg-replay__actions button,
  .sg-replay__actions a { flex: 1 1 auto; text-align: center; padding-inline: 10px; font-size: 13px; }
}