/* Video Generator only (workspace styles live in assets/workspace.css) */

/* ---- control panel ---- */
.vg-mode{display:flex}
.vg-mode button{flex:1}
.vg-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--expo)}
.vg-fold > div{overflow:hidden;min-height:0}
.vg-fold.shut{grid-template-rows:0fr}
.vg-fold.shut .ctrl-sec{border-bottom-color:transparent}
.vg-drop{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px dashed var(--border-2);border-radius:10px;background:var(--surface-2);text-align:left;transition:border-color .2s,background .2s}
.vg-drop:hover{border-color:var(--ink);background:var(--surface)}
.vg-drop .ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--ink-2)}
.vg-drop b{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--ink)}
.vg-drop small{display:block;font-size:12px;line-height:16px;color:var(--muted)}
.vg-chosen{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:12px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.vg-chosen .th{width:72px;height:52px;border-radius:8px;overflow:hidden;background:#e9e5de}
.vg-chosen .th img{width:100%;height:100%;object-fit:cover}
.vg-chosen b{display:block;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-chosen small{display:block;font:400 12px/16px var(--mono);color:var(--muted)}
.vg-chosen .acts{display:flex;gap:2px;padding-right:2px}
.vg-mini{height:28px;padding:0 8px;border-radius:6px;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);transition:background .2s,color .2s}
.vg-mini:hover{background:var(--surface-2);color:var(--ink)}
.vg-mini.icon{width:28px;padding:0;display:grid;place-items:center;color:var(--muted)}
.vg-samples{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.vg-samples button{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--border);transition:box-shadow .25s,transform .4s var(--expo)}
.vg-samples button:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ink-2)}
.vg-samples button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.vg-samples img{width:100%;height:100%;object-fit:cover}
.vg-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vg-ideas button{font-size:12px;line-height:16px;color:var(--ink-2);padding:4px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--border);transition:border-color .2s,color .2s}
.vg-ideas button:hover{border-color:var(--border-2);color:var(--ink)}
.vg-ideas button span{color:var(--muted);margin-right:4px}
.vg-row2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vg-row2 .lbl2{font-size:12px;line-height:16px;font-weight:500;color:var(--muted)}
.vg-row2 .seg button{height:26px;padding:0 12px;font-size:12px;line-height:16px}
.vg-ar{grid-template-columns:repeat(3,1fr);margin-top:12px}
.vg-ar .tile-btn{grid-template-columns:auto auto;align-items:center;justify-content:center;gap:8px;padding:9px 0}
.vg-scale{display:flex;justify-content:space-between;font-size:12px;line-height:16px;color:var(--muted);margin-top:2px}
.vg-flash{animation:vgFlash 1.2s var(--expo)}
@keyframes vgFlash{0%{background:var(--coral-light)}100%{background:transparent}}

/* camera glyphs: 16px, preview the move on hover */
.gl{position:relative;flex:none;width:16px;height:16px;border:1.5px solid currentColor;border-radius:4px;overflow:hidden;color:var(--muted);transition:color .2s}
.pick:hover .gl,.pick[aria-pressed="true"] .gl{color:var(--ink)}
.gl i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:1.5px;background:currentColor}
.gl-orbit i{border-radius:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px}
.gl-static i{width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%}
.gl-static::before,.gl-static::after{content:"";position:absolute;background:currentColor;opacity:.45}
.gl-static::before{left:50%;top:1px;bottom:1px;width:1px;margin-left:-.5px}
.gl-static::after{top:50%;left:1px;right:1px;height:1px;margin-top:-.5px}
@media (hover:hover){.pick:hover .gl i,.pick:focus-visible .gl i{animation:var(--ga) 1.5s var(--expo) infinite}}
.gl-push{--ga:glPush}.gl-pull{--ga:glPull}.gl-panl{--ga:glPanL}.gl-panr{--ga:glPanR}.gl-tilt{--ga:glTilt}.gl-orbit{--ga:glOrbit}
.pick:hover .gl-orbit i{animation-timing-function:linear!important}
@keyframes glPush{0%{transform:scale(.6)}65%,100%{transform:scale(2.1)}}
@keyframes glPull{0%{transform:scale(2.1)}65%,100%{transform:scale(.6)}}
@keyframes glPanL{0%{transform:translateX(-5px)}65%,100%{transform:translateX(5px)}}
@keyframes glPanR{0%{transform:translateX(5px)}65%,100%{transform:translateX(-5px)}}
@keyframes glTilt{0%{transform:translateY(-5px)}65%,100%{transform:translateY(5px)}}
@keyframes glOrbit{0%{transform:translate(-4px,0) scale(.85)}25%{transform:translate(0,1.5px) scale(1.15)}50%{transform:translate(4px,0) scale(.85)}75%{transform:translate(0,-1.5px) scale(.6)}100%{transform:translate(-4px,0) scale(.85)}}

