/* ============================================
   RefGC-SR² Project Page — DARK THEME
   Cohesive palette derived from:
     • CMLab brand   = #0D207F (navy)        → page anchor / primary
     • Paper figures = HRRI / HRGT / LRGI    → data-triplet semantics
     • Paper figures = LF / HF expert colors → frequency semantics

   Naming groups:
     --color-lab-*    : research-group brand (UI primary action)
     --color-HRRI/HRGT/LRGI : data-triplet tags from paper Fig.4
     --color-lf / --color-hf : frequency-expert colors from paper Fig.4-5

   Legacy variables (pose/domain/dist/accent/emph-*) are kept as aliases
   so existing rules stay valid but resolve to the new semantic set.
   ============================================ */

:root {
  /* === LAB ANCHOR (research-group brand) === */
  --color-lab-3:      #56BCCF;   /* UI primary action / accent */
  --color-lab-light:  #FFDEB8;   /* light accent 5F83F7 */ 

  /* === DATA TRIPLET (paper Figure 4 colors) === */
  --color-HRRI:       #DEB37B;   /* warm tan */
  --color-HRRI-light: #EBC798;
  --color-HRGT-light: #95C2B0;
  --color-LRGI:       #CD99E0;   /* lavender */
  --color-LRGI-light: #DDB3EB;

  /* === OUR RESULT (model output) === */
  --color-result:       #4285F4;   /* our model's result — blue */
  --color-result-light: #6BA0F8;
  --color-result-dark:  #2F6FE0;

  /* === FREQUENCY EXPERT (paper Figure 4-5 colors) === */
  --color-lf:         #F2C06B;   /* low-frequency gold (paper LF-expert) */
  --color-lf-light:   #F8D69E;
  --color-hf:         #EF857D;   /* high-frequency coral */
  --color-hf-light:   #F4A5A0;
  --color-hf-dark:    #C95B53;

  /* === LEGACY ALIASES (do not introduce new colors) === */
  --color-pose:        var(--color-lf);
  --color-pose-light:  var(--color-lf-light);
  --color-dist:        var(--color-hf);
  --color-dist-light:  var(--color-hf-light);
  --color-domain-light:var(--color-HRRI-light);
  --color-accent:      var(--color-HRRI);        /* warm highlights */
  --color-emph-1:      var(--color-HRRI-light);
  --color-emph-2:      var(--color-hf);
  --color-emph-3:      var(--color-lab-3);       /* UI primary → lab */
  --color-output:       var(--color-result);       /* "output/result" → blue */
  --color-output-dark:  var(--color-result-dark);

  /* === Dark theme neutrals === */
  --bg-primary:   #0a0e14;       /* near-black, page background */
  --bg-secondary: #0f141c;       /* sections with light-bg variant */
  --bg-card:      #161c26;       /* card / table background */
  --bg-elevated:  #1c2330;       /* hover, elevated surfaces */

  --text-primary:   #ffffff;
  --text-secondary: #adb8c5;
  --text-muted:     #6e7681;
  --text-disabled:  #484f58;

  --border-light:  #21262d;
  --border-medium: #30363d;
  --border-strong: #444c56;

  /* === Shadows / glows === */
  --shadow-sm: 0 1px 2.25px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 3px 9px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 9px 24px rgba(0, 0, 0, 0.6);
  --glow-lab:    0 0 18px rgba(13,  32, 127, 0.30);
  --glow-pose:   0 0 18px rgba(242, 192, 107, 0.18);
  --glow-domain: 0 0 18px rgba(222, 179, 123, 0.18);
  --glow-dist:   0 0 18px rgba(239, 133, 125, 0.15);
  --glow-multi:  0 0 24px rgba(13,  32, 127, 0.18),
                 0 0 24px rgba(239, 133, 125, 0.10);

  --container-max: 800px;   /* uniform content width — tables, figures, captions, BibTeX */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body { background: var(--bg-primary); }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  font-size: 15.6px;            /* 0.75-scaled base (was the 16px browser default) */
  color: var(--text-primary);
  line-height: 1.65;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(239, 133, 125, 0.3);
  color: var(--text-primary);
}

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 18px; }

section.section { padding: 60px 0; }
section.has-light-bg { background: var(--bg-secondary); }
/* Tight vertical rhythm for the Showcase → Abstract → Figure 1 group */
section.section.section-tight { padding-top: 26px; padding-bottom: 26px; }

/* ============================================
   HERO
   ============================================ */
.hero {
  /* Lab-navy → coral wash matches the title's lab-anchored arc. */
  background:
    radial-gradient(circle at 18% 22%, rgba(13,  32, 127, 0.18), transparent 45%),
    radial-gradient(circle at 82% 30%, rgba(13,  32, 127, 0.10), transparent 45%),
    radial-gradient(circle at 50% 82%, rgba(239, 133, 125, 0.10), transparent 50%),
    var(--bg-primary);
  padding: 27px 0 21px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-light);
}
.hero .hero-body { padding: 0.94rem 1.12rem; }

/* Venue badge */
.venue-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4.5px 12px;
  background: rgba(83, 131, 236, 0.10);
  border: 1px solid rgba(83, 131, 236, 0.30);
  border-radius: 749.25px;
  font-size: 12.68px;
  font-weight: 600;
  color: var(--color-pose-light);
  margin-bottom: 10.5px;
  letter-spacing: 0.02em;
}
.badge-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-pose);
  box-shadow: 0 0 6px var(--color-pose);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Paper logo wordmark used as the main title */
.title-logo-h1 {
  margin: 0 0 7.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.6vw, 1.4rem);
  flex-wrap: wrap;
}
/* "RefGC-SR²:" wordmark beside the logo (line 1 of the title) */
.title-name {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-primary);
}
.title-logo {
  display: block;
  /* Hero logo — 0.9× the prior clamp(12.44rem, 25.92vw, 12.96rem) */
  height: clamp(11.2rem, 23.33vw, 11.66rem);
  width: auto;
  margin: 0;
  filter: drop-shadow(0 6px 16.5px rgba(0, 0, 0, 0.55));
}

