.viewport-container{position:relative}.viewport-wrapper{width:100%;display:flex;justify-content:center;align-items:start}.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 ease}.toolbar{height:2.5rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75rem;padding:0 .75rem;margin-bottom:1rem;border:1px solid hsl(var(--border)/.6);border-radius:.75rem;background:hsl(var(--background)/.95);backdrop-filter:blur(12px);box-shadow:0 4px 24px -4px rgb(0 0 0/.1),0 2px 8px -2px rgb(0 0 0/.05),0 0 0 1px hsl(var(--border)/.05);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.toolbar:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,hsl(var(--background)/.1) 0,transparent 50%,hsl(var(--foreground)/.03) 100%);pointer-events:none}.toolbar:hover{border-color:hsl(var(--border)/.8);box-shadow:0 8px 32px -4px rgb(0 0 0/.15),0 4px 16px -2px rgb(0 0 0/.08),0 0 0 1px hsl(var(--border)/.1)}@media (max-width:640px){.toolbar{height:2.25rem;gap:.5rem;padding:0 .5rem;margin-bottom:.75rem}}.viewport-container:fullscreen{display:flex;align-items:center;justify-content:center;background:black;padding:0;margin:0}.viewport-container:fullscreen .viewport-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.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))));max-width:none;max-height:none;border-radius:0}.viewport-container:fullscreen .toolbar{display:none}