/* footer: model + character selects, cost */
.vg-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vg-sel{display:flex;align-items:center;gap:6px;width:100%;height:36px;padding:0 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;line-height:20px;color:var(--ink);text-align:left;transition:border-color .2s,background .2s}
.vg-sel:hover,.vg-sel[aria-expanded="true"]{border-color:var(--border-2);background:var(--surface-2)}
.vg-sel .k{font-size:12px;line-height:16px;color:var(--muted)}
.vg-sel .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .14s}
.vg-sel svg{flex:none;color:var(--muted)}
.ctrl-f .pop.up{left:0;translate:none;transform-origin:0 100%;min-width:240px}
.ctrl-f .pop-anchor + .pop-anchor .pop.up{left:auto;right:0;transform-origin:100% 100%}
.ctrl-f .btn .kbd{background:transparent;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}
.ctrl-f .btn .spinner{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.vg-need{font-size:12px;line-height:16px;color:var(--ink-2);background:var(--coral-light);border:1px solid var(--coral-muted);border-radius:8px;padding:8px 10px}
.vg-need a{font-weight:600;color:var(--ink)}
.vg-hint{font-size:12px;line-height:16px;color:var(--muted);text-align:center}
.usage.low b{color:var(--coral-hover)}

/* ---- stage: view + filmstrip + prompt ---- */
.vg-stage{display:flex;flex-direction:column}
.vg-view{position:relative;flex:1;min-height:0;overflow:hidden}
.vg-view .tools{left:auto;right:12px;top:10px;bottom:auto;translate:none;transition:opacity .3s var(--expo)}
.vg-view .tools.off{opacity:0;pointer-events:none}
.tbtn[aria-pressed="true"]{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border)}
.tbtn[aria-pressed="true"] svg{color:var(--ink)}
.tbtn[disabled]{opacity:.4;pointer-events:none}
.tbtn .pct{font:400 12px/16px var(--mono);color:var(--muted)}
.vg-meta{position:absolute;left:16px;top:20px;z-index:6;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--ink-2);white-space:nowrap}
.vg-meta .mono{color:var(--muted)}
.vg-meta .dot{background:var(--faint)}
.vg-meta.live .dot{background:var(--ok)}
.vg-back{font-size:12px;line-height:16px;font-weight:600;color:var(--ink);padding:2px 8px;border-radius:6px;border:1px solid var(--border-2);background:var(--surface);transition:border-color .2s}
.vg-back:hover{border-color:var(--ink)}

