/* Internal G follows the author's layout. Original site palette and publication header remain. */ :root{--main-nav-height:0px}body{background:radial-gradient(ellipse at 50% 0,#22283b 0,transparent 650px),#141518;background-repeat:no-repeat}.publication-strip{padding-top:64px;padding-bottom:26px}.layout-tldr{margin-top:0;margin-bottom:50px}.layout-tldr p{max-width:1000px;margin:0 auto;color:#bcc4d2;font-size:17px;line-height:1.8;text-align:center}.layout-tldr strong{color:#e7e9ee;margin-right:9px;font-weight:600}.film-section{margin-top:0;margin-bottom:54px}.film-section h2{font-size:24px;line-height:1.3;font-weight:500;letter-spacing:-.02em;margin:0 0 20px}.explanation-film{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#141518;border:1px solid #303642;border-radius:12px}.method-sentence{font-size:21px;line-height:1.6;max-width:1000px;margin:0 0 26px;color:#d5d9e1}.method-film-wrap{position:relative}.film-deploy{display:flex;align-items:center;justify-content:center;gap:12px;position:absolute;bottom:8%;right:5%;padding:12px 22px;background:#77ddc4;color:#173d38;font-size:16px;font-weight:650;letter-spacing:.1em;border:1px solid #77ddc4;border-radius:6px;text-decoration:none;opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .5s,transform .5s}.method-film-wrap.is-complete .film-deploy{opacity:1;pointer-events:auto;transform:none}.film-deploy:focus-visible{opacity:1;pointer-events:auto;outline:3px solid #aab8ff;outline-offset:5px}.film-deploy span{font-size:24px}.deploy-connector{width:1px;height:42px;background:linear-gradient(#77ddc480,#77ddc430);margin:0 8.5% 0 auto;position:relative}.deploy-connector:after{content:'';position:absolute;bottom:0;left:-4px;width:8px;height:8px;border-right:1px solid #77ddc480;border-bottom:1px solid #77ddc480;transform:rotate(45deg)}#method{margin-bottom:16px}.test-nav{top:0;z-index:30}#real-results{padding-top:0;scroll-margin-top:12px}.upper-bound-strip{border-top:1px solid #3b4352;border-bottom:1px solid #3b4352;padding:15px 0;margin-bottom:25px;color:#d5d9e1;font-size:18px;line-height:1.6}.upper-bound-strip span{color:#aab4ca}.held-explanation{max-width:1050px;font-size:17px!important;line-height:1.75!important}.impact-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:25px;padding-bottom:25px;border-top:1px solid #ffffff13;border-bottom:1px solid #ffffff13;margin-top:70px;margin-bottom:40px}.impact-row>div{display:flex;align-items:baseline;gap:12px}.impact-row strong{font-size:28px;font-weight:500;color:#abb9ff;letter-spacing:-.035em}.impact-row span{font-size:12px;color:#99a3b3;line-height:1.5}#abstract{padding-top:15px;margin-top:0}#abstract:before{display:none}.simulation-layout{margin-top:70px;margin-bottom:80px}.simulation-layout>h2{font-size:28px;font-weight:500}.embodiment-flow{display:grid;grid-template-columns:1fr 140px 1fr;align-items:center;max-width:950px;margin:32px auto 55px}.embodiment-flow figure{margin:0;min-width:0}.embodiment-flow figcaption{font-size:15px;color:#bdc5d4;margin-bottom:12px}.embodiment-flow img{display:block;width:100%;height:auto;border:1px solid #3a4351;border-radius:7px}.embodiment-arrows{color:#8f9ec2;align-self:stretch;display:flex;align-items:center}.embodiment-arrows svg{width:100%;height:75%}.post-embodiments{display:grid;gap:24px}.post-embodiments figure{max-width:300px}.simulation-results{display:grid;grid-template-columns:1fr 1fr;gap:55px}.simulation-results>section{min-width:0}.simulation-results h3{font-size:21px;color:#dbe0eb;font-weight:500;margin:0 0 25px}.sim-measure{margin:0 0 30px}.sim-measure h4{font-size:14px;font-weight:500;color:#bdc5d4;margin:0 0 12px}.sim-score{display:grid;grid-template-columns:105px 1fr 54px;gap:10px;align-items:center;font-size:12px;color:#99a5b9;margin:11px 0}.sim-score>div{height:8px;background:#2c323e;border-radius:2px;overflow:hidden}.sim-score i{display:block;height:100%;background:#707c90}.sim-score.expert i{background:#aab4ca}.sim-score.ours i{background:#77ddc4}.sim-score b{font-weight:500;text-align:right;color:#c7cfdd}.sim-score.ours b{color:#77ddc4}.sim-sample-note{font-size:12px;color:#929daf}.finding-head h2{line-height:1.13}.explanation-film:focus-visible{outline:2px solid #aab8ff;outline-offset:4px} @media(max-width:760px){.publication-strip{padding-top:35px}.layout-tldr{margin-bottom:35px}.layout-tldr p{font-size:14px;line-height:1.75}.film-section{margin-bottom:35px}.film-section h2{font-size:21px}.method-sentence{font-size:17px}.explanation-film{border-radius:7px}.film-deploy{font-size:11px;padding:7px 12px;gap:7px}.film-deploy span{font-size:18px}.impact-row{grid-template-columns:repeat(2,1fr);gap:18px 24px;margin-top:40px;margin-bottom:25px}.impact-row>div{gap:10px}.impact-row strong{font-size:25px}.impact-row span{font-size:11px}.embodiment-flow{grid-template-columns:1fr 45px 1fr;margin-bottom:35px}.embodiment-flow figcaption{font-size:11px}.post-embodiments{gap:18px}.simulation-results{grid-template-columns:1fr;gap:20px}.upper-bound-strip{font-size:15px}.held-explanation{font-size:14px!important}.simulation-layout{margin-top:45px}.sim-score{grid-template-columns:100px 1fr 50px}} @media(prefers-reduced-motion:reduce){.film-deploy{transition:none}} /* Original Table 5: paired vertical bars against the all-expert reference. */ .upper-comparison{margin:28px 0 44px}.upper-comparison h3{font-size:24px;margin:0 0 10px}.upper-definition,.upper-source{color:var(--muted,#abb2c1);font-size:14px}.upper-legend{display:flex;flex-wrap:wrap;gap:24px;margin:22px 0 32px;font-size:14px;color:#c4cad5}.upper-legend span{display:flex;align-items:center;gap:8px}.upper-legend i{width:10px;height:10px;display:inline-block}.upper-legend .oracle,.upper-bar.oracle{background:#aab4ca}.upper-legend .ours,.upper-bar.ours{background:#77ddc4}.upper-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px}.upper-chart{min-width:0}.upper-chart h4{font-size:16px;margin:0 0 32px}.upper-metrics{display:flex;gap:16px}.upper-metric{flex:1;min-width:0}.upper-bars{height:170px;border-bottom:1px solid #49515f;display:flex;align-items:flex-end;justify-content:center;gap:14px;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#ffffff09 calc(25% - 1px),#ffffff09 25%)}.upper-bar{height:calc(var(--value)*1%);width:28px;position:relative;border-radius:3px 3px 0 0}.upper-bar b{position:absolute;top:-25px;left:50%;transform:translateX(-50%);color:#eef0f5;font-size:14px;font-weight:500}.upper-metric p{text-align:center;font-size:12px;line-height:1.4;margin:10px 0 0;color:#c4cad5}.upper-source{margin:24px 0 0;font-size:12px}@media(max-width:650px){.upper-chart-grid{grid-template-columns:1fr}.upper-bars{height:150px}} /* Compact upper-bound comparison, one desktop row. */ .upper-comparison{margin:12px 0 24px}.upper-comparison h3,.upper-definition{display:none}.upper-legend{margin:0 0 20px;gap:20px;font-size:12px}.upper-chart-grid{grid-template-columns:2fr 2fr 3fr 3fr;gap:22px}.upper-chart h4{font-size:12px;font-weight:500;margin:0 0 25px;color:#c4cad5}.upper-metrics{gap:8px}.upper-bars{height:72px;gap:8px}.upper-bar{width:16px;border-radius:2px 2px 0 0}.upper-bar b{font-size:11px;top:-19px}.upper-metric p{font-size:10px;margin:7px 0 0;line-height:1.3}.upper-source{font-size:10px;margin:10px 0 0}.upper-bound-strip{font-size:15px;padding:10px 0;margin-bottom:14px}.upper-bound-strip span{white-space:nowrap} #result-prompt{display:none!important} #pick-place[data-result="place"] .finding-head>p:last-child,#pick-place[data-result="laundry"] .finding-head>p:last-child{font-size:21px;line-height:1.5;color:#77ddc4;font-weight:500} @media(max-width:760px){.upper-chart-grid{grid-template-columns:1fr 1fr;gap:20px}.upper-bars{height:65px}#pick-place[data-result="place"] .finding-head>p:last-child,#pick-place[data-result="laundry"] .finding-head>p:last-child{font-size:18px}} .sim-setup{display:grid;grid-template-columns:1fr 32px 1fr 1fr;align-items:center;gap:18px;margin:20px 0 28px}.sim-setup figure,.sim-result-panel figure{margin:0;min-width:0}.sim-setup figcaption{font-size:13px;margin:0 0 9px;color:#bcc4d2}.sim-setup video,.sim-result-panel video{display:block;width:100%;height:auto;border:1px solid #3d4555;border-radius:7px;background:#171a20}.sim-flow-arrow{color:#aab8ff;font-size:28px}.sim-task-nav{display:flex;gap:7px;padding:10px;background:#20242d;border-radius:8px;margin-bottom:24px;overflow-x:auto}.sim-task-nav button{flex:1;white-space:nowrap;text-align:left;border:0;border-radius:22px;padding:9px 13px;background:transparent;color:#b7bfce;font:inherit;font-size:13px;cursor:pointer}.sim-task-nav button small{display:block;font-size:10px;margin-top:3px;letter-spacing:.04em}.sim-task-nav button[aria-pressed=true]{background:#88dfd0;color:#244442}.sim-result-panel{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}.sim-result-panel video{max-height:290px;object-fit:contain}.sim-result-panel figcaption{color:#949fb1;font-size:12px;margin-top:8px}.sim-result-label{font-size:13px;color:#aeb7c6;margin:0 0 18px}.sim-summary-row{margin:0 0 20px}.sim-summary-row>div:first-child{display:flex;justify-content:space-between;gap:15px;font-size:14px;margin-bottom:8px}.sim-summary-row b{font-weight:500}.sim-summary-track{height:13px;background:#292f3c;border-radius:3px;overflow:hidden}.sim-summary-track i{height:100%;display:block;background:#526079;border-radius:3px}.sim-summary-row.ours{color:#afbaff}.sim-summary-row.ours i{background:#aab8ff}.sim-summary-row.oracle i{background:#7d899e}.simulation-layout{margin-top:40px;margin-bottom:35px}.sim-sample-note{margin-top:15px}.citation-compact{margin:25px auto 45px}.citation-compact summary{cursor:pointer;color:#b9c2d5;font-size:16px}.citation-compact pre{font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;padding:18px;background:#1d222b;border-radius:8px}#result-context,[data-result-line]>p{display:none!important}@media(max-width:700px){.sim-setup{grid-template-columns:1fr 22px 1fr;gap:10px}.sim-setup figure:last-child{grid-column:3}.sim-result-panel{grid-template-columns:1fr;gap:22px}.sim-task-nav button{flex:none}.sim-setup figcaption{font-size:11px}} /* Apply the same concise result presentation across all test sets. */ #real-results .episode-prompt,#real-results .study-episode-label,#real-results .result-context,#real-results .result-line>p,#real-results .us-control{display:none!important} #pick-place .finding-head>p:last-child,#caterpillar .finding-head>p:last-child{font-size:21px;line-height:1.5;color:#77ddc4;font-weight:500} @media(max-width:760px){#pick-place .finding-head>p:last-child,#caterpillar .finding-head>p:last-child{font-size:18px}} .sim-emb-nav{display:flex;gap:8px;margin:22px 0 14px}.sim-emb-nav button{border:0;border-radius:22px;padding:9px 18px;background:#20242d;color:#b7bfce;font:inherit;font-size:14px;cursor:pointer}.sim-emb-nav button[aria-pressed=true]{background:#88dfd0;color:#244442}.sim-task-nav button[hidden]{display:none}.citation-compact h2{font-size:16px;color:#b9c2d5;font-weight:500;margin:0 0 10px} /* Gear insertion: three policy clips per row, plus the unseen-colors slab. */ #caterpillar .split-evidence,#caterpillar-ood .split-evidence{width:100%;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))} #caterpillar-ood .finding-head>p:last-child{font-size:21px;line-height:1.5;color:#77ddc4;font-weight:500} @media(max-width:760px){#caterpillar-ood .finding-head>p:last-child{font-size:18px}} /* Mobile: keep test-set clips side by side instead of stacking. */ @media(max-width:760px){.evidence-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.held-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.split-evidence{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}} @media(max-width:560px){#caterpillar .split-evidence,#caterpillar-ood .split-evidence{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}} /* Consistent real-robot test-set controls and concise presentation. */ .episode-prompt,.study-episode-label{display:none!important} #caterpillar[hidden],#caterpillar-ood[hidden]{display:none!important} #caterpillar .secondary-findings,#caterpillar-ood .secondary-findings,#caterpillar .result-line>p,#caterpillar-ood .result-line>p{display:none!important} #caterpillar-ood .finding-head>p:last-child{font-size:21px;line-height:1.5;color:#77ddc4;font-weight:500} .benchmark-two-nav{position:static;margin-top:28px;margin-bottom:0}.benchmark-two-nav a{display:flex;flex-direction:column;gap:3px}.benchmark-two-nav a small{font-size:9px;line-height:1.15;color:#929daf}.benchmark-two-nav a[aria-current=true] small{color:#31585f} @media(max-width:760px){#caterpillar-ood .finding-head>p:last-child{font-size:18px}} .benchmark-two-nav{display:none}.benchmark-back{background:transparent;border:1px solid #434c5b;border-radius:18px;color:#b7c0d0;padding:7px 12px;white-space:nowrap;font:inherit;font-size:11px;cursor:pointer}.benchmark-back[hidden]{display:none} .sim-setup.sim-setup-branched{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:24px;align-items:center;max-width:1000px;margin:24px auto 32px}.sim-post-branches{display:grid;gap:24px;min-width:0}.sim-branch-arrows{align-self:stretch;color:#aab8ff}.sim-branch-arrows svg{display:block;width:100%;height:100%;min-height:300px;overflow:visible}.sim-branch-arrows svg>path{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;marker-end:url(#sim-branch-tip)}.sim-setup-branched>figure{grid-column:auto}.sim-post-branches video{max-height:190px;object-fit:contain}.sim-setup-branched figcaption{margin-bottom:10px}@media(max-width:700px){.sim-setup.sim-setup-branched{grid-template-columns:minmax(0,1fr) 45px minmax(0,1fr);gap:10px}.sim-branch-arrows svg{min-height:200px}.sim-post-branches{gap:20px}.sim-setup-branched>figure:last-child{grid-column:auto}} /* Keep policy comparisons side by side at every viewport width. */ #pick-place .evidence-grid,#caterpillar .split-evidence,#caterpillar-ood .split-evidence{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%;max-width:none;align-items:start} #push .held-videos,#pour .held-videos{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start} .evidence-grid>.clip,.split-evidence>.clip,.held-videos>.clip{min-width:0;margin:0!important;width:100%} .evidence-grid video,.split-evidence video,.held-videos video{display:block;width:100%;max-width:100%;height:auto;object-fit:contain} @media(max-width:760px){#pick-place .evidence-grid,#caterpillar .split-evidence,#caterpillar-ood .split-evidence,#push .held-videos,#pour .held-videos{gap:6px}.evidence-grid .clip-title,.split-evidence .clip-title,.held-videos .clip-title{font-size:10px;line-height:1.35;min-height:28px;overflow-wrap:anywhere}.evidence-grid figcaption,.split-evidence figcaption,.held-videos figcaption{font-size:9px;line-height:1.4}} /* method section now hosts the interactive widget: let DEPLOY sit below it, not over it */ .method-film-wrap{display:flex;flex-direction:column} .method-film-wrap .film-deploy{position:static;align-self:flex-end;margin-top:18px; opacity:1;pointer-events:auto;transform:none} .method-film-wrap .sdm{width:100%} /* wide method diagram: keep it legible on small screens by letting it scroll */ .sdm-scroll{width:100%} @media(max-width:860px){ .sdm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid #26282e;border-radius:12px} .sdm-scroll .sdm{min-width:880px;max-width:none} .sdm-scroll .sdm-world{border:0;border-radius:0} .sdm-scroll:after{content:'swipe to see the full diagram';display:block; font-size:11px;color:#7f8899;padding:6px 10px 8px} } /* teaser reads as embedded animation, not a player */ .film-embed{width:100%} .film-embed .explanation-film{pointer-events:none} .film-embed .explanation-film::-webkit-media-controls{display:none!important} /* baked-in captions are authored at 1280px wide: keep them legible on phones */ @media(max-width:860px){ .film-embed{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid #303642;border-radius:12px} .film-embed .explanation-film{min-width:760px;border:0;border-radius:0} .film-embed:after{content:'swipe to see the full frame';display:block; font-size:11px;color:#7f8899;padding:6px 10px 8px} } /* method lead-in: idea icon + Self-Demo tag */ .method-sentence{display:flex;align-items:flex-start;gap:12px} .method-sentence .ms-icon{flex:0 0 auto;color:#77ddc4;margin-top:2px} .method-sentence .ms-icon svg{width:30px;height:30px;display:block} .method-sentence .ms-tag{color:#77ddc4;font-weight:600} @media(max-width:700px){.method-sentence .ms-icon svg{width:23px;height:23px}} /* lead-in: icon beside one continuous sentence (not flex-split) */ .method-sentence .ms-copy{display:block} /* deploy reads as the transition from method into the test sets */ .method-film-wrap .film-deploy{align-self:center;margin-top:22px} .deploy-connector{margin:0 auto} /* idea icon in yellow; Self-Demo named inline; second sentence on its own line */ .method-sentence .ms-icon{color:#f0c454} .method-sentence .ms-l1,.method-sentence .ms-l2{display:block} .method-sentence .ms-l2{margin-top:4px;color:#c2c6d0} .method-sentence .ms-tag{color:#a9baff;font-weight:600;white-space:nowrap} .method-sentence .ms-icon{margin-top:0} /* deploy now lives inside the method figure, beside the post-trained policy */ .method-film-wrap .film-deploy{display:none} .deploy-connector{display:none} /* Selected result tabs share the site mint accent. */ .test-nav a[aria-current=true]{color:#173d38;background:#77ddc4} .test-nav [aria-current=true]:hover{color:#173d38;background:#8be5cf} .test-nav a[aria-current=true] small, .benchmark-two-nav a[aria-current=true] small{color:#24564b} .sim-task-nav button[aria-pressed=true], .sim-emb-nav button[aria-pressed=true]{background:#77ddc4;color:#173d38} /* --- takeaway under the upper-bound comparison --- */ .upper-takeaway{font-size:15px;line-height:1.65;color:#cfd6e4;margin:20px 0 6px;max-width:760px} /* --- upper-bound comparison: gap (dumbbell) chart --- */ .gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 54px;margin-top:22px} .gap-task h4{font-size:14px;font-weight:600;color:#eef1f7;margin:0 0 12px;letter-spacing:-.2px} .gap-row{display:grid;grid-template-columns:104px 1fr 112px;align-items:center;gap:14px; padding:6px 0;font-variant-numeric:tabular-nums} .gap-lab{font-size:12px;color:#99a2b2} .gap-track{position:relative;height:14px} .gap-track::before{content:"";position:absolute;inset:6px 0 auto;height:2px;background:#2b3039;border-radius:2px} .gap-span{position:absolute;top:6px;height:2px;background:#5a6373;border-radius:2px} .gap-row.is-gap .gap-span{background:#e8753a} .gap-dot{position:absolute;top:3px;width:8px;height:8px;margin-left:-4px;border-radius:50%; box-shadow:0 0 0 2px #15171c} .gap-dot.ref{background:#8b93a5} .gap-dot.ours{background:#77ddc4} .gap-nums{display:flex;align-items:baseline;gap:8px;font-size:12px} .gap-nums b{font-weight:600;min-width:24px;text-align:right} .n-ref{color:#8b93a5} .n-ours{color:#77ddc4} .gap-d{font-style:normal;font-size:11px;color:#6d7686;margin-left:auto} .gap-row.is-near .gap-d{color:#9aa3b3} .gap-row.is-gap .gap-d{color:#f0915c;font-weight:600} .gap-key{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:22px; font-size:11px;color:#8b93a5} .gap-key .gap-dot{position:static;margin:0 2px 0 0;box-shadow:none} .gap-key span{color:#6d7686} @media (max-width:760px){.gap-grid{grid-template-columns:1fr} .gap-row{grid-template-columns:90px 1fr 96px;gap:10px}} /* --- larger paper title on mobile --- */ @media (max-width:760px){ .publication-strip .paper-title{font-size:31px;line-height:1.18;letter-spacing:-1px} } @media (max-width:420px){ .publication-strip .paper-title{font-size:28px;letter-spacing:-.9px} } /* --- upper-bound comparison: numbers + inline bars --- */ .ub-table-wrap{overflow-x:auto;margin-top:22px} .ub-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .ub-table th,.ub-table td{text-align:left;padding:11px 14px;font-weight:400;vertical-align:middle} .ub-table thead th{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#8b93a5; border-bottom:1px solid #2e333d;padding-bottom:10px;white-space:nowrap} .ub-table thead th:nth-child(n+3){width:28%} .ub-table .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px} .ub-table .sw.ref{background:#8b93a5} .ub-table .sw.ours{background:#77ddc4} .ub-table tbody th{font-size:14px;font-weight:600;color:#eef1f7;white-space:nowrap; border-right:1px solid #262b34;padding-right:22px} .ub-table tr.grp th,.ub-table tr.grp td{border-top:1px solid #262b34} .ub-table td.m{font-size:13px;color:#99a2b2;white-space:nowrap} .ub-table td.v{min-width:150px} .ub-table .num{display:block;font-size:15px;font-weight:600;color:#c9d0dd;margin-bottom:5px} .ub-table td.v:last-child .num{color:#77ddc4} .minibar{display:block;height:5px;border-radius:3px;background:#23272f;overflow:hidden} .minibar i{display:block;height:100%;border-radius:3px} .minibar i.ref{background:#7b8395} .minibar i.ours{background:#77ddc4} @media (max-width:760px){ .ub-table th,.ub-table td{padding:9px 9px;font-size:12px} .ub-table tbody th{font-size:12px;padding-right:12px} .ub-table td.v{min-width:94px} } /* --- upper-bound comparison: simple grouped bars --- */ .upper-comparison{margin-top:36px;padding-top:30px;border-top:1px solid #262b34} .upper-comparison #upper-title{font-size:20px;font-weight:600;letter-spacing:-.3px;margin:0 0 8px} .upper-definition{font-size:13px;color:#8b93a5;margin:0 0 18px} .upper-legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:#99a2b2;margin-bottom:6px} .upper-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px} .upper-legend i.policy-1{background:#aab4ca} .upper-legend i.policy-2{background:#77ddc4} .upper-chart-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:10px} .upper-chart>h4{font-size:14px;font-weight:600;color:#eef1f7;margin:0 0 4px} .upper-metrics{display:flex;gap:16px;align-items:flex-end} .upper-chart .vertical-metric{flex:1;min-width:0} .upper-chart .vertical-bars{height:96px;gap:6px;margin-top:22px} .upper-chart .vertical-stem{max-width:20px} .upper-takeaway{font-size:15px;line-height:1.65;color:#cfd6e4;margin:26px 0 6px;max-width:760px} .upper-source{font-size:11px;color:#6d7686;margin:0} @media (max-width:900px){.upper-chart-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.upper-chart-grid{grid-template-columns:1fr}} .upper-comparison .vertical-metric h3{display:block;color:#99a2b2;font-weight:400} /* --- simulation setup: labelled stages + clean elbow connector --- */ .sim-setup.sim-setup-branched{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr); gap:18px;align-items:center;max-width:1040px} .sim-stage{position:relative;display:flex;flex-direction:column;margin:0} .sim-stage video{border:1px solid #333a47;border-radius:9px;max-height:none} .sim-post-branches video{max-height:none} .stage-band{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:9px} .stage-band.mid{background:#2a3350;color:#bcc9ff} .stage-band.post{background:#1e4034;color:#8fe0c4} .sim-setup-branched figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; margin:9px 0 0;font-size:12px} .sim-setup-branched figcaption b{font-weight:600;color:#e7ebf3;font-size:13px} .sim-setup-branched figcaption span{color:#8b93a5} .sim-branch-arrows{color:#737d92} .sim-branch-arrows svg>path{stroke-width:1.6;stroke-linecap:butt;stroke-linejoin:round;marker-end:none;vector-effect:non-scaling-stroke} .sim-branch-arrows svg>path:nth-of-type(n+2){marker-end:url(#sim-branch-tip)} @media (max-width:760px){ .sim-setup.sim-setup-branched{grid-template-columns:1fr;gap:16px} .sim-branch-arrows{display:none} } /* --- scene pills: selected = a lighter shade of the panel, not a hue --- */ .episode-controls button[aria-pressed=true]{color:#e8ecf4;border-color:#454c5b;background:#262b34} .episode-controls button[aria-pressed=true]:hover{background:#2d323c} /* Separate result navigation from the method playback controls. */ #real-results{margin-top:38px;padding-top:24px;border-top:1px solid #ffffff18} /* Paper-consistent result colors and a shared 0–100% plot scale. */ .vertical-bars{background:linear-gradient(to top,transparent calc(50% - .5px),#ffffff0a calc(50% - .5px),#ffffff0a calc(50% + .5px),transparent calc(50% + .5px))} .vertical-stem b{font-variant-numeric:tabular-nums} .sim-summary-row.ours,.sim-summary-row.ours b{color:#77ddc4} .sim-summary-row.ours i,#simulation .usb-fill.ours,.user-study .usb-fill.ours{background:#77ddc4} #simulation .usb-row:has(.usb-fill.ours) .usb-val{color:#77ddc4} .sim-summary-row.expert i{background:#aab4ca} .sim-summary-row.oracle i{background:#707c90} .graph-legend{flex-wrap:wrap} /* Research palette: one lavender-blue method accent, neutral comparison policies. */ :root{--result-base:#697383;--result-es:#65B5AE;--result-ours:#A9BAFF;--result-text:#eef0f5;--result-muted:#bdc5d2;--result-oracle:#C79BA8} .vertical-column.policy-0 .vertical-stem{background:var(--result-base)} .vertical-column.policy-1 .vertical-stem{background:var(--result-es)} .vertical-column.policy-2 .vertical-stem{background:var(--result-ours)} .vertical-results .graph-legend span:nth-child(1):before{background:var(--result-base)} .vertical-results .graph-legend span:nth-child(2):before{background:var(--result-es)} .vertical-results .graph-legend span:nth-child(3):before{background:var(--result-ours)} .upper-comparison .policy-1 .vertical-stem,.upper-legend i.policy-1,.upper-bar.oracle{background:var(--result-oracle)} .upper-legend i.policy-2,.upper-bar.ours{background:var(--result-ours)} #simulation .sim-summary-row.expert i,#simulation .usb-fill.expert{background:var(--result-es)} #simulation .sim-summary-row.ours i,#simulation .usb-fill.ours,#held-out .usb-fill.ours,#held-out .usb-stack .ours{background:var(--result-ours)} #simulation .sim-summary-row.oracle i,#held-out .usb-fill.ref,#held-out .usb-stack .ref{background:var(--result-oracle)} #simulation .usb-fill.ref,#simulation .usb-fill.base{background:var(--result-base)} #held-out .usb-stack .ours,#held-out .usb-stack .ref{color:#101820} #held-out .usb-stack .tie{background:#343b47;color:var(--result-text)} #held-out .usb-ci{background:#f0f1f5;box-shadow:none;height:2px;border-radius:0} #held-out .usb-ci::before,#held-out .usb-ci::after{content:"";position:absolute;top:-3px;width:2px;height:8px;background:inherit} #held-out .usb-ci::before{left:0} #held-out .usb-ci::after{right:0} #simulation .sim-summary-row,#simulation .sim-summary-row b,#simulation .usb-val,#simulation .usb-row:has(.usb-fill.ours) .usb-val,#held-out .usb-val,#held-out .usb-row:has(.usb-fill.ours) .usb-val,.vertical-stem b,.result-line strong{color:var(--result-text)} #pick-place .finding-head>p:last-child,#caterpillar .finding-head>p:last-child,#caterpillar-ood .finding-head>p:last-child{color:var(--result-text)} #pick-place[data-result] .finding-head>p:last-child{color:var(--result-text)} .graph-legend,.upper-legend,#simulation .usb-who,#held-out .usb-who,.vertical-metric h3{color:var(--result-muted)} .test-nav a[aria-current=true],.test-nav a[aria-current=true]:hover,.sim-task-nav button[aria-pressed=true],.sim-emb-nav button[aria-pressed=true]{background:#343c49;color:#eef0f5;box-shadow:inset 0 0 0 1px #939dab} .test-nav a[aria-current=true] small,.benchmark-two-nav a[aria-current=true] small{color:#d7dde6} .test-nav a:focus-visible,.episode-controls button:focus-visible,.sim-task-nav button:focus-visible,.sim-emb-nav button:focus-visible{outline:2px solid #eef0f5;outline-offset:3px} /* Consistent presentation: content and method illustration remain untouched. */ .finding .finding-head{max-width:960px;margin-bottom:28px} .finding .finding-head h2{font-size:clamp(26px,2.5vw,32px);line-height:1.25;font-weight:600;letter-spacing:-.025em;margin:0 0 14px;max-width:960px} .finding .finding-head .kicker{font-size:11px;line-height:1.5;font-weight:600;letter-spacing:.12em;margin:0 0 12px;color:#aebbd4} .finding .finding-head>p:not(.kicker),#pick-place[data-result] .finding-head>p:last-child,#caterpillar .finding-head>p:last-child,#caterpillar-ood .finding-head>p:last-child{font-size:16px;line-height:1.65;font-weight:400;color:#bdc5d2;max-width:850px;margin:10px 0 0} .film-section>h2,.simulation-layout>h2,#abstract h2,.citation-compact>h2{font-size:clamp(26px,2.5vw,32px);line-height:1.25;font-weight:600;letter-spacing:-.025em;margin-bottom:24px} .held-grid>article>h3{font-size:21px;font-weight:600;line-height:1.35;margin:0 0 16px} .finding{padding-top:32px;padding-bottom:32px} .result-bottom{grid-template-columns:minmax(140px,.45fr) minmax(0,1.55fr);gap:32px;align-items:center;margin-top:28px} .result-bottom .result-line strong{font-size:32px;font-weight:600;letter-spacing:-.025em} .result-bottom .result-metric-grid{gap:24px} .test-nav{background:#1c2129;border-bottom:1px solid #39414e;box-shadow:none} .test-nav>div{gap:6px} .test-nav a,.sim-task-nav button,.sim-emb-nav button{border-radius:6px;font-size:12px;line-height:1.4} .test-nav a{padding:9px 10px;white-space:normal;flex-shrink:0} .test-nav a.next-benchmark{max-width:190px;overflow:visible;text-overflow:clip} .test-nav a small{font-size:10px;line-height:1.4;margin-top:3px} .episode-controls button{border-radius:6px;font-size:12px;padding:8px 12px;box-shadow:none} .evidence-grid .clip-title,.split-evidence .clip-title,.held-videos .clip-title{color:#d5dce7;font-size:13px;font-weight:500;line-height:1.45} .clip figcaption,.sim-result-panel figcaption{font-size:12px;line-height:1.5;color:#a4aebb} .graph-legend,.upper-legend{font-size:12px;line-height:1.5;gap:16px} @media(max-width:760px){ .finding{padding-top:24px;padding-bottom:24px} .finding .finding-head{margin-bottom:22px} .result-bottom{grid-template-columns:1fr;gap:18px} .result-bottom .result-line strong{font-size:28px} .result-bottom .result-metric-grid{gap:12px} .test-nav a{padding:8px 10px;white-space:nowrap} .test-nav a.next-benchmark{max-width:none} .evidence-grid .clip-title,.split-evidence .clip-title,.held-videos .clip-title{font-size:11px;min-height:32px} .clip figcaption{font-size:10px} } /* Compact test-set headings and one shared results footer. */ #pick-place .finding-head>.kicker, #caterpillar .finding-head>.kicker, #caterpillar-ood .finding-head>.kicker{display:none} .test-set-code{display:inline-block;margin-left:12px;font-size:.6em;font-weight:500;letter-spacing:0;color:#bdc5d2;white-space:nowrap;vertical-align:baseline} .result-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 28px;margin-top:28px;padding-top:18px;border-top:1px solid #ffffff12} .result-footer .text-link{margin:0;font-size:14px} .result-footer .benchmark-recipe{display:flex;gap:24px;flex-wrap:wrap;margin:0;padding:0;border:0;font-size:14px;line-height:1.5} .result-footer .benchmark-recipe b{font-size:16px;font-weight:600} @media(max-width:760px){.result-footer{align-items:flex-start;gap:14px}.result-footer .benchmark-recipe{gap:18px}.test-set-code{margin-left:8px}} /* Benchmark identity remains prominent above the individual test sets. */ .test-nav>span:first-child{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:center;padding:10px 13px;margin-right:8px;border:1px solid #637994;border-radius:6px;background:#29374a;color:#e6eefb;font-size:13px;font-weight:700;line-height:1.3;letter-spacing:.06em;white-space:nowrap} @media(max-width:760px){.test-nav>span:first-child{padding:8px 10px;font-size:12px;margin-right:4px}} /* Tight navigation strip: no outer vertical padding around tabs. */ .test-nav{padding:0;gap:8px;margin-top:0;margin-bottom:0;align-items:center;min-height:0} .test-nav>div{padding:0;margin:0;align-items:center} .test-nav a{padding:6px 9px;line-height:1.3} .test-nav a small{margin-top:2px;line-height:1.3} .test-nav>span:first-child{padding:7px 11px;margin:0 4px 0 0} .test-nav .metric-help summary{padding:6px 9px} .test-nav .next-benchmark{padding-top:6px;padding-bottom:6px} @media(max-width:760px){.test-nav{padding:0;gap:5px}.test-nav>span:first-child{margin-bottom:3px}.test-nav a{padding:5px 8px}} #pick-place[data-result="pick"] .result-metric-grid,#pick-place[data-result="objects"] .result-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .result-footer{justify-content:flex-start} /* Held-out study caption shares the test-set description styling. */ .held-study-note{font-size:16px;line-height:1.65;color:#bdc5d2;margin:22px 0 14px} .held-study-note strong{font-weight:700;color:#e6eefb} /* Direct policy labels keep each result readable without color matching. */ .metric-policy-labels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:9px;text-align:center;font-size:11px;line-height:1.3;color:#eef0f5} .metric-policy-labels span:last-child{color:var(--result-ours);font-weight:600} @media(max-width:600px){.metric-policy-labels{font-size:9px;gap:3px}} /* Shared study caption belongs directly between the paired videos and results. */ #held-out .held-grid{gap:26px;margin-bottom:0} #held-out .held-study-note{margin:24px 0 18px;padding-top:20px;border-top:1px solid #ffffff12;max-width:none;font-size:16px;line-height:1.6;color:#eef0f5} #held-out .held-study-note strong{color:var(--result-ours)} .held-results-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px} .held-results-grid .held-summary{max-width:none;margin:0} .held-mobile-title{display:none} .held-videos .clip:last-child .clip-title,#pick-place .evidence-grid .clip:last-child .clip-title,#caterpillar .split-evidence .clip:last-child .clip-title,#caterpillar-ood .split-evidence .clip:last-child .clip-title{color:var(--result-ours)} @media(max-width:900px){.held-results-grid{grid-template-columns:1fr;gap:26px}.held-mobile-title{display:block;font-size:18px;margin:0 0 14px}#held-out .held-grid>article{padding-bottom:0}} /* Remove repeated results, retaining the directly labeled charts and one sample count. */ #pick-place .graph-legend,#caterpillar .graph-legend,#caterpillar-ood .graph-legend, #pick-place .evidence-grid figcaption,#caterpillar .split-evidence figcaption,#caterpillar-ood .split-evidence figcaption{display:none} #pick-place .result-bottom,#caterpillar .result-bottom,#caterpillar-ood .result-bottom{margin-top:12px} .evaluation-count{font-size:12px;line-height:1.5;color:#bdc5d2;margin:20px 0 0} #held-out .held-study-note{margin:24px 0 16px;padding-top:20px} #held-out .held-study-note p{margin:0;font-size:16px;line-height:1.5;color:#eef0f5} #held-out .held-study-note p+p{margin-top:4px;font-size:13px;color:#bdc5d2} .held-preference-label{font-size:13px;font-weight:600;color:#eef0f5;margin:0 0 10px} /* Coordinated test-set layout: compact policy groups, clear metric boundaries. */ .finding .finding-head{margin-bottom:18px} .finding .finding-head h2{margin-bottom:8px} .finding .finding-head>.task-supervision{font-size:13px!important;line-height:1.4!important;color:#bdc5d2!important;margin:4px 0 0!important} .finding .finding-head>p:last-child{margin-top:6px} .result-bottom{grid-template-columns:minmax(115px,1fr) minmax(0,72%);gap:22px} .result-bottom .result-metric-grid{gap:12px} .result-metric-grid>.vertical-metric{padding:8px 8px 6px;border:0;border-radius:0;min-width:0} .result-metric-grid .vertical-bars{justify-content:center;gap:4px;margin-top:22px;height:96px} .result-metric-grid .vertical-column{flex:0 1 52px;justify-content:center} .result-metric-grid .vertical-stem{width:26px;max-width:100%} .metric-policy-labels{grid-template-columns:repeat(3,minmax(0,52px));justify-content:center;gap:4px;font-size:10px} .result-metric-grid .vertical-metric h3{min-height:2.4em;display:flex;align-items:center;justify-content:center;margin:5px 0 0!important} .evaluation-count{margin-top:14px} .result-footer{margin-top:20px;padding-top:14px} #held-out .held-study-note{font-size:15px;line-height:1.5;font-weight:400;color:#eef0f5;margin:20px 0 10px;padding-top:18px} .held-preference-label{font-weight:400;font-size:12px;color:#bdc5d2;margin:0 0 8px} .upper-comparison{margin-top:24px;padding-top:20px} .upper-comparison #upper-title{display:block;font-size:20px;margin:0 0 12px} .upper-chart-grid{gap:18px;margin-top:16px;align-items:start} .upper-chart>h4{min-height:2.8em;display:flex;align-items:center;margin:0 0 4px} .upper-metrics{align-items:stretch;gap:10px} .upper-metrics>.vertical-metric{display:flex;flex-direction:column;min-width:0} .upper-metrics .vertical-bars{flex:none;height:96px;margin-top:22px;justify-content:center;gap:10px} .upper-metrics .vertical-column{flex:0 1 30px;justify-content:center} .upper-metrics .vertical-stem{width:20px} .upper-comparison .vertical-metric h3{height:3.8em;min-height:3.8em;display:flex;align-items:flex-start;justify-content:center;line-height:1.3;margin-top:9px!important} .upper-takeaway{margin-top:16px} .sim-part{font-size:20px;font-weight:600;line-height:1.4;margin:24px 0 8px} .sim-context{font-size:14px;line-height:1.6;color:#bdc5d2;margin:0 0 18px;max-width:900px} .sim-summary-row.ours,.sim-summary-row.ours b{color:var(--result-ours)} @media(max-width:760px){.result-bottom{grid-template-columns:1fr;gap:14px}.result-bottom .result-metric-grid{gap:8px}.result-metric-grid>.vertical-metric{padding:10px 5px 8px}.result-metric-grid .vertical-bars{gap:4px}.metric-policy-labels{font-size:9px;gap:4px}.result-metric-grid .vertical-stem{width:22px}.vertical-stem b{font-size:11px}.finding .finding-head{margin-bottom:16px}} @media(max-width:480px){.result-bottom .result-metric-grid,#pick-place[data-result="pick"] .result-metric-grid,#pick-place[data-result="objects"] .result-metric-grid{grid-template-columns:1fr}.result-metric-grid .vertical-column{flex-basis:70px}.metric-policy-labels{grid-template-columns:repeat(3,minmax(0,70px));font-size:11px}.result-metric-grid .vertical-metric h3{min-height:0}.upper-chart>h4{min-height:0}} /* Match video headings to their chart series without relying on shortened labels. */ #pick-place .evidence-grid .clip,#caterpillar .split-evidence .clip,#caterpillar-ood .split-evidence .clip{--policy-color:var(--result-base)} #pick-place .evidence-grid .clip:nth-child(2),#caterpillar .split-evidence .clip:nth-child(2),#caterpillar-ood .split-evidence .clip:nth-child(2){--policy-color:var(--result-es)} #pick-place .evidence-grid .clip:nth-child(3),#caterpillar .split-evidence .clip:nth-child(3),#caterpillar-ood .split-evidence .clip:nth-child(3){--policy-color:var(--result-ours)} .held-videos .clip{--policy-color:var(--result-oracle)} .held-videos .clip:last-child{--policy-color:var(--result-ours)} #pick-place .evidence-grid .clip-title::before,#caterpillar .split-evidence .clip-title::before,#caterpillar-ood .split-evidence .clip-title::before,.held-videos .clip-title::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;background:var(--policy-color);border-radius:1px;vertical-align:baseline} #pick-place .evidence-grid .clip:nth-child(2) .clip-title,#caterpillar .split-evidence .clip:nth-child(2) .clip-title,#caterpillar-ood .split-evidence .clip:nth-child(2) .clip-title,.metric-policy-labels span:nth-child(2){color:var(--result-es)} /* Clear comparison labels with restrained emphasis. */ #pick-place .evidence-grid .clip-title,#caterpillar .split-evidence .clip-title,#caterpillar-ood .split-evidence .clip-title,.held-videos .clip-title{ display:table;max-width:100%;box-sizing:border-box;padding:6px 10px;margin-bottom:10px; border-radius:5px;background:color-mix(in srgb,var(--policy-color) 11%,transparent); border:1px solid color-mix(in srgb,var(--policy-color) 25%,transparent); font-weight:600;line-height:1.45 } .result-metric-grid .vertical-metric h3,.upper-comparison .vertical-metric h3{ color:#e0e4ed;font-weight:600;font-size:13px!important } @media(max-width:760px){ #pick-place .evidence-grid .clip-title,#caterpillar .split-evidence .clip-title,#caterpillar-ood .split-evidence .clip-title,.held-videos .clip-title{padding:5px 7px} .result-metric-grid .vertical-metric h3,.upper-comparison .vertical-metric h3{font-size:12px!important} } /* Identify the headline metric and distinguish baseline names from scene controls. */ .result-bottom .result-line .result-rate-label{display:block;font-size:13px;line-height:1.4;font-weight:500;color:#d5dce7;margin-bottom:6px} .result-bottom .result-line strong,.result-bottom .result-line strong span{color:var(--result-ours)} #pick-place .evidence-grid .clip:first-child .clip-title,#caterpillar .split-evidence .clip:first-child .clip-title,#caterpillar-ood .split-evidence .clip:first-child .clip-title{color:#f2f4f8;background:#343e4c;border-color:#657084;font-weight:600} /* Keep the method definition at one consistent reading size. */ #method .method-sentence{font-size:20px;line-height:1.6} #method .method-sentence .ms-copy,#method .method-sentence .ms-l1,#method .method-sentence .ms-l2,#method .method-sentence .ms-tag{font-size:inherit;line-height:inherit;letter-spacing:normal} #method .method-sentence .ms-tag{font-weight:500} @media(max-width:760px){#method .method-sentence{font-size:17px}} /* Distinguish the all-expert oracle from Multi-Task ES. */ .held-videos .clip:first-child .clip-title{color:var(--result-oracle)} .sim-summary-row.expert,.sim-summary-row.expert b{color:var(--result-es)} /* Compact Section 4 setup with explanations attached to each embodiment. */ .sim-setup.sim-setup-branched{max-width:760px;grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr);gap:16px;margin:16px auto 24px} .sim-setup-branched .sim-stage video{max-height:150px;object-fit:contain;background:#171a20} .sim-setup-branched .sim-post-branches{gap:16px} .sim-setup-branched figcaption{margin:7px 0 0;font-size:11px;line-height:1.45;gap:2px 8px} .sim-setup-branched figcaption b{font-size:12px} .sim-setup-branched figcaption .sim-setting-note{flex-basis:100%;color:#bdc5d2;font-size:11px;margin-top:3px} .sim-setup-branched .stage-band{margin-bottom:7px;padding:4px 8px;font-size:9px} @media(max-width:700px){.sim-setup.sim-setup-branched{grid-template-columns:1fr;max-width:420px}.sim-setup-branched .sim-stage video{max-height:180px}} .sim-setup-branched figcaption .sim-camera-detail{flex-basis:100%;font-size:10px;color:#99a3b3} #simulation .sim-summary-row.base i{background:var(--result-base)} /* Compact evaluation summary. */ .impact-row{grid-template-columns:repeat(4,max-content);justify-content:center;gap:20px 48px;padding-top:14px;padding-bottom:14px;margin-top:32px;margin-bottom:24px} .impact-row>div{gap:9px} @media(max-width:900px){.impact-row{grid-template-columns:repeat(2,max-content);gap:14px 36px}} @media(max-width:480px){.impact-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}.impact-row>div{gap:7px}} /* Scene selectors use pills; policy labels retain small rectangular corners. */ .episode-controls button{border-radius:999px;padding:7px 14px} /* Optional all-expert comparison, closed initially. */ details.upper-comparison > summary#upper-title{display:list-item;cursor:pointer;font-size:18px;line-height:1.5;margin:0;list-style:disclosure-closed} details.upper-comparison[open] > summary#upper-title{list-style:disclosure-open} details.upper-comparison > summary::marker{color:var(--muted,#abb2c1)} details.upper-comparison > summary:focus-visible{outline:2px solid #a9baff;outline-offset:5px;border-radius:3px} .upper-comparison-content{padding-top:20px} /* Slightly larger publication credits. */ .authors{font-size:19px;line-height:1.8} .affiliations{font-size:16px} @media(max-width:760px){.authors{font-size:17px}.affiliations{font-size:15px}} /* Keep the expert pick-up pair compact and aligned to the right. */ @media(min-width:761px){ #pick-place[data-result="pick"] .result-bottom{grid-template-columns:minmax(115px,1fr) minmax(0,60%)} } /* Resource icons and citation copy control. */ .ui-icon{width:18px;height:18px;flex-shrink:0;vertical-align:middle} .hero-links .hero-link{display:inline-flex;align-items:center;gap:7px;text-transform:none} .citation-heading{display:flex;align-items:center;gap:12px} .citation-heading h2{margin:0} .bibtex-copy{display:inline-flex;align-items:center;justify-content:center;padding:7px;color:#bdc5d2;background:transparent;border:1px solid #465064;border-radius:6px;cursor:pointer} .bibtex-copy:hover{color:#a9baff;border-color:#a9baff} .bibtex-copy:focus-visible{outline:2px solid #a9baff;outline-offset:3px} .copy-status{font-size:13px;color:#bdc5d2} /* Scene selection stays above the videos, aligned to the left. */ .episode-controls{justify-content:flex-start} @media(max-width:760px){ .mobile-video-wrap{position:relative;min-width:0} .mobile-video-wrap>video{display:block;width:100%} .mobile-video-toggle{position:absolute;right:8px;bottom:8px;z-index:3;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff45;border-radius:50%;background:#111820b8;color:#fff;padding:8px;cursor:pointer} .mobile-video-toggle .ui-icon{width:18px;height:18px} .mobile-video-toggle:focus-visible{outline:2px solid #a9baff;outline-offset:2px} } @media(min-width:761px){.mobile-video-toggle{display:none}} @media(min-width:761px){.mobile-video-wrap{display:contents}} /* Improve contrast for paper and release links. */ .hero-links .hero-link{background:#303747;border:1px solid #77839d;color:#f2f4ff;font-weight:600;box-shadow:none} .hero-links .hero-link .ui-icon{color:#c4ceff;stroke-width:1.9} .hero-links .hero-link:hover,.hero-links .hero-link:focus-visible{background:#3b455c;border-color:#b9c5ff;color:#fff} .hero-links .hero-link:focus-visible{outline:2px solid #b9c5ff;outline-offset:3px} /* Soft publication backdrop and a more prominent paper title. */ .publication-strip{position:relative;isolation:isolate} .publication-strip::before{content:"";position:absolute;inset:0 -40px -15px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 32%,#30394f 0%,#252c3d 42%,#1b202b99 67%,transparent 90%)} .publication-strip .paper-title{font-size:clamp(36px,4.1vw,56px);max-width:1180px;line-height:1.16;letter-spacing:-1.6px} @media(max-width:760px){.publication-strip::before{left:-16px;right:-16px}.publication-strip .paper-title{font-size:34px;letter-spacing:-1px}} @media(max-width:480px){.publication-strip .paper-title{font-size:30px;letter-spacing:-.8px}} /* Restore the reference header's generous spacing and soft lighting. */ .publication-strip{padding-top:72px;padding-bottom:68px} .publication-strip .paper-title{margin:0 auto 38px} .publication-strip .authors{margin:0;line-height:1.8} .publication-strip .affiliations{margin-top:16px} .publication-strip .equal-contrib-note{margin-top:16px} .publication-strip .hero-links{margin-top:30px;gap:12px} .publication-strip::before{inset:-12px -40px -32px;background:radial-gradient(ellipse at 50% 44%,#2a3043 0%,#222839 40%,#1b202b99 68%,transparent 96%)} @media(max-width:760px){ .publication-strip{padding-top:44px;padding-bottom:42px} .publication-strip .paper-title{margin-bottom:28px} .publication-strip .affiliations{margin-top:12px} .publication-strip .equal-contrib-note{margin-top:12px} .publication-strip .hero-links{margin-top:24px} .publication-strip::before{left:-16px;right:-16px} } /* Keep header lighting behind the header, never over the TL;DR. */ .publication-strip::before{display:none} body{background:radial-gradient(ellipse 850px 480px at 50% 150px,#252c3e 0%,#1d2230 48%,transparent 100%),#17191d} .publication-strip{isolation:auto;height:auto;overflow:visible} .publication-strip .hero-links{position:relative;margin-top:30px!important} .layout-tldr{position:relative;z-index:0;clear:both;margin-top:12px;padding-top:8px} .layout-tldr p{color:#d1d6e0} @media(max-width:760px){ body{background:radial-gradient(ellipse 480px 440px at 50% 130px,#252c3e 0%,#1d2230 48%,transparent 100%),#17191d} .publication-strip .hero-links{margin-top:24px!important} } /* Reference contrast: a broad, subtle blue-gray glow with clear text. */ body{background:radial-gradient(ellipse 1000px 760px at 50% 240px,#242a3b 0%,#202637 34%,#1b202b 64%,#17191d 100%);background-repeat:no-repeat;background-color:#17191d} .publication-strip .paper-title{color:#f0f1f7} .publication-strip .authors,.publication-strip .authors .author,.publication-strip .authors a{color:#d9dce8} .publication-strip .equal-contrib-note{color:#aeb5c5} .layout-tldr p{color:#c2c8d5} .layout-tldr strong{color:#eef0f6} @media(max-width:760px){body{background-image:radial-gradient(ellipse 600px 680px at 50% 180px,#242a3b 0%,#202637 34%,#1b202b 64%,#17191d 100%)}} /* Visible soft header glow, painted directly behind the page content. */ html body{background-color:#17191d;background-image:radial-gradient(ellipse 900px 620px at 50% 230px,#353e59 0%,#2b334a 30%,#212839 58%,#17191d 100%);background-repeat:no-repeat;background-size:100% 900px} @media(max-width:760px){html body{background-image:radial-gradient(ellipse 480px 560px at 50% 200px,#353e59 0%,#2b334a 30%,#212839 58%,#17191d 100%);background-size:100% 800px}} /* Compact shared video speed control, outside the footage. */ .playback-settings{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 20px;margin-bottom:24px;color:#bdc5d2;font-size:13px} .playback-options{display:flex;align-items:center;gap:6px} .playback-options>span{margin-right:5px} .playback-options button{font:inherit;min-width:38px;min-height:34px;padding:5px 9px;border:1px solid #505968;border-radius:6px;background:transparent;color:#e5e8ef;cursor:pointer} .playback-options button[aria-pressed=true]{background:#a9baff20;border-color:#a9baff;color:#c6d0ff} .playback-options button:focus-visible{outline:2px solid #a9baff;outline-offset:3px} .contrib-mark{position:relative;cursor:help;outline-offset:3px} .contrib-tooltip{display:none;position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding:6px 9px;background:#343c4d;border:1px solid #68758f;border-radius:5px;color:#f2f4fa;font-size:12px;font-weight:400;line-height:1.4;white-space:nowrap;z-index:5} .contrib-mark:hover .contrib-tooltip,.contrib-mark:focus .contrib-tooltip{display:block} /* Scene selection and speed live below each test-set video panel. */ .test-video-toolbar{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:12px 0 16px} .test-video-toolbar .episode-controls{margin:0;justify-content:flex-end;gap:7px} .test-video-speeds{display:flex;align-items:center;gap:5px;font-size:12px;color:#bdc5d2} .test-video-speeds>span{margin-right:3px} .test-video-speeds button{font:inherit;min-width:34px;min-height:34px;padding:5px 8px;border:1px solid #465064;border-radius:6px;background:transparent;color:#d9deea;cursor:pointer} .test-video-speeds button[aria-pressed=true]{color:#c9d2ff;border-color:#8798d0;background:#a9baff16} .test-video-speeds button:focus-visible{outline:2px solid #a9baff;outline-offset:3px} @media(max-width:760px){.test-video-toolbar{gap:8px 12px}.test-video-toolbar .episode-controls button{font-size:12px;padding:7px 10px}.test-video-speeds button{min-height:36px}} /* More readable abstract typography without changing the paper text. */ #abstract .abstract-text{font-size:18px;line-height:1.85;color:#d5d9e3;max-width:960px;margin:0;text-wrap:pretty} #abstract .abstract-text+p.abstract-text{margin-top:20px} #abstract h2{margin-bottom:20px} @media(max-width:760px){#abstract .abstract-text{font-size:16px;line-height:1.8}} .evaluation-scope-intro{text-align:center;color:#c2c8d5;font-size:16px;line-height:1.6;margin:24px auto 12px} @media(max-width:760px){.evaluation-scope-intro{font-size:14px}} /* Intro and evaluation counts share one bar. */ .impact-row{grid-template-columns:minmax(220px,1.5fr) repeat(4,minmax(0,1fr));align-items:center;gap:24px} .impact-row .evaluation-scope-intro{text-align:left;font-size:14px;line-height:1.6;margin:0;max-width:310px} .impact-row>div{min-width:0;flex-wrap:wrap} @media(max-width:1000px){.impact-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.impact-row .evaluation-scope-intro{grid-column:1/-1;max-width:none}} @media(max-width:600px){.impact-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.impact-row .evaluation-scope-intro{font-size:14px}} @media(min-width:1001px){.impact-row{grid-template-columns:minmax(155px,1fr) repeat(4,minmax(0,1fr))}.impact-row .evaluation-scope-intro{max-width:180px}} /* ===== mobile: motivation teaser full-bleed, bar plots side by side ===== */ @media(max-width:760px){ /* The teaser was forced to 760px wide, so a phone had to swipe it sideways. Let it fit the screen edge-to-edge instead. */ #motivation{overflow-x:hidden} #motivation .film-embed{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)} #motivation .film-embed .explanation-film{ min-width:0;width:100%;border:0;border-radius:0; aspect-ratio:16/9;object-fit:cover} #motivation h2{margin-bottom:12px} /* it now fits the screen, so the swipe hint no longer applies */ #motivation .film-embed:after{display:none!important} /* Keep the upper-bound charts two-up rather than one long stack. */ .upper-chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 14px} .upper-chart>h4{font-size:12px;line-height:1.3} .upper-metrics{gap:8px} .upper-chart .vertical-bars{height:72px;gap:4px;margin-top:18px} .upper-chart .vertical-stem{max-width:14px} .upper-chart .vertical-stem b{font-size:11px} .upper-comparison .vertical-metric h3{font-size:10px!important;line-height:1.25} .upper-legend{gap:14px;font-size:11px} } @media(max-width:420px){ .upper-chart-grid{gap:16px 10px} .upper-chart>h4{font-size:11px} .upper-chart .vertical-bars{height:62px} .upper-comparison .vertical-metric h3{font-size:9px!important} } /* ===== mobile: keep benchmark metrics three-up, as on desktop ===== internal-e's @media(max-width:700px) and layout-g's .result-bottom rule collapsed these to one column; internal-f always kept three. */ @media(max-width:760px){ .result-metric-grid, .result-bottom .result-metric-grid, #pick-place[data-result="pick"] .result-metric-grid, #pick-place[data-result="objects"] .result-metric-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important;margin:18px 0} .result-metric-grid>.vertical-metric{padding:4px 1px 6px;min-width:0} .result-metric-grid .vertical-bars{height:88px;gap:3px;margin-top:20px} .result-metric-grid .vertical-column{flex:1 1 0!important;min-width:0} .result-metric-grid .vertical-stem{width:100%;max-width:15px} .result-metric-grid .vertical-stem b{font-size:9px;font-weight:600} .result-metric-grid .metric-policy-labels{gap:3px} .result-metric-grid .metric-policy-labels span{font-size:8px;line-height:1.2; overflow-wrap:anywhere;hyphens:auto} .result-metric-grid .vertical-metric h3{font-size:10px!important; line-height:1.25;min-height:0;margin-top:6px!important} } @media(max-width:420px){ .result-metric-grid{gap:7px!important} .result-metric-grid .vertical-bars{height:76px} .result-metric-grid .vertical-stem{max-width:13px} .result-metric-grid .metric-policy-labels span{font-size:7.5px} .result-metric-grid .vertical-metric h3{font-size:9px!important} } /* Takeaway below the real-robot evaluation summary. */ .layout-tldr p{font-size:19px;line-height:1.8} @media(max-width:760px){.layout-tldr p{font-size:16px}} /* Use the full section width for the takeaway. */ .layout-tldr p{max-width:none;width:100%;text-wrap:balance} /* Keep the E1 reference separate from the aligned E2 method comparisons. */ #simulation .emb-zero-shot-gap{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;margin:18px 0 24px;padding:12px 0;border-bottom:1px solid #ffffff14;color:#b8c1d0;font-size:14px;line-height:1.6} #simulation .emb-zero-shot-gap b{color:#e2e6ee;font-weight:600} #simulation .emb-zero-shot-gap [aria-hidden]{margin:0 8px;color:#8e98ab} #simulation .emb-headline{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto repeat(3,minmax(38px,auto));gap:6px 44px;margin-top:0} #simulation .emb-headline .sim-head-col{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:6px} #simulation .emb-headline .usb-label{align-self:start;margin:0 0 12px;display:flex;flex-direction:column;align-items:flex-start;gap:4px} #simulation .emb-headline .usb-row{grid-template-columns:112px minmax(0,1fr) 48px;margin-top:0} @media(max-width:700px){ #simulation .emb-headline{grid-template-columns:minmax(0,1fr);gap:6px} #simulation .emb-headline .sim-head-col+.sim-head-col{margin-top:24px} #simulation .emb-zero-shot-gap{font-size:13px} } /* The shared navigation stays inside the viewport in both benchmark modes. */ #real-results>.test-nav{box-sizing:border-box;max-width:calc(100% - 2*var(--gutter,16px));min-width:0} #real-results>.test-nav>div{min-width:0;flex:1 1 auto;overflow-x:auto} #real-results>.test-nav>.metric-help,#real-results>.test-nav>.benchmark-back{flex-shrink:0} @media(max-width:600px){ #real-results>.test-nav{flex-wrap:wrap;gap:4px 6px;padding:5px 0} #real-results>.test-nav>div{order:4;flex-basis:100%;width:100%;padding:2px 0} #real-results>.test-nav>.metric-help{margin-left:auto} } @media(max-width:700px){ #simulation .emb-headline .sim-head-col{grid-row:auto;grid-template-rows:auto repeat(3,minmax(38px,auto))} } /* A compact retry affordance only when the browser blocks method playback. */ #sdm[data-playback-blocked] .sdm-world::after{content:"Tap to play";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 13px;border:1px solid #a9baff80;border-radius:20px;background:#202633ed;color:#eef0f7;font-size:13px;line-height:1.3;z-index:20;pointer-events:none} /* ===== thin fixed left section nav ===== */ .side-nav{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:60; padding:10px 8px;border-radius:12px;background:#15181ecc;border:1px solid #23262e; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .side-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px} .side-nav a{display:flex;align-items:center;gap:9px;padding:5px 8px;border-radius:7px; text-decoration:none;color:#767d8b;font:500 11.5px/1.2 'DM Sans',-apple-system,sans-serif; white-space:nowrap;transition:color .18s,background .18s} .side-nav i{width:5px;height:5px;border-radius:50%;background:#3a404b;flex:0 0 auto;transition:background .18s,transform .18s} .side-nav a:hover{color:#cdd3dc;background:#ffffff08} .side-nav a:hover i{background:#6a7280} .side-nav a.is-on{color:#eef1f7;background:#ffffff0d} .side-nav a.is-on i{background:var(--result-ours,#77ddc4);transform:scale(1.5)} .side-nav a:focus-visible{outline:2px solid #a9baff;outline-offset:2px} /* collapse to dots only when the window is too narrow for labels beside the 1180 column */ @media (max-width:1460px){ .side-nav{left:10px;padding:9px 7px} .side-nav span{display:none} .side-nav a{padding:6px} .side-nav i{width:6px;height:6px} } @media (max-width:1100px){ .side-nav{display:none} } @media (prefers-reduced-motion:reduce){ .side-nav i{transition:none} } .side-nav .nav-group{margin:5px 0 2px} .side-nav .nav-group-label{display:block;padding:2px 8px 4px;color:#6b7280; font:600 11px/1.2 'DM Sans',-apple-system,sans-serif;letter-spacing:.01em} .side-nav .nav-group ul{list-style:none;margin:0;padding:0 0 0 8px;border-left:1px solid #262a33; display:flex;flex-direction:column;gap:1px} @media (max-width:1460px){ .side-nav .nav-group-label{display:none} .side-nav .nav-group ul{padding-left:4px;margin-left:3px} .side-nav .nav-group{margin:6px 0} } /* --- E2 embodiment-gap chart: stop the zero-shot label wrapping so all three rows are the same height and the bars line up across both columns --- */ #simulation .emb-headline .usb-row{grid-template-columns:152px minmax(0,1fr) 48px!important; align-items:center} #simulation .emb-headline .usb-who{white-space:nowrap;line-height:1.3} #simulation .emb-headline .sim-head-col{grid-template-rows:auto repeat(3,minmax(0,auto))!important} @media (max-width:760px){ #simulation .emb-headline .usb-row{grid-template-columns:118px minmax(0,1fr) 42px!important} #simulation .emb-headline .usb-who{font-size:9px} } /* Discussion is a separate page, not a scroll target — never auto-highlights */ .side-nav a[data-sec="discussion"]{margin-top:5px;padding-top:7px;border-top:1px solid #23262e;border-radius:0 0 7px 7px} /* --- contribution pointer in the upper-bound comparison --- */ .upper-claims{list-style:none;margin:14px 0 20px;padding:0;display:flex;flex-direction:column;gap:11px;max-width:860px} .upper-claims li{position:relative;padding-left:17px;font-size:14px;line-height:1.7;color:#c6cdda} .upper-claims li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px; border-radius:50%;background:var(--result-ours,#77ddc4)} .upper-claims strong{color:#eef1f7;font-weight:600} .upper-claims em{font-style:italic;color:#c6cdda} @media (max-width:760px){.upper-claims li{font-size:13px;padding-left:15px}} /* Original E1 baseline remains in the plot; shared methods align below it. */ #simulation .emb-headline{grid-template-rows:auto repeat(4,minmax(38px,auto))} #simulation .emb-headline .sim-head-col{grid-template-rows:subgrid!important;grid-row:span 5} @media(max-width:760px){ #simulation .emb-headline{grid-template-rows:auto} #simulation .emb-headline .sim-head-col{grid-row:auto;grid-template-rows:auto repeat(4,minmax(38px,auto))!important} #simulation .emb-headline .sim-head-col+.sim-head-col{grid-template-rows:auto repeat(3,minmax(38px,auto))!important} #simulation .emb-baseline-spacer{display:none} } #simulation .emb-gap-takeaway{font-size:15px;line-height:1.65;color:#bdc5d2;margin:12px 0 20px}#simulation .emb-gap-takeaway strong{color:#eef0f5;font-weight:600} /* thread link is an icon only */ .hero-link.hero-icon-only{gap:0;padding-inline:4px} .hero-link.hero-icon-only .ui-icon{width:16px;height:16px} /* --- release video section (own styling; must NOT inherit .film-embed) --- */ .release-video{margin:0;width:100%} .release-video video{display:block;width:100%;height:auto;max-width:100%; aspect-ratio:16/9;background:#0e1014;border:1px solid #2a2f39;border-radius:10px; pointer-events:auto} @media (max-width:760px){ .release-video video{border-radius:7px} } /* --- TL;DR + takeaway in a mild panel --- */ .container.layout-tldr.results-summary{background:#161b25;border:1px solid #2a3344; border-radius:14px;padding:26px 30px;margin-block:30px; width:min(1180px,calc(100% - 80px));box-sizing:border-box} .results-summary>p{margin:0} .results-summary .motion-takeaway{margin-top:18px;padding-top:18px;border-top:1px solid #2a3344} .results-summary .motion-takeaway>p{margin:0 0 9px} .results-summary .motion-takeaway ul{margin:0;padding-left:0;list-style:none; display:flex;flex-direction:column;gap:9px} .results-summary .motion-takeaway li{position:relative;padding-left:17px; font-size:15px;line-height:1.7;color:#c2c8d5} .results-summary .motion-takeaway li::before{content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--result-ours,#A9BAFF)} .results-summary .motion-takeaway strong{color:#eef0f6} @media (max-width:760px){ .container.layout-tldr.results-summary{padding:20px 18px;border-radius:11px;margin-block:24px;width:calc(100% - 32px)} .results-summary .motion-takeaway li{font-size:14px;padding-left:15px} } /* --- method: recorded walkthrough video (replaces the interactive figure) --- */ .method-video{margin:0;width:100%} .method-video video{display:block;width:100%;height:auto;max-width:100%; aspect-ratio:1920/1182;background:#15181e;border:1px solid #262b34;border-radius:10px; pointer-events:auto} @media (max-width:760px){ .method-video video{border-radius:7px} } /* motivation video: controls must be clickable (the teaser rule disables them) */ #motivation .film-embed .explanation-film{pointer-events:auto} /* --- simple always-visible video bar --- */ .vbar{display:flex;align-items:center;gap:12px;margin-top:10px;padding:0 2px} .vbar-play{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;cursor:pointer; border:1px solid #333a47;border-radius:50%;background:#1b1f26;color:#e8ecf4;padding:0} .vbar-play:hover{background:#242a33} .vbar-play svg{width:14px;height:14px;fill:currentColor} .vbar-seek{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px; background:#2b303a;cursor:pointer;outline:none} .vbar-seek::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%; background:var(--result-ours,#A9BAFF);box-shadow:0 0 0 3px #11131799} .vbar-seek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--result-ours,#A9BAFF)} .vbar-seek:focus-visible{box-shadow:0 0 0 3px #a9baff44} .vbar-time{flex:0 0 auto;font:500 12px/1 'DM Sans',-apple-system,sans-serif;color:#8b93a5; font-variant-numeric:tabular-nums;min-width:74px;text-align:right} @media (max-width:760px){ .vbar{gap:9px;margin-top:8px} .vbar-time{font-size:11px;min-width:66px} } /* the .vbar replaces the old mobile overlay toggle on the motivation video */ #motivation .mobile-video-toggle{display:none!important} /* Video sits with Discussion below the divider */ .side-nav a[data-sec="video"]{border-radius:7px} .side-nav a[data-sec="discussion"]{border-radius:0} /* easier manual scrubbing: taller hit area, bigger thumb */ .vbar-seek{height:6px;padding:9px 0;background-clip:content-box} .vbar-seek::-webkit-slider-thumb{width:15px;height:15px} .vbar-seek::-moz-range-thumb{width:15px;height:15px} .vbar-play{width:34px;height:34px} @media (max-width:760px){ .vbar-seek{padding:12px 0} .vbar-seek::-webkit-slider-thumb{width:18px;height:18px} .vbar-play{width:38px;height:38px} } /* Visible track + progress fill. Without these the slider read as a lone dot on the dark background, so the bar didn't look controllable at all. --p (0-100) is set from the player's sync(). */ /* content-box is required: with border-box, height:6px + padding:9px collapses the content box to 0 and background-clip:content-box paints the track into nothing. */ .vbar-seek{box-sizing:content-box;height:6px;border-radius:4px;background-color:transparent; background-image:linear-gradient(to right, var(--result-ours,#A9BAFF) 0 calc(var(--p,0) * 1%), #3a4252 calc(var(--p,0) * 1%) 100%); background-repeat:no-repeat} .vbar-seek::-webkit-slider-thumb{background:#fff; box-shadow:0 0 0 3px #0e1014,0 1px 4px #000a} .vbar-seek::-moz-range-thumb{background:#fff;box-shadow:0 0 0 3px #0e1014} .vbar-seek:hover{background-image:linear-gradient(to right, #c3cfff 0 calc(var(--p,0) * 1%), #454e60 calc(var(--p,0) * 1%) 100%)} /* mute toggle — only the release video has an audio track */ .vbar-mute{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;cursor:pointer; border:1px solid #333a47;border-radius:50%;background:#1b1f26;color:#e8ecf4;padding:0;margin-left:-2px} .vbar-mute:hover{background:#242a33} .vbar-mute svg{width:16px;height:16px;fill:currentColor} .vbar-mute.is-muted{color:#8b93a5} .vbar-mute:focus-visible{outline:none;box-shadow:0 0 0 3px #a9baff44} @media (max-width:760px){ .vbar-mute{width:34px;height:34px} }