.viewer-shell{display:flex;height:clamp(520px,76dvh,1100px);container-type:inline-size}
.viewer-stage{position:relative;flex:0 0 100%;min-width:0;height:100%;overflow:hidden;transition:flex-basis .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1)}
.viewer-shell.hotspot-open .viewer-stage{flex-basis:calc(100% - clamp(420px,34%,720px))}
.viewer-stage>canvas{position:absolute;inset:0;max-width:none}
.viewer-shell .hotspot-panel{position:absolute;inset:0 0 0 auto;width:clamp(420px,34%,720px);flex-shrink:0;display:flex;flex-direction:column;min-height:0;max-height:100%;padding:0;border-radius:0;background:#fbf8f1;color:#211b15;border-left:1px solid #d9cfbd;box-shadow:-12px 0 40px #0001;z-index:11;overflow:hidden;touch-action:pan-y}
.hotspot-panel button,.artifact-reader button,.viewer-face-launcher button{font:inherit;cursor:pointer;min-width:44px;min-height:44px;border:1px solid #d9cfbd;border-radius:10px;background:#fff;color:#32261c;padding:8px 12px}
.hotspot-panel button:focus-visible,.artifact-reader button:focus-visible,.viewer-face-launcher button:focus-visible{outline:3px solid #b18334;outline-offset:2px}
.inspector-head,.reader-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;border-bottom:1px solid #e5dccd;flex-shrink:0}
.inspector-head small,.reader-head small{font:650 10px/1.4 system-ui;letter-spacing:.17em;color:#84662f}
.inspector-head h3{font:700 clamp(22px,2vw,30px)/1.2 Georgia,serif;margin:5px 0 0}
.inspector-head>button,.reader-head>button{font-size:27px;line-height:1;padding:5px}
.inspector-faces,.reader-faces,.viewer-face-launcher{display:flex;gap:8px;flex-wrap:wrap}
.inspector-faces{padding:14px 24px}
.inspector-faces button,.reader-faces button,.viewer-face-launcher button{font-weight:750}
.inspector-faces button[aria-pressed=true],.reader-faces button[aria-pressed=true],.viewer-face-launcher button[aria-pressed=true]{background:#7a1f2b;color:white;border-color:#7a1f2b;box-shadow:0 2px 8px #7a1f2b22}
.inspector-tabs,.reader-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 24px 12px}
.inspector-tabs button,.reader-tabs button{font-size:13px;background:transparent;border-color:transparent;min-height:40px}
.inspector-tabs button[aria-pressed=true],.reader-tabs button[aria-pressed=true]{background:#eae1d1;color:#533d1e}
.inspector-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 24px 20px;flex:1}
.inspector-description{margin:2px 0 16px;color:#746757;white-space:pre-line}
.hotspot-panel .inspector-preview{display:block;width:100%;padding:0;overflow:hidden;border-radius:10px;background:#eee7db}
.inspector-preview img{display:block;width:100%;height:auto;border-radius:0!important}
.inspector-preview span{display:block;padding:12px;font-size:13px;font-weight:600}
.inspector-preview.image-failed img{display:none}
.inspector-text,.reader-text{white-space:pre-wrap;font:18px/1.8 system-ui;overflow-wrap:break-word}
.inspector-body audio{width:100%;margin:16px 0}
.inspector-link{margin-top:14px}
.inspector-footer{padding:14px 24px;border-top:1px solid #e5dccd;background:#fbf8f1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex-shrink:0}
.hotspot-panel .inspector-read{background:#7a1f2b;border-color:#7a1f2b;color:#fff;font-weight:650;flex:1}
.inspector-paging,.reader-pages{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}
.hotspot-panel .inspector-expand{display:none}
.viewer-face-launcher{position:absolute;left:18px;top:18px;z-index:5;max-width:calc(100% - 36px)}
.viewer-face-launcher button{background:#f9f5ebde;backdrop-filter:blur(10px);border:1px solid #fff8;padding:6px 12px}
.artifact-reader{position:fixed;inset:0;box-sizing:border-box;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;background:#f8f4ec;color:#211b15;overflow:hidden;z-index:10030;touch-action:auto}
.artifact-reader[open]{display:flex;flex-direction:column}
.artifact-reader::backdrop{background:#14100ee8}
body.artifact-reading{overflow:hidden;overscroll-behavior:none}
.reader-head{padding:12px max(20px,env(safe-area-inset-right)) 12px max(20px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top))}
.reader-head h2{font:700 clamp(20px,2vw,30px)/1.2 Georgia,serif;margin:4px 0 0}
.reader-navigation{display:flex;justify-content:space-between;gap:12px;padding:10px 20px;border-bottom:1px solid #e5dccd;flex-shrink:0}
.reader-tabs{padding:0}
.reader-workspace{display:flex;flex:1;min-height:0;overflow:hidden}
.reader-image-area{flex:1;min-width:0;position:relative;background:#292622}
.reader-image-viewport{height:100%;width:100%;overflow:hidden;position:relative;touch-action:none;cursor:grab;user-select:none}
.reader-image-viewport:active{cursor:grabbing}
.reader-image-viewport>img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center;pointer-events:none;will-change:transform}
.reader-load{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;color:#fff}
.reader-text{flex:1;min-width:0;overflow:auto;padding:clamp(24px,4vw,72px);margin:0;font-size:clamp(18px,1.3vw,24px)}
.reader-compare .reader-text{flex:0 0 42%;border-left:1px solid #ddd2c0}
.reader-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:10px 20px max(10px,env(safe-area-inset-bottom));border-top:1px solid #ded4c4;flex-shrink:0}
.reader-zoom{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.reader-zoom output{font:650 13px system-ui;min-width:50px;text-align:center}
.artifact-reader [hidden],.hotspot-panel [hidden]{display:none!important}
.artifact-reader button:disabled,.hotspot-panel button:disabled{opacity:.35;cursor:default}
.viewer-shell.reader-open .viewer-toolbar{visibility:hidden}
@container(max-width:1100px){
 .viewer-shell.hotspot-open .viewer-stage{flex-basis:calc(100% - max(42%,350px))}
 .viewer-shell .hotspot-panel{width:42%;min-width:350px}
 .inspector-head,.inspector-footer{padding:14px 18px}
 .inspector-body{padding:0 18px 16px}
 .inspector-faces{padding:12px 18px}
}
@container(max-width:800px){
 .viewer-shell.hotspot-open .viewer-stage{height:52%;flex-basis:100%}
 .viewer-shell .hotspot-panel{position:absolute;left:8px;right:8px;top:auto!important;bottom:8px;width:auto;min-width:0;height:48%;max-height:calc(100% - 16px);border:1px solid #d9cfbd;border-radius:18px;box-shadow:0 -8px 32px #0003}
 .viewer-shell .hotspot-panel.is-expanded{height:calc(100% - 16px)}
 .hotspot-panel .inspector-expand{display:block;font-size:12px}
 .inspector-head{padding:10px 14px}
 .inspector-head{touch-action:none}
 .inspector-head small{display:none}
 .inspector-head h3{font-size:21px;margin:0}
 .inspector-faces{padding:6px 14px;gap:6px}
 .inspector-footer{padding:8px 12px;gap:6px}
 .inspector-paging{display:none}
 .viewer-face-launcher{left:10px;top:10px;gap:6px}
 .viewer-shell.hotspot-open .viewer-toolbar,.viewer-shell.hotspot-open .viewer-controls-toggle{visibility:hidden}
}
@media(max-width:800px){
 .viewer-shell{height:72svh;min-height:440px}
 .artifact-reader .reader-head{padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top))}
 .reader-head small{display:none}
 .reader-navigation{padding:8px 12px;flex-wrap:wrap;gap:6px}
 .reader-faces{gap:6px}
 .reader-tabs button{font-size:12px;padding:4px 8px}
 .reader-footer{gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
 .reader-zoom{gap:4px;flex:1}
 .reader-zoom button{font-size:12px;padding:6px 8px}
 .reader-zoom output{min-width:36px}
 .reader-pages{gap:4px}
 .reader-pages span{display:none}
 .reader-compare .reader-workspace{flex-direction:column}
 .reader-compare .reader-text{flex:0 0 45%;border-left:0;border-top:1px solid #ddd2c0;padding:20px}
}
@media(orientation:portrait) and (min-width:801px) and (max-width:1100px){
 .viewer-shell.hotspot-open .viewer-stage{height:45%;flex-basis:100%}
 .viewer-shell .hotspot-panel{position:absolute;left:12px;right:12px;top:auto!important;bottom:12px;width:auto;min-width:0;height:55%;max-height:calc(100% - 24px);border:1px solid #d9cfbd;border-radius:18px}
 .viewer-shell .hotspot-panel.is-expanded{height:calc(100% - 24px)}
 .hotspot-panel .inspector-expand{display:block}
 .inspector-head{touch-action:none}
 .viewer-shell.hotspot-open .viewer-toolbar,.viewer-shell.hotspot-open .viewer-controls-toggle{visibility:hidden}
}
@media(orientation:landscape) and (max-height:600px){
 .viewer-shell.hotspot-open .viewer-stage{height:100%;flex-basis:calc(100% - max(46%,290px))}
 .viewer-shell .hotspot-panel{position:absolute;inset:0 0 0 auto!important;height:100%;max-height:100%;width:46%;min-width:290px;border-radius:0}
 .viewer-shell .hotspot-panel.is-expanded{height:100%}
 .hotspot-panel .inspector-expand{display:none}
 .reader-head{padding-top:6px;padding-bottom:6px}
 .reader-navigation{padding:4px 12px}
 .reader-footer{padding-top:4px;padding-bottom:4px}
 .reader-compare .reader-workspace{flex-direction:row}
}
@media(prefers-reduced-motion:reduce){.viewer-stage,.hotspot-panel *,.artifact-reader *{scroll-behavior:auto!important;transition:none!important}}