.document-html{background-color:var(--diagram-paper);padding-top:0}.document-html-prompting{padding-top:0}.document-html .document-canvas-heading>strong{color:var(--canvas-ink,var(--color-text-default,#1a1a1a));text-overflow:ellipsis;white-space:nowrap;margin-right:auto;overflow:hidden}.document-html iframe{background:0 0;border:0;border-radius:8px;width:calc(100% - 24px);min-width:0;margin:76px 12px 12px;display:block}.document-html-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:300px;padding:104px 28px 28px;display:flex}.document-html .document-html-empty h3,.document-html .document-html-empty p{margin:0}.document-html-empty p,.document-html-code small{color:var(--color-text-secondary,#66645e);font-size:13px}.document-html-empty button{background:var(--diagram-card);border:1px solid var(--diagram-line);border-radius:8px;padding:8px 14px}.document-interactive-examples{padding:88px 28px 28px}.document-html .document-interactive-examples h3{margin:0 0 6px}.document-diagram.document-html .document-html-empty h3,.document-diagram.document-html .document-interactive-examples h3{font-size:22px;line-height:1.4}.document-interactive-examples>p{color:var(--color-text-secondary,#65635d);margin:0;font-size:14px}.document-interactive-example-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin-top:20px;display:grid}.document-interactive-example-grid button{border:1px solid var(--diagram-line);background:var(--diagram-card);text-align:center;flex-direction:column;justify-content:flex-start;gap:8px;padding:16px}.document-interactive-example-grid button:hover:not(:disabled){border-color:var(--diagram-accent)}.document-interactive-example-art{background:var(--color-background-canvas,#f6f5f0);width:100%;height:88px;color:var(--color-interactive-hue,#8a6aaf);border-radius:8px;place-items:center;display:grid}.document-interactive-example-grid span{color:var(--color-text-secondary,#65635d);font-size:12px;font-weight:400}.document-html-code{flex-direction:column;gap:12px;padding:92px 16px 16px;display:flex}.document-html-code textarea{box-sizing:border-box;border:1px solid var(--diagram-line);width:100%;color:inherit;background:var(--diagram-card);resize:vertical;tab-size:2;white-space:pre;border-radius:6px;min-height:300px;padding:10px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.document-html .document-diagram-prompt{min-height:300px;position:relative;inset:auto}@container (width<=600px){.document-html>iframe{margin-top:0}.document-html>.document-html-code{padding-top:16px}.document-html>.document-html-empty{padding-top:28px}.document-html>.document-interactive-examples{padding:16px 12px}.document-html .document-canvas-heading{grid-template-columns:minmax(0,1fr);padding:12px;position:relative;inset:auto}.document-html .document-canvas-heading>div{flex-wrap:wrap;grid-column:1;justify-self:end;max-width:100%}.document-html .document-canvas-heading>strong{white-space:normal;overflow-wrap:anywhere}}.document-html-full{border:0;border-radius:0;flex-direction:column;height:100%;min-height:0;margin:0;display:flex;overflow:auto}.document-html-full>iframe{flex:none;min-height:180px}.document-html-full>.document-html-code,.document-html-full>.document-html-empty,.document-html-full>.document-diagram-prompt,.document-html-full .document-html-code textarea{flex:1}