.form{mixin:paragraph;width:100%;width:min(720px,100%);margin-bottom:36px;mixin:type--body;mixin:type--regular-serif;font-family:"Source Serif Pro",serif;font-weight:300;mixin:font-size;font-size:18px;line-height:27px}.form:last-child{margin-bottom:0}.form{margin:0;gap:6px;align-items:center;display:flex}.form input{flex-grow:1}.form span{margin:0 12px;width:36px;text-align:left}.play-pause{display:flex;justify-content:center;align-items:center;margin-right:12px;width:40px;height:40px;padding-top:0}.play-pause img{border-radius:0;width:50%}.play-pause.play .play{display:none}.play-pause:not(.play) .pause{display:none}.canvas{position:relative;width:min(720px,100%);aspect-ratio:1/1;margin-top:36px;background:#fff}.canvas .line{width:100%;height:1px;border-radius:0}.canvas::after{content:"";z-index:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;transform-origin:center center;transform:rotate(var(--rotation))}#control,[id^=variant-]{position:absolute;top:0;left:0;height:100%;width:100%;display:grid;gap:1px;grid-template-rows:repeat(var(--height),1px);grid-template-columns:1fr;z-index:1}[id^=variant-]{transform-origin:center center;transform:rotate(var(--rotation));transition-duration:0s}#variant-red .line{background-color:red}#variant-green .line{background-color:green}#variant-blue .line{background-color:#00f}