:root{--vt-c-white: #ffffff;--vt-c-white-soft: #f8f8f8;--vt-c-white-mute: #f2f2f2;--vt-c-black: #181818;--vt-c-black-soft: #222222;--vt-c-black-mute: #282828;--vt-c-indigo: #2c3e50;--vt-c-divider-light-1: rgba(60, 60, 60, .29);--vt-c-divider-light-2: rgba(60, 60, 60, .12);--vt-c-divider-dark-1: rgba(84, 84, 84, .65);--vt-c-divider-dark-2: rgba(84, 84, 84, .48);--vt-c-text-light-1: var(--vt-c-indigo);--vt-c-text-light-2: rgba(60, 60, 60, .66);--vt-c-text-dark-1: var(--vt-c-white);--vt-c-text-dark-2: rgba(235, 235, 235, .64)}:root{--color-background: var(--vt-c-white);--color-background-soft: var(--vt-c-white-soft);--color-background-mute: var(--vt-c-white-mute);--color-border: var(--vt-c-divider-light-2);--color-border-hover: var(--vt-c-divider-light-1);--color-heading: var(--vt-c-text-light-1);--color-text: var(--vt-c-text-light-1);--color-text-a: var(--vt-c-white);--font-size: 15px;--main-color-hsl: 160, 100%, 37%;--main-color: hsla(var(--main-color-hsl), 1);--main-color-a: hsla(var(--main-color-hsl), .1);--bg-color: var(--main-color);--bg-color-w: var(--vt-c-white);--border-width: 3px;--border-radius: 4px;--border: var(--border-width) solid var(--bg-color);--section-gap: 160px}@media (prefers-color-scheme: dark){:root{--color-background: var(--vt-c-black);--color-background-soft: var(--vt-c-black-soft);--color-background-mute: var(--vt-c-black-mute);--color-border: var(--vt-c-divider-dark-2);--color-border-hover: var(--vt-c-divider-dark-1);--color-heading: var(--vt-c-text-dark-1);--color-text: var(--vt-c-text-dark-2)}}*,*:before,*:after{box-sizing:border-box;margin:0;position:relative;font-weight:400}body{min-height:100vh;color:var(--color-text);background:var(--color-background);transition:color .5s,background-color .5s;line-height:1.6;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:var(--font-size);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.button,button{border:none;background-color:var(--bg-color);padding:1em;font-size:var(--font-size);color:var(--color-text-a);line-height:1;display:inline-block;cursor:pointer;min-width:3em;text-align:center;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;border-radius:var(--border-radius)}.button:hover,button:hover{color:var(--color-text)}.button:disabled,button:disabled{color:gray;background-color:#d3d3d3;border-color:#d3d3d3}label{cursor:pointer}#app{width:100vw;max-width:1280px;margin:0 auto;padding:2rem;font-weight:400}header{line-height:1.5;max-height:100vh}.github-link{position:absolute;top:1rem;right:1rem;color:#000;text-decoration:none;padding:.5rem;border-radius:8px;transition:all .2s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;width:40px;height:40px}.github-link:hover{background:#fffffff2;transform:translateY(-1px);box-shadow:0 4px 12px #00000026;color:#000}.github-link svg{transition:transform .2s ease}.github-link:hover svg{transform:scale(1.1)}a,.green{text-decoration:none;color:var(--main-color);transition:.4s}@media (hover: hover){a:hover{background-color:#00bd7e33}}nav{width:100%;font-size:12px;text-align:center;margin-top:2rem}nav a.router-link-exact-active{color:var(--color-text)}nav a.router-link-exact-active:hover{background-color:transparent}nav a{display:inline-block;padding:0 1rem;border-left:1px solid var(--color-border)}nav a:first-of-type{border:0}@media (max-width: 1024px){header{width:100%}.logo{width:100%;margin:auto;font-size:4em;text-align:center}.github-link{top:.5rem;right:.5rem;width:36px;height:36px}.github-link svg{width:18px;height:18px}}@media (min-width: 1024px){.github-link{position:fixed;top:1rem;right:1rem}nav{text-align:left;margin-left:-1rem;font-size:1rem;padding:1rem 0;margin-top:1rem}}.flip-button[data-v-2c4d66a0]{background:var(--main-color, #00b894);border:var(--border);border-radius:var(--border-radius);padding:.5em 1em;cursor:pointer;font-family:inherit;font-size:inherit;color:var(--color-text-a, #fff);transition:all .2s ease;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}.flip-button[data-v-2c4d66a0]:hover:not(:disabled){background-color:hsla(var(--main-color-hsl, 160, 100%, 37%),.8);transform:translateY(-1px);box-shadow:0 2px 4px #0003}.flip-button[data-v-2c4d66a0]:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 2px #0003;background-color:hsla(var(--main-color-hsl, 160, 100%, 37%),.9)}.flip-button--disabled[data-v-2c4d66a0],.flip-button[data-v-2c4d66a0]:disabled{opacity:.5;cursor:not-allowed;transform:none;background:var(--main-color, #00b894)}.flip-button[data-v-2c4d66a0]:disabled:hover{background:var(--main-color, #00b894);transform:none;box-shadow:none}.flip-button[data-v-2c4d66a0]{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flip-slider[data-v-78af021e]{display:flex;flex-direction:column;gap:.75em;margin-bottom:1.5em}.flip-slider__label[data-v-78af021e]{font-weight:600;margin-bottom:.25em;display:block;color:var(--color-heading, #2c3e50)}.flip-slider__controls[data-v-78af021e]{display:flex;gap:1em;align-items:center}.flip-slider__range[data-v-78af021e]{flex:1;height:8px;border-radius:var(--border-radius, 4px);background:var(--color-background-mute, #f2f2f2);outline:none;cursor:pointer;transition:all .2s ease;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.flip-slider__range[data-v-78af021e]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--main-color, #00b894);cursor:pointer;border:3px solid var(--color-background, #fff);box-shadow:0 2px 6px #00000026;transition:all .2s ease}.flip-slider__range[data-v-78af021e]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003;background:var(--main-color, #00b894)}.flip-slider__range[data-v-78af021e]::-webkit-slider-thumb:active{transform:scale(1.05)}.flip-slider__range[data-v-78af021e]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--main-color, #00b894);cursor:pointer;border:3px solid var(--color-background, #fff);box-shadow:0 2px 6px #00000026;transition:all .2s ease}.flip-slider__range[data-v-78af021e]::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px #0003}.flip-slider__range[data-v-78af021e]::-moz-range-track{height:8px;background:var(--color-background-mute, #f2f2f2);border-radius:var(--border-radius, 4px);border:none}.flip-slider__number[data-v-78af021e]{width:80px;padding:.5em;border:var(--border, 1px solid #ccc);border-radius:var(--border-radius, 4px);background:var(--color-background, #fff);font-family:inherit;font-size:inherit;text-align:center;transition:all .2s ease;color:var(--color-text, #2c3e50)}.flip-slider__number[data-v-78af021e]:focus{outline:none;border-color:var(--main-color, #00b894);box-shadow:0 0 0 3px var(--main-color-a, rgba(0, 184, 148, .1))}.flip-slider__number[data-v-78af021e]:hover{border-color:var(--color-border-hover, rgba(60, 60, 60, .29))}.flip-slider__info[data-v-78af021e]{font-size:.9em;opacity:.8;margin-top:.25em;color:var(--color-text, #2c3e50)}.flip-slider__info p[data-v-78af021e]{margin:.25em 0}.flip-file[data-v-9318d56d]{position:relative}.flip-file__label[data-v-9318d56d]{display:block;text-align:center;line-height:var(--frame-height);cursor:pointer;transition:all .2s ease;color:var(--color-heading, #2c3e50)}.flip-file__label[data-v-9318d56d]:hover{background-color:var(--main-color-a, rgba(0, 184, 148, .1))}.flip-file__input[data-v-9318d56d]{position:absolute;z-index:-1;opacity:0}:root{--video-ratio: 9 / 16;--frame-padding: 50px;--frame-width: 560px;--actions-width: 200px;--frame-height: calc(var(--frame-width) * var(--video-ratio))}.sliders{width:var(--frame-width);margin-left:auto;margin-right:auto}.sample-video{text-align:center;margin-top:2em;padding:1em;border-top:1px solid var(--border-color, #ccc)}.sample-reference{margin-top:.5em;font-size:.9em;opacity:.8}.sample-reference a{color:inherit;text-decoration:none}.sample-reference a:hover{text-decoration:underline}.frame{cursor:pointer;position:relative;width:var(--frame-width);height:var(--frame-height);border:var(--border);box-sizing:content-box;margin:1em auto 8em;max-width:100%;border-radius:var(--border-radius)}.frame:hover{background-color:var(--main-color-a)}.video,.canvas{display:none}.frames{position:relative;width:var(--frame-width);height:var(--frame-height);z-index:100;-webkit-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden;max-width:100%;overflow:hidden;border-radius:var(--border-radius)}.frames__item{position:absolute;width:var(--frame-width);height:var(--frame-height);object-fit:contain;object-position:center;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:transform;max-width:100%}.frames__item--flipped{transform:rotateY(-75deg);transform-origin:left center;opacity:.5;transition:transform .1s cubic-bezier(.07,.94,.31,.9),opacity 25ms cubic-bezier(0,1.16,.16,.98)}.actions{display:flex;flex-direction:column;gap:1em}.actions .flip-button{flex:1;font-size:.9em;padding:.75em 1em}.frame-navigation{display:flex;align-items:center;gap:.5em;flex:1}.frame-navigation .flip-button{flex:1;padding:.75em .5em;font-size:.9em}.frame-counter{font-size:.9em;font-weight:600;padding:.75em 1em;background:var(--main-color, #00b894);color:#fff;border-radius:var(--border-radius, 4px);text-align:center;border:none;transition:all .2s ease;flex-shrink:0;display:flex;flex-direction:column;gap:.25em}.frame-count{font-weight:700}.time-display{font-size:.8em;opacity:.9}.frames__item--current{z-index:2!important}.loader{width:3em;height:3em;border:var(--border);border-style:dashed;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;border-radius:50%;animation:rotate360 2s linear infinite}.error{text-align:center;padding:2em;color:#ff6b6b}.error p{margin-bottom:1em}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (min-width: 1024px){.frame{margin-bottom:8em}.actions{position:absolute;top:0;right:calc(var(--actions-width) * -1);width:var(--actions-width)}}@media (max-width: 1024px){.actions{margin-top:4em;flex-direction:row;gap:.2em}}.cover-upload .flip-file__label{line-height:inherit;background:var(--main-color, #00b894);color:#fff;padding:.75em 1em;border-radius:var(--border-radius, 4px);font-weight:600;font-size:.9em;transition:all .2s ease;border:none;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;flex:1}.cover-upload .flip-file__label:hover{background:var(--main-color, #00b894);transform:translateY(-1px)}.cover-upload .flip-file__label:active{transform:translateY(0)}