/* One quiet column: no background bands, compact spacing, videos do the work. */
html { scroll-behavior: smooth; }
body { color: #3c4043; font-size: 16px; line-height: 1.5; }
strong, .content strong, .title { color: #202124; }
.container.is-max-desktop { max-width: 900px !important; }
.section { padding: 1.75rem 1.5rem; }
.footer { padding: 2.5rem 1.5rem 3rem; font-size: .85rem; color: #9aa0a6; background: transparent; }
.footer a { color: #6b8ec9; }
:focus-visible { outline: 3px solid #3273dc; outline-offset: 4px; }
.nowrap { white-space: nowrap; }
video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #151515; border-radius: 6px; }

/* Hero: title, one-line TLDR, buttons, then the logos as the affiliation row. */
.hero-body { padding: 4rem 1.5rem 1.5rem; }
.hero .publication-title { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1.1rem; }
.tldr { max-width: 40rem; margin: 0 auto 1.25rem; font-size: 1.05rem; line-height: 1.55; text-wrap: balance; }
.tldr strong { color: #3c4043; }
.hero .publication-links { margin-top: 0; }
.hero .team-logo { margin: 1.4rem 0 0; }

/* Video rows: small title with a light grey subcaption. */
.row-title { text-align: center; font-size: 1.5rem; font-weight: 500; color: #202124; line-height: 1.3; margin-bottom: .2rem; }
.row-subcaption { text-align: center; color: #aaa; font-size: 1rem; margin-bottom: 1rem; }

/* Text sections: left-aligned heading with a hairline rule. */
.content p { margin-bottom: 1rem; }
.motion-figure { margin: 1.25rem 0 1rem; border: 1px solid #e8eaed; border-radius: 6px; overflow: hidden; }
.motion-figure img, .motion-figure video { display: block; width: 100%; height: auto; border-radius: 0; }
.publication-links .link-block { display: inline-block; margin: .25rem; }
.more-logo { display: inline-block; margin-top: .6rem; width: 150px; max-width: 60%; }
.more-logo img { display: block; width: 100%; height: auto; }

/* Horizontally scrolling, looping previews with a full-size player. */
.video-carousel { position: relative; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 8px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card { flex: 0 0 calc((100% - 32px) / 3); min-width: 0; scroll-snap-align: start; }
.video-open { position: relative; width: 100%; display: block; padding: 0; border: 0; border-radius: 6px; background: #111; cursor: pointer; overflow: hidden; }
.video-open video { pointer-events: none; border-radius: 6px; object-fit: cover; }
.video-open:hover { box-shadow: 0 0 0 2px #3273dc; }
/* Simulation renders are pre-cropped around the robot at encode time. */
.sim-clips .video-open { background: #f7f7f7; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-60%); z-index: 1; border: 0; background: #3a3a3acc; color: white; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; box-shadow: 0 2px 6px #0003; }
.carousel-arrow:hover { background: #202124e6; }
.carousel-arrow svg { display: block; }
.carousel-arrow.previous { left: 10px; }.carousel-arrow.next { right: 10px; }
.carousel-arrow:disabled { opacity: .2; cursor: default; }
.video-dialog { margin: auto; width: min(1100px, 94vw); max-height: 94vh; padding: 16px; border: 0; border-radius: 10px; background: #161616; color: white; }
.video-dialog::backdrop { background: #000c; }.dialog-heading { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 8px; }.dialog-close { color: white; background: transparent; border: 0; font-size: 30px; cursor: pointer; width: 40px; height: 40px; }.video-dialog video { max-height: 75vh; }.dialog-open { overflow: hidden; }

@media (max-width: 768px) {
 .hero-body { padding-top: 2.5rem; }
 .hero .publication-title { font-size: 2rem; }
 .tldr { font-size: .98rem; }
 .team-logo { gap: 1rem; }
 .team-logo .uva-logo { width: 100px; }
 .team-logo .irl-logo { width: 36px; }
 .team-logo .whirlwind-logo { width: 65px; }
 .section { padding: 1.5rem 1.25rem; }
 .row-title { font-size: 1.3rem; }
 .carousel-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 600px) { .carousel-card { flex-basis: 78%; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Interactive demo: canvas with a start overlay, HUD and two virtual sticks. */
.demo { position: relative; aspect-ratio: 16 / 9; border: 1px solid #e8eaed; border-radius: 6px; overflow: hidden; background: #f7f7f7; touch-action: none; user-select: none; -webkit-user-select: none; }
.demo:focus-visible { outline: none; }
.demo-canvas { display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; background: #f7f7f7; }
.demo.running .demo-canvas { cursor: grab; }
.demo-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; padding: 1.5rem; text-align: center; background: linear-gradient(180deg, #fafafacc, #f7f7f7f2); }
.demo-blurb { max-width: 34rem; color: #5f6368; font-size: .95rem; line-height: 1.5; margin: 0; }
.demo-size { margin-left: .4rem; opacity: .65; font-weight: 400; }
.demo-status { min-height: 1.4em; margin: 0; color: #5f6368; font-size: .9rem; }
.demo-status.is-error { color: #c5221f; }
.demo.loading .demo-start-button { opacity: .6; }
.demo-hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; pointer-events: none; }
.demo-hud[hidden] { display: none; }
.demo-readout { margin: 0; font-variant-numeric: tabular-nums; white-space: pre; font-size: .82rem; color: #5f6368; background: #ffffffb8; border-radius: 4px; padding: .25rem .5rem; }
.demo-reset { pointer-events: auto; border: 0; border-radius: 999px; background: #3a3a3acc; color: white; font: inherit; font-size: .82rem; padding: .3rem .85rem; cursor: pointer; }
.demo-reset:hover { background: #202124e6; }
.demo.running .demo-status { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; pointer-events: none; }
.demo.running .demo-start[hidden] { display: none; }
.joystick { position: absolute; bottom: 18px; left: 18px; width: 108px; height: 108px; border-radius: 50%; background: #ffffffaa; border: 1px solid #d9dbe0; box-shadow: inset 0 0 0 1px #ffffff80, 0 2px 8px #0000000f; display: none; align-items: center; justify-content: center; touch-action: none; cursor: pointer; }
.demo.running .joystick { display: flex; }
.joystick-knob { width: 44px; height: 44px; border-radius: 50%; background: #3273dc; box-shadow: 0 2px 6px #0003; pointer-events: none; transition: transform .05s linear; }
.joystick.active .joystick-knob { background: #2160c4; transition: none; }
.joystick-label { position: absolute; bottom: -20px; font-size: .72rem; color: #9aa0a6; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
.demo-help { margin: 1.5rem 0 0; text-align: center; color: #9aa0a6; font-size: .9rem; }
.demo-help kbd { display: inline-block; min-width: 1.35em; padding: 0 .3em; margin: 0 1px; border: 1px solid #dadce0; border-bottom-width: 2px; border-radius: 4px; background: #fff; color: #5f6368; font-family: inherit; font-size: .8em; line-height: 1.5; text-align: center; }
@media (max-width: 600px) {
 .demo { aspect-ratio: 4 / 3; }
 .joystick { width: 88px; height: 88px; bottom: 12px; left: 12px; }
 .joystick-knob { width: 36px; height: 36px; }
 .demo-readout { font-size: .72rem; }
}