html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    line-height: 1;
    font-family: inherit;
    text-align: left;
    vertical-align: baseline;
}
a img, :link img, :visited img {border: 0}
table {border-collapse: collapse; border-spacing: 0}
ul {list-style: none}
q:before, q:after,
blockquote:before, blockquote:after {content: ""}


/* Roboto is vendored locally as a variable font (weight 100-900, plus an
   italic 300-700 companion) rather than pulled from Google Fonts, matching
   the no-CDN approach used for three.js elsewhere on this page. Its shapes
   sit close to Google Sans / Noto Sans (the reference sites' fonts), so it
   carries the same clean, minimal register without adding a network fetch. */
@font-face {
  font-family: "Roboto";
  src: url(../assets/fonts/Roboto-Variable.woff2) format("woff2-variations"),
       url(../assets/fonts/Roboto-Variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url(../assets/fonts/Roboto-Italic-Variable.woff2) format("woff2-variations"),
       url(../assets/fonts/Roboto-Italic-Variable.woff2) format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

:root {
    /* Minimal, flat palette -- adapted from the Princeton Computational
       Imaging lab's newer project pages (WorldFlow3D / ScenarioControl):
       white surfaces, dark neutral ink, a single restrained blue accent,
       hairline rules instead of shadows, and no gradients -- except a
       barely-there wash behind the header, kept for warmth. */
    --header-gradient: linear-gradient(90deg, #f4f7fb 0%, #ffffff 50%, #fbf6f1 100%);

    --text: #1f2933;
    --muted: #5e676a;
    --accent: #2f4f78;
    --accent-hover: #24405f;
    --accent-soft: #eaf1fb;
    --button-bg: #16283c;
    --button-bg-hover: #0d1826;
    --surface: #ffffff;
    --surface-alt: #f7f7f7;
    --rule: #e2e2e2;

    /* Aliases kept so every selector below reads in terms of the palette
       above without a global find/replace. */
    --navy: var(--accent);
    --ink: var(--text);
    --ink-soft: var(--muted);
    --band-tint: var(--surface-alt);
}


body           {font-size:17px; font-family:"Roboto",Helvetica,Arial,sans-serif; font-weight:400; line-height:1.6; color:var(--ink); background-color:var(--surface)}
h1             {font-size:32px; font-weight:600; margin-top:40px}
h1 a           {color: var(--navy)}
h2             {font-size:28px; font-weight:600; margin-top:64px; margin-bottom:18px; color:var(--navy); letter-spacing:0.01em}
h2 a           {color:var(--navy)}
p              {margin:0 0 1.2em; line-height:1.6em; text-align:left}
a              {color:var(--navy); text-decoration:none; transition:color 0.2s ease}
a:hover        {color:var(--accent-hover); text-decoration:underline}
a.nounderline:hover {color:var(--accent-hover); border-bottom:none; text-decoration:none}
a.underline    {padding-bottom: 1px; border-bottom:1px solid var(--navy)}
a.underline:hover {padding-bottom: 1px; border-bottom:1px solid var(--accent-hover); text-decoration:none}
ul             {margin:15px 0; margin-left:25px; list-style-type:disc}
li             {margin:10px 0; text-align:left}

/* Sticky section nav -- hidden above the header, fades in once the user
   scrolls past it, and tracks which section is in view. */
.sticky-nav {
    position: fixed;
    top: -60px;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: top 0.3s ease;
}

.sticky-nav.visible {
    top: 0;
}

.sticky-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    flex-wrap: wrap;
}

.sticky-nav-link {
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
    white-space: nowrap;
}

.sticky-nav-link:hover {
    color: var(--navy);
    background: var(--accent-soft);
    text-decoration: none;
}

.sticky-nav-link.active {
    color: var(--navy);
    background: var(--accent-soft);
    font-weight: 600;
}

@media (max-width: 760px) {
    .sticky-nav-inner {
        gap: 2px;
        padding: 8px 10px;
    }

    .sticky-nav-link {
        font-size: 12px;
        padding: 4px 8px;
    }
}

#cover         {float:right; margin:20px 0 5px 30px}
#wrapper       {max-width:1100px; margin:0 auto; padding:0 20px}
#header        {padding: 56px 0 32px 0; text-align: center; position: relative}
#header::before {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--header-gradient); z-index: -1}
#content       {background-color: var(--surface); padding: 0 0 30px 0; margin-top: 0; margin-bottom: 0}
#title         {color:var(--text); font-size:38px; font-weight:600; text-align:center; line-height:1.3; letter-spacing:-0.01em; max-width:780px; margin:0 auto}
#title a       {color:var(--navy)}
#journal       {font-size:16px; text-align:center; font-weight:600; margin-top: 16px; padding-bottom: 0.25em; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em}
#teaser        {margin-top:40px}

.authors       {display:flex; flex-wrap:wrap; justify-content:center; margin-top:22px}
.authors .author-block {margin:4px 14px; text-align:center}
.authors a     {color:var(--navy); font-size:16px}
.authors a:hover {color:var(--accent-hover); text-decoration:underline}
.authors span  {color:var(--muted); font-size:16px}

#authors #affiliation {font-size:16px; padding-top: 10px; padding-bottom: 8px}
#authors #affiliation span {margin-left: 20px}
#authors #author {padding-right: 2.5em}

#affiliations {font-size:16px; padding-top: 10px}
#affiliations #affiliation {padding-right: 2em}
.comingsoon {color: rgb(200,200,220)}
.comingsoon:hover {color: rgb(220,220,240)}

#navigation {
    font-size:20px;
    text-align:center;
    text-transform:uppercase;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
}
#navigation td {padding:0px 0px 0px 0px;}

#teasercaption {
    font-size: 12px
}

