/* One 6:5 camera frame per method, without padding or video blur. */
.hero.hero-film{position:relative;isolation:isolate;box-sizing:border-box;aspect-ratio:12/5;min-height:0;height:auto;overflow:hidden;background:#080a0c;color:#fff;border:0;text-align:center;padding:38px 32px 84px}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.hero-scene,.hero-shade{position:absolute;inset:0;pointer-events:none}
.hero-scene{opacity:0;transition:opacity .7s ease}
.hero-scene.is-active{opacity:1}
.hero-scene video{display:block;width:100%;height:100%;object-fit:contain;filter:none}
.hero-shade{z-index:1;background:linear-gradient(180deg,#0002,transparent 50%,#0001 68%,#000a)}
.hero.hero-film>.hero-content{position:relative;z-index:2;isolation:isolate;width:100%;max-width:1040px;margin:0 auto;padding:0}
.hero-content::before{content:"";position:absolute;inset:-100px -100px -80px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.82) 0%,rgba(0,0,0,.65) 38%,rgba(0,0,0,.26) 64%,transparent 78%);filter:blur(28px)}
.hero-film .paper-title{margin:0;color:#fff;letter-spacing:-.035em;text-shadow:0 2px 16px #06101c66}
.hero-acronym{display:block;font-size:56px;font-weight:700;line-height:1;letter-spacing:-.055em;margin:0 0 14px}
.hero-title-main{display:block;font-size:30px;font-weight:600;line-height:1.22;letter-spacing:-.035em}
.hero-title-main br{display:none}
.hero-title-detail{display:block;font-size:19px;font-weight:400;line-height:1.4;letter-spacing:-.02em;margin-top:9px;color:#e7edf5}
.hero-film .author-list{max-width:760px;justify-content:center;gap:6px 18px;margin:23px auto 10px;line-height:1.45}
.hero-film .author,.hero-film .author a{font-size:14px;font-weight:400;color:#fff;text-shadow:0 1px 6px #06101c70}
.hero-film .author a{text-decoration-color:#ffffff55;text-underline-offset:4px}
.hero-film .author a:hover{text-decoration-color:#fff}
.hero-film .author-break{margin:0}
.hero-film .author sup{font-size:.68em;color:#e0ebf9}
.hero-film .author .corresponding-mark{font-size:.85em;font-weight:700}
.hero-film .affiliations{margin:0;color:#e4ecf5;font-size:12px;opacity:1;line-height:1.5}
.hero-film .affiliations span{margin:0 9px;white-space:nowrap}
.hero-film .resource-buttons{justify-content:center;margin-top:18px}
.hero-film .resource-button{background:#101b2a30;border-color:#ffffff50;color:#fff;backdrop-filter:blur(7px)}
.hero-film .resource-button:disabled{opacity:.75}
.hero-film .resource-button:disabled:hover{border-color:#ffffff50}
.hero-film .resource-button:not(:disabled):hover{background:#ffffff20;border-color:#ffffffa0;color:#fff}
.hero-film .resource-button small{color:#d2deed}
.hero-film :focus-visible{outline-color:#b9d4f6}
.hero-comparison-divider{position:absolute;inset:0 auto 0 50%;width:1px;background:linear-gradient(transparent,#eef5ff20 48%,#eef5ff52 70%,transparent);z-index:2}
.hero-comparison-labels{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:1fr 1fr;text-align:left;pointer-events:none}
.hero-comparison-labels>span{align-self:end;padding:0 32px 28px;font:500 15px/1.2 Inter,sans-serif;letter-spacing:.005em;color:#fff;text-shadow:0 1px 6px #000b}
.hero-film-controls{position:absolute;z-index:3;right:28px;bottom:14px;display:flex;align-items:center;gap:9px;color:#fff;text-shadow:0 1px 6px #000d}
.hero-scene-button{display:block;min-height:44px;padding:10px 4px;border:0;border-radius:0;background:none;color:#fff;font:500 13px/1.2 Inter,sans-serif;text-shadow:inherit;opacity:.65;transition:opacity .2s;cursor:pointer}
.hero-scene-button[aria-pressed=true],.hero-scene-button:hover{opacity:1}
.hero-scene-button[aria-pressed=true]{font-weight:650}
.hero-scene-separator{font-size:12px;opacity:.45}
.hero-playback-rate{font:500 13px/1.2 Inter,sans-serif;opacity:.8;margin-left:-3px;white-space:nowrap}
@media(min-width:1600px){.hero.hero-film{padding-top:48px}.hero-title-main{font-size:34px}.hero-acronym{font-size:64px}.hero-title-detail{font-size:21px}}
/* Give the title its own space before it would cover the task itself. */
@media(max-width:1199px){
 .hero.hero-film{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto;padding:0}
 .hero.hero-film>.hero-content{grid-row:1;padding:34px 28px 28px}
 .hero-content::before{display:none}
 .hero-media{position:relative;grid-row:2;inset:auto;aspect-ratio:12/5;width:100%;background:#101820}
 .hero-shade{background:linear-gradient(transparent calc(100% - 100px),#0008)}
 .hero-comparison-labels>span{align-self:start;height:70px;padding:16px 22px;background:linear-gradient(#0006,transparent);font-size:14px}
 .hero-comparison-divider{background:#ffffff29}
 .hero-film-controls{right:18px;bottom:6px}
 .hero-acronym{font-size:48px}
 .hero-title-main{font-size:27px}
 .hero-title-detail{font-size:18px}
 .hero-film .author-list{gap:6px 14px;margin-top:20px}
}
@media(max-width:600px){
 .hero.hero-film>.hero-content{padding:30px 20px 26px}
 .hero-acronym{font-size:42px;margin-bottom:12px}
 .hero-title-main{font-size:23px;line-height:1.25}
 .hero-title-main br{display:block}
 .hero-title-detail{font-size:16px;max-width:330px;margin:9px auto 0}
 .hero-film .author-list{margin-top:20px;gap:8px 13px;max-width:490px}
 .hero-film .author-break{display:none}
 .hero-film .author,.hero-film .author a{font-size:12px}
 .hero-film .affiliations{font-size:10px;line-height:1.8}
 .hero-film .affiliations span{margin:0 5px}
 .hero-film .resource-buttons{margin-top:15px}
 .hero-media{aspect-ratio:3/5}
 .hero-comparison-divider{inset:50% 0 auto;width:100%;height:1px}
 .hero-comparison-labels{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
 .hero-comparison-labels>span{height:64px;padding:14px 18px;font-size:14px}
 .hero-film-controls{right:14px;bottom:5px;gap:7px}
}
@media(max-width:360px){
 .hero.hero-film>.hero-content{padding-inline:16px}
 .hero-title-main{font-size:21px}
 .hero-title-detail{font-size:15px}
 .hero-film .author-list{gap:7px 10px}
 .hero-film .author,.hero-film .author a{font-size:11px}
 .hero-film .resource-buttons{gap:6px;flex-wrap:nowrap}
 .hero-film .resource-button{font-size:12px;padding:7px 8px;gap:5px}
 .hero-film .resource-button small{font-size:11px}
 .hero-film .resource-button .resource-icon{width:13px;height:13px}
}
@media(prefers-reduced-motion:reduce){.hero-scene,.hero-scene-button{transition:none}}

/* Keep the mobile author order at four, three, then two names. */
.author-break-mobile{display:none}
@media(max-width:600px){
 .hero-film .author-list{column-gap:clamp(5px,1.8vw,10px);row-gap:4px}
 .hero-film .author,.hero-film .author a{font-size:clamp(10px,3vw,12px);white-space:nowrap}
 .hero-film .author-break-mobile{display:block;flex-basis:100%;height:0}
}