.remix-gallery{background:#fff;color:#202524;padding:110px 4vw 65px;overflow:hidden;font-family:Inter,'PingFang SC','Microsoft YaHei',Arial,sans-serif}
.remix-heading{max-width:1400px;margin:0 auto 80px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding:0 3%}.remix-heading h2{font-size:58px;font-weight:600;line-height:1.2;letter-spacing:-.045em;margin:0}.remix-heading h2 span{color:#356247}.remix-heading p{font-size:18px;line-height:1.85;margin:0 0 6px;color:#78837a;max-width:440px}
.remix-stack{display:flex;align-items:flex-start;justify-content:center;max-width:1520px;margin:0 auto;padding:30px 35px 35px;isolation:isolate}
.remix-item{position:relative;flex:0 0 260px;width:260px;margin-left:-39px;transition:opacity .3s;z-index:1}.remix-item:first-child{margin-left:0}.remix-item:nth-child(2){z-index:2}.remix-item:nth-child(3){z-index:3}.remix-item:nth-child(4){z-index:4}.remix-item:nth-child(5){z-index:5}.remix-item:nth-child(6){z-index:6}
.remix-card{display:block;position:relative;width:100%;aspect-ratio:9/16;padding:0;overflow:hidden;border:7px solid var(--card-color);border-radius:38px;background:#1e2621;text-align:left;cursor:pointer;transform:translateY(var(--card-y)) rotate(var(--card-tilt));transform-origin:50% 80%;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;box-sizing:border-box;color:#fff}
.remix-card video{display:block;width:100%;height:100%;object-fit:cover}.remix-card:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}.remix-play{position:absolute;z-index:2;left:16px;top:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #ffffffd0;background:#ffffff26;color:#fff;font-size:16px;backdrop-filter:blur(8px);padding-left:3px}
.remix-card-copy{position:absolute;left:18px;right:15px;bottom:21px;z-index:2;pointer-events:none}.remix-card-copy small{display:block;font-size:12px;line-height:1.5;color:#ffffffd9;margin-bottom:9px}.remix-card-copy strong{display:block;font-size:27px;line-height:1.14;font-weight:600;letter-spacing:-.04em}.remix-card-copy>span{display:block;font-size:12px;margin-top:12px;color:#ffffffb8}
.remix-start{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border:1px solid #dce3da;color:#344e3b;border-radius:28px;padding:13px 19px;width:178px;font-size:15px;font-family:inherit;margin:43px auto 0;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.remix-start span{font-size:21px;line-height:1}.remix-start:hover{background:#203c2b;border-color:#203c2b;color:#fff}.remix-item:hover,.remix-item:focus-within{z-index:20}.remix-item:hover .remix-card,.remix-item:focus-within .remix-card{transform:translateY(-22px) rotate(0) scale(1.035);box-shadow:0 18px 35px #15271c18}.remix-stack:has(.remix-item:hover) .remix-item:not(:hover){opacity:.65}.remix-card:focus-visible,.remix-start:focus-visible{outline:3px solid #608967;outline-offset:6px}
.remix-gallery-hint{text-align:center;font-size:13px;color:#8b948b;margin:22px auto 0;line-height:1.8}.remix-gallery-hint span{margin-left:5px}
.remix-dialog{position:fixed;inset:0;width:min(980px,calc(100vw - 48px));max-width:none;max-height:calc(100svh - 48px);padding:0;border:0;border-radius:26px;background:#f9faf6;color:#27392a;overflow:auto;box-shadow:0 28px 100px #0005;font-family:Inter,'PingFang SC','Microsoft YaHei',Arial,sans-serif}.remix-dialog::backdrop{background:#06100bd9;backdrop-filter:blur(12px)}.remix-close{position:absolute;right:17px;top:15px;z-index:4;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#e8ede2;color:#53644e;font-size:26px;line-height:1;cursor:pointer}.remix-dialog-layout{display:grid;grid-template-columns:minmax(260px,42%) minmax(0,1fr)}.remix-player-wrap{padding:22px;background:#e7ece2;display:grid;place-items:center}.remix-player{display:block;width:100%;max-height:calc(100svh - 92px);aspect-ratio:9/16;object-fit:contain;border:6px solid var(--selected-color,#263b2c);border-radius:30px;background:#070c09;box-sizing:border-box}.remix-dialog-content{padding:50px 38px 25px;display:flex;flex-direction:column}.remix-dialog-brand{font-size:12px;color:#829177}.remix-dialog-content h2{font-size:29px;line-height:1.35;margin:22px 0 15px;font-weight:550;letter-spacing:-.035em}.remix-selected-name{font-size:14px;line-height:1.8;color:#7d8b71;margin:0 0 24px}.remix-open-settings,.remix-plan-button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:#2f5b3c;border:0;color:#fff;padding:15px 18px;border-radius:10px;font-size:15px;font-family:inherit;cursor:pointer}.remix-open-settings span,.remix-plan-button span{font-size:20px}
.remix-settings label{display:block;font-size:12px;color:#788b6d;margin-bottom:16px}.remix-settings select,.remix-settings textarea{display:block;box-sizing:border-box;width:100%;margin-top:8px;padding:11px 12px;border:1px solid #d9e2d1;border-radius:8px;color:#465c3f;background:#fff;font-family:inherit;font-size:13px;line-height:1.7}.remix-settings textarea{resize:vertical}.remix-field-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.remix-preview-note{font-size:11px;line-height:1.7;color:#8c9982;margin:12px 0 0}.remix-dialog-pagination{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:30px}.remix-dialog-pagination button{width:36px;height:36px;border:1px solid #dae2d2;background:transparent;border-radius:50%;font-size:17px;color:#586f4f;cursor:pointer}.remix-current-index{font-size:12px;color:#8c9b80}.remix-plan-result h3{font-size:20px;font-weight:550}.remix-plan-result dl{font-size:13px;line-height:1.8}.remix-plan-result dl>div{padding:10px 0}.remix-plan-result dt{color:#9aa68c;font-size:11px}.remix-plan-result dd{margin:3px 0 0;color:#45613e}.remix-edit-plan{border:1px solid #ccd8c2;border-radius:8px;background:transparent;color:#4b6b43;padding:10px 18px;font:inherit;cursor:pointer}.remix-dialog [hidden]{display:none!important}.remix-dialog button:focus-visible,.remix-dialog select:focus-visible,.remix-dialog textarea:focus-visible{outline:2px solid #608967;outline-offset:4px}
@media(min-width:59.4375em) and (max-width:90.625em){.remix-item{flex-basis:220px;width:220px;margin-left:-47px}.remix-start{width:155px;font-size:14px}.remix-card-copy strong{font-size:24px}.remix-heading h2{font-size:50px}}
@media(max-width:950px){.remix-gallery{padding:75px 0 45px}.remix-heading{display:block;margin-bottom:35px;padding:0 28px}.remix-heading h2{font-size:43px}.remix-heading p{font-size:16px;margin-top:24px}.remix-stack{justify-content:flex-start;overflow-x:auto;max-width:none;padding:30px 28px 30px;gap:18px;scroll-snap-type:x mandatory;scroll-padding-left:28px;scrollbar-width:none}.remix-stack::-webkit-scrollbar{display:none}.remix-item,.remix-item:first-child{flex-basis:250px;width:250px;margin-left:0;scroll-snap-align:start}.remix-card{transform:none;border-width:6px;border-radius:34px}.remix-start{margin-top:18px;width:100%;font-size:15px}.remix-item:hover .remix-card,.remix-item:focus-within .remix-card{transform:none;box-shadow:none}.remix-stack:has(.remix-item:hover) .remix-item:not(:hover){opacity:1}.remix-gallery-hint{padding:0 28px;margin-top:10px}.remix-dialog-content{padding:45px 26px 24px}.remix-dialog-content h2{font-size:25px}.remix-player-wrap{padding:16px}}
@media(max-width:600px){.remix-gallery{padding-top:58px}.remix-heading{padding:0 20px}.remix-heading h2{font-size:36px}.remix-heading p{font-size:14px;line-height:1.9;margin-top:20px}.remix-item,.remix-item:first-child{width:245px;flex-basis:245px}.remix-stack{padding-left:20px;padding-right:20px;scroll-padding-left:20px;gap:17px}.remix-card-copy strong{font-size:26px}.remix-gallery-hint{font-size:11px;padding:0 20px}.remix-gallery-hint span{display:block;margin:0}.remix-dialog{width:calc(100vw - 24px);max-height:calc(100svh - 24px);border-radius:20px}.remix-dialog-layout{display:flex;flex-direction:column}.remix-player-wrap{padding:16px 45px;background:#e7ece2}.remix-player{max-height:46svh;width:auto;max-width:100%;border-width:4px;border-radius:22px}.remix-close{right:10px;top:10px;width:30px;height:30px;font-size:23px}.remix-dialog-content{padding:24px}.remix-dialog-content h2{font-size:23px;margin:15px 0 12px}.remix-selected-name{font-size:12px;margin-bottom:20px}.remix-dialog-pagination{padding-top:20px}.remix-preview-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){.remix-item,.remix-card,.remix-start{transition:none}.remix-item:hover .remix-card,.remix-item:focus-within .remix-card{transform:translateY(var(--card-y)) rotate(var(--card-tilt));box-shadow:none}}

/* Back to the site's near-black ground; a focused title and substantial per-video actions. */
.remix-gallery{background:#030d0b;color:#edf2eb;padding-top:105px}
.remix-heading{display:block;text-align:center;max-width:1100px;margin-bottom:72px;padding:0 24px}
.remix-heading h2{font-size:68px;line-height:1.18;letter-spacing:-.045em;font-weight:600}
.remix-heading h2 span{color:#91e8bc}
.remix-heading p{max-width:650px;margin:27px auto 0;font-size:18px;line-height:1.85;color:#9aac9f}
.remix-start{width:190px;min-height:56px;padding:10px 11px 10px 19px;border:1px solid color-mix(in srgb,var(--card-color) 40%,#23352a);border-radius:15px;background:#122219;color:#e6eee4;font-size:17px;font-weight:550;gap:12px;transition:background .2s,border-color .2s,transform .2s}
.remix-start span{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:9px;background:var(--card-color);color:#142319;font-size:20px;transition:transform .2s}
.remix-item:nth-child(5) .remix-start span{color:#fff}
.remix-start:hover,.remix-start:focus-visible{background:#1a3022;border-color:var(--card-color);color:#fff;transform:translateY(-3px)}
.remix-start:hover span{transform:translate(1px,-1px)}.remix-start:active{transform:translateY(0)}
.remix-item.is-picked .remix-start{border-color:var(--card-color)}
.remix-gallery-hint{color:#73867a;margin-top:24px;font-size:13px}
@media(min-width:59.4375em) and (max-width:90.625em){.remix-start{width:165px;padding-left:14px;font-size:16px}.remix-start span{width:30px;height:30px}.remix-heading h2{font-size:60px}}
@media(max-width:950px){.remix-gallery{padding-top:75px}.remix-heading{margin-bottom:38px;padding:0 28px}.remix-heading h2{font-size:49px}.remix-heading p{font-size:16px;margin-top:22px}.remix-start{width:100%;min-height:55px;font-size:16px;padding-left:20px}.remix-start span{width:32px;height:32px}}
@media(max-width:600px){.remix-gallery{padding-top:60px}.remix-heading{padding:0 20px;margin-bottom:30px}.remix-heading h2{font-size:38px;line-height:1.22}.remix-heading p{font-size:14px;line-height:1.85;margin-top:21px}.remix-gallery-hint{font-size:11px;margin-top:18px}.remix-start{border-radius:14px;min-height:54px}}
@media(prefers-reduced-motion:reduce){.remix-start:hover,.remix-start:focus-visible{transform:none}.remix-start span{transition:none}}

/* A single invitation card closes the fan of six reference videos. */
.remix-stack{max-width:1650px;padding-bottom:30px}
.remix-item.remix-cta-item{z-index:7}
.remix-cta-card{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:9/16;box-sizing:border-box;padding:30px 23px;border-radius:38px;background:radial-gradient(ellipse at 20% 10%,#ffffff15,transparent 65%),#6534f6;color:#fff;transform:translateY(var(--card-y)) rotate(var(--card-tilt));transform-origin:50% 80%;transition:transform .4s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.remix-cta-card:before{content:'';position:absolute;inset:0;border:1px solid #ffffff1c;border-radius:inherit;pointer-events:none}
.remix-cta-content{width:100%;text-align:center}.remix-cta-content h3{font-size:34px;line-height:1.12;font-weight:650;letter-spacing:-.055em;margin:0 0 25px;color:#fff}
.remix-cta-button{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:15px 13px;border:0;border-radius:40px;background:#070a08;color:#fff;font:550 16px/1.3 Inter,'Microsoft YaHei',sans-serif;cursor:pointer;transition:background .2s,transform .2s}
.remix-cta-button span{font-size:24px;line-height:1;transition:transform .2s}.remix-cta-button:hover{background:#18211b}.remix-cta-button:hover span{transform:translateX(3px)}.remix-cta-button:active{transform:scale(.98)}.remix-cta-button:focus-visible{outline:3px solid #fff;outline-offset:5px}
.remix-cta-content p{font-size:12px;line-height:1.8;margin:22px 0 0;color:#e0d6ff}
.remix-cta-item:hover .remix-cta-card,.remix-cta-item:focus-within .remix-cta-card{transform:translateY(-18px) rotate(-2deg)}
@media(min-width:59.4375em) and (max-width:90.625em){.remix-cta-content h3{font-size:29px}.remix-cta-card{padding:26px 19px}.remix-cta-button{font-size:14px;padding:13px 10px;gap:12px}.remix-cta-content p{font-size:11px}}
@media(max-width:950px){.remix-stack{max-width:none}.remix-cta-card{transform:none;border-radius:34px}.remix-cta-item:hover .remix-cta-card,.remix-cta-item:focus-within .remix-cta-card{transform:none}}
@media(max-width:600px){.remix-cta-content h3{font-size:33px}.remix-cta-card{padding:28px 24px}.remix-cta-button{font-size:15px}.remix-cta-content p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.remix-cta-card,.remix-cta-button,.remix-cta-button span{transition:none}.remix-cta-item:hover .remix-cta-card,.remix-cta-item:focus-within .remix-cta-card{transform:translateY(var(--card-y)) rotate(var(--card-tilt))}}

/* Play the selected card in place. Opaque neighbors avoid stacked-video ghosting. */
.remix-item{opacity:1;transition:transform .36s cubic-bezier(.22,.7,.2,1)}
.remix-stack:has(.remix-item:hover) .remix-item:not(:hover){opacity:1}
.remix-card{transition:transform .36s cubic-bezier(.22,.7,.2,1);box-shadow:none!important;will-change:auto}
.remix-play{backdrop-filter:none;background:#111b1766}
.remix-item.is-expanded,.remix-item.is-expanded:hover,.remix-item.is-expanded:focus-within{z-index:35}
.remix-item.is-expanded .remix-card,.remix-item.is-expanded:hover .remix-card,.remix-item.is-expanded:focus-within .remix-card{transform:translateY(-14px) rotate(0) scale(1.13);cursor:default;will-change:transform}
.remix-item.is-expanded .remix-card video{object-fit:cover;background:transparent}
.remix-item.is-expanded .remix-card:after,.remix-item.is-expanded .remix-card-copy,.remix-item.is-expanded .remix-play{opacity:0;visibility:hidden}
.remix-inline-close{position:absolute;right:-11px;top:-48px;z-index:50;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff35;border-radius:50%;background:#e8eee7;color:#304e37;font:24px/1 Arial,sans-serif;cursor:pointer}
.remix-inline-close[hidden]{display:none}.remix-inline-close:focus-visible{outline:2px solid #91e8bc;outline-offset:4px}
.remix-gallery.has-expanded-card .remix-item:has(~ .is-expanded){transform:translateX(-15px)}
.remix-gallery.has-expanded-card .is-expanded~.remix-item{transform:translateX(15px)}
.remix-item.is-previewing .remix-play{opacity:0}.remix-item.is-expanded .remix-card{border-color:var(--card-color)}
.remix-cta-content h3{font-size:clamp(24px,1.75vw,32px);line-height:1.18;letter-spacing:-.045em}.remix-cta-content h3 span{display:block;white-space:nowrap}
.remix-dialog.is-settings-only{width:min(520px,calc(100vw - 32px))}.remix-dialog.is-settings-only .remix-dialog-layout{display:block}.remix-dialog.is-settings-only .remix-player-wrap{display:none}.remix-dialog.is-settings-only .remix-dialog-content{padding:35px}.remix-dialog.is-settings-only .remix-dialog-content h2{margin-top:16px;font-size:26px}
@media(max-width:950px){.remix-item.is-expanded .remix-card,.remix-item.is-expanded:hover .remix-card,.remix-item.is-expanded:focus-within .remix-card{transform:translateY(-5px) scale(1.025)}.remix-gallery.has-expanded-card .remix-item:has(~ .is-expanded),.remix-gallery.has-expanded-card .is-expanded~.remix-item{transform:none}.remix-inline-close{top:-20px;right:-5px;width:30px;height:30px}.remix-cta-content h3{font-size:30px}}
@media(max-width:600px){.remix-dialog.is-settings-only .remix-dialog-content{padding:30px 23px}.remix-cta-content h3{font-size:30px}}
@media(prefers-reduced-motion:reduce){.remix-item,.remix-card{transition:none}.remix-item.is-expanded .remix-card{transform:none}}
.remix-item.is-folded .remix-card,.remix-item.is-folded:hover .remix-card,.remix-item.is-folded:focus-within .remix-card{transform:translateY(var(--card-y)) rotate(var(--card-tilt))}
@media(max-width:950px){.remix-item.is-folded .remix-card,.remix-item.is-folded:hover .remix-card,.remix-item.is-folded:focus-within .remix-card{transform:none}}

/* Keep the close control just outside the transformed card, without opening the fan too far. */
.remix-inline-close{left:calc(106.5% + 6px);right:auto;top:calc(-10.4% - 22px);width:30px;height:30px;background:#748177;color:#fff;border:1px solid #a1ada344;font-size:23px}
.remix-gallery.has-expanded-card .remix-item:has(~ .is-expanded){transform:translateX(-4px)}
.remix-gallery.has-expanded-card .is-expanded~.remix-item{transform:translateX(4px)}
@media(max-width:950px){.remix-inline-close{left:calc(101.25% + 5px);top:calc(-2% - 13px);width:28px;height:28px;font-size:22px}.remix-gallery.has-expanded-card .remix-item:has(~ .is-expanded),.remix-gallery.has-expanded-card .is-expanded~.remix-item{transform:none}}
@media(prefers-reduced-motion:reduce){.remix-inline-close{left:calc(100% + 6px);top:-8px}}

/* Match inner clipping to the frame; overlap the shared edge to avoid compositor seams. */
.remix-card{--frame-radius:38px;--frame-width:7px;border-radius:var(--frame-radius);border-width:var(--frame-width);background:var(--card-color);isolation:isolate}
.remix-card video,.remix-item.is-expanded .remix-card video{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border-radius:calc(var(--frame-radius) - var(--frame-width) + 1px);object-fit:cover;background:transparent}
@media(max-width:950px){.remix-card{--frame-radius:34px;--frame-width:6px}}

.remix-heading h2{white-space:nowrap}
@media(max-width:600px){.remix-heading h2{font-size:clamp(28px,8.2vw,38px)}}

/* Give the whole video showcase a little more space above it. */
.remix-gallery{padding-top:155px}
@media(max-width:950px){.remix-gallery{padding-top:105px}}
@media(max-width:600px){.remix-gallery{padding-top:84px}}

/* Enlarge the complete desktop showcase while keeping the fan inside the viewport. */
@media(min-width:68.75em){
 .remix-heading{max-width:1250px}
 .remix-heading h2{font-size:76px}
 .remix-heading p{font-size:20px;max-width:730px}
 .remix-stack{max-width:1850px}
 .remix-item,.remix-item:first-child{flex:1 1 0;width:auto;min-width:0;max-width:290px}
}

/* Give the video chapter headline more presence. */
@media(min-width:68.75em){.remix-heading h2{font-size:88px}}
@media(min-width:37.5625em) and (max-width:68.6875em){.remix-heading h2{font-size:56px}}
@media(max-width:37.5em){.remix-heading h2{font-size:clamp(30px,8.8vw,42px)}}

/* Both capability chapters share the same typography at every viewport size. */
:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) h2{font-size:88px;font-weight:600;line-height:1.25;letter-spacing:-.035em}
:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) p{font-size:20px;font-weight:400;line-height:1.9;color:#9aac9f;max-width:800px;margin:27px auto 0}
@media(max-width:68.6875em){:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) h2{font-size:56px}:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) p{font-size:16px;margin-top:22px}}
@media(max-width:37.5em){:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) h2{font-size:clamp(30px,8.8vw,42px);line-height:1.4}:is(.remix-heading,#capability-products .workbench-heading,#capability-market .market-heading) p{font-size:14px;line-height:1.9;margin-top:20px}}

/* Keep the next chapter outside the video showcase's first viewport. */
.remix-gallery{box-sizing:border-box;min-height:0;padding-bottom:60px}

.remix-heading{margin-bottom:64px}
@media(max-width:37.5em){.remix-gallery{padding-bottom:36px}.remix-heading{margin-bottom:34px}}