.bibtex-container {
    position: relative;
    margin:15px 0;
}

#bibtexsec {
    font-family:"Courier",monospace;
    white-space:pre-wrap;
    word-break:break-word;
    font-size:12px;
    background-color: var(--surface-alt);
    border: 1px solid var(--rule);
    padding: 15px;
    margin:0;
}

.bibtex-copy-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: var(--surface-alt);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.85;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.bibtex-copy-btn:hover {
    background-color: var(--rule);
    opacity: 1;
}

.section-placeholder {
    font-style: normal;
    color: var(--ink-soft);
    font-size: 15px;
}


.super         {vertical-align:super; font-size:70%}
.bold          {font-weight:600}
.italic        {font-style:italic}

.videoframe{
    text-align: center;
    margin-top: 1em;
    margin-right: 0%;
    margin-left: 0%;
}

/* Image Comparison Slider Styles */
.comparison-band {
    margin: 0px 0;
    padding: 40px 0;
    background-color: var(--band-tint);
    box-shadow: 0 0 0 100vmax var(--band-tint);
    clip-path: inset(0 -100vmax);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.comparison-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    margin: 0;
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.comparison-heading {
    margin: 0 0 6px 0;
    padding-bottom: 4px;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--navy);
}

.comparison-wrapper .video-comparison {
    margin: 0;
}

.comparison-subtitle {
    margin: 0 0 8px 0;
    padding: 0 0 4px 0;
    font-style: normal;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    color: var(--ink-soft);
}

.comparison-text {
    padding-top: 0;
}

.comparison-text p {
    margin: 0 0 15px 0;
    font-size: 17px;
    line-height: 1.5em;
    text-align: left;
}

.comparison-text p:last-of-type {
    margin-bottom: 0;
}

.video-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 0px;
}

.video-container iframe {
    max-width: 100%;
}

.image-container {
    display: flex;
    justify-content: center;
    margin: 25px 0;
}

.method-sketch-container {
    width: 100%;
}

.image-container a {
    border-bottom: none;
}

.logo-strip {
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.logo-strip .logo-image {
    height: 54px;
    width: auto;
    max-width: 100%;
    flex: 0 0 auto;
    object-fit: contain;
}

.responsive-image {
    max-width: 100%;
    width: 800px;
    height: auto;
    display: block;
    border: 1px solid var(--rule);
}

.method-sketch-image {
    width: 100%;
    max-width: none;
}

.defocus-fig-image {
    width: 100%;
    max-width: none;
    border: none;
    background: none;
}

/* Publication links -- Paper / Supplementary / Code buttons, sitting under
   the title, authors, and venue in the header (matching the layout used by
   e.g. the Princeton Computational Imaging lab's project pages). */
.publication-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.link-block {
    display: inline-block;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    line-height: 1;
    padding: 0 20px;
    text-align: center;
    border: 1px solid var(--button-bg);
    border-radius: 999px;
    background: var(--button-bg);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.button .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.button-size-tag {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    letter-spacing: 0.02em;
}

.button:hover {
    background-color: var(--button-bg-hover);
    border-color: var(--button-bg-hover);
    color: #ffffff;
}

/* Disabled state for Paper / Supplementary / Code before the real links
   exist -- swap `<span class="button is-disabled">` for `<a class="button"
   href="...">` and the enabled style applies automatically. */
.button.is-disabled {
    cursor: default;
    opacity: 0.85;
}

.button.is-disabled:hover {
    background: var(--button-bg);
    border-color: var(--button-bg);
    color: #ffffff;
}

@media (max-width: 760px) {
    #title {
        font-size: 26px;
        max-width: 100%;
    }

    h2 {
        font-size: 22px;
    }
}

.reparameterization-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1.12fr);
    gap: 28px;
    align-items: start;
    margin-top: 8px;
}

.reparameterization-copy {
    min-width: 0;
}

.reparameterization-copy p:first-child {
    margin-top: 0;
}

.reparameterization-copy p:last-child {
    margin-bottom: 0;
}

