.ViewerApp{display:flex;width:100vw;height:100vh;overflow:hidden;flex-direction:column;background:#000;color:#999;font-family:Helvetica Neue,sans-serif}.ViewerApp .top-nav{height:40px;font-size:20px;line-height:40px;text-align:center;border-bottom:#999 solid 1px}.ViewerApp .main-area{display:flex;position:relative;overflow:hidden;flex-grow:1}.ViewerApp .canvas-area{display:flex;position:relative;flex-grow:1;justify-content:center;align-items:center;overflow:hidden}.ViewerApp .canvas-area canvas{width:100%;image-rendering:pixelated}.ViewerApp .canvas-area canvas.height-bound{width:auto;height:100%}.ViewerApp .canvas-area canvas.pan-mode{width:auto;height:100%}.ViewerApp .canvas-area canvas.pan-mode.height-bound{width:100%;height:auto}.ViewerUi{position:absolute;left:0;top:0;width:100vw;height:100vh;z-index:100;pointer-events:none}.ViewerUi .name{position:absolute;left:0;top:0;width:100vw;padding:10px;text-align:center;font-size:30px;color:#fff;background:#00000040}.ViewerUi .button{font-size:20px;color:#fff;background:#888;border-radius:10px;padding:10px;pointer-events:initial;cursor:pointer}.ViewerUi .settings-button{position:absolute;right:20px;top:80px}.ViewerSettings{display:flex;position:absolute;flex-direction:column;gap:20px;background:#444;left:0;top:0;width:100vw;height:100vh;z-index:200;font-size:15px;color:#fff}.ViewerSettings .title{text-align:center;font-size:30px;margin:20px;color:#fff}.ViewerSettings .controls{padding:20px}.ViewerSettings .button{font-size:20px;color:#fff;background:#888;border-radius:10px;padding:10px;pointer-events:initial;cursor:pointer}.ViewerSettings .spacer{flex-grow:1}.ViewerSettings .close-button{margin:40px;width:150px;align-self:center;text-align:center}