.diagram-workspace{overflow:hidden}.diagram-file-input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.diagram-controls{display:flex;min-width:0;padding:16px clamp(18px,3vw,28px);align-items:end;gap:18px;border-bottom:1px solid var(--dev-line);background:var(--dev-soft)}.diagram-template-control{display:grid;width:min(100%,230px);gap:7px}.diagram-template-control>span,.diagram-zoom-control>span,.diagram-controls .dev-segmented legend{color:var(--dev-muted);font-size:.75rem;font-weight:760;letter-spacing:.02em}.diagram-template-control select{width:100%;height:40px;padding:0 34px 0 12px;border:1px solid var(--dev-line-strong);border-radius:9px;color:var(--dev-ink);background:#fcfeff;font:inherit;font-size:.875rem;font-weight:650}.diagram-controls .dev-segmented{min-width:260px}.diagram-zoom-control{display:grid;min-width:210px;margin-left:auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 10px}.diagram-zoom-control>span{display:inline-flex;grid-column:1 / -1;align-items:center;gap:5px}.diagram-zoom-control svg{width:14px}.diagram-zoom-control input{width:100%;accent-color:var(--developer-accent)}.diagram-zoom-control output{min-width:42px;color:var(--developer-accent);font-size:.8125rem;font-weight:760;text-align:right}.diagram-file-error{margin:16px clamp(18px,3vw,28px) 0}.diagram-editor-grid{display:grid;min-height:610px;grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr)}.diagram-code-pane,.diagram-preview-pane{display:grid;min-width:0;align-content:stretch}.diagram-code-pane{grid-template-rows:auto minmax(420px,1fr) auto auto;border-right:1px solid var(--dev-line);background:#f5fbff}.diagram-preview-pane{grid-template-rows:auto minmax(500px,1fr) auto;background:#fcfeff}.diagram-pane-heading{display:flex;min-height:49px;padding:0 18px;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--dev-line);color:var(--dev-muted);background:#f2f9fe;font-size:.75rem;font-weight:760}.diagram-pane-heading>span:first-child{display:inline-flex;align-items:center;gap:7px;color:var(--dev-ink);font-size:.8125rem}.diagram-pane-heading svg{width:16px;color:var(--developer-accent)}.diagram-source-stats,.diagram-render-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diagram-code-label{display:grid;min-height:0}.diagram-code-label textarea{width:100%;min-height:420px;resize:vertical;padding:21px;border:0;border-radius:0;outline:0;color:#152936;background:#f9fdff;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.8125rem;line-height:1.72;-moz-tab-size:2;tab-size:2}.diagram-code-label textarea:focus-visible{box-shadow:inset 0 0 0 2px var(--developer-accent)}.diagram-code-actions,.diagram-export-actions{display:flex;padding:14px 16px;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid var(--dev-line);background:#f4fafe}.diagram-key-hint{margin:0;padding:0 18px 15px;color:var(--dev-muted);background:#f4fafe;font-size:.72rem}.diagram-preview{display:grid;min-width:0;min-height:500px;overflow:auto;padding:clamp(22px,4vw,42px);place-items:center;background-color:#fafdff;background-image:radial-gradient(oklch(.74 .018 238 / .42) .7px,transparent .7px);background-size:18px 18px}.diagram-preview--paper{background-color:#f6eedf;background-image:radial-gradient(oklch(.7 .028 84 / .42) .7px,transparent .7px)}.diagram-preview--night{background-color:#15232f;background-image:radial-gradient(oklch(.55 .035 246 / .42) .7px,transparent .7px)}.diagram-svg{min-width:min(100%,520px);max-width:none;transition:width .18s cubic-bezier(.16,1,.3,1)}.diagram-svg>svg{display:block;width:100%;max-width:none!important;height:auto;margin:auto}.diagram-preview-error,.diagram-preview-loading{display:grid;max-width:430px;justify-items:center;gap:10px;color:var(--dev-muted);text-align:center}.diagram-preview-error strong{color:var(--dev-ink);font-size:1rem}.diagram-preview-error p{max-width:46ch;margin:0 0 5px;line-height:1.55}.diagram-preview-loading svg{width:24px;color:var(--developer-accent)}.diagram-spin{animation:diagram-spin .8s linear infinite}@keyframes diagram-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.diagram-spin{animation-duration:1.8s}.diagram-svg{transition:none}}@media(max-width:880px){.diagram-controls{flex-wrap:wrap}.diagram-zoom-control{width:100%;margin-left:0}.diagram-editor-grid{grid-template-columns:1fr}.diagram-code-pane{border-right:0;border-bottom:1px solid var(--dev-line)}}@media(max-width:620px){.diagram-controls{padding:15px;align-items:stretch;gap:14px}.diagram-template-control,.diagram-controls .dev-segmented{width:100%;min-width:0}.diagram-controls .dev-segmented>div{width:100%}.diagram-controls .dev-segmented label{flex:1}.diagram-pane-heading{padding:0 14px}.diagram-code-label textarea{min-height:360px;padding:17px 15px;font-size:.75rem}.diagram-code-actions,.diagram-export-actions{padding:12px}.diagram-code-actions .dev-button,.diagram-export-actions .dev-button{flex:1 1 140px}.diagram-preview{min-height:420px;padding:18px}.diagram-preview-pane{grid-template-rows:auto minmax(420px,1fr) auto}.diagram-svg{min-width:420px}}