.clip-thumb-wrap{aspect-ratio:9/16;cursor:pointer;background:#000;border-radius:12px;display:block;position:relative;overflow:hidden}.clip-thumb-img{object-fit:cover;width:100%;height:100%;transition:transform .3s,opacity .3s;display:block}.clip-overlay{background:#0003;justify-content:center;align-items:center;transition:opacity .25s;display:flex;position:absolute;inset:0}.clip-play-btn{color:#111;background:#ffffffe6;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.3rem;transition:transform .2s,background .2s;display:flex}.clip-thumb-wrap:hover .clip-play-btn{background:#fff;transform:scale(1.1)}.clip-platform-badge{color:#fff;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;display:flex;position:absolute;top:8px;left:8px}.clip-origin-link{color:#fff;z-index:5;opacity:0;background:#0000008c;border-radius:6px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.8rem;text-decoration:none;transition:opacity .2s;display:flex;position:absolute;bottom:8px;right:8px}.clip-thumb-wrap:hover .clip-origin-link{opacity:1}.clip-iframe{z-index:2;border:none;width:100%;height:100%;position:absolute;inset:0}.clip-thumb-wrap.is-playing .clip-thumb-img,.clip-thumb-wrap.is-playing .clip-overlay{opacity:0;pointer-events:none}.clip-title{color:var(--g-700);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin-top:.5rem;font-size:.8rem;line-height:1.4;display:-webkit-box;overflow:hidden}body .clip-section{--clip-accent:#6d3fd6;--clip-accent-soft:#6d3fd624;--clip-accent-hover:#5a2fc0;--clip-ease:cubic-bezier(.22,1,.36,1);isolation:isolate;padding:2.5rem 0 2.75rem;position:relative;overflow:clip;background:#fff!important}.clip-section .clip-header-wrap,.clip-section .clip-showcase,.clip-section>.container-xl{z-index:1;position:relative}.clip-section .clip-header-wrap{width:calc(100% - 4rem);max-width:1560px;margin:0 auto;padding:0}.clip-section .clip-showcase-head{align-items:flex-start;margin-bottom:1.5rem;display:flex}.clip-section .clip-section-header{text-align:left;min-width:0;margin:0}.clip-section .clip-heading{letter-spacing:-.02em;color:#111a36;margin:0;font-size:clamp(2.1rem,3.6vw,3.5rem);font-weight:400;line-height:1.05}.clip-section .clip-subtitle{color:#4b5563;max-width:440px;margin:.75rem 0 0;font-size:1.05rem;font-weight:300;line-height:1.6}.clip-section .clip-stage{--cw:243px;--step:267px;--drag:0px;width:100%;height:calc(var(--cw) * 16 / 9 + 96px);touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;outline:none;padding-top:26px;position:relative;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 9% 91%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 9% 91%,#0000 100%)}.clip-section .clip-stage.is-dragging{cursor:grabbing}.clip-section .clip-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--clip-accent-soft)}.clip-section .clip-stage img{-webkit-user-drag:none;user-drag:none}.clip-section .clip-card{width:var(--cw);margin-left:calc(var(--cw) / -2);transform:translate3d(calc(var(--rel,0) * var(--step) + var(--drag)), 0, 0);transition:transform .75s var(--clip-ease);will-change:transform;cursor:pointer;position:absolute;top:26px;left:50%}.clip-section .clip-stage.is-dragging .clip-card,.clip-section .clip-card.is-nojump{transition:none}.clip-section .clip-card-float{position:relative}.clip-section .clip-card-float:after{content:"";z-index:-1;filter:blur(7px);background:radial-gradient(#64748b1f 0%,#64748b00 70%);height:34px;position:absolute;bottom:-30px;left:10%;right:10%}.clip-section .clip-thumb-wrap{opacity:.85;transition:transform .55s var(--clip-ease), opacity .5s var(--clip-ease), box-shadow .5s var(--clip-ease);background:#1b1233;border-radius:18px;transform:translateY(0);box-shadow:0 14px 28px -14px #64748b38,0 2px 6px #64748b0f}.clip-section .clip-card.is-active .clip-thumb-wrap{opacity:1;transform:translateY(-10px);box-shadow:0 0 0 3px #fff,0 24px 40px -18px #64748b4d,0 6px 14px -8px #64748b1f}.clip-section .clip-card.is-active:hover .clip-thumb-wrap{transform:translateY(-14px)}.clip-section .clip-overlay{background:linear-gradient(#0000001a 0%,#0000 30%)}.clip-section .clip-play-btn{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;opacity:0;width:80px;height:80px;transition:opacity .4s var(--clip-ease), transform .4s var(--clip-ease), background .3s;background:#ffffff40;border:1.5px solid #ffffffa6;font-size:2.4rem;transform:scale(.8);box-shadow:0 8px 22px #0000002e}.clip-section .clip-card.is-active .clip-play-btn{opacity:1;transform:scale(1)}.clip-section .clip-card.is-active:hover .clip-play-btn{background:#ffffff5c;transform:scale(1.08)}.clip-section .clip-card:not(.is-active):hover .clip-play-btn{opacity:.55;background:#ffffff40;transform:scale(.92)}.clip-section .clip-platform-badge{z-index:3;border-radius:11px;width:38px;height:38px;font-size:1.1rem;top:14px;left:14px;box-shadow:0 2px 8px #0003}.clip-section .clip-origin-link{opacity:1;text-shadow:0 1px 4px #00000059;width:32px;height:32px;transition:background .25s var(--clip-ease), transform .25s var(--clip-ease);background:#ffffff1f;border-radius:50%;font-size:1.15rem;top:14px;bottom:auto;right:10px}.clip-section .clip-origin-link:hover{background:#ffffff59;transform:scale(1.08)}.clip-section .clip-origin-link:focus-visible{outline-offset:2px;outline:2px solid #fff}.clip-section .clip-card:not(.is-active) .clip-origin-link{pointer-events:none}.clip-section .clip-nav{--clip-nav-btn:44px;z-index:6;background:#fff;border-radius:999px;align-items:center;gap:18px;width:min(430px,100% - 32px);height:60px;margin:.5rem auto 0;padding:0 8px;display:flex;position:relative;box-shadow:0 12px 30px -10px #64748b24,0 2px 8px #2430420f}.clip-section .clip-nav-btn{width:var(--clip-nav-btn);height:var(--clip-nav-btn);cursor:pointer;transition:background .25s var(--clip-ease), box-shadow .25s var(--clip-ease), transform .25s var(--clip-ease);border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.05rem;display:flex}.clip-section .clip-nav-btn--prev{color:#111a36;background:#fff;box-shadow:0 3px 12px #24304229,0 0 0 1px #2430420a}.clip-section .clip-nav-btn--prev:hover{background:#f6f5fa}.clip-section .clip-nav-btn--next{background:var(--clip-accent);color:#fff;box-shadow:0 6px 14px #64748b2e}.clip-section .clip-nav-btn--next:hover{background:var(--clip-accent-hover);transform:translateY(-1px)}.clip-section .clip-nav-btn:focus-visible{outline:3px solid var(--clip-accent-soft);outline-offset:3px}.clip-section .clip-progress{flex:1;min-width:0}.clip-section .clip-progress-track{background:#e5e7eb;border-radius:999px;height:6px;position:relative;overflow:hidden}.clip-section .clip-progress-fill{background:var(--clip-accent);transform-origin:0;transition:transform .5s var(--clip-ease);border-radius:999px;position:absolute;inset:0;transform:scaleX(.1)}.clip-section .clip-showcase-dots{z-index:6;justify-content:center;align-items:center;gap:4px;min-height:28px;margin-top:.85rem;display:flex;position:relative}.clip-section .clip-showcase-dot{cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;width:28px;height:28px;padding:0;display:flex;position:relative}.clip-section .clip-showcase-dot:before{content:"";width:10px;height:10px;transition:background .3s var(--clip-ease), transform .3s var(--clip-ease);background:#d4d7e0;border-radius:50%}.clip-section .clip-showcase-dot:hover:before{background:#b9a5ee}.clip-section .clip-showcase-dot.is-active:before{background:var(--clip-accent);transform:scale(1.1)}.clip-section .clip-showcase-dot:focus-visible{outline:3px solid var(--clip-accent-soft);outline-offset:0;border-radius:8px}.clip-section.clip-pre .clip-showcase-head,.clip-section.clip-pre .clip-card-float,.clip-section.clip-pre .clip-nav,.clip-section.clip-pre .clip-showcase-dots{opacity:0}@media (min-width:1200px){.clip-section .clip-showcase-head{margin-bottom:.5rem}}@media (max-width:1199px){body .clip-section{padding:2.25rem 0}.clip-section .clip-play-btn{width:66px;height:66px;font-size:2rem}.clip-section .clip-platform-badge{width:34px;height:34px}}@media (max-width:767px){body .clip-section{padding:2rem 0 1.5rem}.clip-section .clip-header-wrap{width:calc(100% - 1.5rem)}.clip-section .clip-heading{font-size:2.1rem}.clip-section .clip-subtitle{font-size:.95rem}.clip-section .clip-play-btn{width:60px;height:60px;font-size:1.8rem}.clip-section .clip-platform-badge{width:32px;height:32px;top:12px;left:12px}.clip-section .clip-nav{--clip-nav-btn:42px;gap:12px;height:58px;margin-top:.25rem}.clip-section .clip-showcase-dot{width:40px;height:40px}.clip-section .clip-stage{-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 5% 95%,#0000 100%)}}@media (prefers-reduced-motion:reduce){.clip-section .clip-card,.clip-section .clip-thumb-wrap,.clip-section .clip-play-btn,.clip-section .clip-progress-fill,.clip-section .clip-showcase-dot:before{transition-duration:10ms!important}}.clip-section .clip-bridge{z-index:0;pointer-events:none;background:radial-gradient(46% 70% at 30% 0,#7c3aed14 0%,#7c3aed00 70%),radial-gradient(40% 60% at 72% 0,#3b82f60f 0%,#3b82f600 70%);height:260px;position:absolute;top:0;left:0;right:0;-webkit-mask-image:linear-gradient(#0000 0,#000 22% 48%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 22% 48%,#0000 100%)}
