/* ─────────────────── Root tokens ─────────────────── */
:root{
  --container-max-width:960px;

  /* section headers */
  --section-header-font-family:'Varela Round',sans-serif;
  --section-header-font-size:1.75rem;
  --section-header-font-weight:400;
  --section-header-color:#222;
  --section-header-margin-bottom:7px;
  --section-header-text-align:left;

  /* section spacing */
  --section-spacing: 60px;

  /* captions */
  --section-caption-font-family:'Work Sans','Open Sans',sans-serif;
  --section-caption-font-size:1rem;
  --section-caption-color:#444;
  --section-caption-line-height:1.65;
  --section-caption-max-width:900px;
  --section-caption-letter-spacing:.01em;
  --section-caption-text-align:left;
  --section-caption-margin:20px auto 0 auto;
}

/* ─────────────────── Base layout ─────────────────── */
body{margin:0;font-family:'Work Sans','Open Sans',sans-serif;color:#333;background-color: #fdfaf4;}
.section{padding:0 20px;text-align:center;margin-bottom: var(--section-spacing);}
section{margin-bottom: var(--section-spacing);} /* This is only used for padding at the bottom of each section */
.container{max-width:var(--container-max-width);width:100%;margin:auto;padding-bottom:300px;box-sizing:border-box}

/* make large media responsive */
.container img:not(.logo),
.container video,
.container canvas,
.container svg:not(.svg-play-btn) {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  box-sizing: border-box;
  border: 1px solid #ddd;      /* subtle border */
}
.svg-play-btn svg{border:none!important} /* remove border from SVG play button */


/* logo */
.logo-row{margin:32px 0 12px;display:flex;justify-content:center;align-items:center}
.logo{
  width:auto;
  height:auto;
  max-height:140px;
  max-width:100%;
  border-radius:0;
}
.hero-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  margin: 12px auto 24px auto;
  max-width: 90%;
  line-height: 1.3;
}


/* authors row */
.author-row{margin:12px 0;display:flex;justify-content:center;gap:12px}
.author-text{text-decoration:underline;color:#333;font-size:20px}
.text-star{font-size:14px;vertical-align:super}
.equal-note{font-size:16px;margin-bottom:20px}

/* link bar */
.link-bar{display:flex;justify-content:center;gap:40px;margin:30px 0}
.link-block{text-align:center;color:#000;text-decoration:none}
.label{text-decoration:underline}
.icon{font-size:56px}

/* tldr */
.tldr{font-size:18px;max-width:700px;margin:0 auto 40px}

/* abstract */
#abstract-box{text-align:left;margin:40px auto;max-width:700px}
.abstract-header{font-family:'Varela Round',sans-serif;font-size:34px;margin-bottom:16px}
.abstract-body{font-size:17px;line-height:1.6;margin-bottom:12px}
.abstract-body.hidden{display:none}
.read-btn{border:none;background:none;color:#2196F3;font-weight:600;font-size:16px;cursor:pointer;padding:0}
.read-btn:hover{text-decoration:underline}

/* video embed (framework/sim-rollout thumbs share these) */
#framework-video-box{max-width:var(--container-max-width);width:100%;margin: 24px auto var(--section-spacing) auto;text-align:center;position:relative}
.video-thumb-container{position:relative;display:inline-block;width:100%;max-width:var(--container-max-width);cursor:pointer}
.video-thumb{border-radius:12px}

/* generation bar graphs */
#generation-graph-wrapper {
  width: 75%;
  margin: 0 auto;
}


/* full project vid settings - local video (for double-blind review) */
#full-project-thumb {
  max-width: 800px;
  margin: 0 auto;
}
#full-project-video {
  width: 800px; /* or 100%, or max-width: 960px */
  height: auto;
}

/* YouTube embed styles (for after double-blind review): */
/* .youtube-embed-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #ddd;
}
.youtube-embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
} */


/* svg play button */
.svg-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:84px;height:84px;cursor:pointer;z-index:3;opacity:.92;background:none;border:none;padding:0}
.svg-play-btn .triangle{stroke:#000;stroke-dasharray:240;stroke-dashoffset:480;transition:all .7s cubic-bezier(.65,0,.35,1)}
.svg-play-btn .circle{stroke:#000;stroke-dasharray:650;stroke-dashoffset:650;opacity:.3;transition:all .5s cubic-bezier(.65,0,.35,1)}
.svg-play-btn:hover .triangle{stroke-dashoffset:0;animation:nudge .7s ease-in-out}
.svg-play-btn:hover .circle{stroke-dashoffset:0}
@keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}50%{transform:translateX(5px)}70%{transform:translateX(-2px)}100%{transform:translateX(0)}}

