:root{--bg: #0b1026}html,body,#root{height:100%}body{margin:0;background:url(/static/bg1.jpg) center center / cover no-repeat fixed;font-family:Arial,sans-serif;overflow:hidden}.screen{display:grid;grid-template-columns:320px 1fr 320px;grid-template-rows:100%;height:100%;color:#d7e3ff;position:relative;z-index:1;pointer-events:none}.bg3d{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:auto;overscroll-behavior:contain}.side{display:grid;grid-template-rows:repeat(3,1fr);gap:12px;padding:12px;transition:width .24s ease,transform .24s ease;background:transparent;pointer-events:none}.side.collapsed{width:0;padding:0;overflow:hidden}.center{position:relative;pointer-events:none}.viewer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;touch-action:none}.center{overflow:hidden}.hud label{color:#d7e3ff;font-size:12px;display:flex;align-items:center;gap:6px}.hud input[type=range]{width:120px}.hud,.toggle{pointer-events:auto}.toggle{position:absolute;top:12px;width:20px;height:60px;background:#ffffff14;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer}.toggle.left{left:0;transform:translate(-50%)}.toggle.right{right:0;transform:translate(50%)}.arrow{border:solid #89b4ff;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:rotate(45deg)}.arrow.right{transform:rotate(-45deg)}