/* ==========================================================================
 * SQuad project page styles
 * Extracted from the inline <style> block that used to live in index.html.
 * Load order: after the Bulma/FontAwesome vendor sheets, last of all.
 * ========================================================================== */

/* Title block. Bulma gives .hero-body a flat 3rem of vertical padding, which
   leaves a large dead gap between the Arxiv button and the gallery heading
   below. Tighten the bottom while keeping the top airy. Scoped to the title
   hero so the Method section's .hero.is-small spacing is left alone. */
.title-hero > .hero-body {
  padding-bottom: 1rem;
}

/* Callout below the Abstract: sets expectations that the page is a visual
   companion to the paper, not a replacement. Left-aligned and boxed with a
   teal accent so it reads as a note, distinct from the justified abstract
   prose above it. */
.sq-page-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 880px;
  margin: 1.75rem auto 0;
  padding: 16px 22px;
  border-left: 4px solid #157e7e;
  border-radius: 10px;
  background: linear-gradient(135deg, #eafbfa, #f8fffe 55%, #ffffff);
  box-shadow: 0 8px 24px rgba(21, 126, 126, 0.12);
  text-align: left;
}

.sq-page-note i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #157e7e;
  font-size: 1.2rem;
}

.sq-page-note p {
  margin: 0;
  color: #23282f;
  font-size: 0.96rem;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .sq-page-note {
    gap: 10px;
    padding: 14px 16px;
  }
}

.publication-links {
  margin-top: 1.25rem;
}

/* Author names and the footer's template-credit links: recolor from Bulma's
   default link blue to the page's teal accent, so every clickable link
   reads as part of one palette. Normal body/label text is untouched.
   !important is needed on the author-block rule because the template base
   (files/index.css) sets .publication-authors a's color with !important
   itself -- higher specificity alone doesn't beat that. */
.publication-authors .author-block a,
footer.footer .content a {
  color: #29baba !important;
}

.publication-authors .author-block a:hover,
.publication-authors .author-block a:focus,
footer.footer .content a:hover,
footer.footer .content a:focus {
  color: #157e7e !important;
}

.sample-video-section {
  padding: 0.5rem 1.5rem 3rem;
}

.sample-video-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 1.5rem;
}

.sample-video-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 90, 170, 0.16);
  border-radius: 18px;
  background: linear-gradient(145deg, #eef5ff, #f8fbff 48%, #ffffff);
  box-shadow: 0 12px 30px rgba(18, 54, 105, 0.12);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.sample-video-card:hover,
.sample-video-card:focus {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(34, 90, 170, 0.34);
  box-shadow: 0 18px 42px rgba(18, 54, 105, 0.20);
  outline: none;
}

.sample-video-card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #07101f;
}

.sample-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(5, 16, 32, 0.66));
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}

.sample-video-card::after {
  content: "Compare sample";
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: #fff;
  background: rgba(8, 21, 45, 0.72);
  backdrop-filter: blur(6px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.sample-video-card:hover::before,
.sample-video-card:focus::before,
.sample-video-card:hover::after,
.sample-video-card:focus::after {
  opacity: 1;
}

.sample-video-card:hover::after,
.sample-video-card:focus::after {
  transform: translateY(0);
}

.sq-video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px 28px;
  background:
    radial-gradient(circle at 20% 10%, rgba(93, 166, 255, 0.22), transparent 32%),
    radial-gradient(circle at 80% 0%, rgba(122, 234, 204, 0.16), transparent 28%),
    rgba(4, 10, 22, 0.88);
  backdrop-filter: blur(10px);
}

.sq-video-lightbox.is-active {
  display: flex;
}

.sq-lightbox-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(96vw, 1480px);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background: linear-gradient(160deg, #0a1224 0%, #101d35 52%, #08101d 100%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}

.sq-lightbox-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 18px 10px;
  color: #fff;
}

.sq-compare-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 18px 14px;
}

.sq-video-pane {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #020713;
}

.sq-video-pane figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 6px 11px;
  border-radius: 999px;
  color: #eaf6ff;
  background: rgba(7, 18, 38, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  font-size: 0.82rem;
  font-weight: 800;
}