.reparameterization-media {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lae-training-panel {
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lae-training-panel-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    text-align: center;
}

.lae-training-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lae-training-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lae-hologram-band {
    position: relative;
    margin-top: 8px;
}

/* Tune the PSNR inset by overriding these custom properties, either here
   or inline on the element (style="--psnr-overlay-width: 260px"). Width sets
   the card's size; height follows from aspect-ratio (the source video's
   native 500x280) so the box hugs the content with no letterbox bars. */
.lae-training-tile.lae-psnr-overlay {
    --psnr-overlay-width: 20%;
    --psnr-overlay-top: 10px;

    position: absolute;
    top: var(--psnr-overlay-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--psnr-overlay-width);
    height: auto;
    aspect-ratio: 500 / 280;
    z-index: 5;
    background: var(--surface, #fff);
    border: 1px solid var(--rule);
}

.lae-psnr-overlay .lae-training-video {
    object-fit: contain;
}

.lae-training-tile {
    position: relative;
    overflow: hidden;
    background: #000;
    aspect-ratio: 8 / 5;
    border: 1px solid var(--rule);
    --zoom-x: 50%;
    --zoom-y: 50%;
}

.lae-training-tile-wide {
    aspect-ratio: 8 / 5;
}

/* Parallax comparison videos are natively 900x800 (9:8), not the 8:5 used
   elsewhere, so object-fit: cover would crop them without this override. */
.lae-training-tile-parallax {
    aspect-ratio: 9 / 8;
}

.lae-training-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform-origin: var(--zoom-x) var(--zoom-y);
    transition: transform 180ms ease, filter 180ms ease;
    will-change: transform;
}

.lae-training-tile.is-zoomed .lae-training-video {
    transform: scale(2.5);
}

.lae-playbar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 3px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.lae-playbar-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
    transform-origin: left center;
}

.lae-training-caption {
    position: absolute;
    left: 10px;
    bottom: 22px;
    z-index: 2;
    padding: 4px 10px;
    background: rgba(31, 41, 51, 0.72);
    color: #ffffff;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
    .reparameterization-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 620px) {
    .lae-training-row {
        grid-template-columns: 1fr;
    }

    .lae-training-grid {
        grid-template-columns: 1fr;
    }

    .lae-training-caption {
        bottom: 22px;
    }
}

/* Video Comparison Slider */
.video-comparison {
    margin: 40px 0;
}

.video-comparison-stage {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: #000;
    cursor: ew-resize;
    touch-action: none;
    user-select: none;
}

/* Padding-bottom trick locks the box to the videos' native 1280x800 (8:5)
   aspect ratio before metadata loads, so the layout never jumps. */
.video-comparison-stage::before {
    content: '';
    display: block;
    padding-bottom: 62.5%;
}

.video-comparison-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.video-comparison-base {
    z-index: 1;
}

.video-comparison-overlay {
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

.video-comparison-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    z-index: 3;
    pointer-events: none;
}

.video-comparison-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--rule);
}

.video-comparison-tag {
    position: absolute;
    top: 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--rule);
    color: var(--navy);
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    z-index: 4;
}

.video-comparison-tag-left {
    left: 12px;
}

.video-comparison-tag-right {
    right: 12px;
}

.video-comparison-tag-bottom-left {
    top: auto;
    bottom: 12px;
    left: 12px;
}

/* Progress through the video loop, matching the .lae-playbar treatment
   used by the video tiles elsewhere on the page. */
.video-comparison-progress {
    max-width: 800px;
    margin: 8px auto 0;
    height: 3px;
    background: var(--rule);
    overflow: hidden;
}

.video-comparison-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
}

/* Method 3D visualization */
.method-3d {
    position: relative;
    width: 100%;
    aspect-ratio: 21 / 9;
    margin: 28px 0 0 0;
    overflow: hidden;
    background: var(--surface-alt);
    border: 1px solid var(--rule);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.method-3d.is-dragging {
    cursor: grabbing;
}

/* No WebGL: collapse the block rather than leaving an empty grey box. */
.method-3d.method-3d-unavailable {
    display: none;
}

.method-3d-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.method-3d-hint {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 3;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.method-3d.is-dragging .method-3d-hint {
    opacity: 0;
}

/* Progress through the whole animation loop. Sits directly under the
   animation window, matching the .lae-playbar treatment used by the video
   tiles elsewhere on the page. */
.method-3d-progress {
    margin-top: 8px;
    height: 3px;
    background: var(--rule);
    overflow: hidden;
}

.method-3d-progress-fill {
    width: 0%;
    height: 100%;
    background: var(--accent);
}

.method-3d-caption {
    font-size: 15px;
    line-height: 1.5em;
    color: var(--ink-soft);
    margin-top: 12px;
}

@media (max-width: 900px) {
    .method-3d {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 620px) {
    .method-3d {
        aspect-ratio: 4 / 3;
    }

    .method-3d-caption {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .method-3d-hint {
        display: none;
    }
}