/* The cat lives on the email field's underline. Its layer ends at the line, so anything below the line is hidden. */
.cat-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;pointer-events:none;z-index:3;visibility:hidden}
.cat-fx{position:absolute;inset:0}
.cat-sprite{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform;
  background:linear-gradient(160deg,#f2f6fc 0%,#c9d1dc 45%,#8d98a7 75%,#dfe6ee 100%);
  -webkit-mask:url(../images/cat-poses.webp) no-repeat;mask:url(../images/cat-poses.webp) no-repeat}
.scene,.content{min-width:0}
h1 .headline-top{display:inline-block;white-space:nowrap;background:none;color:inherit}
.headline-bottom{display:inline-block}
.content .notify{max-width:440px}
/* honeypot field for bots: off-screen, never seen or reached by people */
.notify .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.input-row{align-items:flex-end;gap:24px;padding:0 0 6px}
.input-row input{padding:16px 0 0;font-size:13px;line-height:20px}
.input-row button{display:inline-flex;align-items:center;justify-content:center;gap:9px;align-self:flex-end;padding:0 0 0 14px;min-height:20px;position:relative}
.input-row button:before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:1px;background:linear-gradient(transparent,#b2bfce66,transparent)}
.input-row button span{margin:0;font-size:12px;font-weight:300;letter-spacing:.04em;background:var(--metal);background-clip:text;-webkit-background-clip:text;color:transparent;transform:none}
.input-row button:hover span{transform:none}
.notify-arrow{width:13px;height:13px;flex:none;transition:transform .25s,filter .25s}
.input-row button:hover .notify-arrow{transform:translate(2px,-2px);filter:brightness(1.3)}
@media(max-width:800px){
  .content .notify{margin-top:42px;max-width:none}
  .input-row{gap:14px}
  .input-row button{gap:8px;padding-left:12px}
  .notify-arrow{width:12px;height:12px}
  main{padding-top:135px}
}
@media(prefers-reduced-motion:reduce){.notify-arrow{transition:none}}
@media(max-width:360px){h1{font-size:38px}.status{font-size:7px}.brand{font-size:12px}}

/* Headline letters, as on takethecrown.dev: condense out of a blur, then breathe. */
.fx-letters{-webkit-user-select:none;user-select:none}
.fx-letters span:not(.ch){background:none}
.ch{display:inline-block;white-space:pre;will-change:transform,filter;
  background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent;
  transform:translateY(var(--ty,0)) scale(var(--sc,1));filter:blur(var(--bl,0px));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fx-letters .ch{opacity:0;--bl:14px;--ty:.35em;--sc:1.08}
.fx-letters.lit .ch{opacity:1;--bl:0px;--ty:0;--sc:1;transition:opacity .9s cubic-bezier(.16,1,.3,1) calc(var(--i)*28ms),transform 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i)*28ms),filter 1.1s cubic-bezier(.16,1,.3,1) calc(var(--i)*28ms)}
@property --blr{syntax:"<length>";inherits:false;initial-value:0px}
@property --mlt{syntax:"<number>";inherits:false;initial-value:1}
@property --dimv{syntax:"<number>";inherits:false;initial-value:1}
.fx-letters.settled .ch{animation:breathe 9s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i)*140ms);
  transform-origin:50% 0;transform:scaleY(var(--mlt)) translateY(calc((var(--mlt) - 1)*.4em));
  filter:brightness(var(--dimv)) blur(var(--blr));transition:none}
@keyframes breathe{
  0%,100%{--blr:0px;--mlt:1;--dimv:1}
  50%{--blr:2.6px;--mlt:1.045;--dimv:.78}}