.frame.svelte-pejzph{align-items:flex-start;gap:var(--demo-gap);padding:var(--demo-pad);border-radius:var(--demo-radius);box-shadow:var(--demo-shadow);--demo-font:var(--font-display);transition:background var(--duration-slow) var(--ease-out);display:flex;position:relative}.frame.md.svelte-pejzph{--demo-gap:clamp(6px, 2vw, 14px);--demo-pad:clamp(12px, 3.5vw, 24px);--demo-radius:20px;--demo-shadow:0 12px 40px var(--demo-shadow-color);--demo-box-pad:clamp(8px, 2.5vw, 16px);--demo-box-radius:14px;--demo-digit-width:clamp(18px, 4.5vw, 38px);--demo-digit-size:clamp(26px, 6vw, 54px);--demo-dot:clamp(5px, 1.5vw, 8px);--demo-dot-gap:10px;--demo-label-gap:12px;--demo-label-size:clamp(9px, 2vw, 12px)}.frame.sm.svelte-pejzph{--demo-gap:6px;--demo-pad:12px;--demo-radius:14px;--demo-shadow:0 8px 24px var(--demo-shadow-color);--demo-box-pad:7px;--demo-box-radius:10px;--demo-digit-width:16px;--demo-digit-size:22px;--demo-dot:4px;--demo-dot-gap:6px;--demo-label-gap:8px;--demo-label-size:9px}.frame.xs.svelte-pejzph{--demo-gap:4px;--demo-pad:8px;--demo-radius:10px;--demo-shadow:0 6px 16px var(--demo-shadow-color);--demo-box-pad:5px;--demo-box-radius:8px;--demo-digit-width:12px;--demo-digit-size:16px;--demo-dot:3px;--demo-dot-gap:5px;--demo-label-gap:6px;--demo-label-size:8px}.unit.svelte-pejzph{flex-direction:column;align-items:center;display:flex}.box.svelte-pejzph{padding:var(--demo-box-pad);border-radius:var(--demo-box-radius);background:var(--demo-box-bg);border:1px solid oklch(100% 0 0/.08);display:flex}.digits.svelte-pejzph{display:flex}.digit.svelte-pejzph{width:var(--demo-digit-width);font-size:var(--demo-digit-size);font-weight:600;font-family:var(--demo-font);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#fff;justify-content:center;align-items:center;line-height:1;display:inline-flex}.digit.flip.svelte-pejzph{animation:svelte-pejzph-digit-flip .42s var(--ease-out)}@keyframes svelte-pejzph-digit-flip{0%{opacity:0;transform:translateY(-40%)}}.hl-frame.svelte-pejzph{outline:2px dashed var(--color-primary);outline-offset:4px}.hl-boxes.svelte-pejzph .box:where(.svelte-pejzph),.hl-digits.svelte-pejzph .digits:where(.svelte-pejzph),.hl-labels.svelte-pejzph .label:where(.svelte-pejzph),.hl-separators.svelte-pejzph .sep:where(.svelte-pejzph){outline:2px dashed var(--color-primary);outline-offset:3px;border-radius:4px}.hl-boxes.svelte-pejzph .box:where(.svelte-pejzph){border-radius:var(--demo-box-radius)}.sep.svelte-pejzph{justify-content:center;gap:var(--demo-dot-gap);height:calc(var(--demo-digit-size) + 2 * var(--demo-box-pad) + 2px);flex-direction:column;display:flex}.sep.svelte-pejzph span:where(.svelte-pejzph){width:var(--demo-dot);height:var(--demo-dot);background:oklch(100% 0 0/.75);border-radius:50%}.label.svelte-pejzph{margin-top:var(--demo-label-gap);font-size:var(--demo-label-size);letter-spacing:.2em;text-transform:uppercase;color:oklch(85% 0 0);font-weight:600}.hint-frame.svelte-pejzph,.hint-digits.svelte-pejzph,.hint-box.svelte-pejzph,.hint-sep.svelte-pejzph,.hint-label.svelte-pejzph{outline-offset:2px;outline:2px dashed #0000}.hint-digits.svelte-pejzph{animation:12.5s infinite svelte-pejzph-hint-outline-digits}.hint-box.svelte-pejzph{animation:12.5s infinite svelte-pejzph-hint-outline-box}.hint-sep.svelte-pejzph{animation:12.5s infinite svelte-pejzph-hint-outline-sep}.hint-label.svelte-pejzph{animation:12.5s infinite svelte-pejzph-hint-outline-label}.hint-frame.svelte-pejzph{animation:12.5s infinite svelte-pejzph-hint-outline-frame}.cursor.svelte-pejzph{filter:drop-shadow(0 2px 4px oklch(0% 0 0/.4));pointer-events:none;width:20px;height:20px;animation:12.5s infinite svelte-pejzph-hint-cursor-move,12.5s infinite svelte-pejzph-hint-cursor-click;position:absolute;top:44%;left:39%}@keyframes svelte-pejzph-hint-cursor-move{0%,15%{top:42%;left:14%}20%,35%{top:44%;left:39%}40%,55%{top:40%;left:50%}60%,75%{top:79%;left:62%}80%,95%{top:88%;left:50%}to{top:42%;left:14%}}@keyframes svelte-pejzph-hint-cursor-click{0%,20%,40%,60%,80%,to{transform:scale(1)}1.2%,21.2%,41.2%,61.2%,81.2%{transform:scale(.8)}2.4%,22.4%,42.4%,62.4%,82.4%{transform:scale(1)}}@keyframes svelte-pejzph-hint-outline-digits{0%,1.2%{outline-color:#0000}1.3%,15%{outline-color:var(--color-primary)}15.1%,to{outline-color:#0000}}@keyframes svelte-pejzph-hint-outline-box{0%,21.2%{outline-color:#0000}21.3%,35%{outline-color:var(--color-primary)}35.1%,to{outline-color:#0000}}@keyframes svelte-pejzph-hint-outline-sep{0%,41.2%{outline-color:#0000}41.3%,55%{outline-color:var(--color-primary)}55.1%,to{outline-color:#0000}}@keyframes svelte-pejzph-hint-outline-label{0%,61.2%{outline-color:#0000}61.3%,75%{outline-color:var(--color-primary)}75.1%,to{outline-color:#0000}}@keyframes svelte-pejzph-hint-outline-frame{0%,81.2%{outline-color:#0000}81.3%,95%{outline-color:var(--color-primary)}95.1%,to{outline-color:#0000}}@media (prefers-reduced-motion:reduce){.digit.flip.svelte-pejzph,.cursor.svelte-pejzph,.hint-frame.svelte-pejzph,.hint-digits.svelte-pejzph,.hint-box.svelte-pejzph,.hint-sep.svelte-pejzph,.hint-label.svelte-pejzph{animation:none}.hint-box.svelte-pejzph,.hint-label.svelte-pejzph{outline-color:var(--color-primary)}}