.sq-video-lightbox video {
  display: block;
  width: 100%;
  aspect-ratio: 832 / 480;
  max-height: 62vh;
  object-fit: contain;
  background: #000;
}

.sq-prompt-card {
  margin: 0 18px 18px;
  padding: 12px 16px;
  overflow: auto;
  max-height: 14vh;
  border: 1px solid rgba(138, 215, 255, 0.20);
  border-radius: 18px;
  color: #dbeafe;
  background: rgba(255, 255, 255, 0.07);
}

.sq-prompt-title {
  margin: 0 0 7px;
  color: #8ad7ff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sq-prompt-text {
  margin: 0;
  color: #edf6ff;
  font-size: 0.96rem;
  line-height: 1.55;
  text-align: left;
}

.sq-lightbox-close {
  flex: 0 0 auto;
  min-width: 86px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.sq-lightbox-close:hover,
.sq-lightbox-close:focus {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  outline: none;
}

body.sq-lightbox-open {
  overflow: hidden;
}

/* ==========================================================================
 * Method-section side-by-side comparison widget (the "fluffy monster" clip).
 * Two synced <video>s, Wan 2.2 5B beside SQuad, sitting between the quality
 * panel and the FLOPs/latency panels. Width tracks the infographic PNGs.
 * ========================================================================== */

/* Width tracks the visible panel cards in the infographic PNGs, not the PNG
   edge: those canvases carry ~40px of side padding (out of 1480), so at a
   1040px image the card spans (1480-80)/1480 * 1040 ~= 984px. Match that so
   the widget's panes line up with the panels above and below. */
.sq-method-compare {
  max-width: 984px;
  margin: 1.75rem auto 0;
}

.sq-method-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.sq-method-pane {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(34, 90, 170, 0.16);
  border-radius: 16px;
  background: #07101f;
  box-shadow: 0 12px 30px rgba(18, 54, 105, 0.12);
}

.sq-method-pane figcaption {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  color: #eaf6ff;
  background: rgba(7, 18, 38, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  font-size: 0.8rem;
  font-weight: 800;
}

.sq-method-pane video {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 704;
  object-fit: cover;
  background: #07101f;
}

@media (max-width: 560px) {
  .sq-method-compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
 * Window-characterization ablation card.
 * The seven swept windows share one stage: a <video> per window, stacked and
 * cross-faded so switching does not reflow the section or flash a white gap.
 * ========================================================================== */

.sq-ablation-card {
  margin-top: 1.75rem;
  padding: 18px 18px 22px;
  border: 1px solid rgba(34, 90, 170, 0.16);
  border-radius: 22px;
  background: linear-gradient(150deg, #f4f9ff, #fbfdff 55%, #ffffff);
  box-shadow: 0 14px 36px rgba(18, 54, 105, 0.10);
}

/* The grids are 1920x880 (a 6x5 tiling of 704p tiles). Pin the aspect ratio so
   the stacked absolute videos have a box to fill, and so the card keeps its
   height while a source is still loading. */
.sq-ablation-videos {
  position: relative;
  aspect-ratio: 1920 / 880;
  overflow: hidden;
  border-radius: 14px;
  background: #07101f;
}

.sq-ablation-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.sq-ablation-video.is-active {
  opacity: 1;
}

/* Fullscreen affordance, parked over the top-right of the stage. Sits above the
   stacked videos, which are pointer-events: none, so it is the only hit target
   inside the stage. Kept faint until the card is hovered so it does not compete
   with the grid, but always fully opaque once focused for keyboard users. */
.sq-ablation-fs {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  color: #eaf6ff;
  background: rgba(8, 21, 45, 0.62);
  backdrop-filter: blur(6px);
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.sq-ablation-card:hover .sq-ablation-fs {
  opacity: 1;
}

.sq-ablation-fs:hover,
.sq-ablation-fs:focus-visible {
  opacity: 1;
  background: rgba(8, 21, 45, 0.82);
  transform: translateY(-1px);
  outline: none;
}

.sq-ablation-fs:focus-visible {
  box-shadow: 0 0 0 3px rgba(122, 180, 255, 0.55);
}

/* Fullscreen presentation. Keyed off a JS-toggled class rather than :fullscreen
   so one rule covers the unprefixed and -webkit- APIs. The card becomes the
   whole viewport: drop the light card chrome, and cap the stage so the controls
   below always stay on screen. The stage keeps its aspect-ratio, and the videos
   are object-fit: contain, so a shorter cap just letterboxes them. */
.sq-ablation-card.is-fullscreen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 20px 24px;
  border: 0;
  border-radius: 0;
  background: #060d1a;
  box-shadow: none;
}

.sq-ablation-card.is-fullscreen .sq-ablation-videos {
  max-height: calc(100vh - 160px);
  border-radius: 10px;
}

.sq-ablation-card.is-fullscreen .sq-ablation-controls {
  flex: 0 0 auto;
  margin-top: 0;
}

.sq-ablation-card.is-fullscreen .sq-ablation-label {
  color: #a3b4c2;
}

.sq-ablation-card.is-fullscreen .sq-ablation-value,
.sq-ablation-card.is-fullscreen .sq-tick-text {
  color: #bdf0ec;
}

.sq-ablation-card.is-fullscreen .sq-ablation-tick.is-active .sq-tick-text {
  color: #5eebc9;
}

.sq-ablation-card.is-fullscreen .sq-ablation-tick.is-active .sq-tick-dot {
  background: #5eebc9;
}

/* The faint-until-hover treatment relies on a mouse; in fullscreen there may be
   no hover at all before the user goes looking for the exit control. */
.sq-ablation-card.is-fullscreen .sq-ablation-fs {
  opacity: 1;
}

.sq-ablation-controls {
  margin-top: 1.1rem;
  padding: 0 40px;
}

.sq-ablation-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 0.7rem;
}

.sq-ablation-label {
  color: #5b6b82;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sq-ablation-value {
  color: #157e7e;
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Reset the native track so the thumb sits on our own rail. Bulma's slider
   stylesheet only targets input[type=range].slider, so this class is safe. */
.sq-ablation-slider {
  display: block;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sq-ablation-slider:focus {
  outline: none;
}

.sq-ablation-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a8e8e4, #29baba);
}

.sq-ablation-slider::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a8e8e4, #29baba);
}

.sq-ablation-slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #157e7e;
  box-shadow: 0 2px 8px rgba(18, 54, 105, 0.34);
  -webkit-appearance: none;
  appearance: none;
}

.sq-ablation-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #157e7e;
  box-shadow: 0 2px 8px rgba(18, 54, 105, 0.34);
}

.sq-ablation-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(41, 186, 186, 0.36);
}

