/* GradSplat project page, in the layout of the Nerfies template (Bulma). */
[hidden] { display: none !important; }
:root {
  --ink: #363636;
  --ink-2: #4a4a4a;
  --ink-3: #7a7a7a;
  --line: #e5e7eb;
  --soft: #f5f5f5;
  --ours: #2453d6;
  --best: #dbe9ff;
  --second: #eef4ff;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

body { font-family: "Noto Sans", sans-serif; color: var(--ink); }
img, video, canvas { max-width: 100%; }
.publication-title, .publication-authors, .publication-affils, .title, .subtitle, .button,
.chip, .carousel-label { font-family: "Google Sans", "Noto Sans", sans-serif; }

/* ---------------------------------------------------------------- header */
.title.is-1.publication-title { font-size: 2.3rem; line-height: 1.3; }
.publication-authors { color: var(--ink); margin-top: 0.2rem; }
.publication-affils { color: var(--ink-2); margin-top: 0.5rem; }
.author-block { display: inline-block; margin: 0 0.3rem; }
.publication-authors sup, .publication-affils sup, .publication-notes sup { font-size: 0.65em; }
.publication-notes { color: var(--ink-3); font-size: 0.92rem; margin-top: 0.35rem; }
.publication-links { margin-top: 1.3rem; }
.link-block { display: inline-block; margin: 3px 2px; }
.link-block .button .icon { margin-right: 0.1rem; }

/* ---------------------------------------------------------------- teaser and video carousel */
.hero.teaser .hero-body { padding-top: 0; padding-bottom: 2.5rem; }
.teaser-img { width: 100%; display: block; }
.teaser-caption.subtitle { font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); margin-top: 1.1rem; }
.hero.is-light { background-color: var(--soft); }
.carousel { position: relative; max-width: 960px; margin: 0 auto; }
.carousel-window { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.45s ease; }
.carousel-item { flex: 0 0 100%; min-width: 0; }
.carousel-item video { width: 100%; display: block; aspect-ratio: 908 / 452; background: #fff; border-radius: 4px; }
.carousel-label { text-align: center; color: var(--ink-2); margin-top: 0.45rem; font-size: 1rem; }
.carousel-nav {
  position: absolute; top: calc(50% - 30px); transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); cursor: pointer;
  color: var(--ink); display: grid; place-items: center; z-index: 2;
}
.carousel-nav.prev { left: -20px; }
.carousel-nav.next { right: -20px; }
.carousel-nav:hover { background: #fff; color: #000; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 0.5rem; }
.carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #c8c8c8; cursor: pointer; }
.carousel-dots button.on { background: var(--ink-2); }

/* ---------------------------------------------------------------- sections, figures, captions */
.section .title.is-3 { margin-bottom: 1.4rem; }
.section .title.is-4 { margin: 3rem 0 1.2rem; }
img.figure { width: 100%; display: block; margin: 0 auto; }
img.figure.mt-figure { margin-top: 2.2rem; }
.caption { text-align: center; color: var(--ink-2); font-size: 0.95rem; max-width: 900px; margin: 0.8rem auto 0; line-height: 1.55; }
.lead { text-align: center; color: var(--ink-2); max-width: 880px; margin: 0 auto 1.3rem; }
.small-note { text-align: center; color: var(--ink-3); font-size: 0.86rem; margin-top: 0.7rem; }
.approach-text { margin-top: 1.6rem; }
.content ul { margin-top: 0.6rem; }

/* ---------------------------------------------------------------- steps */
.row-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 1rem; }
.chip {
  border: 1px solid #dbdbdb; background: #fff; border-radius: 999px; padding: 5px 16px; cursor: pointer; color: var(--ink);
  font-size: 0.95rem; transition: all 0.15s ease;
}
.chip:hover { border-color: #b5b5b5; }
.chip.active { background: #363636; color: #fff; border-color: #363636; }
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
.steps-fig { margin: 0; text-align: center; }
.steps-fig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 4px; }
.steps-fig figcaption { margin-top: 6px; color: var(--ink-2); font-size: 0.95rem; }
.steps-cap b { color: var(--ours); }
.steps-slider { max-width: 860px; margin: 14px auto 0; }
.steps-range { width: 100%; accent-color: var(--ink); }
.steps-ticks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); font-size: 0.74rem; color: var(--ink-3); text-align: center; line-height: 1.25; }
.steps-ticks span { cursor: pointer; padding-top: 2px; }
.steps-ticks span.on { color: var(--ink); font-weight: 600; }
.steps-ticks span i { display: block; font-style: normal; color: var(--ours); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tables */
.table-box { overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.narrow-table { max-width: 860px; margin: 0 auto; }
table.res { border-collapse: collapse; width: 100%; font-size: 0.86rem; font-variant-numeric: tabular-nums; }
table.res th, table.res td { padding: 6px 8px; text-align: center; white-space: nowrap; border-bottom: 1px solid #ededed; }
table.res thead th { font-family: "Google Sans", sans-serif; font-weight: 500; color: var(--ink); }
table.res th.grp { border-bottom: 1px solid #cfcfcf; }
table.res td.m, table.res th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; padding-left: 10px; }
table.res td.best { background: var(--best); font-weight: 700; }
table.res td.second { background: var(--second); }
table.res td.sep, table.res th.sep { border-left: 1px solid #e3e3e3; }
table.res tr.ours td { color: #1b2a8a; }
table.res tr.ours td.m { background: #f6f8ff; font-weight: 600; }
table.res tr.block td { background: #fafafa; color: var(--ink-2); font-size: 0.82rem; }
table.res tbody tr:last-child td { border-bottom: 0; }
.best-key, .second-key { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 0.82rem; margin-left: 4px; }
.best-key { background: var(--best); font-weight: 700; }
.second-key { background: var(--second); }

/* ---------------------------------------------------------------- bibtex and footer */
.bibtex { position: relative; }
.bibtex pre { background: var(--soft); padding: 1.1rem 1.25rem; font-size: 0.85rem; line-height: 1.5; }
#copy-bibtex {
  position: absolute; right: 10px; top: 10px; border: 1px solid #dbdbdb; background: #fff; border-radius: 4px;
  padding: 3px 10px; cursor: pointer; font-size: 0.82rem; color: var(--ink-2);
}
.footer .icon-link { font-size: 25px; color: #000; margin: 0 6px; }
.footer .content p { font-size: 0.9rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 1100px) {
  .carousel-nav.prev { left: 6px; }
  .carousel-nav.next { right: 6px; }
}
@media (max-width: 768px) {
  .title.is-1.publication-title { font-size: 1.5rem; }
  .publication-title br { display: none; }
  .steps-grid { gap: 8px; }
  .steps-ticks { font-size: 0.6rem; }
}
@media (max-width: 520px) {
}

/* ---------------------------------------------------------------- method comparison */
.seg-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 0.8rem; }
.seg-row .chip.small { padding: 3px 12px; font-size: 0.88rem; }
.cmp-caption { margin: 0 auto 0.9rem; max-width: 860px; }
.thumb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 0.9rem; }
.thumb-btn {
  border: 2px solid transparent; padding: 0; background: none; cursor: pointer; border-radius: 5px; line-height: 0;
  opacity: 0.72; transition: opacity 0.15s ease, border-color 0.15s ease;
}
.thumb-btn img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; }
.thumb-btn.small img { width: 44px; height: 44px; }
.thumb-btn:hover { opacity: 1; }
.thumb-btn.active { border-color: #363636; opacity: 1; }
.cmp-row-label { text-align: center; font-size: 0.8rem; color: var(--ink-3); margin-bottom: 0.3rem; font-family: "Google Sans", sans-serif; }
.cmp-inputs { text-align: center; margin-bottom: 0.9rem; }
.cmp-inputs img { max-height: 120px; max-width: 100%; border-radius: 3px; }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; max-width: 860px; margin: 0 auto; }
.method-buttons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 8px; }
.mbtn {
  border: 1px solid #dbdbdb; background: #fff; border-radius: 4px; padding: 2px 8px; font-size: 0.82rem; cursor: pointer;
  color: var(--ink-2); font-family: "Google Sans", "Noto Sans", sans-serif;
}
.mbtn:hover { border-color: #b5b5b5; color: #000; }
.mbtn.active { background: #363636; color: #fff; border-color: #363636; }
.mbtn.ours.active { background: var(--ours); border-color: var(--ours); }
.mbtn.gt { font-style: italic; }
.cmp-img {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; background: #f0f0f0;
  cursor: grab; touch-action: none; user-select: none;
}
.cmp-img:active { cursor: grabbing; }
.cmp-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: none; }
.cmp-badge {
  position: absolute; left: 8px; bottom: 8px; background: rgba(255, 255, 255, 0.92); border-radius: 4px; padding: 2px 8px;
  font-size: 0.85rem; color: var(--ink); font-family: "Google Sans", sans-serif; font-variant-numeric: tabular-nums;
}
.cmp-badge b { color: var(--ours); }
.cmp-tools { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
@media (max-width: 768px) {
  .cmp-grid { gap: 8px; }
  .mbtn { font-size: 0.74rem; padding: 2px 5px; }
  .thumb-btn img { width: 48px; height: 48px; }
}