.slot-btn{background:var(--bc);color:var(--bt,#fff);transition:background .2s,box-shadow .2s,filter .15s,transform .2s}.slot-btn:hover{filter:brightness(1.15)}.slot-btn.st{background:color-mix(in srgb, var(--bc) 42%, #1a232c)}.slot-btn.st.lit{background:var(--bc);box-shadow:0 0 0 1px color-mix(in srgb, var(--bc) 55%, #fff), 0 0 12px 2px color-mix(in srgb, var(--bc) 65%, transparent)}.slot-btn.open{outline-offset:2px;outline:2px solid #fff}.slot-fly{scrollbar-width:thin;z-index:20;flex-direction:column;align-items:flex-end;gap:4px;display:flex;position:absolute;top:50%;right:calc(100% + 8px);overflow:hidden auto;transform:translateY(-50%)}.fly-row{color:#fff;background:#0c1218c7;border-radius:10px;flex:none;align-items:center;gap:6px;min-height:34px;padding:4px 8px;font-size:12.5px;display:flex}.fly-row.cues{gap:3px;padding:4px 6px}.fly-row button:disabled{opacity:.35;cursor:not-allowed}.fly-badge{text-align:center;min-width:44px;font-family:ui-monospace,monospace;font-size:12px}.fly-sep{background:#ffffff59;width:1px;height:18px}.fly-range{accent-color:#22d3ee;width:84px}.pos-pad{grid-template-columns:repeat(3,30px);gap:3px;display:grid}@keyframes fly-in{0%{opacity:0;transform:translate(16px)scale(.94)}to{opacity:1;transform:none}}@keyframes fly-out{0%{opacity:1;transform:none}to{opacity:0;transform:translate(16px)scale(.94)}}.slot-fly.enter>.fly-row{transform-origin:100%;animation:.24s cubic-bezier(.2,.8,.2,1) both fly-in}.slot-fly.enter>.fly-row:nth-child(2){animation-delay:50ms}.slot-fly.enter>.fly-row:nth-child(3){animation-delay:.1s}.slot-fly.enter>.fly-row:nth-child(4){animation-delay:.15s}.slot-fly.enter>.fly-row:nth-child(5){animation-delay:.2s}.slot-fly.leave{pointer-events:none}.slot-fly.leave>.fly-row{transform-origin:100%;animation:.18s cubic-bezier(.4,0,1,1) both fly-out}.slot-fly.leave>.fly-row:nth-last-child(2){animation-delay:35ms}.slot-fly.leave>.fly-row:nth-last-child(3){animation-delay:70ms}.slot-fly.leave>.fly-row:nth-last-child(4){animation-delay:.105s}.slot-fly.leave>.fly-row:nth-last-child(5){animation-delay:.14s}@media (prefers-reduced-motion:reduce){.slot-fly.enter>.fly-row,.slot-fly.leave>.fly-row{animation:none}.slot-btn{transition:none}}
button{text-shadow:0 1px 2px #0003;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 6px #0000001a,0 1px 3px #0000000f}button:hover{transform:scale(1.15);box-shadow:0 6px 8px #00000026,0 2px 4px #0000001a}button:active{transform:scale(.95);box-shadow:0 2px 4px #0003,0 1px 2px #00000026}
