html,body{background:#c4c4c4!important}body{font-family:monospace!important}.canvas-area{background-color:#c4c4c4!important;background-image:radial-gradient(#aaa .7px,transparent .7px)!important;background-size:9px 9px!important;touch-action:none}.tool .tool-icon{font:9px/10px monospace!important;white-space:normal;overflow:hidden;position:static!important;width:100%!important;height:auto!important;pointer-events:none}.tool{width:43px!important;height:38px!important;display:flex!important;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}.tools{width:88px!important;display:flex!important;flex-wrap:wrap!important}.component-area.left{min-width:90px}.status-area{display:none!important}.canvas-area canvas{image-rendering:pixelated}.menu-button{font-family:monospace!important}button{font-family:monospace!important}
@media(max-width:600px){.vertical{display:flex!important;flex-direction:column!important}.horizontal{display:flex!important;flex-direction:column!important;min-height:0}.canvas-area{order:0;min-height:290px;flex:1}.component-area.left{order:1;width:100%!important;min-height:0}.toolbox{width:100%!important}.tools{width:100%!important;display:grid!important;grid-template-columns:repeat(8,1fr)}.tool{width:100%!important;height:44px!important}.tool .tool-icon{font-size:10px!important;line-height:11px!important}.component-area.right{display:none}.tool-options{display:none}.color-box{min-height:60px}.menus{overflow-x:auto;flex-shrink:0}.component{margin:0!important}.component-area.bottom{flex-shrink:0}}
.canvas-area{box-sizing:border-box!important;display:flex;align-items:center;justify-content:center}.canvas-area>canvas{flex-shrink:0}.tool-icon{min-width:0!important;overflow-wrap:anywhere!important}.tools-component{height:auto!important}.tools{height:auto!important;align-content:start!important;gap:2px}.tool{min-width:0!important;float:none!important}.tool-options{height:auto!important}
@media(max-width:600px){.horizontal>.component-area.left{height:auto!important;flex:0 0 auto!important;display:block!important}.tools-component{width:100%!important;height:auto!important}.tools-component .component-content{width:100%!important;height:auto!important}.tools{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:44px!important;gap:3px;padding:4px}.tool{margin:0!important;min-width:0!important;max-width:100%!important}.tool-icon{font-size:11px!important;line-height:12px!important}.horizontal{overflow:visible!important}.canvas-area{min-height:300px!important;flex:1 1 auto!important}.color-box{width:100%!important;height:auto!important;min-height:84px!important}.palette{display:grid!important;grid-template-columns:repeat(14,minmax(0,1fr))!important;grid-auto-rows:28px!important;width:100%!important;height:auto!important;gap:1px}.palette .color-button{width:100%!important;height:28px!important;margin:0!important}.component-area.bottom{height:90px!important}.current-colors{display:none!important}.tool-options{display:none!important}}
@media(max-width:600px){.component-area.left{min-height:200px!important}.component-area.bottom{min-height:90px!important;position:relative!important}.canvas-area{min-height:300px!important}.tools-component{min-height:198px!important}.palette{max-width:100%;overflow:hidden}}
@media(max-width:600px){.tools{box-sizing:border-box!important;width:100%!important}.component-area.bottom{margin-top:5px!important}.colors-component{margin:0!important;width:100%!important}.color-box{box-sizing:border-box!important}.tools-component{box-sizing:border-box!important}}
@media(max-width:600px){.colors-component.wide{height:90px!important;align-items:flex-start!important}.colors-component.wide .color-box,.colors-component.wide .palette{height:auto!important}.color-box{padding-top:5px}.palette{grid-template-columns:repeat(7,minmax(0,1fr))!important;grid-auto-rows:32px!important}.palette .color-button{height:32px!important}.component-area.bottom{min-height:138px!important}.color-box{min-height:134px!important}}

/* Original SVG tool marks replace upstream sprite artwork. */
.tool .tool-icon{background-size:22px 22px!important;background-repeat:no-repeat!important;background-position:center!important;position:static!important;width:100%!important;height:100%!important;display:block!important;font-size:0!important}.tool{width:30px!important;height:28px!important}.tools{width:62px!important;gap:0}.component-area.left{min-width:66px}.tool-options{width:60px!important}
@media(max-width:600px){.tool{width:100%!important;height:44px!important}.tools{width:100%!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:1px}.tools-component{min-height:102px!important}.component-area.left{height:104px!important;min-height:104px!important}.tool .tool-icon{background-size:24px 24px!important}.component-area.bottom{min-height:138px!important}}

.tool .tool-icon{background-image:none!important;display:flex!important;align-items:center;justify-content:center}.tool-icon img{width:22px;height:22px;display:block;image-rendering:auto}

.tool.selected{background-color:#f5c8dc!important;outline:1px dotted #222;outline-offset:-4px}
@media(max-width:600px){.tool-options{display:flex!important;min-height:46px!important;width:100%!important;justify-content:center}.tools-component{min-height:158px!important}.component-area.left{height:160px!important;min-height:160px!important}.tool-options>div{flex:0 0 auto!important;min-height:42px;max-width:100%}.tool-options input{min-height:30px}}

.gift-more{display:none}
@media(max-width:600px){.canvas-area{min-height:330px!important}.tools-component{min-height:62px!important;position:relative}.component-area.left{height:66px!important;min-height:66px!important}.tools{grid-template-columns:repeat(5,minmax(0,1fr))!important;width:calc(100% - 64px)!important;align-self:flex-start}.tool{display:none!important}.tool:nth-child(2),.tool:nth-child(3),.tool:nth-child(4),.tool:nth-child(7),.tool:nth-child(10){display:flex!important}.gift-more{display:block;position:absolute;right:2px;top:5px;width:60px;height:44px;font:10px monospace}.gift-more-open .tool{display:flex!important}.gift-more-open .component-area.left{height:208px!important;min-height:208px!important}.gift-more-open .tools-component{min-height:204px!important}.tool-options{display:none!important}.palette{grid-template-columns:repeat(14,minmax(0,1fr))!important;grid-auto-rows:28px!important}.palette .color-button{height:28px!important}.component-area.bottom{min-height:64px!important;height:64px!important}.colors-component.wide{height:64px!important}.color-box{min-height:60px!important}}

@media(max-width:600px){.tools-component .gift-more{position:absolute!important;right:3px!important;top:4px!important;margin:0!important}.palette{grid-template-columns:repeat(7,minmax(0,1fr))!important}.palette .color-button{display:none!important}.palette .color-button:nth-child(-n+14){display:block!important}.gift-more-open .palette .color-button{display:block!important}.gift-more-open .component-area.bottom{height:132px!important;min-height:132px!important}.gift-more-open .tool-options{display:flex!important;max-height:48px!important;margin-top:2px!important}.gift-more-open .component-area.left{min-height:250px!important;height:250px!important}.gift-more-open .tools-component{min-height:246px!important}.palette .color-button{height:28px!important}}
@media(max-width:600px){.palette .color-button canvas{width:100%!important;height:100%!important;object-fit:fill!important}.palette .color-button{overflow:hidden!important}}

.tool,.color-button,.gift-more{cursor:pointer!important}.color-button:focus-visible,.tool:focus-visible,.gift-more:focus-visible{outline:2px dashed #111!important;outline-offset:-3px!important}.color-button[aria-pressed=true]{outline:2px solid #ff5093!important;outline-offset:-3px!important}.color-button:active{box-shadow:inset 2px 2px #333!important}.tool:active{background-color:#f5c8dc!important}
@media(hover:hover){.tool:not(.selected):hover,.gift-more:hover{background-color:#dedede!important}.color-button:hover{outline:1px dotted #111;outline-offset:-2px}}

.gift-more.has-hidden-tool{background-color:#f5c8dc;outline:1px dotted #222;outline-offset:-4px}
.tool.selected{background-image:none!important;background-color:#f5c8dc!important}.gift-more{background:#c4c4c4!important;border:2px solid!important;border-color:white #666 #666 white!important;color:#171717!important}.gift-more:active{border-color:#666 white white #666!important;background:#f5c8dc!important}.gift-more.has-hidden-tool{background:#f5c8dc!important}
.tool:hover:active{background:#f5c8dc!important}

/* Touch scrolls the view over the tool and color strips; only a mouse or pen
   can undock or drag components. The chooser keeps its horizontal glide. */
.component{touch-action:pan-x pan-y!important}
.chooser{touch-action:pan-y!important}