:root {
    --page:#ffffff; --hero:#ffffff; --text:#1d1d1f; --heading:#1d1d1f;
    --muted:#6e6e73; --accent:#0071e3; --hover:#0058b0; --accent-ink:#fff;
    --card:#ffffff; --border:#d2d2d7; --control:#f5f5f7; --control-hover:#e8e8ed; --stage:#ffffff; --viewer:#f5f5f7;
}
html { scroll-behavior: smooth; color-scheme: light; }
body { width:min(1008px, calc(100% - 48px)); padding:0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; background: var(--page); color: var(--text); }
.paper-hero { width: 100vw; margin-left: calc(50% - 50vw); background: var(--hero); color: var(--heading); }
.hero-inner { width: min(1320px, calc(100% - 64px)); margin: auto; padding: 30px 0 26px; }
.hero-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 15px; }
.hero-nav > span { color: var(--muted); }
.hero-nav > div { display: flex; gap: 30px; }
.paper-hero a { color: inherit; text-decoration: none; }
.paper-hero a:hover { color: var(--hover); }
.paper-hero h1 { font-size: clamp(42px, 6.6vw, 82px); letter-spacing: -.055em; font-weight: 600; line-height: 1.08; text-align: center; margin: 42px 0 16px; }
.hero-subtitle { font-size: clamp(18px, 2.2vw, 28px); text-align: center; letter-spacing: -.02em; color: var(--muted); }
.hero-stage { position:relative; margin-top: 28px; aspect-ratio: 16 / 9; background: var(--stage); }
.hero-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
#hero-toggle { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; color:var(--heading); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hero-playback-control { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:56px; height:56px; box-sizing:border-box; border:1px solid var(--border); border-radius:50%; background:color-mix(in srgb,var(--card) 88%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 3px 14px #0002; transition:background 160ms ease, transform 160ms ease; }
.hero-playback-control svg { grid-area:1 / 1; width:30px; height:30px; }
#hero-toggle[data-playing="true"] .hero-playback-control { display:none; }
.paper-hero #hero-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }
@media (hover:hover) { #hero-toggle:hover .hero-playback-control { background:var(--control-hover); transform:scale(1.05); } }
.paper-credits { margin: 42px 0 28px; text-align: center; }
.paper-credits #authors { margin: 0; }
.paper-credits #affiliations { gap: 6px 12px; margin-top: 12px; }
.paper-credits .affiliation { font-size: 14px; }
.paper-credits .author { color: var(--heading); font-weight: 500; font-size: 20px; }
.paper-credits .affiliation { color: var(--muted); }
.paper-credits sup { color: var(--muted); }
#tldr-container { font-style: normal; font-size: 20px; line-height: 1.6; max-width: 800px; margin: 32px auto 48px; }
#tldr-first { display: none; }
#explore-designs { scroll-margin-top: 32px; }
.section-container { margin-top: 88px; }
.section-header { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.2; letter-spacing: -.035em; font-weight: 600; color: var(--heading); }
.section-sub-header { color: var(--heading); font-weight: 500; }
.section-text { max-width: 860px; font-size: 17px; line-height: 1.75; margin-top: 24px; }
.section-text a, #website-inspiration a { color: var(--accent); text-underline-offset: 4px; }
.highlighted-text { color: var(--accent); font-weight: 600; }
.section-image { display:block; width:100%; height:auto; box-sizing: border-box; background: var(--card); padding: 18px; border-radius: 12px; margin-top: 30px; }
.equation-box { overflow-x:auto; overflow-y:hidden; min-width:0; box-sizing: border-box; width: 100%; max-width: 860px; margin: 20px auto 0; padding: 8px 14px; border-color: var(--border); background: var(--card); color: var(--heading); border-radius: 12px; }
.equation-box, .citation-container pre { overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:var(--muted) var(--control); }
.equation-box::-webkit-scrollbar, .citation-container pre::-webkit-scrollbar { height:6px; }
.equation-box::-webkit-scrollbar-track, .citation-container pre::-webkit-scrollbar-track { background:var(--control); border-radius:3px; }
.equation-box::-webkit-scrollbar-thumb, .citation-container pre::-webkit-scrollbar-thumb { background:var(--muted); border-radius:3px; }
.equation-box:focus-visible, .citation-container pre:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.citation-container { position:relative; box-sizing: border-box; width: 100%; max-height:none; overflow:hidden; margin-top: 24px; padding: 20px 24px; color: var(--muted); background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.citation-container pre { font-size: 13px; overflow-x:auto; }
#copy-citation { position:absolute; top:8px; right:16px; display:flex; align-items:center; justify-content:center; gap:7px; min-width:88px; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--heading); font:inherit; font-size:13px; cursor:pointer; }
#copy-citation:hover { background:var(--control); }
#copy-citation:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#copy-citation.copied { color:var(--accent); }
#website-inspiration { padding: 40px 0 30px; color: var(--muted); border-top: 1px solid var(--border); line-height: 1.7; }
#syb-demo { box-sizing: border-box; max-width: 100%; padding: 24px; gap: 22px; background: var(--card); border: 1px solid var(--border); border-radius: 18px; margin-top: 28px; }
.syb-controls { gap: 11px; }
.syb-control-row { gap: 14px; }
.syb-control-label { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .05em; flex-basis: 76px; }
.syb-tab-group { gap: 6px; }
.syb-tab { border: 1px solid var(--border); background: var(--control); color: var(--text); border-radius: 7px; padding: 7px 13px; font-family: inherit; font-size: 13px; transition: background .15s, color .15s; }
.syb-tab:hover:not(:disabled):not(.active) { background: var(--control-hover); color: var(--heading); }
.syb-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.syb-tab.active:hover:not(:disabled) { background: var(--hover); border-color: var(--hover); }
.syb-tab:focus-visible, input:focus-visible { outline: 2px solid var(--hover); outline-offset: 3px; }
#syb-iter, #syb-vx, #syb-vy, #syb-vyaw { min-width:0; accent-color: var(--accent); }
#syb-iter-value, #syb-vx-val, #syb-vy-val, #syb-vyaw-val { color: var(--muted); font-size: 13px; }
#syb-iter-value { min-width:4em; }
#syb-canvas-wrap { background: var(--viewer); border-radius: 10px; }
#syb-status { color: var(--muted); font-style: normal; font-size: 14px; text-shadow: none; }
.syb-note { color: var(--muted); font-size: 13px; line-height: 1.5; }
.syb-commands { display: flex; flex-direction: column; gap: 11px; }
.syb-view-buttons { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgb(29 29 31 / 72%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 3px 14px #0002; }
.syb-view-button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s; }
.syb-view-button svg { width: 16px; height: 16px; flex: none; }
.syb-view-button:hover { background: rgb(255 255 255 / 14%); }
.syb-view-button.active { background: var(--accent); }
.syb-view-button.active:hover { background: var(--hover); }
.syb-view-button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.syb-icon-play, #syb-play.active .syb-icon-pause { display: none; }
#syb-play.active .syb-icon-play { display: block; }
@media (min-width: 721px) {
    #syb-canvas-wrap { max-height: max(360px, calc(100svh - 330px)); }
}
@media (min-width: 1000px) {
    .syb-commands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
    .syb-commands .syb-control-label { flex-basis: auto; }
    #syb-vx-val, #syb-vy-val, #syb-vyaw-val { min-width: 3em; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.paper-hero :focus-visible { outline: 2px solid var(--hover); outline-offset: 5px; }
@media (min-width: 1400px) {
    .hero-stage { max-width: 1152px; margin-inline: auto; }
}
@media (max-width: 720px) {
    body { width:calc(100% - 32px); }
    .hero-inner { width: calc(100% - 32px); padding-top: 22px; }
    .hero-nav { font-size: 13px; gap: 12px; }
    .hero-nav > div { gap: 16px; }
    .hero-nav a { display:flex; align-items:center; min-height:44px; }
    .paper-hero h1 { margin-top: 38px; }
    .hero-subtitle { max-width: 370px; margin: auto; line-height: 1.4; }
    .hero-stage { width: calc(100% + 32px); margin-left: -16px; }
    .hero-playback-control { top:12px; right:12px; width:48px; height:48px; }
    .hero-playback-control svg { width:28px; height:28px; }
    #tldr-container { font-size: 18px; }
    .section-container { margin-top: 60px; }
    .section-text { font-size: 16px; line-height: 1.7; }
    .section-image { padding: 8px; border-radius: 8px; }
    #syb-demo { padding: 16px; gap: 18px; }
    .syb-control-row { gap: 9px; }
    .syb-control-label { flex-basis: 100%; }
    .syb-tab { min-height:44px; min-width:44px; padding:8px 11px; }
    #syb-seed-tabs { display:grid; grid-template-columns:repeat(5,minmax(44px,1fr)); width:100%; }
    #syb-iter, #syb-vx, #syb-vy, #syb-vyaw { height:44px; margin-block:0; }
    #syb-canvas-wrap { order:-1; position:sticky; top:12px; z-index:5; flex:none; max-height:min(40svh,300px); box-shadow:0 0 0 8px var(--card); }
    .syb-view-buttons { top: 8px; right: 8px; }
    .syb-view-button { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .syb-view-button svg { width: 20px; height: 20px; }
    .syb-view-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
    .citation-container { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-playback-control { transition:none; }
    #hero-toggle:hover .hero-playback-control { transform:none; }
}

@media (min-width: 800px) and (max-height: 850px) {
    .hero-inner { padding-top: 20px; padding-bottom: 16px; }
    .paper-hero h1 { font-size: 52px; margin: 20px 0 10px; }
    .hero-subtitle { font-size: 22px; }
    .hero-stage { width: min(100%, calc((100svh - 285px) * 16 / 9)); margin: 18px auto 0; }
}
.design-pairs { width:100%; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.design-pair { margin:0; overflow:hidden; border-radius:12px; background:var(--card); border:1px solid var(--border); }
.design-pair figcaption { font-size:20px; font-weight:600; color:var(--heading); padding:20px 12px 10px; text-align:center; }
.design-pair img { display:block; width:100%; height:auto; }
.pair-labels { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:10px 8% 18px; text-align:center; font-size:13px; color:var(--muted); }
.design-pair-fourier .figure-frame { display:grid; grid-template-columns:1fr 1fr; }
.design-pair-fourier .robot-crop { position:relative; aspect-ratio:600 / 730; overflow:hidden; }
.design-pair-fourier .robot-crop img { position:absolute; width:290%; max-width:none; max-height:none; height:auto; top:-19.178082%; }
.design-pair-fourier .robot-nominal img { left:-13.833333%; }
.design-pair-fourier .robot-optimized img { left:-181.333333%; }
.design-pair-fourier .pair-labels { gap:0; padding-inline:0; }
.figure-frame { display:block; width:100%; }
.section-image.overview-image { padding:0; }
.native-plot { cursor:default; }
.plot-surface > svg, .plot-surface > img { display:block; width:100%; height:auto; }
.plot-surface, .plot-surface * { pointer-events:none; user-select:none; }
.robot-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:10px; width:100%; margin:30px 0 0; padding:0; list-style:none; }
.robot-grid li { min-width:0; margin:0; padding:0; }
.robot-tile { position:relative; display:block; box-sizing:border-box; width:100%; padding:0; border:1px solid transparent; border-radius:10px; background:var(--card); color:var(--heading); font:inherit; cursor:default; transition:transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.robot-portrait { display:block; overflow:hidden; border-radius:inherit; }
.robot-portrait img { display:block; width:100%; height:auto; aspect-ratio:10 / 11; transition:transform 180ms ease; }
.robot-name { position:absolute; z-index:2; top:calc(100% + 7px); left:50%; width:max-content; max-width:calc(100% + 24px); box-sizing:border-box; padding:7px 9px; border:1px solid var(--border); border-radius:7px; background:var(--card); color:var(--heading); box-shadow:0 5px 16px #0002; font-size:11px; font-weight:500; line-height:1.35; text-align:center; text-wrap:balance; opacity:0; visibility:hidden; transform:translate(-50%,3px); transition:opacity 160ms ease, transform 160ms ease, visibility 160ms; pointer-events:none; }
.robot-tile:focus-visible { z-index:3; outline:none; border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent),0 5px 16px #0002; transform:translateY(-2px); }
.robot-tile:focus-visible .robot-name { opacity:1; visibility:visible; transform:translate(-50%,0); }
@media(hover:hover) and (pointer:fine) {
    .robot-tile:hover { z-index:4; border-color:color-mix(in srgb,var(--accent) 65%,transparent); box-shadow:0 5px 16px #0002; transform:translateY(-2px); }
    .robot-tile:hover .robot-portrait img { transform:scale(1.035); }
    .robot-tile:hover .robot-name { opacity:1; visibility:visible; transform:translate(-50%,0); }
}
@media(max-width:1000px) { .robot-grid { grid-template-columns:repeat(8,minmax(0,1fr)); gap:9px; } .robot-grid li:nth-child(49) { grid-column:4; } }
@media(max-width:700px) { .robot-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; } .robot-grid li:nth-child(49) { grid-column:3; } }
@media(max-width:480px) { .robot-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .robot-grid li:nth-child(49) { grid-column:2; } }
@media(prefers-reduced-motion:reduce) { .robot-tile, .robot-portrait img, .robot-name { transition:none; } .robot-tile:hover, .robot-tile:focus-visible, .robot-tile:hover .robot-portrait img { transform:none; } }
#optimized-designs { margin-bottom:0; }
#optimized-designs + .section-text { margin-top:18px; }
.equation-box mjx-container[display="true"] { margin:.3em 0!important; max-width:none; }
.equation-box mjx-container > svg { max-width:none; height:auto; }
.hero-nav > div { align-items:center; }
::selection { background:var(--accent); color:var(--accent-ink); }
video::-webkit-media-controls-mute-button, video::-webkit-media-controls-volume-slider { display:none; }
@media(max-width:800px) { .design-pairs { grid-template-columns:1fr; gap:20px; max-width:480px; margin-inline:auto; } .design-pair img { max-height:270px; object-fit:contain; } }
@media(max-width:500px) {
    .hero-nav > span { display:none; }
    .hero-nav > div { width:100%; justify-content:space-between; gap:10px; }
    .equation-box { font-size:14px; padding:6px 8px; }
    .citation-container pre { line-height:1.7; }
    #copy-citation { top:4px; right:8px; width:32px; height:32px; min-width:32px; padding:0; }
    #copy-citation::after { content:""; position:absolute; inset:-6px; }
    #copy-citation span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}

#syb-iter-row { border: 1px solid transparent; border-radius: 9px; padding: 10px 12px; margin: 2px -13px; }
#syb-iter-row.syb-iter-invitation:not(.syb-iter-reference) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
#syb-iter-hint { color: var(--accent); font-size: 12px; font-weight: 500; flex-basis: 100%; margin-left: 90px; }
#syb-iter-hint[hidden], .syb-iter-reference #syb-iter-hint { display: none; }
@media (max-width: 720px) { #syb-iter-hint { margin-left: 0; } }