.vg-player{position:absolute;z-index:1;container-type:inline-size;border-radius:10px;background:#1a1917;box-shadow:0 24px 60px -24px rgba(26,25,23,.45),0 0 0 1px rgba(26,25,23,.06);opacity:1;transition:opacity .3s var(--expo)}
.vg-player.hide{opacity:0;transition:none}
.vg-player.swap > canvas{opacity:0}
.vg-player.is-empty{opacity:0;visibility:hidden}
.vg-player > canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block;transition:opacity .25s}
.vg-start{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;opacity:0;transition:opacity .6s var(--expo)}
.is-render > canvas{opacity:0}
.is-render .vg-start.ok{opacity:.42}
.vg-shim{position:absolute;inset:0;border-radius:inherit;opacity:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%) 0 0/200% 100%;animation:sk 1.6s ease-in-out infinite;pointer-events:none}
.is-render .vg-shim.on{opacity:1}
.vg-player .steps-card{left:50%;right:auto;top:50%;bottom:auto;translate:-50% -50%;width:min(264px,calc(100% - 24px))}
.vg-sc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;line-height:16px;font-weight:600;color:var(--ink)}
.vg-sc-h b{font:500 12px/16px var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.vg-note{position:absolute;left:50%;bottom:12px;translate:-50% 0;z-index:3;font-size:12px;line-height:16px;color:#fff;background:rgba(26,25,23,.62);padding:4px 10px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none}
.is-draft .vg-note{opacity:1}
.vg-center{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;font-size:14px;line-height:20px;color:rgba(255,255,255,.75);pointer-events:none;opacity:0;transition:opacity .3s}
.vg-center.on{opacity:1}
.vg-guides{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--expo);
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 33.333% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 66.666% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 33.333%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 0 66.666%/100% 1px no-repeat}
.vg-guides::after{content:"";position:absolute;inset:5%;border:1px dashed rgba(255,255,255,.45);border-radius:2px}
.guides-on .vg-guides{opacity:1}

/* compare */
.vg-cmp{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;display:none}
.cmp-on .vg-cmp{display:block}
.vg-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);pointer-events:none}
.vg-div{position:absolute;top:0;bottom:0;left:var(--x,50%);width:28px;margin-left:-14px;cursor:ew-resize;touch-action:none}
.vg-div::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.3)}
.vg-div i{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3);display:grid;place-items:center;color:var(--ink)}
.vg-tag{position:absolute;top:10px;font-size:12px;line-height:16px;color:#fff;background:rgba(26,25,23,.58);padding:2px 8px;border-radius:6px;pointer-events:none}
.vg-tag.l{left:10px}.vg-tag.r{right:10px}

/* player controls */
.vg-ctrls{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:28px 8px 6px;border-radius:0 0 10px 10px;background:linear-gradient(rgba(16,15,14,0),rgba(16,15,14,.66));color:#fff;opacity:0;visibility:hidden;transition:opacity .4s var(--expo),visibility .4s}
.is-clip .vg-ctrls{opacity:1;visibility:visible}
.is-clip.idle .vg-ctrls{opacity:0;visibility:hidden}
.is-clip.idle{cursor:none}
.is-clip{cursor:pointer}
.vg-player.zoomed{cursor:grab}
.vg-player.zoomed.drag{cursor:grabbing}
.vg-row{display:flex;align-items:center;gap:2px}
.vg-row .grow{flex:1}
.vbtn{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:8px;color:#fff;transition:background .2s,color .2s}
.vbtn:hover,.vbtn[aria-expanded="true"]{background:rgba(255,255,255,.14)}
.vbtn[aria-pressed="false"]{color:rgba(255,255,255,.5)}
.vbtn.spd{font:500 12px/16px var(--mono)}
.vg-play .i-pause,.playing .vg-play .i-play{display:none}
.playing .vg-play .i-pause{display:block}
.vg-time{padding:0 6px;font:400 12px/16px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.vg-time .tot{color:rgba(255,255,255,.6)}
@container (max-width:340px){.vg-time .tot{display:none}.vbtn{min-width:28px;padding:0 4px}}
.vg-scrub{position:relative;height:22px;margin:0 8px;cursor:pointer;touch-action:none;outline-offset:4px}
.vg-scrub .tr{position:absolute;left:0;right:0;top:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);transition:height .2s var(--expo),top .2s var(--expo)}
.vg-scrub:hover .tr,.vg-scrub.drag .tr{height:5px;top:8px}
.vg-scrub .tr i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.vg-scrub .buf{background:rgba(255,255,255,.36)}
.vg-scrub .pl{background:#fff}
.vg-scrub .kn{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);transform:scale(0);transition:transform .25s var(--expo)}
.vg-scrub:hover .kn,.vg-scrub:focus-visible .kn,.vg-scrub.drag .kn{transform:none}
.vg-tip{position:absolute;bottom:calc(100% + 6px);display:grid;justify-items:center;gap:6px;translate:-50% 0;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .3s var(--expo);pointer-events:none}
.vg-scrub:hover .vg-tip,.vg-scrub.drag .vg-tip{opacity:1;transform:none}
.vg-tip canvas{display:block;border-radius:6px;background:#000;box-shadow:0 0 0 1.5px rgba(255,255,255,.92),0 10px 24px rgba(0,0,0,.45)}
.vg-tip span{font:400 12px/16px var(--mono);color:#fff;background:rgba(26,25,23,.86);padding:2px 6px;border-radius:5px;white-space:nowrap}
.vg-ctrls .pop.up{left:auto;right:0;translate:none;min-width:150px;transform-origin:100% 100%}

/* filmstrip */
.vg-strip{position:relative;flex:none;padding:8px 16px 10px;border-top:1px solid var(--border);background:var(--surface);user-select:none;-webkit-user-select:none}
.vg-ruler{position:relative;height:16px;margin-bottom:4px;font:400 12px/16px var(--mono);color:var(--muted)}
.vg-ruler span{position:absolute;top:0;padding-left:4px;border-left:1px solid var(--border-2);height:16px}
.vg-ruler span:last-child{translate:-100% 0;border-left:0;border-right:1px solid var(--border-2);padding:0 4px 0 0}
.vg-ruler .ttl{position:static;border:0;padding:0;color:var(--muted);font-family:var(--font)}
.vg-cells{position:relative;display:flex;gap:1px;height:44px;border-radius:8px;overflow:hidden;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);cursor:pointer;touch-action:none}
.vg-cells canvas{flex:1 1 0;min-width:0;height:100%;display:block;background:#e9e5de;opacity:.35;transition:opacity .45s var(--expo)}
.vg-cells canvas.on{opacity:1;animation:cellIn .6s var(--expo)}
@keyframes cellIn{from{transform:scale(1.08);filter:brightness(1.4)}}
.vg-cells.idle{cursor:default}
.vg-cells .msg{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;line-height:16px;color:var(--muted);background:repeating-linear-gradient(90deg,transparent 0 78px,var(--border) 78px 79px)}
.vg-head{position:absolute;top:26px;bottom:8px;left:16px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px;pointer-events:none;opacity:0;transition:opacity .3s}
.vg-head::before{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.vg-head.on{opacity:1}
.vg-head.rend{background:var(--coral)}
.vg-head.rend::before{background:var(--coral)}

/* prompt + actions */
.vg-under{flex:none;display:grid;grid-template-columns:minmax(0,1fr) 172px;gap:12px;padding:12px 16px 14px;border-top:1px solid var(--border);background:var(--surface)}
.vg-pbox{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.vg-pbox-h{display:flex;align-items:center;gap:12px;padding:0 6px 0 12px;border-bottom:1px solid var(--border)}
.vg-pbox-h .tabs{border-bottom:0;gap:16px;flex:none}
.vg-pbox-h .tab{padding:8px 0}
.vg-pbox-h .meta{flex:1;min-width:0;font-size:12px;line-height:16px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-pbox .prompt-block{padding:10px 12px;height:84px;overflow-y:auto;scrollbar-width:thin}
.vg-pbox .prompt-block.wait{color:var(--faint);font-family:var(--font);font-size:14px;line-height:20px}
.prompt-block .cb{color:var(--coral-hover);background:var(--coral-light);border-radius:3px}
.vg-acts{display:grid;gap:6px;align-content:start}
.vg-acts .btn{justify-content:flex-start;gap:8px;width:100%}
.vg-acts .btn svg{flex:none;color:var(--muted)}
.vg-acts .btn .n{margin-left:auto;font:400 12px/16px var(--mono);color:var(--muted)}
.copy-l{font-size:12px;line-height:16px;font-weight:600;color:var(--ink-2);padding:4px 8px;border-radius:6px;transition:background .2s,color .2s}
.copy-l:hover{background:var(--surface);color:var(--ink)}
.copy-l[disabled]{opacity:.4;pointer-events:none}

/* empty stage */
.vg-empty-in{width:100%;max-width:720px;text-align:left}
.vg-empty-in p{font-size:16px;line-height:24px;color:var(--ink-2);margin-bottom:16px}
.vg-empty-in small{display:block;margin-top:14px;font-size:12px;line-height:16px;color:var(--muted)}
.vg-bigs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vg-bigs button{text-align:left}
.vg-bigs .ph{display:block;aspect-ratio:4/3;border-radius:10px;box-shadow:0 0 0 1px var(--border);transition:transform .5s var(--expo),box-shadow .3s}
.vg-bigs button:hover .ph{transform:translateY(-3px);box-shadow:0 0 0 1px var(--ink-2),0 14px 30px -14px rgba(26,25,23,.45)}
.vg-bigs b{display:block;margin-top:8px;font-size:14px;line-height:20px;font-weight:500}
.vg-bigs span.s{display:block;font-size:12px;line-height:16px;color:var(--muted)}

/* clips rail */
.vg-clip{display:grid;gap:6px;width:100%;padding:6px 6px 8px;border-radius:12px;text-align:left;transition:background .25s,box-shadow .25s}
.vg-clip:hover{background:rgba(255,255,255,.7)}
.vg-clip[aria-current="true"]{background:var(--surface);box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(26,25,23,.04)}
.vg-clip.enter{animation:itemIn .6s var(--expo) both}
.vg-clip .th{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#1a1917}
.vg-clip canvas{display:block;width:100%;height:100%}
.vg-clip .dur{position:absolute;right:6px;bottom:6px;font:500 12px/16px var(--mono);color:#fff;background:rgba(26,25,23,.62);padding:0 5px;border-radius:4px}
.vg-clip .pct{position:absolute;inset:0;display:grid;place-items:center;font:500 12px/16px var(--mono);color:#fff;background:rgba(26,25,23,.45);opacity:0;transition:opacity .3s}
.vg-clip.run .pct{opacity:1}
.vg-clip .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.2);opacity:0}
.vg-clip.run .prog,.vg-clip.hov .prog{opacity:1}
.vg-clip .prog i{display:block;height:100%;width:0;background:#fff}
.vg-clip .nm{padding:0 2px;font-size:14px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vg-clip .sub{display:block;padding:0 2px;margin-top:-6px;font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* fullscreen */
.vg-lb .vg-player{box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.vg-lb .lb-x{z-index:5}
.vg-lb .vg-player img{max-width:none;max-height:none;box-shadow:none;border-radius:inherit}

/* ---- below the workspace ---- */
.vg-moves{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
.mv{margin:0}
.mv-v{position:relative;display:block;aspect-ratio:3/4;border-radius:12px}
.mv-v img{transform:scale(1.25)}
.mv-v::after{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.55);border-radius:6px;pointer-events:none}
.mv.play .mv-v img{animation:var(--a) 4.5s cubic-bezier(.45,0,.55,1) infinite alternate}
.mv figcaption b{display:block;margin-top:12px;font-size:14px;line-height:20px;font-weight:600}
.mv figcaption span{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--muted)}
@keyframes mvStatic{from{transform:scale(1.12)}to{transform:scale(1.12)}}
@keyframes mvPush{from{transform:scale(1.05)}to{transform:scale(1.45)}}
@keyframes mvPull{from{transform:scale(1.45)}to{transform:scale(1.05)}}
@keyframes mvPanL{from{transform:scale(1.3) translateX(-9%)}to{transform:scale(1.3) translateX(9%)}}
@keyframes mvPanR{from{transform:scale(1.3) translateX(9%)}to{transform:scale(1.3) translateX(-9%)}}
@keyframes mvOrbit{from{transform:scale(1.3) translateX(5%) rotate(-4deg)}to{transform:scale(1.3) translateX(-5%) rotate(4deg)}}
@keyframes mvTilt{from{transform:scale(1.3) translateY(-9%)}to{transform:scale(1.3) translateY(9%)}}
.mv-grain{position:absolute;inset:-50%;opacity:.12;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mv.play .mv-grain{animation:grain .5s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.faq2{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px}

@media (max-width:1180px){.vg-under{grid-template-columns:minmax(0,1fr) 148px}.vg-meta .mono{display:none}.vg-view .tbtn .lb{display:none}}
@media (max-width:1024px){.vg-view .tbtn .lb{display:inline}.vg-meta .mono{display:inline}}
@media (max-width:1024px){
  .vg-stage{height:auto!important}
  .vg-view{flex:none;height:360px}
  .vg-moves{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:176px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
  .mv{scroll-snap-align:start}
  .faq2{grid-template-columns:1fr;gap:32px}
  .vg-clip .nm{font-size:12px;line-height:16px}
}
@media (min-width:721px) and (max-width:1024px){
  .ctrl-body{display:grid;grid-template-columns:1fr 1fr;padding:0}
  .ctrl-body > .ctrl-sec:first-child{grid-column:1/-1}
  .ctrl-body > :nth-child(even){border-right:1px solid var(--border)}
  .ctrl-body > *{border-bottom:1px solid var(--border)}
  .ctrl-body .ctrl-sec{border-bottom:0}
  .vg-fold.shut{display:none}
  .vg-fold.shut ~ :nth-child(even){border-right:0}
  .vg-fold.shut ~ :nth-child(odd){border-right:1px solid var(--border)}
  .ctrl-f{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:16px}
  .ctrl-f .vg-opts,.ctrl-f .vg-need{grid-column:1/-1}
  .ctrl-f .cost{grid-column:1;grid-row:2}
  .ctrl-f #gen{grid-column:2;grid-row:2/4}
  .ctrl-f .vg-hint{grid-column:1;grid-row:3;text-align:left}
}
@media (max-width:720px){
  .vg-view .tools{left:50%;right:auto;translate:-50% 0;overflow:visible}
  .vg-meta{display:none}
  .vg-under{grid-template-columns:1fr;padding:12px}
  .vg-acts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vg-acts .btn{justify-content:center;padding:0 8px}
  .vg-acts .btn .n,.vg-acts .btn svg{display:none}
  .vg-strip{padding:8px 12px 10px}
  .vg-bigs{grid-template-columns:repeat(2,1fr);gap:10px}
  .vg-bigs span.s{display:none}
  .vg-empty-in p{font-size:14px;line-height:20px}
  .vbtn{min-width:36px;height:36px}
  .ctrl-f .pop.up,.vg-ctrls .pop.up{position:absolute;bottom:calc(100% + 10px);left:0;right:auto}
  .ctrl-f .pop-anchor + .pop-anchor .pop.up,.vg-ctrls .pop.up{left:auto;right:0}
}
@media (pointer:coarse){.vg-scrub .kn{transform:none}}

/* WordPress additions: real <video> in place of the prototype canvas */
.vg-player > video{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;display:block;object-fit:contain;background:#1a1917}
.vg-player:not(.is-render) .vg-start.ok{opacity:0}
.vg-player.is-render > video{opacity:0}
.vc-i{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:8px;border-radius:10px;text-align:left;transition:background .2s}
.vc-i:hover,.vc-i[aria-current="true"]{background:var(--surface)}
.vc-i[aria-current="true"]{box-shadow:0 0 0 1px var(--border)}
.vc-i .th{position:relative;display:block;border-radius:8px;overflow:hidden;background:#2a2723}
.vc-i .th img,.vc-i .th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc-i .m b{display:block;font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-i .m small{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;line-height:16px;color:var(--muted)}
.vg-acts .is-disabled{opacity:.45;pointer-events:none}
.short a{font-weight:600}