*{box-sizing:border-box}
body{min-height:100vh;margin:0;padding:20px;background:#f5f6fa;color:#333;font-family:Arial,"Microsoft YaHei",sans-serif;display:flex;align-items:center;justify-content:center;overflow-x:auto}
.card{width:400px;background:#fff;border-radius:8px;padding:20px;box-shadow:0 8px 28px rgba(28,39,60,.12);flex:0 0 auto}
h2{margin:0 0 14px;font-size:16px;font-weight:600;color:#2f3542}
p{margin:0 0 12px;color:#555}
input{width:100%;padding:11px 12px;border:1px solid #d8dde8;border-radius:8px;margin:8px 0 12px;font-size:14px;outline:none}
input:focus{border-color:#4285f4;box-shadow:0 0 0 3px rgba(66,133,244,.12)}
button{height:38px;padding:0 16px;border:none;border-radius:19px;background:linear-gradient(135deg,#4285f4,#3367d6);color:#fff;cursor:pointer;font-size:14px}
.muted{font-size:13px;color:#7a8292}
.debug{display:none}
.hv-hint{text-align:center;margin-bottom:14px;color:#606979;font-size:14px}
.hv-stage{position:relative;width:100%;max-width:360px;margin:0 auto 15px;border-radius:8px;overflow:hidden;background:#eef1f6;touch-action:none}
.hv-image-stage{width:360px;height:202px;max-width:none;aspect-ratio:auto!important}
.hv-slide-stage{width:360px;height:202px;max-width:none;aspect-ratio:auto!important}
.hv-stage img{display:block;user-select:none;-webkit-user-drag:none}
.hv-bg{width:100%;height:100%;object-fit:cover}
.hv-hole{position:absolute;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.78);border-radius:8px;box-shadow:inset 0 0 12px rgba(0,0,0,.42),0 0 0 999px rgba(0,0,0,.02)}
.hv-hole:before,.hv-piece:before{content:"";position:absolute;left:33%;top:-10%;width:34%;height:24%;border-radius:50%;background:inherit;border:inherit}
.hv-hole:after,.hv-piece:after{content:"";position:absolute;right:-10%;top:36%;width:24%;height:30%;border-radius:50%;background:inherit;border:inherit}
.hv-piece{position:absolute;left:0;overflow:hidden;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.85);background:#fff}
.hv-ffi-piece{background:transparent!important;box-shadow:none}
.hv-ffi-piece:before,.hv-ffi-piece:after{display:none}
.hv-piece img{position:absolute;max-width:none}
.hv-rot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform}
.hv-rot img{width:100%;height:100%;object-fit:cover}
.hv-click{cursor:crosshair}
.hv-click-mark{position:absolute;width:22px;height:22px;border-radius:50%;background:rgba(34,197,94,.58);border:2px solid rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.28);transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;pointer-events:none}
.hv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(238,241,246,.88)}
.hv-spin{width:30px;height:30px;border:2px solid #2f3542;border-top-color:transparent;border-radius:50%;animation:hvspin .75s linear infinite}
@keyframes hvspin{to{transform:rotate(360deg)}}
.hv-delay-box{text-align:center;padding:18px 0}
.hv-delay-text{color:#666;margin:12px 0 0;font-size:14px}
.hv-delay-spinner{position:relative;width:68px;height:68px;margin:0 auto}
.hv-delay-spinner::before{content:'';box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid rgba(47,53,66,.3);border-radius:50%}
.hv-delay-spinner::after{content:'';box-sizing:border-box;position:absolute;top:0;left:0;width:100%;height:100%;border:4px solid transparent;border-top-color:#2f3542;border-radius:50%;animation:hv5spin 1s linear infinite}
@keyframes hv5spin{to{transform:rotate(360deg)}}
.hv-delay-spinner span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-weight:700;color:#333}
.hv-check-icon{font-size:16px!important}
.hv-track{position:relative;width:100%;height:40px;margin:0 auto 12px;background:#f0f2f5;border-radius:20px;box-shadow:inset 0 1px 3px rgba(0,0,0,.10);user-select:none;touch-action:none}
.hv-image-track{width:360px}
.hv-slide-track{width:360px}
.hv-track-text{height:100%;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:14px}
.hv-handle{position:absolute;left:0;top:0;width:50px;height:40px;border-radius:20px;background:linear-gradient(135deg,#4285f4,#3367d6);box-shadow:0 2px 10px rgba(66,133,244,.30);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
.hv-handle:after{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-left:-3px}
#waf_hv_msg{text-align:center;min-height:18px}
@media(max-width:420px){body{padding:14px;justify-content:flex-start}.card{padding:20px}.hv-stage:not(.hv-image-stage):not(.hv-slide-stage){max-width:100%}}