.fitted-preview-viewport{flex:1;width:100%;min-width:0;height:100%;min-height:0;position:relative;overflow:hidden}.fitted-preview-viewport>.artifact-preview{position:absolute;inset:0;overflow:hidden}.fitted-preview-viewport iframe{transform:scale(var(--preview-scale,1));transform-origin:0 0;border:0;display:block;position:absolute;inset:0;width:calc(100% / var(--preview-scale,1))!important;height:calc(100% / var(--preview-scale,1))!important;min-height:0!important}.fitted-preview-viewport:is([data-canvas],[data-viewport]) iframe{inset:auto;left:var(--preview-canvas-left);top:var(--preview-canvas-top);width:var(--preview-canvas-width)!important;height:var(--preview-canvas-height)!important}
.output-frame{box-sizing:border-box;flex-direction:column;width:100%;height:100%;min-height:330px;display:flex;position:relative}.output-frame iframe{background:var(--paper,#fcfaf5);border:0;flex:1;width:100%;min-height:0}.output-frame-wait{flex:1;min-height:330px}.output-frame .output-frame-wait{flex-direction:column;padding:0;display:flex}.output-frame .output-frame-wait :is(.evals-skeleton__items,.evals-skeleton__item){flex:1;min-height:0}.output-frame .output-frame-wait .evals-skeleton__visual{border-radius:0;width:100%;height:100%}.output-frame-navigation{z-index:1;background:var(--paper,#fcfaf5);flex-direction:column;display:flex;position:absolute;inset:0;overflow:auto}.output-frame-navigation .output-frame-wait{min-height:0}.output-frame-navigation-slow{color:var(--muted,#85796d);padding:12px 12px 60px;font-size:12px}.output-frame-still-note{border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);max-width:calc(100% - 150px);color:var(--ink,#40352c);border-radius:6px;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;padding:6px 8px 6px 10px;font-size:12px;line-height:1.4;display:flex;position:absolute;bottom:10px;left:10px}.output-frame-still-note button{border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);min-height:28px;color:var(--ink,#40352c);font:inherit;cursor:pointer;border-radius:6px;align-items:center;padding:4px 10px;font-size:12px;display:inline-flex}.output-frame-navigation-slow p{margin:0 0 10px}.output-frame-navigation-slow>div{min-height:200px}.output-frame-toggle{border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);min-height:28px;color:var(--ink,#40352c);opacity:.85;border-radius:6px;padding:4px 10px;font-size:11px;position:absolute;bottom:10px;right:10px}.output-frame-toggle:hover,.output-frame-toggle:focus-visible{opacity:1}.output-frame-actions{z-index:2;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px;max-width:calc(100% - 20px);display:flex;position:absolute;bottom:10px;right:10px}.output-frame-actions :is(button,a),.output-frame-recovery button{border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);min-height:28px;color:var(--ink,#40352c);font:inherit;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:4px 10px;font-size:11px;text-decoration:none;display:inline-flex;position:static}.output-frame-actions .output-frame-toggle{position:static}.output-frame-recovery{border-bottom:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);color:var(--muted,#85796d);flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 10px;font-size:11px;display:flex}.output-frame-recovery b{width:100%;color:var(--ink,#40352c);font-size:12px;font-weight:500}.output-frame-recovery>span{flex:220px;min-width:0}.output-frame-recovery a{border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);min-height:28px;color:var(--ink,#40352c);border-radius:6px;align-items:center;padding:4px 10px;font-size:11px;text-decoration:none;display:inline-flex}.output-frame-recovery details{overflow-wrap:anywhere;width:100%;font-size:10px}.output-frame-recovery summary{cursor:pointer}.output-frame-navigation-actions{flex-wrap:wrap;gap:6px;margin:0 0 10px;display:flex}.output-frame-navigation-actions :is(button,a){border:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);min-height:28px;color:var(--ink,#40352c);font:inherit;cursor:pointer;border-radius:6px;align-items:center;padding:4px 10px;font-size:11px;text-decoration:none;display:inline-flex}.output-frame-saved{flex:1;min-height:0;overflow:auto}.output-frame-fallback{min-height:330px;height:auto!important}.output-frame-fallback .artifact-preview{height:100%}.ec-output-grid .st-output-content .output-frame{height:clamp(330px,62vh,630px)}.ec-inline-options .st-output-content .output-frame{height:clamp(230px,34vh,300px);min-height:230px}.av-viewer .output-frame{height:100%;min-height:420px}.published-output-frame{width:100%;height:clamp(360px,64vh,680px)}@media (max-width:850px){.ec-workspace-open .ec-canvas-scroll:has(.ec-output-grid.ec-focused){padding:8px}.ec-workspace-open .ec-output-grid.ec-focused .st-output-content .output-frame{height:calc(100dvh - 142px);min-height:330px}}@media (max-width:800px){.ec-workspace-open .ec-output-grid.ec-focused .st-output-content .output-frame{height:calc(100dvh - 207px)}}.output-frame.media-live-frame{height:100%;min-height:0}.output-frame.media-live-frame.output-frame-fallback{height:100%!important}.media-live-frame :is(.output-frame-wait,.output-frame-saved){min-height:0}.media-live-frame iframe{pointer-events:none}@media (max-width:800px){.output-viewer .output-frame,.output-viewer .output-frame-wait{min-height:0}}.output-frame-actions.output-frame-actions-primary{gap:6px}.output-frame-actions :is(.output-frame-primary,.output-frame-more){border:1px solid var(--line);background:var(--paper);width:32px;height:32px;min-height:32px;color:var(--ink);place-items:center;padding:0;display:inline-grid}.output-frame-actions :is(.output-frame-primary,.output-frame-more):hover{background:var(--wash)}.output-frame-menu.st-popover.st-context-menu{width:190px}.output-frame-menu .st-menu-item{width:100%;color:var(--ink,#40352c);justify-content:flex-start;text-decoration:none}@media (max-width:800px){.output-frame-actions.output-frame-actions-primary{border-top:1px solid var(--line,#ddd5c9);background:var(--paper,#fcfaf5);flex:none;max-width:none;padding:6px 8px;position:relative;bottom:auto;right:auto}.output-frame-actions :is(.output-frame-primary,.output-frame-more){width:44px;height:44px;min-height:44px}}@media (pointer:coarse){.output-frame-actions-primary :is(.output-frame-primary,.output-frame-more){width:44px;height:44px}}