html, body.kcs-player-body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; }
.kcs-player-root { position: fixed; inset: 0; width: 100vw; height: 100vh; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; overflow: hidden; }
.kcs-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; overflow: hidden; background: #000; }
.kcs-slide { position: absolute; inset: 0; overflow: hidden; background-size: cover; background-position: center; opacity: 0; transition: opacity 650ms ease; }
.kcs-slide.is-active { opacity: 1; }
.kcs-content { position: absolute; inset: 0; display: flex; z-index: 2; }
.kcs-template-promo_basic .kcs-content { align-items: center; justify-content: center; text-align: center; padding: 90px 140px; box-sizing: border-box; }
.kcs-template-split_image .kcs-content { align-items: center; justify-content: space-between; padding: 90px 130px; box-sizing: border-box; text-align: left; }
.kcs-template-price_feature .kcs-content { align-items: center; justify-content: center; text-align: center; padding: 80px 120px; box-sizing: border-box; }
.kcs-template-full_bleed .kcs-content { align-items: flex-end; justify-content: flex-start; padding: 90px 110px; box-sizing: border-box; text-align: left; }
.kcs-copy { max-width: 1100px; }
.kcs-headline { font-size: 110px; line-height: .95; font-weight: 900; letter-spacing: -4px; margin: 0 0 28px; text-transform: uppercase; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
.kcs-subheadline { font-size: 52px; line-height: 1.08; font-weight: 800; margin: 0 0 28px; }
.kcs-body-text { font-size: 34px; line-height: 1.24; font-weight: 500; max-width: 1000px; margin: 0 auto 34px; }
.kcs-template-split_image .kcs-body-text, .kcs-template-full_bleed .kcs-body-text { margin-left: 0; margin-right: 0; }
.kcs-cta { display: inline-block; font-size: 32px; line-height: 1; font-weight: 900; text-transform: uppercase; border-radius: 999px; padding: 22px 34px; color: #000; }
.kcs-price { font-size: 190px; line-height: .9; font-weight: 950; letter-spacing: -8px; margin: 0 0 30px; }
.kcs-main-image { max-width: 720px; max-height: 760px; object-fit: contain; filter: drop-shadow(0 20px 34px rgba(0,0,0,.45)); }
.kcs-template-split_image .kcs-main-image { margin-left: 70px; }
.kcs-template-full_bleed .kcs-copy { background: rgba(0,0,0,.55); padding: 42px 50px; border-radius: 28px; backdrop-filter: blur(2px); }
.kcs-bg-dim { position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(255,255,255,.14), transparent 35%), linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%); z-index: 1; }
.kcs-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
.kcs-fallback-logo { font-size: 88px; font-weight: 900; letter-spacing: -3px; }
.kcs-fallback-text { margin-top: 18px; font-size: 28px; opacity: .75; }
.kcs-debug { position: fixed; right: 12px; bottom: 12px; z-index: 9999; color: rgba(255,255,255,.35); font: 12px/1.3 monospace; }
.kcs-anim-fade-in { animation: kcsFadeIn 900ms both ease; }
.kcs-anim-slide-in-left { animation: kcsSlideInLeft 900ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-slide-in-right { animation: kcsSlideInRight 900ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-slide-in-up { animation: kcsSlideInUp 900ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-slide-in-down { animation: kcsSlideInDown 900ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-zoom-in { animation: kcsZoomIn 900ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-zoom-out { animation: kcsZoomOut 900ms both ease; }
.kcs-anim-pulse { animation: kcsFadeIn 500ms both ease, kcsPulse 1800ms 500ms infinite ease-in-out; }
.kcs-anim-wiggle { animation: kcsFadeIn 500ms both ease, kcsWiggle 1800ms 500ms infinite ease-in-out; }
.kcs-anim-float { animation: kcsFadeIn 500ms both ease, kcsFloat 3200ms 500ms infinite ease-in-out; }
.kcs-anim-price-pop { animation: kcsPricePop 1000ms both cubic-bezier(.16,1,.3,1); }
.kcs-anim-crossfade { animation: kcsFadeIn 1200ms both ease; }
@keyframes kcsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kcsSlideInLeft { from { opacity: 0; transform: translateX(-140px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kcsSlideInRight { from { opacity: 0; transform: translateX(140px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kcsSlideInUp { from { opacity: 0; transform: translateY(140px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kcsSlideInDown { from { opacity: 0; transform: translateY(-140px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kcsZoomIn { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes kcsZoomOut { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: scale(1); } }
@keyframes kcsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes kcsWiggle { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(-1.4deg); } 75% { transform: rotate(1.4deg); } }
@keyframes kcsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes kcsPricePop { 0% { opacity: 0; transform: scale(.55) rotate(-2deg); } 70% { opacity: 1; transform: scale(1.08) rotate(1deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }