.demo-slot-grid{flex-direction:column;gap:6px;display:flex}.demo-slot-row{align-items:center;gap:8px;display:flex}.demo-slot-row-label{color:#6b7280;text-align:center;flex-shrink:0;width:18px;font-size:10px;font-weight:600}.demo-slot-cells{flex:1;gap:3px;display:flex}.demo-slot-cell{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:3px;align-items:flex-end;display:flex;position:relative;overflow:hidden}.demo-slot-grid--sm .demo-slot-cell{width:24px;height:32px}.demo-slot-grid--md .demo-slot-cell{width:32px;height:40px}.demo-slot-grid--lg .demo-slot-cell{width:40px;height:48px}.demo-slot-fill{opacity:.8;transition:height .3s;position:absolute;bottom:0;left:0;right:0}.demo-slot-label{color:#374151;text-align:center;z-index:1;font-size:7px;font-weight:500;position:absolute;bottom:2px;left:0;right:0}.demo-slot-grid--lg .demo-slot-label{font-size:9px}.demo-slot-cell.warning{border-color:#d97706}.demo-slot-cell.danger{border-color:#dc2626;animation:2s ease-in-out infinite slot-pulse}.demo-slot-cell.empty{opacity:.5}@keyframes slot-pulse{0%,to{box-shadow:0 0 #dc26264d}50%{box-shadow:0 0 0 2px #dc262626}}