html,body{margin:0;padding:0;overflow:hidden;font-family:Ubuntu,sans-serif;font-weight:300}html *,body *{box-sizing:border-box;text-decoration:none}html * a:visited,body * a:visited{color:#000}:root{--grid-size: 20px;--grid-color: rgba(0, 0, 0, .2)}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-Regular-D14tH6yt.ttf) format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-Italic-BxSEJX07.ttf) format("truetype");font-weight:400;font-style:italic}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-Bold-BGoo8i9Y.ttf) format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-BoldItalic-DiND6kz9.ttf) format("truetype");font-weight:700;font-style:italic}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-Light-DlXMI-yU.ttf) format("truetype");font-weight:300;font-style:normal}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-LightItalic-BBGxubWq.ttf) format("truetype");font-weight:300;font-style:italic}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-Medium-C-1-7KOl.ttf) format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Ubuntu;src:url(/assets/Ubuntu-MediumItalic-Cp5nc9PY.ttf) format("truetype");font-weight:500;font-style:italic}body{width:100vw;height:100vh}.nodes text{pointer-events:none}.container{width:100%;height:100%;display:flex;flex-direction:column;background-image:linear-gradient(to right,var(--grid-color) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-color) 1px,transparent 1px);background-color:#fff;background-size:var(--grid-size) var(--grid-size);background-repeat:repeat}.container *{-webkit-user-select:none;user-select:none}.container .main{flex:1;display:flex;flex-direction:column}.container .main .settings{padding:10px;display:flex;flex-direction:column;gap:10px}#canvas{position:relative;width:100%;height:100%;z-index:10}#canvas canvas{position:fixed;top:0;left:0;width:100%;height:100%;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#canvas #face-canvas{z-index:11}#canvas #edge-canvas{z-index:12}#canvas #node-canvas{z-index:13}#canvas #main-canvas{z-index:14}footer{position:absolute;bottom:0;padding:5px;display:flex;width:100%;justify-content:space-between;align-items:center}footer div:first-child{pointer-events:none;color:#cf8c00}footer div:first-child span{color:#009e9e}footer .color{z-index:12}.header{display:flex;justify-content:space-between;align-items:center;background-color:#f4f4f4;z-index:20}.header a{padding:2px 5px 2px 2px}.header a img{width:25px;transition:transform .2s ease-in-out}.header a:hover img{transform:scale(1.1)}.header a:active img{transform:scale(.9)}#menu-bar{border-bottom:1px solid #ddd;padding:0;margin:0}#menu-bar>ul{list-style-type:none;margin:0;padding:0;display:flex}#menu-bar>ul hr{opacity:.5;width:90%}#menu-bar>ul li *{cursor:pointer}#menu-bar>ul>li{position:relative;padding:5px 10px}#menu-bar>ul>li:hover{background-color:#e0e0e0}#menu-bar>ul>li:hover>ul{display:block}#menu-bar>ul>li>ul{display:none;position:absolute;top:100%;left:0;background-color:#fff;border:1px solid #ddd;list-style-type:none;padding:5px;margin:0;min-width:250px;z-index:20}#menu-bar>ul>li>ul li{position:relative;display:flex;justify-content:space-between;align-items:center;padding:5px}#menu-bar>ul>li>ul li span:nth-child(2){color:#646464}#menu-bar>ul>li>ul li>ul{display:none;position:absolute;top:40%;left:70%;background-color:#fff;border:1px solid #ddd;list-style-type:none;padding:5px;margin:0;min-width:200px;z-index:20}#menu-bar>ul>li>ul li>ul li{display:flex;gap:20px;justify-content:space-between;align-items:center}#menu-bar>ul>li>ul li>ul li div{min-width:135px;display:flex;justify-content:end;gap:5px}#menu-bar>ul>li>ul li>ul li div input[type=number]{width:45px}#menu-bar>ul>li>ul li>ul li label{display:flex;gap:5px;justify-content:space-between;align-items:center;white-space:nowrap}#menu-bar>ul>li>ul li>ul li label a{padding:4px;color:gray;height:16px;font-size:12px;font-weight:700;display:flex;border-radius:50%;justify-content:center;align-items:center}#menu-bar>ul>li>ul li>ul li label a:hover{cursor:help}#menu-bar>ul>li>ul li:hover{background-color:#f4f4f4}#menu-bar>ul>li>ul li:hover ul{display:block}#menu-bar>ul>li>ul #panel-btn{display:flex;justify-content:space-between;align-items:center}.border{border:1px solid gray}#floating-panel{position:fixed;background-color:#fff;top:35px;left:calc(100vw - 220px);width:200px;min-height:400px;max-height:90%;background-color:#ffffff80;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 6px #0000001a;font-family:Arial,sans-serif;font-size:14px;z-index:16;display:flex;flex-direction:column;transition:width .5s ease-in-out,height .5s ease-in-out,left .5s ease-in-out,top .5s ease-in-out,background-color .5s ease-in-out}#floating-panel.MAX{width:90vw;height:90vh;left:20px;top:35px;background-color:#ffffffe6}#floating-panel #info{width:100%;padding:10px;top:0;background-color:#ffff9680;-webkit-user-select:none;user-select:none;margin:0;display:flex;justify-content:space-between;align-items:center;touch-action:none}#floating-panel #info .cm{display:flex;justify-content:center;align-items:center;gap:5px}#floating-panel #info .cm .max:hover{color:green;cursor:pointer}#floating-panel #info .cm .close:hover{color:red;cursor:pointer}#floating-panel .body-info{padding:10px;overflow:auto;scrollbar-width:thin;cursor:text}#floating-panel .body-info h4{margin:0 0 10px}#floating-panel .body-info div{padding:1px}#floating-panel .body-info hr{opacity:.5;margin:10px}#graphs-panel,#face-panel{position:fixed;background-color:#fff;left:calc(100vw - 220px);width:200px;min-height:400px;max-height:50%;background-color:#ffffff80;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 6px #0000001a;font-family:Arial,sans-serif;font-size:14px;z-index:16;display:flex;flex-direction:column;transition:width .5s ease-in-out,height .5s ease-in-out,left .5s ease-in-out,top .5s ease-in-out,background-color .5s ease-in-out}#graphs-panel.MAX,#face-panel.MAX{width:90vw;height:90vh;left:20px;top:35px;background-color:#ffffffe6}#graphs-panel #graphs,#graphs-panel #faces,#face-panel #graphs,#face-panel #faces{width:100%;padding:10px;top:0;background-color:#ffff9680;-webkit-user-select:none;user-select:none;margin:0;display:flex;justify-content:space-between;align-items:center;touch-action:none}#graphs-panel #graphs .cm,#graphs-panel #faces .cm,#face-panel #graphs .cm,#face-panel #faces .cm{display:flex;justify-content:center;align-items:center;gap:5px}#graphs-panel #graphs .cm .max:hover,#graphs-panel #faces .cm .max:hover,#face-panel #graphs .cm .max:hover,#face-panel #faces .cm .max:hover{color:green;cursor:pointer}#graphs-panel #graphs .cm .close:hover,#graphs-panel #faces .cm .close:hover,#face-panel #graphs .cm .close:hover,#face-panel #faces .cm .close:hover{color:red;cursor:pointer}#graphs-panel .body-graphs,#face-panel .body-graphs{overflow:auto;scrollbar-width:thin;cursor:pointer;-webkit-user-select:none;user-select:none}#graphs-panel .body-graphs ul,#face-panel .body-graphs ul{list-style-type:none;padding-left:20px}#graphs-panel .body-graphs ul li,#face-panel .body-graphs ul li{margin:3px 3px 3px 10px;width:90%;font-size:16px;font-weight:700;padding:5px 0 5px 5px;border-radius:0 5px 5px 0;display:block;position:relative}#graphs-panel .body-graphs ul li:hover,#face-panel .body-graphs ul li:hover{background-color:#4682b480;color:#f2f2f2!important}#graphs-panel .body-graphs ul li.select,#face-panel .body-graphs ul li.select{background-color:#4682b4bf;color:#fff!important}#graphs-panel .body-graphs ul li:not(:first-child):before,#face-panel .body-graphs ul li:not(:first-child):before{content:"";display:block;position:absolute;top:-13px;left:-15px;width:10px;height:28px;border:solid #bebebe;border-width:0 0 2px 2px}#graphs-panel .body-graphs ul li:nth-of-type(2):before,#face-panel .body-graphs ul li:nth-of-type(2):before{top:-5px;height:18px}#graphs-panel .body-graphs ul li:first-of-type,#face-panel .body-graphs ul li:first-of-type{margin:3px 3px 5px -20px;color:#005000}#graphs-panel{top:300px}#face-panel{top:600px}#face-panel .body-faces{overflow:auto;scrollbar-width:thin;cursor:pointer;-webkit-user-select:none;user-select:none}#face-panel .body-faces ul{list-style-type:none;padding-left:10px}#face-panel .body-faces ul li{margin:5px;width:90%;font-size:18px;font-weight:700;padding:5px;border-radius:5px;display:block;position:relative}#face-panel .body-faces ul li:hover{background-color:#46b45580;color:#f2f2f2!important}#face-panel .body-faces ul li.select{background-color:#46b455bf;color:#fff!important}#custom-context-menu{position:fixed;background:#fff;border:1px solid gray;padding:5px;z-index:20}#custom-context-menu *{-webkit-user-select:none;user-select:none}#custom-context-menu ul{background-color:#fff;border:1px solid #ddd;list-style-type:none;padding:0;margin:0;min-width:200px;z-index:20}#custom-context-menu ul hr{opacity:.5;width:90%}#custom-context-menu ul li{display:flex;justify-content:space-between;align-items:center;padding:5px;border-radius:50px;cursor:pointer}#custom-context-menu ul li span:nth-child(2){color:#646464}#custom-context-menu ul li:hover{background-color:#f4f4f4}.modal{position:fixed;top:0;left:0;width:100vw;height:100vh;display:none;justify-content:center;align-items:center;z-index:20}.modal *{-webkit-user-select:none;user-select:none;font-size:18px}.help-panel{display:none;padding:15px;background-color:#ffffffb3;width:350px;box-shadow:0 0 10px #00000080}.help-panel .help-title{text-align:center;font-weight:700;padding:5px}.help-panel hr{width:50%}.help-panel .help-content{width:100%;padding:5px}.help-panel .help-content .help-table{width:100%}.help-panel .help-content .help-table tr{padding:3px;width:100%;display:flex;justify-content:space-between;align-items:center}.help-panel .help-content .help-table tr .key{font-weight:700}#tools-panel{position:fixed;background-color:#fff;top:35px;left:5px;width:70px;background-color:#ffffff80;border:1px solid #ddd;border-radius:5px;box-shadow:0 4px 6px #0000001a;font-family:Arial,sans-serif;font-size:14px;z-index:15;display:flex;flex-direction:column}#tools-panel #tools{width:100%;padding:5px;top:0;background-color:#ffff9680;-webkit-user-select:none;user-select:none;margin:0;display:flex;justify-content:space-between;align-items:center;touch-action:none}#tools-panel #tools .close:hover{color:red;cursor:pointer}#tools-panel .body-tools{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px}#tools-panel .body-tools *{-webkit-user-select:none;user-select:none}#tools-panel .body-tools hr{width:100%;opacity:.7}#tools-panel .body-tools div{padding:5px}#tools-panel .body-tools .scale,#tools-panel .body-tools .tree,#tools-panel .body-tools .force,#tools-panel .body-tools .panning,#tools-panel .body-tools .select,#tools-panel .body-tools .component,#tools-panel .body-tools .color-picker,#tools-panel .body-tools .color-0{cursor:pointer}#tools-panel .body-tools .scale img,#tools-panel .body-tools .tree img,#tools-panel .body-tools .force img,#tools-panel .body-tools .panning img,#tools-panel .body-tools .select img,#tools-panel .body-tools .component img,#tools-panel .body-tools .color-picker img,#tools-panel .body-tools .color-0 img{width:50px;height:50px;transition:transform .2s ease-in-out}#tools-panel .body-tools .scale:hover img,#tools-panel .body-tools .tree:hover img,#tools-panel .body-tools .force:hover img,#tools-panel .body-tools .panning:hover img,#tools-panel .body-tools .select:hover img,#tools-panel .body-tools .component:hover img,#tools-panel .body-tools .color-picker:hover img,#tools-panel .body-tools .color-0:hover img{transform:scale(1.1)}#tools-panel .body-tools .scale:active img,#tools-panel .body-tools .tree:active img,#tools-panel .body-tools .force:active img,#tools-panel .body-tools .panning:active img,#tools-panel .body-tools .select:active img,#tools-panel .body-tools .component:active img,#tools-panel .body-tools .color-picker:active img,#tools-panel .body-tools .color-0:active img{transform:scale(.9)}#tools-panel .body-tools #color{height:50px;width:50px;padding:0;margin:0;justify-content:center;align-items:center;display:flex}#tools-panel .body-tools #color:hover>div{transform:translate(var(--hover-x));opacity:1}#tools-panel .body-tools #color:hover>div label{display:block}#tools-panel .body-tools #color>div{padding:3px;position:absolute;transition:transform .3s ease;background-color:#ffffffb3;display:flex;flex-direction:column;justify-content:center;align-items:center}#tools-panel .body-tools #color>div label{display:none}#tools-panel .body-tools #color>div div{display:flex;justify-content:center;align-items:center;width:45px;height:45px;cursor:pointer!important;border:none}#tools-panel .body-tools #color>div div button{width:30px;height:30px;border:1px solid rgba(0,0,0,.1333333333)!important}#tools-panel .body-tools #color .color-0{z-index:10;--hover-x: 0px;cursor:pointer;background-color:#fff0}#tools-panel .body-tools #color .color-0 img{width:50px;height:50px}#tools-panel .body-tools #color .color-1{opacity:0;z-index:1;--hover-x: 50px}#tools-panel .body-tools #color .color-2{opacity:0;z-index:2;--hover-x: 100px}#tools-panel .body-tools #color .color-3{opacity:0;z-index:3;--hover-x: 150px}#tools-panel .body-tools #color .color-4{opacity:0;z-index:4;--hover-x: 200px}#tools-panel .body-tools #color .color-5{opacity:0;z-index:5;--hover-x: 250px}#tools-panel .body-tools #color .color-6{opacity:0;z-index:6;--hover-x: 300px}#tools-panel .body-tools #color .color-7{opacity:0;z-index:7;--hover-x: 350px}.modal-chord{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:17;display:flex}.modal-chord *{-webkit-user-select:none;user-select:none;font-size:18px}.shortcut-chord,.shortcut-chord-fake{position:absolute;right:0;bottom:0;min-width:250px;max-height:90%;border-radius:5px;margin:10px;padding:10px;color:#fff}.shortcut-chord .header,.shortcut-chord-fake .header{min-width:40px;height:20px;display:flex;justify-content:center;position:absolute;padding-bottom:5px;top:0;left:20px}.shortcut-chord ul,.shortcut-chord-fake ul{padding:10px;margin:0;border-radius:5px;display:flex;flex-direction:column;gap:10px;justify-content:start;align-items:start;list-style-type:none;font-weight:400}.shortcut-chord ul li,.shortcut-chord-fake ul li{display:flex}.shortcut-chord ul li .title,.shortcut-chord-fake ul li .title{width:15px;color:#fff}.shortcut-chord ul li .arrow,.shortcut-chord-fake ul li .arrow{width:30px;font-size:20px}.shortcut-chord ul li .desc,.shortcut-chord-fake ul li .desc{color:#d3b37b}.shortcut-chord-fake{z-index:19}.shortcut-chord-fake .header{background-color:#1f1f2800}.shortcut-chord-fake ul{border:1px solid rgba(0,0,0,0)}.shortcut-chord{z-index:18;opacity:.85;background-color:#1f1f28}.shortcut-chord .header{background-color:#1f1f28}.shortcut-chord ul{border:1px solid gray}.shortcut-chord ul li{opacity:0}.modal-input{position:fixed;top:0;left:0;width:100vw;height:100vh;display:none;justify-content:center;align-items:center;z-index:20}.modal-input *{-webkit-user-select:none;user-select:none;font-size:18px}.input-chord{display:flex;position:relative;min-width:250px;max-height:90%;border-radius:5px;margin:10px;padding:12px;color:#fff;background-color:#1f1f28;opacity:.85}.input-chord .header{min-width:40px;height:20px;display:flex;justify-content:center;position:absolute;padding:5px;top:2px;left:20px;font-size:16px;background-color:#1f1f28}.input-chord input{background-color:#1f1f2800;border:1px solid rgba(0,0,0,.2);padding:15px;color:#fff;font-size:20px;border:1px solid white}.grid-hidden{background-image:none!important}.hidden{opacity:0!important}.gray-background{opacity:.5}.rect{fill:#add8e6;stroke:#000;stroke-dasharray:2;opacity:.2}.handle{fill:#fff;stroke:#000;stroke-width:1.5;cursor:pointer;opacity:.7}/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button:before{z-index:initial}.pickr .pcr-button:after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #00000040}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em #0000001a,0 0 1em #00000008;left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:#0000;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #4285f4bf}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px #ffffffd9,0 0 0 3px #f44250bf}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right,transparent,black),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}