.typ-typewriter{--burgundy:#7a2e2e;--burgundy-dark:#5b1f1f;--key:#f0ece8;--paper:#f5f1ea;--text:#c8a585;--tool:#daa55a;--duration:3s;animation:typ-bounce var(--duration) linear infinite;filter:drop-shadow(0 3px 5px #5b1f1f24)drop-shadow(0 12px 18px #5b1f1f1a);position:relative}.typ-slide{background:linear-gradient(var(--burgundy), var(--burgundy-dark));width:92px;height:20px;animation:typ-slide var(--duration) ease infinite;border-radius:3px;margin-left:14px;transform:translate(14px)}.typ-slide:before,.typ-slide:after,.typ-slide i:before{content:"";background:var(--tool);position:absolute}.typ-slide:before{width:2px;height:8px;top:6px;left:100%}.typ-slide:after{border-radius:3px;width:6px;height:14px;top:3px;left:94px}.typ-slide i{background:var(--tool);width:6px;height:4px;display:block;position:absolute;top:4px;right:100%}.typ-slide i:before{border-radius:2px;width:4px;height:14px;top:-2px;right:100%}.typ-paper{background:var(--paper);width:40px;height:46px;animation:typ-paper var(--duration) linear infinite;border-radius:5px;position:absolute;top:-26px;left:24px;transform:translateY(46px)}.typ-paper:before{content:"";background:var(--text);height:4px;box-shadow:0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);border-radius:2px;position:absolute;top:7px;left:6px;right:6px;transform:scaleY(.8)}.typ-keyboard{z-index:1;width:120px;height:56px;margin-top:-10px;position:relative}.typ-keyboard:before,.typ-keyboard:after{content:"";position:absolute}.typ-keyboard:before{background:linear-gradient(135deg, var(--burgundy), var(--burgundy-dark));transform-origin:50% 100%;border-radius:7px;inset:0;transform:perspective(10px)rotateX(2deg)}.typ-keyboard:after{width:11px;height:4px;box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);animation:typ-keyboard var(--duration) linear infinite;border-radius:2px;top:25px;left:2px}.typ-wrap:hover .typ-typewriter,.typ-wrap:hover .typ-slide,.typ-wrap:hover .typ-paper,.typ-wrap:hover .typ-keyboard:after{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.typ-typewriter,.typ-slide,.typ-paper,.typ-keyboard:after{animation:none}}@keyframes typ-bounce{85%,92%,to{transform:translateY(0)}89%{transform:translateY(-4px)}95%{transform:translateY(2px)}}@keyframes typ-slide{5%{transform:translate(14px)}15%,30%{transform:translate(6px)}40%,55%{transform:translate(0)}65%,70%{transform:translate(-4px)}80%,89%{transform:translate(-12px)}to{transform:translate(14px)}}@keyframes typ-paper{5%{transform:translateY(46px)}20%,30%{transform:translateY(34px)}40%,55%{transform:translateY(22px)}65%,70%{transform:translateY(10px)}80%,85%{transform:translateY(0)}92%,to{transform:translateY(46px)}}@keyframes typ-keyboard{5%,12%,21%,30%,39%,48%,57%,66%,75%,84%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}9%{box-shadow:15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}18%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}27%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}36%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key)}45%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}54%{box-shadow:15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}63%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key)}72%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}81%{box-shadow:15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key)}}.typ-wrap{transform-origin:50%;padding:40px 0;display:inline-block;transform:scale(1.8)}