@keyframes who-are-you-view-form-wiggle{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}to{transform:translateX(0)}}who-are-you-view{display:grid;grid-area:center;margin-bottom:var(--viewport-inset-top);back-button{left:16px;position:fixed;top:16px;z-index:100}}prove-it-view,what-is-your-email-view,what-is-your-name-view{display:flex;flex-direction:column;gap:16px;max-width:360px;place-self:center;transform:scale(1);transition-behavior:allow-discrete;transition-duration:.25s;transition-property:display,opacity;transition-timing-function:var(--transition-timing-ease-out);width:100%;@starting-style{opacity:0}&:has(._form-input:not(:placeholder-shown)){._title{opacity:.2}}@media (prefers-reduced-motion:no-preference){&[wiggle]{._form{animation-duration:.25s;animation-name:who-are-you-view-form-wiggle;animation-timing-function:var(--transition-timing-overshoot-out-soft)}}}._title{font-size:14px;font-weight:450;letter-spacing:-.006em;text-align:center;transition-duration:.1s;transition-property:opacity;transition-timing-function:var(--transition-timing-ease-out)}._form{--background-color:oklch(0.97 0 0);background:var(--background-color);border-radius:24px;box-shadow:0 1px 0 0 oklch(1 0 0),inset 0 0 0 1px oklch(0 0 0/.02),inset 0 1px 0 0 oklch(0 0 0/.08),inset 0 4px 2px -1px oklch(0 0 0/.04),0 12px 24px oklch(0 0 0/.02);display:grid;grid-template-areas:"stack";overflow:hidden}._form-label{display:grid;grid-area:stack;padding:12px 48px 12px 20px}._form-input{appearance:none;background-color:transparent;font-weight:420;line-height:24px;outline:none;transition-duration:.1s;transition-property:opacity;transition-timing-function:var(--transition-timing-ease-out);&:autofill{box-shadow:inset 0 0 0 24px var(--background-color)}&:disabled{opacity:.4}}._form-submit-button{--size:32px;border-radius:50%;display:grid;grid-area:stack;grid-template-areas:"stack";height:var(--size);isolation:isolate;justify-self:end;margin:8px;outline:none;position:relative;width:var(--size);&:disabled{._form-submit-button-icon{opacity:.4}}&:not(:disabled):active{._form-submit-button-content{transform:scale(.92)}._form-submit-button-shadow{transform:scale(.8) translateZ(0)}}@media (any-hover:hover){&:not(:disabled):is(:focus-visible,:hover){._form-submit-button-icon{opacity:1;transform:scale(1.05)}}}@media (any-pointer:coarse){&:before{content:"";grid-area:stack;margin:-6px}}}._form-submit-button-content{background:oklch(0 0 0/.06);border-radius:inherit;display:grid;grid-area:stack;grid-template-areas:"stack";transition-duration:.1s;transition-property:transform;transition-timing-function:var(--transition-timing-standard)}._form-submit-button-inner-glow{border-radius:inherit;display:grid;grid-area:stack;grid-template-areas:"stack";margin:1px;overflow:hidden;&:before{--size:38.2%;align-self:end;background:oklch(1 0 0);border-radius:50%;content:"";filter:blur(4px);grid-area:stack;height:var(--size);justify-self:center;margin-bottom:2px;width:var(--size)}}._form-submit-button-icon{--size:20px;color:oklch(0 0 0);filter:drop-shadow(0 3px 1px oklch(0 0 0/.1));grid-area:stack;height:var(--size);opacity:.85;place-self:center;transition-duration:.1s;transition-property:opacity,transform;transition-timing-function:var(--transition-timing-ease-out);width:var(--size)}._form-submit-button-gloss-coating{background:radial-gradient(farthest-side,transparent 80%,oklch(1 0 0/.5));border-radius:inherit;box-shadow:inset 0 -8px 2px -6px oklch(1 0 0/.6);display:grid;grid-area:stack;grid-template-areas:"stack";isolation:isolate;margin:1px;&:after{--gradient-first-color-stop:oklch(1 0 0);align-self:start;background:linear-gradient(var(--gradient-first-color-stop) 25%,transparent);border-radius:50%/61.8% 61.8% 38.2% 38.2%;content:"";grid-area:stack;height:38.2%;justify-self:center;margin-top:2px;width:69%}}._form-submit-button-shadow{background:radial-gradient(farthest-side,oklch(0 0 0/.1) 5%,transparent);border-radius:50%;filter:blur(2px);height:38.2%;inset:auto 4px -19.1% 4px;pointer-events:none;position:absolute;transform:translateZ(0);transition-duration:.1s;transition-property:transform;transition-timing-function:var(--transition-timing-standard);z-index:-1}}what-is-your-email-view{@media (prefers-reduced-motion:no-preference){:has(._form-input:placeholder-shown) &{transition-delay:50ms}}}prove-it-view{max-width:320px;._form-label{padding:12px 20px}._form-input{font-variant-alternates:character-variant(cv01) styleset(ss02);font-variant-numeric:tabular-nums;text-align:center;&:not(:placeholder-shown){font-weight:500;letter-spacing:.2em;text-transform:uppercase}}}back-button,close-button{--size:36px;display:flex;grid-template-areas:"stack";height:var(--size);isolation:isolate;position:relative;width:var(--size);&[animate-on-entry]{transform:scale(1);transition-behavior:allow-discrete;transition-duration:.25s;transition-property:display,transform;transition-timing-function:var(--transition-timing-ease-out),var(--transition-timing-overshoot-out-soft);@starting-style{@media (prefers-reduced-motion:no-preference){transform:scale(0)}}}._button{--backdrop-filter:saturate(120%) blur(6px);-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter);background:oklch(.78 0 0/.3);border-radius:50%;display:grid;flex:1;grid-area:stack;grid-template-areas:"stack";outline:none;transition-duration:.1s;transition-property:transform;transition-timing-function:var(--transition-timing-standard);&:before{content:"";grid-area:stack;margin:-4px;pointer-events:none;@media (any-pointer:coarse){pointer-events:auto}}&:active{transform:scale(.95);&:before{pointer-events:auto}+._shadow{--gradient-first-color-stop:oklch(0 0 0/0.3);transform:scale(.75) translateZ(0)}}@media (any-hover:hover){&:is(:focus-visible,:hover){._button-icon{opacity:1;transform:scale(1.05)}._button-gloss-coating:after{--gradient-first-color-stop:oklch(1 0 0)}}}}._button-inner-glow{border-radius:inherit;display:grid;grid-area:stack;grid-template-areas:"stack";margin:1px;overflow:hidden;&:before{--size:38.2%;align-self:end;background:linear-gradient(oklch(1 0 0/.3),oklch(1 0 0/.5));border-radius:50%;content:"";filter:blur(4px);grid-area:stack;height:var(--size);justify-self:center;margin-bottom:2px;width:var(--size)}}._button-icon{--size:24px;color:oklch(0 0 0);filter:drop-shadow(0 3px 1px oklch(0 0 0/.15));grid-area:stack;height:var(--size);opacity:.85;place-self:center;transition-duration:.1s;transition-property:opacity,transform;transition-timing-function:var(--transition-timing-ease-out);width:var(--size)}._button-gloss-coating{background:radial-gradient(farthest-side,transparent 80%,oklch(1 0 0/.15));border-radius:inherit;box-shadow:inset 0 -8px 2px -6px oklch(1 0 0/.5);display:grid;grid-area:stack;grid-template-areas:"stack";isolation:isolate;margin:1px;&:after{--gradient-first-color-stop:oklch(1 0 0/0.9);align-self:start;background:linear-gradient(var(--gradient-first-color-stop),transparent);border-radius:50%/61.8% 61.8% 38.2% 38.2%;content:"";grid-area:stack;height:38.2%;justify-self:center;margin-top:2px;transition-duration:.1s;transition-property:--gradient-first-color-stop;transition-timing-function:var(--transition-timing-ease-out);width:69%}}._shadow{--gradient-first-color-stop:oklch(0 0 0/0.2);background:radial-gradient(farthest-side,var(--gradient-first-color-stop) 5%,transparent);border-radius:50%;filter:blur(4px);height:38.2%;inset:auto 0 -19.1% 0;pointer-events:none;position:absolute;transform:translateZ(0);transition-duration:.1s;transition-property:--gradient-first-color-stop,transform;transition-timing-function:var(--transition-timing-standard);z-index:-1}}back-button{._button-icon{--size:18px;margin-left:-2px}}