:root{--snap-to-color:deepPink}*{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-wrapper{container-type:size}.output-hover,.output,.click-area-wrapper{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-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%}.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}.viewing-bar,.code-viewer,.toolbar{transition-behavior:allow-discrete;height:0;transition:height .2s ease-in-out;overflow:clip}@starting-style{.viewing-bar,.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}.viewing-bar--open,.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 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%}}