.viewport-container{position:relative}.viewport-wrapper{justify-content:center;align-items:start;width:100%;display:flex}.app-frame{aspect-ratio:var(--asp-w)/var(--asp-h);width:min(calc(var(--zoom)*1dvw),calc(calc(var(--zoom)*1dvh)*(var(--asp-w)/var(--asp-h))));height:min(calc(var(--zoom)*1dvh),calc(calc(var(--zoom)*1dvw)*(var(--asp-h)/var(--asp-w))));max-width:min(var(--max-w,calc(var(--zoom)*1dvw))*1px,calc(var(--zoom)*1dvw));max-height:min(var(--max-h,calc(var(--zoom)*1dvh))*1px,calc(var(--zoom)*1dvh));border:0;border-radius:.3rem;transition:all .3s}.toolbar{border:1px solid hsl(var(--border)/.6);background:hsl(var(--background)/.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:2.5rem;box-shadow:0 4px 24px -4px #0000001a,0 2px 8px -2px #0000000d,0 0 0 1px hsl(var(--border)/.05);border-radius:.75rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;margin-bottom:1rem;padding:0 .75rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:grid;position:relative}.toolbar:before{content:"";border-radius:inherit;background:linear-gradient(to bottom,hsl(var(--background)/.1)0%,transparent 50%,hsl(var(--foreground)/.03)100%);pointer-events:none;position:absolute;inset:0}.toolbar:hover{border-color:hsl(var(--border)/.8);box-shadow:0 8px 32px -4px #00000026,0 4px 16px -2px #00000014,0 0 0 1px hsl(var(--border)/.1)}@media (max-width:640px){.toolbar{gap:.5rem;height:2.25rem;margin-bottom:.75rem;padding:0 .5rem}}.viewport-container:fullscreen{background:#000;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.viewport-container:fullscreen .viewport-wrapper{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.viewport-container:fullscreen .app-frame{width:min(100vw,calc(100vh*(var(--asp-w)/var(--asp-h))));height:min(100vh,calc(100vw*(var(--asp-h)/var(--asp-w))));border-radius:0;max-width:none;max-height:none}.viewport-container:fullscreen .toolbar{display:none}