/* The viewport clips a larger, source-sampled preview; export dimensions do not change. */
.workspace .stage{grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
.preview-tools{display:flex;align-items:center;justify-content:center;gap:3px;max-width:100%;min-width:0;min-height:31px;padding:3px 5px;border:1px solid #d5dfef;border-radius:10px;background:#ffffffed;box-shadow:0 2px 9px #314e7410;z-index:4}
.preview-tools[hidden]{display:none!important}
.preview-tools button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:28px;min-height:28px;padding:4px 8px;border:0;border-radius:6px;background:transparent;font:700 10px/1.4 Manrope,sans-serif;color:#354d72;white-space:nowrap}
.preview-tools button:first-child,.preview-tools #preview-zoom-in{font:500 20px/1 system-ui;padding:2px 7px}
.preview-tools button:hover:not(:disabled){background:#e9efff;color:#1747d2}
.preview-tools button:focus-visible{outline:2px solid #2463eb;outline-offset:2px}
.preview-tools output{min-width:39px;padding-inline:2px;text-align:center;font:700 10px/1.4 Manrope,sans-serif;color:#2b4164;font-variant-numeric:tabular-nums;pointer-events:none}
.preview-tools-divider{height:17px;width:1px;background:#dce4f0;margin:0 3px}
.workspace .preview-viewport{position:relative;align-self:stretch;justify-self:stretch;min-width:0;min-height:0;overflow:hidden;width:100%;height:100%;touch-action:none;border-radius:7px}
.workspace .preview-viewport .preview-wrap{position:absolute;left:50%;top:50%;max-width:none;max-height:none;min-width:0;min-height:0;align-items:center;justify-content:center;transform:translate(-50%,-50%);will-change:transform}
.workspace .preview-viewport .preview-canvas,.workspace .stage:has(.preview-wrap.ready) .preview-viewport .preview-canvas{display:block;max-width:none;max-height:none;width:100%;height:100%;flex:none;object-fit:fill;touch-action:none}
.preview-pan-mode .preview-canvas{cursor:grab!important}
.preview-pan-mode.preview-panning .preview-canvas{cursor:grabbing!important}
.preview-panning .region-remove-layer{visibility:hidden}
.region-remove[hidden]{display:none!important}
.preview-tools button:disabled{opacity:.4;cursor:default}
@media(max-width:820px){
 .workspace .editor-layout{grid-template-rows:clamp(178px,27dvh,220px) minmax(0,1fr)}
 .workspace .stage,.workspace .stage:has(.preview-wrap.ready){gap:4px;padding-top:6px;padding-bottom:6px}
 .preview-tools{padding:2px 4px;min-height:30px;gap:2px}
 .preview-tools button{min-height:28px;padding-inline:6px;font-size:10px}
}
@media(min-width:541px) and (max-width:820px) and (max-height:600px){.workspace .editor-layout{grid-template-rows:minmax(0,1fr)}}