/* One comparison with a compact selector; real/simulation share one video clock. */
#prediction-results { --unseen-background: color-mix(in srgb, var(--paper-charcoal) 95.3%, black); }
#prediction-results #results-title { max-width: none; }
#prediction-results .unseen-heading-logo { display: inline-block; width: 2.3em; height: 1.15em; object-fit: contain; vertical-align: -.22em; }
#prediction-results .unseen-layout { --unseen-selector-width: 188px; --unseen-column-gap: clamp(24px, 3vw, 44px); container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) var(--unseen-selector-width); align-items: start; column-gap: var(--unseen-column-gap); row-gap: 12px; }
#prediction-results .unseen-main { grid-column: 1; grid-row: 2; min-width: 0; }
#prediction-results .unseen-toolbar { grid-column: 1; grid-row: 1; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
#prediction-results .unseen-toolbar .lab-hover-hint { padding: 0; }
#prediction-results .unseen-pair { position: relative; width: 100%; }
#prediction-results .unseen-view { min-width: 0; margin: 0; }
#prediction-results .unseen-stage { position: relative; aspect-ratio: 10 / 7; overflow: hidden; isolation: isolate; touch-action: pan-y; --unseen-x: 50%; --unseen-y: 50%; --unseen-radius: 115px; }
#prediction-results .unseen-stage:focus-visible { outline: 1px solid var(--lab-accent); outline-offset: 5px; }
#prediction-results .unseen-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#prediction-results .unseen-real-poster { z-index: 0; }
#prediction-results .unseen-prediction-poster { z-index: 1; clip-path: circle(0 at var(--unseen-x) var(--unseen-y)); }
#prediction-results .is-hovering:not(.is-simulation) .unseen-prediction-poster { clip-path: circle(var(--unseen-radius) at var(--unseen-x) var(--unseen-y)); }
#prediction-results .is-key-revealing:not(.is-simulation) .unseen-prediction-poster { clip-path: none; }
#prediction-results .is-simulation .unseen-prediction-poster { z-index: 0; clip-path: none; }
#prediction-results .is-simulation .unseen-real-poster { z-index: 1; clip-path: circle(0 at var(--unseen-x) var(--unseen-y)); }
#prediction-results .is-simulation.is-hovering .unseen-real-poster { clip-path: circle(var(--unseen-radius) at var(--unseen-x) var(--unseen-y)); }
#prediction-results .is-simulation.is-key-revealing .unseen-real-poster { clip-path: none; }
#prediction-results .unseen-stage::after { position: absolute; z-index: 3; inset: 0; pointer-events: none; content: ''; background: linear-gradient(90deg, var(--unseen-background), transparent 6%, transparent 94%, var(--unseen-background)), linear-gradient(0deg, var(--unseen-background), transparent 8%, transparent 92%, var(--unseen-background)); }
#prediction-results .unseen-composite { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 120ms ease; }
#prediction-results .has-frames .unseen-composite { opacity: 1; }
#prediction-results .has-frames .unseen-poster { visibility: hidden; }
#prediction-results .unseen-lens { position: absolute; z-index: 4; left: 0; top: 0; width: 230px; height: 230px; border: 1px solid #eee9dc70; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity 100ms ease; will-change: transform; }
#prediction-results .is-hovering .unseen-lens { opacity: 1; }
#prediction-results .is-key-revealing .unseen-lens { opacity: 0; }
#prediction-results .unseen-source { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#prediction-results .unseen-readout { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; }
#prediction-results .unseen-shot-title { margin: 0; font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: -.02em; }
#prediction-results .unseen-speed { margin: 5px 0 0; color: var(--lab-muted); font-size: 14px; line-height: 1.5; }
#prediction-results .unseen-errors { display: flex; gap: clamp(20px, 3vw, 44px); margin: 0; }
#prediction-results .unseen-errors div { display: flex; flex-direction: column; gap: 4px; }
#prediction-results .unseen-errors dt { font-size: 14px; line-height: 1.5; color: var(--lab-muted); }
#prediction-results .unseen-errors dd { margin: 0; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
#prediction-results .unseen-errors small { margin-left: 5px; font-size: 14px; color: var(--lab-muted); }
/* The top rail is 74 px below the top of the shared 960 px-wide camera crop. */
#prediction-results .unseen-selector { grid-column: 2; grid-row: 2; min-width: 0; padding-top: calc((100cqw - var(--unseen-selector-width) - var(--unseen-column-gap)) * 74 / 960); }
#prediction-results .unseen-selector > h3 { margin: 0 0 18px; color: var(--lab-muted); font-size: 15px; font-weight: 400; line-height: 1.5; }
#prediction-results .unseen-shots { display: grid; grid-template-columns: minmax(0, 1fr); }
#prediction-results .unseen-shot { display: grid; grid-template-columns: 25px 10px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 9px 7px; border: 0; border-bottom: 1px solid var(--lab-line); background: transparent; color: var(--lab-muted); font: inherit; font-size: 15px; line-height: 1.5; text-align: left; transition: color 150ms ease, border-color 150ms ease; }
#prediction-results .unseen-shot-number { color: var(--lab-faint); font-size: 14px; font-variant-numeric: tabular-nums; }
#prediction-results .unseen-shot-ball { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #ffffff35; background: var(--shot-ball); }
#prediction-results .unseen-shot:hover, #prediction-results .unseen-shot:focus-visible { color: var(--lab-ink); }
#prediction-results .unseen-shot[aria-pressed='true'] { color: var(--lab-ink); border-bottom-color: var(--shot-ball); }
#prediction-results .unseen-shot[aria-pressed='true'] .unseen-shot-number { color: var(--shot-ball); }
#prediction-results .unseen-shot[data-unseen-ball='black'][aria-pressed='true'] .unseen-shot-number { color: var(--lab-ink); }
#prediction-results .unseen-shot[aria-pressed='true'] > span:last-child { font-weight: 500; }
#prediction-results .unseen-notes { margin-top: 22px; color: var(--lab-muted); font-size: 15px; line-height: 1.65; }
#prediction-results .unseen-notes p { margin: 0; max-width: 78ch; }
#prediction-results .unseen-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1100px) {
  #prediction-results .unseen-layout { --unseen-selector-width: 164px; --unseen-column-gap: 24px; }
  #prediction-results .unseen-toolbar { flex-wrap: wrap; gap: 4px 16px; }
  #prediction-results .unseen-readout { align-items: flex-start; flex-wrap: wrap; gap: 14px 24px; }
}
@media (max-width: 900px) {
  #prediction-results .unseen-layout { grid-template-columns: minmax(0, 1fr); }
  #prediction-results .unseen-selector { grid-column: 1; grid-row: 3; margin-top: 14px; padding-top: 0; }
  #prediction-results .unseen-selector > h3 { margin-bottom: 9px; }
  #prediction-results .unseen-shots { display: flex; gap: 8px; overflow-x: auto; padding: 5px 3px 10px; scrollbar-width: thin; scrollbar-color: var(--lab-line) transparent; }
  #prediction-results .unseen-shot { flex: 0 0 auto; grid-template-columns: 22px 9px auto; gap: 8px; padding-inline: 9px; }
}
@media (max-width: 600px) {
  #prediction-results .unseen-toolbar { flex-wrap: nowrap; }
  #prediction-results .unseen-toolbar .lab-hover-hint { display: none; }
  #prediction-results .unseen-readout { flex-direction: column; gap: 15px; }
  #prediction-results .unseen-errors { width: 100%; gap: 30px; }
  #prediction-results .unseen-errors div { flex: 1; }
  #prediction-results .unseen-notes { font-size: 15px; }
}
@media (hover: none) { #prediction-results .unseen-toolbar .lab-hover-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  #prediction-results .unseen-composite, #prediction-results .unseen-shot, #prediction-results .unseen-lens { transition: none; }
}