.ff-demo-mode #helpTooltip{display:none!important}
#openDemo{border-color:#19d9ff66;color:#a6f0ff}
.ff-demo-dialog{width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #41414c;border-radius:24px;background:#101014;color:#f5f4f7;box-shadow:0 32px 100px #000a;overflow:auto}
.ff-demo-dialog::backdrop{background:#050509d9;backdrop-filter:blur(12px)}
.ff-demo-shell{padding:28px}.ff-demo-shell header,.ff-demo-shell footer{display:flex;justify-content:space-between;align-items:center;gap:16px}.ff-demo-eyebrow{font-size:11px;letter-spacing:.13em;color:#9e9daa}.ff-demo-shell h2{margin:9px 0 0;font-size:clamp(22px,4vw,32px);letter-spacing:-.04em}.ff-demo-dialog button{font:inherit;cursor:pointer;color:#c4c3ce;background:#1b1b23;border:1px solid #363640;border-radius:10px;padding:10px 14px;font-size:12px;min-height:42px}.ff-demo-dialog button:hover{border-color:#19d9ff;color:#fff}.ff-demo-dialog button:focus-visible{outline:2px solid #19d9ff;outline-offset:3px}.ff-demo-close{font-size:25px!important;padding:4px 14px!important}.ff-demo-tabs{display:flex;gap:7px;margin-top:25px;flex-wrap:wrap}.ff-demo-tabs button{flex:1}.ff-demo-tabs button[aria-pressed=true],.ff-demo-transition-controls button[aria-pressed=true]{background:#ff087f24;border-color:#ff087f;color:#fff}.ff-demo-caption{font-size:16px;font-weight:500;margin:23px 0 14px;color:#e2e1e8}.ff-demo-stage{position:relative;height:320px;border:1px solid #292934;border-radius:18px;background:radial-gradient(ellipse at 70% 20%,#252039,transparent 65%),#08080d;overflow:hidden;isolation:isolate}.ff-demo-shell footer{margin-top:18px}.ff-demo-shell footer>div{display:flex;gap:7px}
.ff-demo-art{display:block;position:absolute;overflow:hidden;border:1px solid #ffffff26;border-radius:10px;background:radial-gradient(circle at 72% 28%,#ffbdb6 0 9%,transparent 9.5%),linear-gradient(140deg,transparent 50%,#321555 50% 64%,transparent 64%),linear-gradient(25deg,#ec5379 35%,transparent 35%),linear-gradient(145deg,#795aff,#1f1642);box-shadow:0 10px 28px #0006}.ff-demo-art:after{content:"";position:absolute;inset:57% -20% -15% 28%;border:2px solid #ffcce35c;border-radius:50%;transform:rotate(-20deg)}.ff-demo-art-b{background:radial-gradient(circle at 28% 30%,#d1fff6 0 9%,transparent 9.5%),linear-gradient(140deg,transparent 40%,#06514f 40% 65%,transparent 65%),linear-gradient(20deg,#17898a 35%,transparent 35%),linear-gradient(145deg,#13ccd0,#14213f)}.ff-demo-art-c{background:radial-gradient(circle at 68% 35%,#fff1d6 0 9%,transparent 9.5%),linear-gradient(120deg,transparent 50%,#6e3344 50% 70%,transparent 70%),linear-gradient(30deg,#bc6449 35%,transparent 35%),linear-gradient(150deg,#f3b478,#542645)}
.ff-demo-library{position:absolute;left:7%;top:35px;width:100px;display:flex;flex-direction:column;gap:8px}.ff-demo-library .ff-demo-art{position:relative;width:90px;height:55px}.ff-demo-drop{position:absolute;left:38%;top:36px;width:42%;height:172px;border:1px dashed #19d9ff66;border-radius:14px;display:grid;place-items:center;color:#19d9ff88;font-size:40px;animation:ff-demo-drop 5s infinite}.ff-demo-flying{left:7%;top:35px;width:90px;height:55px;animation:ff-demo-drag 5s infinite;z-index:2}.ff-demo-pointer{position:absolute;width:17px;height:24px;background:#fff;clip-path:polygon(0 0,100% 65%,59% 68%,48% 100%,31% 92%,37% 66%,0 83%);filter:drop-shadow(0 2px 3px #000);z-index:3}.ff-demo-drag .ff-demo-pointer{left:18%;top:69px;animation:ff-demo-pointer-drag 5s infinite}.ff-demo-timeline{position:absolute;left:7%;right:7%;bottom:30px;height:56px;display:flex;gap:8px;padding:6px;border-radius:10px;border:1px solid #3f3c52;background:#17151e}.ff-demo-timeline .ff-demo-art{position:relative;height:42px;flex:1;opacity:0;animation:ff-demo-timeline 5s infinite}.ff-demo-timeline .ff-demo-art-b{animation-delay:.2s}.ff-demo-timeline .ff-demo-art-c{animation-delay:.4s}
.ff-demo-large{left:27%;top:24px;width:46%;height:180px}.ff-demo-ruler{position:absolute;left:10%;right:10%;top:220px;display:flex;justify-content:space-between;color:#9693aa;font-size:12px}.ff-demo-duration-bar{position:absolute;left:10%;top:246px;height:44px;width:32%;border:1px solid #ff087f;border-radius:8px;background:#ff087f22;animation:ff-demo-duration 5s infinite}.ff-demo-duration-bar .ff-demo-art{inset:3px auto 3px 3px;width:50px}.ff-demo-duration-bar b{position:absolute;left:67px;top:12px;font-size:12px;font-weight:500;animation:ff-demo-short 5s infinite}.ff-demo-duration-bar b:nth-of-type(2){animation:ff-demo-long 5s infinite}.ff-demo-duration-bar>span{position:absolute;right:0;top:0;width:24px;height:42px;display:grid;place-items:center;color:#ff8abb;font-size:18px;border-left:1px solid #ff087f}.ff-demo-duration .ff-demo-pointer{left:39%;top:271px;animation:ff-demo-pointer-duration 5s infinite}
.ff-demo-frame{position:absolute;inset:24px 17% 85px;border:1px solid #646072;border-radius:13px;overflow:hidden}.ff-demo-frame .ff-demo-art{inset:0;border-radius:0;box-shadow:none}.ff-demo-next{animation:ff-demo-fade 4s infinite}.ff-demo-stage[data-effect=slide] .ff-demo-next{animation:ff-demo-slide 4s infinite}.ff-demo-stage[data-effect=wipe] .ff-demo-next{animation:ff-demo-wipe 4s infinite}.ff-demo-transition-controls{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:center;gap:7px}
.ff-demo-wave{position:absolute;left:10%;right:10%;bottom:32px;height:65px;display:flex;align-items:center;gap:5px;animation:ff-demo-audio-fade 6s infinite}.ff-demo-wave i{flex:1;height:var(--wave-height);background:linear-gradient(#19d9ff,#9137f2);border-radius:5px;animation:ff-demo-wave .6s ease-in-out infinite alternate;animation-delay:var(--wave-delay)}.ff-demo-audio-playhead{position:absolute;bottom:24px;left:10%;height:82px;width:2px;background:#fff;box-shadow:0 0 8px #fff8;animation:ff-demo-audio-track 6s infinite}.ff-demo-audio-label{position:absolute;right:14%;top:38px;color:#a8fff3;font-size:25px}
.ff-demo-export .ff-demo-large{left:14%;width:30%;top:34px;height:210px;animation:ff-demo-export-art 5s infinite}.ff-demo-file{position:absolute;left:57%;top:47px;width:26%;height:184px;border:1px solid #19d9ff66;border-radius:14px;background:#132b32;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:ff-demo-file 5s infinite}.ff-demo-file>span{font-size:35px;color:#19d9ff}.ff-demo-file b{font-size:13px;font-weight:500}.ff-demo-file small{font-size:10px;color:#a1bec3}.ff-demo-export-progress{position:absolute;left:14%;right:14%;bottom:37px;height:5px;background:#292733;border-radius:8px;overflow:hidden}.ff-demo-export-progress i{display:block;height:100%;background:linear-gradient(90deg,#ff087f,#19d9ff);animation:ff-demo-progress 5s infinite}.ff-demo-export-done{position:absolute;right:12%;top:35px;color:#76f2cf;border:1px solid #76f2cf;border-radius:50%;background:#102b27;width:38px;height:38px;display:grid;place-items:center;font-size:24px;animation:ff-demo-done 5s infinite}.ff-demo-paused *{animation-play-state:paused!important}
@keyframes ff-demo-drag{0%,12%,100%{transform:translate(0,0);opacity:0}18%{opacity:1}42%,63%{transform:translate(230%,65%) scale(1.8);opacity:1}72%,90%{transform:translate(270%,340%) scale(.7);opacity:0}}
@keyframes ff-demo-pointer-drag{0%,12%,100%{transform:translate(0,0);opacity:0}18%{opacity:1}42%,63%{transform:translate(210px,50px);opacity:1}72%,90%{transform:translate(230px,195px);opacity:0}}
@keyframes ff-demo-drop{0%,25%,100%{background:transparent;box-shadow:none}42%,65%{background:#19d9ff12;box-shadow:0 0 32px #19d9ff22}}
@keyframes ff-demo-timeline{0%,68%,100%{opacity:0;transform:translateY(8px)}78%,94%{opacity:1;transform:translateY(0)}}
@keyframes ff-demo-duration{0%,15%,100%{width:32%}55%,85%{width:78%}}
@keyframes ff-demo-short{0%,35%,100%{opacity:1}50%,85%{opacity:0}}
@keyframes ff-demo-long{0%,35%,100%{opacity:0}50%,85%{opacity:1}}
@keyframes ff-demo-pointer-duration{0%,15%,100%{left:39%}55%,85%{left:85%}}
@keyframes ff-demo-fade{0%,18%,100%{opacity:0}55%,85%{opacity:1}}
@keyframes ff-demo-slide{0%,18%,100%{transform:translateX(100%)}55%,85%{transform:translateX(0)}}
@keyframes ff-demo-wipe{0%,18%,100%{clip-path:inset(0 100% 0 0)}55%,85%{clip-path:inset(0)}}
@keyframes ff-demo-wave{to{transform:scaleY(.48)}}
@keyframes ff-demo-audio-fade{0%,60%{opacity:1}90%,100%{opacity:.1}}
@keyframes ff-demo-audio-track{0%{left:10%}100%{left:90%}}
@keyframes ff-demo-export-art{0%,12%,100%{transform:scale(1)}40%,85%{transform:scale(.92)}}
@keyframes ff-demo-file{0%,15%,100%{opacity:.2;transform:translateX(12px)}65%,90%{opacity:1;transform:translateX(0)}}
@keyframes ff-demo-progress{0%,10%,100%{width:0}72%,90%{width:100%}}
@keyframes ff-demo-done{0%,65%,100%{opacity:0;transform:scale(.7)}75%,90%{opacity:1;transform:scale(1)}}
@media(max-width:600px){.ff-demo-shell{padding:18px}.ff-demo-tabs{gap:5px}.ff-demo-tabs button{padding:8px 5px;font-size:11px}.ff-demo-stage{height:280px}.ff-demo-library{left:5%;width:65px}.ff-demo-library .ff-demo-art,.ff-demo-flying{width:62px;height:46px}.ff-demo-flying{left:5%}.ff-demo-drop{height:146px}.ff-demo-large{height:145px}.ff-demo-ruler{top:180px}.ff-demo-duration-bar{top:207px}.ff-demo-duration .ff-demo-pointer{top:232px}.ff-demo-duration-bar b{left:60px}.ff-demo-frame{inset:22px 10% 85px}.ff-demo-dialog footer{gap:7px}.ff-demo-dialog footer button{padding:9px;font-size:11px}.ff-demo-export .ff-demo-large{height:175px}.ff-demo-file{width:33%;left:54%;height:157px}.ff-demo-file b{font-size:11px}.ff-demo-file small{font-size:9px}.ff-demo-drag .ff-demo-pointer{animation-name:ff-demo-pointer-small}}
@keyframes ff-demo-pointer-small{0%,12%,100%{transform:translate(0,0);opacity:0}18%{opacity:1}42%,63%{transform:translate(90px,30px);opacity:1}72%,90%{transform:translate(100px,155px);opacity:0}}