html, body {
  /* full-bleed sections break out via width:100vw + translateX(-50%); on some
     browsers/viewport sizes 100vw overshoots the visible viewport (scrollbar
     width, or a wide child forcing the box wider than the viewport). html is
     the actual scrolling element in standards mode, so both need the clip. */
  overflow-x: hidden;
}

body {
  font-family: 'Noto Sans', sans-serif;
}


.footer .icon-link {
    font-size: 25px;
    color: #000;
}

.link-block a {
    margin-top: 5px;
    margin-bottom: 5px;
}

.dnerf {
  font-variant: small-caps;
}


.teaser .hero-body {
  padding-top: 0;
  padding-bottom: 3rem;
}

.teaser {
  font-family: 'Google Sans', sans-serif;
}


.publication-title {
}

.publication-banner {
  max-height: parent;

}

.publication-banner video {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  object-fit: fit;
}

.publication-header .hero-body {
}

.publication-title {
    font-family: 'Google Sans', sans-serif;
}

.publication-authors {
    font-family: 'Google Sans', sans-serif;
}

.publication-venue {
    color: #555;
    width: fit-content;
    font-weight: bold;
}

.publication-awards {
    color: #ff3860;
    width: fit-content;
    font-weight: bolder;
}

.publication-authors {
}

.publication-authors a {
   color: hsl(204, 86%, 53%) !important;
}

.publication-authors a:hover {
    text-decoration: underline;
}

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

.publication-banner img {
}

.publication-authors {
  /*color: #4286f4;*/
}

.publication-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;

    overflow: hidden;
    border-radius: 10px !important;
}

.publication-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.publication-body img {
}

.results-carousel {
  overflow: hidden;
}

.results-carousel .item {
  margin: 5px;
  overflow: hidden;
  border: 1px solid #bbb;
  border-radius: 10px;
  padding: 0;
  font-size: 0;
}

.results-carousel video {
  margin: 0;
}


.interpolation-panel {
  background: #f5f5f5;
  border-radius: 10px;
}

.interpolation-panel .interpolation-image {
  width: 100%;
  border-radius: 5px;
}

.interpolation-video-column {
}

.interpolation-panel .slider {
  margin: 0 !important;
}

.interpolation-panel .slider {
  margin: 0 !important;
}

#interpolation-image-wrapper {
  width: 100%;
}
#interpolation-image-wrapper img {
  border-radius: 5px;
}

img.inline-figure-six {
  display: block; 
  margin-left: auto;
  margin-right: auto; 
  width: 60%;
}

img.inline-figure-four-thirds {
  display: block; 
  margin-left: auto;
  margin-right: auto; 
  width: 75%;
}

img.inline-figure {
  display: block; 
  margin-left: auto;
  margin-right: auto; 
  width: 100%;
}

.hr {
  display: block;
  margin-left: auto;
  margin-right: auto; 
  width: 75%;
  height: 1px;
  /* margin: 48px 0; */
  background-color: #d6dbdf;
}

