.pz { max-width: 420px; user-select: none; -webkit-user-select: none; }
.pz__stage { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--bg-3, #e7e2da); border: 1px solid var(--line, rgba(0, 0, 0, .12)); }
.pz__bg { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.pz__piece { position: absolute; left: 0; height: auto; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); will-change: transform; }
.pz__loading { position: absolute; inset: 0; display: none; place-items: center; font-size: 14px; color: var(--fg-dim, #666); }
.is-loading .pz__loading { display: grid; }
.is-loading .pz__bg, .is-loading .pz__piece { opacity: 0; }
.pz__refresh { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px; line-height: 1; color: #fff; background: rgba(0, 0, 0, .45); border: 0; border-radius: 50%; cursor: pointer; backdrop-filter: blur(6px); transition: background .2s, transform .3s; }
.pz__refresh:hover { background: rgba(0, 0, 0, .7); transform: rotate(180deg); }

.pz__track { position: relative; height: 48px; margin-top: 12px; border-radius: 999px; background: var(--bg-3, #e7e2da); border: 1px solid var(--line, rgba(0, 0, 0, .12)); overflow: hidden; touch-action: none; transition: border-color .25s, box-shadow .25s; }
.pz__hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 16px 0 72px; text-align: center; font-size: 13px; letter-spacing: .03em; color: var(--fg-dim, #666); pointer-events: none; transition: opacity .2s; white-space: nowrap; }
.is-moved .pz__hint { opacity: 0; }
.pz__status { min-height: 1.5em; margin: 10px 2px 0; font-size: 13px; line-height: 1.4; color: var(--fg-dim, #666); }
.pz__handle { position: absolute; top: 3px; left: 4px; width: 56px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--on-accent, #fff); background: var(--accent-grad, linear-gradient(120deg, #fbbf24, #f97316)); cursor: grab; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); touch-action: none; }
.pz__handle:active, .is-dragging .pz__handle { cursor: grabbing; }
.pz__handle:focus-visible { outline: 2px solid var(--accent, #c2410c); outline-offset: 3px; }
.pz__handle span { font-size: 18px; line-height: 1; }
.pz.is-set .pz__track, .is-set .pz__track { border-color: #3fb97a; box-shadow: 0 0 0 3px rgba(63, 185, 122, .2); }
.is-set .pz__status { color: #3fb97a; }
.is-error .pz__status { color: #e5575a; }
.is-error .pz__track { border-color: #e5575a; animation: pzShake .35s; }
@keyframes pzShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.pz__noscript { color: #e5575a; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .is-error .pz__track { animation: none; } }