.SidePanel{position:absolute;z-index:1;display:block;display:flex;background:#fff;border-radius:6px;flex-direction:column;gap:3px;width:320px;max-height:calc(100% - 24px);padding:12px;transition:all .2s ease-in-out;bottom:12px;right:12px;box-shadow:1px 2px 50px #0003}.SidePanel.hidden{opacity:.6;gap:0}.SidePanel.hidden:hover{opacity:1}.SidePanelContent{min-height:200px;max-height:100vh;transition:all .2s ease-in-out}.SidePanel.hidden .SidePanelContent{overflow:hidden;min-height:0;max-height:0}.SidePanelHeader{display:flex;justify-content:space-between;align-items: center}.SidePanelHeader h1{font-size:1.2em}.Icon{box-sizing:content-box;vertical-align:middle;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 40;position:relative;overflow:hidden;background:0 0;border:none;border-radius:6px;max-width:1em;padding:6px}.Icon[data-shortcut]:hover:after{position:absolute;content:attr(data-shortcut);color:gray;background:#ffffff80;border-radius:6px;padding:3px 6px;font-family:sans-serif;font-size:11px;bottom:0;right:0}.Icon:hover{background:var(--secondary-bg-hover)}.Icon[data-action=destroy]:hover{color:#b71c1c}.Icon.active{background:var(--secondary-bg-active);color:var(--secondary-fg-active);font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 40}.DrawModalRoot{display:flex;flex-direction:column;gap:6px}.DrawModalHeader{display:flex;align-items: center;gap:6px}.ColorDisplay{display:block;position:relative;flex-shrink:0;width:38px;height:38px;padding:6px}.ColorList{display:flex;flex-flow:wrap;gap:5px}.Color{display:block;position:relative;border-radius:6px;flex-shrink:0;width:32px;height:32px}.ColorPrimary,.ColorSecondary{position:absolute;top:0;left:0}.ColorSecondary{margin:6px}.NpcList{display:flex;flex-direction:column;gap:1px}.NpcCell{display:flex;background:0 0;border-radius:6px;flex-direction:row;flex:1;align-items: center;gap:6px;width:100%;height:40px;padding:3px;transition:all .2s linear}.NpcCell:hover{background:#e3f2fd}.NpcCell.active{background:#bbdefb}.NpcCell input{outline:none;background:0 0;border:none;flex:1;width:100%;padding:8px 0}.NpcCellSeparator{background:#eee;width:1px;height:1.5em}.NpcCellDelete{opacity:0;pointer-events:none;transition:all .2s linear;transform:scale(0)}.NpcCell:hover .NpcCellDelete{opacity:1;pointer-events:all;transform:scale(1)}.ColorPicker{display:block;position:relative;border-radius:6px;flex-shrink:0;width:32px;height:32px}.ColorPicker.active .ColorPickerToolTip{opacity:1;pointer-events:all;margin-top:3px}.ColorPickerToolTip{opacity:0;pointer-events:none;position:absolute;display:flex;z-index:2;background:#fff;border-radius:6px;flex-wrap:wrap;gap:3px;width:186px;height:-moz-fit-content;height:fit-content;margin-top:0;margin-left:-6px;padding:6px;transition:all .2s linear;bottom:100%;box-shadow:0 0 0 1px #eee,1px 2px 5px #0003}.ColorPickerToolTip:after,.ColorPickerToolTip:before{content:"";display:block;position:absolute;border:1em solid #0000;border-top-color:#eee;font-size:8px;bottom:-2em;left:14px}.ColorPickerToolTip:after{border-top-color:#fff;bottom:calc(1.5px - 2em)}.InfiniteCanvas-container{overflow:hidden;touch-action:none;position:relative;background:#fff;width:100%;height:100vh}.InfiniteCanvas-container canvas{display:block;cursor:grab;z-index:0;width:100%;height:100%}.InfiniteCanvas-controls{position:absolute;z-index:1;display:flex;background:var(--main-bg);border-radius:6px;flex-flow:row;justify-content:center;align-items: center;gap:.25rem;width:-moz-fit-content;width:fit-content;margin:auto;padding:.25rem;top:12px;left:0;right:0;box-shadow:0 0 .931014px #0000002b,0 0 3.12708px #00000014,0 7px 14px #0000000d}:root,body{margin:0}:root{--main-bg:white;--secondary-bg:#eee;--secondary-bg-hover:#ebf4fb;--secondary-bg-active:#e3f2fd;--secondary-fg-active:#0d47a1;font-family:Courier New,Courier,monospace}*{box-sizing:border-box;margin:0;padding:0}