.scene{--loop:7.5s;z-index:2;pointer-events:none;font-style:normal;display:block;position:absolute;inset:0;overflow:hidden;container-type:inline-size}.scene i,.scene em{font-style:normal}.scene-panel{-webkit-backdrop-filter:blur(14px)saturate(150%);background:#101114b8;border:1px solid #ffffff21;border-radius:13px;flex-direction:column;gap:7px;padding:9px 10px;display:flex;position:absolute;bottom:58px;left:10px;right:10px;box-shadow:inset 0 1px #ffffff1a,0 14px 30px -18px #000}.scene[data-size=card] .scene-panel{border-radius:16px;gap:9px;width:min(82%,420px);padding:12px 13px;bottom:14px;left:14px;right:auto}.scene-typed{white-space:nowrap;color:#e9e9ec;font-size:10.5px;line-height:1.35;display:block;overflow:hidden}.scene[data-size=card] .scene-typed{font-size:12.5px}.scene-typed>span{white-space:nowrap;vertical-align:bottom;border-right:1.5px solid var(--accent);max-width:100%;animation:scene-type var(--loop) steps(var(--chars),end) infinite;display:inline-block;overflow:hidden}@keyframes scene-type{0%,4%{max-width:0}32%,92%{max-width:100%}to{max-width:0}}.scene-row{justify-content:space-between;align-items:center;gap:6px;min-width:0;display:flex}.scene-chips{gap:4px;min-width:0;display:flex;overflow:hidden}.scene-chips i{color:#b9bac0;white-space:nowrap;background:#ffffff14;border-radius:6px;flex-shrink:0;padding:3px 6px;font-size:9px}.scene-chips i:first-child{text-overflow:ellipsis;flex-shrink:1;overflow:hidden}.scene[data-size=card] .scene-chips i{border-radius:7px;padding:4px 8px;font-size:10.5px}.scene-cta{color:#ffe3bf;animation:scene-press var(--loop) ease-in-out infinite;background:linear-gradient(#ff92144d,#ff8a001f);border:1px solid #ffa3408c;border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:4px 8px;font-size:9.5px;display:inline-flex;position:relative}.scene-cta b{font-weight:600}.scene-cta i{color:var(--accent-2);border-left:1px solid #ffa34059;padding-left:6px;font-size:9px}.scene[data-size=card] .scene-cta{border-radius:10px;padding:6px 11px;font-size:11.5px}.scene[data-size=card] .scene-cta i{font-size:10.5px}@keyframes scene-press{0%,44%,54%,to{filter:none;transform:none}48%{filter:brightness(1.5);transform:scale(.93)}}.scene-cursor{color:#fff;filter:drop-shadow(0 3px 6px #000000b3);animation:scene-cursor var(--loop) ease-in-out infinite;position:absolute;bottom:-9px;right:4px}@keyframes scene-cursor{0%,30%{opacity:0;transform:translate(26px,22px)}36%{opacity:1}44%,52%{opacity:1;transform:none}48%{transform:scale(.85)}62%,to{opacity:0;transform:translate(8px,10px)}}.scene[data-scene=imagen]:after,.scene[data-scene=video]:after{content:"";z-index:-1;animation:scene-sheen var(--loop) ease-in-out infinite;background:linear-gradient(105deg,#0000 42%,#ffc88238 50%,#0000 58%);position:absolute;inset:-20% -60%}@keyframes scene-sheen{0%,50%{opacity:0;transform:translate(-45%)}54%{opacity:1}74%{opacity:1}78%,to{opacity:0;transform:translate(45%)}}.scene-play{color:#fff;-webkit-backdrop-filter:blur(8px);background:#00000080;border:1px solid #ffffff40;border-radius:99px;justify-content:center;align-items:center;width:34px;height:34px;margin:-17px 0 0 -17px;display:flex;position:absolute;top:34%;left:50%}.scene[data-size=card] .scene-play{top:50%;left:auto;right:9%}.scene-progress{background:#ffffff1f;height:2px;position:absolute;bottom:0;left:0;right:0}.scene-progress i{background:var(--accent);height:100%;animation:scene-progress var(--loop) linear infinite;display:block}@keyframes scene-progress{0%,50%{width:0}92%,to{width:100%}}.scene-wave{align-items:center;gap:3px;display:flex;position:absolute;inset:50px 14px 128px}.scene[data-size=card] .scene-wave{width:40%;inset:22% 6% 22% auto}.scene-wave i{background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:.85;border-radius:2px;flex:1;min-width:2px;height:24%;animation:1.15s ease-in-out infinite scene-wave}.scene-wave i:nth-child(odd){height:40%}.scene-wave i:nth-child(3n){height:58%}.scene-wave i:nth-child(7n){height:72%}@keyframes scene-wave{0%,to{transform:scaleY(.45)}50%{transform:scaleY(1.25)}}.scene-steps{flex-wrap:wrap;gap:4px;display:flex}.scene-steps i{color:#9a9ba2;animation:scene-step var(--loop) ease infinite;animation-delay:calc(var(--i) * .9s);background:#ffffff0f;border:1px solid #0000;border-radius:99px;align-items:center;gap:4px;padding:3px 7px;font-size:9px;display:inline-flex}.scene-steps i svg{opacity:0;animation:scene-tick var(--loop) ease infinite;animation-delay:calc(var(--i) * .9s)}.scene[data-size=card] .scene-steps i{padding:4px 10px;font-size:11px}@keyframes scene-step{0%,38%{color:#9a9ba2;background:#ffffff0f;border-color:#0000}44%,88%{color:#ffe3bf;background:var(--accent-soft);border-color:#ffa34080}to{color:#9a9ba2}}@keyframes scene-tick{0%,40%{opacity:0}46%,88%{opacity:1}to{opacity:0}}.scene-nodes{width:88%;height:calc(100% - 100px);position:absolute;top:40px;left:6%;right:6%}.scene[data-size=card] .scene-nodes{height:84%;top:8%}.scene-nodes path{fill:none;stroke:#ffffff4d;stroke-width:1.3px;stroke-dasharray:4 4;animation:1.4s linear infinite scene-dash}@keyframes scene-dash{to{stroke-dashoffset:-16px}}.scene-nodes rect{fill:#101114c7;stroke:#fff3}.scene-nodes g[data-on] rect{fill:#3c2408d9;stroke:#ffa340a6}.scene-nodes text{fill:#e6e6ea;text-anchor:middle;font-size:9.5px;font-family:var(--font-sans)}.scene-nodes circle{fill:var(--accent);filter:drop-shadow(0 0 5px #ff8a00e6)}.scene[data-scene=investigar] .scene-panel{justify-content:center;gap:6px;top:54px;bottom:58px}.scene[data-scene=investigar][data-size=card] .scene-panel{top:14px;bottom:14px}.scene-head{letter-spacing:.12em;text-transform:uppercase;color:#8d8e95;font-size:8.5px}.scene-rank{color:#d5d6da;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:9.5px;display:grid}.scene[data-size=card] .scene-rank{gap:10px;font-size:11.5px}.scene-rank>span{background:#ffffff1a;border-radius:99px;height:3px;overflow:hidden}.scene-rank>span i{height:100%;width:var(--w);transform-origin:0;animation:scene-grow var(--loop) ease-out infinite;animation-delay:calc(var(--i) * .25s);background:#fff6;border-radius:99px;display:block}.scene-rank>span i[data-top=true]{background:var(--accent)}.scene-rank b{text-align:right;min-width:16px;font-weight:600}@keyframes scene-grow{0%,6%{transform:scaleX(0)}30%,92%{transform:scaleX(1)}to{transform:scaleX(0)}}.tile-media:has(.scene)>img{filter:brightness(.82)}@media (prefers-reduced-motion:reduce){.scene *,.scene:after{animation:none!important}.scene-typed>span{border-right:0;max-width:100%}.scene-cursor,.scene[data-scene=imagen]:after,.scene[data-scene=video]:after{display:none}.scene-steps i{color:#ffe3bf;background:var(--accent-soft);border-color:#ffa34080}.scene-steps i svg{opacity:1}.scene-progress i{width:60%}.scene-nodes circle{display:none}}.scene[data-size=tile] .scene-panel{border-radius:5.5cqw;gap:3cqw;padding:4cqw 4.4cqw;bottom:max(56px,25cqw);left:4.5cqw;right:4.5cqw}.scene[data-size=tile] .scene-typed{font-size:clamp(10px,4.7cqw,16px)}.scene[data-size=tile] .scene-chips i{border-radius:2.6cqw;padding:1.2cqw 2.6cqw;font-size:clamp(8.5px,3.7cqw,12.5px)}.scene[data-size=tile] .scene-cta{border-radius:3.2cqw;gap:2.4cqw;padding:1.6cqw 3.4cqw;font-size:clamp(9px,4cqw,13.5px)}.scene[data-size=tile] .scene-cta i{padding-left:2.4cqw;font-size:clamp(8.5px,3.7cqw,12.5px)}.scene[data-size=tile] .scene-steps{flex-wrap:nowrap;gap:1.6cqw}.scene[data-size=tile] .scene-steps i{padding:1.2cqw 3cqw;font-size:clamp(8.5px,3.7cqw,12.5px)}.scene[data-size=tile] .scene-wave{gap:1.4cqw;inset:24cqw 7cqw calc(max(56px,25cqw) + 30cqw)}.scene[data-size=tile] .scene-play{width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;top:30%}.scene[data-size=tile][data-scene=investigar] .scene-panel{gap:3.4cqw;top:24cqw}.scene[data-size=tile] .scene-head{font-size:clamp(8px,3.3cqw,11px)}.scene[data-size=tile] .scene-rank{gap:3cqw;font-size:clamp(9px,4.2cqw,14px)}.scene[data-size=tile] .scene-rank>span{height:max(3px,1.3cqw)}.scene[data-size=tile] .scene-nodes{height:calc(100% - 20cqw - max(56px,25cqw));top:20cqw}.scene-steps i,.scene-steps i svg{animation-delay:0s}.scene-steps i:first-child{animation-name:scene-step-1}.scene-steps i:first-child svg{animation-name:scene-tick-1}.scene-steps i:nth-child(2){animation-name:scene-step-2}.scene-steps i:nth-child(2) svg{animation-name:scene-tick-2}.scene-steps i:nth-child(3){animation-name:scene-step-3}.scene-steps i:nth-child(3) svg{animation-name:scene-tick-3}@keyframes scene-step-1{0%,36%{color:#9a9ba2;background:#ffffff0f;border-color:#0000}42%,92%{color:#ffe3bf;background:var(--accent-soft);border-color:#ffa34080}to{color:#9a9ba2}}@keyframes scene-step-2{0%,50%{color:#9a9ba2;background:#ffffff0f;border-color:#0000}56%,92%{color:#ffe3bf;background:var(--accent-soft);border-color:#ffa34080}to{color:#9a9ba2}}@keyframes scene-step-3{0%,64%{color:#9a9ba2;background:#ffffff0f;border-color:#0000}70%,92%{color:#ffe3bf;background:var(--accent-soft);border-color:#ffa34080}to{color:#9a9ba2}}@keyframes scene-tick-1{0%,38%{opacity:0}44%,92%{opacity:1}to{opacity:0}}@keyframes scene-tick-2{0%,52%{opacity:0}58%,92%{opacity:1}to{opacity:0}}@keyframes scene-tick-3{0%,66%{opacity:0}72%,92%{opacity:1}to{opacity:0}}@container (max-width:200px){.scene[data-size=tile] .scene-panel{bottom:max(66px,40cqw)}.scene[data-size=tile] .scene-chips{display:none}.scene[data-size=tile] .scene-row{justify-content:flex-end}.scene[data-size=tile] .scene-steps i{gap:2px;padding:1cqw 2.2cqw;font-size:8.5px}.scene[data-size=tile] .scene-steps i svg,.scene[data-size=tile] .scene-head{display:none}.scene[data-size=tile][data-scene=investigar] .scene-panel{gap:2.2cqw;padding:3cqw 4cqw;top:36cqw}.scene[data-size=tile] .scene-wave{bottom:calc(max(66px,40cqw) + 32cqw)}.scene[data-size=tile] .scene-nodes{height:calc(100% - 20cqw - max(66px,40cqw))}}
.kb{isolation:isolate;background:#0b0b0c;border:1px solid #ffffff14;border-radius:20px;grid-template-columns:1fr;min-height:240px;margin-bottom:28px;display:grid;position:relative;overflow:hidden}.kb:before{content:"";z-index:0;background:radial-gradient(60% 120% at 50% 110%,#ff8a0038,#0000 70%),linear-gradient(#111113,#0b0b0c);position:absolute;inset:0}.kb-video{z-index:1;position:relative}.kb-stage{aspect-ratio:8/3;--bl:66%;--bt:42%;--bw:6%;--bh:44%;--draw:0;--boxa:0;width:100%;position:relative}.kb-vid{opacity:.92;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000 55%,#0000 100%);mask-image:linear-gradient(#000 55%,#0000 100%)}.kb-video-el{object-fit:cover;width:100%;height:100%;display:block}.kb-box{left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh);border:1.5px dashed var(--accent);pointer-events:none;opacity:var(--boxa);-webkit-mask-image:conic-gradient(from 0deg, #000 calc(var(--draw) * 1deg), transparent calc(var(--draw) * 1deg));-webkit-mask-image:conic-gradient(from 0deg, #000 calc(var(--draw) * 1deg), transparent calc(var(--draw) * 1deg));mask-image:conic-gradient(from 0deg, #000 calc(var(--draw) * 1deg), transparent calc(var(--draw) * 1deg));border-radius:4px;position:absolute;box-shadow:0 0 12px #ff8a0040}.kb-prompt{z-index:3;white-space:nowrap;color:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;background:#141416b8;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:2px;max-width:70%;padding:7px 12px;font-size:12px;transition:opacity .35s,transform .35s;display:flex;position:absolute;bottom:11%;left:50%;transform:translate(-50%,8px)}.kb-prompt.on{opacity:1;transform:translate(-50%)}.kb-stage[data-empty="0"] .kb-ph{display:none}.kb-stage[data-empty="1"] .kb-ph{color:#fff9}.kb-caret{background:var(--accent);width:1.5px;height:13px;margin-left:1px;animation:.9s step-end infinite kb-blink}@keyframes kb-blink{50%{opacity:0}}.kb-sweep{z-index:2;pointer-events:none;opacity:0;position:absolute;inset:0;overflow:hidden}.kb-sweep:before{content:"";background:linear-gradient(90deg,#0000,#ffbe6e8c,#0000);width:30%;position:absolute;top:0;bottom:0;left:-30%;transform:skew(-18deg)}.kb-sweep.on{opacity:1}.kb-sweep.on:before{animation:.75s ease-in-out forwards kb-sweep}@keyframes kb-sweep{to{left:110%}}.kb-credit{z-index:3;letter-spacing:.02em;color:#ffffffb8;text-shadow:0 1px 6px #000000b3;opacity:0;pointer-events:none;font-size:9.5px;transition:opacity .3s;position:absolute;bottom:3%;right:3%}.kb-credit.on{opacity:1}.kb-ten{z-index:2;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px #0000008c;opacity:0;font-size:clamp(30px,5vw,54px);font-weight:800;line-height:1;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;top:8%;right:6%;transform:translateY(8px)scale(.94)}.kb-ten.on{opacity:1;transform:none}.kb-refs{display:none}.kb-copy{z-index:2;text-align:center;flex-direction:column;align-items:center;gap:8px;padding:4px 20px 22px;display:flex;position:relative}.kb-kicker{letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin:0;font-size:11px;font-weight:600}.kb-mark{aspect-ratio:1154/246;width:min(82%,380px);margin:0;position:relative}.kb-mark-logo,.kb-mark-logo:after{position:absolute;inset:0;-webkit-mask:url(/showcase/news/kling4-logo.webp) 50%/100% 100% no-repeat;mask:url(/showcase/news/kling4-logo.webp) 50%/100% 100% no-repeat}.kb-mark-logo{clip-path:inset(0 100% 0 0);background:linear-gradient(#fff 0%,#cfd3da 38%,#7d828c 52%,#e9ebef 70%,#fff 100%);animation:.9s cubic-bezier(.2,.8,.2,1) .15s forwards kb-logo-in}.kb-mark-logo:after{content:"";background:linear-gradient(100deg,#0000 38%,#ffd29a 47%,#ff8a00 50%,#ffd29a 53%,#0000 62%) 130% 0/300% 100%;animation:6s ease-in-out 1.4s infinite kb-logo-sheen}@keyframes kb-logo-in{to{clip-path:inset(0)}}@keyframes kb-logo-sheen{0%,55%{background-position:130% 0}85%,to{background-position:-30% 0}}.sr-only-kb{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.kb-sub{color:#ffffffb8;max-width:46ch;margin:0;font-size:13px;line-height:1.45}.kb-price{color:#ffffffe6;margin:0;font-size:13px}.kb-price b{color:var(--accent);font-size:15px}.kb-cta{margin-top:4px}@media (max-width:899px){.kb-prompt{max-width:94%;padding:5px 10px;font-size:11px;bottom:12%;overflow:hidden}}@media (min-width:900px){.kb{grid-template-columns:220px minmax(0,1fr) minmax(0,1.1fr);align-items:center;min-height:260px;padding:0}.kb-video{grid-area:1/3;align-self:stretch;min-height:260px}.kb-stage{width:auto;height:100%;position:absolute;top:0;right:0}.kb-vid{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000 0,#00000059 14%,#000 42%),linear-gradient(#000 82%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#00000059 14%,#000 42%),linear-gradient(#000 82%,#0000 100%);-webkit-mask-composite:source-in;mask-composite:intersect}.kb-refs{z-index:2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;grid-area:1/1;grid-template-columns:repeat(2,1fr);gap:6px;margin:0 0 0 24px;padding:8px;display:grid;position:relative}.kb-ref{aspect-ratio:1;opacity:0;background:#1b1b1e;border-radius:8px;transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;transform:scale(.88)}.kb-ref.on{opacity:1;transform:none}.kb-ref-add{color:#fff9;opacity:1;justify-content:center;align-items:center;display:flex;transform:none}.kb-ref-add .kb-plus{transition:opacity .3s}.kb-ref-add.on .kb-plus{opacity:0}.kb-swap{opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1);position:absolute;inset:0;transform:translate(100%)}.kb-swap.on,.kb-ref-add.on .kb-swap{opacity:1;transform:none}.kb-bar{border:1.5px solid var(--accent);color:#fff;border-radius:8px;grid-column:1/-1;align-items:center;gap:6px;height:26px;margin-top:2px;padding:0 8px;font-size:12px;display:flex;box-shadow:0 0 14px #ff8a0059}.kb-of{color:#ffffff80}.kb-bar i{--p:0;height:8px;-webkit-mask-image:linear-gradient(90deg, #000 calc(var(--p) * 100%), #00000038 calc(var(--p) * 100%));-webkit-mask-image:linear-gradient(90deg, #000 calc(var(--p) * 100%), #00000038 calc(var(--p) * 100%));mask-image:linear-gradient(90deg, #000 calc(var(--p) * 100%), #00000038 calc(var(--p) * 100%));background:repeating-linear-gradient(90deg,#ff8a00d9 0 6px,#0000 6px 9px);border-radius:4px;flex:1}.kb-copy{grid-area:1/2;padding:24px 12px}}@media (prefers-reduced-motion:reduce){.kb-caret,.kb-sweep.on:before,.kb-mark-logo,.kb-mark-logo:after{animation:none}.kb-mark-logo{clip-path:none}.kb-ref,.kb-ten,.kb-prompt,.kb-swap,.kb-credit{transition:none}}
