.printer-scene {
  width: min(330px, 100%); margin-inline: auto; position: relative;
  -webkit-user-select: none; user-select: none;
}
.r-feed {
  /* clip window: negative margins + matching padding keep layout size while
     letting shadows and the sway escape on 3 sides. Sits ABOVE the housing
     (z-index) with its clip edge at the slit line, so the paper visibly
     comes out of the mouth rather than rising from behind the machine */
  position: relative; z-index: 4; overflow: hidden; box-sizing: content-box;
  margin: -80px -48px -9px; padding: 80px 48px 0;
  perspective: 1100px;
}
.r-tilt {
  /* pivots at the slot so the rising paper leans back and sways in 3D */
  height: 100%; transform-origin: 50% 100%;
  animation: paper-sway 3.6s ease-in-out infinite alternate;
}
@keyframes paper-sway {
  from { transform: rotateX(4deg); }
  to   { transform: rotateX(10.5deg); }
}
.r-carriage { transform: translateY(102%); will-change: transform; }
.receipt {
  position: relative; font-family: var(--font-mono-face); color: #2a3038;
  cursor: grab; touch-action: none; transition: transform .25s ease;
}
.receipt:hover { transform: translateY(-3px); }
.receipt:active { cursor: grabbing; }
.receipt::after {
  /* soft curl shading so the paper reads as bowed, not flat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(16,18,22,.10) 0%, rgba(16,18,22,0) 16%,
    rgba(16,18,22,0) 70%, rgba(16,18,22,.10) 100%);
}
.r-paper {
  background: #fff; padding: 18px 18px 10px;
  /* tight shadow that stays inside the clip window — a fat blur gets cut
     at the window edge and reads as a boxy haze */
  box-shadow: 0 12px 26px rgba(16,18,22,.13), 0 2px 8px rgba(16,18,22,.08);
}
.r-head { text-align: center; padding-bottom: 13px; border-bottom: 1px dashed #c9ccd3; }
.r-head svg { width: 24px; height: 24px; }
.r-head b { display: block; font-size: 12.5px; letter-spacing: .16em; margin-top: 6px; }
.r-head span { display: block; font-size: 9.5px; color: #99a0ab; letter-spacing: .1em; margin-top: 4px; }
.r-lines { padding: 8px 0 2px; }
.r-line { display: flex; align-items: baseline; gap: 10px; font-size: 11.5px; padding: 5.5px 0; }
.r-line .hrs { color: #99a0ab; margin-left: auto; white-space: nowrap; }
.r-line .amt { min-width: 48px; text-align: right; font-weight: 500; }
.r-total {
  border-top: 1px dashed #c9ccd3; display: flex; align-items: baseline;
  justify-content: space-between; padding: 11px 0 3px; font-size: 10.5px; letter-spacing: .08em;
}
.r-total b { font-size: 17px; letter-spacing: 0; }
.r-paid {
  margin: 10px auto 2px; width: max-content;
  background: #16181d; color: #fff; border-radius: 3px;
  padding: 4px 11px 5px; font-size: 9.5px; letter-spacing: .2em;
}
.r-note { text-align: center; font-size: 9.5px; color: #b3b9c3; padding: 8px 0 3px; letter-spacing: .06em; }
.r-zig {
  height: 12px;
  background:
    linear-gradient(-45deg, #fff 8px, transparent 0) 0 0 / 16px 16px repeat-x,
    linear-gradient(45deg, #fff 8px, transparent 0) 0 0 / 16px 16px repeat-x;
}
.printer {
  position: relative; z-index: 3; height: 46px; margin-inline: -18px;
  border-radius: 13px;
  background: linear-gradient(180deg, #363c47 0%, #1b1e25 46%, #101216 100%);
  box-shadow: 0 26px 54px rgba(16,18,22,.34), inset 0 1px 0 rgba(255,255,255,.10);
}
.printer::before {
  /* the mouth the paper feeds through */
  content: ""; position: absolute; left: 22px; right: 22px; top: 7px; height: 4px;
  border-radius: 2px; background: #05070a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05);
}
.printer .led {
  position: absolute; right: 15px; top: 55%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #3a4150;
  transition: background .2s ease, box-shadow .2s ease;
}
.printer.busy .led {
  background: var(--brand-bright); box-shadow: 0 0 8px rgba(77,147,236,.9);
  animation: led-blink 1.1s steps(2, start) infinite;
}
@keyframes led-blink { 50% { opacity: .4; } }