/* The zoom view: the panorama in a CSS 3D cube, the HUD and bars on a canvas over it, and a bar of controls under it. */
.cze-view{margin-block:var(--s2);background:#000;color:var(--muted);font:14px/24px Plex,Arial,sans-serif}
.cze-view__stage{position:relative;overflow:hidden;background:#000;touch-action:none;outline:none;cursor:grab}
.cze-view__stage:focus-visible{outline:1px solid var(--focus);outline-offset:4px}
.cze-view.is-demo .cze-view__stage{cursor:default}
.cze-view__notice{display:none;margin:0;padding:calc(var(--s2) - 1px);border:1px solid var(--border);color:var(--foreground)}
.cze-view.is-too-small .cze-view__stage,.cze-view.is-too-small .cze-view__bar{display:none}
.cze-view.is-too-small .cze-view__notice{display:block}
.cze-view.is-failed{box-shadow:0 0 0 1px var(--border);padding:var(--s2)}
.cze-view__world{position:absolute;inset:0;overflow:hidden}
.cze-view.is-settings .cze-view__world{inset:-12px;filter:blur(5px)}
.cze-view.is-settings .cze-view__keys{display:none}
.cze-view__cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.cze-view__cam img{position:absolute;left:-512px;top:-512px;width:1024px;height:1024px;max-width:none;backface-visibility:hidden;user-select:none}
.cze-view__hud{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.cze-view__keys{position:absolute;left:var(--s1);bottom:var(--s1);padding:2px var(--s1);background:#1e1e1e;color:#fff;border:1px solid #5a5a5a;border-bottom-width:3px;opacity:0;transition:opacity .2s;pointer-events:none}
.cze-view__keys.is-shown{opacity:1}
.cze-view__hint{position:absolute;left:var(--s1);top:var(--s1);padding:0 var(--s1);background:rgba(0,0,0,.6);color:var(--foreground);font-size:12px;line-height:24px;pointer-events:none;transition:opacity .2s}
.cze-view:not(.is-locked) .cze-view__stage:not(:hover):not(:focus-visible) .cze-view__hint{opacity:0}
.cze-view.is-locked .cze-view__stage{cursor:none}
.cze-view.is-locked .cze-view__hint:not(.is-shown){opacity:0}
.cze-view__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);padding:calc(var(--s1) - 1px) 0 var(--s1);border-top:1px solid var(--border)}
.cze-view__note{flex:1;min-width:12em}
.cze-view button{font:inherit;color:var(--foreground);background:none;border:1px solid var(--border);border-radius:0;padding:0 calc(var(--s1) - 1px);height:24px;cursor:pointer;touch-action:none}
.cze-view button:hover{border-color:var(--focus);color:#e0e0e0}
.cze-view button[aria-pressed=true]{background:#181818;border-color:var(--focus);color:var(--foreground)}
.cze-view:fullscreen{display:flex;flex-direction:column}

.cze-view:not(:has(canvas)):not(.is-failed){aspect-ratio:16/9}