@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.form{display:flex;align-items:flex-start;height:60px;mixin:paragraph;width:100%;margin-left:auto;margin-right:auto;width:min(600px,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 label{display:flex;flex-flow:column;justify-content:center;align-items:center}.form label:last-of-type{flex-grow:1}.form span{margin-bottom:12px}.form input{width:100%;margin:0;padding:0;border:none;height:40px}.form button{display:flex;justify-content:center;align-items:center;margin-right:12px;width:40px;height:40px;padding-top:0}.form button img{border-radius:0}.form button.play .play{display:none}.form button:not(.play) .pause{display:none}.circle-container{display:grid;grid-template:repeat(30,26px)/repeat(30,26px);background-color:#d6de1d;gap:6px;justify-content:center;padding:36px 0}.circle{position:relative}.circle::after{content:'';display:block;width:100%;height:100%;border-radius:100%;background-color:#ff6be4;border-width:3px;border-style:solid;border-top-color:#212121;border-left-color:#212121;border-right-color:#fff;border-bottom-color:#fff}.circle:nth-child(16n+0)::after{transform:rotate(0)}.circle:nth-child(16n+1)::after{transform:rotate(22.5deg)}.circle:nth-child(16n+2)::after{transform:rotate(45deg)}.circle:nth-child(16n+3)::after{transform:rotate(67.5deg)}.circle:nth-child(16n+4)::after{transform:rotate(90deg)}.circle:nth-child(16n+5)::after{transform:rotate(112.5deg)}.circle:nth-child(16n+6)::after{transform:rotate(135deg)}.circle:nth-child(16n+7)::after{transform:rotate(157.5deg)}.circle:nth-child(16n+8)::after{transform:rotate(180deg)}.circle:nth-child(16n+9)::after{transform:rotate(202.5deg)}.circle:nth-child(16n+10)::after{transform:rotate(225deg)}.circle:nth-child(16n+11)::after{transform:rotate(247.5deg)}.circle:nth-child(16n+12)::after{transform:rotate(270deg)}.circle:nth-child(16n+13)::after{transform:rotate(292.5deg)}.circle:nth-child(16n+14)::after{transform:rotate(315deg)}.circle:nth-child(16n+15)::after{transform:rotate(337.5deg)}.circle:nth-child(16n+16)::after{transform:rotate(360deg)}.animate .circle{animation-name:rotate;animation-duration:var(--duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite}