.bx-uml{--bx-uml-canvas-height:560px;--bx-uml-canvas-height-sm:380px;--bx-uml-field-max:560px;gap:var(--bx-space-16);padding-block:var(--bx-space-8);flex-direction:column;display:flex}.bx-uml-form{align-items:flex-end;gap:var(--bx-space-12);flex-wrap:wrap;display:flex}.bx-uml-field{min-width:0;max-width:var(--bx-uml-field-max);flex:260px}.bx-uml-result{gap:var(--bx-space-12);flex-direction:column;display:flex}.bx-uml-result-head{justify-content:space-between;align-items:center;gap:var(--bx-space-12);padding:var(--bx-space-12) var(--bx-space-16);background:var(--bx-color-surface);border:1px solid var(--bx-color-border);border-radius:var(--bx-radius-card);flex-wrap:wrap;display:flex}.bx-uml-result-head .bx-context-row{flex:220px;min-width:0}.bx-uml-actions{gap:var(--bx-space-8);flex-wrap:wrap;display:flex}.bx-diagram-meta{align-items:center;gap:var(--bx-space-8);flex-wrap:wrap;display:flex}.bx-diagram-meta-key{color:var(--bx-color-text-secondary)}.bx-diagram-meta-value{font-variant-numeric:tabular-nums;font-weight:var(--bx-weight-semibold)}.bx-diagram-warnings{padding:var(--bx-space-12) var(--bx-space-16);color:var(--bx-color-warning);background:var(--bx-color-warning-bg);border-radius:var(--bx-radius-control);font-size:var(--bx-font-meta);line-height:var(--bx-line-meta);margin:0;padding-inline-start:var(--bx-space-32)}.bx-diagram-canvas{height:var(--bx-uml-canvas-height);background:var(--bx-color-surface);border:1px solid var(--bx-color-border);border-radius:var(--bx-radius-card);max-width:100%;overflow:auto}.bx-diagram-canvas:empty{display:none}.bx-uml-source{gap:var(--bx-space-8);flex-direction:column;align-items:flex-start;display:flex}.bx-uml-code{width:100%;max-width:100%;max-height:var(--bx-uml-canvas-height-sm);padding:var(--bx-space-12);font-family:var(--bx-font-mono);font-size:var(--bx-font-meta);line-height:var(--bx-line-meta);color:var(--bx-color-text);background:var(--bx-color-surface-muted);border:1px solid var(--bx-color-border);border-radius:var(--bx-radius-control);margin:0;overflow:auto}@media (max-width:767px){.bx-diagram-canvas{height:var(--bx-uml-canvas-height-sm)}.bx-uml-form>.bx-btn{width:100%}}
