.pp-root{position:relative;background:#000;overflow:hidden;user-select:none;font-family:system-ui, sans-serif}
.pp-stage{position:absolute;inset:0;overflow:hidden;container-type:size}
.pp-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-video-box{right:auto;bottom:auto;height:auto}
.pp-item{position:absolute;will-change:transform, opacity, clip-path}
.pp-item img{display:block;width:100%;height:auto}
.pp-item a{display:block;cursor:pointer}
.pp-text{position:absolute;will-change:transform, opacity;white-space:pre-wrap;overflow-wrap:break-word;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.pp-text .pp-word{display:inline-block;will-change:transform, opacity}
.pp-subs{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);max-width:84%;padding:.3em .8em;background:rgba(0,0,0,.55);color:#fff;font-size:1.5em;line-height:1.35;text-align:center;border-radius:.3em;pointer-events:none;z-index:3000}
.pp-bigplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5em;height:5em;border-radius:50%;background:rgba(0,0,0,.6);border:2px solid rgba(255,255,255,.8);color:#fff;cursor:pointer;z-index:3050;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.pp-bigplay:hover{transform:translate(-50%,-50%) scale(1.08)}
.pp-bigplay svg{width:2em;height:2em;fill:#fff;margin-left:.3em}
.pp-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.8em;padding:2.2em .9em .5em;background:linear-gradient(transparent, rgba(0,0,0,.75));z-index:3040;opacity:0;transition:opacity .25s ease;font-size:.9em}
.pp-root:hover:not(.pp-idle) .pp-controls, .pp-root.pp-paused .pp-controls{opacity:1}
.pp-root.pp-idle{cursor:none}
.pp-controls button{background:none;border:0;color:#fff;cursor:pointer;font-size:1em;padding:.2em .4em;opacity:.9}
.pp-controls button:hover{opacity:1}
.pp-controls button svg{width:1.4em;height:1.4em;fill:#fff;display:block}
.pp-controls button.pp-off{opacity:.35}
.pp-controls input.pp-vol{accent-color:#FFB347;cursor:pointer;width:64px}
.pp-controls select.pp-lang{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:.3em;font:inherit;font-size:.82em;padding:.15em .35em;cursor:pointer}
.pp-controls select.pp-lang option{color:#000}
.pp-time{color:#fff;font-variant-numeric:tabular-nums;font-size:.95em;white-space:nowrap}
.pp-seek{flex:1;accent-color:#FFB347;cursor:pointer;height:1.2em;margin:0}
.pp-loading .pp-bigplay{pointer-events:none;opacity:.6;border-top-color:#FFB347;animation:pp-spin 1s linear infinite}
.pp-loading .pp-bigplay svg{opacity:.3}
.pp-edit{outline:1px solid rgba(108,192,255,.7);box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 0 4px rgba(108,192,255,.12), 0 10px 44px rgba(0,0,0,.6)}
.pp-edit .pp-item{cursor:move;outline:1px dashed transparent}
.pp-edit .pp-item:hover{outline:1px dashed rgba(255,179,71,.6)}
.pp-edit .pp-item.pp-sel{outline:2px solid #FFB347;z-index:899}
.pp-handle{position:absolute;right:-7px;bottom:-7px;width:14px;height:14px;background:#FFB347;border-radius:3px;cursor:nwse-resize;z-index:901}
.pp-edit .pp-text{cursor:move;outline:1px dashed transparent}
.pp-edit .pp-text:hover{outline:1px dashed rgba(255,179,71,.6)}
.pp-edit .pp-text.pp-sel{outline:2px solid #FFB347;z-index:899}
.pp-standalone{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.pp-standalone .pp-root{width:100vw;height:100vh}
@supports (aspect-ratio: 16 / 9){
.pp-standalone .pp-root{width:min(100vw, calc(100vh * var(--pp-ar, 1.7778)));height:min(100vh, calc(100vw / var(--pp-ar, 1.7778)))}}
@keyframes pp-spin{
0%{transform:translate(-50%,-50%) rotate(0deg)}
100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pp-fade-in{
0%{opacity:0}
100%{opacity:1}}
@keyframes pp-fade-out{
0%{opacity:1}
100%{opacity:0}}
@keyframes pp-zoom-in{
0%{opacity:0;transform:scale(.96)}
100%{opacity:1;transform:scale(1)}}
@keyframes pp-zoom-out{
0%{opacity:1;transform:scale(1)}
100%{opacity:0;transform:scale(1.05)}}
@keyframes pp-glide-in{
0%{transform:translateX(-100dvw)}
100%{transform:translateX(0)}}
@keyframes pp-glide-out{
0%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(100dvw)}}
@keyframes pp-slide-in{
0%{opacity:0;transform:translateX(-20px)}
100%{opacity:1;transform:translateX(0)}}
@keyframes pp-slide-out{
0%{opacity:1;transform:translateX(0)}
100%{opacity:0;transform:translateX(20px)}}
@keyframes pp-drop-in{
0%{opacity:0;transform:translateY(-50px)}
100%{opacity:1;transform:translateY(0)}}
@keyframes pp-drop-out{
0%{opacity:1;transform:translateY(0)}
100%{opacity:0;transform:translateY(50px)}}
@keyframes pp-skew-in{
0%{opacity:0;transform:skewX(-15deg)}
100%{opacity:1;transform:skewX(0deg)}}
@keyframes pp-skew-out{
0%{opacity:1;transform:skewX(0deg)}
100%{opacity:0;transform:skewX(15deg)}}
@keyframes pp-tilt-in{
0%{opacity:0;transform:rotateZ(-5deg) translateY(20px)}
100%{opacity:1;transform:rotateZ(0deg) translateY(0)}}
@keyframes pp-tilt-out{
0%{opacity:1;transform:rotateZ(0deg) translateY(0)}
100%{opacity:0;transform:rotateZ(5deg) translateY(-20px)}}
@keyframes pp-spiral-in{
0%{opacity:0;transform:rotate(-360deg) scale(0)}
100%{opacity:1;transform:rotate(0deg) scale(1)}}
@keyframes pp-spiral-out{
0%{opacity:1;transform:rotate(0deg) scale(1)}
100%{opacity:0;transform:rotate(360deg) scale(0)}}
@keyframes pp-ripple-in{
0%{opacity:0;transform:scale(.5);filter:blur(3px)}
100%{opacity:1;transform:scale(1);filter:blur(0px)}}
@keyframes pp-ripple-out{
0%{opacity:1;transform:scale(1);filter:blur(0px)}
100%{opacity:0;transform:scale(1.5);filter:blur(3px)}}
@keyframes pp-curtain-in{
0%{opacity:0;transform:scaleY(0);transform-origin:bottom}
100%{opacity:1;transform:scaleY(1);transform-origin:bottom}}
@keyframes pp-curtain-out{
0%{opacity:1;transform:scaleY(1);transform-origin:top}
100%{opacity:0;transform:scaleY(0);transform-origin:top}}
@keyframes pp-tv-in{
0%{opacity:0;transform:scale(0, 0)}
50%{opacity:0.8;transform:scale(1, 0.02)}
100%{opacity:1;transform:scale(1, 1)}}
@keyframes pp-tv-out{
0%{opacity:1;transform:scale(1, 1)}
50%{opacity:0.8;transform:scale(1, 0.02)}
100%{opacity:0;transform:scale(0, 0)}}
@keyframes pp-flip-in{
0%{transform:perspective(1600px) rotateY(-180deg);opacity:0}
50%{opacity:0}
50.1%{opacity:1}
100%{transform:perspective(1600px) rotateY(0deg);opacity:1}}
@keyframes pp-flip-out{
0%{transform:perspective(1600px) rotateY(0deg);opacity:1}
49.9%{opacity:1}
50%{opacity:0}
100%{transform:perspective(1600px) rotateY(180deg);opacity:0}}
@keyframes pp-cube-in{
0%{transform:rotateY(90deg) translateZ(0);opacity:0}
100%{transform:rotateY(0deg) translateZ(0);opacity:1}}
@keyframes pp-cube-out{
0%{transform:rotateY(0deg) translateZ(0);opacity:1}
100%{transform:rotateY(-90deg) translateZ(0);opacity:0}}
@keyframes pp-diamond-in{
0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}
100%{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}}
@keyframes pp-diamond-out{
0%{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}
100%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}}
@keyframes pp-diaphragm-in{
0%{clip-path:circle(0% at 50% 50%)}
100%{clip-path:circle(90% at 50% 50%)}}
@keyframes pp-diaphragm-out{
0%{clip-path:circle(90% at 50% 50%)}
100%{clip-path:circle(0% at 50% 50%)}}
@keyframes pp-spotlight-in{
0%{clip-path:circle(0% at 50% 50%)}
100%{clip-path:circle(75% at 50% 50%)}}
@keyframes pp-spotlight-out{
0%{clip-path:circle(75% at 50% 50%)}
100%{clip-path:circle(0% at 50% 50%)}}
@keyframes pp-wipe-in{
0%{clip-path:inset(0% 100% 0% 0%);opacity:0}
40%{clip-path:inset(0% 40% 0% 0%);opacity:.9}
100%{clip-path:inset(0% 0% 0% 0%);opacity:1}}
@keyframes pp-wipe-out{
0%{clip-path:inset(0% 0% 0% 0%);opacity:1}
60%{clip-path:inset(0% 0% 0% 60%);opacity:.3}
100%{clip-path:inset(0% 0% 0% 100%);opacity:0}}
@keyframes pp-glitch-in{
0%{clip-path:inset(100% 0 0 0);transform:translate(10px, 0);opacity:0}
20%{clip-path:inset(10% 0 60% 0);transform:translate(-10px, 5px)}
40%{clip-path:inset(80% 0 5% 0);transform:translate(5px, -10px)}
60%{clip-path:inset(0 0 20% 0);transform:translate(-5px, 5px)}
80%{clip-path:inset(40% 0 40% 0);transform:translate(5px, 0)}
100%{clip-path:inset(0 0 0 0);transform:translate(0);opacity:1}}
@keyframes pp-glitch-out{
0%{clip-path:inset(0 0 0 0);transform:translate(0)}
20%{clip-path:inset(20% 0 80% 0);transform:translate(-5px, 5px)}
40%{clip-path:inset(80% 0 5% 0);transform:translate(5px, -5px)}
60%{clip-path:inset(10% 0 60% 0);transform:translate(-5px, 0)}
80%{clip-path:inset(50% 0 20% 0);transform:translate(5px, 5px)}
100%{clip-path:inset(50% 50% 50% 50%);transform:translate(0);opacity:0}}
@keyframes pp-cards-in{
0%{transform:translateY(100%)}
100%{transform:translateY(0)}}
@keyframes pp-cards-out{
0%{transform:translateY(0);opacity:1}
100%{transform:translateY(100%);opacity:0}}
@keyframes pp-scale{
0%{scale:var(--pp-s0, .9)}
100%{scale:1}}
@keyframes pp-drift{
0%{translate:var(--pp-x0, 5%) var(--pp-y0, 0%)}
100%{translate:0% 0%}}
@keyframes pp-kenburns{
0%{scale:var(--pp-s0, .92);translate:var(--pp-x0, -4%) var(--pp-y0, 4%)}
100%{scale:1;translate:0% 0%}}
@keyframes pp-float{
0%{translate:0% 0%}
50%{translate:0% var(--pp-y1, -3%)}
100%{translate:0% 0%}}
@keyframes pp-sway{
0%{rotate:var(--pp-r0, -1.5deg)}
50%{rotate:var(--pp-r1, 1.5deg)}
100%{rotate:var(--pp-r0, -1.5deg)}}
@keyframes pp-pulse{
0%{scale:1}
50%{scale:var(--pp-s1, 1.02)}
100%{scale:1}}
