/* CSS 3D handheld label maker */
.lm{--W:360px;--H:214px;--D:64px;--s:1;position:relative;width:calc(var(--W)*var(--s));height:calc((var(--H) + 70px)*var(--s));perspective:1200px;perspective-origin:50% 30%}
.lm-rig{position:absolute;left:0;top:0;width:var(--W);height:var(--H);transform-origin:0 0;transform:scale(var(--s))}
.lm-box{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,16deg)) rotateY(var(--ry,-22deg)) rotateZ(-2deg);transition:transform .9s var(--ease-out)}
.lm-box .f{position:absolute;display:block;background:#23211F;border-radius:6px}
.lm-box .front{inset:0;transform:translateZ(calc(var(--D)/2));border-radius:26px 26px 22px 22px;background:linear-gradient(170deg,#2E2B28,#1A1917 60%);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),inset 0 -6px 0 rgba(0,0,0,.35)}
.lm-box .back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--D)/2));border-radius:26px;background:#141312}
.lm-box .top{left:14px;right:14px;top:0;height:var(--D);transform-origin:50% 0;transform:translateZ(calc(var(--D)/2)) rotateX(90deg);background:linear-gradient(90deg,#3a3633,#2a2724);border-radius:8px}
.lm-box .bottom{left:14px;right:14px;bottom:0;height:var(--D);transform-origin:50% 100%;transform:translateZ(calc(var(--D)/2)) rotateX(-90deg);background:#0e0d0c}
.lm-box .right{right:0;top:14px;bottom:14px;width:var(--D);transform-origin:100% 50%;transform:translateZ(calc(var(--D)/2)) rotateY(90deg);background:linear-gradient(180deg,#2b2825,#131211);border-radius:8px}
.lm-box .left{left:0;top:14px;bottom:14px;width:var(--D);transform-origin:0 50%;transform:translateZ(calc(var(--D)/2)) rotateY(-90deg);background:linear-gradient(180deg,#34302c,#1b1a18);border-radius:8px}
.lm-box .left::after{content:"";position:absolute;left:50%;top:22px;width:10px;height:52px;margin-left:-5px;border-radius:4px;background:#000;box-shadow:inset 0 0 0 2px #444}
/* front details */
.lm-face{position:absolute;inset:0;transform:translateZ(calc(var(--D)/2 + 1px));padding:18px 20px;display:grid;grid-template-columns:1fr 74px;grid-template-rows:62px 1fr;gap:12px 14px}
.lm-lcd{grid-column:1;border-radius:10px;background:#1E2A0A;box-shadow:inset 0 3px 8px rgba(0,0,0,.7),0 0 0 3px #0c0c0b,0 0 0 5px #3a3733;padding:8px 12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.lm-lcd small{font:700 9px/1 var(--text);letter-spacing:.14em;color:#86A92A;text-transform:uppercase}
.lm-lcd b{font:700 22px/1.1 var(--display);font-stretch:62%;letter-spacing:.08em;color:var(--tape);text-shadow:0 0 8px rgba(196,238,58,.55);white-space:nowrap;overflow:hidden;text-transform:uppercase}
.lm-lcd b::after{content:"_";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lm-wheel{grid-column:2;grid-row:1/3;border-radius:14px;background:#0b0b0a;box-shadow:inset 0 0 0 3px #3a3733,inset 0 8px 14px rgba(0,0,0,.9);position:relative;overflow:hidden;perspective:300px}
.lm-wheel::before,.lm-wheel::after{content:"";position:absolute;left:0;right:0;height:38%;z-index:2;pointer-events:none}
.lm-wheel::before{top:0;background:linear-gradient(#0b0b0a,transparent)}.lm-wheel::after{bottom:0;background:linear-gradient(transparent,#0b0b0a)}
.lm-cyl{position:absolute;left:8px;right:8px;top:50%;height:30px;margin-top:-15px;transform-style:preserve-3d;transition:transform .32s var(--ease-spring)}
.lm-cyl i{position:absolute;inset:0;display:grid;place-items:center;font:900 20px/1 var(--display);font-stretch:100%;font-style:normal;color:var(--ink);background:var(--tape);border-radius:3px;backface-visibility:hidden;box-shadow:inset 0 -2px 0 var(--tape-deep)}
.lm-wheel .notch{position:absolute;left:0;right:0;top:50%;height:34px;margin-top:-17px;border-top:2px solid var(--signal);border-bottom:2px solid var(--signal);z-index:3;pointer-events:none}
.lm-keys{grid-column:1;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;align-content:start}
.lm-keys i{height:18px;border-radius:5px;background:#3A3734;box-shadow:0 3px 0 #0d0c0b,inset 0 1px 0 rgba(255,255,255,.12);transition:transform .08s,box-shadow .08s,background .1s}
.lm-keys i.hit{transform:translateY(3px);box-shadow:0 0 0 #0d0c0b;background:var(--tape)}
.lm-keys i.wide{grid-column:span 4;background:var(--tape);box-shadow:0 3px 0 #6f8a12,inset 0 1px 0 rgba(255,255,255,.4)}
.lm-keys i.cut{grid-column:span 2;background:var(--signal);box-shadow:0 3px 0 #5e0b52}
.lm-brand{position:absolute;left:22px;bottom:12px;width:76px;color:#6d6862}
/* tape */
.lm-tape{position:absolute;left:-2px;top:96px;height:34px;width:0;transform:translateZ(calc(var(--D)/2 - 6px)) translateX(-100%);transform-origin:100% 50%;transition:width .35s var(--ease-out)}
.lm-tape .label{position:absolute;right:0;top:0;height:34px;font-size:15px;padding-left:1.1em;max-width:none}
.lm-shadow{position:absolute;left:8%;right:4%;bottom:0;height:40px;background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent);filter:blur(6px);transform:translateY(calc(var(--s)*20px))}
/* idle float */
.lm.idle .lm-box{animation:lmfloat 6s var(--ease-io) infinite alternate}
@keyframes lmfloat{from{transform:rotateX(16deg) rotateY(-24deg) rotateZ(-2deg) translateY(0)}to{transform:rotateX(20deg) rotateY(-16deg) rotateZ(-1deg) translateY(-8px)}}
.lm.thump .lm-box{animation:thump .14s var(--ease-out)}
@keyframes thump{50%{transform:rotateX(19deg) rotateY(var(--ry,-22deg)) rotateZ(-2deg) translateY(3px)}}
/* flying label */
.flylabel{position:fixed;z-index:60;pointer-events:none;will-change:transform}