@property --compress-flow-turn{syntax:"<angle>";inherits:false;initial-value:0deg}.studio-upload{--compress-flow-turn:0deg;--flow-travel:calc(41cqi - 45px);isolation:isolate;cursor:pointer;background:radial-gradient(circle at 51% 48%, #dbeafecc, transparent 30%) padding-box, linear-gradient(140deg, #ffffffdb, #f3f7ffe0 55%, #faf7ffdb) padding-box, conic-gradient(from var(--compress-flow-turn), #8ec5ff, #dbeafe, #a78bfa, #38bdf8, #dbeafe, #8ec5ff) border-box;outline-offset:4px;border:1px solid #0000;border-radius:24px;width:100%;height:245px;transition:box-shadow .25s;animation:5s linear infinite compress-flow-border;display:block;position:relative;overflow:hidden;container-type:inline-size}.studio-upload:focus-visible{outline:3px solid #60a5fa}.studio-upload__input{display:none}.compress-flow-scene{border-radius:inherit;pointer-events:none;position:absolute;inset:0;overflow:hidden}.compress-flow-grid{opacity:.46;background-image:radial-gradient(#94a3b83d 1px,#0000 1px);background-size:17px 17px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000);mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000)}.compress-flow-track{z-index:1;opacity:.62;background-image:linear-gradient(90deg,#93c5fd 45%,#0000 45%);background-size:8px 2px;height:2px;position:absolute;top:50%;transform:translateY(-50%)}.compress-flow-track--incoming{width:35%;left:15%}.compress-flow-track--outgoing{width:29%;left:57%}.compress-flow-orbit{z-index:1;border:1px dashed #60a5fa73;border-radius:50%;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.compress-flow-orbit--outer{width:152px;height:152px;animation:15s linear infinite compress-flow-orbit}.compress-flow-orbit--inner{border-color:#818cf870;width:112px;height:112px;animation:11s linear infinite reverse compress-flow-orbit}.compress-flow-file{z-index:2;will-change:transform, opacity;background:#fffffff0;border:1px solid #dbeafeeb;border-radius:12px;align-items:center;gap:7px;width:91px;height:51px;padding:6px;animation:3.6s cubic-bezier(.48,0,.25,1) infinite compress-flow-file;display:flex;position:absolute;left:9%;box-shadow:0 9px 22px #1e40af1a}.compress-flow-file--one{top:22%}.compress-flow-file--two{animation-delay:1.2s;top:40%}.compress-flow-file--three{animation-delay:2.4s;top:58%}.compress-flow-thumb{background-size:cover;border-radius:8px;flex:none;width:34px;height:36px;display:block;position:relative;overflow:hidden}.compress-flow-thumb:before,.compress-flow-result__thumb:before{content:"";background:linear-gradient(145deg,#0000 35%,#ffffff5c);position:absolute;inset:0}.compress-flow-thumb--sunset{background:radial-gradient(at 70% 22%,#fff0a6 0 7%,#0000 8%),linear-gradient(160deg,#8cc9f1 0 44%,#f7ae76 45% 65%,#5663a7 66%)}.compress-flow-thumb--ocean{background:radial-gradient(at 40% 30%,#eaf8ff 0 10%,#0000 11%),linear-gradient(150deg,#76d8ec 0 42%,#288fba 43% 63%,#16517e 64%)}.compress-flow-thumb--meadow{background:radial-gradient(at 68% 28%,#fff6bd 0 8%,#0000 9%),linear-gradient(145deg,#a4dcf7 0 45%,#94cc8c 46% 64%,#387564 65%)}.compress-flow-lines{flex:1;gap:5px;display:grid}.compress-flow-lines i{background:#dbe5f3;border-radius:999px;height:4px}.compress-flow-lines i:first-child{background:#b8c9e1;width:94%}.compress-flow-lines i:last-child{width:62%}.compress-flow-core{z-index:4;width:78px;height:78px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.compress-flow-core__pulse,.compress-flow-core__button{border-radius:50%;position:absolute;inset:0}.compress-flow-core__pulse{background:#ffffff9e;border:1px solid #3b82f661;animation:2.1s ease-out infinite compress-flow-pulse;box-shadow:0 0 0 9px #dbeafe70,0 0 34px #3b82f642}.compress-flow-core__button{color:#165dfb;background:linear-gradient(145deg,#fff,#eff6ff);border:1px solid #bfdbfe;place-items:center;animation:2.8s ease-in-out infinite compress-flow-bob;display:grid;inset:9px;box-shadow:0 7px 18px #2563eb2e}.compress-flow-core__button svg{width:30px;height:30px}.compress-flow-core__spark{background:#38bdf8;border-radius:50%;width:5px;height:5px;animation:2s ease-in-out infinite compress-flow-spark;position:absolute;box-shadow:0 0 9px #60a5fa}.compress-flow-core__spark--one{top:19px;left:-15px}.compress-flow-core__spark--two{animation-delay:.6s;top:40px;right:-17px}.compress-flow-core__spark--three{animation-delay:1.1s;bottom:-13px;left:19px}.compress-flow-result{z-index:3;background:#fff;border:1px solid #dbeafe;border-radius:12px;width:58px;height:63px;padding:5px;position:absolute;right:9%;box-shadow:0 8px 22px #1e40af1f}.compress-flow-result--back{opacity:.5;animation:3.6s ease-in-out infinite compress-flow-back;top:26%;transform:translate(5px,4px)rotate(8deg)}.compress-flow-result--front{opacity:.84;animation:3.6s ease-in-out infinite compress-flow-result;top:34%;transform:translate(-8px,3px)scale(.94)rotate(-3deg)}.compress-flow-result__thumb{border-radius:8px;width:100%;height:100%;display:block;position:relative;overflow:hidden}.compress-flow-result__check{color:#fff;background:#10b981;border:2px solid #fff;border-radius:50%;place-items:center;width:17px;height:17px;font-size:10px;font-weight:900;display:grid;position:absolute;top:-6px;right:-6px}.compress-flow-hint{z-index:8;color:#64748b;letter-spacing:.1em;opacity:.48;pointer-events:none;text-overflow:ellipsis;white-space:nowrap;background:#ffffff8a;border:1px solid #dbeafe9e;border-radius:999px;max-width:calc(100% - 18px);margin:0;padding:4px 9px;font-size:8px;font-weight:800;transition:opacity .25s;position:absolute;bottom:12px;left:50%;overflow:hidden;transform:translate(-50%)}.compress-flow-hint span{color:#93c5fd;padding:0 2px}@keyframes compress-flow-border{to{--compress-flow-turn:360deg}}@keyframes compress-flow-file{0%,8%{opacity:0;transform:translateY(5px)scale(.88)}18%{opacity:1}66%{opacity:1;transform:translate3d(var(--flow-travel), 0, 0) scale(.88)}78%,to{opacity:0;transform:translate3d(calc(var(--flow-travel) + 9px), 0, 0) scale(.42)}}@keyframes compress-flow-result{0%,18%{opacity:.7;transform:translate(-15px,5px)scale(.82)rotate(-6deg)}62%{opacity:1;transform:translate(0,0)scale(1)rotate(0)}to{opacity:.84;transform:translateY(-2px)scale(.98)}}@keyframes compress-flow-back{0%,65%{opacity:.35}82%{opacity:.7}to{opacity:.5}}@keyframes compress-flow-pulse{0%{opacity:.72;transform:scale(.82)}80%,to{opacity:0;transform:scale(1.26)}}@keyframes compress-flow-orbit{to{transform:translate(-50%,-50%)rotate(360deg)}}@keyframes compress-flow-bob{50%{transform:translateY(-3px)}}@keyframes compress-flow-spark{0%,to{opacity:.35;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}.studio-upload:hover{animation-duration:2.8s;box-shadow:0 12px 32px #2563eb17}.studio-upload:hover .compress-flow-hint{opacity:.75}.studio-upload--dragging{animation-duration:1.25s;box-shadow:0 0 0 5px #3b82f61a,0 16px 36px #2563eb24}.studio-upload--dragging .compress-flow-hint{opacity:.88}.studio-upload--dragging .compress-flow-orbit--outer{border-color:#3b82f6;animation-duration:4s}.studio-upload--dragging .compress-flow-core__button{transform:scale(1.08)}@media (width<=640px){.studio-upload{border-radius:20px;height:190px}.compress-flow-file{gap:5px;width:78px;height:45px;padding:5px;left:5%}.compress-flow-file--one{top:19%}.compress-flow-file--two{top:39%}.compress-flow-file--three{top:59%}.compress-flow-thumb{width:29px;height:32px}.compress-flow-orbit--outer{width:118px;height:118px}.compress-flow-orbit--inner{width:88px;height:88px}.compress-flow-core{width:65px;height:65px}.compress-flow-core__button{inset:8px}.compress-flow-core__button svg{width:26px;height:26px}.compress-flow-result{width:48px;height:54px;right:5%}.compress-flow-hint{letter-spacing:.08em;font-size:7px;bottom:8px}}@media (prefers-reduced-motion:reduce){.studio-upload,.studio-upload *,.studio-upload :before,.studio-upload :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}