.multi-color-text {
  background: linear-gradient(to right, #1a5ba8, #003366, #0a1f44);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Custom Button Styling */
.custom-btn-gradient {
  background: linear-gradient(to right, #1a5ba8, #003366, #0a1f44);
  color: white;
  border: none;
  padding: 0.5em 1em; /* Reduce padding */
  margin: 0.3em; /* Reduce margin for compact layout */
  border-radius: 4px; /* Slightly smaller border-radius */
  font-family: "Poppins", sans-serif;
  font-size: 0.9em; /* Reduce font size */
  font-weight: 550;
  letter-spacing: 0.3px; /* Reduce spacing */
  text-transform: uppercase;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease-in-out;
  min-width: 120px; /* Ensures a consistent button width */
}

/* Hover & Focus Effect */
.custom-btn-gradient:hover,
.custom-btn-gradient:focus {
  filter: brightness(1.1);
  transform: scale(1.05);
  cursor: pointer;
}

/* Optional: Add a subtle text shadow for a more polished look */
.custom-btn-gradient span {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Segmented toggle (DROID task switcher): one rounded strip with a sliding pill that
   highlights the active task. The thumb width is 1/N of the strip; JS slides it by index. */
.seg-toggle {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 4px;
  background: #dce6f2;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(60, 40, 100, 0.12);
}
.seg-toggle .seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 4);
  border-radius: 999px;
  background: linear-gradient(to right, #1a5ba8, #003366, #0a1f44);
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.35);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.seg-toggle .seg-btn {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;            /* 0% (not unitless 0) for Safari flexbox */
  min-width: 0;
  -webkit-appearance: none; /* Safari renders <button> with native chrome otherwise */
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.5em 0.5em;
  border-radius: 999px;
  font-family: "Poppins", sans-serif;
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0.2px;
  color: #6b6580;
  white-space: nowrap;
  transition: color 0.28s ease;
}
.seg-toggle .seg-btn.is-active { color: #fff; }
.seg-toggle .seg-btn:hover { color: #003366; }
.seg-toggle .seg-btn.is-active:hover { color: #fff; }
@media screen and (max-width: 560px) {
  .seg-toggle .seg-btn { font-size: 0.66rem; letter-spacing: 0; padding: 0.5em 0.2em; }
}

/* Reasoning-trace carousel skeleton (markup is built by initReasoningCarousels) */
.rt-carousel { margin: 1.25rem auto 0; }
.rt-row { display: flex; align-items: center; gap: 12px; }
.rt-prev, .rt-next {
  flex: none; background: none; border: 1px solid #ccc; border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.rt-viewport { flex: 1; overflow: hidden; }
.rt-track { display: flex; }
.rt-indicator { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }

.video-hover {
  width: 100%;
  border-radius: 6px;
}

.team-photo {
  width: 128px !important;
  height: 128px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.team-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
  /* crops to the center */
}

.mt-2 {
  margin-top: 0.5rem;
  /* minor top spacing for the name */
}
/* Bulma's html reset sets -webkit-font-smoothing: antialiased, which renders glyphs
   thinner on macOS. The method-figure iframes (Figs 2/3) have no Bulma and use default
   subpixel smoothing (heavier stems); opt the inline variance-schedule viz out so its
   serif labels match the figures' weight. */
#adaptive-viz {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

/* Media placeholder (replace with final videos/figures) */
.media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #f5f5f5;
  border: 1px dashed #c9c4d4;
  border-radius: 10px;
  color: #9a9a9a;
  font-family: 'Google Sans', sans-serif;
  font-size: 0.9rem;
  text-align: center;
  padding: 12px;
}

/* Real-world section: the three top-level blocks (sim2real stack, BC-vs-ASTEROID timeline,
   success-rate comparison) are equal-width cards sized to the section container — the same
   width as the Experiments sample-efficiency figure (both live in container.is-max-desktop). */
.rw-block-card {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  border-radius: 20px;
}
/* hover-magnify is disabled for now; to re-enable, restore:
.rw-block-card { position: relative; z-index: 1; transition: transform .45s cubic-bezier(.2,.75,.25,1), z-index 0s linear .45s; }
.rw-block-card:hover { transform: scale(1.5); z-index: 10; transition: transform .45s cubic-bezier(.2,.75,.25,1), z-index 0s; }
@media (max-width: 768px) { .rw-block-card:hover { transform: none; } }
*/

/* success-rate card: chart left, the two rollout strips stacked right — keep that structure
   at the narrower card width; only phones fall back to wrapping */
@media (max-width: 768px) {
  .rw-sr-row { flex-wrap: wrap; }
}


/* One Task, Four Methods: hovering the ASTEROID panel offers the jump to the
   training-loop figure; clicking smooth-scrolls there and replays it */
.asteroid-hop{position:relative;display:block;border-radius:10px;cursor:pointer;text-decoration:none;}
.asteroid-hop .hop-hit{position:absolute;inset:0;z-index:2;}
.asteroid-hop iframe{transition:transform .25s ease,box-shadow .25s ease;}
.asteroid-hop:hover iframe,.asteroid-hop:focus-visible iframe{transform:translateY(-4px) scale(1.015);box-shadow:0 10px 28px rgba(185,130,31,.28);}
.asteroid-hop .hop-pill{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;background:#fffbf2;border:1.5px solid #b9821f;color:#8a6116;font-size:.9rem;font-weight:600;line-height:1;padding:.45rem .9rem;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(31,42,77,.18);}
.asteroid-hop:hover .hop-pill,.asteroid-hop:focus-visible .hop-pill{opacity:1;transform:translateX(-50%) translateY(0);}
@media (hover:none){.asteroid-hop .hop-pill{opacity:1;transform:translateX(-50%) translateY(0);}}


/* teaser carousel: environment name under each rollout video */
#task-carousel .item { padding-bottom: 1.6rem; } /* keep nav dots clear of captions */
.task-cap {
  margin-top: 0.5rem;
  text-align: center;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #33303c;
}


/* skip rendering work for sections far off-screen (big scroll-perf win on a
   page this media-heavy); intrinsic size keeps the scrollbar stable */
.section { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* hero header: title and author list each render as one line on desktop and
   wrap naturally on narrow screens */
.publication-authors.hero-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.45rem;
}
.publication-authors.hero-line .author-block { white-space: nowrap; }

/* At-a-glance summary: four equal-height cards in one row; widths are set
   inline per slot to match each panel's natural aspect so one shared height
   spans the page. Wraps 2x2 on medium screens, stacks on phones. */
.asum-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
@media screen and (max-width: 1215px) {
  .asum-row { flex-wrap: wrap; }
  .asum-row .asum-slot { flex: 1 1 47% !important; }
}
@media screen and (max-width: 700px) {
  .asum-row .asum-slot { flex: 1 1 100% !important; }
}

.asum-kicker {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 1.1rem;
}
.asum-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 0.5rem 0.5rem 0.55rem;
  box-shadow: 0 0 14px 2px rgba(0, 51, 102, 0.06);
  overflow: hidden;
}
.asum-h {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: 0.35rem;
}
.asum-h a { font-weight: 700; }
/* panel 2 mirrors panel 3's geometry: a fixed 430px-wide, 312px-tall logical
   block (zoom-fitted to the card by initTimelineZoom) whose chart plot area is
   181px tall with the legend 40px below it -- so the two panels' plots and
   legends sit on the same lines */
.asum-p2fit {
  width: 430px;
  height: 312px;
  margin: auto;
  display: flex;
  flex-direction: column;
}
#perf-barchart { width: 430px; margin: 0 auto; }
/* panel headings double as section links: keep the heading look, reveal
   affordance on hover only */
.asum-h a { color: inherit; text-decoration: none; }
.asum-h a:hover { color: #003366; text-decoration: underline; text-underline-offset: 3px; }
.asum-vgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: auto;
  margin-bottom: auto;
}
.asum-vgrid video {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  background: #fff;
  display: block;
}
/* show only the RIGHT half of a side-by-side pair video (1920x540 -> 960x540,
   16:9): cover + right-edge object-position pins the crop to the right panel */
.asum-crop-r video {
  object-position: 100% 50%;
}
/* sim tiles: two views of the same task side by side (wrist+scene, touch+scene)
   with a faint divider between the views */
.asum-duo {
  display: flex;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
}
.asum-duo > video,
.asum-duo > iframe {
  flex: 1 1 50%;
  min-width: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
  border-radius: 0;
  aspect-ratio: auto;
}
.asum-duo > iframe { background: #fafafa; }
.asum-duo .duo-div { flex: 0 0 2px; background: rgba(255, 255, 255, 0.65); }
/* small label chip on the first (input-modality) half of a duo tile */
.asum-duo { position: relative; }
.asum-duo .duo-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 1px 7px;
  border-radius: 6px;
}
.asum-cap {
  margin-top: 0.3rem;
  text-align: center;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
}
/* styled to match the Plotly legends in the neighboring panels; nudged right
   so it centers on the chart's PLOT AREA (which sits right of card center by
   the y-axis margin: 18/560 of the chart width), like plotly legends do */
.asum-legend {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  width: fit-content;
  margin: 23px auto 0;
  position: relative;
  left: 19px;
  padding: 0.35rem 1rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dddddd;
  border-radius: 2px;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 14.5px;
  color: #454250;
}
.asum-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.asum-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
@media screen and (max-width: 768px) {
  .asum-vgrid { grid-template-columns: 1fr 1fr; }
}
/* stacked (top/bottom) variant of the curves embed fits the card width natively */
.asum-eff {
  width: 430px;
  height: 312px;
  border: 0;
  display: block;
  margin: auto;
}
/* the BC-vs-ASTEROID timeline embed scales itself to its host width and
   reports its rendered height (initFigTimelineAutoHeight sets the iframe) */
.asum-tl {
  width: 100%;
  border: 0;
  display: block;
  margin: auto;
}
/* camera-with-cross icon in the panel-4 heading */
.camwrap2 { position: relative; display: inline-block; line-height: 1; }
.camwrap2 .camx2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  color: #cc2222;
  font-weight: 800;
  font-size: 1.2em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* click-to-expand summary panels (initPanelExpand): the card stays in the page
   and is translated+scaled to the viewport center, so its iframes and videos
   never reload. A transparent ::after layer catches clicks that would otherwise
   land inside an iframe; it is dropped while expanded so embeds are interactive. */
.asum-card {
  position: relative;
  cursor: zoom-in;
  transform-origin: center center;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.asum-card::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.asum-card .asum-h a { position: relative; z-index: 2; }
.asum-card:not(.is-open):hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 22px 2px rgba(0, 51, 102, 0.14);
}
.asum-card.is-raised { z-index: 1001; }
.asum-card.is-open { cursor: default; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.asum-card.is-open::after { display: none; }
.asum-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20, 24, 33, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.asum-backdrop.is-on { opacity: 1; pointer-events: auto; }
.asum-close {
  position: fixed;
  z-index: 1002;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 20px;
  line-height: 38px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.asum-close.is-on { opacity: 1; pointer-events: auto; }
.asum-close:hover { background: #f0f0f0; }

/* dropdown affordance: rotating arrow, native marker hidden; content sources
   are data-src and only load on first open */
details.dd > summary { list-style: none; }
details.dd > summary::-webkit-details-marker { display: none; }
.dd-arrow { display: inline-block; transition: transform .25s ease; }
details.dd[open] .dd-arrow { transform: rotate(90deg); }

/* hero background collage removed -- it competed with the summary panels */
.hero {
  background: #ffffff;
}