/* Animated Provomatic device on the home page (see assets/device.js). */
.dev .key{display:grid;place-items:center;border-radius:12px;background:#F7F7F3;box-shadow:inset 0 -5px 0 #C9C9C2,0 2px 0 #A9A9A2,0 6px 12px rgba(30,31,34,.18);font-weight:700;font-size:13px;color:#1E1F22;height:64px}
.dev{position:relative;z-index:2;background:linear-gradient(180deg,#E2E2DC,#CFCFC8);border-radius:28px;padding:30px;box-shadow:inset 0 2px 0 #F5F5F0,inset 0 -3px 0 #B4B4AD,0 30px 50px rgba(30,31,34,.22),0 4px 8px rgba(30,31,34,.12)}
.panel{background:#26282C;border-radius:16px;padding:18px}
.lcd{position:relative;overflow:hidden;background:#B6C59E;border-radius:8px;padding:14px 18px;min-height:calc(4 * 1.12em + 28px);box-shadow:inset 0 3px 10px rgba(0,0,0,.35);font-family:'VT323',monospace;color:#1F2B17;font-size:26px;line-height:1.12;text-shadow:1.5px 1.5px 0 rgba(31,43,23,.16)}
.lcd::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.lcd::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 0%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
.lcd.boot{animation:boot .9s steps(6) both}
@keyframes boot{0%{filter:brightness(.55)}30%{filter:brightness(1.12)}45%{filter:brightness(.8)}100%{filter:none}}
.ln{display:flex;justify-content:space-between;gap:12px;min-height:1.12em;white-space:pre}
.cur{display:inline-block;width:.55em;height:.95em;margin-left:1px;vertical-align:-.12em;background:#1F2B17;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.keys .key{font:inherit;font-weight:700;font-size:13px;border:0;cursor:pointer;position:relative;transition:transform .08s ease,box-shadow .08s ease,background .2s}
.keys .key.active{background:#FF6A13;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 2px 0 rgba(0,0,0,.3),0 6px 12px rgba(30,31,34,.25)}
.keys .key::after{content:"";position:absolute;top:9px;left:10px;width:6px;height:6px;border-radius:50%;background:#C9C9C2;transition:background .3s,box-shadow .3s}
.keys .key.done::after{background:#3BD16F;box-shadow:0 0 6px #3BD16F}
.keys .key.active::after{background:#FFF3E6;box-shadow:0 0 6px #FFF3E6}
.keys .key.pressed{transform:translateY(4px);box-shadow:inset 0 -1px 0 #C9C9C2,0 0 0 #A9A9A2,0 1px 2px rgba(30,31,34,.2)}
.keys .key.active.pressed{box-shadow:inset 0 -1px 0 rgba(0,0,0,.25),0 0 0 rgba(0,0,0,.3),0 1px 2px rgba(30,31,34,.2)}
.keys .key:focus-visible,.knob:focus-visible,.dev-pause:focus-visible{outline:3px solid #FF6A13;outline-offset:3px}
.row{display:flex;align-items:center;gap:16px;margin-top:18px}
.knob{--rot:30deg;width:54px;height:54px;border-radius:50%;border:0;padding:0;cursor:pointer;background:conic-gradient(from 210deg,#3A3C41,#5B5D63,#3A3C41);box-shadow:0 3px 6px rgba(0,0,0,.4),inset 0 0 0 4px #2F3135;position:relative;transform:rotate(var(--rot));transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.knob-mark{position:absolute;left:50%;top:6px;width:4px;height:14px;background:#FF6A13;border-radius:2px;transform:translateX(-50%)}
.knob-l [data-lang]{transition:color .2s}
.knob-l [data-lang].on{color:#FFFFFF;font-weight:700}
.led{width:10px;height:10px;border-radius:50%;background:#3BD16F;box-shadow:0 0 10px #3BD16F;transition:background .2s,box-shadow .2s}
.led.busy{background:#F5B841;box-shadow:0 0 12px #F5B841;animation:pulse .7s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.slot{position:relative;margin:22px auto 0;width:62%;height:14px;border-radius:7px;background:#26282C;box-shadow:inset 0 3px 4px rgba(0,0,0,.6);overflow:hidden}
.slot-light{position:absolute;left:8%;right:8%;top:50%;height:2px;border-radius:2px;background:#FF6A13;opacity:0;transform:translateY(-50%);box-shadow:0 0 12px 3px rgba(255,106,19,.65);transition:opacity .4s}
.slot.on .slot-light{opacity:1;animation:scan 1.1s ease-in-out infinite alternate}
@keyframes scan{from{left:8%;right:60%}to{left:60%;right:8%}}
.dev-pause{position:absolute;right:0;top:-46px;font:inherit;font-size:13px;font-weight:600;color:#46474D;background:transparent;border:1.5px solid #B4B4AD;border-radius:999px;min-height:36px;padding:0 14px;cursor:pointer}
.dev-pause:hover{border-color:#46474D}
.machine{margin-top:14px;height:74px}
.gears{display:block;width:100%;height:100%;overflow:visible}
.gear-wrap{opacity:.32;transform:translateY(-10px);transition:transform .6s cubic-bezier(.3,1.6,.5,1),opacity .45s}
.gear-wrap.on{opacity:1;transform:none}
.gear-wrap .tooth{fill:none;stroke:#5A5D66;stroke-width:1.2;stroke-dasharray:3 3}
.gear-wrap.on .tooth{fill:url(#metal);stroke:#15161A;stroke-width:1.2;stroke-dasharray:none}
.gear-wrap .hub{fill:#26282C;stroke:#5A5D66;stroke-width:1.2}
.gear-wrap .core{fill:#3A3C42}
.gear-wrap.busy .core{fill:#F5B841;filter:drop-shadow(0 0 4px #F5B841)}
.gear-wrap.ok .core{fill:#3BD16F;filter:drop-shadow(0 0 4px #3BD16F)}
.paper{position:absolute;z-index:3;left:50%;width:50%;transform:translateX(-50%);clip-path:inset(0 -40px -800px -40px);pointer-events:none}
.ticket{position:relative;background:#FFFFFF;padding:16px 16px 24px;font-size:14px;line-height:1.45;display:grid;gap:3px;box-shadow:0 12px 22px rgba(30,31,34,.2);transform:translateY(-101%);transform-origin:50% 0}
.ticket .t-title{font-size:16px}
.ticket .t-sub{color:#55565C}
.ticket .t-rule{border-top:1.5px dashed #C9C9C2;margin:8px 0}
.ticket .t-row{display:flex;justify-content:space-between;gap:10px;font-family:'VT323',monospace;font-size:17px;line-height:1.2}
.ticket .t-k{color:#6B6C72}
.ticket .t-sum{font-size:21px}
.ticket .t-thanks{margin-top:10px;text-align:center;font-size:13px;color:#6B6C72}
.ticket .t-perf{position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(-45deg,transparent 3px,#FFFFFF 0) 0 0/6px 6px repeat-x,linear-gradient(45deg,transparent 3px,#FFFFFF 0) 0 0/6px 6px repeat-x}
.ticket{visibility:hidden}
.ticket.print,.ticket.out,.ticket.tear{visibility:visible}
.ticket.print{animation:feed 3.2s steps(32) forwards}
@keyframes feed{from{transform:translateY(-101%)}to{transform:translateY(0)}}
.ticket.out{transform:translateY(0) rotate(-1.2deg);transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.ticket.tear{animation:tear .7s ease-in forwards}
@keyframes tear{from{transform:translateY(0) rotate(-1.2deg);opacity:1}to{transform:translate(30px,90px) rotate(-12deg);opacity:0}}
@media (prefers-reduced-motion: reduce){.gear-wrap{transition:none}.ticket.print,.ticket.out{animation:none;transform:none}}
.ripple{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.9);pointer-events:none;animation:ripple .55s ease-out forwards}
.keys .key:not(.active) .ripple{border-color:rgba(255,106,19,.8)}
@keyframes ripple{from{transform:scale(.4);opacity:1}to{transform:scale(5);opacity:0}}
@media (prefers-reduced-motion: reduce){.lcd.boot,.cur,.led.busy,.slot.on .slot-light{animation:none}.knob,.keys .key{transition:none}.ticket.print,.ticket.settled{animation:none;opacity:1;transform:translate(-50%,30px) rotate(-2deg)}.dev-pause{display:none}}
@media (max-width:560px){.lcd{font-size:19px;padding:12px 14px}.paper{width:80%}.keys{gap:8px}.keys .key{font-size:12px}}

/* Layout around the device on the website */
.dev-wrap{margin:0;position:relative;padding-bottom:230px;padding-top:46px}
.dev{color:#1E1F22}
.dev-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;padding:0 6px}
.dev-name{font-weight:800;font-size:17px;letter-spacing:-.01em}
.dev-model{font-size:13px;color:#55565C}
.knob-l,.led-l{font-size:12px;color:#B8BAC0;line-height:1.4}
.ticket{color:#1E1F22}
.dev-pause{top:0!important;color:var(--muted)!important;border-color:var(--line)!important}