[data-play] .plr .zaag{--zaag-row:54px;--zaag-gap:8px;--zaag-hop:var(--zaag-row);--zaag-ball:34px;--zaag-lanegap:6px;--zaag-badge:28px;--zaag-pad:8px;--zaag-bw:1.5px;--zaag-dot:5px;--zaag-heap:7px;--zaag-countw:26px;--zaag-code:16px;--zaag-dropgap:10px;--zaag-pitch:calc(var(--zaag-row) + var(--zaag-gap));--zaag-tray:calc(2 * var(--zaag-pad) + var(--zaag-badge) + 8px + var(--zaag-lanes, 1) * var(--zaag-ball) + (var(--zaag-lanes, 1) - 1) * var(--zaag-lanegap));display:grid;gap:10px;min-width:0}[data-play] .plr .zaag[data-mode=value]{--zaag-hop:94px}[data-play] .plr .zaag[data-mode=pour]{--zaag-tray:164px}[data-play] .plr .zaag-chute{position:relative;display:grid;gap:var(--zaag-gap);width:100%;max-width:480px;min-width:0;margin-inline:auto}[data-play] .plr .zaag-gates{display:grid;gap:var(--zaag-gap);margin:0;padding:0;list-style:none;min-width:0}[data-play] .plr .zaag-row{position:relative;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) var(--zaag-tray);height:var(--zaag-row);min-width:0;border:var(--zaag-bw) solid var(--al-line);border-radius:14px;background:var(--al-paper);box-shadow:inset 0 -3px 0 var(--al-line);transition:border-color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard),box-shadow var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag-hop{height:var(--zaag-hop);border-color:transparent;background:transparent;box-shadow:none}[data-play] .plr .zaag[data-mode=value] .zaag-hop{grid-template-columns:minmax(0,1fr)}[data-play] .plr .zaag-else{background:var(--plr-quiet)}[data-play] .plr .zaag-else,[data-play] .plr .zaag[data-mode=value] .zaag-row{box-shadow:none}[data-play] .plr .zaag-row[data-lifted]{border-color:var(--al-accent);background:var(--al-soft);box-shadow:inset 0 -3px 0 var(--al-accent),0 6px 14px rgb(0 0 0/.12)}[data-play] .plr .zaag-row[data-drag]{z-index:3;border-color:var(--al-accent);background:var(--al-soft);box-shadow:inset 0 -3px 0 var(--al-accent),0 10px 22px rgb(0 0 0/.18)}[data-play] .plr .zaag-row[data-dead]{border-style:dashed;box-shadow:none}[data-play] .plr .zaag-row[data-dead] .zaag-code,[data-play] .plr .zaag-row[data-dead] .zaag-code b{color:var(--al-muted)}[data-play] .plr .zaag-gate{display:flex;align-items:center;gap:8px;min-width:0;height:100%;margin:0;padding:0 8px 0 10px;border:0;border-radius:12px 0 0 12px;background:transparent;color:var(--al-ink);font:inherit;text-align:left}[data-play] .plr button.zaag-gate{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}[data-play] .plr button.zaag-gate[aria-disabled=true]{cursor:default;touch-action:auto}[data-play] .plr .zaag-row[data-drag] button.zaag-gate{cursor:grabbing}[data-play] .plr button.zaag-gate:focus-visible{outline:3px solid var(--al-accent);outline-offset:-3px}[data-play] .plr .zaag-grip{flex:none;width:10px;height:16px;fill:var(--al-muted)}[data-play] .plr button.zaag-gate:hover:not([aria-disabled=true]) .zaag-grip{fill:var(--al-accent)}[data-play] .plr button.zaag-gate[aria-disabled=true] .zaag-grip{opacity:.4}[data-play] .plr .zaag-words{display:grid;gap:1px;min-width:0}[data-play] .plr .zaag-code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--zaag-code)/1.25 var(--plr-mono);color:var(--al-ink)}[data-play] .plr .zaag-code b{color:var(--al-accent);font-weight:600}[data-play] .plr .zaag-dead{font:500 13px/1.2 var(--plr-sans);color:var(--al-muted)}[data-play] .plr .zaag-lamp{flex:none;margin-left:auto;padding:2px 8px;border-radius:999px;border:1.5px solid var(--al-line);background:var(--al-paper);color:var(--al-ink);font:600 13px/1.3 var(--plr-mono);transition:border-color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard),color var(--motion-quick) var(--ease-standard),opacity var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag-lamp[data-lamp=true]{border-color:var(--al-accent);background:var(--al-soft);color:var(--al-accent)}[data-play] .plr .zaag-lamp[data-lamp=skip]{border-style:dashed;color:var(--al-muted);font-family:var(--plr-sans);font-weight:500}[data-play] .plr .zaag-tray{display:flex;align-items:center;gap:8px;min-width:0;padding:0 var(--zaag-pad);border-left:1px solid var(--al-line);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--al-ink) 4%,var(--al-paper));transition:box-shadow var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag-hopper{border:1.5px dashed var(--al-line);border-radius:12px;background:transparent;transition:border-color var(--motion-standard) var(--ease-standard)}[data-play] .plr .zaag[data-mode=drop] .zaag-hopper{margin-left:calc(var(--zaag-badge) + 8px)}[data-play] .plr .zaag-hopper[data-empty]{border-color:transparent}[data-play] .plr .zaag-bin{flex:none;display:grid;place-items:center;width:var(--zaag-badge);height:var(--zaag-badge);border:1.5px solid var(--al-line);border-radius:8px;background:var(--al-paper);color:var(--al-ink);font:700 14px/1 var(--plr-sans);transition:border-color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard),color var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag-bin[data-live]{border-color:var(--al-accent);background:var(--al-soft);color:var(--al-accent)}[data-play] .plr .zaag-count{flex:none;width:var(--zaag-countw);font:600 14px/1 var(--plr-mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;text-align:right;color:var(--al-ink)}[data-play] .plr .zaag-bar{flex:1 1;min-width:0;height:10px;overflow:hidden;border-radius:5px;background:color-mix(in srgb,var(--al-ink) 9%,var(--al-paper))}[data-play] .plr .zaag-bar i{display:block;height:100%;width:calc(var(--f, 0) * 100%);border-radius:inherit;background:var(--al-accent);transition:background-color var(--motion-standard) var(--ease-standard)}[data-play] .plr .zaag[data-verdict=right] .zaag-bar i{background:var(--plr-ok)}[data-play] .plr .zaag-tray[data-miss]{box-shadow:inset 0 0 0 2px var(--plr-warn)}[data-play] .plr .zaag-drop{justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-right:var(--zaag-dropgap);padding:8px 16px;border:1.5px solid var(--al-accent);border-radius:999px;background:var(--al-paper);color:var(--al-accent);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--al-accent) 40%,transparent);font:600 15px/1 var(--plr-sans);cursor:pointer;transition:background-color var(--motion-quick) var(--ease-standard),box-shadow var(--motion-quick) var(--ease-standard),opacity var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag[data-mode=drop] .zaag-drop{margin-right:calc(var(--zaag-dropgap) - var(--zaag-badge) - 8px)}[data-play] .plr .zaag-drop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}[data-play] .plr .zaag-drop:hover:not([aria-disabled=true]){background:var(--al-soft)}[data-play] .plr .zaag-drop:focus-visible{outline:3px solid var(--al-accent);outline-offset:2px}[data-play] .plr .zaag-drop[aria-disabled=true]{opacity:.45;cursor:default}[data-play] .plr .zaag-set{display:grid;align-content:center;gap:2px;min-width:0;padding:0 2px}[data-play] .plr .zaag-say{margin:0;text-align:center;font:500 17px/1.3 var(--plr-mono);color:var(--al-ink)}[data-play] .plr .zaag-var{color:var(--al-ink)}[data-play] .plr .zaag-dial .plr-ticks{font-size:13px}[data-play] .plr .zaag-val{display:inline-block;min-width:3ch;padding:1px 6px;border-radius:7px;background:var(--al-soft);color:var(--al-accent);font-weight:600;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}[data-play] .plr .zaag-balls{position:absolute;z-index:2;top:0;right:var(--zaag-bw);width:var(--zaag-tray);height:100%;pointer-events:none}[data-play] .plr .zaag-ball{--y:calc(var(--zaag-hop) - var(--zaag-row) + var(--k, 0) * var(--zaag-pitch));position:absolute;top:calc((var(--zaag-row) - var(--zaag-ball)) / 2);left:calc(var(--zaag-pad) + var(--zaag-badge) + 8px + var(--lane, 0) * (var(--zaag-ball) + var(--zaag-lanegap)));box-sizing:border-box;display:grid;place-items:center;width:var(--zaag-ball);height:var(--zaag-ball);border:2px solid var(--al-accent);border-radius:50%;background:radial-gradient(circle at 34% 30%,var(--al-paper),var(--al-soft) 70%);box-shadow:0 2px 0 color-mix(in srgb,var(--al-accent) 35%,transparent);color:var(--al-accent);font:700 13px/1 var(--plr-mono);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;transform:translateY(var(--y));transition:border-color var(--motion-quick) var(--ease-standard),color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard)}[data-play] .plr .zaag-ball[data-state=right]{border-color:var(--plr-ok);color:var(--plr-ok);background:color-mix(in srgb,var(--plr-ok) 14%,var(--al-paper));box-shadow:0 2px 0 color-mix(in srgb,var(--plr-ok) 40%,transparent)}[data-play] .plr .zaag-ball[data-state=miss]{border-color:var(--plr-warn);color:var(--plr-warn-text);background:color-mix(in srgb,var(--plr-warn) 16%,var(--al-paper));box-shadow:0 2px 0 color-mix(in srgb,var(--plr-warn) 40%,transparent)}[data-play] .plr .zaag-num{display:inline-block}[data-play] .plr .zaag-dot{--x0:calc((var(--zaag-tray) - (var(--zaag-heapcols, 17) - 1) * var(--zaag-heap) - var(--zaag-dot)) / 2 + var(--hx, 0) * var(--zaag-heap));--y0:calc((var(--zaag-hop) - (var(--zaag-heaprows, 6) - 1) * var(--zaag-heap) - var(--zaag-dot)) / 2 + var(--hy, 0) * var(--zaag-heap));--barx:calc(var(--zaag-pad) + var(--zaag-badge) + 8px + var(--zaag-countw) + 8px);--x1:calc(var(--barx) + var(--jx, 0) * (var(--zaag-tray) - var(--barx) - var(--zaag-pad) - var(--zaag-dot)));--y1:calc(var(--zaag-hop) - var(--zaag-row) + var(--k, 0) * var(--zaag-pitch) + (var(--zaag-row) - var(--zaag-dot)) / 2);position:absolute;top:0;left:0;width:var(--zaag-dot);height:var(--zaag-dot);border-radius:50%;background:var(--al-accent);transform:translate(var(--x0),var(--y0))}[data-play] .plr .zaag-dot[data-at=row]{transform:translate(var(--x1),var(--y1));opacity:0}@keyframes zaag-fall{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.55,0,.9,.45)}68%{transform:translateY(var(--y));animation-timing-function:cubic-bezier(.2,.7,.4,1)}82%{transform:translateY(calc(var(--y) - 10px));animation-timing-function:cubic-bezier(.55,0,.9,.45)}to{transform:translateY(var(--y))}}@keyframes zaag-pop{0%{opacity:0;transform:translateY(calc(var(--y) - 14px)) scale(.55)}to{opacity:1;transform:translateY(var(--y)) scale(1)}}@keyframes zaag-pour{0%{opacity:1;transform:translate(var(--x0),var(--y0));animation-timing-function:cubic-bezier(.55,0,.9,.45)}80%{opacity:1;transform:translate(var(--x1),var(--y1))}to{opacity:0;transform:translate(var(--x1),var(--y1)) scale(.3)}}@keyframes zaag-heap{0%{opacity:0;transform:translate(var(--x0),calc(var(--y0) - 10px)) scale(.3)}to{opacity:1;transform:translate(var(--x0),var(--y0))}}@keyframes zaag-tick{0%{transform:translateY(-5px);opacity:.3}to{transform:none;opacity:1}}@keyframes zaag-rise{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}@keyframes zaag-shake{0%,to{translate:0 0}25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-2px 0}}@keyframes zaag-breathe{0%,to{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--al-accent) 40%,transparent),0 0 0 0 color-mix(in srgb,var(--al-accent) 30%,transparent)}50%{box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--al-accent) 40%,transparent),0 0 0 6px color-mix(in srgb,var(--al-accent) 0%,transparent)}}@media (prefers-reduced-motion:no-preference){[data-play] .plr[data-motion=running] .zaag-gates>.zaag-row{transition:transform var(--motion-standard) var(--ease-standard),border-color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard),box-shadow var(--motion-quick) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-gates>.zaag-row[data-lifted]{transform:translateY(-2px)}[data-play] .plr[data-motion=running] .zaag-gates>.zaag-row[data-drag]{transition:border-color var(--motion-quick) var(--ease-standard),box-shadow var(--motion-quick) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-ball[data-at=row]{animation:zaag-fall var(--dur,.6s) linear var(--delay,0s) backwards}[data-play] .plr[data-motion=running] .zaag-ball[data-at=hop]{animation:zaag-pop var(--motion-deliberate) var(--ease-spring) calc(var(--lane, 0) * 60ms) backwards}[data-play] .plr[data-motion=running] .zaag-ball[data-at=live]{transition:transform var(--motion-deliberate) var(--ease-spring),border-color var(--motion-quick) var(--ease-standard),color var(--motion-quick) var(--ease-standard),background-color var(--motion-quick) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-ball[data-state=miss]{animation-name:zaag-fall,zaag-shake;animation-duration:var(--dur,.6s),var(--motion-standard);animation-timing-function:linear,var(--ease-standard);animation-delay:var(--delay,0s),0s;animation-fill-mode:backwards,none}[data-play] .plr[data-motion=running] .zaag-ball[data-at=live][data-state=miss]{animation:zaag-shake var(--motion-standard) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-num,[data-play] .plr[data-motion=running] .zaag-val{animation:zaag-tick var(--motion-quick) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-dot[data-at=row]{animation:zaag-pour var(--dur,.5s) linear var(--delay,0s) backwards}[data-play] .plr[data-motion=running] .zaag-dot[data-at=hop]{animation:zaag-heap var(--motion-deliberate) var(--ease-spring) calc(var(--hy, 0) * 40ms) backwards}[data-play] .plr[data-motion=running] .zaag-bar i{transition:width 90ms linear,background-color var(--motion-standard) var(--ease-standard)}[data-play] .plr[data-motion=running] .zaag-dead{animation:zaag-rise var(--motion-standard) var(--ease-standard) both}[data-play] .plr[data-motion=running] .zaag-drop[data-fresh]{animation:zaag-breathe 1.8s var(--ease-inout) infinite}[data-play] .plr[data-motion=running] .zaag-drop:active:not([aria-disabled=true]){transform:translateY(2px)}}@media (prefers-reduced-motion:reduce){[data-play] .plr .zaag-ball,[data-play] .plr .zaag-dead,[data-play] .plr .zaag-dot,[data-play] .plr .zaag-drop,[data-play] .plr .zaag-num,[data-play] .plr .zaag-val{animation:none}}[data-play] .plr[data-motion=paused] .zaag-ball,[data-play] .plr[data-motion=paused] .zaag-dot,[data-play] .plr[data-motion=paused] .zaag-gates>.zaag-row{animation:none;transition-property:opacity,color,background-color,border-color,box-shadow}@container (max-width: 480px){[data-play] .plr .zaag{--zaag-row:48px;--zaag-gap:6px;--zaag-ball:30px;--zaag-lanegap:4px;--zaag-badge:24px;--zaag-pad:6px;--zaag-countw:24px;--zaag-code:14px;--zaag-heap:6px;--zaag-dot:4px;--zaag-dropgap:8px;gap:8px}[data-play] .plr .zaag[data-mode=value]{--zaag-hop:90px}[data-play] .plr .zaag[data-mode=pour]{--zaag-tray:140px}[data-play] .plr .zaag-gate{gap:7px;padding:0 6px 0 8px}[data-play] .plr .zaag-bin{font-size:13px}[data-play] .plr .zaag-drop{min-height:38px;padding:7px 14px;font-size:14.5px}[data-play] .plr .zaag-say{font-size:16px}}@container (max-width: 340px){[data-play] .plr .zaag{--zaag-ball:26px;--zaag-code:13px;--zaag-lanegap:3px}[data-play] .plr .zaag[data-mode=pour]{--zaag-tray:128px}[data-play] .plr .zaag-ball{font-size:13px;letter-spacing:-.03em}[data-play] .plr .zaag-lamp{padding-inline:6px}}[data-play] .plr .zaag{--zaag-code:20px;--zaag-row:70px}[data-play] .plr .zaag-code{overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere}[data-play] .plr .zaag-drop{min-height:44px;font-size:18px}[data-play] .plr .zaag-say{font-size:20px}[data-play] .plr .zaag-bin,[data-play] .plr .zaag-lamp{font-size:16px}@container (max-width: 480px){[data-play] .plr .zaag{--zaag-code:18px;--zaag-row:80px}[data-play] .plr .zaag-gate{flex-wrap:wrap;align-content:center;gap:3px 6px}[data-play] .plr .zaag-lamp{margin-left:16px;padding-inline:5px}}