html,body{color:#f2f2f2;background:#87a5c8;width:100%;height:100%;margin:0;font:13px/1.4 ui-monospace,DejaVu Sans Mono,monospace;overflow:hidden}#view{outline:none;width:100vw;height:100vh;display:block}.panel{background:#0a0e14c7;border-radius:6px;padding:8px 10px;position:fixed}.overlay{white-space:pre;pointer-events:none;top:8px;left:8px}.controls{width:300px;max-height:calc(100vh - 32px);top:8px;right:8px;overflow-y:auto}.controls label{justify-content:space-between;gap:8px;margin:3px 0;display:flex}.controls select,.controls input[type=number]{width:120px;color:inherit;background:#1d2430;border:1px solid #3a4558}.controls h3{color:#9fc1ff;margin:8px 0 4px;font-size:13px}button{color:#fff;cursor:pointer;font:inherit;background:#2d5bd1;border:0;border-radius:4px;margin:4px 4px 0 0;padding:4px 10px}.result{white-space:pre;max-width:90vw;max-height:80vh;top:50%;left:50%;overflow:auto;transform:translate(-50%,-50%)}.keys{color:#aab4c4;white-space:pre}