.wb-opening{display:none;position:absolute;inset:0;z-index:90;background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,var(--grid) 1px,transparent 0);
  background-size:24px 24px;align-content:center;justify-items:center;gap:22px;
  pointer-events:auto;color:var(--fg)}
body.canvas-booting #pane-flow:not([hidden]) .wb-opening{display:grid}
.wb-opening-scene{position:relative;display:flex;align-items:center;justify-content:center;
  gap:9px;width:206px;height:114px}
.wb-opening-slot{width:52px;height:58px;border:1px dashed var(--dim);border-radius:4px;
  background:var(--hole);opacity:.7;transform:rotate(-3deg)}
.wb-opening-slot:nth-child(2){transform:rotate(2deg)}
.wb-opening-slot:nth-child(3){transform:rotate(-1deg)}
.wb-opening-item{position:absolute;top:28px;left:16px;width:52px;height:58px;
  display:grid;place-items:center;color:var(--fg);background:var(--surf);
  border:2px solid var(--fg);border-radius:3px;box-shadow:3px 4px 0 var(--line);
  animation:wb-sort 2.7s cubic-bezier(.18,.82,.2,1) infinite both}
.wb-opening-item .ui-icon{width:25px;height:25px}
.wb-opening-item:nth-last-child(2){color:var(--acc);animation-delay:.16s}
.wb-opening-item:nth-last-child(1){color:var(--warn);animation-delay:.32s}
.wb-opening-item:nth-last-child(3){--from-x:-72px;--from-y:36px;--to-x:0px;--tilt:-16deg}
.wb-opening-item:nth-last-child(2){--from-x:79px;--from-y:-37px;--to-x:61px;--tilt:13deg}
.wb-opening-item:nth-last-child(1){--from-x:151px;--from-y:35px;--to-x:122px;--tilt:-11deg}
@keyframes wb-sort{
  0%,9%{opacity:0;transform:translate(var(--from-x),var(--from-y)) rotate(var(--tilt)) scale(.88)}
  17%{opacity:1}
  49%,78%{opacity:1;transform:translate(var(--to-x),0) rotate(0) scale(1)}
  94%,100%{opacity:0;transform:translate(var(--to-x),0) rotate(0) scale(1)}
}
.wb-opening-label{font-size:13px;font-weight:600;color:var(--dim)}
.wb-hydration{position:absolute;z-index:100;top:74px;left:50%;transform:translateX(-50%);
  padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surf);
  display:flex;align-items:center;gap:10px;font-size:12px;color:var(--dim);white-space:nowrap;box-shadow:var(--shadow)}
.wb-hydration .mini{padding:2px 8px;font-size:12px}
@media (prefers-reduced-motion:reduce){.wb-opening-item{animation:none;opacity:1;transform:translate(var(--to-x),0)}}