*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } ::before, ::after { --tw-content: ''; } html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; } body { margin: 0; line-height: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; color: #9ca3af; } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(249 115 22 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(249 115 22 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .\!visible { visibility: visible !important; } .visible { visibility: visible; } .static { position: static; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-x-0 { left: 0px; right: 0px; } .bottom-0 { bottom: 0px; } .top-0 { top: 0px; } .isolate { isolation: isolate; } .z-0 { z-index: 0; } .z-50 { z-index: 50; } .z-\[60\] { z-index: 60; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem; } .my-8 { margin-top: 2rem; margin-bottom: 2rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mt-0 { margin-top: 0px; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-10 { margin-top: 2.5rem; } .mt-2 { margin-top: 0.5rem; } .mt-2\.5 { margin-top: 0.625rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-7 { margin-top: 1.75rem; } .mt-8 { margin-top: 2rem; } .mt-9 { margin-top: 2.25rem; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .aspect-video { aspect-ratio: 16 / 9; } .h-1 { height: 0.25rem; } .h-1\.5 { height: 0.375rem; } .h-11 { height: 2.75rem; } .h-16 { height: 4rem; } .h-2 { height: 0.5rem; } .h-3 { height: 0.75rem; } .h-3\.5 { height: 0.875rem; } .h-4 { height: 1rem; } .h-8 { height: 2rem; } .h-\[4\.5rem\] { height: 4.5rem; } .h-\[92px\] { height: 92px; } .h-full { height: 100%; } .min-h-\[320px\] { min-height: 320px; } .min-h-screen { min-height: 100vh; } .w-16 { width: 4rem; } .w-3 { width: 0.75rem; } .w-3\.5 { width: 0.875rem; } .w-4 { width: 1rem; } .w-8 { width: 2rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-col-resize { cursor: col-resize; } .cursor-crosshair { cursor: crosshair; } .cursor-pointer { cursor: pointer; } .touch-pan-y { --tw-pan-y: pan-y; touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .scroll-mt-6 { scroll-margin-top: 1.5rem; } .list-disc { list-style-type: disc; } .grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2 { gap: 0.5rem; } .gap-2\.5 { gap: 0.625rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-y-3 { row-gap: 0.75rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: 1rem; } .rounded-\[1\.3rem\] { border-radius: 1.3rem; } .rounded-\[2rem\] { border-radius: 2rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-md { border-radius: 0.375rem; } .rounded-xl { border-radius: 0.75rem; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-b { border-bottom-width: 1px; } .border-l { border-left-width: 1px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-blue-200 { --tw-border-opacity: 1; border-color: rgb(254 215 170 / var(--tw-border-opacity)); } .border-orange-100 { --tw-border-opacity: 1; border-color: rgb(255 237 213 / var(--tw-border-opacity)); } .border-orange-200 { --tw-border-opacity: 1; border-color: rgb(254 215 170 / var(--tw-border-opacity)); } .border-orange-300 { --tw-border-opacity: 1; border-color: rgb(253 186 116 / var(--tw-border-opacity)); } .border-orange-600 { --tw-border-opacity: 1; border-color: rgb(234 88 12 / var(--tw-border-opacity)); } .border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity)); } .border-slate-200 { --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity)); } .border-slate-800 { --tw-border-opacity: 1; border-color: rgb(30 41 59 / var(--tw-border-opacity)); } .bg-\[\#fffaf6\] { --tw-bg-opacity: 1; background-color: rgb(255 250 246 / var(--tw-bg-opacity)); } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .bg-black\/50 { background-color: rgb(0 0 0 / 0.5); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity)); } .bg-blue-700 { --tw-bg-opacity: 1; background-color: rgb(194 65 12 / var(--tw-bg-opacity)); } .bg-orange-100 { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity)); } .bg-orange-50\/40 { background-color: rgb(255 247 237 / 0.4); } .bg-orange-700 { --tw-bg-opacity: 1; background-color: rgb(194 65 12 / var(--tw-bg-opacity)); } .bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); } .bg-slate-50 { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } .bg-slate-50\/95 { background-color: rgb(248 250 252 / 0.95); } .bg-slate-900 { --tw-bg-opacity: 1; background-color: rgb(15 23 42 / var(--tw-bg-opacity)); } .bg-slate-950 { --tw-bg-opacity: 1; background-color: rgb(2 6 23 / var(--tw-bg-opacity)); } .bg-slate-950\/50 { background-color: rgb(2 6 23 / 0.5); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .from-black\/75 { --tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position); --tw-gradient-from-position: ; --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-from-position); --tw-gradient-to-position: ; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-to-position: ; } .bg-cover { background-size: cover; } .bg-center { background-position: center; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-12 { padding-bottom: 3rem; } .pb-2 { padding-bottom: 0.5rem; } .pl-2 { padding-left: 0.5rem; } .pl-6 { padding-left: 1.5rem; } .pt-8 { padding-top: 2rem; } .text-center { text-align: center; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-\[10px\] { font-size: 10px; } .text-\[11px\] { font-size: 11px; } .text-\[12px\] { font-size: 12px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-bold { font-weight: 700; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-5 { line-height: 1.25rem; } .leading-6 { line-height: 1.5rem; } .leading-7 { line-height: 1.75rem; } .leading-8 { line-height: 2rem; } .tracking-\[0\.2em\] { letter-spacing: 0.2em; } .tracking-tight { letter-spacing: -0.025em; } .tracking-widest { letter-spacing: 0.1em; } .text-blue-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); } .text-orange-700 { --tw-text-opacity: 1; color: rgb(194 65 12 / var(--tw-text-opacity)); } .text-orange-800 { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); } .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } .text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); } .text-red-800 { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity)); } .text-slate-200 { --tw-text-opacity: 1; color: rgb(226 232 240 / var(--tw-text-opacity)); } .text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity)); } .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity)); } .text-slate-700 { --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity)); } .text-slate-800 { --tw-text-opacity: 1; color: rgb(30 41 59 / var(--tw-text-opacity)); } .text-slate-900 { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity)); } .text-slate-950 { --tw-text-opacity: 1; color: rgb(2 6 23 / var(--tw-text-opacity)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .underline { text-decoration-line: underline; } .decoration-orange-300 { text-decoration-color: #fdba74; } .underline-offset-2 { text-underline-offset: 2px; } .underline-offset-4 { text-underline-offset: 4px; } .accent-blue-400 { accent-color: #fb923c; } .accent-blue-700 { accent-color: #c2410c; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_10px_24px_rgba\(194\2c 65\2c 12\2c 0\.12\)\] { --tw-shadow: 0 10px 24px rgba(194,65,12,0.12); --tw-shadow-colored: 0 10px 24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_24px_65px_rgba\(154\2c 52\2c 18\2c 0\.18\)\] { --tw-shadow: 0 24px 65px rgba(154,52,18,0.18); --tw-shadow-colored: 0 24px 65px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_8px_20px_rgba\(194\2c 65\2c 12\2c 0\.22\)\] { --tw-shadow: 0 8px 20px rgba(194,65,12,0.22); --tw-shadow-colored: 0 8px 20px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur { --tw-backdrop-blur: blur(8px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } :root { --brand: #c2410c; --ink: #29211e; --paper: #fffaf7; --radius: 12px; color-scheme: light; } html { scroll-behavior: smooth; scroll-padding-top: var(--tools-nav-height, 0px); } body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } button, input { font: inherit; } button:disabled { cursor: not-allowed; } :focus-visible { outline: 3px solid #ea580c; outline-offset: 4px; } ::-moz-selection { background: #fed7aa; } ::selection { background: #fed7aa; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } } .tools-nav { scrollbar-width: thin; background-color: #fffaf3; } .vmc-landing { background: radial-gradient(ellipse 70% 48% at 50% 12%, #ffede2 0%, #fffaf600 100%); } .vmc-dropzone { background-image: linear-gradient(145deg, #ffffff 15%, #fff7f1 100%); } .vmc-dropzone[data-drag-over="true"] { background-image: none; } .vmc-upload-mark { background-image: linear-gradient(135deg, #fff0de, #ffe4d5); } .vmc-privacy-banner { position: fixed; z-index: 100; left: 1rem; right: 1rem; bottom: 1rem; max-width: 48rem; margin: auto; padding: 1rem 1.25rem; border: 1px solid #fed7aa; border-radius: 1rem; background: #fff; color: #29211e; box-shadow: 0 15px 50px #29211e24; font-size: .875rem; } .vmc-privacy-banner[hidden] { display: none; } .vmc-privacy-banner p { margin: 0 0 .75rem; } .vmc-privacy-banner a { text-decoration: underline; } .vmc-privacy-banner div { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; } .vmc-privacy-banner button { padding: .55rem .85rem; border-radius: .55rem; border: 1px solid #fed7aa; background: #fffaf7; cursor: pointer; } .vmc-privacy-banner button:last-child { background: #c2410c; color: white; border-color: #c2410c; } .vmc-privacy-banner[data-mode="notice"] #vmc-measure { background: #c2410c; color: white; border-color: #c2410c; } .vmc-privacy-banner .vmc-gpc { font-weight: 600; color: #166534; } .share-actions button, .share-actions a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #fed7aa; border-radius: 999px; background: #fff; color: #7c2d12; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none; } .share-actions button:hover, .share-actions a:hover { background: #ffeadb; } .share-actions [data-share="reddit"] { font-size: .65rem; } :root { --dur-press: 120ms; --dur-ui: 220ms; --dur-enter: 320ms; --dur-scene: 480ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.36, .64, 1); } @supports (transition-timing-function: linear(0, 1)) { :root { --ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.9%, 1.061 23.4%, 1.071 26.8%, 1.045 34.2%, 1.009 43.7%, .996 52.3%, 1); } } .vmc-story { position: relative; height: 360vh; } .vmc-story-stage { position: sticky; top: var(--tools-nav-height, 0px); height: calc(100vh - var(--tools-nav-height, 0px)); height: calc(100svh - var(--tools-nav-height, 0px)); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.75rem, 3vh, 2rem); padding: 1rem; } .vmc-story-field { position: absolute; inset: 0; pointer-events: none; } .vmc-story-blob { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform, opacity; } .vmc-story-blob-a { left: -30vmax; top: -30vmax; background: radial-gradient(circle, #ffdcc8 0%, #ffdcc800 62%); opacity: var(--fa, 1); transform: translate3d(calc(var(--p, 0) * 30vw), calc(var(--p, 0) * 20vh), 0); } .vmc-story-blob-b { left: 20vw; top: -10vmax; background: radial-gradient(circle, #ffe8b0 0%, #ffe8b000 60%); opacity: var(--fb, 0); transform: translate3d(calc(var(--p, 0) * -24vw), calc(var(--p, 0) * 12vh), 0); } .vmc-story-blob-c { right: -40vmax; bottom: -40vmax; background: radial-gradient(circle, #e2e5ff 0%, #efe5ff66 35%, #efe5ff00 62%); opacity: var(--fc, 0); transform: translate3d(calc(var(--p, 0) * -18vw), calc(var(--p, 0) * -14vh), 0); } .vmc-story-captions { position: relative; height: 3.5rem; width: 100%; max-width: 40rem; } .vmc-story-cap { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-scene) var(--ease-out); } .vmc-story-cap::before { content: attr(data-n); font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: #c2410c; } .vmc-story-cap::after { content: attr(data-t); font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; color: #1e1512; } .vmc-story-stage[data-step="1"] .vmc-story-cap[data-for="1"], .vmc-story-stage[data-step="2"] .vmc-story-cap[data-for="2"], .vmc-story-stage[data-step="3"] .vmc-story-cap[data-for="3"] { opacity: 1; transform: none; } .vmc-story-art { position: relative; width: min(100%, 70rem); max-height: 70%; overflow: visible; } .vmc-story-body { stroke: #fdba74; stroke-width: 3; filter: drop-shadow(0 18px 30px rgba(124, 45, 18, .16)); } .vmc-story-file { font: 700 22px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #29211e; } .vmc-story-meta { font: 500 17px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #8a7a72; } .vmc-story-badge { font: 700 14px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #fff; } .vmc-story-label { font: 600 17px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #5b4a42; } .vmc-story-zip { font: 800 30px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #fff; letter-spacing: .02em; } .vmc-story-dots { position: relative; display: flex; gap: .5rem; } .vmc-story-dots span { width: .5rem; height: .5rem; border-radius: 999px; background: #fdba74; opacity: .45; transition: transform var(--dur-ui) var(--ease-spring), opacity var(--dur-ui) var(--ease-out); } .vmc-story-stage[data-step="1"] .vmc-story-dots [data-for="1"], .vmc-story-stage[data-step="2"] .vmc-story-dots [data-for="2"], .vmc-story-stage[data-step="3"] .vmc-story-dots [data-for="3"] { opacity: 1; transform: scale(1.5); background: #c2410c; } @media (max-width: 640px) { .vmc-story { height: 280vh; } .vmc-story-art { max-height: 58%; width: 124%; max-width: none; } } .vmc-story-still { display: grid; gap: 1.5rem; max-width: 72rem; margin: 0 auto; padding: 2.5rem 1rem; } .vmc-story-still figure { margin: 0; display: flex; flex-direction: column-reverse; gap: .5rem; } .vmc-story-still .vmc-story-cap { position: static; opacity: 1; transform: none; } .vmc-story-still .vmc-story-cap::after { font-size: 1.25rem; } @media (min-width: 768px) { .vmc-story-still { grid-template-columns: repeat(3, 1fr); } } .vmc-dropzone { transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), transform var(--dur-enter) var(--ease-spring); } .vmc-upload-mark { transition: transform var(--dur-enter) var(--ease-spring); } .vmc-dropzone[data-drag-over="true"] { transform: scale(1.012); } .vmc-dropzone[data-drag-over="true"] .vmc-upload-mark { transform: translateY(-6px) scale(1.1) rotate(-6deg); } @media (hover: hover) and (pointer: fine) { .vmc-dropzone:hover { box-shadow: 0 18px 50px rgba(154, 52, 18, .1); } .vmc-dropzone:hover .vmc-upload-mark { transform: translateY(-3px) rotate(-3deg); } } .vmc-player-frame { transform-origin: center; will-change: auto; } .vmc-rise { animation: vmc-rise var(--dur-scene) var(--ease-out) both; animation-delay: calc(120ms + var(--rise-i, 0) * 40ms); } @keyframes vmc-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } } .vmc-seg-grow { transform-origin: left center; animation: vmc-seg-grow var(--dur-enter) var(--ease-out) both; } @keyframes vmc-seg-grow { from { transform: scaleX(0); opacity: .4; } } .vmc-card-enter { animation: vmc-card-enter var(--dur-enter) var(--ease-spring) both; } @keyframes vmc-card-enter { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); } } .vmc-progress-fill { transform-origin: left center; transition: transform 300ms var(--ease-out); } .vmc-progress-sheen { position: relative; overflow: hidden; } .vmc-progress-sheen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-100%); animation: vmc-sheen 1.4s var(--ease-in-out) infinite; } @keyframes vmc-sheen { to { transform: translateX(100%); } } .vmc-toast-region { position: fixed; z-index: 110; left: 0; right: 0; top: calc(var(--tools-nav-height, 0px) + .75rem); display: flex; justify-content: center; pointer-events: none; } .vmc-toast { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1rem .55rem .55rem; border-radius: 999px; background: #1e1512; color: #fff; font-size: .875rem; font-weight: 600; box-shadow: 0 14px 40px rgba(41, 33, 30, .28); animation: vmc-toast-in var(--dur-scene) var(--ease-spring) both, vmc-toast-out 260ms var(--ease-out) 2.5s both; } .vmc-toast-check { position: relative; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #16a34a; animation: vmc-check-pop 420ms var(--ease-spring) 80ms both; } .vmc-toast-check svg { position: relative; } .vmc-burst { position: absolute; left: 50%; top: 50%; width: 7px; height: 4px; margin: -2px 0 0 -3.5px; border-radius: 2px; opacity: 0; animation: vmc-burst 700ms var(--ease-out) 140ms both; } @keyframes vmc-toast-in { from { opacity: 0; transform: translate3d(0, -14px, 0) scale(.94); } } @keyframes vmc-toast-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } } @keyframes vmc-check-pop { from { transform: scale(.4); } } @keyframes vmc-burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } } .vmc-empty { display: grid; gap: .5rem; } .vmc-empty-art { width: 10rem; height: 2.5rem; } .vmc-empty-playhead { animation: vmc-empty-sweep 3.6s var(--ease-in-out) infinite alternate; } .vmc-empty-ghost { transform-origin: 44px 20px; animation: vmc-empty-ghost 3.6s var(--ease-in-out) infinite alternate; } @keyframes vmc-empty-sweep { from { transform: translateX(0); } to { transform: translateX(40px); } } @keyframes vmc-empty-ghost { from { transform: scaleX(0); } to { transform: scaleX(1); } } button:not(:disabled):active { transform: scale(.97); transition: transform var(--dur-press) var(--ease-out); } :focus-visible { animation: vmc-focus var(--dur-ui) var(--ease-out); } @keyframes vmc-focus { from { outline-offset: 9px; outline-color: rgba(234, 88, 12, 0); } } @media (prefers-reduced-motion: reduce) { .vmc-rise, .vmc-seg-grow, .vmc-card-enter, .vmc-burst, .vmc-toast-check, .vmc-empty-playhead, .vmc-empty-ghost, .vmc-progress-sheen::after, :focus-visible { animation: none; } .vmc-toast { animation: vmc-toast-fade 200ms linear both, vmc-toast-out 200ms linear 2.5s both; } .vmc-empty-ghost { transform: none; } .vmc-dropzone[data-drag-over="true"], .vmc-dropzone[data-drag-over="true"] .vmc-upload-mark, button:not(:disabled):active { transform: none; } } @keyframes vmc-toast-fade { from { opacity: 0; } } .vmc-reveal { animation: vmc-calm 360ms var(--ease-out) both; } @keyframes vmc-calm { from { opacity: .6; transform: translate3d(0, 6px, 0); } } .vmc-hub-card { animation: vmc-calm 420ms var(--ease-out) both; transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out); } .vmc-hub-card:nth-child(2) { animation-delay: 30ms; } .vmc-hub-card:nth-child(3) { animation-delay: 60ms; } .vmc-hub-card:nth-child(4) { animation-delay: 90ms; } .vmc-hub-card:nth-child(n+5) { animation-delay: 120ms; } .vmc-hub-card:active { transform: scale(.99); transition-duration: var(--dur-press); } .tools-nav a { transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), transform var(--dur-press) var(--ease-out); } .tools-nav a:active { transform: scale(.96); } .vmc-header-links a, .vmc-footer-links a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); } .vmc-brand img { transition: transform var(--dur-enter) var(--ease-spring); } @media (hover: hover) and (pointer: fine) { .vmc-header-links a:hover, .vmc-footer-links a:hover { background-size: 100% 1px; } .vmc-footer-links a:hover { color: #9a3412; } .vmc-brand:hover img { transform: rotate(-6deg) scale(1.04); } .vmc-hub-card:hover { transform: translate3d(0, -2px, 0); border-color: #fed7aa; box-shadow: 0 14px 34px rgba(124, 45, 18, .08); } } @media (prefers-reduced-motion: reduce) { .vmc-reveal, .vmc-hub-card { animation: none; } .vmc-hub-card:hover, .vmc-hub-card:active, .tools-nav a:active, .vmc-brand:hover img { transform: none; } } .vmc-tl-clip { position: absolute; top: 4px; bottom: 4px; z-index: 2; border-radius: 6px; border: 2px solid var(--c); background: color-mix(in srgb, var(--c-soft) 22%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); pointer-events: none; transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } .vmc-tl-clip.is-highlighted { z-index: 3; background: color-mix(in srgb, var(--c-soft) 34%, transparent); box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(2, 6, 23, 0.45); } .vmc-tl-num { position: absolute; top: 3px; left: 9px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: var(--c); color: #fff; font: 700 10px/16px ui-sans-serif, system-ui, sans-serif; text-align: center; } .vmc-tl-handle { position: absolute; top: -2px; bottom: -2px; width: 7px; background: var(--c); transition: width var(--dur-press) var(--ease-out); } .vmc-tl-handle.is-start { left: -2px; border-radius: 6px 0 0 6px; } .vmc-tl-handle.is-end { right: -2px; border-radius: 0 6px 6px 0; } .vmc-tl-handle::after { content: ""; position: absolute; top: 35%; bottom: 35%; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.85); } .vmc-tl-clip.is-highlighted .vmc-tl-handle, .vmc-tl-handle.is-active { width: 11px; } .vmc-tl-draft { position: absolute; top: 4px; bottom: 4px; z-index: 4; display: flex; align-items: flex-end; justify-content: center; border: 2px dashed rgba(255, 255, 255, 0.9); border-radius: 6px; background: rgba(255, 255, 255, 0.14); pointer-events: none; } .vmc-tl-draft span { margin-bottom: 3px; padding: 0 5px; border-radius: 4px; background: rgba(2, 6, 23, 0.7); color: #fff; font: 600 10px/16px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; } .vmc-tl-playhead { position: absolute; top: 0; bottom: 0; z-index: 5; width: 2px; margin-left: -1px; background: #ef4444; box-shadow: 0 0 0 1px rgba(2, 6, 23, 0.35); pointer-events: none; } .vmc-tl-playhead::before { content: ""; position: absolute; top: -1px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 0 0 5px 5px; background: #ef4444; } .vmc-tl-tip { position: absolute; top: 50%; z-index: 6; transform: translate(-50%, -50%); padding: 3px 7px; border-radius: 6px; background: rgba(2, 6, 23, 0.85); color: #fff; font: 600 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; pointer-events: none; } .vmc-tl-tip.is-fine { background: #1d4ed8; } .vmc-clip-card { position: relative; padding: 10px 10px 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--clip-border) 35%, transparent); background: var(--clip-card); transition: box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); } .vmc-clip-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--clip-color); } .vmc-clip-card.is-highlighted { box-shadow: 0 0 0 2px var(--clip-shadow), 0 6px 18px rgba(15, 23, 42, 0.08); } .vmc-clip-head { display: flex; align-items: center; gap: 10px; } .vmc-clip-thumb { position: relative; flex: none; width: 72px; height: 44px; overflow: hidden; border: 0; border-radius: 8px; background: #0f172a; padding: 0; cursor: pointer; transition: transform var(--dur-press) var(--ease-out); } .vmc-clip-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; } .vmc-clip-thumb-empty { position: absolute; inset: 0; background: linear-gradient(110deg, #1e293b 30%, #334155 50%, #1e293b 70%); background-size: 200% 100%; animation: vmc-shimmer 1.2s linear infinite; } @keyframes vmc-shimmer { to { background-position: -200% 0; } } .vmc-clip-thumb:active { transform: scale(0.95); } .vmc-clip-num { position: absolute; top: 3px; left: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px; background: var(--clip-color); color: #fff; font: 700 10px/16px ui-sans-serif, system-ui, sans-serif; } .vmc-clip-edge-tag { position: absolute; top: 3px; right: 3px; padding: 0 4px; border-radius: 4px; background: rgba(2, 6, 23, 0.75); color: #fff; font: 700 9px/14px ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.06em; } .vmc-clip-play { position: absolute; right: 4px; bottom: 4px; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .vmc-clip-meta { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; } .vmc-clip-name { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 2px 6px; margin-left: -6px; font-size: 14px; font-weight: 600; color: rgb(15, 23, 42); text-overflow: ellipsis; } .vmc-clip-name:hover { border-color: rgba(148, 163, 184, 0.45); } .vmc-clip-name:focus { outline: none; border-color: var(--clip-color); background: #fff; } .vmc-clip-length { font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(100, 116, 139); } .vmc-clip-icon { display: inline-flex; flex: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: transparent; color: rgb(71, 85, 105); transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press); } .vmc-clip-icon.is-export { background: #16a34a; color: #fff; } .vmc-clip-icon.is-export:disabled { background: rgb(148, 163, 184); } .vmc-clip-icon.is-delete { color: rgb(220, 38, 38); } .vmc-clip-icon:active { transform: scale(0.92); } .vmc-clip-pct { font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } @media (hover: hover) and (pointer: fine) { .vmc-clip-thumb:hover .vmc-clip-play { transform: scale(1.1); } .vmc-clip-icon.is-export:not(:disabled):hover { background: #15803d; } .vmc-clip-icon.is-delete:hover { background: rgb(254, 242, 242); } } .vmc-trim { margin-top: 10px; container-type: inline-size; } .vmc-trim-rail { position: relative; height: 34px; margin: 0 12px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.07) 0 1px, transparent 1px 10%), rgba(255, 255, 255, 0.75); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); } .vmc-trim-range { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-block: 2px solid var(--trim-color); background: var(--trim-soft); transition: left 160ms var(--ease-out), width 160ms var(--ease-out); } .vmc-trim-rail.is-dragging .vmc-trim-range, .vmc-trim-rail.is-dragging .vmc-trim-handle { transition: none; } .vmc-trim-length { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--trim-color); white-space: nowrap; pointer-events: none; } .vmc-trim-handle { position: absolute; top: -3px; bottom: -3px; width: 44px; margin-left: -22px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: ew-resize; touch-action: none; -webkit-tap-highlight-color: transparent; transition: left 160ms var(--ease-out); } .vmc-trim-grip { position: relative; width: 12px; height: 100%; border-radius: 5px; background: var(--trim-color); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25); transition: transform 140ms var(--ease-out), box-shadow 140ms; } .vmc-trim-grip::after { content: ""; position: absolute; left: 50%; top: 30%; bottom: 30%; width: 2px; margin-left: -1px; border-radius: 1px; background: rgba(255, 255, 255, 0.85); } .vmc-trim-handle:focus-visible { outline: none; } .vmc-trim-handle:focus-visible .vmc-trim-grip { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--trim-color); } .vmc-trim-handle.is-active .vmc-trim-grip { transform: scaleX(1.3); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3); } .vmc-fine-chip { position: absolute; left: 0; right: 0; width: -moz-max-content; width: max-content; margin-inline: auto; bottom: calc(100% + 6px); z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(15, 23, 42, 0.85); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; pointer-events: none; animation: vmc-rise var(--dur-ui) var(--ease-out) both; } .vmc-fine-chip.is-fine { background: #1d4ed8; } .vmc-trim-rows { margin-top: 8px; display: flex; justify-content: space-between; gap: 8px; } .vmc-trim-stepper { display: flex; align-items: stretch; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgb(226, 232, 240); } .vmc-trim-step { display: inline-flex; width: 34px; height: 40px; align-items: center; justify-content: center; border: 0; background: transparent; color: rgb(51, 65, 85); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press); } .vmc-trim-step:first-child { border-radius: 9px 0 0 9px; } .vmc-trim-step:last-child { border-radius: 0 9px 9px 0; } .vmc-trim-step:active { transform: scale(0.9); background: var(--trim-soft); } .vmc-trim-value { display: flex; min-width: 70px; flex-direction: column; align-items: center; justify-content: center; border: 0; border-inline: 1px solid rgb(226, 232, 240); background: transparent; padding: 0 4px; font: 600 13px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(15, 23, 42); font-variant-numeric: tabular-nums; cursor: text; } .vmc-trim-value-label { font: 700 9px/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(100, 116, 139); } input.vmc-trim-value { width: 70px; text-align: center; outline: 2px solid var(--trim-color); outline-offset: -2px; background: #fff; font-size: 16px; } @container (max-width: 290px) { .vmc-trim-rows { flex-direction: column; } .vmc-trim-stepper { justify-content: space-between; } .vmc-trim-value { flex: 1; } } @media (hover: hover) and (pointer: fine) { .vmc-trim-step:hover { background: rgb(248, 250, 252); } .vmc-trim-value:not(input):hover { background: rgb(248, 250, 252); } .vmc-trim-handle:hover .vmc-trim-grip { transform: scaleX(1.15); } } @media (prefers-reduced-motion: reduce) { .vmc-trim-range, .vmc-trim-handle, .vmc-trim-grip, .vmc-trim-step, .vmc-tl-clip, .vmc-tl-handle, .vmc-clip-thumb, .vmc-clip-icon { transition: none; } .vmc-clip-thumb-empty, .vmc-fine-chip { animation: none; } } .vmc-tl-play { position: absolute; top: 50%; left: 50%; z-index: 1; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; margin: -14px 0 0 -14px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--c); box-shadow: 0 2px 8px rgba(2, 6, 23, 0.4); pointer-events: auto; cursor: pointer; animation: vmc-card-enter var(--dur-ui) var(--ease-spring) both; transition: transform var(--dur-press) var(--ease-out); } .vmc-tl-play:active { transform: scale(0.9); } .vmc-trim-edge { display: flex; flex-direction: column; gap: 4px; } .vmc-trim-edge:last-child { align-items: flex-end; } .vmc-trim-playhead { display: inline-flex; min-height: 28px; align-items: center; gap: 6px; border: 0; border-radius: 6px; background: transparent; padding: 0 6px; font-size: 12px; font-weight: 600; color: rgb(71, 85, 105); transition: background-color var(--dur-press), transform var(--dur-press) var(--ease-out); } .vmc-trim-playhead:active { transform: scale(0.96); background: var(--trim-soft); } .vmc-trim-playhead-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2); } @media (hover: hover) and (pointer: fine) { .vmc-trim-playhead:hover { background: rgba(255, 255, 255, 0.8); color: rgb(15, 23, 42); } .vmc-tl-play:hover { transform: scale(1.08); } } @container (max-width: 290px) { .vmc-trim-edge, .vmc-trim-edge:last-child { align-items: stretch; } } @media (prefers-reduced-motion: reduce) { .vmc-tl-play { animation: none; } } .vmc-how { position: relative; } .vmc-how-stage { display: grid; align-items: center; align-content: center; gap: 1.25rem 3rem; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-block: 1rem; } .vmc-how-head { grid-column: 1 / -1; } .vmc-how-art-col { position: relative; min-width: 0; } .vmc-how-make { position: absolute; right: 0; bottom: 4%; padding: .5rem .9rem; border: 1px solid #fed7aa; border-radius: 999px; background: #fff; color: #9a3412; font-size: .8125rem; font-weight: 600; box-shadow: 0 6px 18px rgba(124, 45, 18, .1); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui), background-color var(--dur-ui); } .vmc-how-stage[data-toy="on"] .vmc-how-make { opacity: 1; visibility: visible; transition-delay: 0s; } .vmc-how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; color: rgb(71, 85, 105); } .vmc-how-steps li { position: relative; padding: .8rem 1rem .8rem 1.25rem; border-radius: 14px; line-height: 1.55; transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } .vmc-how-steps li::before { content: ""; position: absolute; left: .4rem; top: .9rem; bottom: .9rem; width: 3px; border-radius: 2px; background: #c2410c; transform: scaleY(0); transition: transform var(--dur-enter) var(--ease-spring); } .vmc-how-stage[data-step="1"] li[data-for="1"], .vmc-how-stage[data-step="2"] li[data-for="2"], .vmc-how-stage[data-step="3"] li[data-for="3"], .vmc-how-stage[data-step="4"] li[data-for="4"] { background: #fff; box-shadow: 0 10px 30px rgba(124, 45, 18, .08), inset 0 0 0 1px #fde3cc; } .vmc-how-stage[data-step="1"] li[data-for="1"]::before, .vmc-how-stage[data-step="2"] li[data-for="2"]::before, .vmc-how-stage[data-step="3"] li[data-for="3"]::before, .vmc-how-stage[data-step="4"] li[data-for="4"]::before { transform: none; } .vmc-how-art-wrap { min-width: 0; } .vmc-how-art { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--tools-nav-height, 0px) - 8rem); overflow: visible; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .vmc-how-window { fill: #fff; stroke: #fed7aa; stroke-width: 2.5; filter: drop-shadow(0 18px 34px rgba(124, 45, 18, .12)); } .vmc-how-video { filter: drop-shadow(0 10px 18px rgba(124, 45, 18, .14)); } .vmc-how-file { font: 700 17px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #29211e; } .vmc-how-num { font: 700 11px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; fill: #fff; } .vmc-how-count { font-size: 14px; } .vmc-how-hit { fill: transparent; pointer-events: none; } .vmc-how-ghost rect { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; transform-box: fill-box; transform-origin: left center; } .vmc-how-ghost, .vmc-how-knob-ring { opacity: 0; pointer-events: none; } .vmc-how-draft { fill: rgba(255, 255, 255, .2); stroke: #fff; stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; } .vmc-how-toy-range { fill-opacity: .26; transform-box: fill-box; transform-origin: left center; animation: vmc-seg-grow var(--dur-enter) var(--ease-out) both; pointer-events: none; } .vmc-how-toy-card { transform-box: fill-box; transform-origin: 0 0; transition: transform 560ms var(--ease-out), opacity 300ms var(--ease-out); pointer-events: none; } .vmc-how-count-inner { transform-box: fill-box; transform-origin: center; } .vmc-how-count-inner.is-bump { animation: vmc-how-bump 380ms var(--ease-spring); } @keyframes vmc-how-bump { 40% { transform: scale(1.3); } } .vmc-how-stage[data-toy="on"] .vmc-how-art { touch-action: pan-y; } .vmc-how-stage[data-toy="on"] .vmc-how-hit { pointer-events: all; cursor: ew-resize; } .vmc-how-stage[data-toy="on"]:not([data-played]) .vmc-how-ghost { opacity: 1; transition: opacity var(--dur-scene) var(--ease-out) 200ms; } .vmc-how-stage[data-toy="on"]:not([data-played]) .vmc-how-ghost rect { animation: vmc-empty-ghost 1.8s var(--ease-in-out) infinite alternate; } .vmc-how-stage[data-toy="on"]:not([data-played]) .vmc-how-knob-ring { transform-box: fill-box; transform-origin: center; animation: vmc-how-ring 1.8s var(--ease-out) infinite; } @keyframes vmc-how-ring { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(2); } } @media (prefers-reduced-motion: no-preference) { .vmc-how { height: 220vh; } .vmc-how-stage { position: sticky; top: var(--tools-nav-height, 0px); height: calc(100vh - var(--tools-nav-height, 0px)); height: calc(100svh - var(--tools-nav-height, 0px)); } } @media (max-width: 767px) { .vmc-how-stage { grid-template-columns: minmax(0, 1fr); align-content: center; gap: .75rem; } .vmc-how-art-col { order: -1; } .vmc-how-head { order: -2; } .vmc-how-head h2 { margin-top: .25rem; font-size: 1.25rem; } .vmc-how-make { bottom: 0; padding: .4rem .7rem; font-size: .75rem; } .vmc-how-art { max-height: 40svh; margin: 0 auto; } .vmc-how-steps { gap: .15rem; font-size: .9375rem; } .vmc-how-steps li { padding: .55rem .8rem .55rem 1.1rem; } } @media (prefers-reduced-motion: no-preference) and (max-width: 767px) { .vmc-how { height: 180vh; } } @media (prefers-reduced-motion: reduce) { .vmc-how-steps li { background: none !important; box-shadow: none !important; } .vmc-how-steps li::before { transform: none; background: #fdba74; } .vmc-how-ghost rect, .vmc-how-knob-ring, .vmc-how-toy-range, .vmc-how-count-inner.is-bump { animation: none !important; } .vmc-how-toy-card { transition: none; } } .vmc-faq-art { margin: 0 0 .75rem; } .vmc-faq-art svg { display: block; width: 100%; max-width: 22.5rem; height: auto; overflow: visible; } .vmc-faq-screen { fill: #fff; stroke: #e7cdbd; stroke-width: 2.5; transition: stroke 160ms linear; } .share-actions > * { --i: 0; transform: translate3d(calc((1 - var(--sp, 1)) * (2.5 - var(--i)) * 2.875rem), calc((1 - var(--sp, 1)) * 4px), 0) rotate(calc((1 - var(--sp, 1)) * (var(--i) - 2.5) * 8deg)); } .share-actions > :nth-child(2) { --i: 1; } .share-actions > :nth-child(3) { --i: 2; } .share-actions > :nth-child(4) { --i: 3; } .share-actions > :nth-child(5) { --i: 4; } .share-actions > :nth-child(6) { --i: 5; } @media (prefers-reduced-motion: reduce) { .share-actions > * { transform: none; } } .vmc-hub-mark { display: none; flex: none; overflow: visible; margin-bottom: -.5rem; } @media (min-width: 640px) { .vmc-hub-mark { display: block; } } .vmc-hub-frame { transform-box: view-box; transform-origin: 110px 200px; stroke: #fff; stroke-width: 0; } .vmc-privacy-mark { display: block; margin-bottom: 1rem; overflow: visible; } .vmc-privacy-tether { opacity: 0; } .vmc-privacy-cloud { opacity: .45; transform: translate(6px, -6px); } .vmc-privacy-lock { transform: translate(86px, 10px); } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { .vmc-hub-frame, .vmc-hub-band, .vmc-privacy-tether, .vmc-privacy-cloud, .vmc-privacy-lock { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); animation-range: 0 130px; } .vmc-hub-frame { animation-name: vmc-hub-fan; } .vmc-hub-band { animation-name: vmc-hub-band; } .vmc-privacy-tether { animation-name: vmc-privacy-tether; animation-range: 0 90px; } .vmc-privacy-cloud { animation-name: vmc-privacy-cloud; } .vmc-privacy-lock { animation-name: vmc-privacy-lock; animation-range: 60px 160px; } } } @keyframes vmc-hub-fan { 70% { stroke-width: 0; } to { transform: rotate(var(--a)) translate(var(--tx), var(--ty)) scale(var(--s)); stroke-width: 2.5px; } } @keyframes vmc-hub-band { to { opacity: 0; transform: translateY(16px); } } @keyframes vmc-privacy-tether { from { opacity: 1; } } @keyframes vmc-privacy-cloud { from { opacity: 1; transform: translate(-4px, 4px); } } @keyframes vmc-privacy-lock { from { transform: translate(86px, 10px) scale(0); } } @media (hover: hover) and (pointer: fine) { .vmc-how-make:hover { background: #fff7ed; } } @media (max-width: 767px) and (max-height: 760px) { .vmc-how-art { max-height: 33svh; } .vmc-how-steps { font-size: .875rem; } } .vmc-fade-veil { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; } .vmc-mode-chip { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; background: rgba(2, 6, 23, 0.72); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; animation: vmc-rise var(--dur-ui) var(--ease-out) both; } .vmc-mode-chip:not(:has(.vmc-mode-num)) { padding-left: 9px; } .vmc-mode-num { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--c, #2563eb); font: 700 11px/18px ui-sans-serif, system-ui, sans-serif; text-align: center; } .vmc-mode-time { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255, 255, 255, 0.8); } .vmc-tl { --wave-h: 24px; } .vmc-tl.is-compact { --wave-h: 18px; } .vmc-tl-frames { position: absolute; top: 0; left: 0; right: 0; bottom: var(--wave-h); } .vmc-tl-wave { position: absolute; left: 0; right: 0; bottom: 0; height: var(--wave-h); display: flex; align-items: center; justify-content: center; background: #0b1324; border-top: 1px solid rgba(148, 163, 184, 0.18); } .vmc-tl-wave canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .vmc-tl-wave.is-loading { background: linear-gradient(110deg, #0b1324 30%, #16213a 50%, #0b1324 70%); background-size: 200% 100%; animation: vmc-shimmer 1.4s linear infinite; } .vmc-tl-wave-note { position: relative; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: rgba(203, 213, 225, 0.75); pointer-events: none; } .vmc-tl-wave-btn { position: relative; z-index: 6; height: calc(var(--wave-h) - 4px); padding: 0 8px; border: 1px solid rgba(186, 230, 253, 0.4); border-radius: 999px; background: rgba(15, 23, 42, 0.9); color: #e0f2fe; font-size: 10px; font-weight: 600; cursor: pointer; } .vmc-tl-dim { position: absolute; top: 0; bottom: 0; z-index: 4; background: rgba(2, 6, 23, 0.55); pointer-events: none; } .vmc-tl-clip.is-under { background: color-mix(in srgb, var(--c-soft) 30%, transparent); } .vmc-tl-clip.is-playing { z-index: 4; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c), 0 4px 14px rgba(2, 6, 23, 0.45); } .vmc-tl-progress { position: absolute; top: 0; bottom: 0; left: 0; background: color-mix(in srgb, var(--c-soft) 38%, transparent); pointer-events: none; } .vmc-ramps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .vmc-ramp-shade { fill: rgba(2, 6, 23, 0.55); } .vmc-ramp-line { fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; } .vmc-trim-range .vmc-ramp-shade, .vmc-ct-len .vmc-ramp-shade { fill: rgba(15, 23, 42, 0.16); } .vmc-trim-range .vmc-ramp-line, .vmc-ct-len .vmc-ramp-line { stroke: var(--trim-color); } .vmc-trim-range .vmc-trim-length { position: relative; } .vmc-play-clip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid var(--c); border-radius: 6px; background: var(--c-soft); color: var(--c); font-size: 14px; font-weight: 600; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); } .vmc-play-clip.is-on { background: var(--c); color: #fff; } .vmc-play-clip-num { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--c); color: #fff; font: 700 11px/20px ui-sans-serif, system-ui, sans-serif; text-align: center; } .vmc-play-clip.is-on .vmc-play-clip-num { background: #fff; color: var(--c); } .vmc-transport-hint kbd { display: inline-block; min-width: 1.4em; padding: 0 4px; border: 1px solid rgb(203, 213, 225); border-bottom-width: 2px; border-radius: 4px; background: #fff; font: 600 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgb(51, 65, 85); text-align: center; } .vmc-mbar-clip { display: inline-flex; flex: none; height: 32px; align-items: center; gap: 4px; padding: 0 7px; border: 0; border-radius: 4px; background: color-mix(in srgb, var(--c) 70%, #020617); color: #fff; } .vmc-mbar-clip.is-on { background: var(--c); box-shadow: inset 0 0 0 2px #fff; } .vmc-mbar-num { font: 700 11px/1 ui-sans-serif, system-ui, sans-serif; } .vmc-panel-count { display: inline-flex; min-width: 22px; height: 20px; align-items: center; justify-content: center; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: rgb(241, 245, 249); color: rgb(71, 85, 105); font-size: 12px; font-weight: 700; vertical-align: 1px; } .vmc-view-switch { display: inline-flex; flex: none; padding: 2px; border-radius: 9px; background: rgb(241, 245, 249); box-shadow: inset 0 0 0 1px rgb(226, 232, 240); } .vmc-view-switch button { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: rgb(71, 85, 105); font-size: 12px; font-weight: 600; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } .vmc-view-switch button[aria-pressed="true"] { background: #fff; color: rgb(15, 23, 42); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); } .vmc-export-btn { position: relative; display: flex; min-height: 50px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; overflow: hidden; padding: 6px 12px; border-radius: 8px; text-align: left; transition: background-color var(--dur-ui) var(--ease-out); } .vmc-export-btn.is-dark { border: 1px solid rgb(15, 23, 42); background: rgb(15, 23, 42); color: #fff; } .vmc-export-btn.is-light { border: 1px solid rgb(203, 213, 225); background: #fff; color: rgb(15, 23, 42); } .vmc-export-btn:disabled:not(.is-active) { opacity: 0.5; } .vmc-export-btn.is-light.is-active { background: #fff7ed; } .vmc-export-fill { position: absolute; inset: 0; background: rgba(234, 88, 12, 0.5); } .vmc-export-label { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; } .vmc-export-note { position: relative; padding-left: 22px; font-size: 11px; font-weight: 500; opacity: 0.7; } @media (hover: hover) and (pointer: fine) { .vmc-export-btn.is-dark:not(:disabled):hover { background: rgb(30, 41, 59); } .vmc-export-btn.is-light:not(:disabled):hover { background: rgb(248, 250, 252); } .vmc-view-switch button[aria-pressed="false"]:hover { color: rgb(15, 23, 42); } } .vmc-export-status { display: flex; height: 48px; flex-direction: column; justify-content: center; overflow: hidden; } .vmc-export-progress { padding: 6px 8px; border: 1px solid #ffedd5; border-radius: 8px; background: #fff7ed; color: #7c2d12; } .vmc-play-clip { min-width: 9.25rem; justify-content: center; } .vmc-play-all { min-width: 7.25rem; justify-content: center; } .vmc-play-clip-label { min-width: 4.6em; text-align: left; } .vmc-tl-playhead-track { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .vmc-tl-playhead-track .vmc-tl-playhead { left: 0; } .vmc-ready { padding: 10px; border: 1px solid #fed7aa; border-radius: 10px; background: #fff7ed; } .vmc-ready-share { display: inline-flex; width: 100%; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; border: 0; border-radius: 8px; background: #c2410c; color: #fff; font-size: 14px; font-weight: 600; } .vmc-ready-one { display: inline-flex; flex: none; min-height: 32px; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid #fed7aa; border-radius: 6px; background: #fff; color: #9a3412; font-weight: 600; } .vmc-ready-close { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: rgb(100, 116, 139); } .vmc-clip-card.is-playing::before { width: 6px; } .vmc-fade-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .vmc-fade { position: relative; display: flex; min-width: 0; height: 36px; align-items: center; gap: 6px; padding: 0 0 0 8px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px rgb(226, 232, 240); color: rgb(100, 116, 139); } .vmc-fade.is-on { color: var(--clip-color, var(--trim-color)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clip-color, var(--trim-color)) 45%, transparent); } .vmc-fade:focus-within { box-shadow: inset 0 0 0 2px var(--clip-color, var(--trim-color)); } .vmc-fade-icon { display: inline-flex; flex: none; } .vmc-fade-icon svg { width: 16px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .vmc-fade-label { flex: none; font-size: 12px; font-weight: 600; color: rgb(71, 85, 105); white-space: nowrap; } .vmc-fade-select { min-width: 0; height: 100%; flex: 1; -moz-appearance: none; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0 9px 9px 0; padding: 0 22px 0 4px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center; color: rgb(15, 23, 42); font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; } .vmc-fade-select:focus { outline: none; } .vmc-fade-input { width: 100%; min-width: 0; height: 100%; flex: 1; border: 0; border-radius: 0 9px 9px 0; padding: 0 8px; background: transparent; color: rgb(15, 23, 42); font: 600 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .vmc-fade-input:focus { outline: none; } .vmc-fade.is-compact { height: 30px; gap: 3px; padding-left: 6px; } .vmc-fade.is-compact .vmc-fade-select { padding-right: 18px; background-position: right 6px center; font-size: 12px; } @media (pointer: coarse) { .vmc-fade-select, .vmc-fade.is-compact .vmc-fade-select { font-size: 16px; } } .vmc-ctable { container-type: inline-size; display: grid; gap: 6px; } .vmc-ctable-head { display: none; } .vmc-ct-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "num name name actions" "start start end end" "fade fade fade len"; align-items: center; gap: 6px 8px; padding: 8px 8px 8px 10px; border: 1px solid rgb(226, 232, 240); border-radius: 10px; background: var(--clip-card); transition: box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out); } .vmc-ct-row::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--clip-color); } .vmc-ct-row.is-selected { border-color: transparent; box-shadow: 0 0 0 2px var(--clip-shadow), 0 4px 14px rgba(15, 23, 42, 0.06); } .vmc-ct-row.is-playing::before { width: 5px; } .vmc-ct-row > .vmc-ct-c-num { grid-area: num; } .vmc-ct-row > .vmc-ct-c-name { grid-area: name; display: flex; min-width: 0; align-items: center; gap: 8px; } .vmc-ct-row > .vmc-ct-c-start { grid-area: start; } .vmc-ct-row > .vmc-ct-c-end { grid-area: end; } .vmc-ct-row > .vmc-ct-c-len { grid-area: len; } .vmc-ct-row > .vmc-ct-c-fade { grid-area: fade; display: flex; min-width: 0; gap: 6px; } .vmc-ct-row > .vmc-ct-c-fade .vmc-fade { flex: 1; } .vmc-ct-row > .vmc-ct-c-actions { grid-area: actions; display: flex; gap: 2px; } .vmc-ct-num { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 4px; border-radius: 6px; background: var(--clip-color); color: #fff; font: 700 11px/1 ui-sans-serif, system-ui, sans-serif; } .vmc-ct-thumb { position: relative; flex: none; width: 48px; height: 30px; overflow: hidden; padding: 0; border: 0; border-radius: 6px; background: #0f172a; cursor: pointer; } .vmc-ct-thumb img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .vmc-ct-thumb-play { position: absolute; right: 2px; bottom: 2px; display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #0f172a; } .vmc-ct-name { width: 100%; min-width: 0; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin-left: -4px; background: transparent; font-size: 13px; font-weight: 600; color: rgb(15, 23, 42); text-overflow: ellipsis; } .vmc-ct-namecol { display: flex; min-width: 0; flex: 1; flex-direction: column; } .vmc-ct-sub { display: none; padding-left: 2px; font: 600 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--trim-color); } .vmc-ct-name:focus { outline: none; border-color: var(--clip-color); background: #fff; } .vmc-ct-len { position: relative; display: flex; height: 30px; min-width: 56px; align-items: center; justify-content: center; overflow: hidden; border-block: 2px solid var(--trim-color); background: var(--trim-soft); color: var(--trim-color); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .vmc-ct-len span { position: relative; } .vmc-ctable .vmc-trim-edge, .vmc-ctable .vmc-trim-edge:last-child { align-items: stretch; } .vmc-ctable .vmc-trim-stepper { justify-content: space-between; } .vmc-ctable .vmc-trim-step { width: 30px; height: 36px; } .vmc-ctable .vmc-trim-value { min-width: 60px; flex: 1; font-size: 12px; } .vmc-ctable input.vmc-trim-value { width: 60px; } .vmc-ctable .vmc-clip-icon { width: 34px; height: 34px; } .vmc-ct-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } @container (min-width: 560px) { .vmc-ctable-head, .vmc-ct-row { grid-template-columns: 22px minmax(0, 1fr) 108px 108px 82px 72px; grid-template-areas: "num name start end fade actions"; -moz-column-gap: 6px; column-gap: 6px; } .vmc-ct-row > .vmc-ct-c-len, .vmc-ctable-head > .vmc-ct-c-len { display: none; } .vmc-ct-sub { display: block; } .vmc-ctable-head { display: grid; align-items: end; padding: 0 8px 2px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(100, 116, 139); } .vmc-ctable-head > .vmc-ct-c-num { grid-area: num; } .vmc-ctable-head > .vmc-ct-c-name { grid-area: name; } .vmc-ctable-head > .vmc-ct-c-start { grid-area: start; } .vmc-ctable-head > .vmc-ct-c-end { grid-area: end; } .vmc-ctable-head > .vmc-ct-c-fade { grid-area: fade; } .vmc-ctable-head > .vmc-ct-c-actions { grid-area: actions; } .vmc-ct-row { padding: 6px 8px 6px 10px; } .vmc-ct-row > .vmc-ct-c-fade { flex-direction: column; gap: 3px; } .vmc-ct-row .vmc-fade.is-compact { height: 22px; border-radius: 6px; } .vmc-ct-row .vmc-fade.is-compact .vmc-fade-select { padding-right: 14px; background-position: right 4px center; font-size: 11px; } .vmc-ct-row .vmc-trim-value-label { display: none; } .vmc-ct-row .vmc-trim-step { width: 28px; height: 34px; } .vmc-ct-row .vmc-trim-value { min-width: 52px; } .vmc-ct-row .vmc-trim-step { width: 26px; } } @media (prefers-reduced-motion: reduce) { .vmc-mode-chip, .vmc-tl-wave.is-loading { animation: none; } .vmc-play-clip, .vmc-view-switch button, .vmc-export-btn, .vmc-ct-row { transition: none; } } .vmc-tl-cut { --c: #ef4444; position: absolute; top: 0; bottom: 0; z-index: 4; background: repeating-linear-gradient(-45deg, rgba(239, 68, 68, 0.5) 0 4px, rgba(2, 6, 23, 0.62) 4px 9px); box-shadow: inset 0 2px 0 #ef4444, inset 0 -2px 0 #ef4444; pointer-events: none; } .vmc-tl-cut .vmc-tl-handle { top: 0; bottom: 0; width: 5px; } .vmc-tl-cut .vmc-tl-handle.is-start { left: 0; border-radius: 0; } .vmc-tl-cut .vmc-tl-handle.is-end { right: 0; border-radius: 0; } .vmc-tl-cut .vmc-tl-handle.is-active, .vmc-tl-cut.is-selected .vmc-tl-handle { width: 9px; } .vmc-tl-cut.is-selected { box-shadow: inset 0 2px 0 #ef4444, inset 0 -2px 0 #ef4444, 0 0 0 2px #fff, 0 4px 14px rgba(2, 6, 23, 0.45); } .vmc-tl-cut.is-playing { box-shadow: inset 0 2px 0 #fecaca, inset 0 -2px 0 #fecaca, 0 0 0 2px #fff; } .vmc-tl-cut-len { position: absolute; left: 50%; bottom: calc(var(--wave-h) + 3px); transform: translateX(-50%); padding: 0 5px; border-radius: 4px; background: #dc2626; color: #fff; font: 700 10px/15px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; pointer-events: none; } .vmc-tl-cut.is-selected .vmc-tl-cut-len { display: none; } .vmc-tl-cut-x { color: #dc2626; } .vmc-tl-draft.is-cut { border-color: #fca5a5; background: rgba(239, 68, 68, 0.28); } .vmc-tl.is-remove-mode { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55); } .vmc-drag-mode button.is-cut[aria-pressed="true"] { color: #b91c1c; } .vmc-mbar-mode { display: inline-flex; flex: none; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color var(--dur-ui) var(--ease-out); } .vmc-mbar-mode.is-on { background: #dc2626; box-shadow: inset 0 0 0 2px #fff; } .vmc-cuts { margin-bottom: 1rem; padding: 10px 12px 12px; border: 1px solid #fecaca; border-radius: 10px; background: #fff8f8; animation: vmc-card-enter var(--dur-ui) var(--ease-spring) both; } .vmc-panel-count.is-cut { background: #fee2e2; color: #b91c1c; } .vmc-cut-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .vmc-cut-chip { display: inline-flex; align-items: stretch; overflow: hidden; border: 1px solid #fecaca; border-radius: 999px; background: #fff; transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); } .vmc-cut-chip.is-selected { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18); } .vmc-cut-chip.is-playing { background: #fee2e2; } .vmc-cut-chip button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; border: 0; background: transparent; color: rgb(30, 41, 59); cursor: pointer; } .vmc-cut-chip-play { padding: 0 6px 0 9px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; } .vmc-cut-chip-play svg { color: #dc2626; } .vmc-cut-chip-x { padding: 0 8px 0 5px; border-left: 1px solid #fee2e2 !important; color: rgb(100, 116, 139) !important; } .vmc-cuts-btn { position: relative; display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 1px solid #fecaca; border-radius: 8px; background: #fff; color: rgb(15, 23, 42); font-size: 14px; font-weight: 600; transition: background-color var(--dur-ui) var(--ease-out); } .vmc-cuts-btn.is-on { background: #fee2e2; } .vmc-cuts-btn.is-save { border-color: #dc2626; background: #dc2626; color: #fff; } .vmc-cuts-btn.is-save .vmc-export-fill { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.22); } .vmc-cuts-btn:disabled:not(.is-active) { opacity: 0.5; } .vmc-cut-note { display: block; font-size: 11px; font-weight: 600; color: #b91c1c; } .vmc-ct-len .vmc-cut-note, .vmc-ct-sub .vmc-cut-note { display: inline; } @media (hover: hover) and (pointer: fine) { .vmc-cut-chip-play:hover { background: #fef2f2; } .vmc-cut-chip-x:hover { background: #fef2f2; color: #b91c1c !important; } .vmc-cuts-btn:not(.is-save):hover { background: #fef2f2; } .vmc-cuts-btn.is-save:hover:not(:disabled) { background: #b91c1c; } } @media (prefers-reduced-motion: reduce) { .vmc-cuts { animation: none; } .vmc-cut-chip, .vmc-cuts-btn, .vmc-mbar-mode { transition: none; } } .hover\:border-orange-500:hover { --tw-border-opacity: 1; border-color: rgb(249 115 22 / var(--tw-border-opacity)); } .hover\:bg-blue-100:hover { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity)); } .hover\:bg-blue-800:hover { --tw-bg-opacity: 1; background-color: rgb(154 52 18 / var(--tw-bg-opacity)); } .hover\:bg-orange-800:hover { --tw-bg-opacity: 1; background-color: rgb(154 52 18 / var(--tw-bg-opacity)); } .hover\:bg-red-700:hover { --tw-bg-opacity: 1; background-color: rgb(185 28 28 / var(--tw-bg-opacity)); } .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } .hover\:bg-slate-800:hover { --tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } .hover\:bg-white:hover { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); } .hover\:text-orange-800:hover { --tw-text-opacity: 1; color: rgb(154 52 18 / var(--tw-text-opacity)); } .hover\:text-orange-950:hover { --tw-text-opacity: 1; color: rgb(67 20 7 / var(--tw-text-opacity)); } .active\:scale-95:active { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .active\:scale-\[0\.98\]:active { --tw-scale-x: 0.98; --tw-scale-y: 0.98; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @media (min-width: 640px) { .sm\:-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; } .sm\:mt-7 { margin-top: 1.75rem; } .sm\:min-h-\[340px\] { min-height: 340px; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:gap-6 { gap: 1.5rem; } .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-8 { padding-top: 2rem; padding-bottom: 2rem; } .sm\:pb-16 { padding-bottom: 4rem; } .sm\:pl-3 { padding-left: 0.75rem; } .sm\:pt-8 { padding-top: 2rem; } .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-5xl { font-size: 3rem; line-height: 1; } .sm\:text-base { font-size: 1rem; line-height: 1.5rem; } .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .sm\:text-xs { font-size: 0.75rem; line-height: 1rem; } } @media (min-width: 768px) { .md\:mx-0 { margin-left: 0px; margin-right: 0px; } .md\:mb-6 { margin-bottom: 1.5rem; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .md\:rounded-lg { border-radius: 0.5rem; } .md\:pb-3 { padding-bottom: 0.75rem; } } @media (min-width: 1024px) { .lg\:grid-cols-\[minmax\(0\2c 1fr\)_360px\] { grid-template-columns: minmax(0,1fr) 360px; } .lg\:flex-wrap { flex-wrap: wrap; } .lg\:justify-center { justify-content: center; } .lg\:gap-y-0 { row-gap: 0px; } .lg\:gap-y-0\.5 { row-gap: 0.125rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:text-6xl { font-size: 3.75rem; line-height: 1; } } @media (min-width: 1280px) { .xl\:max-w-\[84rem\] { max-width: 84rem; } .xl\:grid-cols-\[minmax\(0\2c 1fr\)_40rem\] { grid-template-columns: minmax(0,1fr) 40rem; } }