.hanpi-wrap{--hanpi-card-size:148px;--hanpi-card-height:180px;--hanpi-gap:16px;--hanpi-ring:3px;--hanpi-grad-1:#ff7a18;--hanpi-grad-mid:#ff3d77;--hanpi-grad-2:#ffb347;position:relative;width:100%;font-family:inherit}
.hanpi-wrap,.hanpi-wrap *{box-sizing:border-box}
.hanpi-strip-shell{position:relative;display:flex;align-items:center;gap:10px;width:100%}
.hanpi-strip{position:relative;overflow:hidden;width:100%;touch-action:pan-y;outline:none}
.hanpi-track{display:flex;align-items:center;gap:var(--hanpi-gap);will-change:transform;transition:transform .32s ease;justify-content:flex-start}
.hanpi-track.is-centered{justify-content:center}
.hanpi-card{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:var(--hanpi-card-size);height:var(--hanpi-card-size);padding:0;border:0;background:transparent!important;box-shadow:none!important;cursor:pointer;border-radius:999px;overflow:visible}
.hanpi-wrap[data-equal-size="no"] .hanpi-card{height:var(--hanpi-card-height);border-radius:38px}
.hanpi-card-ring{position:absolute;inset:0;border-radius:inherit;padding:var(--hanpi-ring);background:linear-gradient(135deg,var(--hanpi-grad-1),var(--hanpi-grad-mid),var(--hanpi-grad-2));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.hanpi-card-media{position:relative;display:block;width:calc(100% - (var(--hanpi-ring) * 2));height:calc(100% - (var(--hanpi-ring) * 2));border-radius:inherit;overflow:hidden;background:#fff!important;box-shadow:none!important;z-index:1}
.hanpi-card-media img,.hanpi-card-media video,.hanpi-stage img,.hanpi-stage video{display:block;width:100%;height:100%;object-fit:cover;border:0;box-shadow:none!important}
.hanpi-video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff8f3a,#ff6b2c,#ff9f1a);color:#fff;font-weight:700;letter-spacing:.02em}
.hanpi-strip-nav,.hanpi-nav,.hanpi-close{appearance:none;-webkit-appearance:none;border:0;outline:none;text-decoration:none;font:inherit;box-shadow:none!important}
.hanpi-strip-nav{width:42px;height:42px;min-width:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.96)!important;color:#111!important;cursor:pointer;transition:transform .2s ease,opacity .2s ease;z-index:3}
.hanpi-strip-nav:hover{transform:scale(1.04)}
.hanpi-strip-nav[disabled]{opacity:.35;cursor:not-allowed}
.hanpi-strip-nav span{font-size:28px;line-height:1}
.hanpi-modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;display:flex;align-items:center;justify-content:center;padding:24px;z-index:2147483647!important;background:rgba(8,8,10,.88)!important}
.hanpi-modal[hidden]{display:none!important}
.hanpi-modal-inner{position:relative;width:min(460px,90vw);height:min(820px,88dvh);border-radius:28px;overflow:hidden;background:#111;box-shadow:none!important}
.hanpi-progress{position:absolute;left:16px;right:16px;top:12px;display:flex;gap:6px;z-index:5}
.hanpi-progress-bar{flex:1;height:3px;background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden}
.hanpi-progress-fill{display:block;width:0;height:100%;background:#fff!important;border-radius:999px}
.hanpi-topbar{position:absolute;top:18px;right:16px;z-index:6}
.hanpi-close{width:42px;height:42px;border-radius:50%;background:rgba(16,16,18,.58)!important;color:#fff!important;cursor:pointer;font-size:28px;line-height:1}
.hanpi-stage{position:relative;width:100%;height:100%;background:#111;overflow:hidden}
.hanpi-stage-item{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .24s ease}
.hanpi-stage-item.is-active{opacity:1;pointer-events:auto}
.hanpi-nav{position:absolute;top:0;bottom:0;width:28%;background:transparent!important;cursor:pointer;z-index:4}
.hanpi-prev{left:0}.hanpi-next{right:0}
@media (max-width:767px){
  .hanpi-strip-nav,.hanpi-nav{display:none!important}
  .hanpi-modal{padding:18px!important}
  .hanpi-modal-inner{width:min(420px,90vw);height:min(760px,90dvh)}
}