.wrapper{--printer-color: #1f2937;--printer-color-2: #111827;--receipt-color: #f5f5f5;font-size:14px;position:relative;user-select:none;display:flex;justify-content:center;align-items:center;flex-direction:column}.printer{width:320px;height:80px;border-radius:0 0 8px 8px;background-color:var(--printer-color);border:2px solid var(--printer-color-2);box-shadow:0 16px 32px #0002,0 -30px 16px #0001;position:relative;z-index:3}.printer:before{content:"";position:absolute;top:-30px;left:0;width:100%;height:70px;border-radius:12px 12px 0 0;border-bottom:2px solid #0003;box-shadow:0 12px 16px -12px #fff5 inset,0 -6px 16px -6px #0003 inset,0 6px 8px -6px #0004;box-sizing:border-box;background-color:inherit;background-image:inherit;filter:brightness(1.12);z-index:2}.printer:after{content:"";position:absolute;top:20px;left:30px;width:260px;height:40px;border-radius:0 0 4px 4px;border-bottom:1px solid #0003;background-color:inherit;background-image:linear-gradient(to top,var(--printer-color),60%,var(--printer-color-2));box-shadow:0 4px 4px -2px #0004;z-index:1}.printer-display{z-index:4;display:flex;padding:6px 8px;position:absolute;top:-10px;left:50%;transform:translate(-50%);width:160px;height:32px;background-color:#000;background-image:linear-gradient(transparent 0,#fff2 90%,transparent 100%);background-size:100% 8px;background-repeat:no-repeat;border:3px solid var(--printer-color-2);border-radius:6px;box-sizing:border-box;box-shadow:-1px -1px 2px #fff9 inset,1px 1px 5px 1px #000 inset,0 0 1px 2px #0002;font-family:Courier New,Courier,monospace;font-size:.8em;color:#5aff5a;filter:drop-shadow(1px 1px 1px #0002)}.print-button{z-index:5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2em;position:absolute;top:-30px;right:-50px;margin:16px;border:1px solid #0001;border-radius:6px;width:48px;height:36px;background-color:#ea580c;color:#fff;box-shadow:1px 1px 2px #fff8 inset,-1px -1px 2px #0002 inset,0 2px 6px #0002;transition:box-shadow .1s ease-in-out,transform .1s ease-in-out}.print-button:hover{box-shadow:2px 2px 2px #fff9 inset,-2px -2px 2px #0002 inset,0 2px 10px #0002;transform:scale(1.05)}.print-button:active{box-shadow:2px 2px 2px #0002 inset,-2px -2px 2px #fff9 inset,0 0 4px #fff9;transform:scale(.95)}.receipt-wrapper{position:absolute;top:60px;z-index:1;filter:drop-shadow(0 0 12px #0001);transform:translateY(-100%);clip-path:inset(100% -100px -100px -100px);transition:clip-path .5s}.receipt{position:relative;display:flex;flex-direction:column;gap:1em;padding:16px;width:260px;min-height:160px;font-size:.85em;font-family:Azeret Mono,Roboto Mono,monospace;font-weight:400;color:#444;background-color:var(--receipt-color);box-shadow:0 12px 12px #0001,0 24px 24px #0001,0 36px 36px #0001}.receipt:before,.receipt:after{--angle: 45deg;content:"";display:block;position:absolute;left:0;width:100%;height:8px;background:linear-gradient(calc(var(--angle) * -1),var(--receipt-color) 4px,transparent 0),linear-gradient(var(--angle),var(--receipt-color) 4px,transparent 0);background-position:4px 0;background-repeat:repeat-x;background-size:8px 8px}.receipt:before{top:-8px;background-position:4px 0}.receipt:after{bottom:-8px;background-position:0 100%;--angle: 225deg}.receipt-header,.receipt-subheader,.receipt-message{display:flex;justify-content:space-between;padding:.2em 0}.receipt-header{font-size:1.1em;font-weight:600;text-align:center;flex-direction:column}.receipt-subheader{border-bottom:1px dashed #ccc;flex-direction:column}.receipt-message{justify-content:center;text-align:center;padding:10px 1em 0;margin-top:10px;border-top:1px dashed #ccc}.receipt-subtotal td{border-top:1px dashed #ccc;padding-top:8px}.receipt-total td{border-top:1px dashed #ccc;font-weight:600;font-size:1.1em;padding-top:8px}.receipt-table{font:inherit;color:inherit;text-align:left;line-height:1.5em;width:100%}.receipt-table th:last-child,.receipt-table td:last-child{text-align:right}.letter-wrapper{position:inherit;display:flex}.letter{display:inline-block;opacity:0}.wrapper.printing .receipt-wrapper{animation:print 1.2s 1 forwards ease-in,display .4s 1 forwards cubic-bezier(0,.63,.96,1.1);animation-delay:0s,1.35s}.wrapper.printing .printer-message{opacity:0}.wrapper.printing .letter:nth-child(1){animation-delay:.05s}.wrapper.printing .letter:nth-child(2){animation-delay:.1s}.wrapper.printing .letter:nth-child(3){animation-delay:.15s}.wrapper.printing .letter:nth-child(4){animation-delay:.2s}.wrapper.printing .letter:nth-child(5){animation-delay:.25s}.wrapper.printing .letter:nth-child(6){animation-delay:.3s}.wrapper.printing .letter:nth-child(7){animation-delay:.35s}.wrapper.printing .letter:nth-child(8){animation-delay:.4s}.wrapper.printing .letter:nth-child(9){animation-delay:.45s}.wrapper.printing .letter:nth-child(10){animation-delay:.5s}.wrapper.printing .letter:nth-child(11){animation-delay:.55s}.wrapper.printing .letter:nth-child(12){animation-delay:.6s}.wrapper.printing .letter{animation:show-text .6s 1 forwards linear}@keyframes print{to{transform:translateY(10%);clip-path:inset(-20% -100px -100px -100px)}}@keyframes display{30%{transform:translateY(22%) rotate3d(1,0,1,-5deg)}70%{z-index:5}to{z-index:5;transform:translateY(20px) scale(1.05)}}@keyframes show-text{10%,to{opacity:1}}