/* Project page: one centred column on a white background. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: #1a1a1a;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

/* The column is at most 1100 px wide. The side gutter is 16 px. */
.page,
.footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Title, authors, and link buttons. */
.hero {
  padding: 48px 0 28px;
  text-align: center;
}

.title {
  margin: 0 0 8px;
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
}

.subtitle {
  margin: 0 0 18px;
  color: #333;
  font-size: clamp(1.1rem, 3.2vw, 1.4rem);
  line-height: 1.35;
}

/* Seven authors in two lines (four, then three) on wide screens, as in the paper. */
.authors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 22px;
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.authors a {
  color: #1a5fb4;
  text-decoration: none;
}

.authors a:hover {
  text-decoration: underline;
}

.author-break {
  flex-basis: 100%;
  height: 0;
}

.affiliations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 18px;
  margin: 0 0 22px;
  color: #555;
  font-size: 0.95rem;
}

.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* The code release date, centred under the Code button (George 2026-11-09). The padding and the row gap of
   .links leave room for it, also when the buttons wrap on phones. The column gap keeps it apart from the
   supplement date under the Supplement button (George 2026-11-10). */
.links {
  row-gap: 34px;
  column-gap: 22px;
  padding-bottom: 24px;
}

.code-slot {
  position: relative;
  display: inline-block;
}

.code-eta {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
  white-space: nowrap;
  color: #5b636b;
  font-size: 0.85rem;
}

.link-button {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 999px;
  background: #222;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

/* The Viewer drop-down: a link button that opens a menu of viewer scenes. */
.link-dropdown {
  position: relative;
  display: inline-block;
}

.link-dropdown > summary {
  cursor: pointer;
  list-style: none;
}

.link-dropdown > summary::-webkit-details-marker {
  display: none;
}

.link-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  min-width: 150px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
}

.link-menu a {
  padding: 7px 14px;
  border-radius: 8px;
  color: #222;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.link-menu a:hover,
.link-menu a:focus {
  background: #f0f0f0;
}

/* A placeholder link has no URL yet. It looks disabled and ignores clicks. */
.link-button.is-disabled {
  background: #e3e3e3;
  color: #8a8a8a;
  pointer-events: none;
}

/* Teaser. */
.teaser {
  margin: 0;
}

.teaser img,
.teaser video {
  display: block;
  width: 100%;
  height: auto;
}

.teaser-caption {
  margin-top: 10px;
  color: #444;
  font-size: 0.95rem;
}

/* The caption takes no space while it is empty. */
.teaser-caption:empty {
  display: none;
}

/* Sections. */
.section {
  padding-top: 44px;
}

.section h2 {
  margin: 0 0 12px;
  font-size: 1.6rem;
  line-height: 1.25;
}

.abstract {
  margin: 0;
  text-align: justify;
  hyphens: auto;
}

/* Justified text gets wide word gaps in a narrow column. Left-aligned text needs no hyphenation. */
@media (max-width: 700px) {
  .abstract {
    text-align: left;
    hyphens: manual;
  }
}

.section-intro {
  margin: 0 0 16px;
}

/* Scene tabs on the left, the Resync button on the right. */
.scene-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
}

.scene-tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.resync-button {
  flex: none;
  padding: 4px 12px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.resync-button:hover {
  border-color: #777;
}

.resync-button:focus-visible {
  outline: 2px solid #2f6fdd;
  outline-offset: 2px;
}

.scene-tab {
  padding: 4px 14px;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.scene-tab:hover {
  border-color: #777;
}

.scene-tab[aria-pressed="true"] {
  border-color: #222;
  background: #222;
  color: #fff;
}

.scene-tab:focus-visible {
  outline: 2px solid #2f6fdd;
  outline-offset: 2px;
}

/* Compare players. Two or three players stand side by side in equal columns. On phones they stack. */
.player-pair,
.player-triple {
  display: grid;
  gap: 16px;
}

.player-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.player-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .player-pair,
  .player-triple {
    grid-template-columns: minmax(0, 1fr);
  }
}

.player {
  margin: 0;
}

.player-title {
  margin: 0 0 6px;
  font-weight: 600;
  text-align: center;
}

/* compare.js sets the aspect ratio of the stage from the video. 16 / 9 applies until then. */
.player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #f0f0f0;
}

.player-canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: ew-resize;
  /* A horizontal drag moves the split. A vertical drag scrolls the page. */
  touch-action: pan-y pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
}

/* A single-stream player has no split. Its canvas keeps the default cursor and the default touch gestures. */
.player-single-stream .player-canvas {
  cursor: auto;
  touch-action: auto;
}

/* The video is a visible standard player under the canvas. It fills the stage.
   Safari plays a video only when it is visible, so do not hide it or make it very small.
   Before the first canvas frame, the video shows its poster: the render half of a two-half video. */
.player-video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
}

.player-single-stream .player-video {
  object-fit: contain;
  object-position: center;
}

/* The play button shows when the browser blocks autoplay, for example in Low Power Mode. */
.player-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.player-play::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 25px;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff;
}

.player-play[hidden] {
  display: none;
}

/* Without JavaScript, the page shows standard videos with the browser controls. */
.noscript-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 12px;
  border-radius: 4px;
  background: #f0f0f0;
}

.player-label {
  position: absolute;
  top: 8px;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
}

.player-label-left {
  left: 8px;
}

.player-label-right {
  right: 8px;
}

/* A small note at the bottom of the stage. The poster stays visible above it. */
.player-loading {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.5;
  pointer-events: none;
}

.player-loading[hidden] {
  display: none;
}

/* BibTeX. */
.bibtex {
  position: relative;
}

.bibtex pre {
  margin: 0;
  padding: 16px 84px 16px 16px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 12px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  color: #222;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.copy-button:hover {
  border-color: #777;
}

/* Footer. */
.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  color: #777;
  font-size: 0.9rem;
}

/* The drawn title replaces the text title; the text stays for screen readers. */
.title-art { margin: 0 auto 4px; }
.title-media { display: block; width: min(100%, 780px); height: auto; margin: 0 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }