*{box-sizing:border-box}body{display:grid;place-items:center;min-height:100vh;margin:0;text-align:center;font-family:Google Sans,sans-serif;background:#fafcfe}:root{--size: 50vmin}.form{position:relative}button{padding:8px 16px;border-radius:4px;background:hsl(130 60% var(--lightness, 50%));color:#fafafa;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:Google Sans,sans-serif;font-weight:700;font-size:1.25rem;transform:scale(var(--s, 1));transition:transform .1s,background .1s}button:hover{--lightness: 65%;--s: 1.1}button:active{--lightness: 35%;--s: .9}[type=email]{padding:8px 16px}.form__controls{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;width:100%;justify-content:center;align-items:center;align-content:center;justify-items:center}.form--submitted .form__controls{animation:scale-out .25s both reverse ease-in}.form-group{display:grid;max-width:300px;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:center;justify-content:center;grid-gap:.5rem 0}.form-group button{grid-column:span 2}main{width:100%}.captcha{--grid-size: calc(var(--captcha-grid-size) + 4);--cell-size: calc(var(--size) / var(--grid-size));--image-size: calc(var(--cell-size) * var(--captcha-grid-size));height:var(--size);aspect-ratio:1 / 1;position:relative;animation:scale-out 1s .35s both steps(5,end);display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1)}.captcha--finished{animation:scale-in .5s steps(5) both}@keyframes scale-in{to{transform:translate(-50%,-50%) scale(0)}}@keyframes scale-out{0%{transform:translate(-50%,-50%) scale(0)}}.captcha__header{font-size:2rem;color:#1a1a1a;font-weight:700;position:absolute;bottom:100%;text-align:center;left:0;right:0;font-family:JetBrains Mono,monospace}@property --progress{syntax: "<number>"; inherits: true; initial-value: 0;}.captcha__img:before{content:"";position:absolute;inset:-1vmin;background:conic-gradient(from 315deg,hsl(130 80% 50%) calc(var(--progress) * 1%),transparent calc(var(--progress) * 1%));z-index:-1;transition:--progress .5s}.captcha__grid{height:100%;width:100%;display:grid;grid-template-columns:repeat(var(--grid-size),1fr);grid-template-rows:repeat(var(--grid-size),1fr)}.captcha__img{position:relative;-o-object-fit:cover;object-fit:cover;background-image:var(--captcha-image);grid-row:3 / -3;grid-column:3 / -3;background-size:var(--image-size)}.captcha__piece{grid-column:var(--captcha-x);grid-row:var(--captcha-y);z-index:2;height:var(--cell-size);aspect-ratio:1 / 1;background-image:var(--captcha-image);background-size:var(--image-size);background-position:calc(var(--segment-x) * var(--cell-size)) calc(var(--segment-y) * var(--cell-size))}.captcha__slot{background:#00f;grid-column:var(--segment-x);grid-row:var(--segment-y);z-index:2}.captcha__piece[draggable]{cursor:-webkit-grab}.captcha__piece--clone{background:red;transform:scale(1.1);z-index:-1}button .glitchy:after{color:#fafafa}.glitchy{color:transparent;position:relative;display:inline-block}.glitchy:after{content:attr(data-char);position:absolute;color:#1a1a1a;left:0;top:0;animation:glitch calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(1)}@keyframes glitch{0%{content:var(--char-0)}10%{content:var(--char-1)}20%{content:var(--char-2)}30%{content:var(--char-3)}40%{content:var(--char-4)}50%,to{content:attr(data-char)}}.confirm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);display:none;animation:scale-out .25s both steps(10)}.robot{display:none;position:fixed;height:40vmin;width:20vmin;bottom:0;right:15%;transform:rotate(-10deg) translateY(50%) translateY(calc(((var(--progress, 0) / 100) * 30) * 1%));transition:transform .25s;animation:entrance .25s 1.35s backwards}.robot__mouth--sad,.robot__eyes--sad{display:none}.robot--disappointed{transition:transform .25s 1s}@keyframes entrance{0%{transform:rotate(-10deg) translateY(120%) translateY(calc(var(--progress, 0) * 1%))}90%{transform:rotate(-10deg) translateY(40%) translateY(calc(var(--progress, 0) * 1%))}}