@import "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Open+Sans:wght@300;400;700&display=swap";:root{--vh:1vh}@supports (padding:max(0px)){body,header,footer{padding-left:min(0vmin, env(safe-area-inset-left));padding-right:min(0vmin, env(safe-area-inset-right))}}input.text,input[type=text],input[type=button],input[type=submit],select,.input-checkbox{-webkit-appearance:none;border-radius:0}@media screen and (-webkit-device-pixel-ratio>=0){select,textarea,input{font-size:16px}}body,html{margin:0;font-family:Open Sans,sans-serif;overflow:hidden}#bg{background-color:#fff}#drawing-zone>canvas{position:absolute;top:0;left:0}#ui{display:flex}#sidebar{background-color:#000019cc;width:0}#drawing-zone{width:100vw;height:100vh;height:calc(var(--vh,1vh) * 100);touch-action:none;-webkit-user-select:none;user-select:none}.icon{fill:#ddd;width:24px;height:24px;margin:0 auto}.swatch{fill:#ddd;width:48px;height:48px;margin:0 auto}.selected .icon{fill:#444}#toolbar{margin:10px 10px 0;margin-left:max(env(safe-area-inset-left), 10px);cursor:default;-webkit-user-select:none;user-select:none;background-color:#000019cc;border-radius:5px;flex-flow:wrap;padding:10px;display:inline-flex;position:relative;top:0;left:0}#subtoolbar ul#drawModes{flex-direction:column;display:flex}#subtoolbar ul#drawModes ul{padding:0}#subtoolbar ul#drawModes ul+ul{border:none;padding:15px 0}#toolbar #home a{text-decoration:none;display:block}#toolbar ul{touch-action:none;flex-direction:row;margin:0;padding:0 15px 0 0;display:flex}#toolbar ul+ul{border-left:1px dotted #ccc;padding:0 15px}#toolbar ul li{text-align:center;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:6px;list-style:none;display:inline-flex;overflow:hidden}.tools li.selected{background-color:#aaa}#toolbar ul li.tool-spacer{border-left:1px dotted #ccc;border-radius:0;width:0;margin:0 15px;padding:6px 0}#subtoolbar{margin:5px 10px 0;margin-left:max(env(safe-area-inset-left), 10px);cursor:default;-webkit-user-select:none;user-select:none;background-color:#000019cc;border-radius:5px;flex-flow:wrap;padding:10px;display:inline-flex;position:relative}#subtoolbar ul{touch-action:none;margin:0;padding:0 15px}ul#drawModes ul{grid-template-rows:auto auto auto auto auto auto auto;grid-template-columns:auto auto;display:grid}#subtoolbar>ul+ul{border-left:1px dotted #ccc;padding:0 15px}ul#colors{grid-template-rows:auto auto auto auto auto auto auto;grid-template-columns:auto auto auto auto;display:grid}#subtoolbar ul li{text-align:center;border-radius:4px;justify-content:center;align-items:center;width:24px;height:24px;padding:6px;list-style:none;display:inline-flex;overflow:hidden}ul#colors li{width:32px;height:32px}#colors li.add-color{position:relative}#colors li.add-color .swatch{fill:none;stroke:#ddd;stroke-width:3px}#colors li.add-color input[type=color]{cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}#subtoolbar ul li.tool-spacer{border-left:1px dotted #ccc;border-radius:0;width:0;margin:0 15px;padding:6px 0}input[type=color]{opacity:0;width:24px;height:24px;display:block;top:-4px;left:-4px}#colors li{width:32px;height:32px}#status-box{visibility:hidden;background-color:#000019cc;border:2px solid #aaa;border-radius:5px;width:400px;height:200px;display:none;position:fixed;bottom:10px;right:10px}.tools li>.tooltip{visibility:hidden;color:#fff;text-align:center;z-index:1;opacity:0;background-color:#000;border-radius:6px;width:120px;padding:5px 0;transition:opacity 1s 1s;position:absolute;top:105%}@media (hover){.tools li:hover>.tooltip{visibility:visible;opacity:1}}#lower-drawer{align-items:flex-end;height:310px;transition:bottom .5s cubic-bezier(.19,1,.22,1);display:flex;position:fixed}#lower-drawer.open{bottom:0}#lower-drawer.closed{bottom:-280px}#token-box{color:#eee;touch-action:none;height:310px;margin-left:max(env(safe-area-inset-left), 10px);background-color:#000019cc;border-radius:5px 5px 0 0;flex-direction:column;min-width:360px;display:flex}#token-container{flex-grow:1;overflow:hidden}#token-box canvas{touch-action:none;margin:0;padding:0;position:relative}#token-box header{cursor:default;border-bottom:1px solid #fff3;justify-content:space-between;align-items:center;height:32px;display:flex}#token-box header h3{margin:0 10px;font-weight:400}#token-box ul{flex-direction:row;margin:0 5px;padding:0;display:flex}#token-box ul li{align-items:center;margin:0 10px;list-style:none;display:inline-flex}#token-box header .token-panel-toggle{color:#eee;cursor:pointer;touch-action:manipulation;background-color:#424287;border:1px solid #969696;border-radius:12px;margin:0 8px;padding:2px 10px;font-size:.8rem;display:none}#token-dialog{color:#eee;touch-action:none;background-color:#000019cc;border-radius:5px 5px 0 0;flex-direction:column;height:280px;margin-left:1em;display:flex}#token-dialog.closed,#token-dialog header{display:none}#token-dialog header h3{margin:0 10px;font-weight:400}#token-dialog form input,#token-dialog select{touch-action:none;color:#fff;background-color:#0000;border:1px solid #969696;border-radius:5px;margin:0 0 10px;padding:10px;display:block}#token-dialog label{font-size:.8rem;font-weight:700}#token-dialog form{touch-action:none;padding:10px 40px;overflow:hidden}#token-dialog form input,label{touch-action:none;display:block}#token-dialog form input[type=color]{opacity:1;background-color:#0000;border:1px solid #969696;border-radius:5px;width:42px;height:42px;padding:0;display:block}#token-dialog form input::placeholder{color:#999}#token-dialog input[type=submit]{background:#424287;margin-top:1em}#token-dialog .token-look{gap:16px;margin-bottom:10px;display:flex}#token-dialog .token-look input,#token-dialog .token-look select{margin:0}#token-dialog .token-look #stackPrefix{box-sizing:border-box;text-align:center;width:3.5em;height:42px}#token-dialog .token-look input[type=number]{box-sizing:border-box;width:5em;height:42px}#token-dialog .token-look select{height:42px;padding:0 10px}#token-dialog .token-dialog-modes{gap:4px;padding:10px 40px 0;display:flex}#token-dialog .token-dialog-modes button{color:#ccc;cursor:pointer;touch-action:manipulation;background-color:#0000;border:1px solid #969696;border-radius:5px;flex:1;padding:4px 10px}#token-dialog .token-dialog-modes button.selected{color:#fff;background-color:#424287}#token-dialog .token-dialog-forms{display:grid}#token-dialog .token-dialog-forms form{grid-area:1/1}#token-dialog .token-dialog-forms form.inactive{visibility:hidden}#token-dialog .token-dialog-hint{contain:inline-size;color:#bbb;margin:0;font-size:.75rem}@media (width<=819px){#lower-drawer{left:max(env(safe-area-inset-left), 10px);border-radius:5px 5px 0 0;overflow:hidden}#token-box{margin-left:0}#token-box header .token-panel-toggle{display:block}#token-container,#token-dialog{transition:transform .35s cubic-bezier(.19,1,.22,1),visibility 0s .35s}#token-dialog{box-sizing:border-box;touch-action:pan-y;visibility:hidden;background-color:#0000;border-radius:0;height:277px;margin:0;position:absolute;bottom:0;left:0;right:0;overflow-y:auto;transform:translate(100%)}#token-dialog form,#token-dialog form input,#token-dialog form label{touch-action:pan-y}#token-dialog form{padding:8px 16px}#token-dialog .token-dialog-modes{padding:8px 16px 0}#token-dialog .token-look{gap:10px}#lower-drawer.show-add #token-container{visibility:hidden;transform:translate(-100%)}#lower-drawer.show-add #token-dialog{visibility:visible;transform:translate(0)}#lower-drawer.show-add #token-dialog,#lower-drawer:not(.show-add) #token-container{transition-delay:0s}}#token-dialog .token-image-picker{align-items:center;gap:4px;height:42px;display:flex}#token-dialog .token-image-picker button,#token-dialog .token-image-picker .token-image-add{box-sizing:border-box;color:#fff;cursor:pointer;touch-action:manipulation;background-color:#0000;border:1px solid #969696;border-radius:5px;justify-content:center;align-items:center;height:42px;margin:0;padding:0;font-size:1.4rem;display:flex}#token-dialog .token-image-picker .token-image-preview{border:none;border-radius:50%;width:42px}#token-dialog .token-image-preview canvas{width:42px;height:42px;display:block}#token-dialog .token-image-picker .token-image-add{width:42px;margin-left:4px}#token-dialog .token-image-picker .token-image-preview:disabled{cursor:default}#token-dialog .token-image-add input[type=file],#token-image-modal .token-image-add input[type=file]{display:none}#token-image-modal{z-index:10;background-color:#0009;position:fixed;top:0;left:0}#token-image-modal .token-image-chooser{box-sizing:border-box;width:min(92vw,480px);max-height:min(80vh,560px);max-height:min(calc(var(--vh,1vh) * 80), 560px);color:#eee;background-color:#000019eb;border-radius:8px;flex-direction:column;display:flex;overflow:hidden}#token-image-modal header{border-bottom:1px solid #fff3;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;display:flex}#token-image-modal h3{margin:0;font-weight:400}#token-image-modal .token-image-close{color:#fff;cursor:pointer;touch-action:manipulation;background:0 0;border:none;width:40px;height:40px;padding:0;font-size:1.6rem;line-height:1}#token-image-modal .token-image-grid{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;min-height:0;padding:12px 16px 16px;display:grid;overflow-y:auto}#token-image-modal .token-image-option,#token-image-modal .token-image-add{box-sizing:border-box;aspect-ratio:1;color:#fff;cursor:pointer;touch-action:manipulation;background-color:#0000;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;margin:0;padding:4px;font-size:1.6rem;display:flex}#token-image-modal .token-image-option:hover{background-color:#ffffff1a}#token-image-modal .token-image-option.selected{background-color:#42428799;border-color:#8c8ce0}#token-image-modal .token-image-add{border:1px dashed #969696}#token-image-modal .token-image-option canvas{aspect-ratio:1;width:100%;max-width:56px;height:auto;display:block}#token-crop-modal{z-index:10;background-color:#0009;position:fixed;top:0;left:0}#token-crop-modal .token-crop{box-sizing:border-box;color:#eee;background-color:#000019eb;border-radius:8px;flex-direction:column;align-items:stretch;gap:12px;width:min(92vw,380px);max-height:100%;padding:16px;display:flex}#token-crop-modal h3{margin:0;font-weight:400}#token-crop-modal .token-crop-viewport{aspect-ratio:1;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none;background-color:#222;align-self:center;width:min(100%,100vh - 180px);position:relative;overflow:hidden}#token-crop-modal .token-crop-viewport img{pointer-events:none;-webkit-user-drag:none;max-width:none;position:absolute}#token-crop-modal .token-crop-mask{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}#token-crop-modal .token-crop-zoom{width:100%;min-height:32px;margin:0}#token-crop-modal .error{color:#ff8f8f}#token-crop-modal .token-crop-actions{justify-content:flex-end;gap:10px;display:flex}#token-crop-modal .button{color:#fff;cursor:pointer;background-color:#0000;border:1px solid #969696;border-radius:5px;min-height:44px;padding:0 18px;font-size:1rem}#token-crop-modal .button.primary{background-color:#424287}#token-crop-modal .button:disabled{opacity:.5;cursor:default}.dialog{cursor:default}.loading>div{visibility:hidden}.loading{background-image:url(/loading.png);background-position:50%;background-repeat:no-repeat;background-size:50%;background-attachment:fixed}.modal{display:none}.active.modal{background-color:#88888880;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute}.modal #drop-area{min-width:320px;max-width:90%}#dimensions{justify-content:space-evenly;align-items:center;display:flex}#side-drawer-dialog #gallery{margin-top:10px}#side-drawer-dialog #gallery img{vertical-align:middle;width:150px;margin-bottom:10px;margin-right:10px}#side-drawer-dialog .button{cursor:pointer;color:#323246;background:#ccc;border:1px solid #ccc;border-radius:5px;padding:10px;display:inline-block}#side-drawer-dialog .button:hover{background:#ddd}#side-drawer-dialog #fileElem,#lower-drawer.dm,#toolbar .dm{display:none}#side-drawer-dialog{color:#eee;height:100%;height:calc(var(--vh,1vh) * 100);background-color:#000019cc;border-radius:0 0 0 5px;flex-direction:column;max-width:400px;transition:transform .5s cubic-bezier(.19,1,.22,1);display:flex;position:fixed;bottom:0;right:0}.side-drawer-control{cursor:default;background-color:#000019cc;border-radius:5px 0 0 5px;width:24px;height:24px;padding:4px;position:absolute;left:-32px}#side-drawer-dialog .side-drawer-content{overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;min-height:0;padding-bottom:env(safe-area-inset-bottom,0px);flex:auto;overflow-y:auto}#side-drawer-dialog.open{transform:none}#side-drawer-dialog.closed{transform:translate(100%)}#side-drawer-dialog header{cursor:default;border-bottom:1px solid #fff3;justify-content:space-between;align-items:center;height:32px;display:flex}#side-drawer-dialog header h3{margin:0 10px;font-weight:400}#side-drawer-dialog form input,#side-drawer-dialog select{color:#fff;background-color:#0000;border:1px solid #969696;border-radius:5px;margin:0 0 10px;padding:10px;display:block}#side-drawer-dialog label{font-size:.8rem;font-weight:700}#side-drawer-dialog form{padding:10px 40px;overflow:hidden}#side-drawer-dialog form input,label{display:block}#side-drawer-dialog form input[type=color]{opacity:1;background-color:#0000;border:1px solid #969696;border-radius:5px;width:42px;height:42px;padding:0;display:block}#side-drawer-dialog form input::placeholder{color:#999}#side-drawer-dialog input[type=submit]{background:#424287;margin-top:1em}#side-drawer-dialog button{color:#fff;background:#424287;border:1px solid #969696;border-radius:5px;margin:0 0 10px;padding:10px;font-size:16px;display:block}#side-drawer-dialog input[type=button]:disabled,#side-drawer-dialog input[type=submit]:disabled,#side-drawer-dialog button:disabled{opacity:.4;cursor:not-allowed;background:#2a2a5a}#side-drawer-dialog form input.narrow{width:5em;display:inline-block}#side-drawer-dialog form label.narrow{margin:0 1em;display:inline-block}#side-drawer-dialog form fieldset{border:none;margin:0;padding:0}#side-drawer-dialog div input.narrow{width:5em;display:inline-block}#side-drawer-dialog div label.narrow{margin:0 1em;display:inline-block}#side-drawer-dialog div fieldset{border:none;margin:0;padding:0}.directions{color:#575757;background-color:#eeeeeee0;border:10px dashed #6a6a6a;border-radius:20px;padding:5em;font-size:21px;font-weight:bolder}.upload{color:#fff;background-color:#464c5d;border-radius:5px;padding:2em;box-shadow:5px 5px 15px #000}@keyframes slide{0%{background-position:0 0}to{background-position:50px 50px}}.bar{background-image:linear-gradient(-45deg,#fff3 25%,#0000 25% 50%,#fff3 50% 75%,#0000 75%,#0000);background-size:50px 50px;animation:1s linear infinite slide}#deselector{width:100vw;height:100vh;position:absolute;top:0;left:0}#side-drawer-dialog form input#deleteImage{background:#999;margin:0 0 0 auto}#side-drawer-dialog h4{color:#fff;text-align:center;background-color:#424287;border-bottom:1px solid #fff3;border-radius:5px 5px 0 0;margin:0;padding:.125em 1em;font-size:1em;font-weight:700}.panel-section>form,.panel-section>div{padding:10px 40px}.token-tooltip{z-index:5;color:#eee;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;background-color:#000019d9;border-radius:4px;max-width:240px;padding:4px 8px;font-size:.85rem;position:fixed;overflow:hidden;transform:translate(-10px,-8px)}