:root{--limestone:#F3EFE6;--mortar:#E3DCCD;--graphite:#2B2D2F;--slate:#5D6670;--verdigris:#346B61}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--limestone);color:var(--graphite);display:flex;flex-direction:column;
  font:17px/1.6 "Avenir Next",Avenir,Seravek,"Segoe UI Variable Text","Segoe UI",Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px}
.mark{width:clamp(112px,22vw,168px);height:auto;overflow:visible}
.s{fill:var(--graphite);transform-box:fill-box;transform-origin:center;animation:drop .7s cubic-bezier(.2,.8,.2,1) both}
.key{fill:var(--verdigris);animation:lock .55s cubic-bezier(.3,1.4,.5,1) 1.15s both}
.s1{animation-delay:.1s}.s2{animation-delay:.3s}.s3{animation-delay:.5s}.s4{animation-delay:.7s}
.word{margin:28px 0 0;font:600 clamp(40px,8vw,64px)/1 ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  letter-spacing:-.01em;animation:rise .8s ease 1.5s both}
.stop{display:inline-block;width:.34em;height:.3em;margin-left:.06em;background:var(--verdigris);
  clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}
.line{margin:24px 0 0;max-width:34em;color:var(--slate);font-size:clamp(17px,2.2vw,20px);animation:rise .8s ease 1.75s both}
.links{margin:28px 0 0;animation:rise .8s ease 1.95s both}
a{color:var(--graphite);text-decoration:none;border-bottom:1.5px solid var(--verdigris);padding-bottom:2px}
a:hover,a:focus-visible{color:var(--verdigris)}
a:focus-visible{outline:2px solid var(--verdigris);outline-offset:4px;border-radius:2px}
footer{text-align:center;padding:24px;color:var(--slate);font-size:14px;border-top:1px solid var(--mortar)}
@keyframes drop{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes lock{0%{opacity:0;transform:translateY(-26px)}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
