/* Keep the 3D comparison inside the existing fixed-size modality canvas. */
.reconstruction-pair{position:relative;align-items:stretch}
.reconstruction-frame{position:relative;min-height:0;min-width:0;border:1px solid #d5dfd6;border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#f5f7f3,#dfe7de)}
.reconstruction-macaq{border-color:#b4ccbb}
.reconstruction-frame model-viewer{display:block;width:100%;height:100%;min-height:0;--progress-bar-color:#609780;--progress-bar-height:2px;--poster-color:transparent;outline:none}
.reconstruction-film video{display:block;width:100%;height:100%;min-height:0;object-fit:cover;pointer-events:none;user-select:none}
.reconstruction-frame:focus-within{outline:2px solid #609780;outline-offset:2px}
.reconstruction-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#edf2ed;color:#7c9582;font:400 10px var(--display);pointer-events:none;transition:opacity .25s}
.reconstruction-loading:before{content:'';width:9px;height:9px;border:1px solid #c1d4c5;border-top-color:#508167;border-radius:50%;animation:reconstruction-loading 1s linear infinite}
.reconstruction-frame.is-loaded .reconstruction-loading{opacity:0;visibility:hidden}
.reconstruction-frame.has-error .reconstruction-loading:before{display:none}
.reconstruction-tools{position:absolute;z-index:2;bottom:8px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:5px 7px 5px 11px;max-width:calc(100% - 16px);border:1px solid #d0ddd2;border-radius:20px;background:#fbfdf8e8;backdrop-filter:blur(8px);box-shadow:0 2px 7px #183e2510;color:#788e7c;font:400 10px var(--display);white-space:nowrap}
.reconstruction-tools button{display:inline-flex;align-items:center;gap:5px;padding:3px 7px;background:#e9f0e7;color:#416a50;border-radius:12px;font:500 10px var(--display);transition:background .2s}
.reconstruction-tools button:hover{background:#dae8d8}.reconstruction-tools button svg{width:12px;height:12px}
.reconstruction-tools [data-reconstruction-zoom]{justify-content:center;min-width:27px;min-height:27px;font-size:18px;padding:0 5px}
.reconstruction-tools button:focus-visible{outline:2px solid #609780;outline-offset:2px}
@media(max-width:600px){.reconstruction-tools>span{display:none}.reconstruction-tools [data-reconstruction-zoom]{min-width:28px;min-height:28px;font-size:18px}}
.reconstruction-caption{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.reconstruction-input{display:flex;align-items:center;gap:9px;min-width:0}
.reconstruction-input>img{width:42px;height:30px;object-fit:cover;border-radius:4px;flex-shrink:0}
.reconstruction-input .preview-prompt{flex:1;min-width:0}
.reconstruction-source{font:400 9px/1.5 var(--display);color:#8b9c87;text-align:right;max-width:75px;text-decoration:underline;text-decoration-color:#c3d1bd;text-underline-offset:3px}
.reconstruction-source:hover{color:#386b4b}
.examples-workspace .reconstruction-input>img{width:58px;height:34px}
.examples-workspace .reconstruction-caption{grid-template-columns:minmax(0,1fr)}
.examples-workspace .reconstruction-tools{bottom:10px;font-size:11px;padding:6px 7px 6px 13px;gap:15px}
.examples-workspace .reconstruction-tools button{font-size:11px;padding:4px 9px}
.examples-workspace .reconstruction-source{max-width:none;font-size:10px}
.examples-workspace .reconstruction-pair figure{height:100%}
@keyframes reconstruction-loading{to{transform:rotate(360deg)}}
@media(max-width:1100px) and (min-width:901px){.universal-showcase:not(.examples-workspace) .reconstruction-caption{grid-template-columns:1fr}.universal-showcase:not(.examples-workspace) .reconstruction-source{display:none}}
@media(max-width:600px){.reconstruction-caption{gap:6px;grid-template-columns:1fr}.reconstruction-input>img,.examples-workspace .reconstruction-input>img{width:35px;height:27px}.reconstruction-source{display:none}.reconstruction-tools,.examples-workspace .reconstruction-tools{gap:7px;padding:4px 5px 4px 8px;font-size:9px;bottom:7px}.reconstruction-tools button,.examples-workspace .reconstruction-tools button{font-size:9px;padding:3px 6px}.reconstruction-tools button svg{width:11px;height:11px}}
@media(prefers-reduced-motion:reduce){.reconstruction-loading{transition:none}.reconstruction-loading:before{animation:none}}

/* Camera controls occupy their own column beside both views. */
.examples-workspace .preview-media-pair.reconstruction-pair{grid-template-columns:repeat(2,minmax(0,1fr)) calc(94 * var(--ui,1px));gap:calc(10 * var(--ui,1px))}
.examples-workspace .reconstruction-tools{position:static;inset:auto;transform:none;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:none;gap:calc(6 * var(--ui,1px));padding:calc(6 * var(--ui,1px));border-radius:calc(9 * var(--ui,1px));white-space:normal;box-shadow:none;backdrop-filter:none}
.examples-workspace .reconstruction-tools>span{grid-column:1 / -1;font-size:calc(10 * var(--ui,1px));line-height:1.4;text-align:center}
.examples-workspace .reconstruction-tools button{justify-content:center;min-width:0;min-height:calc(28 * var(--ui,1px));padding:calc(3 * var(--ui,1px)) calc(4 * var(--ui,1px));gap:calc(4 * var(--ui,1px))}
.examples-workspace .reconstruction-tools [data-reconstruction-zoom]{font-size:calc(18 * var(--ui,1px))}
.examples-workspace .reconstruction-tools [data-reconstruction-reset]{grid-column:1 / -1}
.examples-workspace .reconstruction-tools svg{flex-shrink:0}
@media(max-width:600px){
  .examples-workspace .preview-media-pair.reconstruction-pair{grid-template-columns:repeat(2,minmax(0,1fr)) 36px;gap:6px}
  .examples-workspace .reconstruction-tools{display:flex;flex-direction:column;padding:3px;gap:4px}
  .examples-workspace .reconstruction-tools>span,.examples-workspace .reconstruction-tools [data-reconstruction-reset]>span{display:none}
  .examples-workspace .reconstruction-tools button{width:28px;height:28px;padding:0}
}