:root {
  --vdi-bg: #f8f9fb;
  --vdi-surface: #fff;
  --vdi-text: #22232c;
  --vdi-muted: #626570;
  --vdi-accent: #6366f1;
  --vdi-radius: .75rem;
  --vdi-space: 1rem;
}
.vdi-container, .vdi-container * { box-sizing: border-box; }
.vdi-container { display: flex; flex-direction: column; width: 100%; min-height: 24rem; height: min(80dvh, 60rem); overflow: hidden; border-radius: var(--vdi-radius); background: var(--vdi-bg); color: var(--vdi-text); font-family: system-ui, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 12px 36px -12px #22232c30; }
.vdi-workspace-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--vdi-surface); }
.vdi-canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.vdi-toolbar { display: flex; gap: var(--vdi-space); align-items: center; min-height: 3rem; padding-inline: var(--vdi-space); background: var(--vdi-surface); color: var(--vdi-muted); }
.vdi-container :focus-visible { outline: .1875rem solid var(--vdi-accent); outline-offset: .25rem; }