.psc-compare,
.psc-compare * { box-sizing: border-box; }

.psc-compare {
  --psc-bg: #0b0f14;
  --psc-panel: #151a21;
  --psc-line: #303844;
  --psc-text: #f7f9fc;
  --psc-muted: #9ca9b8;
  --psc-accent: #f5bf43;
  --psc-live: #ef334c;
  --psc-green: #38d996;
  width: min(100%, 1480px);
  margin: 2rem auto;
  padding: 0;
  color: var(--psc-text);
  background: var(--psc-bg);
  border: 1px solid #202731;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.psc-compare-header { padding: 1rem 1.35rem 1.25rem; text-align: center; background: #0d1117; }
.psc-eyebrow { margin: 0; color: var(--psc-live); font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .16em; }
.psc-brand-logo { display: block; width: min(430px, 78vw); height: auto; margin: .6rem auto .75rem; filter: drop-shadow(0 8px 18px rgba(245,191,67,.12)); }
.psc-compare-intro { margin: 0; color: var(--psc-muted); text-align: center; }
.psc-event-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .65rem 1rem; color: var(--psc-text); background: rgba(245,191,67,.08); border-top: 1px solid rgba(245,191,67,.18); border-bottom: 1px solid rgba(245,191,67,.18); }
.psc-event-bar span, .psc-event-bar em { color: var(--psc-muted); font-size: .72rem; font-style: normal; text-transform: uppercase; letter-spacing: .08em; }
.psc-event-bar strong { color: var(--psc-accent); }

.psc-selectors { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: .75rem; align-items: end; margin: 0 1.2rem .7rem; }
.psc-selectors label { color: var(--psc-muted); font-size: .78rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.psc-selectors select,
.psc-controls select { width: 100%; margin-top: .35rem; color: var(--psc-text); background: var(--psc-panel); border: 1px solid var(--psc-line); border-radius: 11px; padding: .78rem .9rem; font: inherit; }
.psc-icon-button { width: 44px; height: 44px; border-radius: 50%; color: var(--psc-text); background: var(--psc-panel); border: 1px solid var(--psc-line); cursor: pointer; font-size: 1.25rem; }
.psc-icon-button:hover { border-color: var(--psc-accent); color: var(--psc-accent); }
.psc-public-message { color: var(--psc-muted); text-align: center; font-size: .78rem; margin-bottom: .8rem; }

.psc-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3px; margin: 0 1.2rem; background: var(--psc-accent); border-radius: 16px; overflow: hidden; border: 1px solid rgba(245,191,67,.85); }
.psc-video-panel { position: relative; min-width: 0; background: #050709; }
.psc-video-label { position: absolute; z-index: 3; left: 0; right: 0; bottom: 46px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: end; gap: .85rem; min-height: 112px; padding: 2.8rem 1rem .9rem; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(0,0,0,.9)); }
.psc-bib-number { color: var(--psc-accent); font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .8; font-weight: 950; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.psc-person { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.psc-person strong { overflow: hidden; max-width: 100%; color: var(--psc-text); font-size: clamp(.95rem, 1.8vw, 1.35rem); white-space: nowrap; text-overflow: ellipsis; }
.psc-person em { display: inline-block; margin-top: .4rem; padding: .35rem .55rem; border-radius: 6px; color: #090b0f; background: var(--psc-accent); font-size: .68rem; font-style: normal; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.psc-video-shell { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 74vh; background: #020303; overflow: hidden; }
.psc-video-shell iframe { display: block; width: 100%; height: 100%; border: 0; }
.psc-placeholder { display: grid; place-items: center; width: 100%; height: 100%; min-height: 360px; color: #66717f; background: linear-gradient(135deg, #090c10, #141a20); }
.psc-nudge { position: relative; z-index: 4; display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 46px; background: #11161c; color: var(--psc-muted); font-size: .82rem; }
.psc-nudge button { padding: .35rem .65rem; color: var(--psc-text); background: #202832; border: 1px solid #303b47; border-radius: 7px; cursor: pointer; }
.psc-nudge span { min-width: 54px; text-align: center; font-variant-numeric: tabular-nums; }

.psc-controls { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 0; padding: 1.2rem 1rem .8rem; background: #0d1117; }
.psc-controls button { min-height: 45px; padding: .7rem 1rem; border-radius: 11px; border: 1px solid var(--psc-line); color: var(--psc-text); background: var(--psc-panel); font: inherit; font-weight: 750; cursor: pointer; }
.psc-controls .psc-primary-control { min-width: 180px; color: #0a0c10; background: var(--psc-accent); border-color: var(--psc-accent); box-shadow: 0 8px 24px rgba(245,191,67,.18); text-transform: uppercase; letter-spacing: .03em; }
.psc-controls label { display: flex; align-items: center; gap: .5rem; color: var(--psc-muted); font-size: .82rem; }
.psc-controls label select { width: auto; margin: 0; padding: .6rem; }
.psc-timeline-row { display: grid; grid-template-columns: 66px 1fr 66px; align-items: center; gap: .7rem; margin: 0 auto; padding: .35rem 1.2rem 0; max-width: 1024px; color: var(--psc-muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.psc-timeline-row span:last-child { text-align: right; }
.psc-timeline-row input { width: 100%; accent-color: var(--psc-accent); }
.psc-sync-badge { width: max-content; margin: .7rem auto 1rem; color: var(--psc-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.psc-sync-badge span { display: inline-block; width: 7px; height: 7px; margin-right: .35rem; border-radius: 50%; background: var(--psc-green); box-shadow: 0 0 12px var(--psc-green); }
.psc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (min-width: 900px) {
  .psc-video-shell { aspect-ratio: 4 / 3; }
}

@media (max-width: 700px) {
  .psc-compare { border-radius: 16px; }
  .psc-compare-header { padding: .8rem; }
  .psc-brand-logo { width: min(310px, 88vw); }
  .psc-compare-intro { margin: .8rem; font-size: .86rem; }
  .psc-event-bar { flex-wrap: wrap; gap: .3rem .5rem; text-align: center; }
  .psc-event-bar span { width: 100%; }
  .psc-selectors { grid-template-columns: 1fr; margin-inline: .8rem; }
  .psc-icon-button { margin: -.2rem auto; transform: rotate(90deg); }
  .psc-video-grid { grid-template-columns: 1fr; gap: 1px; margin-inline: .8rem; }
  .psc-video-shell { aspect-ratio: 9 / 16; max-height: 68vh; }
  .psc-video-label { bottom: 46px; }
  .psc-controls { position: sticky; bottom: .5rem; z-index: 5; padding: .6rem; border: 1px solid var(--psc-line); border-radius: 14px; background: rgba(11,15,20,.92); backdrop-filter: blur(14px); }
  .psc-controls .psc-primary-control { min-width: 128px; }
}