:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424}*,*:before,*:after{box-sizing:border-box}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}#app{width:100%;height:100vh;margin:0 auto;padding:0;text-align:center;position:absolute;top:0;left:0}.container{display:flex;height:100%;width:100%}.editor-container{width:40%;display:flex;flex-direction:column;height:100%;border-right:1px solid #555}#editor{width:100%;height:90%;padding:1rem;border:none;background-color:#1e1e1e;color:#d4d4d4;font-family:Source Code Pro,Fira Code,Courier New,monospace;font-size:16px;resize:none;outline:none}#error-container{height:10%;padding:.5rem 1rem;background-color:#252526;color:#f55;text-align:left;font-family:monospace;white-space:pre-wrap;overflow-y:auto}#preview{width:60%;height:100%;padding:1rem;background-color:#fff;position:relative;overflow:hidden;cursor:grab}#preview:active{cursor:grabbing}.diagram-container{transform-origin:0 0;transition:transform .1s ease-out,opacity .1s ease-in-out;position:relative}#preview svg{max-width:none;max-height:none;display:block}.zoom-controls{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:5px;z-index:1000}.zoom-btn{width:30px;height:30px;border:none;border-radius:4px;background-color:#000000b3;color:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.zoom-btn:hover{background-color:#000000e6}.zoom-reset{font-size:12px;padding:4px 0;width:50px;height:30px;text-align:center;display:flex;align-items:center;justify-content:center}