/* Centered, scroll-driven cards. Scaling never crops or filters the source video. */
.ego-release #environment.recon-carousel { margin-top: 0; }
.recon-carousel-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.recon-carousel-hint { margin: 0; color: var(--cin-muted, var(--vi-n92)); font-size: 13px; line-height: 1.5; }
.recon-carousel-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.recon-carousel-count { margin-right: 8px; font-size: 12px; color: var(--cin-muted, var(--vi-n92)); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.recon-carousel-actions button { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--vi-n217); border-radius: 50%; background: var(--vi-n255); color: var(--vi-n23); font: inherit; font-size: 22px; cursor: pointer; }
.recon-carousel-actions button:hover:not(:disabled) { background: var(--vi-n245); border-color: var(--vi-n92); }
.recon-carousel-actions button:disabled { color: var(--vi-n189); cursor: default; opacity: .6; }
.ego-release #environment .recon-carousel-track {
  --recon-card-width: 66%; --recon-overlap: 8%;
  display: flex; align-items: center; gap: 0; margin: 0;
  position: relative; isolation: isolate; width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: 0; scrollbar-width: none; padding: 14px 0 4px;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--vi-n0) 5%, var(--vi-n0) 95%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--vi-n0) 5%, var(--vi-n0) 95%, transparent);
}
.ego-release #environment .recon-carousel-track::before,
.ego-release #environment .recon-carousel-track::after {
  content: ""; flex: 0 0 calc((100% - var(--recon-card-width)) / 2); align-self: stretch;
}
.recon-carousel-track::-webkit-scrollbar { display: none; }
.ego-release #environment .recon-carousel-track > .rec-live {
  flex: 0 0 var(--recon-card-width); width: var(--recon-card-width); min-width: 0;
  margin: 0; scroll-snap-align: center; position: relative;
  transform: scale(var(--recon-scale, .8)); transform-origin: center center;
  opacity: var(--recon-opacity, .76); will-change: transform;
}
.ego-release #environment .recon-carousel-track > .rec-live:not(:last-child) { margin-right: calc(-1 * var(--recon-overlap)); }
.ego-release #environment .recon-carousel-track > .rec-live:nth-child(2) { --recon-scale: 1; --recon-opacity: 1; }
.ego-release #environment .recon-carousel-track video { display: block; aspect-ratio: 1920 / 818; height: auto; width: 100%; object-fit: contain; background: var(--vi-n23); border-radius: 16px; cursor: grab; }
.ego-release #environment .recon-carousel-track figcaption { pointer-events: auto; cursor: grab; user-select: none; font-size: 14px; line-height: 1.55; min-height: 3.1em; margin-top: 12px; padding-inline: 2px; }
.ego-release #environment .recon-carousel-track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.recon-carousel-track.is-dragging :is(video, figcaption) { cursor: grabbing !important; }
.recon-carousel-rail { width: min(360px, 56%); margin: 10px auto 0; }
.recon-carousel-rail input { display: block; width: 100%; height: 22px; margin: 0; padding: 0; accent-color: var(--vi-n92); cursor: ew-resize; background: transparent; }
.recon-carousel-rail input::-webkit-slider-runnable-track { height: 3px; background: var(--vi-n217); border-radius: 5px; }
.recon-carousel-rail input::-webkit-slider-thumb { -webkit-appearance: none; width: clamp(34px, 8vw, 100px); height: 7px; margin-top: -2px; border: 0; border-radius: 5px; background: var(--vi-n92); }
.recon-carousel-rail input { -webkit-appearance: none; appearance: none; }
.recon-carousel-rail input::-moz-range-track { height: 3px; background: var(--vi-n217); border-radius: 5px; }
.recon-carousel-rail input::-moz-range-thumb { width: clamp(34px, 8vw, 100px); height: 7px; border: 0; border-radius: 5px; background: var(--vi-n92); }
.recon-carousel-track:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .ego-release #environment .recon-carousel-track > .rec-live { will-change: auto; }
}
.ego-release #hand-object.hand-evidence { margin-top: 32px; padding-top: 32px; }
.hand-evidence-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.ego-release #hand-object .hand-evidence-copy h3 { font-size: clamp(26px, 2.3vw, 34px); margin: 0 0 12px; }
.ego-release #hand-object .hand-evidence-copy .v11-sub { margin: 0; font-size: 15px; line-height: 1.65; max-width: 62ch; }
.ego-release #hand-object .hand-evidence-measurements .metric-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 0; }
.ego-release #hand-object .hand-evidence-measurements .metric-pair b { font-size: clamp(32px, 3.25vw, 48px); }
.ego-release #hand-object .hand-evidence-measurements .metric-pair span { max-width: 24ch; font-size: 12px; }
.ego-release #hand-object .hand-evidence-measurements .rec-benchmark { margin-top: 14px; padding-top: 0; border: 0; }
.ego-release #hand-object .hand-evidence-measurements .rec-benchmark summary { font-size: 12px; padding-block: 5px; }
.ego-release #hand-object .hand-evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ego-release #hand-object .hand-evidence-grid video { aspect-ratio: 884 / 580; width: 100%; height: auto; object-fit: contain; }
.ego-release #hand-object .hand-evidence-grid figcaption { margin-top: 9px; font-size: 13px; line-height: 1.55; }
.ego-release #hand-object > .rec-expand { margin-top: 22px; }
@media (max-width: 900px) {
  .ego-release #environment .recon-carousel-track { --recon-card-width: 74%; --recon-overlap: 10%; }
  .hand-evidence-head { gap: 24px; grid-template-columns: 1fr; }
  .ego-release #hand-object .hand-evidence-measurements { max-width: 520px; }
}
@media (max-width: 720px) {
  .recon-carousel-toolbar { gap: 12px; margin-bottom: 12px; }
  .recon-carousel-hint { max-width: 22ch; font-size: 12px; }
  .recon-carousel-count { margin-right: 3px; font-size: 11px; }
  .recon-carousel-actions { gap: 6px; }
  .recon-carousel-actions button { width: 40px; height: 40px; }
  .ego-release #environment .recon-carousel-track { --recon-card-width: 86%; --recon-overlap: 14%; padding-top: 6px; }
  .ego-release #environment .recon-carousel-track video { aspect-ratio: 1 / 1; }
  .ego-release #environment .recon-carousel-track figcaption { font-size: 12px; line-height: 1.55; }
  .recon-carousel-rail { width: 60%; margin-top: 6px; }
  .ego-release #hand-object.hand-evidence { margin-top: 26px; padding-top: 28px; }
  .hand-evidence-head { gap: 20px; }
  .ego-release #hand-object .hand-evidence-copy h3 { font-size: 26px; }
  .ego-release #hand-object .hand-evidence-copy .v11-sub { font-size: 14px; }
  .ego-release #hand-object .hand-evidence-measurements .metric-pair { gap: 20px; }
  .ego-release #hand-object .hand-evidence-measurements .metric-pair b { font-size: clamp(32px, 8.6vw, 44px); }
  .ego-release #hand-object .hand-evidence-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 88%;
    overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: thin; scrollbar-color: var(--vi-n153) var(--vi-n217); padding-bottom: 12px; margin-top: 20px;
  }
  .ego-release #hand-object .hand-evidence-grid > figure { scroll-snap-align: start; }
}