.demo-canvas[data-v-ba3feb7a]{float:right;display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 12px 20px;width:-moz-fit-content;width:fit-content}.demo-canvas-stage[data-v-ba3feb7a]{position:relative;touch-action:none}.demo-canvas-layer[data-v-ba3feb7a]{position:absolute;top:0;right:0;bottom:0;left:0;image-rendering:pixelated}.demo-canvas-hover[data-v-ba3feb7a]{pointer-events:none}.demo-canvas-controls[data-v-ba3feb7a]{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.demo-swatch-strip[data-v-ba3feb7a]{display:flex;padding:1px}.demo-swatch[data-v-ba3feb7a]{position:relative;width:22px;height:22px;margin:-1px;border:2px solid #000;cursor:pointer;flex-shrink:0}.demo-swatch-tri[data-v-ba3feb7a]{position:absolute;width:0;height:0;pointer-events:none;transform:rotate(90deg)}.demo-swatch-tri--primary[data-v-ba3feb7a]{left:0;top:0;border-left:10px solid #fff;border-top:10px solid transparent}.demo-swatch-tri--secondary[data-v-ba3feb7a]{right:0;bottom:0;border-right:10px solid #fff;border-bottom:10px solid transparent}@media (max-width: 768px){.demo-canvas[data-v-ba3feb7a]{float:none;width:100%;margin:4px 0 12px}}