.clipdemo{--cd-ink:#0b1b48;--cd-blue:#1462ff;--cd-cyan:#27d4e0;margin:0;min-width:0;background:linear-gradient(145deg,#edf8ff,#dfefff);border:1px solid #daeafb;border-radius:32px;padding:24px;overflow:hidden;isolation:isolate;font-family:Montserrat,sans-serif;color:var(--cd-ink)}.clipdemo-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px}.clipdemo-head>span{font-size:9px;letter-spacing:.1em;font-weight:850;display:flex;gap:8px;align-items:center}.clipdemo-head>span i{width:7px;height:7px;background:var(--cd-blue);border-radius:50%;box-shadow:0 0 0 5px #1462ff10}.clipdemo-head>b{font-size:9px;font-weight:650}.clipdemo-stage{position:relative;display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:center;perspective:1100px;min-height:350px}.clipdemo-source{position:relative;z-index:1;background:var(--cd-ink);border:1px solid #5475a9;border-radius:16px;box-shadow:-8px 18px 0 #a8bfdd,0 30px 45px #0b1b4824;transform:rotateY(8deg) rotateZ(-3deg);overflow:hidden}.clipdemo-window{display:flex;justify-content:space-between;gap:10px;font-size:7px;padding:12px;color:#d9e9ff;font-weight:700}.clipdemo-source>img{display:block;width:100%;height:auto!important;border-radius:0!important;aspect-ratio:16/9;object-fit:contain}.clipdemo-editor{padding:14px}.clipdemo-editor>span{font-size:7px;color:var(--cd-cyan);font-weight:800;letter-spacing:.08em}.clipdemo-tracks{display:flex;gap:5px;margin:9px 0 12px;height:24px;position:relative}.clipdemo-tracks>i{flex:1;background:#1462ff;border-radius:4px;background-image:repeating-linear-gradient(90deg,transparent 0 4px,#27d4e05c 4px 6px)}.clipdemo-tracks>i:nth-child(2){background-color:#755cff}.clipdemo-tracks>i:nth-child(3){background-color:#15aebf}.clipdemo-tracks>b{position:absolute;left:0;top:-4px;bottom:-4px;width:2px;background:#fff;box-shadow:0 0 12px #fff}.clipdemo-tools{display:flex;gap:7px;font-size:6px;color:#c9dcff}.clipdemo-moment{display:flex;gap:10px;padding:14px;background:#122c63;color:white;align-items:center}.clipdemo-moment b{font-size:12px;color:var(--cd-cyan)}.clipdemo-moment span{font-size:8px;font-weight:700;line-height:1.5}.clipdemo-phone{position:relative;z-index:2;aspect-ratio:9/17.8;width:100%;border-radius:28px;background:#071529;border:5px solid #102344;outline:1px solid #647f9f;box-shadow:7px 4px 0 #809bbb,14px 22px 30px #08183940;transform:rotateY(-13deg) rotateZ(6deg);overflow:hidden}.clipdemo-phone video{display:block;width:100%;height:100%;object-fit:cover;object-position:52% center;position:absolute;inset:0}.clipdemo-notch{position:absolute;z-index:3;left:32%;right:32%;height:14px;top:6px;background:#071529;border-radius:20px}.clipdemo-phone-label{position:absolute;left:9px;top:28px;right:9px;z-index:3;font-size:6px;font-weight:800;letter-spacing:.1em;color:#fff;line-height:1.4;text-shadow:0 1px 6px #000}.clipdemo-caption{position:absolute;left:0;right:0;bottom:35px;padding:28px 9px 14px;text-align:center;background:linear-gradient(transparent,#061629d9);color:#fff;z-index:2}.clipdemo-caption small{font-size:6px;display:block;margin-bottom:8px;color:#d3e3f7}.clipdemo-caption strong{font-size:clamp(11px,1.3vw,20px);line-height:1.3;letter-spacing:-.03em;display:block}.clipdemo-caption mark{display:inline-block;background:var(--cd-cyan);color:var(--cd-ink);border-radius:4px;padding:2px 4px;margin-top:2px}.clipdemo-phone-bottom{display:flex;justify-content:space-between;gap:4px;position:absolute;left:12px;right:12px;bottom:13px;font-size:6px;font-weight:750;color:#fff;z-index:3}.clipdemo-halo{position:absolute;width:95%;height:65%;left:10%;top:18%;border:1px solid #1462ff38;border-radius:50%;transform:rotate(-25deg);z-index:0}.clipdemo-bottom{margin-top:30px}.clipdemo-progress{display:block;background:#c1d5eb;height:3px;border-radius:20px;overflow:hidden}.clipdemo-progress i{display:block;height:100%;background:var(--cd-blue);width:0}.clipdemo-bottom p{font-size:9px!important;font-weight:750;line-height:1.7!important;margin:14px 0 0}.clipdemo figcaption{font-size:9px!important;font-weight:500;line-height:1.7!important;color:#5c6e87;margin:18px 0 0!important}.clipdemo[data-visible=true] .clipdemo-phone{animation:cd-float 7s ease-in-out infinite}.clipdemo[data-visible=true] .clipdemo-tracks>b{animation:cd-scan 10s linear infinite}.clipdemo[data-visible=true] .clipdemo-progress i{animation:cd-progress 10s linear infinite}@keyframes cd-scan{to{left:100%}}@keyframes cd-progress{to{width:100%}}@keyframes cd-float{50%{transform:rotateY(-10deg) rotateZ(3deg) translateY(-8px)}}
@media(max-width:760px){.clipdemo{padding:20px;border-radius:26px}.clipdemo-stage{min-height:310px;gap:12px}.clipdemo-head>b{max-width:14ch;text-align:right;font-size:8px}.clipdemo-phone{border-width:4px;border-radius:23px;box-shadow:5px 3px 0 #809bbb,8px 14px 22px #08183935}.clipdemo-source{box-shadow:-4px 12px 0 #a8bfdd,0 18px 22px #0b1b4824}.clipdemo-window{padding:10px 8px;font-size:6px}.clipdemo-editor{padding:10px}.clipdemo-tools{flex-wrap:wrap;gap:4px}.clipdemo-moment{padding:10px;gap:7px}.clipdemo-moment span{font-size:7px}.clipdemo-caption{bottom:30px;padding-left:6px;padding-right:6px}.clipdemo-caption strong{font-size:12px}.clipdemo-phone-label{font-size:5px;left:6px;right:6px}.clipdemo-phone-bottom{font-size:5px;left:8px;right:8px}.clipdemo-notch{height:10px}.clipdemo-bottom{margin-top:24px}}
@media(max-width:370px){.clipdemo{padding:16px}.clipdemo-stage{min-height:280px}.clipdemo-head>span{font-size:8px}.clipdemo-caption strong{font-size:10px}.clipdemo-caption small{font-size:5px}.clipdemo-phone{border-radius:20px}.clipdemo-moment span{font-size:6px}}
@media(prefers-reduced-motion:reduce){.clipdemo[data-visible=true] .clipdemo-phone,.clipdemo[data-visible=true] .clipdemo-tracks>b,.clipdemo[data-visible=true] .clipdemo-progress i{animation:none}}