.sq-ablation-slider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(41, 186, 186, 0.36);
}

/* Tick dots are positioned at the exact thumb-center x for their step, via an
   inline `left` set in JS (calc((100% - 20px) * frac + 10px)) — the same
   10px/20px thumb-radius math the browser uses to place the native thumb.
   That keeps the dot under the thumb exactly, at every step, instead of the
   near-miss you get from splitting the row into equal flex cells. */
.sq-ablation-ticks {
  position: relative;
  min-height: 44px;
  margin-top: 0.45rem;
}

.sq-ablation-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}

.sq-ablation-tick:focus-visible {
  outline: 2px solid rgba(41, 186, 186, 0.6);
  outline-offset: 2px;
}

.sq-tick-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c4ced6;
  transition: background 0.18s ease, transform 0.18s ease;
}

.sq-tick-text {
  color: #6b7a90;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.sq-ablation-tick:hover .sq-tick-dot {
  background: #5cc9c4;
}

.sq-ablation-tick.is-active .sq-tick-dot {
  background: #157e7e;
  transform: scale(1.35);
}

.sq-ablation-tick.is-active .sq-tick-text {
  color: #157e7e;
}

/* ==========================================================================
 * Local/Global composition ablation matrix (Table 6). A 6-method x 5-sample
 * grid: one column header per method (name + VBench Tot. meter), then 30
 * video cells below in row-major order. Comparative cells stay square (no
 * border-radius) with a hairline gutter, closer to a table than a card deck;
 * the headers, by contrast, get card treatment (background/border/shadow)
 * so the titles read as labels sitting above the table, not table cells
 * themselves. Fill color follows the page's teal/orange convention: orange
 * for the Original (dense-attention) baseline, teal for every SQuad
 * composition, with the proposed L->G order additionally outlined.
 * Stages are placeholders until real clips are dropped in -- swap the
 * .sq-locglob-stage contents for a <video> per cell then, the fullscreen
 * button already targets the cell so it needs no changes.
 * ========================================================================== */
