*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;touch-action:none;background:#101329}
#space,#sky{position:fixed;left:50%;top:50%;width:var(--scene-width,100vw);height:var(--scene-height,100vh);transform:translate(-50%,-50%);image-rendering:pixelated}
#space{z-index:0;pointer-events:none}
#sky{z-index:3}
body>.camera-preview{z-index:1;overflow:hidden;background:#151b34}
body:not(.corner-camera)>.camera-preview{top:50%;left:50%;right:auto;bottom:auto;width:var(--scene-width);height:var(--scene-height);transform:translate(-50%,-50%);border:0}
body:not(.corner-camera)>.camera-preview video{height:100%}
body.corner-camera>.camera-preview{width:clamp(92px,19vw,245px);border:2px solid #9c95b2;box-shadow:3px 3px #17172e}
.camera-preview video{filter:brightness(.83) saturate(.85)}
.camera-preview canvas{opacity:.27}
.pixel-guide{z-index:4}
.camera-layout{display:flex;gap:4px;margin-top:42px;justify-content:end}
.camera-layout[hidden]{display:none}
.camera-panel .camera-layout button{font:14px/1 ResultPixel,monospace;color:#ffebc4;background:#242948;border:2px solid #676c92;padding:5px 7px}
.camera-panel .camera-layout button[aria-pressed=true]{border-color:#ffeac3}
body:not(.corner-camera)>.camera-preview.pixel-camera canvas.camera-pixels{filter:brightness(.42) saturate(.85)}