.mermaid-tool{--tool-border: #dce3ed;color:#334155}.mermaid-tool [hidden]{display:none!important}.mermaid-tool button,.mermaid-tool select,.mermaid-tool-import{min-height:2.5rem;padding:.5rem .8rem;border:1px solid var(--tool-border);border-radius:.5rem;background:#fff;color:#334155;font-size:.875rem;font-weight:500;cursor:pointer}.mermaid-tool button:hover:not(:disabled),.mermaid-tool-import:hover{background:#eff6ff;border-color:#93b4ef}.mermaid-tool button:disabled{opacity:.5;cursor:not-allowed}.mermaid-tool :is(button,select,input,textarea):focus-visible,.mermaid-tool-import:focus-within{outline:3px solid #2563eb;outline-offset:3px}.mermaid-tool-toolbar,.mermaid-tool-examples,.mermaid-tool-panel-heading{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem}.mermaid-tool-toolbar{justify-content:space-between;margin-bottom:1rem}.mermaid-tool-examples label{font-size:.875rem;font-weight:600}.mermaid-tool select{padding-right:2rem;max-width:100%}.mermaid-tool-grid{display:grid;grid-template-columns:minmax(18rem,.8fr) minmax(0,1.6fr);gap:1rem;align-items:stretch}.mermaid-tool--focused .mermaid-tool-grid{grid-template-columns:minmax(0,1fr)}.mermaid-tool-editor,.mermaid-tool-preview{display:flex;flex-direction:column;min-width:0;border:1px solid var(--tool-border);border-radius:.875rem;overflow:hidden;background:#fff;box-shadow:0 4px 18px #0f172a05}.mermaid-tool-panel-heading{min-height:4rem;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--tool-border)}.mermaid-tool-panel-heading h2{font-size:1rem;font-weight:650;color:#0f172a}.mermaid-tool-import{position:relative;overflow:hidden}.mermaid-tool-import input{position:absolute;inset:0;width:100%;opacity:0;cursor:pointer}.mermaid-tool-title{padding:.85rem 1rem}.mermaid-tool-title label{display:block;margin-bottom:.35rem;font-size:.75rem;font-weight:600}.mermaid-tool-title input{width:100%;padding:.5rem .65rem;border:1px solid var(--tool-border);border-radius:.4rem;font-size:.875rem}.mermaid-tool-editor textarea{display:block;flex:1;width:100%;min-height:22rem;border:0;border-radius:0;padding:1.15rem;resize:vertical;background:#0f172a;color:#dbeafe;font:.85rem/1.85 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:4}.mermaid-tool-editor textarea::placeholder{color:#94a3b8}.mermaid-tool-editor textarea:focus-visible{outline-offset:-3px}.mermaid-tool-source-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;background:#172238;color:#cbd5e1;padding:.5rem 1rem;font-size:.7rem}.mermaid-tool-render{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;padding:1rem}.mermaid-tool-render>span{color:#64748b;font-size:.7rem}.mermaid-tool .mermaid-tool-primary{display:inline-flex;align-items:center;justify-content:center;gap:1.5rem;background:#0c66e4;color:#fff;border-color:#0c66e4;font-weight:600}.mermaid-tool .mermaid-tool-primary:hover:not(:disabled){background:#05c;border-color:#05c}.mermaid-tool-state{border-radius:1rem;padding:.25rem .6rem;background:#ecfdf5;color:#047857;font-size:.7rem}.mermaid-tool-state--pending{background:#fff7ed;color:#9a3412}.mermaid-tool-frame{flex:1;position:relative;min-height:38rem}.mermaid-tool-frame iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0}.mermaid-tool-unavailable{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;background:#f8fafc;padding:2rem}.mermaid-tool-status{padding:.75rem 1rem;border-top:1px solid var(--tool-border);font-size:.75rem;color:#64748b}.mermaid-tool-notice{margin:0 1rem 1rem;padding:.75rem;border-radius:.5rem;font-size:.8rem;color:#9a3412;background:#fff7ed}.mermaid-tool-footnote{margin-top:1rem;font-size:.8rem;color:#64748b}@media(max-width:900px){.mermaid-tool-grid{grid-template-columns:minmax(0,1fr)}.mermaid-tool-editor textarea{min-height:16rem;height:18rem;flex:auto}.mermaid-tool-frame{min-height:35rem}}@media(max-width:480px){.mermaid-tool-examples{gap:.5rem}.mermaid-tool-examples label{flex-basis:100%}.mermaid-tool-render{align-items:flex-start;flex-direction:column}}