@property --uit{syntax:"<number>";inherits:true;initial-value:0}.werkbon{aspect-ratio:1/1.08;perspective:1400px;position:relative;container-type:inline-size}.werkbon__knop{cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:16px;width:100%;display:block;position:absolute;inset:0}.werkbon__rig{--u:1cqi;--diep:calc(var(--u) * 34);width:calc(var(--u) * 56);height:calc(var(--u) * 24);transform-style:preserve-3d;transform:translate(-50%, -50%) rotateX(calc(-16deg + var(--px,0deg))) rotateY(calc(-20deg + var(--py,0deg)));position:absolute;top:75%;left:50%}.werkbon__rig>*{display:block;position:absolute}.werkbon__voor{border-radius:calc(var(--u) * .8) calc(var(--u) * .8) calc(var(--u) * 2.4) calc(var(--u) * 2.4);background:linear-gradient(#ffffff12,#0000 30%),linear-gradient(#2a2b2f,#19191c);inset:0;box-shadow:inset 0 1px #ffffff1f}.werkbon__lampje{left:calc(var(--u) * 6);top:calc(var(--u) * 10);width:calc(var(--u) * 1.8);height:calc(var(--u) * 1.8);box-shadow:0 0 calc(var(--u) * 1.2) #00e5ff59;background:#00e5ff8c;border-radius:50%;position:absolute}.werkbon__vel[data-uit]~.werkbon__voor .werkbon__lampje{animation:.76s steps(2,jump-none) 3 werkbon-knipper}@keyframes werkbon-knipper{50%{box-shadow:0 0 calc(var(--u) * 2) #00e5ff99;background:#00e5fff2}}.werkbon__toets{right:calc(var(--u) * 6);top:calc(var(--u) * 9);width:calc(var(--u) * 8);height:calc(var(--u) * 3.6);border-radius:calc(var(--u) * 1.8);background:linear-gradient(#34353a,#26272b);position:absolute;box-shadow:inset 0 1px #ffffff1a,0 1px #00000080}.werkbon__lip,.werkbon__dek,.werkbon__gleuf{transform-origin:50% 0;width:100%;top:0;left:0}.werkbon__lip{height:calc(var(--u) * 4);border-radius:calc(var(--u) * .8) calc(var(--u) * .8) 0 0;background:linear-gradient(0deg, rgb(var(--world-light-rgb) / .08), transparent), #3a3b40;transform:rotateX(-90deg)}.werkbon__dek{height:calc(var(--diep) - var(--u) * 5.4);transform:translateZ(calc(var(--u) * -5.4)) rotateX(-90deg);border-radius:0 0 calc(var(--u) * 2) calc(var(--u) * 2);background:linear-gradient(180deg, rgb(var(--world-light-rgb) / .07), transparent 60%), linear-gradient(180deg, #34353a, #2a2b2f)}.werkbon__gleuf{top:calc(var(--u) * 1.4);height:calc(var(--u) * 1.4);transform:translateZ(calc(var(--u) * -4)) rotateX(-90deg);background:#050506}.werkbon__zij{width:var(--diep);border-radius:0 0 calc(var(--u) * 2) calc(var(--u) * 2);background:linear-gradient(#1f2023,#121214);height:100%;top:0}.werkbon__zij--links{transform-origin:0;left:0;transform:rotateY(90deg)}.werkbon__zij--rechts{transform-origin:100%;right:0;transform:rotateY(-90deg)}.werkbon__schaduw{left:calc(var(--u) * -10);width:calc(100% + var(--u) * 20);height:calc(var(--diep) + var(--u) * 14);transform-origin:50% 0;transform:translateZ(calc(var(--u) * 6)) rotateX(-90deg);background:radial-gradient(closest-side,#000000a6,#0000);border-radius:50%;top:100%}.werkbon__vel{width:calc(var(--u) * 46);height:calc(var(--u) * 62);margin-left:calc(var(--u) * -23);transform-origin:50% 100%;transform:translateZ(calc(var(--u) * -4.7)) rotateX(10deg);transition:--uit .76s cubic-bezier(.3,.1,.3,1);bottom:100%;left:50%}.werkbon__vel[data-uit]{--uit:1}.werkbon__bon{padding:calc(var(--u) * 3.6) calc(var(--u) * 3.4) calc(var(--u) * 6.5);text-align:left;color:#1a1a1a;background:linear-gradient(155deg, rgb(var(--world-light-rgb) / .12), transparent 55%), linear-gradient(180deg, #dedbd3, #f4f3ef 70%);transform:translateY(calc((1 - var(--uit)) * 100%));clip-path:inset(0 0 calc((1 - var(--uit)) * 100%) 0);--kartel:calc(var(--u) * 1.4);-webkit-mask:linear-gradient(#000, #000) bottom / 100% calc(100% - var(--kartel)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) top / calc(var(--kartel) * 2) var(--kartel) repeat-x;mask:linear-gradient(#000, #000) bottom / 100% calc(100% - var(--kartel)) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) top / calc(var(--kartel) * 2) var(--kartel) repeat-x;flex-direction:column;display:flex;position:absolute;inset:0}.werkbon__bon>*{display:flex}.werkbon__kop{font-family:var(--font-mono);font-size:calc(var(--u) * 2.3);letter-spacing:.14em;text-transform:uppercase;color:#6b6964;justify-content:space-between;font-weight:500}.werkbon__klus{margin-top:calc(var(--u) * 2.6);font-family:var(--font-body);font-size:calc(var(--u) * 3.6);letter-spacing:-.005em;font-weight:500;line-height:1.2}.werkbon__duur{margin-top:calc(var(--u) * .8);font-family:var(--font-mono);font-size:calc(var(--u) * 2.4);letter-spacing:.04em;color:#6b6964}.werkbon__streepjes{margin-top:calc(var(--u) * 2.4);border-top:1px dashed #0000004d}.werkbon__regel{margin-top:calc(var(--u) * 1.9);justify-content:space-between;gap:calc(var(--u) * 2);font-family:var(--font-mono);font-size:calc(var(--u) * 2.3);letter-spacing:.02em;color:#3a3936}.werkbon__totaal{justify-content:space-between;align-items:baseline;gap:calc(var(--u) * 1);padding-top:calc(var(--u) * 1.6);font-family:var(--font-mono);font-size:calc(var(--u) * 2.2);letter-spacing:.1em;text-transform:uppercase;color:#6b6964;border-top:1px solid #00000024;margin-top:auto}.werkbon__totaal b{font-family:var(--font-display);font-size:calc(var(--u) * 6);letter-spacing:-.03em;text-transform:none;color:#111;font-weight:700}.werkbon__voet{margin-top:calc(var(--u) * .9);justify-content:space-between;gap:calc(var(--u) * 1.5);font-family:var(--font-mono);font-size:calc(var(--u) * 1.75);letter-spacing:.06em;color:#6b6964}.werkbon__regel>span,.werkbon__voet>span{white-space:nowrap}.werkbon__vel--weg~.werkbon__vel{transition-delay:.18s}.werkbon__vel--weg{--uit:1;transform:translateZ(calc(var(--u) * -4.3)) rotateX(10deg);animation:.36s cubic-bezier(.55,0,.75,.3) forwards werkbon-scheur}@keyframes werkbon-scheur{to{translate:calc(var(--u) * 16) calc(var(--u) * -18) 0;opacity:0;rotate:11deg}}.werkbon__hint{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);justify-content:center;gap:.5rem;font-size:.6875rem;transition:color .2s;display:flex;position:absolute;bottom:0;left:0;right:0}.werkbon__knop:hover .werkbon__hint{color:var(--color-accent-primary)}.werkbon__knop:focus-visible{outline:2px solid var(--color-accent-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){.werkbon__vel{transition:none}.werkbon__vel[data-uit]~.werkbon__voor .werkbon__lampje{animation:none}}