.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:var(--thickness,1px);background:#212121;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,#variant{position:absolute;top:0;left:0;height:100%;width:100%;display:grid;gap:var(--thickness,1px);grid-template-rows:repeat(var(--height),var(--thickness,1px));grid-template-columns:1fr;z-index:1}#variant{transform-origin:center center;transform:rotate(var(--rotation));transition-duration:0s}