:root{--white: #ffffff;--winter: #9eb8d9;--wedding: #a25772;--navyblue: #161a30;--grey: #b6bbc4;--milkgrey: #f0ece5;--sage: #c8e4b2;--green: #65b741;--lightgreen: #bed754;--teal: #9ed2be;--darkteal: #5eaaa8;--blue: #0174be;--skyblue: #61c3ff;--yellow: #ffc730;--orange: #e36414;--darkorange: #ff5f00;--red: #b80000;--softpink: #ffd0d0;--pink: #ff9eaa;--darkred: #b20600;--maroon: #750e21;--black: #191919;--black-matte: #252423;--beige: #e6e2c3;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.title{font-family:Orbitron,sans-serif;font-size:2rem;font-weight:400;margin:0 auto;width:500px;position:absolute;top:-100;top:1px;animation:waveAnimation 1s ease-in-out infinite}.canvas-container{width:100%}.editor-container{max-width:1280px;min-width:1000px}#drawing-canvas{border-top:solid 1px gray;border-bottom:solid 1px gray;background-color:#d3d3d3;cursor:pointer;width:100%;height:100%;-webkit-box-shadow:4px 4px 8px rgba(0,0,0,.5);-moz-box-shadow:4px 4px 8px rgba(0,0,0,.5);-box-shadow:4px 4px 8px rgba(0,0,0,.5)}.touch-drag-test{height:100px;width:100px;background-color:#00f}.dropBox{height:150px;width:150px;background-color:#0ff;display:flex;justify-content:center;align-items:center}.control-box{display:flex;justify-content:center;align-items:center;margin-top:2rem;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;background-color:#f8e9d6;color:#000;-box-shadow:4px 4px 8px rgba(0,0,0,.5);-webkit-box-shadow:4px 4px 8px rgba(0,0,0,.5);-moz-box-shadow:4px 4px 8px rgba(0,0,0,.5)}.control-side-panel{text-align:left}.left-control-panel-container,.right-control-panel-container{width:40px;padding:.35rem;background-color:var(--navyblue);-webkit-box-shadow:4px 4px 8px rgba(0,0,0,.5)}[data-btn-type=selection-btn]{max-width:32px;min-width:32px}.top-control-panel,.bottom-control-panel{background-color:var(--navyblue);-webkit-box-shadow:4px 4px 8px rgba(0,0,0,.5)}.bottom-control-panel{width:100%;height:40px;border-radius:0 0 .5rem .5rem}.top-control-panel{width:100%;height:40px;border-radius:.5rem .5rem 0 0}.control-panel-container{width:80px;padding:.35rem;background-color:#000;-webkit-box-shadow:4px 4px 8px rgba(0,0,0,.5)}.control-panel-display{height:40px}.floatingModal{position:absolute;width:100px;padding:.3rem;background-color:#e9dcdc}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}#app{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}.card{padding:2em}.read-the-docs{color:#888}.radio-options-mode{display:grid}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.colorsegment{width:20px;height:20px;border:1px solid black}.colorsegment:hover{border:1px solid white}.color-container-wrapper{position:absolute;z-index:1}.color-container{cursor:pointer;display:grid;width:fit-content;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(15,1fr)}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.page-tab-bar{display:flex;align-items:center;gap:4px;padding:4px 12px;background-color:var(--navyblue);overflow-x:auto;height:36px}.page-tab{display:flex;align-items:center;gap:4px;padding:2px 10px;border-radius:6px 6px 0 0;background:rgba(255,255,255,.07);color:var(--grey);cursor:pointer;font-size:.78rem;white-space:nowrap;user-select:none;transition:background .15s}.page-tab:hover{background:rgba(255,255,255,.14);color:#fff}.page-tab.active{background:var(--skyblue);color:var(--navyblue);font-weight:600}.page-tab-delete{display:none;background:none;border:none;cursor:pointer;color:inherit;font-size:.9rem;padding:0 2px}.page-tab:hover .page-tab-delete{display:inline}.page-tab-name-input{background:transparent;border:none;border-bottom:1px solid currentColor;color:inherit;font-size:inherit;width:70px;outline:none}.page-tab-add{background:none;border:1px solid rgba(255,255,255,.2);color:var(--grey);border-radius:4px;padding:1px 8px;cursor:pointer;font-size:1rem;flex-shrink:0}.page-tab-add:hover{color:#fff;border-color:#ffffff80}@keyframes waveAnimation{0%{transform:translateY(0)}50%{transform:translateY(-5px)}to{transform:translateY(0)}}