*{margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;text-decoration:inherit;overflow:hidden;box-sizing:border-box;box-shadow:none;outline:none;border:none;border-radius:0;background-color:transparent}@keyframes msgFade{0%,to{height:0px;margin-top:0}2%,98%{height:42px;margin-top:12px}}body{font-family:Arial,Helvetica,sans-serif;color:#222;cursor:default;>menu{display:flex;width:100%;height:100vh;justify-content:center;align-items:center;align-content:center;flex-direction:column;gap:24px;body.editor>&{display:none}>heading{font-size:128px;font-weight:700;color:#808}>buttons{display:flex;gap:18px;overflow:visible;>button{display:inline-flex;justify-content:center;align-items:center;width:120px;height:57px;border-radius:16px;box-shadow:0 0 8px #0003;color:purple;font-weight:700;cursor:pointer;user-select:none}}}>creator{display:none;width:100%;height:100vh;body.editor>&{display:flex}>zoombtns{display:flex;flex-direction:column;position:fixed;bottom:16px;right:16px;gap:8px;z-index:5;overflow:visible;user-select:none;>*{display:flex;justify-content:center;align-items:center;flex-grow:0;width:32px;height:32px;font-size:24px;font-weight:700;border-radius:8px;cursor:pointer;background-color:#fff;box-shadow:0 0 8px #00000040;&:active{box-shadow:0 0 8px #0000002e}}}>popupbg{display:none;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0;z-index:10;backdrop-filter:blur(4px);&.open{display:flex}>popup{display:flex;justify-content:center;align-items:center;align-content:center;width:400px;height:200px;background-color:#fff;border-radius:32px;flex-direction:column;padding:32px;gap:16px;box-shadow:0 0 16px -4px #00000080;>heading{display:block;font-size:24px;text-align:center;text-wrap:balance}>button{display:block;color:#fff;background-color:purple;border-radius:8px;cursor:pointer;padding:12px 16px;user-select:none}}}>mapcnt{display:block;width:100%;height:100%;overflow:auto;>mapzoom{display:block;position:relative;>img{position:absolute;top:0;left:0;width:100%;height:100%}>items{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;container-type:size;>circle{display:block;position:absolute;translate:-50% -50%;width:calc(var(--size) * 1cqmin);height:calc(var(--size) * 1cqmin);border-radius:50%;border:.4cqmin solid purple;background-color:#fff;cursor:pointer;user-select:none;overflow:visible;>sizecnt{display:flex;flex-direction:column;position:absolute;top:50%;right:calc(100% + 2cqmin);translate:0 -50%;gap:.6cqmin;overflow:visible;user-select:none;>*{display:flex;justify-content:center;align-items:center;flex-grow:0;width:2.8cqmin;height:2.8cqmin;font-size:2cqmin;font-weight:700;border-radius:.64cqmin;cursor:pointer;background-color:#fff;box-shadow:0 0 .64cqmin #00000040;font-size:1.8cqmin;&:active{box-shadow:0 0 .64cqmin #0000002e}}}>colorCnt{display:flex;flex-direction:column;position:absolute;top:50%;left:calc(100% + 2cqmin);translate:0 -50%;gap:.6cqmin;overflow:visible;>input{display:block;background-color:#fff;width:2.8cqmin;height:2.8cqmin;border-radius:.64cqmin;box-shadow:0 0 .64cqmin #00000040;border:.22cqmin solid #fff;&:active{box-shadow:0 0 .64cqmin #0000002e}}}&:not(.editor)>*{display:none}&:not(.editor)>circlename:not(.empty){display:block}>circlename{display:block;position:absolute;top:calc(100% + 1cqmin);left:50%;translate:-50% 0;padding:.5cqmin .6cqmin;background-color:#fff;border-radius:.7cqmin;cursor:text;pointer-events:none;white-space:nowrap;text-align:center;font-size:1.2cqmin}&.editor>circlename{pointer-events:all}}>txtcnt{display:flex;position:absolute;translate:-50% -50%;overflow:hidden;border-top-right-radius:.8cqmin;border-bottom-right-radius:.8cqmin;background-color:#fff;overflow:visible;>leftbar{display:block;width:.6cqmin;height:100%;flex-grow:0;flex-shrink:0;background-color:purple;cursor:move;user-select:none}>rightarea{display:block;width:0;height:100%;flex-grow:1;overflow-y:auto;>txt{display:block;cursor:text;overflow-y:auto;word-wrap:break-word;width:100%;min-height:100%;font-size:1.4cqmin;padding:.5cqmin}}>scaleRight{display:none;flex-direction:column;position:absolute;top:50%;left:calc(100% + 1cqmin);translate:0 -50%;gap:.6cqmin;overflow:visible;user-select:none;>*{display:flex;justify-content:center;align-items:center;flex-grow:0;width:2.8cqmin;height:2.8cqmin;font-size:2cqmin;font-weight:700;border-radius:.64cqmin;cursor:pointer;background-color:#fff;box-shadow:0 0 .64cqmin #00000040;font-size:1.8cqmin;&:active{box-shadow:0 0 .64cqmin #0000002e}}}>scaleBottom{display:none;flex-direction:row;position:absolute;top:calc(100% + 1cqmin);left:50%;translate:-50% 0;gap:.6cqmin;overflow:visible;user-select:none;>*{display:flex;justify-content:center;align-items:center;flex-grow:0;width:2.8cqmin;height:2.8cqmin;font-size:2cqmin;font-weight:700;border-radius:.64cqmin;cursor:pointer;background-color:#fff;box-shadow:0 0 .64cqmin #00000040;font-size:1.8cqmin;&:active{box-shadow:0 0 .64cqmin #0000002e}}}&.editor>:is(scaleRight,scaleBottom){display:flex}}}}}>buttons{display:flex;position:fixed;bottom:0;left:50%;translate:-50% 0;border:4px solid purple;border-top-left-radius:16px;border-top-right-radius:16px;border-bottom:none;gap:12px;padding:12px;background-color:#fff;z-index:5;>button{display:inline-block;width:128px;height:42px;cursor:pointer;border-radius:8px;background-color:#fff;box-shadow:0 0 8px #00000040;transition:box-shadow .05s;user-select:none;&:active{box-shadow:0 0 8px #0000002e}}}}>messages{display:flex;align-items:center;flex-direction:column-reverse;position:fixed;bottom:12px;left:50%;translate:-50% 0;overflow:visible;z-index:20;>message{display:flex;align-items:center;background-color:#fff;box-shadow:0 0 8px #0000002e;border-radius:8px;border-right:6px solid;overflow:hidden;font-size:18px;padding-left:18px;padding-right:14px;flex-grow:0;text-align:center;animation:msgFade 5s linear 0s;&.info{border-color:#0ff}&.success{border-color:#7fff00}&.warning{border-color:gold}&.error{border-color:#dc143c}}}}