#ticket-press {
  width: 100%;
  min-width: 0;
  align-self: center;
  color: #243b42;
}

.tp-rig {
  width: min(100%, 680px);
  margin-inline: auto;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.tp-bed {
  position: relative;
  width: 100%;
  aspect-ratio: 620/454;
  isolation: isolate;
  transform-origin: 46% 76%;
  animation: tp-settle .69s cubic-bezier(.19,.74,.2,1) both;
}
.tp-chassis { display: block; width: 100%; height: 100%; }
.tp-console {
  position: absolute;
  left: 16.5%;
  top: 38.23%;
  width: 58.25%;
  height: 12.16%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26%;
  align-items: stretch;
  gap: 1.3cqw;
}
.tp-reel {
  position: relative;
  min-width: 0;
  padding: .45cqw 1.55cqw;
  background: linear-gradient(#e6ce9d,#ad966b 48%,#beb08a 56%,#8d7c59);
  border: .36cqw solid #101e24;
  border-radius: 1.25cqw;
  box-shadow: inset 0 .24cqw #f2dec2, 0 .2cqw #b3bb9e;
}
.tp-aperture {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: .45cqw;
  border: .22cqw solid #6a5e49;
  background: #fcf1cb;
  box-shadow: 0 0 0 .18cqw #dccc9f;
}
.tp-aperture::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom, #423d36a6 0%,#77684d2e 21%,#fffbed30 37%,transparent 51%,#a78a5915 78%,#56473799 100%);
  box-shadow:inset .36cqw 0 .65cqw -.38cqw #6f6043, inset -.42cqw 0 .72cqw -.38cqw #6f6043;
}
.tp-strip {
  position:absolute;
  inset-inline:0;
  top:50%;
  transform:translateY(-50%);
}
.tp-bed[data-phase="rolling"] .tp-strip {will-change:transform}
.tp-face {
  box-sizing:border-box;
  height:4.25cqw;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5cqw;
  border-block-end:1px solid #bfaa7d;
  padding:0 .6cqw;
  background:repeating-linear-gradient(75deg,#c2b28a07 0 1px,transparent 1px 3px),#f9edc9;
  color:#243d40;
  font:900 clamp(10px,3.15cqw,23px)/1.05 "Ticket Display","SimSun",serif;
}
.tp-face b {font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tp-face i {display:block;flex:none}
.tp-symbol-ticket {
  width:2.8cqw;height:1.6cqw;
  background:#b24d30;
  clip-path:polygon(0 0,100% 0,100% 34%,84% 50%,100% 66%,100% 100%,0 100%,0 66%,16% 50%,0 34%);
  transform:rotate(-12deg);
}
.tp-symbol-pads {
  width:.95cqw;height:.95cqw;margin:0 1.44cqw 1.05cqw 0;
  background:#ad502f;box-shadow:1.3cqw 0 #4b7565,0 1.25cqw #a47f31,1.3cqw 1.25cqw #4b526f;
}
.tp-index {
  position:absolute;
  top:50%;
  width:1.45cqw;height:1.7cqw;
  background:#a8412c;
  transform:translateY(-50%);
  clip-path:polygon(0 0,100% 50%,0 100%);
}
.tp-index-left { left:.17cqw }
.tp-index-right {right:.17cqw;transform:translateY(-50%) rotate(180deg)}
.tp-draw {
  position:relative;
  display:flex;
  align-self:center;
  align-items:center;
  justify-content:center;
  gap:.57cqw;
  height:82%;
  appearance:none;
  border:.35cqw solid #422c23;
  border-radius:.88cqw;
  padding:0;
  background:linear-gradient(#c75b3e,#b34b30);
  color:#fff2d4;
  box-shadow:inset 0 .44cqw #e29366,inset 0 -.54cqw #903b27,0 .65cqw #0e222b;
  font:750 clamp(8px,2.38cqw,16px)/1 "Microsoft YaHei","PingFang SC",sans-serif;
  cursor:pointer;
  touch-action:manipulation;
}
.tp-button-light {width:.67cqw;height:.67cqw;border-radius:50%;background:#ffeab0;box-shadow:0 0 .48cqw #e7bd67}
.tp-draw::after {content:"";position:absolute;inset:-.8cqw -.3cqw;}
.tp-draw[aria-disabled="true"] {transform:translateY(.38cqw);box-shadow:inset 0 .25cqw #d48865,inset 0 -.2cqw #8d392a,0 .2cqw #102b31;cursor:wait}
.tp-crank {
  position: absolute;
  left: 80.3%;
  top: 25.9%;
  width: 18.55%;
  height: 30.84%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.tp-crank svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tp-lever-arm {
  transform-origin: 31px 108px;
  transform: rotate(0);
  transition: transform .2s cubic-bezier(.18,.72,.25,1.3);
}
.tp-paper-window {
  position: absolute;
  top: 58.12%;
  left: 25%;
  height: 41.88%;
  width: 42%;
  overflow: hidden;
  pointer-events: none;
}
.tp-paper {
  display: block;
  position: absolute;
  left: 8%;
  top: -.15%;
  width: 84%;
  margin: 0;
  padding: .9cqw 0 1.1cqw;
  border: 0;
  appearance: none;
  text-align: center;
  color: #663b30;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform-origin: 50% 0;
  transform: translateY(0) rotate(-1deg);
  transition: transform .32s cubic-bezier(.18,.82,.24,1.3);
  filter: drop-shadow(.5cqw .98cqw .1cqw #41393250);
  outline-offset: -.65cqw;
}
.tp-paper::before, .tp-paper-tail {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #f6e2b4;
}
.tp-paper::before {
  box-shadow: inset 0 1.3cqw 1.35cqw -.8cqw #665b36aa;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 1.1cqw) no-repeat,
    conic-gradient(from 135deg at 50% 0, #000 0 90deg, transparent 0) bottom / 1.8cqw 1.35cqw repeat-x;
}
.tp-paper-tail {
  inset: -12cqw 0 auto;
  height: 12.1cqw;
  background-image: repeating-linear-gradient(90deg,#947a50 0 .6cqw,transparent 0 1.4cqw);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: center 90%;
}
.tp-print { display: block; padding: 1.1cqw 1.5cqw 1.9cqw; }
.tp-ticket-border {
  display: block;
  position: relative;
  padding: 1.55cqw 1cqw .73cqw;
  border: .45cqw double #b04b35;
  box-shadow: inset 0 0 0 .35cqw #f6e2b4, inset 0 0 0 .52cqw #b7533d;
  background-image: repeating-linear-gradient(52deg,transparent 0 3px,#b55c3e09 3px 4px);
}
.tp-ticket-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  color: #a5432f;
  font: 800 clamp(8px, 1.65cqw, 11px)/1.35 "Microsoft YaHei","PingFang SC",sans-serif;
  letter-spacing: .14em;
}
.tp-ticket-cap i { width: 2.25cqw; height: 3px; border-block: 1px solid currentColor; }
.tp-ticket-title {
  display: block;
  margin: 1.25cqw 0 1.52cqw;
  color: #a9432c;
  font: 900 clamp(15px, 3.85cqw, 29px)/1.13 "STKaiti","KaiTi","SimSun",serif;
  letter-spacing: .065em;
}
.tp-ticket-foot {
  display: flex;
  justify-content: space-between;
  gap: .5cqw;
  padding: .8cqw .4cqw .1cqw;
  border-top: 1px dashed #ad6246;
  color: #814932;
  font: 700 clamp(7px, 1.54cqw, 10px)/1.35 "Courier Prime",Consolas,"Microsoft YaHei",monospace;
  letter-spacing: .025em;
}
.tp-ink-stamp {
  display: block;
  position: absolute;
  right: 7%;
  top: 27%;
  padding: .5cqw .75cqw;
  color: #9f3c27;
  border: .55cqw double currentColor;
  background: #f4dfad;
  font: 800 2.6cqw/1.2 "SimSun",serif;
  transform: rotate(-12deg);
  opacity: 0;
}
.tp-teeth {
  position: absolute;
  top: 57.7%;
  left: 25.5%;
  width: 41%;
  height: 1.6%;
  background: #b7b59a;
  border-top: .26cqw solid #6f766c;
  mask: conic-gradient(from 135deg at 50% 0,#000 0 90deg,transparent 0) 0 100%/1.35cqw 100% repeat-x;
  pointer-events: none;
}
.tp-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tp-bed[data-phase="rolling"] .tp-lever-arm {animation:tp-crank .44s ease-out}
.tp-bed[data-phase="rolling"] .tp-paper {transform:translateY(-88%) rotate(0deg);transition:transform .27s ease-in;pointer-events:none}
.tp-bed[data-phase="printing"] .tp-paper {animation:tp-feed-ticket .44s cubic-bezier(.16,.77,.25,1) both}
.tp-bed[data-phase="printing"] .tp-reel {box-shadow:inset 0 .24cqw #f2dec2,0 0 1.4cqw #ffd47777}
.tp-bed[data-phase="tearing"] .tp-paper {animation:tp-tear .425s ease-in both;pointer-events:none}
.tp-bed[data-phase="tearing"] .tp-ink-stamp {animation:tp-stamp .24s ease-out both}
.tp-bed button:focus-visible {outline:3px solid #bf5831;outline-offset:.35cqw}
.tp-bed .tp-paper:focus-visible {outline-offset:-.8cqw}
@media (hover:hover) {
  .tp-draw:not([aria-disabled="true"]):hover {background:#c25b3e}
  .tp-crank:not([aria-disabled="true"]):hover .tp-lever-arm {transform:rotate(6deg)}
  .tp-paper:not([aria-disabled="true"]):hover .tp-ticket-border {background-color:#f9e7be}
}
@keyframes tp-settle {
  0% {transform:translateY(-2.3%) rotate(-2deg)}
  58% {transform:translateY(.55%) rotate(.6deg)}
  84% {transform:translateY(-.18%) rotate(-.16deg)}
  100% {transform:none}
}
@keyframes tp-feed-ticket {
  0% {transform:translateY(-88%) rotate(0)}
  82% {transform:translateY(1.7%) rotate(-1.5deg)}
  100% {transform:translateY(0) rotate(-1deg)}
}
@keyframes tp-tear {
  0% {transform:rotate(-1deg)}
  40% {transform:translateY(1.2cqw) rotate(-2deg)}
  63% {opacity:1}
  100% {transform:translate(1cqw,17cqw) rotate(6deg);opacity:0}
}
@keyframes tp-stamp {
  0%,12% {opacity:0;transform:scale(1.6) rotate(-16deg)}
  44% {opacity:1;transform:scale(.95) rotate(-12deg)}
  100% {opacity:1;transform:rotate(-12deg)}
}
@keyframes tp-crank {
  0%,100% {transform:rotate(0)}
  34% {transform:rotate(40deg)}
  66% {transform:rotate(25deg)}
}
@media (prefers-reduced-motion: reduce) {
  .tp-bed,.tp-bed * {transition:none!important;animation:none!important}
  .tp-bed[data-phase="tearing"] .tp-ink-stamp {opacity:1}
}