/* Main title �� Ref / GC / SR colored distinctly to show mapping */
.title-main {
  font-size: clamp(2.5rem, 5.9vw, 4.55rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.05;
  /* Lab-navy glow anchors the title to the brand color */
  filter: drop-shadow(0 0 30px rgba(13, 32, 127, 0.35));
}
.title-superscript {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 800;
}

/* Component tags: a continuous warm→cool arc, HRRI-tan → LRGI-lavender → blue.
   Reads as "reference (Ref) → generated content (GC) → super-res output (SR²)".
   The seams are 50/50 blends of the neighbouring base colors so the gradient
   flows smoothly across the three segments:
     • #D6A6AE = blend(--color-HRRI, --color-LRGI)  — Ref→GC seam
     • #888FEA = blend(--color-LRGI, #4285F4)        — GC→SR seam */
.tag-ref { color: var(--color-HRRI); }
.tag-gc  { color: var(--color-LRGI); }
.tag-sr  { color: var(--color-lab-light); }

.title-main { color: var(--color-LRGI); }
.title-main .tag-ref {
  /* Logo-harmonised: orange → purple → blue arc (Ref orange segment). */
  background: linear-gradient(90deg,
    #EF9F3E 0%,
    #C68181 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.title-main .tag-gc {
  /* GC = the logo's purple middle box */
  background: linear-gradient(90deg,
    #C68181 0%,
    #9E63C5 50%,
    #7579D1 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.title-main .tag-sr {
  /* SR² = the logo's blue box (purple seam → blue) */
  background: linear-gradient(90deg,
    #7579D1 0%,
    #4C90DE 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.title-main .title-superscript.tag-sr {
  background: none;
  -webkit-text-fill-color: #4c90de;
  color: #4c90de;
}
/* Colon joining the short name to the full title subtitle: clean solid white. */
.title-colon {
  background: none;
  -webkit-text-fill-color: var(--text-primary);
  color: var(--text-primary);
  margin-left: 0.02em;
}

/* Inline "RefGC-SR²" mentions in the body reuse the main-title gradient
   (Ref tan → GC lavender → SR² blue), so the term reads consistently. */
.rgsr {
  /* Glossy text matching _logo_final: orange (Ref) → magenta/purple (GC) → blue (SR²),
     sampled from the new logo's box colors, with a vertical sheen + soft drop-shadow. */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0.12) 38%,
      rgba(255, 255, 255, 0) 52%,
      rgba(0, 0, 0, 0.14) 100%),
    linear-gradient(90deg,
      #FBA721 0%,
      #E9683B 13%,
      #C84BC4 38%,
      #A23FE0 52%,
      #6E5CEC 74%,
      #2897FC 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.28));
}
.rgsr sup {
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* TV-static glitch on the "SR²" of the title prefix only. As an inline-block it
   leaves the parent gradient clip, so give it its own solid blue (logo SR²). */
.glitch-sr,
.glitch-sr sup {
  /* glossy vertical blue (light top → base → deep bottom) like the new logo SR² */
  background: linear-gradient(180deg, #8FCBFB 0%, #2897FC 52%, #1574D8 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Subtitle acronym letters — each painted the EXACT solid color that the same
   letter has in the title, sampled from the .rgsr 90deg gradient
   (#F8941F→#CC727A→#A04FD4→#6B7DE1→#2E9BEE) at that glyph's position across
   "RefGC-SR²". So subtitle "Ref/SR/Refinement/GC" matches the title letter-for-letter. */
.subtitle-anim .acr-r1   { color: #F2872E; }   /* R of Ref(erence) */
.subtitle-anim .acr-e    { color: #E1615C; }   /* e of Ref */
.subtitle-anim .acr-f    { color: #D5568F; }   /* f of Ref */
.subtitle-anim .acr-g    { color: #C54AC6; }   /* G of Generated */
.subtitle-anim .acr-c    { color: #A040E0; }   /* C of Content   */
.subtitle-anim .acr-s    { color: #6F5BEC; }   /* S of Super     */
.subtitle-anim .acr-r    { color: #4D78F4; }   /* R of Resolution */
.subtitle-anim .acr-ref2 { color: #328FFA; }   /* R of Refinement (the ²) */
.subtitle-anim .acr-r1,
.subtitle-anim .acr-e,
.subtitle-anim .acr-f,
.subtitle-anim .acr-g,
.subtitle-anim .acr-c,
.subtitle-anim .acr-s,
.subtitle-anim .acr-r,
.subtitle-anim .acr-ref2 { font-weight: 800; }
.glitch-sr {
  display: inline-block;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.28));
  animation: sr-glitch 3.6s steps(1, end) infinite;
}

/* GC: no animation */

/* SR² : TV-static glitch */
.title-main .tag-sr {
  display: inline-block;
  animation: sr-glitch 3.6s steps(1, end) infinite;
}
@keyframes sr-glitch {
  0%, 84%, 100% {
    transform: translate(0, 0) skewX(0);
    text-shadow: none;
    opacity: 1;
  }
  85% {
    transform: translate(-1.5px, 0) skewX(-3deg);
    text-shadow: 2px 0 rgba(83, 131, 236, 0.85), -2px 0 rgba(239, 133, 125, 0.85);
    opacity: 0.92;
  }
  87% {
    transform: translate(2px, 1px) skewX(2deg);
    text-shadow: -3px 0 rgba(83, 131, 236, 0.75), 3px 0 rgba(239, 133, 125, 0.75);
    opacity: 0.88;
  }
  89% {
    transform: translate(-1px, -1px) skewX(0);
    text-shadow: 1px 0 rgba(83, 131, 236, 0.6), -1px 0 rgba(239, 133, 125, 0.6);
    opacity: 1;
  }
  91% {
    transform: translate(1.5px, 0) skewX(1.5deg);
    text-shadow: -2px 0 rgba(83, 131, 236, 0.7), 2px 0 rgba(239, 133, 125, 0.7);
    opacity: 0.85;
  }
  93% {
    transform: translate(0, 1px) skewX(0);
    text-shadow: 1px 0 rgba(83, 131, 236, 0.5);
    opacity: 1;
  }
  95% {
    transform: translate(-0.5px, 0) skewX(0);
    text-shadow: none;
    opacity: 0.94;
  }
}

/* Animated subtitle with paper colors */
.subtitle-anim {
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  font-weight: 400;
  color: var(--text-secondary);
  margin: 6px 0 20.25px 0;
  letter-spacing: -0.01em;
}
.subtitle-anim .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: word-in 0.5s ease-out forwards;
  margin: 0 2px;
}
.subtitle-anim .w0 { animation-delay: 0s;    color: #ffffff;   font-weight: 700; } /* RefGC-SR² : short-name prefix */
.subtitle-anim .w1 { animation-delay: 0.1s;  color: #ffffff;   font-weight: 600; } /* Reference-guided �� Ref */
.subtitle-anim .w2 { animation-delay: 0.25s; color: #ffffff; font-weight: 600; } /* Super-Resolution  SR */
.subtitle-anim .w3 { animation-delay: 0.40s; color: #ffffff; font-weight: 600; }                              /* Generalization Challenge  GC */
.subtitle-anim .w4 { animation-delay: 0.55s; color: #ffffff; font-weight: 600; }                              /* Refinement (no Ref/GC/SR mapping) */
.subtitle-anim .w5 { animation-delay: 0.70s; color: #ffffff; font-weight: 600; }
.subtitle-anim .w6 { animation-delay: 0.85s; color: #ffffff;   font-weight: 600; } /* AI Generated Content  GC */
@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Authors */
.authors {
  font-size: 17.55px;
  font-weight: 500;
  color: var(--color-lab-light);
  margin-bottom: 6.75px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4.5px 31.5px;
}
.authors .author-name {
  white-space: nowrap;
}
.affiliations {
  font-size: 17.55px;
  color: var(--text-primary);
  margin-bottom: 18px;
  font-style: italic;
}
.affiliations .cofirst-note {
  font-size: 15px;
  margin-top: 2.25px;
  color: var(--text-primary);
  font-style: normal;
  letter-spacing: 0.01em;
}
.affil-icon {
  height: 1.15em;
  width: auto;
  vertical-align: -0.25em;
  margin-left: 3px;
  display: inline-block;
}
.affil-icon-cmlab {
  height: 2.2em;
  vertical-align: -0.75em;
}

/* ---- Co-first author horizontal conveyor-belt (right-to-left marquee) ---- */
.cofirst-marquee {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: 315px;
  max-width: min(45vw, 360px);
  line-height: 1.4;
  /* Soft fade at both edges so names enter/exit the ticker gracefully */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0,
    #000 12%,
    #000 88%,
    transparent 100%);
}
.cofirst-track {
  display: inline-block;
  white-space: nowrap;
  /* Total content = 2 identical sets; translating from 0 to -50% scrolls
     exactly one set off, so the loop is seamless (linear timing required). */
  animation: cofirst-scroll 14s linear infinite;
  will-change: transform;
}
.cofirst-name {
  color: var(--color-lab-light);
  font-weight: 600;
}
.cofirst-sep {
  color: var(--text-muted);
  padding: 0 15.75px;
  font-weight: 400;
  opacity: 0.55;
}
.cofirst-mark {
  color: var(--color-lab-light);
  font-weight: 700;
  margin-left: 1px;
  font-size: 0.7em;
}
@keyframes cofirst-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cofirst-marquee:hover .cofirst-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* Honor reduced-motion: stop every looping/entrance animation (glitch, marquee,
     pulsing dot, word-in, carousel fade) and snap transitions. The curtain still
     works — it's drag-driven; its transitions just become instant. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* fully kill the title SR² glitch (no jitter / chromatic flicker) */
  .glitch-sr,
  .title-main .tag-sr { animation: none !important; }
  /* the author marquee stops in place */
  .cofirst-track { animation: none !important; }
  /* subtitle words animate in from opacity:0 — keep them visible without motion */
  .subtitle-anim .word { opacity: 1 !important; transform: none !important; }
}

/* Action buttons */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
  margin-top: 7.5px;
}
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6.75px;
  padding: 8.25px 16.5px;
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 749.25px;
  font-size: 15.6px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1px solid var(--border-medium);
  white-space: nowrap;
}
.action-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--color-emph-3);
  color: var(--color-emph-3);
  transform: translateY(-2px);
  box-shadow: var(--glow-lab);
}
.action-btn .icon {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.ai-icon {
  font-style: normal;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15.6px;
  white-space: nowrap;
  line-height: 1;
}
.soon-tag {
  font-size: 11.7px;
  opacity: 0.6;
  padding: 2px 4.5px;
  border: 1px solid currentColor;
  border-radius: 3px;
  margin-left: 3.75px;
}

/* ============================================
   TEASER
   ============================================ */
.section-teaser { padding-top: 45px; }
/* All sections share one content width (= the TL;DR card, 750px). */
.section-teaser .container { max-width: var(--container-max); }

.tldr-card {
  max-width: 800px;
  margin: 0 auto 36px;
  padding: 18px 24px;
  /* Lab-navy → coral wash, picking up the title's anchor + output emphasis */
  background: linear-gradient(135deg,
    rgba(13,  32, 127, 0.10),
    rgba(239, 133, 125, 0.08));
  border-left: 3px solid var(--color-lab-light);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  border-top: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  text-align: justify;
}
.tldr-label {
  display: inline-block;
  font-size: 11.7px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-lab-light);
  margin-bottom: 7.5px;
  text-transform: uppercase;
}
.tldr-text {
  font-size: 16.09px;
  line-height: 1.7;
  color: var(--text-primary);
  margin: 0;
}
.tldr-text strong { color: var(--text-primary); }
.tldr-text em {
  font-style: normal;
  color: var(--color-lab-light);
  font-weight: 600;
}

.teaser-container {
  text-align: center;
  margin-top: 42px;
}
.teaser-image {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 9px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}
/* Figure 1 caption shares the image's box: same width, directly below, left text. */
.teaser-container .figure-caption {
  max-width: 800px;
  margin: 12px auto 0;
  text-align: justify;
}

/* ============================================
   SHOWCASE
   ============================================ */
.showcase {
  margin: 25.5px auto 31.5px;
  display: flex;
  flex-direction: column;
  gap: 21px;
}

.showcase-flow {
  position: relative;
  padding: 19.5px 16.5px 21px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 22%, rgba( 83,131,236,0.12), transparent 32%),
    radial-gradient(circle at 78% 24%, rgba(239,133,125,0.10), transparent 34%),
    radial-gradient(circle at 50% 82%, rgba( 13, 32,127,0.16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.showcase-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 28.5px 28.5px;
  mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 72%);
  opacity: 0.32;
}

.demo-carousel,
.showcase-note {
  position: relative;
  z-index: 1;
}

/* Placeholder SVGs are decorative — dim them a touch so they read as
   stand-ins, not real results. Real example images (loaded from /asset/)
   stay fully saturated. The "Coming soon" ribbon at the top of the
   showcase is the explicit communication channel. */
.carousel-slide .demo-frame img[src*="placeholders"] {
  filter: saturate(0.55) brightness(0.92);
}

/* ===== Top-level category buttons (primary nav: Benchmark / In the wild) ===== */
.carousel-cats {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin: 0 auto 12px;
}
.carousel-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7.5px 19.5px;
  border-radius: 749.25px;
  font-family: inherit;
  font-size: 16.57px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1.5px solid var(--border-medium);
  transition: all 0.25s ease;
}
.carousel-cat:hover {
  color: var(--text-primary);
  border-color: var(--color-lab-light);
  transform: translateY(-1px);
}
.carousel-cat.is-active {
  background: var(--bg-elevated);
  border-color: var(--color-lab-light);
  color: var(--color-lab-light);
  transform: translateY(-2px);
  box-shadow: var(--glow-lab);
}
.carousel-cat:focus-visible {
  outline: 2px solid var(--color-lab-light);
  outline-offset: 2.25px;
}

/* ===== Scene sub-buttons (secondary nav under the active category) ===== */
.carousel-tabs {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 16.5px;
}

.carousel-tab {
  display: inline-flex;
  align-items: center;
  gap: 5.25px;
  padding: 4.5px 12px;
  border-radius: 749.25px;
  font-family: inherit;
  font-size: 13.16px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  transition: all 0.25s ease;
}
.carousel-tab:hover {
  color: var(--text-primary);
  border-color: var(--color-lab-light);
  transform: translateY(-1px);
}
/* Active scene mirrors the .action-btn:hover highlight (lighter than category). */
.carousel-tab.is-active {
  background: var(--bg-elevated);
  border-color: var(--color-lab-light);
  color: var(--color-lab-light);
  transform: translateY(-1px);
}
.carousel-tab:focus-visible {
  outline: 2px solid var(--color-lab-light);
  outline-offset: 2.25px;
}

/* ===== Category header (one per category; only the active one shows) ===== */
.demo-block-head {
  display: none;
  margin: 0 auto 16.5px;
  max-width: 920px;
  text-align: center;
}
.demo-block-head.is-active {
  display: block;
}

.demo-block-title {
  margin: 3px 0 6px;
  font-size: 20.48px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.demo-block-desc {
  margin: 0 auto;
  max-width: none;
  font-size: 14.14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.demo-block-desc strong { color: var(--color-HRRI); }
.demo-block-desc em {
  font-style: normal;
  font-weight: 700;
  color: var(--color-lab-light);
}

/* ===== Single-panel carousel ===== */
.demo-carousel {
  position: relative;
  padding: 0 36px;        /* room for the side arrows */
}

.carousel-track {
  position: relative;
  min-height: 150px;       /* avoids layout jump while transitioning */
}

.carousel-slide {
  display: none;
  animation: carouselFade 0.36s ease;
}
.carousel-slide.is-active {
  display: block;
}
.carousel-slide[hidden] { display: none; }
.carousel-slide.is-active[hidden] { display: block; }

@keyframes carouselFade {
  from { opacity: 0; transform: translateX(4.5px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10,14,20,0.65);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 29.25px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 4;
  transition: background 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, transform 0.18s ease;
  box-shadow: 0 6px 16.5px rgba(0,0,0,0.34);
}
.carousel-arrow:hover {
  background: rgba(83,131,236,0.18);
  border-color: var(--color-emph-3);
  color: var(--color-emph-3);
  transform: translateY(-50%) scale(1.06);
}
.carousel-arrow:focus-visible {
  outline: 2px solid var(--color-emph-3);
  outline-offset: 2.25px;
}
.carousel-arrow--prev { left: 3px; }
.carousel-arrow--next { right: 3px; }

/* Dot indicators */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7.5px;
  margin: 16.5px auto 0;
}
.carousel-dot {
  width: 7.5px;
  height: 7.5px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.30);
  background: transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.carousel-dot:hover {
  border-color: var(--color-emph-3);
  transform: scale(1.15);
}
.carousel-dot.is-active {
  background: var(--color-emph-3);
  border-color: var(--color-emph-3);
}

.demo-prompt {
  margin: 0 auto 13.5px;
  padding: 7.5px 13.5px;
  border-radius: 749.25px;
  max-width: 540px;
  text-align: center;
  font-size: 15.6px;
  font-style: italic;
  color: var(--text-primary);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  line-height: 1.45;
}

.demo-prompt-quote {
  color: var(--color-accent);
  font-weight: 800;
  font-style: normal;
  margin: 0 2px;
}

/* ===== Stage: LRGI → pipeline → Output on top row,
        HRRI joins from below via a vertical up-arrow.

   Middle column is pinned to the pipeline width so the horizontal arrow
   has equal column-gap (= 9px) at both ends. HRRI (much wider) overflows
   column 2 symmetrically via justify-self: center, which keeps it visually
   centred on the same X axis as the pipeline arrow above it. ===== */
.demo-stage {
  display: grid;
  grid-template-columns: auto 147px auto;
  grid-template-rows: auto auto;
  align-items: center;
  justify-content: center;
  /* Tight, equal gap on both sides of the horizontal pipeline arrow */
  column-gap: 9px;
  /* Row-gap chosen so up-arrow has 3 px equal padding above and below */
  row-gap: 15px;
  padding: 6px 3px 3px;
}

/* Explicit cell placement */
.demo-card--lrgi { grid-column: 1; grid-row: 1; }
.demo-pipeline   { grid-column: 2; grid-row: 1; }
.demo-card--out  { grid-column: 3; grid-row: 1; }
.demo-card--ref  {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  margin-top: 0;
  /* Let the card take its natural width (frame + caption ≈ 384 px),
     then centre it across column 2 so it overflows symmetrically into
     the row-2 space below LRGI on the left and below Output on the right. */
  width: max-content;
  justify-self: center;
}

/* Up-arrow rising from the top of the HRRI card up to just below the
   pipeline ("New task") content, so HRRI reads as feeding into the model.
   The vertical span between the pipeline bottom and the HRRI card top is
   dynamic (it grows with the frame size), so the line height + arrowhead
   offset are driven by JS (syncRefArrow) via the two custom properties
   below. The fallbacks reproduce the original short arrow if JS is absent.
   Both ends keep an equal 3 px gap (tail ↔ HRRI top, tip ↔ pipeline bottom).
   Colors: HRRI tan only (--color-HRRI). */
.demo-card--ref::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 2.25px;
  transform: translateX(-50%);
  width: 2.25px;
  height: var(--ref-arrow-line-h, 10.5px);
  background: linear-gradient(180deg, var(--color-HRRI-light), var(--color-HRRI));
  border-radius: 2px;
}
.demo-card--ref::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: var(--ref-arrow-head-mb, 12.75px);
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5.25px solid transparent;
  border-right: 5.25px solid transparent;
  border-bottom: 9px solid var(--color-HRRI);
  filter: drop-shadow(0 0 4.5px rgba(222, 179, 123, 0.50));
}

.demo-group-label {
  display: block;
  margin-bottom: 7.5px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-primary);
  text-align: center;
}

.demo-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.demo-frame {
  position: relative;
  border-radius: 10.5px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-medium);
  box-shadow: 0 10.5px 19.5px rgba(0,0,0,0.30);
}

.demo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover-magnifier (loupe) on showcase images — inspect detail to judge improvements */
.demo-card--ref img {
  cursor: zoom-in;
}
.img-loupe {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  pointer-events: none;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.55),
              inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  background-color: #0d0d0d;
  background-repeat: no-repeat;
  image-rendering: auto;
  z-index: 9999;
}
.img-loupe.is-visible {
  display: block;
}

/* Loupe usage hint above the slides */
.loupe-hint {
  text-align: center;
  font-size: 1.17rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0.25rem auto 1.25rem;
}
.loupe-hint strong {
  color: var(--color-lab-light);
  font-weight: 600;
}
.loupe-hint-icon {
  margin-right: 0.25rem;
}

/* ============================================================
   Comparison slider (LRGI ⇄ Our result) + 2-element stage
   ============================================================ */
.demo-stage--cmp {
  --reveal: 0;   /* live slider position (0=LRGI … 1=Ours), set by JS */
  --frame: 440px; /* shared image-frame size — keeps both cards exactly equal */
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 6px 3px 3px;
}
/* HRRI sits beside the slider here, so the vertical up-arrow that pointed
   into the old horizontal pipeline is no longer meaningful. */
.demo-stage--cmp .demo-card--ref {
  width: auto;
  margin-top: 0;
  justify-self: auto;
}
.demo-stage--cmp .demo-card--ref::before,
.demo-stage--cmp .demo-card--ref::after {
  display: none;
}

/* Match the Reference (HRRI) frame size exactly so the two cards are equal. */
.demo-frame--cmp {
  width: var(--frame);
  height: var(--frame);
  padding: 0;
  /* Border + neon glow track the slider in real time:
     LRGI lavender (reveal 0) → Ours blue neon (reveal 1). */
  border: 2px solid var(--color-LRGI);
  border-color: color-mix(in srgb,
    var(--color-result) calc(var(--reveal, 0) * 100%), var(--color-LRGI));
  box-shadow:
    0 12px 26px rgba(0,0,0,0.40),
    0 0 calc(var(--reveal, 0) * 28px) rgba(66, 133, 244, calc(var(--reveal, 0) * 0.85)),
    0 0 0 calc(2px + var(--reveal, 0) * 2px) rgba(66, 133, 244, calc(var(--reveal, 0) * 0.30));
  transition: border-color 0.1s linear, box-shadow 0.1s linear;
}

/* img-comparison-slider web component */
.demo-slider {
  --divider-width: 6px;
  --divider-color: var(--color-lab-light);
  --default-handle-opacity: 1;
  --default-handle-width: 52px;
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: ew-resize;
}
.demo-slider .cmp-fig {
  margin: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
.demo-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* LRGI is genuinely low-res — render crisp-pixelated so the gain is obvious */
.demo-slider .cmp-before img {
  image-rendering: pixelated;
}
/* On-image label pills (MoRel-style): overlaid on the corner of each image.
   On the slider, the LRGI pill sits on the "before" slot (top-left) and clips
   away with the slider as Ours is revealed; the Ours pill is top-right. */
.img-cap {
  position: absolute;
  top: 12px;
  /* No escaping z-index: labels live inside their slot, so the slider's
     clip/stack naturally covers or reveals each label with its image. */
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(3px);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.img-cap--tl { left: 12px; }
.img-cap--tr { right: 12px; }
.img-cap-res {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82em;
  opacity: 0.82;
}

/* ---- "What our model repairs" strip: the four Figure-1 artifacts as chips,
   coral letter-badge (the artifact) → blue check (our fix). ---- */
.fix-strip {
  max-width: 1040px;
  margin: 2px auto 22px;
  text-align: center;
}
.fix-strip-lead {
  margin: 0 0 13px;
  font-size: 1.0rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.fix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;   /* the four artifacts stay on one line (desktop) */
  justify-content: center;
  gap: 9px;
}
@media (max-width: 980px) {
  .fix-list { flex-wrap: wrap; }   /* wrap once the showcase stacks */
}
/* Plain wrapper — the label itself is a Figure-1 .artifact-tag (identical look). */
.fix-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fix-item .artifact-tag {
  white-space: nowrap;
}
.fix-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  font-style: italic;
  color: #fff;
  background: var(--color-hf);   /* coral = the artifact */
}
.fix-check {
  color: var(--color-result);    /* blue = repaired */
  font-weight: 900;
}

.demo-cmp-hint {
  margin: 9px 0 0;
  text-align: center;
  font-size: 1.01rem;
  font-weight: 600;
  color: var(--color-output, #4285F4);
}
.demo-cmp-hint span { margin-right: 4px; font-weight: 800; }

/* ---- Reuse connector arrows (HRRI → RefGC 1st-gen, HRRI → Ours reuse) ----
   --reveal (0..1) is set by JS from the live slider position; the reuse arrow
   fills + glows as the result is revealed, the RefGC arrow dims. */
.demo-link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  min-width: 134px;
  align-self: center;
  padding: 6px 0;
}
.demo-link-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.demo-link-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1;
  color: currentColor;
  text-align: center;
}
/* step explainer under each arrow label (HRRI flow / reuse + action) */
.demo-link-label small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  opacity: 0.8;
  white-space: nowrap;
}
.demo-link-arrow {
  display: flex;
  align-items: center;
  width: 100%;
}
.demo-link-shaft {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
}
.demo-link-head {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid currentColor;
}
/* RefGC (1st generation → LRGI): white, fades a touch as Ours is revealed. */
.demo-link-row--refgc {
  color: var(--text-primary);   /* constant — does not dim with the slider */
}
/* HRRI reused → Ours: result blue, shaft fills + glows with the slider. */
/* "RefGC-SR² (Ours)" label + arrow: dim dark-blue at rest, then light up with a
   bright neon-blue glow as the result is revealed — mirroring the image's neon
   border. Both text and arrow share the same reveal-driven color + glow. */
.demo-link-row--reuse {
  color: color-mix(in srgb, var(--color-result, #4285F4) calc(26% + var(--reveal, 0) * 74%), #0a1426);
  filter:
    drop-shadow(0 0 calc(var(--reveal, 0) * 8px)  rgba(66, 133, 244, calc(0.30 + var(--reveal, 0) * 0.60)))
    drop-shadow(0 0 calc(var(--reveal, 0) * 22px) rgba(66, 133, 244, calc(var(--reveal, 0) * 0.55)));
  transition: color 0.12s linear, filter 0.12s linear;
}
.demo-link-row--reuse .demo-link-shaft {
  background: currentColor;   /* solid — follows the dark→neon color */
}
.demo-link-row--reuse .demo-link-head {
  opacity: 1;                 /* always drawn; color carries the dark→neon */
}

/* Hide tab/dot buttons not used by the active category (bench 4 / wild 3) */
.carousel-tab[hidden],
.carousel-dot[hidden] { display: none !important; }

.demo-frame--lr {
  width: 120px;
  height: 120px;
  border-style: dashed;
  /* LRGI semantic: lavender (#CD99E0 = rgb 205 153 224) */
  border-color: rgba(205, 153, 224, 0.65);
}

.demo-frame--hr {
  width: var(--frame);
  height: var(--frame);
}

.demo-card--hrri .demo-frame--hr {
  /* HRRI semantic: tan (#DEB37B = rgb 222 179 123) */
  border-color: rgba(222, 179, 123, 0.65);
}

.demo-frame--ours {
  /* Output semantic: result blue (#4285F4 = rgb 66 133 244) — same as --color-output */
  border: 2px solid rgba(66, 133, 244, 0.85);
  box-shadow:
    0 10.5px 22.5px rgba(0,0,0,0.34),
    0 0 0 3px rgba(66, 133, 244, 0.18);
}

.demo-ours-badge {
  position: absolute;
  top: 7.5px;
  right: 7.5px;
  padding: 3px 7.5px;
  border-radius: 749.25px;
  font-size: 11.7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  /* Solid output coral — kept on-palette for the Output card */
  background: linear-gradient(100deg, var(--color-output-dark), var(--color-output));
  box-shadow: 0 4.5px 12px rgba(0,0,0,0.35);
}

.demo-card figcaption {
  margin-top: 7.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.25px;
}

.demo-tag {
  display: inline-block;
  padding: 2.25px 7.5px;
  border-radius: 749.25px;
  font-size: 10.72px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.demo-tag--lrgi {
  /* LRGI semantic: lavender */
  color: var(--color-LRGI-light);
  background: rgba(205, 153, 224, 0.18);
  border: 1px solid rgba(205, 153, 224, 0.50);
}
.demo-tag--hrri {
  /* HRRI semantic: warm tan */
  color: var(--color-HRRI-light);
  background: rgba(222, 179, 123, 0.20);
  border: 1px solid rgba(222, 179, 123, 0.50);
}
.demo-tag--out {
  /* Output semantic: result blue only */
  color: #fff;
  background: linear-gradient(100deg, var(--color-output-dark), var(--color-output));
  border: 1px solid rgba(66, 133, 244, 0.70);
}

.demo-res {
  font-size: 11.7px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* RefGC provenance under the LRGI: which kind of reference-guided generator
   produced this input (echoes Figure 1's ": Compositing, Customization, …"). */
.demo-card-note {
  margin: 6.75px 0 0;
  max-width: 150px;
  font-size: 11.21px;
  line-height: 1.5;
  text-align: center;
  color: var(--text-muted);
}
.demo-card-note span {
  color: var(--color-LRGI-light);
  font-weight: 700;
}

/* HRRI is consumed twice: once by the upstream RefGC, then reused by our task.
   Tan note pinned to the HRRI card makes that reuse explicit. */
.demo-reuse-note {
  margin: 6.75px auto 0;
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
  color: var(--color-HRRI-light);
}
.demo-reuse-note::before {
  content: "\267B\00A0"; /* ♻ + nbsp */
  font-weight: 700;
}

/* Figure-1 problem/benefit lists: red ✗ flaws on the LRGI, green ✓ gains on
   the output. The gain matching the active scene is emphasised (.is-key). */
.demo-flaws,
.demo-gains {
  list-style: none;
  margin: 8.25px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: justify;
  font-size: 12.19px;
  font-weight: 600;
}
.demo-flaws li,
.demo-gains li {
  display: flex;
  align-items: center;
  gap: 5.25px;
  white-space: nowrap;
}
.demo-flaws li {
  color: var(--color-hf-light);
}
.demo-flaws li::before {
  content: "\2717"; /* ✗ */
  color: var(--color-hf-dark);
  font-weight: 900;
}
.demo-gains li {
  color: var(--text-secondary);
}
.demo-gains li::before {
  content: "\2713"; /* ✓ */
  color: var(--color-HRGT-light);
  font-weight: 900;
}
.demo-gains li.is-key {
  color: var(--color-HRGT-light);
  font-weight: 800;
}
.demo-gains li.is-key::before {
  filter: drop-shadow(0 0 3.75px rgba(149, 194, 176, 0.6));
}

/* ===== Pipeline (Figure 1-style: text labels around a horizontal arrow) ===== */
.demo-pipeline {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin: 0;
  width: 147px;
  text-align: center;
}

/* "New task RefGC-SR² (Ours)" — sits above the arrow */
.demo-flow-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4.5px;
  font-size: 14.14px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--text-primary);
}
.demo-flow-mark {
  position: relative;
  padding: 0 3px;
  /* Marker-highlight echo of Figure 1's cream stripe behind "New task" */
  background: linear-gradient(180deg, transparent 55%, rgba(222, 179, 123, 0.32) 55%);
  border-radius: 2px;
}
.demo-flow-name {
  background: linear-gradient(90deg, var(--color-lab-light), var(--color-hf));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.demo-flow-name sup {
  font-size: 0.6em;
  vertical-align: super;
}
.demo-flow-ours {
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: var(--color-hf);
          text-fill-color: var(--color-hf);
  color: var(--color-hf);
  font-weight: 700;
  font-size: 0.88em;
}

/* The horizontal arrow itself.
   Semantic gradient: starts at LRGI lavender (source), ends at output
   coral (destination). Solid both ends so the visual arrow length
   equals the pipeline width (no fade-in/out → equal gap to both frames). */
.demo-arrow {
  position: relative;
  width: 100%;
  height: 2.25px;
  margin: 2px 0;
  background: linear-gradient(90deg,
    var(--color-LRGI) 0%,
    var(--color-output) 100%);
  border-radius: 2px;
}
.demo-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 9px solid var(--color-output);
  border-top: 5.25px solid transparent;
  border-bottom: 5.25px solid transparent;
  filter: drop-shadow(0 0 4.5px rgba(66, 133, 244, 0.45));
}

/* "+ Super-Resolution" / "+ Refinement" — sit below the arrow */
.demo-flow-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 13.16px;
  font-style: italic;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.35;
}
.demo-flow-op {
  display: inline-block;
  white-space: nowrap;
}
.demo-flow-op-plus {
  color: var(--color-HRGT-light);
  font-weight: 900;
  font-style: normal;
  margin-right: 3px;
}

/* ===== Notes ===== */
.showcase-note {
  margin: 21px auto 0;
  color: var(--text-secondary);
  text-align: center;
  font-size: 13.65px;
  line-height: 1.65;
  max-width: 615px;
}

.showcase-note strong {
  color: var(--text-primary);
}
.showcase-note em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 700;
}

/* ============================================================
   TASK DEFINITION BANNER  (persistent "what is RefGC-SR²")
   ------------------------------------------------------------
   The page's at-a-glance teaser, mirroring paper Figure 1: the user's
   HRRI drives an existing RefGC into a low-res, artifact-laden LRGI; our
   NEW task reuses that same HRRI to super-resolve + refine it into a
   high-res result. Horizontal flow on desktop, stacks on mobile.
   Self-contained .task-/.tb- classes — no overlap with the .demo-*
   carousel below. ============================================ */
.task-banner {
  position: relative;
  padding: 24px 22px;
  border-radius: 18px;
  border: 1px solid var(--border-light);
  background:
    radial-gradient(circle at 16% 0%, rgba( 86,188,207,0.10), transparent 40%),
    radial-gradient(circle at 90% 6%, rgba(239,133,125,0.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.task-banner-head { text-align: center; margin-bottom: 20px; }
.task-banner-kicker {
  display: inline-block; margin-bottom: 7px;
  font-size: 12.68px; font-weight: 800; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--color-hf);
}
.task-banner-title {
  margin: 0 auto; max-width: 640px;
  font-size: 21.45px; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--text-secondary);
}
.task-banner-title strong { color: var(--text-primary); font-weight: 800; }
.task-banner-title sup { font-size: 0.6em; }
.task-banner-title em {
  font-style: normal; font-weight: 800; color: var(--color-lab-light);
}

/* flow: INPUTS  ▶  MODEL  ▶  OUTPUT (single row on desktop) */
.task-flow {
  display: flex; flex-direction: row; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 8px 14px;
}
.task-stage-label {
  display: block; text-align: center; margin-bottom: 9px;
  font-size: 11.7px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}

/* INPUTS group: HRRI ─existing RefGC→ LRGI, with a reuse caption */
.task-inputs-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: 12px;
}
.task-reuse {
  margin: 11px auto 0; text-align: center;
  font-size: 12.68px; line-height: 1.5; color: var(--color-HRRI-light);
}
.task-reuse strong { color: var(--text-primary); }
.tb-recycle { font-weight: 700; margin-right: 2px; }

/* shared cards */
.tb-card { margin: 0; display: flex; flex-direction: column; align-items: center; }
.tb-frame {
  position: relative; overflow: hidden; border-radius: 11px;
  background: var(--bg-primary);
  border: 1.5px solid var(--border-medium);
  box-shadow: 0 9px 18px rgba(0,0,0,0.30);
}
.tb-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-frame--hr { width: 146px; height: 146px; }
.tb-frame--lr {
  width: 92px; height: 92px;
  border-style: dashed; border-color: rgba(205,153,224,0.65);
}
.tb-card--hrri .tb-frame--hr { border-color: rgba(222,179,123,0.65); }
.tb-frame--ours {
  border: 2px solid rgba(66,133,244,0.85);
  box-shadow: 0 9px 20px rgba(0,0,0,0.34), 0 0 0 3px rgba(66,133,244,0.18);
}
.tb-ours-badge {
  position: absolute; top: 7px; right: 7px;
  padding: 3px 8px; border-radius: 749px;
  font-size: 11.05px; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(100deg, var(--color-output-dark), var(--color-output));
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.tb-card figcaption {
  margin-top: 7px; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.tb-tag {
  display: inline-block; padding: 2.5px 8px; border-radius: 749px;
  font-size: 10.72px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.tb-tag--hrri { color: var(--color-HRRI-light); background: rgba(222,179,123,0.20); border: 1px solid rgba(222,179,123,0.50); }
.tb-tag--lrgi { color: var(--color-LRGI-light); background: rgba(205,153,224,0.18); border: 1px solid rgba(205,153,224,0.50); }
.tb-tag--out  { color: #fff; background: linear-gradient(100deg, var(--color-output-dark), var(--color-output)); border: 1px solid rgba(66,133,244,0.70); }
.tb-sub {
  font-size: 11.05px; font-weight: 700; font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted); letter-spacing: 0.01em;
}

/* upstream RefGC connector inside the inputs group */
.tb-up {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  max-width: 104px; text-align: center;
}
.tb-up-label { font-size: 11.7px; font-weight: 800; font-style: italic; color: var(--text-secondary); }
.tb-up-arrow {
  position: relative; width: 50px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--color-HRRI), var(--color-LRGI));
}
.tb-up-arrow::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 7px solid var(--color-LRGI);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.tb-up-sub { font-size: 10.08px; color: var(--text-muted); line-height: 1.3; }

/* problem (✗) / benefit (✓) lists */
.tb-flaws, .tb-gains { list-style: none; margin: 8px 0 0; padding: 0; }
.tb-flaws {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.7px; font-weight: 600; text-align: justify;
}
.tb-gains {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px;
  font-size: 11.7px; font-weight: 600; text-align: justify;
}
.tb-flaws li, .tb-gains li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.tb-flaws li { color: var(--color-hf-light); }
.tb-flaws li::before { content: "\2717"; color: var(--color-hf-dark); font-weight: 900; }
.tb-gains li { color: var(--text-secondary); }
.tb-gains li::before { content: "\2713"; color: var(--color-HRGT-light); font-weight: 900; }

/* big inter-group arrows (INPUTS ▶ MODEL ▶ OUTPUT) */
.task-arrow {
  position: relative; flex: 0 0 auto; align-self: center;
  width: 38px; height: 2.5px; border-radius: 2px; margin-top: 14px;
}
.task-arrow::after {
  content: ""; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.task-arrow--in  { background: linear-gradient(90deg, var(--color-LRGI), var(--color-lab-light)); }
.task-arrow--in::after  { border-left: 10px solid var(--color-lab-light); }
.task-arrow--out { background: linear-gradient(90deg, var(--color-lab-light), var(--color-output)); }
.task-arrow--out::after { border-left: 10px solid var(--color-output); }

/* MODEL box */
.task-model { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.task-newtask {
  position: relative; padding: 0 4px;
  font-size: 11.7px; font-weight: 800; font-style: italic; letter-spacing: 0.02em;
  color: var(--text-primary);
  background: linear-gradient(180deg, transparent 55%, rgba(222,179,123,0.32) 55%);
  border-radius: 2px;
}
.task-model-box {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 24px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(86,188,207,0.14), rgba(239,133,125,0.13));
  border: 1.5px solid var(--color-lab-light);
  box-shadow: 0 0 18px rgba(255,222,184,0.16);
}
.task-model-name {
  font-size: 22.1px; font-weight: 800; letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--color-lab-light), var(--color-hf));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.task-model-name sup { font-size: 0.6em; vertical-align: super; }
.task-model-ours {
  -webkit-text-fill-color: var(--color-hf); color: var(--color-hf);
  font-size: 0.8em; font-weight: 700;
}
.task-model-ops {
  font-size: 13px; font-weight: 700; font-style: italic; color: var(--text-secondary);
  white-space: nowrap;
}

/* kicker labelling the carousel below as the example gallery */
.showcase-gallery-kicker {
  position: relative; z-index: 1; text-align: center;
  margin: 0 auto 14px; font-size: 12.68px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
}

/* responsive: stack the banner vertically once the single row no longer
   fits the container (mirrors the carousel's 980px side-by-side cutoff). */
@media (max-width: 980px) {
  .task-flow { flex-direction: column; }
  .task-arrow { width: 2.5px; height: 22px; margin: 4px 0; }
  .task-arrow::after {
    right: auto; left: 50%; top: auto; bottom: -2px; transform: translateX(-50%);
    border-top: none; border-bottom: none;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
  }
  .task-arrow--in::after  { border-top: 10px solid var(--color-lab-light); }
  .task-arrow--out::after { border-top: 10px solid var(--color-output); }
}

/* shrink the inputs row so HRRI ─→ LRGI still fits on small phones */
@media (max-width: 420px) {
  .tb-frame--hr { width: 128px; height: 128px; }
  .tb-frame--lr { width: 80px; height: 80px; }
  .task-inputs-row { gap: 8px; }
  .tb-up { max-width: 78px; }
  .tb-up-arrow { width: 34px; }
}

/* ===== Responsive ===== */
@media (max-width: 1320px) {
  /* Below the widened container, scale the showcase down a notch so the
     three columns still fit comfortably side by side. */
  .demo-stage--cmp { --frame: 410px; }
  .demo-frame--lr {
    width: 105px;
    height: 105px;
  }
  .demo-pipeline { width: 135px; }
  /* Keep horizontal arrow tight & up-arrow padding equal across sizes —
     middle column tracks pipeline width so the right gap stays = column-gap. */
  .demo-stage {
    grid-template-columns: auto 135px auto;
    column-gap: 9px;
    row-gap: 15px;
  }
}

@media (max-width: 1180px) {
  .demo-stage--cmp { --frame: 360px; }
  .demo-frame--lr {
    width: 90px;
    height: 90px;
  }
  .demo-pipeline { width: 127.5px; }
  .demo-stage {
    grid-template-columns: auto 127.5px auto;
    column-gap: 7.5px;
    row-gap: 15px;
  }
}

@media (max-width: 980px) {
  /* Single-column stack: LRGI → HRRI → pipeline (vertical arrow) → Output.
     The HRRI's upward arrow doesn't make sense in a linear stack, so we
     hide it and let the pipeline arrow alone indicate model flow. */
  .demo-stage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    column-gap: 0;
    row-gap: 10.5px;
  }
  .demo-card--lrgi { grid-column: 1; grid-row: auto; order: 1; }
  .demo-card--ref  {
    grid-column: 1;
    grid-row: auto;
    order: 2;
    margin-top: 0;
  }
  .demo-card--ref::before,
  .demo-card--ref::after { display: none; }
  .demo-pipeline   { grid-column: 1; grid-row: auto; order: 3; }
  .demo-card--out  { grid-column: 1; grid-row: auto; order: 4; }

  .demo-stage--cmp { --frame: 370px; }
  .demo-frame--lr {
    width: 105px;
    height: 105px;
  }

  .demo-pipeline {
    width: auto;
    min-width: 165px;
    margin: 3px auto;
  }
  .demo-arrow {
    width: 2.25px;
    height: 42px;
    margin: 4.5px auto;
    /* Matches desktop semantic: LRGI lavender → output coral */
    background: linear-gradient(180deg,
      var(--color-LRGI) 0%,
      var(--color-output) 100%);
  }
  .demo-arrow::after {
    right: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(50%);
    border-left: 5.25px solid transparent;
    border-right: 5.25px solid transparent;
    border-top: 9px solid var(--color-output);
    border-bottom: 0;
  }

  .demo-carousel { padding: 0 39px; }
  .carousel-arrow { width: 31.5px; height: 31.5px; font-size: 23.4px; }

  /* Slider layout: stack HRRI above the slider; the horizontal reuse
     connector only reads in the side-by-side desktop layout. */
  .demo-stage--cmp { flex-direction: column; }
  .demo-link { display: none; }
}

@media (max-width: 620px) {
  .showcase-flow {
    padding: 15px 10.5px 18px;
    border-radius: 15px;
  }

  .demo-stage--cmp { --frame: min(84vw, 370px); }
  .demo-frame--lr {
    width: 96px;
    height: 96px;
  }

  .demo-pipeline { min-width: 150px; }
  .demo-flow-top { font-size: 14.62px; }
  .demo-flow-bottom { font-size: 13.65px; }

  .demo-carousel { padding: 0 30px; }
  .carousel-arrow { width: 27px; height: 27px; font-size: 21.45px; }
  .carousel-arrow--prev { left: 2px; }
  .carousel-arrow--next { right: 2px; }
}

.figure-caption {
  font-size: 14.14px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 675px;
  margin: 12px auto 0;
  text-align: justify;
}
.figure-caption strong { color: var(--text-primary); }

/* Artifact tags (from paper Fig 1) */
.artifact-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 14.14px;
  font-weight: 500;
  margin: 0 1px;
}
.artifact-tag.a1 {
  background: rgba(239, 133, 125, 0.15);
  color: var(--color-dist-light);
  border: 1px solid rgba(239, 133, 125, 0.3);
}
  /* background: rgba(250, 13, 10, 0.15);
  color: #f87171;
  border: 1px solid rgba(250, 13, 10, 0.3);
} */
.artifact-tag.a2 {
  background: rgba(239, 133, 125, 0.15);
  color: var(--color-dist-light);
  border: 1px solid rgba(239, 133, 125, 0.3);
}
  /* background: rgba(222, 179, 123, 0.18);
  color: var(--color-domain-light);
  border: 1px solid rgba(222, 179, 123, 0.45);
} */
.artifact-tag.a3 {
  background: rgba(239, 133, 125, 0.15);
  color: var(--color-dist-light);
  border: 1px solid rgba(239, 133, 125, 0.3);
}
  /* background: rgba(83, 131, 236, 0.15);
  color: var(--color-pose-light);
  border: 1px solid rgba(83, 131, 236, 0.3);
} */
.artifact-tag.a4 {
  background: rgba(239, 133, 125, 0.15);
  color: var(--color-dist-light);
  border: 1px solid rgba(239, 133, 125, 0.3);
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section-title {
  font-size: clamp(1.46rem, 2.73vw, 1.9rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.section-lead {
  font-size: 16.09px;
  color: var(--text-secondary);
  text-align: justify;
  max-width: 800px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
.section-lead strong { color: var(--text-primary); }
.section-lead em {
  font-style: italic;
  color: var(--color-domain-light);
}
.sub-title {
  font-size: 1.17rem;
  font-weight: 600;
  margin: 30px 0 15px;
  color: var(--text-primary);
}

/* ============================================
   CONTRIBUTIONS
   ============================================ */
.contrib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.contrib-card {
  padding: 24px 21px;
  background: var(--bg-card);
  border-radius: 9px;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.contrib-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow-multi);
  border-color: var(--border-medium);
  background: var(--bg-elevated);
}
/* contrib-card top gradient line removed per design request */

.contrib-card:nth-child(1) .contrib-num { color: var(--text-primary); }
.contrib-card:nth-child(2) .contrib-num { color: var(--text-primary); }
.contrib-card:nth-child(3) .contrib-num { color: var(--text-primary); }

.contrib-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26.32px;
  font-weight: 700;
  opacity: 0.6;
  margin-bottom: 6px;
}
.contrib-title {
  font-size: 16.09px;
  font-weight: 700;
  margin: 0 0 9px 0;
  color: var(--color-lab-light);
}
.contrib-text {
  font-size: 14.14px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0;
}
.contrib-text strong { color: var(--text-primary); }
.contrib-text em {
  font-style: italic;
  color: var(--color-domain-light);
}

/* ============================================
   POSITIONING TABLE (Table 1)
   ============================================ */
.table-wrap {
  overflow-x: auto;
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}
.positioning-table {
  width: 120%;
  border-collapse: collapse;
  font-size: 13.65px;
  background: var(--bg-card);
  min-width: 540px;
  color: var(--text-secondary);
}
.positioning-table th,
.positioning-table td {
  padding: 9px 6px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-light);
}
.positioning-table thead th,
.positioning-table .sub-head th,
.positioning-table tbody td {
  text-align: center !important;
}
.positioning-table thead th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-primary);
}
/* SR/Ref/Ours category colors */
.positioning-table .cat-sr {
  background: rgba(83, 131, 236, 0.10);
  color: var(--color-emph-3);
}
.positioning-table .cat-ref {
  background: rgba(239, 133, 125, 0.10);
  color: var(--color-emph-2);
}
.positioning-table .cat-ours {
  background: var(--color-accent);
  color: #1a1a1a;
}
.positioning-table .sub-head th { font-size: 12.19px; font-weight: 600; }
.positioning-table tbody th {
  text-align: justify;
  padding-left: 12px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.positioning-table .cell-ours {
  background: rgba(222, 179, 123, 0.20);
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================
   METHOD FIGURES
   ============================================ */
.method-figure {
  margin: 30px 0;
  text-align: center;
}
.method-figure img {
  max-width: 100%;
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
  background: #fff;
  /* Subtle invert for figure (paper has light bg) �� keep as-is for fidelity */
}
/* Caption sits directly under the figure image and matches its width. */
.method-figure .figure-caption {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.insight-box {
  margin: 30px auto 0;
  max-width: 800px;          /* = Figure 1 width */
  padding: 21px 24px;
  /* Lab-anchored wash — keeps the model section's LF/HF blue/coral
     reserved for actual frequency semantics. */
  background: linear-gradient(135deg,
    rgba(13,  32, 127, 0.08),
    rgba(222, 179, 123, 0.06));
  border-radius: 9px;
  border-left: 3px solid var(--color-lab-light);
  border-top: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.insight-title {
  font-size: 15.11px;
  font-weight: 700;
  margin: 0 0 9px 0;
  color: var(--color-lab-light);
}
.insight-box p {
  font-size: 14.62px;
  line-height: 1.75;
  color: var(--text-primary);
  margin: 0;
}
.insight-box strong { color: var(--text-primary); }
.insight-box em {
  font-style: normal;
  color: var(--color-lab-light);
  font-weight: 600;
}

/* ============================================
   TRIPLET FIGURE (Figure 3)
   ============================================ */
/* Match Figure 1's width (.teaser-image, 750px). */
.dataset-figure {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.triplet-figure {
  max-width: 800px;
  margin: 36px auto 0;
}
.triplet-figure img {
  max-width: 100%;
  width: 100%;
}
/* Caption of Figure 3 matches its image width. */
.triplet-figure .figure-caption {
  max-width: 100%;
  width: 100%;
}

/* ============================================
   MOTIVATION FIGURE (Figure 5) & MODEL OVERVIEW (Figure 4)
   ============================================ */
.motivation-figure { margin-top: 42px; }
.motivation-figure img,
.model-overview-figure img {
  max-width: 100%;
  width: 100%;
}
/* Captions of Figure 4 / Figure 5 match their image width. */
.motivation-figure .figure-caption,
.model-overview-figure .figure-caption {
  max-width: 100%;
  width: 100%;
}

/* ============================================
   FREQUENCY DESIGN GRID �� using paper's Pose/Dist colors
   ============================================ */
.design-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 30px 0;
}
.design-card {
  padding: 21px;
  background: var(--bg-card);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}
.design-card:hover {
  background: var(--bg-elevated);
  transform: translateY(-2px);
}
/* LF expert = pose (gold), HF expert = dist (coral) */
.lf-card { border-top: 3px solid var(--color-pose); }
.lf-card:hover { box-shadow: var(--glow-pose); }
.hf-card { border-top: 3px solid var(--color-dist); }
.hf-card:hover { box-shadow: var(--glow-dist); }

.design-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 6px;
}
.freq-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 749.25px;
  font-size: 11.7px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.lf-pill {
  background: rgba(242, 192, 107, 0.15);
  color: var(--color-pose-light);
  border: 1px solid rgba(242, 192, 107, 0.3);
}
.hf-pill {
  background: rgba(239, 133, 125, 0.15);
  color: var(--color-dist-light);
  border: 1px solid rgba(239, 133, 125, 0.3);
}

.design-where {
  font-size: 11.7px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
}
.design-card p {
  font-size: 14.14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 9px 0;
}
.design-card strong { color: var(--text-primary); }
.design-sub {
  margin-top: 10.5px !important;
  padding-top: 10.5px;
  border-top: 1px dashed var(--border-medium);
  color: var(--text-primary) !important;
}

/* Formula box */
.formula-box {
  margin: 30px auto 0;
  max-width: 800px;
  padding: 21px;
  background: var(--bg-card);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1px solid var(--border-light);
}
.formula-label {
  font-size: 11.7px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0 0 9px 0;
}
.formula {
  margin: 0 0 12px 0;
  font-size: 15.6px;
  color: var(--text-primary);
}
.formula-desc {
  font-size: 13.16px;
  color: var(--text-secondary);
  margin: 0;
}

/* KaTeX dark theme adjustment */
.katex { color: var(--text-primary); }

/* ============================================
   RESULTS �� QUANT TABLES
   ============================================ */
.qual-figure {
  margin: 24px 0 36px;
  text-align: center;
}
.qual-figure img {
  max-width: 100%;
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-light);
}
.qual-figure .sub-title {
  text-align: center;
}
.qual-figure .figure-caption {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Match Table 2 (.quant-block) widths to Figure 6 so both image and
   caption blocks share the same horizontal extent. */
.quant-block {
  text-align: center;
}
.quant-block .table-image-wrap {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.quant-block .table-caption {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Model & Results content blocks share Figure 1's width (.teaser-image, 750px),
   centered. Section titles are left to span/center on their own. */
.section-model .section-lead,
.section-model .method-figure,
.section-model .design-grid,
.section-results .section-lead,
.section-results .quant-block,
.section-results .qual-figure {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Image-based tables (Table 1, 2, 3) �� white SVG inserts on the dark page */
.table-image-wrap {
  margin: 12px 0 6px;
  padding: 0;
  background: #ffffff;
  border-radius: 9px;
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-md);
  overflow: hidden;   /* clip SVG to rounded corners */
}
.table-image {
  display: block;
  width: 100%;
  height: auto;
}
/* Inside wild-table-block (which already provides a dark card), let the white SVG breathe */
.wild-table-block .table-image-wrap {
  margin: 0;
  box-shadow: none;
}

.quant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.62px;
  background: var(--bg-card);
  min-width: 510px;
  color: var(--text-secondary);
}
.quant-table th,
.quant-table td {
  padding: 7.5px 9px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.quant-table thead th {
  background: var(--bg-secondary);
  font-weight: 700;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-medium);
}
.quant-table tbody td:nth-child(1),
.quant-table tbody td:nth-child(2) {
  text-align: justify;
}
/* Ours row — warm HRRI-tan highlight (matches --color-accent) */
.quant-table .ours-row {
  background: rgba(222, 179, 123, 0.14);
  font-weight: 600;
}
.quant-table .ours-row td {
  border-top: 2px solid var(--color-accent);
  color: var(--text-primary);
}
.quant-table u {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
}
.quant-table strong {
  color: var(--color-accent);
  font-weight: 700;
}
.quant-table .ours-row strong {
  color: var(--color-accent);
  font-weight: 700;
}

.table-caption {
  font-size: 13.65px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 675px;
  margin: 12px auto 0;
  text-align: justify;
}
.table-caption strong { color: var(--text-primary); }

/* Positioning Our Task �� reuses .wild-grid card style */
.positioning-grid {
  margin-top: 18px;
  /* Table 1 and the Task-taxonomy figure share equal (1:1) column widths. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.section-positioning .container {
  max-width: var(--container-max);
}
.positioning-grid .wild-table-block,
.positioning-grid .wild-userstudy-block {
  padding: 15px;
}
.positioning-figure {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}
.positioning-grid .wild-userstudy-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.positioning-grid .wild-userstudy-block .figure-caption {
  margin-top: 13.5px;
}

/* ============================================
   IN-THE-WILD SECTION (Table 3 + Figure 7)
   ============================================ */
.wild-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  margin-top: 18px;
  align-items: stretch;
}

/* Reduce card padding so the table image fills its card. Scoped to the
   In-the-Wild section (width inherits the shared --container-max). */
.section-wild .container { max-width: var(--container-max); }
.section-wild .wild-grid { grid-template-columns: 1.75fr 1fr; }
.section-wild .wild-table-block { padding: 13.5px; }
.section-wild .wild-grid > .wild-table-block .table-image-wrap {
  width: 100%;
}
.section-wild .wild-grid > .wild-table-block .table-image {
  width: 100%;
  height: auto;
}

.wild-table-block, .wild-userstudy-block {
  background: var(--bg-card);
  padding: 21px;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.wild-userstudy-block {
  text-align: center;
}

/* Vertically center the table + caption inside the In-the-Wild table card
   so the card doesn't leave empty space below the caption when the
   neighbouring user-study card is taller. Scoped to .wild-grid so the
   Positioning section is unaffected. */
.wild-grid > .wild-table-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wild-grid > .wild-table-block .table-image-wrap {
  margin: 0 auto;
  width: 100%;
}
.wild-grid > .wild-table-block .table-caption {
  margin-top: 13.5px;
  margin-bottom: 0;
}

.wild-quant-table {
  font-size: 12.19px;
  min-width: 450px;
}
.wild-quant-table th,
.wild-quant-table td {
  padding: 6px 4.5px;
}
.wild-quant-table .sub-head th {
  font-size: 11.21px;
  font-weight: 500;
  background: var(--bg-elevated);
}

.userstudy-figure {
  max-width: 100%;
  width: 100%;
  margin: 12px auto;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}

/* User study stat cards */
.userstudy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
  margin: 18px 0 9px;
}
.us-card {
  padding: 18px 9px;
  background: var(--bg-elevated);
  border-radius: 9px;
  text-align: center;
  border: 1px solid var(--border-light);
  transition: all 0.3s ease;
}
.us-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-accent);
  box-shadow: var(--glow-domain);
}
.us-value {
  font-size: 35.1px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg,
    var(--color-accent),
    var(--color-emph-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.us-percent { font-size: 17.55px; }
.us-label {
  font-size: 14.62px;
  color: var(--text-secondary);
  margin-top: 6px;
  line-height: 1.4;
}

.wild-userstudy-block .userstudy-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 12px 0 9px;
}
.wild-userstudy-block .us-card {
  padding: 13.5px 4.5px;
}
.wild-userstudy-block .us-value {
  font-size: 28.28px;
}
.wild-userstudy-block .us-percent {
  font-size: 15.6px;
}
.wild-userstudy-block .us-label {
  font-size: 13.65px;
}

.us-baseline-text {
  font-size: 14.14px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

@media (max-width: 980px) {
  .wild-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ABLATION SECTION (Table 4 + Figure 8)
   ============================================ */
/* Ablation section width inherits the shared --container-max (= TL;DR card). */
.section-ablation .container { max-width: var(--container-max); }
.ablation-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 24px;
  margin-top: 18px;
  align-items: start;
}

.ablation-table-block, .ablation-figure-block {
  background: var(--bg-card);
  padding: 21px;
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

/* Ablation table — light theme matching the SVG-rendered tables 1-3.
   • White card (.table-image-wrap) hosting the HTML table
   • Dark text on white, horizontal divider lines only (no row borders)
   • ✓ / ✗ marks in the SVG colours (green / red) */
.ablation-table-block .table-image-wrap {
  /* Inside the dark .ablation-table-block, no extra shadow / margin */
  margin: 0;
  padding: 10.5px 13.5px;
  box-shadow: none;
}

.ablation-quant-table.quant-table {
  background: transparent;
  color: #1f2328;
  font-size: 14.14px;
  min-width: 0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

.ablation-quant-table th,
.ablation-quant-table td {
  padding: 6px 7.5px;
  border-bottom: none;          /* override base quant-table row borders */
}
.ablation-quant-table thead th,
.ablation-quant-table tbody td {
  text-align: center !important;
  vertical-align: middle;
}

/* Top + bottom rule (1.5 px) and a single divider under the header (1 px),
   mirroring the SVG layout for tables 1-3. */
.ablation-quant-table thead th {
  background: transparent;
  color: #0d1117;
  font-size: 13.16px;
  font-weight: 700;
  border-top: 1.5px solid #1f2328;
  border-bottom: 1px solid #1f2328;
}
.ablation-quant-table tbody tr:last-child th,
.ablation-quant-table tbody tr:last-child td {
  border-bottom: 1.5px solid #1f2328;
}

.ablation-quant-table tbody th {
  text-align: justify;
  background: transparent;
  color: #1f2328;
  font-weight: 400;        /* matches SVG row labels — no font-weight attr */
  padding-left: 9px;
}

/* Section divider between component rows (FreqMoLE / L_f) and metric rows,
   mirroring the 0.8 px #bfc6cd group dividers used in tables 1-3. */
.ablation-quant-table tbody tr.component-row + tr:not(.component-row) th,
.ablation-quant-table tbody tr.component-row + tr:not(.component-row) td {
  border-top: 0.8px solid #bfc6cd;
}

/* "Ours" column highlight reuses the warm HRRI-tan composition of the dark
   quant-table's .ours-row: tan-tint fill + a 2 px --color-accent frame +
   tan bold values, so the (d) Ours column reads as the same "Ours" emphasis. */
.ablation-quant-table .th-ours {
  background: rgba(222, 179, 123, 0.30);
  color: #0d1117;                          /* same as other header cells */
  font-weight: 700;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  border-bottom: 1px solid #1f2328;        /* matches header divider rule */
}
.ablation-quant-table .cell-ours {
  background: rgba(222, 179, 123, 0.14);
  border-left: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  font-weight: 600;                        /* matches .ours-row weight */
}
.ablation-quant-table tbody tr:last-child .cell-ours {
  border-bottom: 2px solid var(--color-accent);   /* close the column frame */
}
.ablation-quant-table strong {
  color: #000000;          /* a/b/c columns: SVG best-value pure black */
  font-weight: 700;
}
.ablation-quant-table .cell-ours strong {
  color: var(--color-accent);   /* warm HRRI-tan, matching .ours-row strong */
  font-weight: 700;
}
.ablation-quant-table u {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.45);
}

/* ✓ / ✗ marks — same colours as the SVG tables */
.ablation-quant-table .component-row td,
.ablation-quant-table .component-row th {
  font-size: 13.65px;
}
.ablation-quant-table .mark {
  font-size: 13.65px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;     /* stay in Inter — not the browser symbol font */
}
.ablation-quant-table .mark--yes { color: #1a7f37; }   /* matches SVG green */
.ablation-quant-table .mark--no  { color: #cf222e; }   /* matches SVG red */

.ablation-figure-block {
  text-align: center;
}
.ablation-figure-block img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}
.ablation-figure-block .sub-title,
.ablation-figure-block .figure-caption {
  text-align: justify;
}

@media (max-width: 980px) {
  .ablation-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ABSTRACT
   ============================================ */
.abstract-text {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15.6px;
  line-height: 1.85;
  color: var(--text-secondary);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.abstract-text p { margin: 0 0 13.5px 0; }
.abstract-text p:last-child { margin-bottom: 0; }
.abstract-text strong {
  color: var(--text-primary);
}
.abstract-text strong em,
.abstract-text em strong {
  color: var(--color-accent);
}

/* ============================================
   BIBTEX
   ============================================ */
.bibtex-block {
  background: #000;
  color: #adb8c5;
  padding: 18px 21px;
  border-radius: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.68px;
  line-height: 1.7;
  overflow-x: auto;
  max-width: 800px;
  margin: 0 auto 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-medium);
}
.bibtex-block code { color: inherit; background: transparent; }

.copy-btn {
  display: block;
  margin: 0 auto;
  padding: 6.75px 16.5px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: 749.25px;
  font-size: 12.68px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s;
  font-family: inherit;
}
.copy-btn:hover {
  background: var(--bg-elevated);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
  box-shadow: var(--glow-domain);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  padding: 24px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-light);
}
.footer-text {
  font-size: 12.68px;
  color: var(--text-muted);
  margin: 0;
}
.footer-text a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px dashed var(--border-medium);
  transition: all 0.2s;
}
.footer-text a:hover {
  color: var(--color-lab-light);
  border-bottom-color: var(--color-lab-3);
}
/* MapMyVisitors map.js badge (world map + "Total Pageviews" count). The widget
   scales to its container's width, so size it by changing the width below. */
.footer-visitors {
  width: 300px;
  max-width: 300px;
  margin: 1.5rem auto 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  section.section { padding: 42px 0; }
  .hero { padding: 42px 0 30px; }
  .action-buttons { gap: 6px; }
  .action-btn { padding: 6.75px 12px; font-size: 14.62px; }
  .us-value { font-size: 28.28px; }
  .us-percent { font-size: 15.6px; }
  .tldr-card { padding: 15px; }
  .tldr-text { font-size: 15.11px; }
}

/* ============================================================
   FIGURE 1 — faithful task overview (paper Fig. 1, top strip).
   HRRI ──RefGC──▶ LRGI ──RefGC-SR²(Ours)──▶ Our Result, plus an
   orange skip-arrow for the reused HRRI reference. Self-contained
   .fig1-* classes; figure-specific colors (orange flow / red ✗ /
   green ✓ / magenta + green bboxes) intentionally mirror the paper.
   ============================================================ */
.fig1-kicker {
  text-align: center;
  margin: 26px auto 14px;
  padding-top: 20px;
  border-top: 1px solid var(--border-light);
  max-width: 320px;
  font-size: 12.68px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted);
}
.fig1 {
  --fig1-orange:  var(--color-result);  /* reuse arrow → our result (blue) */
  --fig1-red:     #cf222e;              /* LRGI flaws — warning marker */
  --fig1-green:   var(--color-result);  /* "Our Result" frame + gains (blue) */
  --fig1-magenta: #d6336c;
  margin: 0 auto;
  max-width: 720px;
}
.fig1-grid {
  display: grid;
  grid-template-columns: 150px 1fr 104px 1.25fr 156px;
  grid-template-rows: auto 30px auto;
  align-items: center;
  justify-items: center;
  column-gap: 8px;
}

/* row 1 — column titles */
.fig1-title {
  grid-row: 1; align-self: end;
  text-align: center; max-width: 158px;
  font-size: 12.35px; font-weight: 700; line-height: 1.3;
  color: var(--text-secondary);
}
.fig1-title--hrri   { grid-column: 1; }
.fig1-title--lrgi   { grid-column: 3; max-width: 150px; }
.fig1-title--result { grid-column: 5; }
.fig1-abbr { color: var(--text-muted); }

/* row 2 — orange reuse skip-arrow (⊓: rises from HRRI, drops into our step) */
.fig1-reuse {
  grid-row: 2; grid-column: 1 / 5; align-self: end;
  height: 24px; margin: 0 6px 0 68px;
  border: 2.5px solid var(--fig1-orange);
  border-bottom: none; border-radius: 9px 9px 0 0;
  position: relative;
}
.fig1-reuse::after {
  content: ""; position: absolute; right: -6px; bottom: -9px;
  width: 0; height: 0;
  border-left: 6.5px solid transparent; border-right: 6.5px solid transparent;
  border-top: 9px solid var(--fig1-orange);
}

/* row 3 — image columns */
.fig1-col { grid-row: 3; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.fig1-col--hrri   { grid-column: 1; }
.fig1-col--lrgi   { grid-column: 3; }
.fig1-col--result { grid-column: 5; }

.fig1-frame {
  position: relative; overflow: hidden; border-radius: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-medium);
  box-shadow: 0 4px 14px rgba(23,33,51,0.10);
}
.fig1-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig1-frame--hr { width: 148px; height: 112px; }
.fig1-frame--lr { width: 100px; height: 78px; border-color: var(--fig1-magenta); }
.fig1-frame--result { border: 2px solid var(--fig1-green); }

/* ✗ flaws under LRGI / ✓ gains above the result */
.fig1-flaws, .fig1-gains { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fig1-flaws li, .fig1-gains li { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 11.7px; font-weight: 700; }
.fig1-flaws li { color: var(--fig1-red); }
.fig1-flaws li::before { content: "\2717"; font-weight: 900; }
.fig1-gains { align-items: flex-start; }
.fig1-gains li { color: var(--fig1-green); }
.fig1-gains li::before { content: "\2713"; font-weight: 900; }

/* arrows + step labels (row 3, between the images) */
.fig1-step { grid-row: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; }
.fig1-step--refgc { grid-column: 2; }
.fig1-step--ours  { grid-column: 4; }
.fig1-arrow { position: relative; width: 100%; height: 2.5px; border-radius: 2px; }
.fig1-arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.fig1-arrow--black { background: var(--text-primary); }
.fig1-arrow--black::after { border-left: 10px solid var(--text-primary); }
.fig1-arrow--orange { background: var(--fig1-orange); height: 3px; }
.fig1-arrow--orange::after { border-left: 11px solid var(--fig1-orange); border-top-width: 7px; border-bottom-width: 7px; }
.fig1-step-name { font-size: 12.35px; font-weight: 800; font-style: italic; color: var(--text-primary); line-height: 1.2; }
.fig1-step-name--ours sup { font-size: 0.6em; vertical-align: super; }
.fig1-step-sub { font-size: 11.05px; font-style: italic; color: var(--text-secondary); line-height: 1.35; }
.fig1-step-sub--ops { font-weight: 700; color: var(--text-primary); }

/* responsive: stack vertically on small screens */
@media (max-width: 720px) {
  .fig1-grid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .fig1-reuse { display: none; }
  .fig1-title { align-self: center; max-width: 90%; }
  .fig1-title--hrri   { order: 1; }
  .fig1-col--hrri     { order: 2; }
  .fig1-step--refgc   { order: 3; }
  .fig1-title--lrgi   { order: 4; }
  .fig1-col--lrgi     { order: 5; }
  .fig1-step--ours    { order: 6; }
  .fig1-title--result { order: 7; }
  .fig1-col--result   { order: 8; }
  .fig1-arrow { width: 2.5px; height: 20px; }
  .fig1-arrow::after {
    right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%);
    border-top: none; border-bottom: none;
    border-left: 6px solid transparent; border-right: 6px solid transparent;
  }
  .fig1-arrow--black::after  { border-top: 10px solid var(--text-primary); }
  .fig1-arrow--orange::after { border-top: 11px solid var(--fig1-orange); border-left-width: 7px; border-right-width: 7px; }
}
/* ============================================================
   DEPLOYMENT NORMALIZATION (uniform 800px content column)
   Tables, figures and their captions share one width; captions
   are left-aligned and start at the figure/table's left edge.
   Key Contributions / Positioning grids keep their own layout.
   ============================================================ */
/* Captions span the full width of their figure/table, left-aligned
   (fixes Table 1 / Table 3 captions that were indented & narrower). */
.figure-caption,
.table-caption {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: justify;
}
/* Figure/table images fill the 800px column. */
.teaser-image,
.method-figure img,
.qual-figure img,
.table-image {
  width: 100%;
  height: auto;
}
/* BibTeX block = TL;DR width (800px). */
.bibtex-block { max-width: 800px; }

/* The interactive showcase keeps its wider, side-by-side layout. */
.section-showcase .container { max-width: 1180px; }

/* Comparison-slider demo — equalize the two cards so the image frames line up and the
   connector sits centered (was misaligned, esp. In-the-wild). Tighter arrows. */
.demo-link { gap: 20px; }
.demo-stage--cmp .demo-reuse-note,
.demo-stage--cmp .demo-cmp-hint {
  min-height: 1.8em;   /* equalizes both cards (note = 1 line; hint now empty) */
  margin-top: 10px;
  width: var(--frame);
  max-width: 100%;
  box-sizing: border-box;
}

/* fix-strip labels reuse Figure-1's .artifact-tag look for visual unity; the only
   dynamic part is the "solved" check that scales + fades in as Ours is revealed
   (its space is always reserved, so chips never shift on the one line). */
.fix-solved {
  display: inline-block;
  margin-left: 5px;
  color: #34d399;
  font-weight: 900;
  opacity: clamp(0, calc((var(--reveal, 0) - 0.12) * 2), 1);
  transform: scale(calc(0.5 + var(--reveal, 0) * 0.6));
  transition: opacity 0.12s linear, transform 0.12s linear;
}