/* Scene fills the phone width; tall images scroll vertically, never shrink
   to fit height or stretch. Desktop phone simulation remains 390px wide. */
#app.panorama-surround{position:relative;width:min(100%,390px);height:min(100dvh,844px);min-height:0;margin:0 auto;padding:0;display:block;background:#eeeae2 url('https://yizhuangbiao.com/device-tests/release-85/framing/assets/wall/owner-20260904/plaster-portrait.png') center/cover no-repeat;overflow:hidden}
/* A landscape scene is an inset photograph inside the phone, so pin its own
   source-sized page to the phone centre. Flex auto-margins were interpreted
   as a bottom alignment by iOS/WeChat after the dynamic viewport changed. */
#app.panorama-surround .framing-entry-page[data-wide-presentation="true"]{position:absolute;left:50%;top:50%;width:100%;flex-shrink:0;height:auto!important;min-height:0;aspect-ratio:var(--scene-source-aspect,3/2);margin:0;transform:translate(-50%,-50%);overflow:visible;box-shadow:none;background:transparent;--entry-safe-top:0px;--entry-dock-reserve:0px}
.framing-entry-page[data-wide-presentation="true"] .framing-entry-head{top:calc(10px - var(--panorama-scene-top,278.664px))!important;color:#332f29}
.framing-entry-page[data-wide-presentation="true"] .framing-global-actions{top:calc(44px - var(--panorama-scene-top,278.664px))!important;left:calc(12px - var(--panorama-scene-left,10px));right:calc(12px - var(--panorama-scene-left,10px))}
.framing-entry-page[data-wide-presentation="true"] .framing-entry-dock{bottom:calc(10px + env(safe-area-inset-bottom) - var(--panorama-scene-bottom,318.672px))!important;left:calc(14px - var(--panorama-scene-left,10px));right:calc(14px - var(--panorama-scene-left,10px));overflow:visible}
.framing-entry-page[data-wide-presentation="true"] .framing-entry-status{display:none}
.framing-entry-page[data-wide-presentation="true"] .background-gesture-zone.lower{max-height:45%}
.framing-entry-page[data-wide-presentation="true"] .dock-editable small{display:none}
.panorama-magnifier button{font:inherit;min-height:40px;padding:8px 12px;border:1px solid #ffffffa0;border-radius:24px;color:inherit;background:#ffffff38;backdrop-filter:blur(20px);cursor:pointer}
.framing-entry-page[data-wide-dark="true"] .framing-entry-head{color:#f5f1e8}
.panorama-magnifier{box-sizing:border-box;inset:0;margin:0;width:100vw;max-width:none;height:100svh;max-height:none;border:0;border-radius:0;padding:0;background:#393733;color:#faf8f2;overflow:hidden}
.panorama-magnifier::backdrop{background:#171612c9;backdrop-filter:blur(10px)}
.panorama-magnifier[open]{display:flex;flex-direction:column;gap:12px}.panorama-magnifier header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.panorama-magnifier header strong{margin-right:auto}.panorama-magnifier label{display:flex;align-items:center;gap:8px;font:12px system-ui}.panorama-magnifier input{width:100px}.panorama-magnifier p{margin:0;font:12px system-ui;color:#ccc8bf}
.panorama-magnifier header{padding:10px 12px}.panorama-magnifier>p{padding:0 12px 8px}
.panorama-pan{flex:1;min-height:0;width:100%;overflow:auto;scrollbar-width:none;touch-action:none;cursor:grab;background:#242320}.panorama-pan::-webkit-scrollbar{display:none}.panorama-pan:active{cursor:grabbing}.panorama-pan img{display:block;height:auto;max-width:none;margin:0;user-select:none}
@media(max-width:430px){#app.panorama-surround{width:100%;height:100dvh;min-height:0}.panorama-magnifier header strong{font-size:13px}.panorama-magnifier header{gap:6px}}
/* tablet185: use the iPad viewport without stretching the source-sized scene. */
@media(min-width:600px) and (min-height:600px){
 .framing-entry-page{width:min(100vw,960px)}
 #app.panorama-surround{width:min(100vw,960px);height:100dvh;max-height:none}
}
@media(prefers-reduced-motion:reduce){.panorama-surround *{scroll-behavior:auto}}