/* video checkpoints */
.video-checkpoints{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px auto;max-width:var(--container-max-width)}
.checkpoint-btn{padding:14px 24px;border:2px solid #ddd;background:#fff;color:#444;border-radius:8px;cursor:pointer;font-family:'Work Sans',sans-serif;font-size:16px;font-weight:600;transition:all .2s ease;white-space:nowrap}
.checkpoint-btn:hover{background:#f0e8e7;border-color:#ccc;transform:translateY(-2px)}
.checkpoint-btn.active{background:#333;color:#fff;border-color:#333}
.checkpoint-btn:active{transform:translateY(0)}

/* main results viewer (two-canvas setup) */
#main-results{position:relative;width:100%;max-width:var(--container-max-width);margin:0 auto;background:#fff;border-radius:12px;overflow:hidden}
#canvas,#canvas-overlay{width:100%;height:auto;display:block;max-width:var(--container-max-width)}
#canvas-overlay{position:absolute;top:0;left:0;filter:opacity(var(--opacity,50%));transition:.3s}

/* control bar */
.video-bar{display:flex;justify-content:center;align-items:center;gap:16px;margin:10px 0 30px}
.video-btn{width:40px;height:40px;border:none;border-radius:8px;color:#fff;background:#2196F3;cursor:pointer}
.video-btn:hover{background:#0b7dda}
.export{display:flex;gap:8px}

/* toggle switch */
.switch{position:relative;width:64px;height:32px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#ccc;border-radius:34px;transition:.2s}
.slider:before{content:"";position:absolute;width:26px;height:26px;left:4px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
input:checked+.slider{background:#2196F3}
input:checked+.slider:before{transform:translateX(32px)}
.labels{font-size:12px;position:absolute;width:100%;top:8px;pointer-events:none}
.labels::after{content:attr(data-off);position:absolute;right:8px;color:#444}
.labels::before{content:attr(data-on);position:absolute;left:10px;color:#fff;opacity:0}
input:checked~.labels::after{opacity:0}
input:checked~.labels::before{opacity:1}

/* thumb strip */
.thumb-strip{display:flex;overflow-x:auto;gap:12px;padding:10px 0 30px}
.thumb-btn{border:none;background:#fff;cursor:pointer;padding:6px;border-radius:8px}
.thumb-btn img{width:120px;border-radius:6px}
.thumb-btn:hover{background:#eaeaea}
.active-btn{background:#d9e8ec}
.hidden-video{display:none}

/* mobile tweaks */
@media(max-width:640px){
  :root{--container-max-width:100vw}
  .container{padding-bottom:140px}
  .icon{font-size:44px}
  .thumb-btn img{width:90px}
}

/* section header + caption helpers */
.section-header{font-family:var(--section-header-font-family);font-size:var(--section-header-font-size);font-weight:var(--section-header-font-weight);color:var(--section-header-color);margin-bottom:var(--section-header-margin-bottom);text-align:var(--section-header-text-align)}
.section-caption{font-family:var(--section-caption-font-family);font-size:var(--section-caption-font-size);line-height:var(--section-caption-line-height);color:var(--section-caption-color);max-width:var(--section-caption-max-width);margin:var(--section-caption-margin);letter-spacing:var(--section-caption-letter-spacing);text-align:var(--section-caption-text-align)}

/* smaller text for learning curve section */
#learning-curve-graphs-section .section-header{font-size:1.35rem}
#learning-curve-graphs-section .section-caption{font-size:0.9rem;color:#666}

/* ─────────────────── Graph reveal helpers ─────────────────── */

/* generic wrapper */
.perf-img-wrapper{position:relative;width:90%;max-width:var(--container-max-width,960px);margin:0 auto 16px;background:#fff;border-radius:10px;overflow:hidden;box-sizing:border-box}
.learning-img-wrapper{position:relative;width:75%;max-width:750px;margin:0 auto 16px;background:#fff;border-radius:10px;overflow:hidden;box-sizing:border-box}

/* base graph */
.perf-graph-img,
.learning-graph-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  object-fit:cover;
}

/* ---------------- generic hidden state ---------------- */
.reveal-graph{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
  /* collapsed polygon (same for all) */
  clip-path:polygon(50% 0,50% 100%,50% 100%,50% 0);
  opacity:1;
  transition:clip-path 1s cubic-bezier(.55,.05,.56,.97),opacity .4s
}

/* ---------------- performance graph (down-up) ---------------- */
.reveal-down-up{clip-path:inset(100% 0 0 0)}
.reveal-down-up.revealed{clip-path:inset(0 0 0 0)}

/* ---------------- horizontal wipe (generic) --------------- */
.reveal-left-right{clip-path:inset(0 100% 0 0)}
.reveal-left-right.revealed{clip-path:inset(0 0 0 0)}

/* ---------------- learning-curve split (uses same fn) ------- */
.reveal-split-left-right{clip-path:polygon(50% 0,50% 100%,50% 100%,50% 0)}
.reveal-split-left-right.revealed{clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}


/* ─── Interactive Section Styling (with section borders) ─── */

/* 1) Wrap #active-box in a subtle border + white background, matching other media blocks */
#active-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  width: 100%;
  height: 640px;          /* adjust as desired */
  box-sizing: border-box;
  position: relative;
  background: #fff;       /* white background like other media wrappers */
  border: 1px solid #ddd; /* subtle border */
  border-radius: 12px;    /* rounded corners to match */
  overflow: hidden;
  /* transition: grid-template 0.5s ease; */
  transition: grid-template-columns 0.5s ease, grid-template-rows 0.5s ease;
  margin: 0 auto var(--section-spacing); /* center horizontally, then bottom spacing */
}

/* 2) Each quadrant (sub-box) should sit on top of its colorX background by default.
   If interactiveContent[colorX] is non-empty, that HTML will appear. */
.sub-box {
  position: relative;
  background: transparent; /* don’t override the colorX background */
  overflow: hidden;        /* crop any overflow */
  cursor: pointer;
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3) The colorX classes themselves set the background.
   If interactiveContent[colorX] is empty, you'll still see this color. */
.color1 { background-color: #f0e8e7; }
.color2 { background-color: #f0e8e7; }
.color3 { background-color: #f0e8e7; }
.color4 { background-color: #f0e8e7; }

/* 4) “Zoomed” grid → expand to 3 columns top, 1 row bottom */
#active-box.zoomed {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr auto;
}

/* 5) The zoomed tile spans all three top columns: */
#active-box.zoomed .sub-box.zoomed {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}

/* 6) Thumbnails (not-zoomed) go to bottom row, 80px tall each: */
#active-box.zoomed .sub-box.not-zoomed {
  grid-row: 2 / span 1;
  height: 200px;
}

/* 7) Place each thumbnail in the correct column (nth-of-type + position) */
#active-box.zoomed .sub-box.not-zoomed:nth-of-type(2) {
  grid-column: 1 / span 1;
}
#active-box.zoomed .sub-box.not-zoomed:nth-of-type(3) {
  grid-column: 2 / span 1;
}
#active-box.zoomed .sub-box.not-zoomed:nth-of-type(4) {
  grid-column: 3 / span 1;
}

/* ─── Loading Bar Overlay ──────────────────────────────────────── */
.sub-box.zoomed {
  position: relative;
  cursor: grab;
}
.sub-box.zoomed:active {
  cursor: grabbing;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ddd;
  overflow: hidden;
  z-index: 20;
}
.loading-bar {
  width: 0%;
  height: 100%;
  background: #2196F3;
  transition: width 0.6s ease;
}
.loading-overlay.hidden {
  display: none;
}

/* ─── Interactive Hint Overlay ──────────────────────────────────── */
.interactive-hint {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.interactive-hint.show {
  opacity: 1;
}
.interactive-hint svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* Ensure zoomed interactive content fills its quadrant */
.zoomed-content {
  width: 100%;
  height: 100%;
}
.zoomed-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Center iframes within sub-boxes and allow clicks only when zoomed */
.sub-box iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  height: 480px;
  pointer-events: none;   /* allow parent to receive clicks */
}

.sub-box.zoomed iframe {
  width: 100%;
  height: 100%;
  pointer-events: auto;   /* interact with iframe when zoomed */
}

/* Center iframes within sub-boxes and allow clicks only when zoomed */
.sub-box iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  pointer-events: none;   /* allow parent to receive clicks */
}

.sub-box.zoomed iframe {
  pointer-events: auto;   /* interact with iframe when zoomed */
}

/* ─── Curriculum Display Section ──────────────────────────────────────── */
#curriculum-section {
  margin-top: 40px;
}

.curriculum-header {
  font-family: 'Work Sans', sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #2c2c2c;
  text-align: left;
}

.curriculum-highlight {
  text-decoration: underline;
  text-decoration-color: #e74c3c;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  color: #e74c3c;
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    color: #e74c3c;
    text-decoration-color: #e74c3c;
  }
  50% {
    opacity: 0.75;
    color: #c0392b;
    text-decoration-color: #c0392b;
  }
}

.curriculum-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Stage tabs (horizontal) */
.curriculum-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 0;
  border-bottom: 2px solid #e0e0e0;
}

.curriculum-tab {
  padding: 10px 20px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Varela Round', sans-serif;
  font-size: 0.95rem;
  color: #606060;
  transition: all 0.3s ease;
}

.curriculum-tab:hover {
  background: #e8e8e8;
  border-color: #bbb;
}

.curriculum-tab.active {
  background: #2c2c2c;
  color: #fff;
  border-color: #2c2c2c;
}

/* File type tabs (horizontal) */
.file-type-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.file-type-tab {
  padding: 8px 16px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Varela Round', sans-serif;
  font-size: 0.9rem;
  color: #505050;
  transition: all 0.25s ease;
}

.file-type-tab:hover {
  background: #e8e8e8;
}

.file-type-tab.active {
  background: #4a90e2;
  color: #fff;
  border-color: #4a90e2;
}

/* Content display */
.curriculum-content {
  background: #1e1e1e;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: auto;
}

.curriculum-content pre {
  margin: 0;
  padding: 20px;
  background: #1e1e1e;
  border-radius: 6px;
}

#curriculum-code {
  font-family: 'Fira Code', 'Monaco', 'Menlo', 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
  display: block;
  overflow-x: visible;
}

/* Override highlight.js default styles to ensure proper display */
.curriculum-content .hljs {
  background: #1e1e1e;
  padding: 0;
}

/* Make Berkeley Humanoid performance graph smaller */
.hberk-smaller {
  max-width: 80%;
  margin: 0 auto;
}

.hberk-smaller img {
  width: 100%;
}

/* ─── Appendix Section ──────────────────────────────────────── */
#appendix-section {
  text-align: left;
  margin: 60px auto;
  max-width: 900px;
}

.appendix-body {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 16px;
}

.appendix-body.hidden {
  display: none;
}

.appendix-subsection {
  font-family: 'Varela Round', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2c2c2c;
  margin-top: 30px;
  margin-bottom: 16px;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 8px;
}

.appendix-subsubsection {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #444;
  margin-top: 24px;
  margin-bottom: 12px;
}

.appendix-paragraph {
  font-family: 'Work Sans', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #555;
  margin-top: 18px;
  margin-bottom: 10px;
}

.appendix-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
  text-align: left;
}

.appendix-text code {
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 0.9em;
  color: #d63384;
}

.appendix-prompt-box {
  background: #f8f9fa;
  border-left: 4px solid #2196F3;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 4px;
}

.prompt-title {
  font-family: 'Work Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2196F3;
  margin-top: 0;
  margin-bottom: 10px;
}

.prompt-text {
  font-family: 'Work Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

.appendix-code-box {
  background: #1e1e1e;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0;
  margin: 20px 0;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: auto;
}

.appendix-code-box pre {
  margin: 0;
  padding: 20px;
  background: #1e1e1e;
  border-radius: 6px;
}

.appendix-code-box code {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #d4d4d4;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* ─── BibTeX Section ──────────────────────────────────────── */
#bibtex-section {
  text-align: left;
  margin: 60px auto;
  max-width: 900px;
}

.bibtex-container {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.bibtex-code {
  font-family: 'Monaco', 'Menlo', 'Courier New', monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  display: block;
  white-space: pre;
  overflow-x: auto;
}