canvas[data-v-44bbd4c4]{display:block;image-rendering:pixelated}input[data-v-c49c54dc]{padding:0;background:none;color:inherit;text-align:inherit;width:100%;field-sizing:content}.panel[data-v-6b030528]{display:flex;flex-direction:column;height:100%}.header[data-v-6b030528]{padding-inline:1rem;padding-bottom:.5rem;padding-top:.5rem;display:flex;justify-content:space-between;align-items:center}.components[data-v-6b030528]{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));grid-auto-rows:max-content;align-items:start;gap:1rem;padding-inline:1rem;padding-bottom:1rem;flex:1;overflow-y:auto}.component[data-v-6b030528]{position:relative;border:1px solid var(--color-border);border-radius:4px}.component:hover[data-v-6b030528]{background-color:var(--color-border)}.component:hover[data-active=true][data-v-6b030528]{background-color:var(--color-accent)}.component[data-v-6b030528]:focus{background-color:var(--color-accent);border-color:var(--color-accent)}.components[data-dragging=false]:not(:has(.component:focus)) .component[data-active=true][data-v-6b030528]{border-color:var(--color-accent)}.component .canvas[data-v-6b030528]{width:100%;height:auto;max-height:10rem;object-fit:contain}.component .drag-handle[data-v-6b030528]{position:absolute;top:0;right:0;border-radius:4px;box-sizing:content-box;margin:.1rem;padding:.1rem;background-color:var(--color-background);border:1px solid var(--color-border);cursor:grab}.component:not(:hover) :is(.component .drag-handle)[data-v-6b030528]{display:none}.component-name[data-v-6b030528]{text-align:center;margin-bottom:.25em}.add[data-v-6b030528]{background:none;padding:0;border-radius:9999px}.add .icon[data-v-6b030528]{display:block;height:1.8em;width:auto}.add .icon path[data-v-6b030528]{stroke:var(--color-panel-background);stroke-width:1.5}.editor[data-v-4012c291]{position:relative;overflow:auto;height:100%}.frame[data-v-4012c291]{position:relative;width:calc(var(--9d52049a) * var(--359318f0) * 1px);height:calc(var(--5fb9beda) * var(--359318f0) * 1px);background-color:var(--color-background)}[data-scrolling=y] .frame[data-v-4012c291]{left:50%;transform:translate(-50%)}[data-scrolling=x] .frame[data-v-4012c291]{top:50%;transform:translateY(-50%)}[data-scrolling=none] .frame[data-v-4012c291]{top:50%;left:50%;transform:translate(-50%,-50%)}.canvas[data-v-4012c291]{width:100%;height:100%;image-rendering:pixelated;background-color:var(--color-background)}.overlay[data-v-4012c291]{position:absolute;display:block;inset:0;overflow:visible}.overflow[data-v-4012c291]{position:absolute;display:block;inset:0;overflow:visible;z-index:-1}.overflow .bounds[data-v-4012c291]{stroke:var(--color-grid)}.grid[data-v-4012c291]{--stroke-width: clamp(.25, var(--359318f0) / 10, 1);fill:none;stroke:var(--color-grid);vector-effect:non-scaling-stroke;pointer-events:none;stroke-width:var(--stroke-width)}.snap[data-v-4012c291]{stroke:#2e8b57;vector-effect:non-scaling-stroke}.bounds{fill:none;stroke-width:1;stroke:var(--color-bounds);vector-effect:non-scaling-stroke;pointer-events:none}.selection{fill:none;stroke-width:1;stroke:var(--color-guide);stroke-dasharray:2;vector-effect:non-scaling-stroke;pointer-events:none}.point-handle{fill:transparent;r:calc(7 / var(--359318f0));cursor:default;stroke:var(--color-bounds);vector-effect:non-scaling-stroke}.panel[data-v-048966c0]{display:flex;flex-direction:column;height:100%}.header[data-v-048966c0]{padding-inline:1rem;padding-bottom:.5rem;padding-top:.5rem;display:flex;justify-content:space-between;align-items:center}.frames[data-v-048966c0]{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));grid-auto-rows:max-content;align-items:start;gap:1rem;padding-inline:1rem;padding-bottom:1rem;flex:1;overflow-y:auto}.frame[data-v-048966c0]{position:relative;border:1px solid var(--color-border);border-radius:4px}.frame:hover[data-v-048966c0]{background-color:var(--color-border)}.frame:hover[data-active=true][data-v-048966c0]{background-color:var(--color-accent)}.frame[data-v-048966c0]:focus{background-color:var(--color-accent);border-color:var(--color-accent)}.frames[data-dragging=false]:not(:has(.frame:focus)) .frame[data-active=true][data-v-048966c0]{border-color:var(--color-accent)}.frame .canvas[data-v-048966c0]{width:100%;height:auto;max-height:10rem;object-fit:contain}.frame .drag-handle[data-v-048966c0]{position:absolute;top:0;right:0;border-radius:4px;box-sizing:content-box;margin:.1rem;padding:.1rem;background-color:var(--color-background);border:1px solid var(--color-border);cursor:grab}.frame:not(:hover) :is(.frame .drag-handle)[data-v-048966c0]{display:none}.frame-name[data-v-048966c0]{text-align:center;margin-bottom:.25em}.add[data-v-048966c0]{background:none;padding:0;border-radius:9999px}.add .icon[data-v-048966c0]{display:block;height:1.8em;width:auto}.add .icon path[data-v-048966c0]{stroke:var(--color-panel-background);stroke-width:1.5}.layer[data-v-8ccdb37a]{display:flex;align-items:center;gap:.25rem;border-radius:3px;flex:1;overflow:hidden}.name[data-v-8ccdb37a]{flex:1;text-align:left;background:none;color:var(--color-text);align-items:center;display:flex;gap:.5rem;padding-inline:.2rem;overflow:hidden}.name .icon[data-v-8ccdb37a]{flex-shrink:0}.name .name-name[data-v-8ccdb37a]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-inline:4px}.name .name-name input[data-v-8ccdb37a]{width:100%}.actions[data-v-8ccdb37a]{display:flex;gap:.25rem;padding-right:.25rem}.layer:focus-within .actions[data-v-8ccdb37a],.layer:not(:hover) .actions[data-always-show=false][data-v-8ccdb37a]{display:none}:is(.locked,.hidden)[data-v-8ccdb37a]{display:flex;align-items:center;background:none;padding:0}.layer:not(:hover) :is(.locked,.hidden)[data-value=false][data-v-8ccdb37a]{visibility:hidden}.layer[data-v-8ccdb37a]:hover{background-color:var(--color-grid)}[data-highlight=true] .layer[data-v-8ccdb37a]{background-color:var(--color-accent)}.layers[data-v-61f02769]{display:flex;flex-direction:column;gap:.5rem;list-style:none;padding:0;margin:0}.row[data-v-61f02769]{display:flex;align-items:center;gap:.25rem;overflow:hidden}details>summary[data-v-61f02769]{list-style:none}details[open][data-v-61f02769]{display:flex;flex-direction:column;gap:.5rem}.chevron[data-v-61f02769]{display:block}details[open]>summary .chevron[data-v-61f02769]{rotate:90deg}.chevron-spacer[data-v-61f02769]{width:12px}.children[data-v-61f02769]{margin-left:1rem}.layer[data-v-1cd5b7d3]{cursor:default;padding:.1rem .2rem;border-radius:3px}.layer[data-v-1cd5b7d3]:hover:not([data-highlight=true]){background-color:var(--color-panel-background);color:var(--color-panel-text)}.layer[data-highlight=true][data-v-1cd5b7d3]{background-color:var(--color-accent)}.drop-zone[data-v-14387b51]{display:flex;gap:.5rem;align-items:baseline;color:var(--color-panel-background);overflow:hidden;margin-left:-.1rem;padding:.75rem;border:1px solid var(--color-border);border-radius:4px}.drop-zone[data-drag-active=true][data-v-14387b51]{color:var(--color-text);background-color:var(--color-accent);border-color:var(--color-accent)}.drop-zone[data-drag-active=true] button[data-v-14387b51]{background-color:var(--color-text)}.drop-hint[data-v-14387b51]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info[data-v-f94c31d4]{color:gray;padding-inline:.5rem;grid-column:span 2}.load-save[data-v-424effb2]{display:grid;grid-template-columns:1fr max-content max-content;align-items:baseline;gap:.75rem}.name-settings[data-v-424effb2]{display:flex;align-items:center;gap:.5rem}.name-settings svg[data-v-424effb2]{display:block}.name-settings button[data-v-424effb2]{padding-inline:.25rem;display:flex;align-items:center;justify-content:center;margin-left:auto}.name-settings .unsaved[data-v-424effb2]{width:1.2ch;height:1.2ch;background:#fff;display:block;border-radius:100%}.panel[data-v-424effb2]{display:flex;flex-direction:column;gap:.75rem;padding:.5rem;padding-bottom:0}.preview[data-v-3947660b]{display:flex;gap:.3rem;padding-inline:.2rem;align-items:center;overflow:hidden}.preview .swatch[data-v-3947660b]{flex-shrink:0;border:1px solid hsl(0deg 0% 33%)}.name[data-v-3947660b]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.swatches[data-v-3947660b]{display:grid;grid-template-columns:repeat(8,1fr);gap:.25rem;background:var(--color-background);border-radius:4px;border:1px solid var(--color-border);color:var(--color-text);padding:.5rem}.swatches .swatch[data-v-3947660b]{border:1px solid hsl(0deg 0% 25%)}.swatch[data-v-3947660b]{width:1rem;height:1rem;border-radius:.1rem;padding:0}.inputs[data-v-2611dc90]{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}input[data-v-2611dc90]{width:100%}.prefixed-input[data-v-2611dc90]{display:flex}.inputs[data-v-4f8daed2]{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}input[data-v-4f8daed2]{width:100%}.prefixed-input[data-v-4f8daed2]{display:flex}.inputs[data-v-2ba11cb1]{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}input[data-v-2ba11cb1]{width:100%}.prefixed-input[data-v-2ba11cb1]{display:flex}.buttons-align[data-v-00c01245]{display:grid;grid-template-columns:repeat(3,1fr);gap:.2rem}.buttons-distribute[data-v-00c01245]{display:grid;grid-template-columns:1fr 1fr;gap:.2rem}button[data-v-00c01245]:has(svg){display:flex;align-items:center;justify-content:center;height:max-content;padding-block:0}button svg[data-v-00c01245]{display:block}button[data-v-59c4a33e]{all:unset}.switch-root[data-v-59c4a33e]{--switch-size: 16px;--switch-padding: 1px;width:calc(var(--switch-size) * 2);height:calc(var(--switch-size) + 2 * var(--switch-padding));border:1px solid var(--color-border);border-radius:9999px;position:relative;cursor:pointer}.switch-root[data-state=checked][data-v-59c4a33e]{background-color:var(--color-accent)}.switch-thumb[data-v-59c4a33e]{display:block;width:var(--switch-size);height:var(--switch-size);background-color:var(--color-panel-background);border-radius:9999px;transition:transform .1s;transform:translate(var(--switch-padding));will-change:transform}.switch-thumb[data-state=checked][data-v-59c4a33e]{transform:translate(calc(var(--switch-size) - var(--switch-padding)))}.switch-root:hover .switch-thumb[data-v-59c4a33e],.switch-thumb[data-state=checked][data-v-59c4a33e]{background-color:var(--color-text)}.drop-zone[data-v-d8392726]{display:flex;gap:.5rem;align-items:baseline;color:var(--color-panel-background);overflow:hidden;margin-left:-.1rem;padding:.75rem;border:1px solid var(--color-border);border-radius:4px}.drop-zone[data-drag-active=true][data-v-d8392726]{color:var(--color-text);background-color:var(--color-accent);border-color:var(--color-accent)}.drop-zone[data-drag-active=true] button[data-v-d8392726]{background-color:var(--color-text)}.drop-hint[data-v-d8392726]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.info[data-v-c291b3d3]{color:gray;padding-inline:.5rem;grid-column:span 2}select[data-v-c291b3d3]{min-width:0;width:100%}.fu[data-v-c291b3d3]{display:flex;flex-direction:row;gap:1ch}.fu select[data-v-c291b3d3]{flex:1}textarea[data-v-2e2b469a]{width:100%}button:has(svg)[data-v-2e2b469a]{padding-inline:.25rem}button:has(svg) svg[data-v-2e2b469a]{display:block}.fonts-table[data-v-2e2b469a]{list-style:none;padding:0;display:flex;flex-direction:column;gap:.2rem}.fonts-table li[data-v-2e2b469a]{display:grid;gap:1ch;grid-template-columns:1fr max-content;align-items:center}.fonts-table .font-name[data-v-2e2b469a]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}pre[class*=language-],code[class*=language-]{color:#fff;font-size:13px;text-shadow:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::selection,code[class*=language-]::selection,pre[class*=language-]::mozselection,code[class*=language-]::mozselection{text-shadow:none;background:#27384e}@media print{pre[class*=language-],code[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background:#24292f}:not(pre)>code[class*=language-]{padding:.1em .3em;border-radius:.3em;color:#fff;background:#8b949e}pre[data-line]{position:relative}pre[class*=language-]>code[class*=language-]{position:relative;z-index:1}.line-highlight{position:absolute;left:0;right:0;padding:inherit 0;margin-top:1em;background:#27384e;box-shadow:inset 5px 0 #1f6fea;z-index:0;pointer-events:none;line-height:inherit;white-space:pre}.namespace{opacity:.7}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8b949e}.token.punctuation{color:#fff}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#78bffe}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a5d6ff}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#79bffe;background:#24292f}.token.atrule,.token.attr-value,.token.keyword{color:#ff7b72}.token.function{color:#d2a8ff}.token.regex,.token.important,.token.variable{color:#fea557}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.code[data-v-c35a7426]{padding:.5rem;max-height:max-content;overflow:auto;border-radius:4px;background-color:var(--color-grid);flex:1!important;margin:0}.code [data-v-c35a7426] .token{background:none}.menu[data-v-c35a7426]{display:flex;gap:.5rem}.menu button[data-v-c35a7426]:has(svg){padding-inline:.25rem;display:flex;align-items:center;justify-content:center}.settings-trigger[data-v-c35a7426]{anchor-name:--code-settings-dialog-trigger}.settings[data-v-c35a7426]{position:absolute;position-anchor:--code-settings-dialog-trigger;top:anchor(top);left:anchor(left);translate:-100% 0;margin:-.75rem -.5rem;width:40ch;padding:.75rem}.panel[data-v-803b451d]{display:flex;flex-direction:column;height:100%;gap:.5rem}header[data-v-803b451d]{display:flex;gap:.5rem;overflow:hidden;align-items:baseline}.heading[data-v-803b451d]{flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-transform:capitalize}.tool-bar[data-v-00cdb9d6]{display:flex;position:absolute;top:1rem;right:1rem;flex-direction:column;gap:3px;padding:2px}.tool-bar button[data-v-00cdb9d6]{display:block;padding:1px}.tool-bar button[data-active=true][data-v-00cdb9d6]{color:var(--color-accent);background-color:var(--color-text)}.tool-bar button svg[data-v-00cdb9d6]{display:block}.editor-panel[data-v-09dadd20]{position:relative;padding:.3rem}.properties-panel[data-v-09dadd20],.layers-panel[data-v-09dadd20]{padding:1rem}.layers-panel[data-v-09dadd20]{padding-left:.6rem}[data-resize-handle][data-v-09dadd20]{--size: 5px;--margin: 1rem;transition:opacity .2s;background:var(--color-panel-background);border-radius:var(--size)}[data-resize-handle][data-state=inactive][data-v-09dadd20]:not(:focus){opacity:.1}[data-resize-handle][data-orientation=vertical][data-v-09dadd20]{height:var(--size);margin-inline:var(--margin)}[data-resize-handle][data-orientation=horizontal][data-v-09dadd20]{width:var(--size);margin-block:var(--margin)}@layer reset,base,components,utilities;@layer reset{input,textarea{font-family:inherit;font-size:inherit;border:none}h1,h2,h3{font-weight:inherit;font-size:inherit;margin:0}a{text-decoration:none;color:inherit}p,pre,menu,ul{margin:0}}@layer base{*{box-sizing:border-box;overflow-wrap:break-word}body{line-height:1.2}button,select{line-height:1.4;padding-block:1px;padding-inline:.5em .55em}select{height:1lh}button{cursor:pointer}button:hover:not(:active){background-color:var(--color-text)}button[data-theme=positive]{background-color:var(--color-accent);color:var(--color-text)}button[data-theme=positive]:hover:not(:active){background-color:var(--color-text);color:var(--color-accent)}input,textarea,select,button{box-sizing:content-box;border:none;border-radius:3px;background-color:var(--color-panel-background);color:var(--color-panel-text)}input,select{padding-inline:.2em .3em;min-width:2ch;accent-color:var(--color-accent)}:is(input,select)::placeholder{color:var(--color-grid)}input[type=number]{-moz-appearance:textfield;appearance:textfield}input[type=checkbox]{width:max-content}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none}summary{cursor:pointer}.flow>*+*{margin-block-start:var(--flow-space, .5rem)}}@layer components{.field{display:grid;grid-template-columns:9ch 1fr;gap:.5rem;align-items:center}.field label{text-overflow:ellipsis;overflow:hidden}details .field{margin-left:2ch;grid-template-columns:9ch 1fr}}@layer components{dialog{background:var(--color-background);border-radius:4px;border:1px solid var(--color-grid);color:var(--color-text);max-width:min(50ch,80%);min-width:40ch}dialog::backdrop{background-color:#00000080}dialog menu{display:flex;gap:1rem;justify-content:end}}:root{--color-background: black;--color-text: white;--color-grid: hsl(0 0% 14% / 1);--color-guide: var(--color-panel-background);--color-panel-background: hsl(0 0% 60% / 1);--color-panel-text: var(--color-background);--color-accent: tomato;--color-bounds: var(--color-accent);--color-border: hsl(0 0% 20% / 1);--color-pixel-0: hsl(0, 0%, 0%);--color-pixel-1: hsl(0, 0%, 6.67%);--color-pixel-2: hsl(0, 0%, 13.33%);--color-pixel-3: hsl(0, 0%, 20%);--color-pixel-4: hsl(0, 0%, 26.67%);--color-pixel-5: hsl(0, 0%, 33.33%);--color-pixel-6: hsl(0, 0%, 40%);--color-pixel-7: hsl(0, 0%, 46.67%);--color-pixel-8: hsl(0, 0%, 53.33%);--color-pixel-9: hsl(0, 0%, 60%);--color-pixel-10: hsl(0, 0%, 66.67%);--color-pixel-11: hsl(0, 0%, 73.33%);--color-pixel-12: hsl(0, 0%, 80%);--color-pixel-13: hsl(0, 0%, 86.67%);--color-pixel-14: hsl(0, 0%, 93.33%);--color-pixel-15: hsl(0, 0%, 100%)}html,body,#app{width:100%;height:100%;margin:0}body{background-color:var(--color-background);color:var(--color-text);font-family:monospace}hr{width:100%;border-color:var(--color-border);margin-block:.5lh}