*{box-sizing:border-box}html,body,#root{height:100%}body{margin:unset}#root{flex-direction:column;display:flex}main{aspect-ratio:1;background:red;max-width:100%;height:100%;margin-inline:auto;position:relative}.click-area{container-type:size}.output-hover,.output,.click-area{background:#000;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.output,.output-hover{pointer-events:none;background-position:0;background-repeat:no-repeat;background-size:cover}.output-hover{opacity:0;transition:opacity .3s}.click-area:hover~.output-hover{opacity:.75}.toolbar{z-index:1;background:#fff;width:100%}.toolbar .inner{text-align:center;flex-direction:column;gap:1rem;width:100%;padding:1rem;display:flex}.toolbar :where(.buttons){place-content:center;gap:1rem;display:flex}.mouse-position,.draggable-button{z-index:2;border:unset;cursor:grab;border-radius:50%;place-content:center;width:3px;height:3px;padding:1rem;display:grid;position:absolute;translate:-50% -50%}.mouse-position,.draggable-button:active{opacity:.5;cursor:none;background:gray}.mouse-position{color:#fff;pointer-events:none}.mouse-position,[class$=-point],.circle-circle{will-change:transform}[class$=-point]{z-index:1;position:absolute}.dot-bg{--dotSize:.15rem;--bgSize:.5rem;--bgPosition:calc(var(--bgSize)/2);-webkit-mask-image:radial-gradient(circle at center,black var(--dotSize),transparent 0),radial-gradient(circle at center,black var(--dotSize),transparent 0);mask-image:radial-gradient(circle at center,black var(--dotSize),transparent 0),radial-gradient(circle at center,black var(--dotSize),transparent 0);-webkit-mask-size:var(--bgSize)var(--bgSize);mask-size:var(--bgSize)var(--bgSize);-webkit-mask-position:0 0,var(--bgPosition)var(--bgPosition);mask-position:0 0,var(--bgPosition)var(--bgPosition);background:radial-gradient(red,#ff69b4)}.circle-circle{z-index:1;aspect-ratio:1;border-radius:50%;position:absolute;translate:-50% -50%}.code-viewer{anchor-name:--code-viewer;z-index:1;background:#fff;width:100%;position:relative}.code-viewer form{display:inline-block}.code-viewer button{margin-inline-end:1rem}.code-viewer .inner{padding:1rem}.code-viewer .close-button{position:absolute;top:0;right:0}.code-viewer .copy-button{bottom:0;right:0}.code-viewer,.toolbar{transition-behavior:allow-discrete;height:0;transition:height .2s ease-in-out;overflow:clip}@starting-style{.code-viewer,.toolbar{height:0}}.sidebar{z-index:1;transition-behavior:allow-discrete;anchor-name:--sidebar;background:#fff;width:0;height:100%;transition:width .2s ease-in-out;position:fixed;top:0;right:0;overflow:clip}@starting-style{.sidebar{width:0}}.sidebar-inner{padding-block-start:3rem;padding-inline:1rem;height:100%;padding-bottom:100px;overflow:auto}.sidebar-shape{border:2px solid #0000}.sidebar-shape.editable-shape{border-color:green}.sidebar-shape.movable-shape{border-color:#ff69b4}.toolbar{anchor-name:--toolbar;background:#ffffffbf;position:relative}.toolbar--open,.code-viewer--open{height:max-content;height:calc-size(max-content,size);border:1px solid;display:block}.code-viewer--open{height:100px;overflow:auto}.sidebar--open{border:1px solid;width:300px;display:block}.toggle-toolbar-button{position-anchor:--toolbar;position-area:bottom center;z-index:1;position:absolute}.toggle-code-button{position-anchor:--code-viewer;position-area:top center;position:absolute}.toggle-sidebar-button{position-anchor:--sidebar;position-area:left;position:absolute}.close-button{position:absolute;top:1rlh;right:1rlh}.cursor-move{cursor:move}.line{z-index:1;position:absolute}.line-horizontal{border-top:1px dashed #ff69b4;width:100%;height:1px}.line-vertical{border-left:1px dashed #ff69b4;width:1px;height:100%}