.the-code-wrapper{anchor-name:--code-viewer;border:1px solid;border-radius:.5rem;margin-bottom:1rem}.the-code{overscroll-behavior:contain;height:4lh;padding:1rem;font-family:monospace;font-size:150%;overflow:auto}.code-output{z-index:1;background:#fff;width:100%;position:relative}.code-output form{display:inline-block}.code-output button{margin-inline-end:1rem}.code-output .inner{padding:1rem}.toggle-code-button{position-anchor:--code-viewer;position-area:top center;position:absolute}.sidebar{z-index:1;anchor-name:--sidebar;background:#fff;height:100%;display:none}.sidebar--open{border:1px solid;display:block}.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}.toggle-sidebar-button{position-anchor:--sidebar;position-area:left;position:absolute}:root{--snap-to-color:deepPink}*{box-sizing:border-box}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html,body,#root{height:100%}body{margin:unset;background:#000}#root{grid-template-columns:70% 1fr;display:grid}main{background:red}.drawing-area{aspect-ratio:1;width:100%;position:relative}.click-area-wrapper{container-type:size}.output-hover,.output,.click-area-wrapper{background:#000;width:100%;height:100%;margin:auto;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-wrapper: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%}.horiz-bar{display:none}.viewing-bar{z-index:2;background:green;position:relative}.toolbar{anchor-name:--toolbar;background:#ffffffbf;position:relative}.horiz-bar--open{display:block}.toggle-toolbar-button{position-anchor:--toolbar;position-area:bottom center;z-index:1;position:absolute}.cursor-move{cursor:move}.line{z-index:1;position:absolute}.line-horizontal{border-top:1px dashed var(--snap-to-color);width:100%;height:1px}.line-vertical{border-left:1px dashed var(--snap-to-color);width:1px;height:100%}.viewing-bar-box header{align-items:center;gap:.5rem;padding-bottom:.5rem;display:flex}.viewing-bar-box header h2{font-size:1.25rem}.viewing-bar{anchor-name:--viewing-bar;background:#7fff00}.viewing-bar .inner{padding-block:1rem}.viewing-bar p,.viewing-bar h2{margin:0}.toggle-viewing-bar{position-anchor:--viewing-bar;position-area:top center;position:absolute}.box-wrapper{justify-content:center;gap:1rem;display:flex;overflow:hidden}.box-outer{background:repeating-linear-gradient(45deg,#000,#000 35px,gray 35px 70px);border:1px dashed #000}.box{background:#fff;border:10px solid orange;width:200px;height:200px}.box--clip-path{clip-path:var(--clip-path)}.box--border-shape{border-shape:var(--clip-path)}.box--offset-path{background:0 0}.box--offset-path .item{--animation-duration:6s;--per-blob:calc(var(--animation-duration) / sibling-count());--bg:hsl(calc(360deg * (sibling-index() / sibling-count())) 100% 50%);aspect-ratio:1;background:var(--bg);offset-path:var(--clip-path);height:10px;animation:--key-update-offset var(--animation-duration) infinite linear;animation-delay:calc(calc(sibling-index() * var(--per-blob) * -1));animation-play-state:var(--state,paused);border:1px solid}.box--offset-path:hover .item{--state:playing}@keyframes --key-update-offset{to{offset-distance:100%}}