.sq-locglob-scroll {
  overflow-x: auto;
}

.sq-locglob-table {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin-top: 1.75rem;
}

.sq-locglob-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 8px 12px;
  border: 1px solid rgba(34, 90, 170, 0.16);
  background: #f6f9fc;
  box-shadow: 0 4px 14px rgba(18, 54, 105, 0.08);
}

.sq-locglob-head.is-original {
  border-color: rgba(199, 102, 30, 0.32);
  background: linear-gradient(160deg, #fef1e7, #fffaf5 60%, #ffffff);
}

.sq-locglob-head.is-ours {
  border-color: rgba(21, 126, 126, 0.4);
  background: linear-gradient(160deg, #e9fbfa, #f5fffe 60%, #ffffff);
  box-shadow: 0 4px 14px rgba(21, 126, 126, 0.16);
}

.sq-locglob-head-name {
  color: #23282f;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.sq-locglob-head.is-original .sq-locglob-head-name {
  color: #c7661e;
}

.sq-locglob-head.is-ours .sq-locglob-head-name {
  color: #157e7e;
}

/* The meter: track = 100%, fill = VBench Tot. as a fraction of that, so
   readers can see at a glance how far local-only/global-only collapse
   relative to any composed pair. */
.sq-locglob-meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #dfe7f0;
  overflow: hidden;
}

.sq-locglob-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: #29baba;
}

.sq-locglob-head.is-original .sq-locglob-meter-fill {
  background: #e8853a;
}

.sq-locglob-head-score {
  color: #6b7a90;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sq-locglob-head.is-original .sq-locglob-head-score {
  color: #c7661e;
}

.sq-locglob-head.is-ours .sq-locglob-head-score {
  color: #157e7e;
}

.sq-locglob-cell {
  position: relative;
  overflow: hidden;
  background: #07101f;
  box-shadow: inset 0 0 0 1px rgba(34, 90, 170, 0.16);
}

.sq-locglob-cell.is-ours {
  box-shadow: inset 0 0 0 2px rgba(21, 126, 126, 0.55);
}

.sq-locglob-cell video {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 704;
  object-fit: cover;
  background: #07101f;
}

.sq-locglob-fs {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #eaf6ff;
  background: rgba(8, 21, 45, 0.62);
  backdrop-filter: blur(6px);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.sq-locglob-cell:hover .sq-locglob-fs,
.sq-locglob-fs:focus-visible {
  opacity: 1;
}

.sq-locglob-cell.is-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: #060d1a;
  transform: none;
  box-shadow: none;
}

.sq-locglob-cell.is-fullscreen video {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

@media (max-width: 860px) {
  .sq-locglob-table {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    min-width: 780px;
  }
}

/* ==========================================================================
 * SFT/DMD distillation-stage ablation matrix (Table 4). Transposed layout
 * from the local/global matrix above: 3 methods as ROWS (SFT-only,
 * DMD-only, SFT+DMD), 5 samples as columns, with the method label + VBench
 * meter sitting to the left of each row instead of above each column.
 * Stages are placeholders until real clips are dropped in -- swap the
 * .sq-sftdmd-stage contents for a <video> per cell then, the fullscreen
 * button already targets the cell so it needs no changes.
 * ========================================================================== */
.sq-sftdmd-scroll {
  overflow-x: auto;
}

.sq-sftdmd-table {
  display: grid;
  /* label column takes one slot so all 6 columns align with the Local/Global matrix */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 3px;
  margin-top: 1.75rem;
}

.sq-sftdmd-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 10px 10px;
  border: 1px solid rgba(34, 90, 170, 0.16);
  background: #f6f9fc;
  box-shadow: 0 4px 14px rgba(18, 54, 105, 0.08);
}

