/* Lucian UX/UI Prompt #024 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#024 */
.u024{position:relative;width:100%;max-width:410px;padding:4px 8px}
.u024-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.u024-head small{display:block;font-size:11px;font-weight:600;color:var(--ux-ink-3)}.u024-val{display:block;margin-top:4px;font-size:20px;font-weight:780;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.u024-count{display:flex;align-items:center;gap:4px;padding:7px 10px;border-radius:999px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line);font-size:11px;font-weight:650;color:var(--ux-ink-2);white-space:nowrap}.u024-roll{position:relative;width:3ch;height:18px;overflow:hidden;text-align:right;color:var(--ux-ink);font-weight:760;font-variant-numeric:tabular-nums}.u024-roll span{display:block;line-height:18px;transition:transform .45s var(--ux-spring),opacity .3s var(--ux-ease)}.u024-roll span+span{position:absolute;left:0;right:0;top:0}
.u024-hist{position:relative;height:82px;margin:15px 4px 0;display:flex;align-items:flex-end;gap:3px}.u024-bar{flex:1;height:calc(var(--h) * 1%);border-radius:6px 6px 3px 3px;background:var(--ux-surface-3);transform-origin:50% 100%;transform:scaleY(.82);transition:background-color .35s var(--ux-ease),transform .55s var(--ux-spring),opacity .35s var(--ux-ease)}.u024-bar.in{background:linear-gradient(180deg,#67b7a8,#167c70 60%,#0a514a);transform:none}
.u024-track{position:relative;height:36px;margin:0 4px}.u024-rail{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:999px;background:var(--ux-surface-3)}.u024-sel{position:absolute;top:50%;height:6px;margin-top:-3px;border-radius:999px;background:var(--ux-accent);left:calc(var(--a) * 1%);right:calc(100% - var(--b) * 1%)}
.u024-h{position:absolute;top:50%;left:calc(var(--pos) * 1%);width:28px;height:28px;margin:-14px 0 0 -14px;border:0;padding:0;border-radius:50%;background:var(--ux-surface);cursor:grab;touch-action:none;z-index:2;box-shadow:0 0 0 2.5px var(--ux-accent),0 6px 14px -4px var(--ux-shadow-strong);transition:transform .35s var(--ux-spring),box-shadow .3s var(--ux-ease)}.u024-h::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ux-accent);transform:scale(.6);transition:transform .35s var(--ux-spring)}.u024-h:hover{transform:scale(1.08)}.u024-h.drag{cursor:grabbing;transform:scale(1.18);box-shadow:0 0 0 2.5px var(--ux-accent),0 0 0 10px var(--ux-accent-soft),0 6px 14px -4px var(--ux-shadow-strong)}.u024-h.drag::after{transform:scale(1)}.u024-h:focus-visible{outline:2px solid var(--ux-accent);outline-offset:4px}
.u024-scale{display:flex;justify-content:space-between;margin:0 4px;font-size:10px;font-weight:600;color:var(--ux-ink-3);font-variant-numeric:tabular-nums}