.vj{--studio-rail:324px}.vj [hidden]{display:none!important}.vj button,.vj input,.vj select{-webkit-tap-highlight-color:transparent}.vj button:focus-visible,.vj label:has(input:focus-visible),.vj__surface:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.vj__drop{background:radial-gradient(ellipse at 50% 25%, var(--accent-soft), transparent 65%);min-height:390px;margin:16px}.vj__drop .filedrop__art{margin-bottom:12px;transform:scale(1.12)}.vj__drop .filedrop__sheet{border-radius:5px}.vj__drop .filedrop__sheet:after{content:"";border-block:3px dotted var(--border-input);pointer-events:none;position:absolute;inset:5px 0}.vj__drop .filedrop__title{font-family:var(--font-display);letter-spacing:-.035em;font-size:clamp(1.25rem,1rem + 1.5cqi,1.8rem)}.vj__drop .filedrop__hint{max-width:35ch;margin-inline:auto}.vj__progress{padding:18px var(--studio-pad);border-bottom:1px solid var(--border);background:var(--surface-2);align-items:center;gap:14px;display:flex}.vj__progress>div{flex:1;gap:8px;min-width:0;display:grid}.vj__progress strong{font-size:.84rem;font-weight:500}.vj__progress progress{width:100%;height:4px;accent-color:var(--accent)}.vj__spinner{border:2px solid var(--border);border-top-color:var(--text);border-radius:50%;flex-shrink:0;width:22px;height:22px;animation:.9s linear infinite vj-spin}@keyframes vj-spin{to{transform:rotate(360deg)}}.vj__message{padding:14px var(--studio-pad);border-bottom:1px solid var(--border);background:var(--surface-inset);overflow-wrap:anywhere;margin:0;font-size:.83rem;line-height:1.55}.vj__message[data-kind=error]{color:var(--danger);background:var(--danger-soft)}.vj__message[data-kind=success]{color:var(--success);background:var(--success-soft)}.vj__work{background:var(--surface);flex-direction:column;min-width:0;display:flex}.vj__stage-head{padding:17px var(--studio-pad) 13px;justify-content:space-between;align-items:center;gap:10px;display:flex}.vj__preview-label{font:400 .68rem/1.4 var(--font-mono);color:var(--text-muted)}.vj__stage{background:repeating-linear-gradient(0deg, transparent, transparent 23px, var(--border) 24px), repeating-linear-gradient(90deg, var(--surface-inset), var(--surface-inset) 23px, var(--border) 24px);justify-content:center;align-items:center;min-height:310px;padding:20px;display:flex;position:relative;overflow:hidden}.vj__surface{aspect-ratio:16/9;width:min(100%,560px);box-shadow:var(--shadow-lg);background:var(--surface-inset);border-radius:4px;flex-shrink:0;position:relative;overflow:hidden}.vj__surface canvas{width:100%;height:100%;display:block}.vj__decoder{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.vj__loading{border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--text-muted);box-shadow:var(--shadow-sm);padding:6px 10px;font-size:.72rem;position:absolute;bottom:12px}.vj__transport{padding:13px var(--studio-pad);border-bottom:1px solid var(--border);align-items:center;gap:12px;display:flex}.vj__transport .range{flex:1;min-width:32px}.vj__play{border:1px solid var(--border-input);background:var(--surface);width:34px;height:34px;color:var(--text);cursor:pointer;border-radius:50%;flex:0 0 34px;place-items:center;padding:0;transition:background .15s,transform .15s;display:grid}.vj__play:hover{background:var(--surface-inset);transform:scale(1.05)}.vj__clock{white-space:nowrap;font:400 .68rem/1 var(--font-mono);color:var(--text-muted)}.vj__clock>span:first-child{color:var(--text)}.vj__sound{font:500 .71rem/1 var(--font);color:var(--text-muted);white-space:nowrap;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:8px 0 8px 4px;display:flex}.vj__sound[aria-pressed=true]{color:var(--text)}.vj__story{padding:22px var(--studio-pad) 18px}.vj__story-head{justify-content:space-between;align-items:baseline;gap:10px;display:flex}.vj__story-head h3{font:700 .94rem/1.3 var(--font-display);letter-spacing:-.02em;margin:0}.vj__story-head>span{color:var(--text-muted);font:400 .69rem/1.4 var(--font-mono)}.vj__story-help{color:var(--text-muted);margin:5px 0 16px;font-size:.77rem;line-height:1.5}.vj__clips{scrollbar-width:thin;scrollbar-color:var(--border-input) transparent;overscroll-behavior-inline:contain;align-items:flex-start;gap:12px;min-height:178px;margin:-5px -3px 0;padding:5px 3px 14px;display:flex;overflow-x:auto}.vj__clip-wrap.filechip{background:var(--surface);border-radius:8px;flex:0 0 167px;width:167px;min-width:0;transition:box-shadow .15s,opacity .15s;display:block;position:relative}.vj__clip{border:1px solid var(--border-input);background:var(--surface);width:100%;color:var(--text);text-align:left;cursor:pointer;touch-action:pan-y;user-select:none;border-radius:8px;padding:5px 5px 35px;display:block}.vj__clip-wrap[data-selected=true] .vj__clip{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--accent-soft)}.vj__clip-wrap[data-dragging=true]{z-index:3;pointer-events:none;opacity:.75;box-shadow:var(--shadow-lg);transition:none}.vj__clip-wrap[data-drop-target=true]{box-shadow:-4px 0 0 var(--text)}.vj__thumb{aspect-ratio:16/10;background:var(--surface-inset);border-radius:4px;display:block;position:relative;overflow:hidden}.vj__thumb img{object-fit:cover;pointer-events:none;width:100%;height:100%;display:block}.vj__order{background:var(--surface);color:var(--text);border:1px solid var(--border);font:500 .6rem/1 var(--font-mono);border-radius:3px;padding:3px 4px;position:absolute;top:5px;left:5px}.vj__clip-time{background:var(--surface);color:var(--text);font:400 .58rem/1 var(--font-mono);border-radius:3px;padding:4px;position:absolute;bottom:5px;right:5px}.vj__clip-name{font:500 .73rem/1.3 var(--font);white-space:nowrap;text-overflow:ellipsis;margin:8px 4px 4px;display:block;overflow:hidden}.vj__clip-audio{color:var(--text-muted);font:400 .63rem/1.4 var(--font-mono);margin-inline:4px;display:block}.vj__moves{gap:6px;display:flex;position:absolute;bottom:4px;left:7px}.vj__moves button{border:1px solid var(--border-input);background:var(--surface);width:33px;height:31px;color:var(--text);cursor:pointer;border-radius:4px;place-items:center;padding:0;line-height:1;display:grid}.vj__moves button:disabled{opacity:.3;cursor:default}.vj__clip-wrap .filechip__x{border:1px solid var(--border-input);background:var(--surface);border-radius:4px;width:31px;height:31px;position:absolute;top:auto;bottom:4px;right:7px}.vj__sequence-line{gap:3px;height:5px;margin-top:4px;display:flex}.vj__sequence-line>span{background:var(--border-input);border-radius:3px;min-width:2px}.vj__sequence-line>span[data-selected=true]{background:var(--text)}.vj__preview-note{color:var(--text-muted);margin:12px 0 0;font-size:.72rem;line-height:1.6}.vj__result{padding:20px var(--studio-pad);border-bottom:1px solid var(--border);background:linear-gradient(135deg, var(--surface), var(--accent-soft))}.vj__result-line{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin:9px 0 8px;display:flex}.vj__result-line>strong{font:500 2.05rem/1 var(--font-mono);letter-spacing:-.065em}.vj__result-line .studio-pill{padding:.4rem .48rem;font-size:.57rem}.vj__output{color:var(--text-muted);font:400 .67rem/1.6 var(--font-mono);display:block}.vj__rail .studio-section__head{gap:9px}.vj__rail .studio-section__head>div{min-width:0}.vj__rail .studio-section__note{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.vj__clip-number{color:var(--text-muted);font:400 .7rem/1.5 var(--font-mono);margin-left:auto}.vj__trim{grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr);align-items:end;gap:8px;display:grid}.vj__trim label{color:var(--text);font-size:.75rem;font-weight:500;display:block}.vj__trim label>span{float:right;color:var(--text-muted);font-size:.65rem;font-weight:400}.vj__trim input{width:100%;min-width:0;height:38px;font:400 .79rem/1 var(--font-mono);margin-top:6px;padding-inline:9px}.vj__trim-arrow{color:var(--text-muted);padding-bottom:11px;font-size:.85rem}.vj__trim-sliders{grid-template-columns:63px minmax(0,1fr);align-items:center;gap:9px;margin-top:13px;display:grid}.vj__trim-sliders label{color:var(--text-muted);font-size:.67rem}.vj__trim-sliders .range{width:100%;min-width:0}.vj__trim-bottom{justify-content:space-between;align-items:center;gap:8px;margin-top:9px;display:flex}.vj__trim-bottom>span{color:var(--text-muted);font:400 .59rem/1.5 var(--font-mono)}.vj__text-button{color:var(--text);font:500 .69rem/1.5 var(--font);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:5px 0 5px 6px;text-decoration:underline}.vj__check{cursor:pointer;align-items:center;gap:8px;margin-top:14px;font-size:.77rem;display:flex}.vj__check input{accent-color:var(--accent);width:14px;height:14px;margin:0}.vj__small{color:var(--text-muted);margin:7px 0 0;font-size:.7rem;line-height:1.6}.vj__shapes{border:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:0;padding:0;display:grid}.vj__shapes label{border:1px solid var(--border-input);background:var(--surface);cursor:pointer;border-radius:6px;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:9px 0 7px;display:flex;position:relative}.vj__shapes label:has(:checked){border-color:var(--text);background:var(--accent-soft);box-shadow:0 0 0 1px var(--text)}.vj__shapes input,.vj__fits input{opacity:0;width:1px;height:1px;position:absolute}.vj__shape-art{width:28px;height:20px;display:block;position:relative}.vj__shape-art:before{content:"";border:1.4px solid var(--text-muted);border-radius:2px;position:absolute;inset:3px 0}.vj__shape-art[data-shape=original]:before{border-style:dashed;inset:4px 3px}.vj__shape-art[data-shape=vertical]:before{inset:0 8px}.vj__shape-art[data-shape=square]:before{inset:0 4px}.vj__shape-art[data-shape=portrait]:before{inset:0 6px}.vj__shapes strong{font:600 .65rem/1.3 var(--font);white-space:nowrap}.vj__shapes label>span:last-child{color:var(--text-muted);white-space:nowrap;font-size:.51rem}.vj__fits{border:0;margin:17px 0 0;padding:0}.vj__fits legend{color:var(--text-muted);margin-bottom:8px;font-size:.71rem}.vj__fits>div{border:1px solid var(--border-input);background:var(--surface);border-radius:6px;grid-template-columns:1.2fr 1fr .9fr;display:grid}.vj__fits label{text-align:center;cursor:pointer;position:relative}.vj__fits label+label{border-left:1px solid var(--border-input)}.vj__fits label>span{color:var(--text-muted);white-space:nowrap;padding:9px 3px;font-size:.66rem;display:block}.vj__fits label:has(:checked){background:var(--accent-soft);border-radius:4px}.vj__fits label:has(:checked)>span{color:var(--text);font-weight:600}.vj__framing-note{color:var(--text-muted);margin:9px 0 0;font-size:.7rem;line-height:1.6}.vj__position{grid-template-columns:97px minmax(0,1fr);align-items:center;gap:12px 8px;margin-top:14px;display:grid}.vj__position label{color:var(--text-muted);font-size:.66rem}.vj__position .range{min-width:0}.vj__export-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.vj__export-grid label{min-width:0;color:var(--text-muted);gap:6px;font-size:.7rem;display:grid}.vj__export-grid .input{padding-block:6px;width:100%;min-width:0;height:37px;padding-left:10px;font-size:.73rem}.vj__host{height:100%;min-height:0;container:joinhost/inline-size}.vj__host>.vj{height:100%;overflow:auto}.vj__host>.vj:focus-within{box-shadow:none}@container joinhost (width>=821px){.vj__host>.vj{flex-direction:column;display:flex;overflow:hidden}.vj__host .studio-mast:has([data-vj=sample][hidden]){display:none}.vj__host .vj__editor{flex:1;min-height:0;overflow:hidden}.vj__host .vj__work{min-height:0;overflow:auto}.vj__host .vj__stage{flex:1;min-height:140px}.vj__host .vj__rail{scrollbar-width:thin;min-height:0;overflow-y:auto}.vj__host .vj__stage-head,.vj__host .vj__transport{padding-block:10px}.vj__host .vj__story{flex-shrink:0;padding-block:12px 10px}.vj__host .vj__story-help{margin-block:4px 9px}.vj__host .vj__clips{min-height:0}.vj__host .vj__clip-wrap.filechip{flex-basis:145px;width:145px}.vj__host .vj__thumb{aspect-ratio:16/8}.vj__host .vj__preview-note{display:none}}@container studio (width<=820px){.vj__rail{grid-template-columns:1fr 1fr;display:grid}.vj__result{grid-column:1/-1;padding-block:17px}.vj__result-line{justify-content:flex-start;gap:18px}.vj__clip-settings{border-right:1px solid var(--border)}.vj__rail>.studio-section:last-child{grid-column:1/-1}.vj__rail>.studio-section:last-child .vj__export-grid{grid-template-columns:repeat(4,1fr)}.vj__story{padding-top:18px}}@container studio (width<=620px){.vj__drop{min-height:340px;margin:10px}.vj__stage{min-height:230px;padding:16px 18px}.vj__stage-head{padding-block:12px}.vj__transport{gap:9px;padding-block:10px}.vj__clock{font-size:.59rem}.vj__sound{padding-left:0}.vj__sound>span{display:none}.vj__rail{display:flex}.vj__clip-settings{border-right:0}.vj__rail>.studio-section:last-child .vj__export-grid{grid-template-columns:1fr 1fr}.vj__result-line>strong{font-size:1.9rem}.vj__shapes{gap:7px}.vj__shapes label{padding-block:11px 9px}.vj__shapes strong{font-size:.65rem}.vj__shapes label>span:last-child{font-size:.57rem}.vj__clip-wrap.filechip{flex-basis:149px;width:149px}}@media (prefers-reduced-motion:reduce){.vj__spinner{animation:none}.vj *{transition:none}}.tm-videojoin__one,.tm-videojoin__two,.tm-videojoin__three,.tm-videojoin__cursor,.tm-videojoin__playhead,.tm-videojoin__check{animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:backwards}.tm-videojoin__one{animation-name:vj-shot-one}.tm-videojoin__two{animation-name:vj-shot-two}.tm-videojoin__three{animation-name:vj-shot-three}.tm-videojoin__cursor{opacity:0;animation-name:vj-cursor}.tm-videojoin__playhead{animation-name:vj-playhead;transform:translate(167px)}.tm-videojoin__check{animation-name:vj-check}@keyframes vj-shot-one{0%,12%{opacity:0;transform:translateY(-17px)}20%,to{opacity:1;transform:none}}@keyframes vj-shot-two{0%,20%{opacity:0;transform:translateY(-17px)}28%,to{opacity:1;transform:none}}@keyframes vj-shot-three{0%,28%{opacity:0;transform:translateY(-17px)}36%,to{opacity:1;transform:none}}@keyframes vj-cursor{0%,35%,73%,to{opacity:0;transform:none}40%,48%{opacity:1;transform:translate(-26px)}60%,68%{opacity:1;transform:translate(20px)}}@keyframes vj-playhead{0%,52%{transform:none}83%,to{transform:translate(167px)}}@keyframes vj-check{0%,82%{opacity:0;transform:translateY(4px)}90%,to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.tm-videojoin *{animation:none!important}}