.sq-sftdmd-label.is-ours {
  border-color: rgba(21, 126, 126, 0.4);
  background: linear-gradient(160deg, #e9fbfa, #f5fffe 60%, #ffffff);
  box-shadow: 0 4px 14px rgba(21, 126, 126, 0.16);
}

.sq-sftdmd-label-name {
  color: #23282f;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.sq-sftdmd-label.is-ours .sq-sftdmd-label-name {
  color: #157e7e;
}

.sq-sftdmd-meter {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #dfe7f0;
  overflow: hidden;
}

.sq-sftdmd-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: #29baba;
}

.sq-sftdmd-label-score {
  color: #6b7a90;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sq-sftdmd-label.is-ours .sq-sftdmd-label-score {
  color: #157e7e;
}

.sq-sftdmd-cell {
  position: relative;
  overflow: hidden;
  background: #07101f;
  box-shadow: inset 0 0 0 1px rgba(34, 90, 170, 0.16);
}

.sq-sftdmd-cell.is-ours {
  box-shadow: inset 0 0 0 2px rgba(21, 126, 126, 0.55);
}

.sq-sftdmd-cell video {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 704;
  object-fit: cover;
  background: #07101f;
}

.sq-sftdmd-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1280 / 704;
  background: repeating-linear-gradient(135deg, #0c1730 0 10px, #0a1428 10px 20px);
  color: #7c93b8;
}

.sq-sftdmd-stage i.fa-video-slash {
  font-size: 1.1rem;
  opacity: 0.85;
}

.sq-sftdmd-stage span {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}

.sq-sftdmd-fs {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  color: #eaf6ff;
  background: rgba(8, 21, 45, 0.62);
  backdrop-filter: blur(6px);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.18s ease, background 0.18s ease;
}

.sq-sftdmd-cell:hover .sq-sftdmd-fs,
.sq-sftdmd-fs:focus-visible {
  opacity: 1;
}

.sq-sftdmd-cell.is-fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  background: #060d1a;
}

.sq-sftdmd-cell.is-fullscreen .sq-sftdmd-stage {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

.sq-sftdmd-cell.is-fullscreen video {
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
}

@media (max-width: 720px) {
  .sq-sftdmd-table {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    min-width: 780px;
  }
}

/* Related-projects grid. Section carries no .container, so its background
   runs full width; the cards themselves stay a fixed, compact size instead
   of stretching to fill that width (a 4-column 1fr grid here turned each
   card into a giant slab on wide screens). Flex-wrap + a fixed basis lets
   them sit centered in one row on wide viewports and wrap on narrow ones,
   without ever growing past their natural size. */
.related-projects-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 2rem 0 0;
  padding: 0 1.5rem;
}

.related-project-card {
  flex: 0 1 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  min-height: 84px;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(10, 10, 10, 0.10);
  color: inherit;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.related-project-card h3 {
  min-height: auto;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.related-project-card:hover,
.related-project-card:focus {
  color: inherit;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.14);
  outline: none;
}

.related-project-card p {
  margin: 0;
  color: #4a4a4a;
}

.related-project-card .project-venue {
  margin-bottom: 0.15rem;
  line-height: 1.1;
}

@media (max-width: 960px) {
  .sample-video-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sample-video-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  /* Seven "21 x 3 x 3" labels cannot share this width. Drop to the volume-
     ordered dots plus the readout above, which already names the current
     window, and let the tick buttons stay as touch targets. */
  .sq-ablation-card {
    padding: 12px 12px 16px;
  }

  .sq-tick-text {
    display: none;
  }

  .sq-ablation-tick {
    padding: 6px 2px;
  }

  .sq-ablation-controls {
    padding: 0 12px;
  }
}

@media (max-width: 900px) {
  .sq-compare-stage {
    grid-template-columns: 1fr;
  }

  .sq-video-lightbox video {
    max-height: 36vh;
  }
}

@media (max-width: 520px) {
  .sample-video-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sq-video-lightbox {
    padding: 10px;
  }

  .sq-lightbox-panel {
    border-radius: 18px;
  }

  .sq-lightbox-header {
    padding: 14px 14px 10px;
  }

  .sq-compare-stage {
    gap: 10px;
    padding: 0 10px 10px;
  }

  .sq-prompt-card {
    margin: 0 10px 10px;
  }
}