.video-frame-detail{height:100%;min-height:0;display:flex;flex-direction:column}
.video-frame-detail>.editor-header{flex:none}
.video-frame-detail-body{display:flex;min-height:0;flex:1;flex-direction:column;padding:12px}
.video-frame-detail-meta{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 10px;color:var(--theme-muted);font-size:12px}
.video-frame-detail-meta span{padding:4px 8px;border:1px solid var(--theme-line);border-radius:12px;background:var(--theme-surface)}
.video-frame-preview-area{display:grid;min-height:0;flex:1;place-items:center;overflow:hidden;border:1px solid var(--theme-line);border-radius:9px;background:var(--theme-canvas)}
.video-frame-preview-box{position:relative;overflow:hidden;background-color:#d8dce1;background-image:linear-gradient(45deg,#c4c9d0 25%,transparent 25%),linear-gradient(-45deg,#c4c9d0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c4c9d0 75%),linear-gradient(-45deg,transparent 75%,#c4c9d0 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;box-shadow:0 12px 38px rgba(0,0,0,.4)}
.video-frame-preview-canvas{position:absolute;left:0;top:0;width:var(--frame-width);height:var(--frame-height);overflow:hidden;transform-origin:0 0;background:var(--frame-background)}
.video-frame-preview-element{position:absolute;pointer-events:none}
.video-frame-preview-element iframe{display:block;width:100%;height:100%;border:0;background:transparent;pointer-events:none}
.video-frame-preview-element.has-frame-action{pointer-events:auto;cursor:pointer}
.video-frame-preview-element.has-frame-action:hover,.video-frame-preview-element.has-frame-action:focus-visible{outline:2px solid color-mix(in srgb,var(--theme-accent) 72%,transparent);outline-offset:2px}
.video-frame-runtime-popup .video-frame-preview-element.service-control{pointer-events:auto}
.video-frame-runtime-popup{position:fixed;display:flex;min-width:100px;min-height:100px;box-sizing:border-box;flex-direction:column;overflow:hidden;border:1px solid var(--theme-line-strong);border-radius:8px;color:var(--theme-text);background:var(--popup-background,var(--theme-bg));box-shadow:0 18px 60px rgba(0,0,0,.48)}
.video-frame-runtime-popup>header{position:relative;z-index:2;display:flex;min-height:38px;box-sizing:border-box;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px 7px 12px;border-bottom:1px solid var(--theme-line);background:var(--theme-surface-2)}
.video-frame-runtime-popup.movable>header{cursor:move;user-select:none;touch-action:none}
.video-frame-runtime-popup.movable.no-title>header::before{content:'⠿';display:grid;width:24px;height:28px;place-items:center;color:var(--theme-muted);font-size:18px}
.video-frame-runtime-popup>header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-frame-runtime-popup>header button{display:grid;width:28px;height:28px;flex:none;place-items:center;padding:0;border:1px solid var(--theme-line);border-radius:5px;color:var(--theme-text);background:var(--theme-input);font-size:20px;line-height:1;cursor:pointer}
.video-frame-runtime-popup>header button:hover,.video-frame-runtime-popup>header button:focus-visible{border-color:var(--theme-accent);color:var(--theme-accent);outline:none}
.video-frame-runtime-popup.no-title>header{position:absolute;top:6px;right:6px;min-height:0;padding:0;border:0;background:transparent}
.video-frame-runtime-popup-body{display:grid;min-width:0;min-height:0;flex:none;place-items:center;overflow:hidden;background:var(--popup-background,var(--theme-bg))}
.video-frame-runtime-popup-box{position:relative;overflow:hidden;background:var(--popup-background,var(--theme-bg))}
.video-symbol-preview>div[hidden],.video-symbol-preview iframe[hidden]{display:none}
.runtime-video-frame-detail:fullscreen{width:100vw;height:100vh;background:var(--theme-bg)}
.runtime-video-frame-detail:fullscreen .video-frame-detail-body{padding:0}
.runtime-video-frame-detail:fullscreen .video-frame-detail-meta{display:none}
.runtime-video-frame-detail:fullscreen .video-frame-preview-area{border:0;border-radius:0;background:var(--theme-bg)}
.runtime-video-frame-detail:fullscreen .video-frame-preview-box{background:transparent;box-shadow:none}
.video-frame-fullscreen-exit{display:none}
.runtime-video-frame-detail:fullscreen>.video-frame-fullscreen-exit{position:fixed;z-index:5100;top:12px;right:12px;display:block;padding:8px 12px;border:1px solid var(--theme-line-strong);border-radius:6px;color:var(--theme-text);background:color-mix(in srgb,var(--theme-surface) 82%,transparent);cursor:pointer;opacity:.6;transition:opacity .2s ease,background-color .2s ease}
.runtime-video-frame-detail:fullscreen>.video-frame-fullscreen-exit:hover,.runtime-video-frame-detail:fullscreen>.video-frame-fullscreen-exit:focus-visible{background:var(--theme-surface-2);opacity:1;outline:none}
.video-frame-standalone-preview{height:100dvh;display:flex;flex-direction:column;padding:0;box-sizing:border-box;overflow:hidden;background:#fff}
.video-frame-standalone-preview>.video-frame-detail{flex:1;min-height:0}
.video-frame-standalone-preview .video-frame-detail-body{padding:0}
.video-frame-standalone-preview .video-frame-preview-area{border:0;border-radius:0;background:#fff}
.video-frame-standalone-preview .video-frame-preview-box{background:#fff;box-shadow:none}
.video-preview-topbar{display:flex;flex:none;height:30px;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;border-bottom:1px solid var(--theme-line);background:var(--theme-surface);color:var(--theme-muted);font-size:12px}
.video-preview-topbar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.video-preview-topbar>button{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:3px;background:transparent;color:var(--theme-text);font-size:20px;cursor:pointer}
.video-preview-topbar>button:hover{background:var(--theme-accent-soft)}
.video-frame-standalone-preview .video-frame-detail:fullscreen{width:100vw;height:100vh;background:#fff}
.video-frame-standalone-preview .video-frame-detail:fullscreen>.video-preview-topbar{display:none}