/* A separate room-first prototype; the research page remains unchanged. */
.spatial-tour { height: 380vh; position: relative; scroll-margin-top: 56px; }
.spatial-pin { position: sticky; top: 56px; padding-top: 12px; }
.spatial-scene { position: relative; width: calc(100% - 36px); max-width: 1440px; height: calc(100svh - 122px); min-height: 440px; max-height: 950px; margin: 0 auto; overflow: hidden; background: #141b2d; border-radius: 8px; isolation: isolate; color: white; }
#spatial-canvas, #spatial-footage { position: absolute; inset: 0; width: 100%; height: 100%; }
#spatial-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.spatial-scene.is-exploring #spatial-canvas canvas { touch-action: none; cursor: grab; }
#spatial-footage { object-fit: contain; background: #141b2d; opacity: 0; pointer-events: none; }
.spatial-copy { position: absolute; top: 34px; left: 36px; max-width: 460px; pointer-events: none; text-shadow: 0 2px 18px #12232daa; }
.spatial-eyebrow { font-size: .8rem; color: #cfdae0; margin-bottom: 12px; }
.spatial-copy h2 { font-size: clamp(2.25rem,5vw,4.5rem); letter-spacing: -.055em; line-height: 1.08; font-weight: 500; color: #fff; margin: 0 0 15px; }
#spatial-description { font-size: .95rem; line-height: 1.6; max-width: 330px; color: #e0e9ee; }
.spatial-actions { position: absolute; top: 30px; right: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.spatial-actions button { border: 1px solid #d0e2ee55; border-radius: 5px; padding: 9px 13px; color: white; background: #172f3cbb; font: inherit; font-size: .8rem; cursor: pointer; }
.spatial-actions button[aria-pressed="true"] { background: #e3eff8; color: #141b2d; }
.spatial-actions button:disabled { opacity: .45; cursor: default; }
.spatial-actions a { color: #e1e7eb; font-size: .75rem; }
.spatial-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 44px 36px 26px; background: linear-gradient(transparent,#141b2de6); pointer-events: none; }
#spatial-status { color: #d5e2e9; font-size: .8rem; min-height: 1.5em; margin-bottom: 14px; }
.spatial-steps { display: flex; gap: 28px; pointer-events: auto; }
.spatial-steps button { background: none; color: #b7c7d2; font: inherit; font-size: .85rem; border: 0; padding: 10px 0; cursor: pointer; }
.spatial-steps button span { font-size: .7rem; color: #a4b8c5; margin-right: 6px; }
.spatial-steps button[aria-pressed="true"] { color: white; }
.spatial-steps button[aria-pressed="true"] span { color: #a9dded; }
.spatial-progress { height: 1px; background: #abc6d144; margin-top: 8px; }
.spatial-progress span { display: block; height: 2px; width: 0; background: #baddea; }
.spatial-caption { text-align: center; color: var(--text-secondary); font-size: .78rem; margin: 10px 20px; }
.spatial-camera { position: absolute; top: 105px; right: 30px; width: 260px; background: #fff; color: #273442; border-radius: 7px; overflow: hidden; box-shadow: 0 10px 30px #09172555; }
.spatial-camera[hidden] { display: none; }
.spatial-camera > div { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; font-size: .8rem; }
.spatial-camera button { border: 0; background: none; font-size: 1.3rem; cursor: pointer; }
.spatial-camera img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.spatial-camera p { font-size: .7rem; padding: 7px 12px; color: #647184; }
.spatial-scene button:focus-visible, .spatial-scene a:focus-visible { outline: 2px solid #b0e7fc; outline-offset: 4px; }
@media (max-width: 700px) {
 .spatial-scene { width: calc(100% - 20px); min-height: 470px; }
 .spatial-copy { top: 70px; left: 22px; right: 22px; }
 .spatial-copy h2 { font-size: 2.5rem; }
 .spatial-eyebrow { margin-bottom: 8px; font-size: .73rem; }
 #spatial-description { font-size: .83rem; max-width: 260px; }
 .spatial-actions { top: 16px; left: 20px; right: 20px; flex-direction: row; justify-content: space-between; align-items: center; }
 .spatial-actions button { font-size: .72rem; }
 .spatial-actions a { font-size: .7rem; }
 .spatial-bottom { padding: 45px 20px 18px; }
 .spatial-steps { gap: 0; justify-content: space-between; }
 .spatial-steps button { font-size: .7rem; }
 .spatial-steps button span { display: block; margin: 0 0 3px; }
 #spatial-status { font-size: .72rem; }
 .spatial-camera { width: 200px; right: 20px; top: auto; bottom: 132px; }
 .spatial-caption { font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) { .spatial-tour { height: auto; } .spatial-pin { position: relative; top: 0; } }

.spatial-scene::after { content: ''; position: absolute; inset: 0 0 auto; height: 260px; background: linear-gradient(#141b2dba,transparent); pointer-events: none; }
.spatial-copy, .spatial-actions, .spatial-camera, .spatial-bottom { z-index: 1; }

#spatial-camera-select { font: inherit; font-size: .75rem; color: #edf4f8; background: #1c3444; border: 1px solid #afccd555; border-radius: 4px; padding: 7px 9px; max-width: 160px; }
#spatial-camera-select[hidden] { display: none; }
@media (max-width:700px) { #spatial-camera-select { position: absolute; right: 0; top: 48px; max-width: 128px; font-size: .68rem; } }

.spatial-motion { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 13px; pointer-events: auto; }
.spatial-motion[hidden] { display: none; }
.spatial-motion button { background: #152d3dc7; border: 1px solid #9fb6c74d; border-radius: 4px; padding: 5px 9px; color: #d9e9f3; font: inherit; font-size: .73rem; cursor: pointer; }
.spatial-motion button:disabled { opacity: .5; cursor: default; }
#spatial-skeleton-toggle span { color: #7dceff; margin-right: 4px; }
#spatial-skeleton-toggle[aria-pressed="false"] { color: #99a7b2; }
#spatial-skeleton-toggle[aria-pressed="false"] span { color: #99a7b2; }
#spatial-motion-time { font-size: .7rem; color: #b8cbd7; font-variant-numeric: tabular-nums; }
@media (max-width:700px) { .spatial-motion { gap: 7px; } .spatial-motion button { font-size: .68rem; padding: 5px 7px; } #spatial-motion-time { font-size: .65rem; } }
/* Keep changing replay labels from shifting the scroll-driven scene. */
.spatial-preview { overflow-anchor: none; }
/* Three crops of a single recording, connected to calibrated camera positions. */
#spatial-view-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#spatial-view-lines line { stroke: #b1d7e5; stroke-width: 1; opacity: .65; }
#spatial-floating-views { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.spatial-view { position: absolute; padding: 0; border: 1px solid #b0ddedaa; background: #141b2d; border-radius: 6px; overflow: hidden; color: #eff8fc; cursor: pointer; pointer-events: auto; box-shadow: 0 5px 24px #07121c55; }
.spatial-view[hidden] { display: none; }
.spatial-view:disabled { pointer-events: none; }
.spatial-view canvas { display: block; width: 100%; aspect-ratio: 4/3; }
.spatial-view > span { position: absolute; bottom: 0; left: 0; right: 0; padding: 13px 8px 6px; background: linear-gradient(transparent,#141b2ded); display: flex; justify-content: space-between; align-items: baseline; font-size: .7rem; text-align: left; gap: 5px; }
.spatial-view small { font-size: .55rem; color: #c9e2ee; white-space: nowrap; }
.spatial-view:hover { outline: 1px solid #d2f1fd; }
.spatial-camera { z-index: 5; width: min(480px,calc(100% - 40px)); top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%,-50%); }
.spatial-camera canvas { width: 100%; aspect-ratio: 4/3; display: block; background: #141b2d; }
.spatial-copy,.spatial-actions,.spatial-bottom { z-index: 4; }
@media (max-width:700px) { .spatial-view > span { display: block; font-size: .6rem; padding: 12px 5px 4px; } .spatial-view small { display: block; font-size: .5rem; } }
/* Full-screen opening with immediately visible research credits. */
.spatial-preview .site-nav { position: fixed; left: 0; right: 0; }
.spatial-preview.viewing-spatial-intro .site-nav { visibility: hidden; }
.spatial-preview .spatial-tour { scroll-margin-top: 0; }
.spatial-preview .spatial-pin { top: 0; padding: 0; height: 100svh; overflow: hidden; }
.spatial-preview .spatial-scene { width: 100%; max-width: none; height: 100svh; min-height: 0; max-height: none; margin: 0; border-radius: 0; }
.spatial-authors { position: relative; z-index: 6; padding: 17px 28px 14px; background: white; text-align: center; width: 100%; }
.hybrid-preview .spatial-authors .publication-authors { max-width: 1100px; font-size: .81rem !important; line-height: 1.85; margin-bottom: 5px; }
.spatial-authors .eql-cntrb small br { display: none; }
.spatial-authors .eql-cntrb { margin-left: 15px; }
.spatial-author-links { display: flex; justify-content: center; gap: 18px; font-size: .72rem; margin-top: 7px; color: #798391; }
.spatial-author-links a { color: #576170; }
.spatial-opening { position: absolute; top: 42px; left: 42px; right: 32px; z-index: 4; max-width: 660px; color: white; text-shadow: 0 2px 22px #141b2d; }
.spatial-opening::before { content: ''; position: absolute; inset: -100px -180px -150px -100px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 28% 25%, #141b2df5 0%, #141b2ddd 34%, #141b2d80 56%, #141b2d00 76%); }
.spatial-opening h1 { display: flex; align-items: center; gap: .22em; font-size: clamp(2.4rem,5.6vw,4.6rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 600; color: #fff; margin-bottom: 16px; }
.spatial-opening-logo { width: 1.15em; height: 1.15em; flex: 0 0 auto; object-fit: contain; filter: grayscale(1) invert(1) brightness(1.4); mix-blend-mode: screen; }
.spatial-opening > p { font-size: clamp(1rem,1.7vw,1.3rem); line-height: 1.6; font-weight: 500; color: #f5f8fa; }
.spatial-paper { display: inline-flex; margin-top: 22px; padding: 10px 16px; border: 1px solid #f1f6f8; border-radius: 5px; background: #f1f6f8; color: #173343; font-size: .82rem; font-weight: 600; text-shadow: none; transition: background .18s, box-shadow .18s; }
.spatial-paper:hover { color: #173343; background: #fff; border-color: #fff; box-shadow: 0 3px 16px #07121c30; }
.spatial-paper:focus-visible { outline: 2px solid white; outline-offset: 4px; }
.spatial-preview .spatial-scene::after { height: 330px; background: linear-gradient(#141b2dde,transparent); }
.spatial-scene.intro-active .spatial-copy { visibility: hidden; }
.spatial-scene.intro-active .spatial-actions { visibility: hidden; }
.spatial-scene.intro-active .spatial-steps,.spatial-scene.intro-active .spatial-progress { display: none; }
.spatial-scene.intro-active .spatial-bottom { padding-bottom: 22px; }
.spatial-scene.intro-active #spatial-status { margin-bottom: 0; }
.spatial-preview.viewing-spatial-intro .scroll-to-top { display: none; }
@media(max-width:700px) {
 .spatial-opening { top: 26px; left: 22px; right: 22px; }
 .spatial-opening::before { inset: -70px -85px -130px -70px; }
 .spatial-opening h1 { font-size: clamp(1.5rem,7.2vw,2.6rem); margin-bottom: 12px; }
 .spatial-opening > p { font-size: .92rem; max-width: 340px; }
 .spatial-opening > p br { display: none; }
 .spatial-paper { margin-top: 15px; font-size: .74rem; }
 .spatial-authors { padding: 12px 18px; }
 .hybrid-preview .spatial-authors .publication-authors { font-size: .72rem !important; line-height: 1.7; margin-bottom: 6px; }
 .spatial-authors .eql-cntrb { display: block; margin: 3px 0 0; }
 .spatial-author-links { font-size: .64rem; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
}
@media(prefers-reduced-motion:reduce) {
 .spatial-preview .spatial-tour { height: auto; }
 .spatial-preview .spatial-pin { position: relative; }
 .spatial-scene.intro-active .spatial-steps { display: flex; }
}

/* Research credits and resources at the end of the page. */
.publication-details { text-align: center; border-top: 1px solid #e4e7eb; }
.publication-details h2 { display: flex; justify-content: center; align-items: center; gap: .22em; color: #18232d; font-size: clamp(1.8rem,4vw,2.5rem); font-weight: 600; letter-spacing: -.035em; margin-bottom: 10px; }
.publication-logo { width: 1.15em; height: 1.15em; object-fit: contain; flex: 0 0 auto; }
.publication-subtitle { max-width: 650px; margin: 0 auto 25px; color: #576170; font-size: 1.05rem; line-height: 1.6; }
.publication-resources { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; margin-top: 25px; font-size: .88rem; }
.publication-resources a { color: #263d52; text-decoration: underline; text-underline-offset: 5px; }
.publication-resources a:hover { color: #126c9b; }
.publication-resources > span { color: #7b8490; font-size: .8rem; }
.publication-details + .hero-meta { padding-top: 0; }
@media(max-width:700px) { .publication-subtitle { font-size: .95rem; } }

/* A restrained blue palette shared by the paper and room introduction. */
.spatial-preview {
 --primary-color: #356ae6;
 --primary-hover: #2855bd;
 --accent-color: #356ae6;
 --background-accent: #edf3ff;
 --gradient-primary: linear-gradient(135deg, #356ae6, #2855bd);
}
.spatial-preview .publication-resources a,
.spatial-preview .publication-code-pending { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-color); text-decoration: none; padding: 5px 0; }
.spatial-preview .publication-resources i { width: 1.1em; text-align: center; font-size: 1em; flex: none; }
.spatial-preview .publication-code-pending { color: #7b8490; font-size: .88rem; }
.spatial-preview .publication-resources a:hover { color: var(--primary-hover); }
.spatial-preview .publication-resources a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.spatial-preview .publication-resources a:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 5px; border-radius: 2px; }
.spatial-preview .publication-authors a { color: #334155 !important; }
.spatial-preview .publication-authors a:hover { color: var(--primary-color) !important; }
.spatial-preview .hero-stat-num { color: #334155 !important; }
.spatial-preview .camera-selector button[aria-pressed="true"],
.spatial-preview .camera-auto-toggle[aria-pressed="true"] { background: #edf3ff; border-color: #b7caf5; }
.spatial-preview .camera-toolbar .camera-choices button[aria-pressed="true"],
.spatial-preview .camera-compare-toggle[aria-pressed="true"],
.spatial-preview .interaction-branch:hover { border-color: #b7caf5; }

/* Section accents sit above the heading; navigation uses text color only. */
.spatial-preview .site-nav .nav-links a[aria-current="location"] { color: var(--primary-color); }
.spatial-preview .title.is-3::before { content: ''; display: block; width: 44px; height: 3px; margin: 0 auto 17px; border-radius: 2px; background: linear-gradient(90deg, #356ae6, #7a9cf0); }

/* One synchronized stage, without a floating inset or repeated title cards. */
.yielding-composite { position: relative; display: grid; grid-template-columns: 1.56fr 1fr; gap: 4px; align-items: start; background: white; }
.yielding-composite > .yielding-room { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; border-radius: 0; }
#yielding .yielding-inset { margin: 0; width: 100%; }
.yielding-inset .study-video { width: 100%; aspect-ratio: 816/716; object-fit: contain; border-radius: 0; }
.yielding-speed, .yielding-action { position: absolute; top: 10px; padding: 5px 9px; border-radius: 3px; background: #ffffffed; color: #334155; font-size: .76rem; }
.yielding-speed { left: 10px; }
.yielding-action { left: 90px; font-weight: 600; }
.yielding-action[data-phase="yielding"] { background: #fff1d6; color: #79521d; }
.yielding-action[data-phase="resuming"] { background: #e8f3ff; color: #2855bd; }
.yielding-action[hidden] { display: none; }
.yielding-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 25px; padding: 17px 0 3px; color: #586576; font-size: .8rem; }
.yielding-legend span { display: inline-flex; align-items: center; gap: 8px; }
.yielding-legend i { display: inline-block; flex: none; }
.forecast-swatch { width: 25px; height: 3px; background: linear-gradient(90deg,#eebc43,#e98251,#df6b63); border-radius: 2px; }
.working-swatch,.yielding-swatch { width: 9px; height: 9px; border-radius: 50%; }
.working-swatch { background: #28c63d; } .yielding-swatch { background: #edcc19; }
.yielding-explanation { max-width: 850px; margin: 0 auto; font-size: 1rem; color: #566274; line-height: 1.8; }
.forecast-method { margin: 16px 0 0; font-size: .85rem; color: #667080; line-height: 1.8; }
.forecast-method summary { cursor: pointer; }
.forecast-method p { margin-top: 10px; }
.yielding-evidence { max-width: 850px; margin: 30px auto 0; padding-top: 24px; border-top: 1px solid #dce2eb; }
.yielding-evidence h3 { color: #263344; font-size: 1.15rem; font-weight: 600; margin-bottom: 0; }
.yielding-evidence .study-result { margin-top: 12px; font-size: 1rem; }
@media(max-width:700px) {
 .yielding-composite { grid-template-columns: 1fr; gap: 10px; }
 #yielding .yielding-inset { width: 76%; max-width: 360px; margin: auto; }
 .yielding-legend { font-size: .7rem; gap: 10px 16px; }
 .yielding-speed, .yielding-action { top: 7px; padding: 4px 7px; font-size: .64rem; }
 .yielding-speed { left: 7px; } .yielding-action { left: 73px; }
}

/* Camera study: a stable body view with a hand detail in the same stage. */
.spatial-preview .camera-toolbar .camera-choices button { position: relative; }
.spatial-preview .camera-choices button.is-current-condition { color: var(--primary-color); }
.spatial-preview .camera-choices button[aria-current="true"]::after { content: ''; position: absolute; height: 2px; left: 11px; right: 11px; bottom: 3px; background: var(--primary-color); border-radius: 2px; }
.spatial-preview .camera-compare-option { padding: 7px 10px; border: 1px solid #dce2eb; border-radius: 5px; font-size: .8rem; }
.spatial-preview .camera-compare-option:has(input:checked) { background: #edf3ff; border-color: #b7caf5; }
.spatial-preview .camera-study-group .camera-visuals { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: 5px; background: #15191f; }
.spatial-preview .camera-scene .study-video { width: 100%; aspect-ratio: 16/9; object-fit: contain; border-radius: 0; }
.spatial-preview .camera-study-group .camera-hand { position: absolute; bottom: 10px; right: 10px; width: 25%; display: block; padding: 0; background: #121212; border-radius: 3px; overflow: hidden; }
.spatial-preview .camera-study-group .camera-hand > p { position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 5px 7px; margin: 0; color: #e3e8ef; font-size: .68rem; background: linear-gradient(#121212,transparent); }
.spatial-preview .camera-hand-frame { border-radius: 0; }
.spatial-preview .camera-study-group .hand-detail { width: 100%; aspect-ratio: 1; }
.spatial-preview .camera-condition[data-cameras="4"] .hand-detail { opacity: .12; }
.spatial-preview .camera-hand-frame .no-pose-label { position: absolute; inset: 50% 5px auto; width: auto; white-space: normal; transform: translateY(-50%); display: block; text-align: center; padding: 0; color: #eef1f6; font-size: .75rem; line-height: 1.5; background: none; }
.spatial-preview .camera-study-group[data-view-mode="compare"] .camera-hand { width: 29%; }
.spatial-preview .camera-study-group[data-view-mode="compare"] .camera-hand > p { font-size: .58rem; padding: 3px 5px; }
.spatial-preview .camera-study-group[data-view-mode="compare"] .no-pose-label { font-size: .65rem; }
.spatial-preview .camera-view-note { min-height: 2.8em; }
@media(max-width:640px) {
 .spatial-preview .camera-study-group[data-view-mode="compare"] .camera-comparison { grid-template-columns: 1fr; }
 .spatial-preview .camera-study-group .camera-hand { width: 29%; bottom: 7px; right: 7px; }
 .spatial-preview .camera-study-group .camera-hand > p { font-size: .58rem; }
 .spatial-preview .camera-hand-frame .no-pose-label { font-size: .65rem; }
 .spatial-preview .camera-toolbar { gap: 10px; }
}


#spatial-robot-toggle[aria-pressed="false"] { color: #99a7b2; background: transparent; }

/* Keep the room and its views in one composition, including on wide screens. */
.spatial-copy { left: max(30px,calc((100% - 1360px)/2)); max-width: 560px; }
.spatial-copy h2 { font-size: clamp(2rem,3.8vw,3.2rem); max-width: 560px; }
#spatial-description { max-width: 390px; font-size: .88rem; }
.spatial-eyebrow { margin-bottom: 8px; }
.spatial-actions { right: max(30px,calc((100% - 1360px)/2)); }
#spatial-grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.spatial-scene.grid-active::after { display: none; }
.spatial-scene.grid-active .spatial-copy { visibility: hidden; }
 .spatial-scene.grid-active .spatial-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px 30px 12px; background: linear-gradient(transparent,#101827d9); text-shadow: 0 1px 4px #000; }
.spatial-scene.grid-active #spatial-status { display: none; }
.spatial-scene.grid-active .spatial-motion { margin: 0; }
.spatial-scene.grid-active .spatial-progress { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; }
.spatial-scene.grid-active .spatial-steps button { color: #e4ebf3; }
.spatial-scene.grid-active .spatial-steps button[aria-pressed="true"] { color: white; }
.spatial-view canvas { object-fit: cover; }
@media(max-width:700px) {
 .spatial-scene.grid-active .spatial-bottom { padding: 24px 14px 8px; gap: 0; flex-wrap: wrap; }
 .spatial-scene.grid-active .spatial-motion { width: 100%; }
 .spatial-scene.grid-active .spatial-steps { width: 100%; }
 .spatial-scene.grid-active .spatial-steps button { padding: 7px 0; }
 .spatial-scene.grid-active .spatial-steps button span { display: none; }
}
.spatial-motion button { background: transparent; border-color: transparent; padding-left: 0; }
.spatial-motion button:hover { color: #fff; }
.spatial-motion { margin-bottom: 5px; }
#spatial-camera-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; border: 0; background: #080e1d99; cursor: zoom-out; touch-action: pan-y; }
#spatial-camera-backdrop[hidden] { display: none; }
.spatial-camera { z-index: 7; width: min(560px,calc(100% - 36px),calc((100svh - 150px)*4/3)); color: #eaf0f8; background: #1c2639; border: 1px solid #b9d0ed40; border-radius: 7px; box-shadow: 0 22px 90px #0006; }
.spatial-camera > div { padding: 9px 15px; font-size: .85rem; }
.spatial-camera button { width: 36px; height: 36px; color: #edf3ff; border-radius: 4px; }
.spatial-camera button:hover { background: #ffffff14; }
.spatial-camera p { margin: 0; padding: 11px 15px; color: #b6c3d5; font-size: .7rem; }
.spatial-view:focus-visible,.spatial-camera button:focus-visible { outline: 2px solid #b8d5ff; outline-offset: 3px; }
@media(max-width:700px) {
 .spatial-copy { left: 22px; right: 22px; top: 28px; }
 .spatial-copy h2 { font-size: 2rem; max-width: 320px; }
 #spatial-description { max-width: 300px; font-size: .8rem; }
 .spatial-actions { left: auto; top: 20px; right: 20px; }
 #spatial-camera-select { position: static; max-width: 125px; }
 .spatial-scene:has(#spatial-camera-select:not([hidden])) .spatial-copy { top: 70px; }
}

.spatial-scene.is-fallback .spatial-opening,.spatial-scene.is-fallback .spatial-copy { display: none; }
.spatial-scene.is-fallback .spatial-steps { display: flex; }
.spatial-scene.is-fallback .spatial-progress { display: block; }

#spatial-grid { object-fit: contain; background: #141b2d; }

.spatial-camera video { width: 100%; aspect-ratio: 4/3; display: block; background: #141b2d; object-fit: contain; }
.spatial-camera video[hidden],.spatial-camera canvas[hidden] { display: none; }

/* The final 16:9 frame leaves with the page, without an internal grid pan. */
.spatial-preview .spatial-pin { overflow: visible; }
.spatial-preview .spatial-scene { overflow: clip; }
#spatial-canvas { height: 100svh; bottom: auto; }
#spatial-grid { inset: 0 auto auto 0; transform: none; }
@media(prefers-reduced-motion:reduce) {
 .spatial-preview .spatial-pin { height: auto !important; }
}

#spatial-view-lines line { stroke: #ffcfb3; stroke-width: 1.8; }

/* Keep publication resources and the hardware facts in one visual group. */
.spatial-preview .publication-details { padding-bottom: 3.2rem; }
@media(max-width:768px) { .spatial-preview .publication-details { padding-bottom: 2.2rem; } }

/* A quantitative heatmap, distinct from the room introduction. */
#coverage #heatmap-container { position: relative; width: 100%; height: 580px; overflow: hidden; border-radius: 7px; background: #141b2d; border: 1px solid #253149; box-shadow: none; }
#coverage .coverage-panel { width: 260px; background: #141b2d; color: #edf1f7; border: 1px solid #253149; border-radius: 7px; padding: 22px 20px; font-size: .8rem; box-shadow: none; }
.coverage-panel-title { display: block; color: #edf1f7; font-weight: 600; font-size: .85rem; line-height: 1.5; }
.coverage-panel-help { color: #b1bed0; font-size: .72rem; line-height: 1.6; margin: 7px 0 16px; }
#cov-slider { display: block; width: 100%; accent-color: #63c7b9; direction: ltr; margin: 0 0 12px; cursor: pointer; }
#cov-value { display: block; font-size: 1.15rem; color: #f4f6fa; font-weight: 600; font-variant-numeric: tabular-nums; }
.coverage-summary { margin: 20px 0; }
#coverage-pct { color: #8cdecf; font-size: .75rem; font-weight: 600; line-height: 1.6; }
#visible-count { color: #b1bed0; font-size: .68rem; line-height: 1.6; margin-top: 3px; }
.coverage-legend p { color: #b1bed0; font-size: .7rem; margin-bottom: 8px; }
.coverage-colorbar { height: 8px; border-radius: 3px; background: linear-gradient(to right,#443983,#31688e,#21918c,#35b779,#fde725); }
.coverage-legend-ticks { display: flex; justify-content: space-between; color: #c1cbd9; font-size: .65rem; margin-top: 6px; font-variant-numeric: tabular-nums; }
.coverage-selection-note { color: #d2dae6; font-size: .72rem; line-height: 1.6; }
.coverage-selection-note small { display: block; margin-top: 8px; color: #a9b8ca; font-size: .65rem; }
.coverage-selection-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #ffad9f; }
.coverage-camera { border-top: 1px solid #ffffff1a; margin-top: 22px; padding-top: 18px; }
.coverage-camera-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cov-clear-camera { border: 1px solid #526178; border-radius: 4px; color: #dce5f1; background: transparent; font: inherit; font-size: .65rem; padding: 3px 7px; cursor: pointer; }
#cov-clear-camera:hover { background: #ffffff0d; }
#cam-popup-cov { color: #ffbdaf; font-size: .68rem; margin-top: 4px; }
#cam-popup-cov:empty { display: none; }
#cam-popup-placeholder { min-height: 150px; aspect-ratio: 4/3; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border: 1px dashed #526178; border-radius: 5px; color: #c0ccda; text-align: center; font-size: .72rem; line-height: 1.7; }
#cam-popup-placeholder i { font-size: 1.3rem; color: #9eb2c9; }
#cam-popup-img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #0d1423; border-radius: 5px; margin-top: 14px; }
#cam-popup-meta { color: #a9b8ca; font-size: .66rem; margin-top: 8px; line-height: 1.6; }
.coverage-panel [hidden] { display: none !important; }
#coverage button:focus-visible,#coverage input:focus-visible { outline: 2px solid #a6dfd4; outline-offset: 4px; }
@media(max-width:900px) {
 #coverage .coverage-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
 .coverage-camera { border-top: 0; border-left: 1px solid #ffffff1a; margin: 0; padding: 0 0 0 24px; }
}
@media(max-width:520px) {
 #coverage .coverage-panel { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
 .coverage-camera { border-left: 0; border-top: 1px solid #ffffff1a; padding: 18px 0 0; }
 #cam-popup-placeholder,#cam-popup-img { max-height: 220px; min-height: 0; }
}

#cov-clear-camera { flex-shrink: 0; white-space: nowrap; }
.coverage-camera-heading .coverage-panel-title { font-size: .8rem; }

/* Human tracking: keep the replay and its controls in one quiet frame. */
#perception #skeleton-container {
  border-radius: 7px 7px 0 0 !important;
  box-shadow: none !important;
  border: 0;
  height: 520px !important;
}
#perception .pose-controls {
  margin-top: 0 !important;
  border-radius: 0 0 7px 7px !important;
  padding: 14px 18px !important;
  background: #141b2d !important;
}
#perception .seg-wrap { margin-bottom: 12px; }
#perception .pose-controls button:focus-visible,
#perception .pose-controls input:focus-visible,
#perception .pose-controls select:focus-visible { outline: 2px solid #a6d8ff; outline-offset: 4px; }
@media(max-width:700px) {
  #perception #skeleton-container { height: 400px !important; }
  #perception .pose-controls { gap: 12px !important; padding: 14px !important; }
  #perception #sk-timeline { min-width: 0 !important; }
  #perception #sk-time { min-width: 72px !important; }
  #perception #sk-speed { margin-left: 44px; }
}

/* Four camera conditions share one precomposed video and one playback clock. */
.spatial-preview .camera-study-group [hidden] { display: none !important; }
.camera-grid-player { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 5px; background: #121212; }
.spatial-preview .camera-grid-player video { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; transform-origin: 0 0; }
.camera-grid-labels { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none; }
.camera-grid-labels > div { padding: clamp(5px,1vw,12px); border: 1px solid #ffffff30; }
.camera-grid-labels span { display: inline-flex; gap: 7px; align-items: center; padding: 4px 8px; border-radius: 3px; background: #121c2cdb; color: #fff; font-size: clamp(.6rem,1.1vw,.85rem); line-height: 1.4; }
.camera-grid-labels small { color: #c8d5e5; font-size: .8em; }
.camera-grid-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 8px 14px; background: #101827dd; color: white; border-radius: 4px; font-size: .8rem; pointer-events: none; }
@media(max-width:640px) {
 .camera-grid-labels span { padding: 3px 5px; gap: 4px; }
}

/* In the default comparison, every condition retains its synchronized hand inset. */
.camera-grid-hand-markers { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; pointer-events: none; }
.camera-grid-hand-markers > div { position: relative; }
.camera-grid-hand-frame { position: absolute; right: .833333%; bottom: 1.481481%; width: 31.25%; height: 55.555556%; border: 1px solid #ffffff38; border-radius: 2px; }
.camera-grid-hand-frame small { position: absolute; left: 5px; top: 3px; color: #dce6f2; font-size: clamp(.45rem,.75vw,.65rem); font-style: normal; }
.camera-grid-hand-frame em { position: absolute; left: 4px; right: 4px; top: 50%; transform: translateY(-50%); color: #c4cfdb; text-align: center; font-size: clamp(.45rem,.8vw,.72rem); font-style: normal; }

/* Auto and manual views crop one quadrant of the same continuously decoded video. */
.camera-study-group[data-view-mode="single"] .camera-grid-labels,
.camera-study-group[data-view-mode="single"] .camera-grid-hand-markers { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.camera-study-group[data-view-mode="single"] .camera-grid-labels > div { border: 0; }
.camera-study-group[data-view-mode="single"] .camera-grid-hand-frame small { font-size: clamp(.58rem,1vw,.8rem); }
.camera-study-group[data-view-mode="single"] .camera-grid-hand-frame em { font-size: clamp(.6rem,1vw,.85rem); }

/* Screen-space explanatory cues, synchronized with the camera recording. */
#assistance .assistance-box-outline { stroke: #ffffffd9; stroke-width: 6; }
#assistance .assistance-target-box { stroke: var(--cue-color); stroke-width: 3; }
#assistance .assistance-focus span { transform: translate(-50%,calc(-100% - 10px)); }
#assistance .assistance-mechanism { max-width: 850px; margin: 24px auto 0; line-height: 1.8; }
/* Preserve the current step announcement for screen readers without repeating
   the visible introduction beneath every chapter. */
#assistance .assistance-caption { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#assistance .assistance-focus { --cue-color: #f4a184; }
#assistance .assistance-focus[data-cue="point"] { --cue-color: #59bda5; }
#assistance .assistance-cue-outline { stroke: #ffffffeb; stroke-width: 8; }
#assistance .assistance-cue-arrow { stroke: var(--cue-color); stroke-width: 4; }
#assistance .assistance-cue-origin { fill: var(--cue-color); stroke: white; stroke-width: 2; }
#assistance .assistance-focus span { background: #fff2ec; color: #82422e; }
#assistance .assistance-focus[data-cue="point"] span { background: #e9f8f2; color: #226653; }

/* Compact the overview without changing its terms or branching structure. */
.spatial-preview #overview { padding-bottom: 24px; }
.spatial-preview #yielding { padding-top: 32px; }
.spatial-preview #overview .shared-stage { padding: 14px 12px; }
.spatial-preview #overview .pipe-kicker { margin-bottom: 6px; }
.spatial-preview #overview .pipe-icon { width: 40px; height: 40px; margin-bottom: 8px; }
.spatial-preview #overview .interaction-branches { gap: 12px; }
.spatial-preview #overview .interaction-branch { min-height: 92px; padding: 14px 12px; }

.spatial-preview .copy-bibtex-btn.copied .copy-text::after { content: none; }

/* Draw connections against the card edges in both horizontal and stacked layouts. */
.interaction-pipeline { position: relative; }
.pipeline-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pipeline-connections > path { fill: none; stroke: #b8c1d0; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.pipeline-connections marker path { fill: #b8c1d0; }
.interaction-pipeline.has-connections > .flow-arrow { visibility: hidden; }
.interaction-pipeline.has-connections .interaction-branches::before,
.interaction-pipeline.has-connections .interaction-branches::after,
.interaction-pipeline.has-connections .interaction-branch::before,
.interaction-pipeline.has-connections .interaction-branch::after { display: none; }
@media(max-width:768px) {
  .interaction-pipeline.has-connections { gap: 24px; }
  .interaction-pipeline.has-connections > .flow-arrow { display: none; }
  .interaction-pipeline.has-connections .interaction-branches { padding: 12px 0 0 24px; }
}

/* Browse cameras without repeatedly aiming at a small 3D marker. */
.spatial-camera > .spatial-camera-toolbar { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px 36px; gap: 4px; align-items: center; }
.spatial-camera-toolbar #spatial-camera-name { text-align: center; white-space: nowrap; }
.spatial-camera-toolbar #spatial-camera-prev,
.spatial-camera-toolbar #spatial-camera-next { font-size: 1.65rem; line-height: 1; }
@media(max-width:700px) {
  #spatial-camera-select { width: 176px; max-width: calc(100vw - 40px); min-height: 44px; padding: 10px 12px; font-size: .8rem; border-color: #b9d0ed80; }
  .spatial-scene:has(#spatial-camera-select:not([hidden])) .spatial-copy { top: 82px; }
  .spatial-camera > .spatial-camera-toolbar { grid-template-columns: 44px minmax(0,1fr) 44px 44px; padding: 7px 8px; }
  .spatial-camera-toolbar button { width: 44px; height: 44px; }
}

/* Consistent icon controls for synchronized video demonstrations. */
.spatial-preview .study-controls .playback-icon-button {
  display: inline-grid; place-items: center; flex: 0 0 40px;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  color: #475569; background: white;
}
.spatial-preview .study-controls .playback-icon-button svg { display: block; width: 19px; height: 19px; }
.spatial-preview .study-controls .playback-icon-button.is-primary { border-color: transparent; background: var(--primary-color); color: white; }
.spatial-preview .study-controls .playback-icon-button.is-primary:hover { background: var(--primary-hover); color: white; }
.spatial-preview .study-controls .playback-icon-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }
.spatial-preview .study-controls .playback-icon-button .playback-pause-icon { display: none; }
.spatial-preview .study-controls .playback-icon-button[data-playback-state="playing"] .playback-play-icon { display: none; }
.spatial-preview .study-controls .playback-icon-button[data-playback-state="playing"] .playback-pause-icon { display: block; }
@media(max-width:700px) {
  .spatial-preview .study-controls .playback-icon-button { width: 44px; height: 44px; flex-basis: 44px; }
}

/* Three-stage teaser: camera selection and orbit controls. */
#teaser-orbit { position:absolute; z-index:5; right:max(30px,calc((100% - 1360px)/2)); top:70px; border:1px solid #bdcde760; border-radius:20px; background:#172337dc; color:#e8eff8; padding:9px 14px; font:12px system-ui; cursor:pointer; }
#teaser-orbit[hidden], #teaser-camera-hint[hidden] { display:none; }
.spatial-actions { flex-direction:row; align-items:center; gap:12px; }
#teaser-camera-hint { max-width:140px; font-size:.72rem; line-height:1.4; color:#c2cddd; text-align:right; }
@media(max-width:700px) {
  .spatial-actions { top:20px; left:20px; right:20px; }
  #teaser-camera-hint { flex:1; max-width:140px; text-align:left; font-size:.68rem; }
  #teaser-orbit { top:70px; right:20px; }
  .spatial-copy, .spatial-scene:has(#spatial-camera-select:not([hidden])) .spatial-copy { top:118px; }
  .spatial-copy h2 { font-size:1.65rem; }
  .spatial-copy #spatial-description { font-size:.8rem; }
}

/* Carry the 3D scene headline into the camera grid. */
.spatial-grid-caption { position:absolute; z-index:4; top:0; left:0; width:100%; box-sizing:border-box; margin:0; padding:34px max(30px,calc((100% - 1360px)/2)) 64px; color:#fff; font-size:clamp(2rem,3.8vw,3.2rem); font-weight:500; letter-spacing:-.055em; line-height:1.08; background:linear-gradient(to bottom,rgba(12,20,38,.72),rgba(12,20,38,.32) 60%,transparent); text-shadow:0 2px 18px #12232daa; pointer-events:none; }
.spatial-grid-caption span { display:block; max-width:560px; }
.spatial-grid-caption[hidden] { display:none; }
@media(max-width:700px) {
  .spatial-steps button { font-size:.65rem; }
  .spatial-grid-caption { padding:20px 22px 36px; font-size:1.65rem; }
  .spatial-grid-caption span { max-width:320px; }
}

/* Explicit touch exploration keeps one-finger orbit separate from scrolling. */
#teaser-touch-controls { position:absolute; z-index:5; top:70px; left:20px; right:20px; display:flex; gap:8px; }
#teaser-touch-controls[hidden], #teaser-touch-grid[hidden] { display:none; }
#teaser-touch-controls button { min-height:40px; padding:8px 12px; border:1px solid #bdcde760; border-radius:20px; background:#172337e8; color:#e8eff8; font:12px system-ui; cursor:pointer; }
#teaser-explore[aria-pressed="true"] { border-color:#b1d9ee; }
#teaser-touch-grid { margin-left:auto; }
#teaser-touch-controls button:focus-visible { outline:2px solid #b1d9ee; outline-offset:3px; }