/* Original, dependency-free styling inspired by the Nerfies project page. */
:root { --ink:#363636; --muted:#686868; --line:#e5e5e5; --link:#3273dc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:'Noto Sans','Helvetica Neue',Arial,sans-serif; font-size:16px; line-height:1.65; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
button,select { font:inherit; }
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #73a9ed; outline-offset:4px; }
h1,h2,h3,h4 { color:#303030; line-height:1.2; }
h1 { font-size:46px; font-weight:600; letter-spacing:-1.6px; margin:0 auto 24px; max-width:1120px; }
h2 { font-size:31px; font-weight:600; text-align:center; margin:0 0 22px; letter-spacing:-.6px; }
h3 { font-size:23px; font-weight:600; margin:32px 0 14px; }
h4 { font-size:16px; font-weight:600; margin:0 0 10px; }
p { margin:0 0 16px; }
.publication-header { text-align:center; padding:60px 24px 36px; }
.authors { color:var(--link); font-size:20px; margin-bottom:8px; }
.affiliation { color:var(--muted); font-size:16px; margin:0 0 8px; }
.venue { color:var(--muted); font-size:15px; margin-bottom:22px; }
.publication-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.publication-links a,.publication-links button { border-radius:24px; background:#363636; color:#fff; padding:8px 19px; font-size:15px; line-height:1.65; }
.publication-links a:hover { background:#1f1f1f; text-decoration:none; }
.publication-links button:disabled { background:#6b6b6b; cursor:default; opacity:1; }
.content-section { width:calc(100% - 48px); max-width:1100px; margin:0 auto; padding:52px 0; scroll-margin-top:24px; }
.reading-column { width:calc(100% - 48px); max-width:850px; margin:0 auto; }
.abstract-section { padding:48px 0; background:#f7f7f7; }
.abstract-section p { text-align:justify; }
.teaser { max-width:980px; padding:0 0 42px; }
.deployment-section { max-width:980px; border-top:1px solid var(--line); }
video { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#101820; border-radius:7px; }
.teaser-caption { max-width:820px; margin:18px auto 0; text-align:center; font-size:19px; line-height:1.6; }
.teaser .quiet-details { max-width:850px; margin:18px auto 0; }
.section-intro { max-width:840px; text-align:center; margin:0 auto 26px; }
figure { margin:24px 0; }
figure img { width:100%; height:auto; display:block; }
figcaption { text-align:center; font-size:15px; margin-top:14px; color:var(--muted); }
details { border-top:1px solid var(--line); padding:13px 0; margin-top:20px; }
summary { cursor:pointer; color:var(--link); font-size:14px; font-weight:500; }
details[open] > summary { margin-bottom:16px; }
details p { color:var(--muted); font-size:14px; }
details details { margin-top:12px; }
.controls-bar,.compare-controls { display:flex; flex-wrap:wrap; gap:16px; margin:22px 0; align-items:end; }
.control-field,.compare-controls > div { flex:1; min-width:0; }
label { display:block; font-size:13px; font-weight:500; color:#555; margin-bottom:5px; }
select { width:100%; max-width:100%; min-width:0; border:1px solid #d4d4d4; border-radius:4px; padding:8px 30px 8px 10px; color:var(--ink); background:#fff; font-size:14px; }
.gallery-summary { font-size:14px; color:var(--muted); margin:14px 0; }
.reference-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ref-video-card { min-width:0; }
.ref-video-info { padding:12px 0; }
.ref-window-note,.ref-source-name { color:var(--muted); font-size:13px; margin:0; overflow-wrap:anywhere; }
.ref-video-info details { margin-top:9px; padding-top:9px; }
.empty-example { border:1px dashed #d7d7d7; border-radius:7px; min-height:200px; padding:24px; display:flex; flex-direction:column; justify-content:center; }
.empty-example p { color:var(--muted); font-size:13px; }
.comparison-section { border-top:1px solid var(--line); }
.comparison-block { margin-bottom:38px; }
.comparison-block:last-child { margin-bottom:0; }
.comparison-block > p { max-width:960px; }
.comparison-table-wrap table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.45; }
.comparison-table-wrap { overflow-x:auto; margin:20px 0; }
.comparison-table-wrap th,.comparison-table-wrap td { text-align:right; padding:11px 12px; border-bottom:1px solid var(--line); white-space:nowrap; font-variant-numeric:tabular-nums; }
.comparison-table-wrap th:first-child,.comparison-table-wrap td:first-child { text-align:left; white-space:normal; min-width:145px; }
.comparison-table-wrap thead th { border-top:2px solid #555; border-bottom:1px solid #888; font-weight:600; font-size:13px; }
.comparison-table-wrap tbody th { font-weight:400; }
.comparison-table-wrap .ours-row { background:#f3f3f3; }
.comparison-table-wrap .ours-row th { font-weight:700; }
.comparison-table-wrap .table-divider td { background:#fafafa; font-size:13px; font-style:italic; text-align:left; }
.comparison-table-wrap caption { caption-side:bottom; text-align:left; font-size:12px; color:var(--muted); padding:10px 0 0; }
.download-links { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:13px; margin:16px 0; }
.media-comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.compare-card { min-width:0; padding:0; }
.compare-card label { margin-top:10px; }
.compare-card video { margin:13px 0; }
.source-caption { color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin:8px 0; }
.clip-metrics { font-size:13px; }
.matched-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.comparison-buttons { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 8px; }
button { background:#363636; color:white; border:0; border-radius:20px; padding:7px 16px; cursor:pointer; font-size:13px; }
button:hover { background:#1f1f1f; }
.playback-status { font-size:12px; color:var(--muted); min-height:18px; }
.small-note { color:var(--muted); font-size:13px; }
.velocity-axis-note { font-size:13px; color:var(--muted); margin-bottom:8px; }
.velocity-grid-scroll { overflow-x:auto; padding:3px 3px 5px; }
#velocity-grid { display:grid; gap:3px; min-width:0; }
.velocity-tick { align-self:center; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
#velocity-grid .velocity-cell { height:29px; min-width:0; padding:0; border:2px solid transparent; border-radius:2px; position:relative; }
#velocity-grid .velocity-cell.recorded { border-color:#e2af24; }
#velocity-grid .velocity-cell.selected::after { content:''; position:absolute; inset:3px; border:2px solid white; outline:1px solid #333; pointer-events:none; }
#velocity-grid .velocity-cell:focus-visible { outline:2px solid #111; outline-offset:1px; z-index:1; }
.velocity-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; font-size:12px; margin:14px 0; }
.velocity-key { display:inline-flex; align-items:center; gap:5px; }
.velocity-key i { display:inline-block; width:20px; height:14px; border-radius:1px; }
.velocity-key .support-swatch { border:2px solid #e2af24; background:white; }
.velocity-gradient { display:inline-block; width:150px; height:12px; background:linear-gradient(90deg,#8C3B2A,#D79A7B,#F4F2ED,#B8D8CF,#2A9D8F,#174E5A); }
h3.velocity-selected { font-size:17px; margin:22px 0 8px; }
.velocity-videos video { margin-bottom:10px; }
.video-segment-controls { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.video-segment-controls[hidden] { display:none; }
.video-segment-controls button { padding:5px 10px; min-width:56px; font-size:13px; }
.video-segment-controls input { flex:1; min-width:0; accent-color:var(--accent, #185a7b); }
.video-segment-controls span { white-space:nowrap; font-size:12px; font-variant-numeric:tabular-nums; }
.velocity-grid-panel { min-width:0; }
.velocity-reference-control { flex-basis:100%; }
@media (min-width:1050px) {
  .velocity-workspace { display:grid; grid-template-columns:minmax(520px,1.3fr) minmax(350px,1fr); gap:32px; align-items:start; }
  .velocity-grid-panel .controls-bar { margin-top:0; }
  .velocity-videos { grid-template-columns:1fr; gap:16px; position:sticky; top:20px; }
  .velocity-videos .source-caption { margin:4px 0; }
}
.trial-failed { color:#a63224; font-weight:600; }
.pair-result { color:var(--ink); font-size:15px; margin:15px 0; }
.footnote { text-align:center; color:var(--muted); font-size:13px; }
.source-id { font-variant-numeric:tabular-nums; }
footer { text-align:center; padding:34px 24px; margin-top:24px; background:#f7f7f7; color:var(--muted); font-size:13px; }
footer p { margin:0 0 7px; }
.skip-link { position:absolute; left:16px; top:-80px; background:white; padding:10px; z-index:10; }
.skip-link:focus { top:10px; }
@media (max-width:800px) {
  h1 { font-size:36px; letter-spacing:-1px; }
  .desktop-break { display:none; }
  .publication-header { padding-top:40px; }
  .content-section { padding:38px 0; }
  .teaser { padding-top:0; }
  .matched-video-grid { grid-template-columns:1fr 1fr; }
  .matched-video-grid > :first-child { grid-column:1/-1; max-width:440px; justify-self:center; width:100%; }
  .reference-gallery-grid { gap:14px; }
}
@media (max-width:600px) {
  body { font-size:15px; }
  h1 { font-size:30px; }
  h2 { font-size:26px; }
  h3 { font-size:20px; }
  .content-section,.reading-column { width:calc(100% - 32px); }
  .publication-header { padding:34px 16px 28px; }
  .publication-links a,.publication-links button { padding:7px 14px; font-size:13px; }
  .teaser-caption { font-size:17px; }
  .abstract-section p { text-align:left; }
  .reference-gallery-grid,.media-comparison-grid,.matched-video-grid { grid-template-columns:1fr; }
  .matched-video-grid > :first-child { max-width:none; }
  .controls-bar,.compare-controls { gap:12px; }
  .controls-bar > div,.compare-controls > div { flex-basis:100%; }
  .empty-example { min-height:130px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Guided browsing: keep choices visible and experimental detail on its own page. */
[hidden] { display:none !important; }
.section-kicker { color:#185a7b; text-align:center; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.section-link { text-align:center; font-size:14px; margin:20px 0 0; }
.question-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1020px; margin:26px auto 0; padding:0 24px; }
.question-grid a { display:block; border-top:2px solid #abc9d0; padding-top:15px; color:var(--ink); font-size:14px; }
.question-grid strong { display:block; color:#185a7b; margin-bottom:6px; font-size:16px; }
.method-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; font-size:14px; }
.method-steps strong { display:block; font-size:17px; margin-bottom:7px; }
.method-steps p { margin:0; }
.segmented { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 12px; }
.segmented.centered { justify-content:center; }
.segmented button { border:1px solid #cdd7dc; background:#fff; color:#3f4d55; border-radius:6px; padding:9px 15px; font-size:14px; }
.segmented button:hover { background:#eef4f6; }
.segmented button[aria-pressed="true"] { background:#185a7b; border-color:#185a7b; color:white; }
.control-explanation { color:var(--muted); font-size:14px; margin:10px 0 16px; }
#gallery-method-note { text-align:center; }
.motion-browser { display:flex; align-items:center; gap:10px; margin:20px 0; min-width:0; }
.motion-strip { display:flex; flex:1; gap:8px; overflow-x:auto; padding:3px 3px 9px; scrollbar-width:thin; scrollbar-color:#bdcbd1 transparent; }
.motion-choice { flex:0 0 110px; border:2px solid transparent; border-radius:5px; padding:3px; background:#f4f6f7; color:var(--ink); }
.motion-choice:hover { background:#e6eff2; }
.motion-choice[aria-pressed="true"] { border-color:#185a7b; background:#eef5f7; color:#103d53; }
.motion-choice img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-radius:2px; }
.motion-choice span { display:block; padding:5px 1px 2px; font-size:12px; }
.strip-arrow { flex:0 0 30px; padding:0; height:42px; background:#f1f4f5; color:#185a7b; border-radius:5px; font-size:28px; line-height:1; }
.strip-arrow:hover { background:#dae7eb; }
.strip-arrow:disabled { opacity:.3; cursor:default; }
.gallery-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:18px 0 16px; }
.gallery-toolbar h3 { margin:0; font-size:18px; }
button.text-button { padding:4px 0; color:var(--link); background:none; border-radius:0; font-size:13px; }
button.text-button:hover { text-decoration:underline; }
.ref-video-card h4 { font-size:14px; margin-top:10px; }
.secondary-button { background:#edf1f3; color:#303b41; }
.secondary-button:hover { background:#dce6eb; }
.result-summary { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.result-summary h3 { font-size:21px; margin:0 0 13px; }
.result-summary p { font-size:14px; }
.result-summary .small-note { font-size:13px; }
.result-insight { padding:12px 16px; background:#f2f6f7; border-left:3px solid #6b97a4; }
.small-link { font-size:13px; }
.mobile-hint { display:none; }
.selected-metrics { padding:9px 12px; background:#f3f6f7; font-size:13px; border-radius:4px; }
.comparison-command { font-size:15px; font-weight:500; margin:18px 0; }
#matched-examples .motion-choice { flex-basis:140px; }
#matched-examples .motion-strip { flex:0 1 auto; }
#matched-examples { justify-content:center; }
#velocity-metrics { margin-top:0; }
#velocity-metric-explanation { min-height:66px; }
.velocity-media-panel { min-width:0; }
.velocity-videos { position:static; }
.optional-comparison { display:flex; align-items:flex-start; gap:8px; font-size:12px; font-weight:400; color:#4b5960; cursor:pointer; margin-top:14px; }
.optional-comparison input { margin-top:4px; accent-color:#185a7b; }
.explorer-footnote { margin-top:20px; }
.technical-header { padding-bottom:28px; }
.technical-header h1 { font-size:38px; margin:28px 0 14px; letter-spacing:-1px; }
.technical-header p { color:var(--muted); font-size:14px; }
.technical-nav { display:flex; gap:12px 22px; flex-wrap:wrap; font-size:14px; }
.technical-main .content-section { border-top:1px solid var(--line); padding:34px 0; }
.technical-main h2 { text-align:left; font-size:27px; }
.technical-main p { max-width:950px; font-size:15px; }
@media (min-width:1050px) {
  .velocity-media-panel { position:sticky; top:16px; }
  .velocity-videos { position:static; }
}
@media (max-width:1049px) {
  .velocity-workspace { display:flex; flex-direction:column; gap:20px; }
  .velocity-media-panel { order:-1; width:100%; }
  .velocity-grid-panel { width:100%; }
  .velocity-videos { grid-template-columns:1fr 1fr; gap:16px; }
  #velocity-metric-explanation { min-height:0; }
}
@media (max-width:600px) {
  .question-grid { grid-template-columns:1fr; gap:15px; padding:0 16px; }
  .question-grid a { padding-top:10px; }
  .method-steps { grid-template-columns:1fr; gap:16px; }
  .method-steps strong { margin-bottom:4px; }
  .segmented { gap:5px; }
  .segmented button { font-size:12px; padding:8px 10px; }
  .motion-browser { gap:5px; margin:14px 0; }
  .motion-choice { flex-basis:90px; }
  .strip-arrow { flex-basis:24px; }
  .gallery-toolbar { align-items:flex-start; flex-direction:column; gap:8px; }
  .gallery-toolbar h3 { font-size:16px; }
  .reference-gallery-grid { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x proximity; }
  .ref-video-card { flex:0 0 82%; scroll-snap-align:start; }
  .ref-video-card h4 { font-size:13px; }
  .mobile-hint { display:block; font-size:12px; color:var(--muted); margin:6px 0; }
  .empty-example { padding:8px; min-height:0; }
  .empty-example p { font-size:10px; }
  .velocity-videos { grid-template-columns:1fr 1fr; gap:10px; }
  .velocity-videos h4 { font-size:12px; min-height:29px; }
  .velocity-videos .source-caption { font-size:11px; }
  .velocity-tick { font-size:10px; }
  .velocity-axis-note { font-size:11px; }
  .velocity-grid-scroll { padding:2px 0; }
  #velocity-grid { --grid-label-width:28px; gap:2px; }
  #velocity-grid .velocity-cell { height:24px; border-width:1.5px; }
  #velocity-grid .minor-tick { visibility:hidden; }
  #velocity-grid .velocity-cell.selected::after { inset:2px; border-width:1px; }
  .velocity-legend { gap:6px 10px; font-size:11px; }
  .comparison-table-wrap th,.comparison-table-wrap td { font-size:12px; padding:9px 8px; }
  .comparison-table-wrap th:first-child { min-width:105px; }
  .comparison-table-wrap thead th { white-space:normal; min-width:74px; }
  .comparison-table-wrap caption { min-width:300px; }
  #matched-examples .motion-choice { flex-basis:85px; }
  .matched-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .matched-video-grid > :first-child { grid-column:1/-1; max-width:280px; }
  .matched-video-grid h4 { font-size:13px; min-height:32px; }
  .matched-video-grid .clip-metrics { font-size:12px; }
  .technical-header h1 { font-size:29px; }
}