/* Typography and layout rules adapted directly from the UMI page's stylesheet.
   Original template: Strata by HTML5 UP, html5up.net | @ajlkn.
   Free for personal and commercial use under CCA 3.0 (html5up.net/license).
   Source Sans Pro is served locally to keep the project page standalone. */
@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/source-sans-pro-latin-400.woff2') format('woff2')}
@font-face{font-family:'Source Sans Pro';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/source-sans-pro-latin-700.woff2') format('woff2')}
:root{--accent:#8c1515;--gutter:1.25em}
*{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,p,a,b,u,strong,figure,figcaption,footer,header,main,section,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
body{background:#fff;-webkit-text-size-adjust:none}
body,input,select,textarea{color:#a2a2a2;font-family:'Source Sans Pro',Helvetica,sans-serif;font-size:16pt;font-weight:400;line-height:1.75em}
strong,b{color:#787878;font-weight:400}
p{margin:0 0 2em}
h1,h2,h3,h4{color:#787878;font-weight:400;line-height:1em;margin:0 0 1em}
h1{font-size:2em;line-height:1.5em}
h2{font-size:1.5em;line-height:1.5em}
h3{font-size:1.25em;line-height:1.5em}
h4{font-size:1.1em;line-height:1.5em}
hr{border:0;border-bottom:solid 2px #efefef;margin:2em 0}
/* UMI's #main inline dimensions, with its stylesheet's horizontal padding. */
#main{width:60em;max-width:70em;margin-left:auto;margin-right:auto;padding:5em 4em 1em}
.project-header h1{text-align:center;margin-bottom:0;color:#8c1515;font-size:300%}
.project-header h2{text-align:center;white-space:nowrap;font-size:192%}
.project-intro{color:#000}
#main>section:not(.opening){border-top:2px solid #efefef;margin-top:2em;padding-top:2em}
.opening-pair h4{color:#000;font-size:1em;line-height:1.75;margin:0 0 1em}
.opening-pair{--opening-gap:3.25em}
.opening-pair>.media-column:first-child{width:60%}
.opening-pair>.media-column+.media-column{width:40%}
.opening-pair.row.uniform>.media-column:first-child{padding-right:calc((var(--opening-gap) - var(--gutter)) / 2)}
.opening-pair.row.uniform>.media-column+.media-column{padding-left:calc((var(--opening-gap) + var(--gutter)) / 2)}
.opening-transfer-arrow{position:absolute;top:50%;left:calc(-.5 * var(--opening-gap));transform:translate(-50%,-50%);display:block;width:2em;height:1.25em;fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.opening-media video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff}
/* The source frame contains a human view and two touch templates. Split the
   frame into synchronized panes so the tactile templates get a dedicated,
   slightly enlarged crop without re-encoding the video. */
.opening-triple-video{display:grid;grid-template-columns:1.4fr 1.8fr 1.4fr;aspect-ratio:12/5;overflow:hidden;background:#fff}
.opening-center-video{min-width:0;overflow:hidden}
.opening-center-video .opening-human-view{display:block;width:100%;height:100%;object-fit:cover;object-position:15% center}
.opening-hand-canvas{display:block;width:100%;height:100%;background:#fff;filter:saturate(1.28) contrast(1.06);pointer-events:none}
.opening-sensor-source{display:none}
.opening .opening-media{margin-bottom:0}
.opening .project-intro{margin:1em 0 0;text-align:center;padding-right:var(--gutter)}
/* The 50% uniform grid and media geometry used by UMI's hardware and task rows. */
.row{width:100%;border-bottom:solid 1px transparent;box-sizing:border-box}
.row>*{float:left;box-sizing:border-box}
.row:after,.row:before{content:'';display:block;clear:both;height:0}
.row.uniform>*>:first-child{margin-top:0}
.row.uniform>*>:last-child{margin-bottom:0}
.row.\35 0\25>*{padding:0 0 0 var(--gutter)}
.row.\35 0\25{margin:0 0 -1px calc(-1 * var(--gutter))}
.row.uniform.\35 0\25>*{padding:var(--gutter) 0 0 var(--gutter)}
.row.uniform.\35 0\25{margin:calc(-1 * var(--gutter)) 0 -1px calc(-1 * var(--gutter))}
.media-column{font-size:1em;line-height:1.5em;text-align:center;min-width:0}
.media-column.half{width:50%}.media-column.full{width:100%}
.image{position:relative}.image.fit{display:block;margin:0 0 2em;width:100%}
.image.fit img{display:block;width:100%;height:auto}
.row.uniform.setup-figure{margin-top:.5em}
.policy-pair{margin:1em 0}.policy-media.image.fit{margin-bottom:.5em}
.policy-pair figcaption .without-label{color:var(--accent);font-weight:700}
.policy-media video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}
.task-group{margin-top:2em}.task-group+.task-group{margin-top:1em}
.task-group+.task-group{border-top:2px solid #efefef;margin-top:2em;padding-top:2em}
/* TouchScale media and interactions; the reading column stays unchanged. */
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:16px;z-index:100;background:#fff;padding:8px 16px}
.skip-link:focus{top:12px}
.hero{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;margin:0 0 1em;background:#fff;container-type:inline-size}
.data-wall{position:absolute;inset:0;pointer-events:none}
#wall-video{display:block;width:100%;height:100%;object-fit:cover}
.wall-wordmark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:var(--wordmark-opacity,0);transition:opacity .12s linear;color:#fff;font-size:10cqw;font-weight:700;line-height:1;letter-spacing:-.025em;text-shadow:0 .02em .12em #0008,0 0 .4em #0005}
.wall-controls{position:absolute;right:.75em;bottom:.75em;display:flex;gap:.4em}
.wall-controls button{display:grid;place-items:center;width:2.125em;height:2.125em;padding:0;border:1px solid #0002;border-radius:50%;background:#fffffff0;color:#555}
.wall-controls button:hover{background:#fff;color:var(--accent)}
.wall-controls svg{width:1.0625em;height:1.0625em}
.wall-toggle .wall-play-icon{display:none}.wall-toggle.is-paused .wall-pause-icon{display:none}.wall-toggle.is-paused .wall-play-icon{display:block}
.figure-open{border:0;padding:0;border-radius:0;background:transparent;cursor:zoom-in}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-bottom:1.5em}
.chart-toolbar>span{font-size:.875em;white-space:nowrap}
.segmented{display:flex;gap:1.25em}
.segmented button{padding:0 0 .375em;border:0;border-bottom:1px solid transparent;background:transparent;font-size:1em;line-height:1.5;color:#787878}
.segmented button.active{border-bottom-color:#8c1515;color:#8c1515}
.distribution-bars{display:grid;gap:.6em;padding:.5em 0}
.bar-row{display:grid;grid-template-columns:6.5em 1fr 2.5em;gap:1em;align-items:center;font-size:.9375em;line-height:1.5}
.bar-row>strong{text-align:right}.bar-track{height:.75em;background:#f2f0ef}.bar-fill{height:100%;background:#b18988}
.scene-video{position:relative;width:100%;aspect-ratio:512/340;overflow:hidden;background:#eee}
.scene-video video{display:block;width:100%;height:100%;object-fit:contain}
.sample-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.625em;height:2.625em;border:1px solid #ffffffc0;border-radius:50%;background:#1118;color:#fff;padding:0}
.sample-play:hover{background:#111c}.sample-play svg{width:1.3125em;height:1.3125em;fill:currentColor;transform:translateX(1px)}
.scene-caption{padding-top:.5em;text-align:center}
.scene-caption h4{font-size:1em;line-height:1.5;margin:0;color:inherit}
.sample-expand{font-size:.875em;line-height:1.5;border:0;padding:0;background:transparent;color:#787878;text-decoration:underline;text-underline-offset:.15em}
.video-kind{position:absolute;left:.5em;top:.5em;font-size:.75em;line-height:1.5;padding:.15em .4em;color:#fff;background:#0008;pointer-events:none}
.video-speed{left:auto;right:.5em}
/* Results use the existing UMI columns and typeface, with emphasis on numbers. */
.media-column.third{width:33.333333%}
#main>#results{margin-top:1.5em;padding-top:1.5em}
#results>h3{margin-bottom:.75em}
.result-metrics{padding-top:0;margin-bottom:1.5em}
.result-value{display:flex;align-items:baseline;justify-content:center;min-height:1.5em;gap:.12em;color:var(--accent);font-size:3em;font-weight:700;line-height:1.5;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.result-value .unit{font-size:.55em}
.result-value .rate{white-space:nowrap}
.result-value.success-change{font-size:2em;min-height:2.25em;align-items:center;gap:.2em}
.result-value.success-change .rate-arrow{font-size:.7em;font-weight:400;color:#a2a2a2}
.result-label{font-size:1em;line-height:1.5;color:#787878;margin:0}
.result-comparison{margin-top:.35em;font-size:.8em;line-height:1.5;white-space:nowrap}
.scaling-figure{margin-top:0}
.scaling-title{font-size:1.1em;line-height:1.5;margin:0 0 .75em}
.scaling-figure .image.fit{margin-bottom:0}
.scaling-figure figcaption{margin-top:.75em;max-width:calc(100% - var(--gutter));font-size:1em;line-height:1.75;text-align:left}
/* Enlarged figures and synchronized sensor recordings remain available on demand. */
dialog{margin:auto;width:min(70em,calc(100% - 32px));max-height:94vh;padding:0;border:1px solid #ddd;background:#fff;color:#787878;overflow:auto;box-shadow:0 24px 80px #0003}
dialog::backdrop{background:#0009}
.dialog-header{display:flex;align-items:center;justify-content:space-between;gap:1em;padding:.75em 1.25em}
.dialog-header h2{font-size:1.25em;line-height:1.5;margin:0}
.dialog-close{width:1.5em;height:1.5em;flex-shrink:0;border:0;background:none;font-size:1.75em;line-height:1}
#dialog-video{display:block;width:100%;max-height:68vh;object-fit:contain;background:#eeecef}
.dialog-bottom{display:flex;justify-content:space-between;align-items:center;gap:1em;padding:.75em 1.25em;font-size:.875em}
.dialog-pagination{display:flex;gap:.5em}.dialog-pagination button{width:2em;height:1.8em;border:1px solid #ddd;background:#fff;font-size:1.25em;line-height:1}
#figure-dialog .dialog-header{position:sticky;top:0;z-index:1;background:#fff;border-bottom:1px solid #eee}
.figure-viewport{padding:1.25em;overflow:auto;max-height:calc(94vh - 4em)}
#figure-image{display:block;width:auto;max-width:100%;max-height:calc(94vh - 6.5em);margin:auto;object-fit:contain}
.noscript-note{padding:2em;text-align:center}
/* The same breakpoints as UMI. Its width=1000 mobile viewport is retained. */
@media screen and (max-width:1800px){body,input,select,textarea{font-size:12pt}}
@media screen and (max-width:1280px){:root{--gutter:1em}#main{padding-right:3em;padding-left:3em}}
@media screen and (max-width:980px){#main{padding-right:4em;padding-left:4em}}
@media screen and (max-width:736px){:root{--gutter:.75em}#main{padding-right:1.5em;padding-left:1.5em}h3{font-size:1em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Public project resources and author information, using the UMI reading column. */
.resource-list{display:flex;justify-content:center;gap:4em;padding:.25em 0 .5em}
.resource-item{display:flex;flex-direction:column;align-items:center;gap:.25em;min-width:5em;padding:0;border:0;background:none;color:var(--accent);opacity:1;cursor:default}
.resource-link{text-decoration:none;cursor:pointer}
.resource-item svg{width:2.5em;height:2.5em;margin-bottom:.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.resource-name{font-size:1em;line-height:1.5}
.resource-status{font-size:.75em;line-height:1.5;color:#8a8a8a}
.author-list,.affiliation-list{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;padding:0}
.author-list{column-gap:1.15em;row-gap:.2em;margin:0 0 .85em;color:var(--accent);font-size:1em;line-height:1.65}
.author-list li,.affiliation-list li{white-space:nowrap}
.author-list sup,.affiliation-list sup,.contribution-note sup{position:relative;top:-.45em;vertical-align:baseline;font-size:.65em;line-height:0}
.author-list sup{margin-left:.13em}
.affiliation-list{gap:.2em 1.1em;margin:0 0 .65em;font-size:.8em;line-height:1.65;color:#787878}
.contribution-note{display:flex;justify-content:center;gap:1.5em;margin:0;font-size:.8em;line-height:1.5;color:#787878}

/* Author credits follow the title; compact logo rows keep the hero close by. */
.project-header{margin-bottom:2em}
.project-header h2{margin-bottom:.65em}
.project-team{text-align:center}
.affiliation-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9em 1.15em;list-style:none;margin:1.25em auto 0;padding:0}
.affiliation-logos li{display:flex;align-items:center;justify-content:center;width:7.3em;height:2.2em;padding:0}
.affiliation-logos img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.affiliation-logos .logo-deepmind img{width:100%}
.affiliation-logos .logo-meta img{width:6em}
.affiliation-logos .logo-yale img{max-height:1.85em}
.affiliation-logos .logo-tamu{height:2.65em}
.affiliation-logos .logo-tamu img,.affiliation-logos .logo-washington img{height:100%}
.affiliation-logos .logo-overfit img{height:100%;width:auto}
/* Fit Berkeley's padded artwork inside its cell; trim only the white margins. */
.affiliation-logos .logo-berkeley img{width:100%;height:100%;max-height:100%;object-fit:cover}