*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e0e0e0;background:#1a1a2e;flex-direction:column;height:100dvh;font-family:system-ui,sans-serif;display:flex}#app{flex-direction:column;height:100%;display:flex}header{background:#16213e;border-bottom:1px solid #0f3460;padding:.75rem 1.25rem}header h1{letter-spacing:.05em;font-size:1.1rem;font-weight:600}main{flex:1;min-height:0;display:flex;overflow:hidden}#editor-pane{flex:0 0 var(--editor-basis,50%);flex-direction:column;min-width:0;display:flex;overflow:hidden}#editor{flex:1;min-height:0;overflow:auto}#gutter{cursor:col-resize;touch-action:none;background:#0f3460;flex:0 0 6px}#gutter:hover{background:#1e5a96}.toolbar{background:#16213e;border-bottom:1px solid #0f3460;align-items:center;gap:.5rem;padding:.4rem .6rem;display:flex}.toolbar label{color:#a0a0b0;font-size:.8rem}.toolbar button,.toolbar select{font:inherit;color:#e0e0e0;cursor:pointer;background:#0f3460;border:1px solid #1e5a96;border-radius:4px;padding:.25rem .7rem;font-size:.8rem}.toolbar button:hover,.toolbar select:hover{background:#1e5a96}.toolbar-check{cursor:pointer;user-select:none;align-items:center;gap:.3rem;display:flex}.toolbar-check input[type=checkbox]{cursor:pointer;accent-color:#7dd3fc;width:.85rem;height:.85rem}#error{color:#f87171;white-space:pre-wrap;background:#3d1515;padding:.5rem .75rem;font-family:monospace;font-size:.85rem}#diagram-pane{background:#0d0d1a;flex-direction:column;flex:1 1 0;min-width:0;display:flex;overflow:hidden}#diagram-scroll{flex:1;min-height:0;padding:1.5rem;overflow:auto}#diagram{display:block}#diagram line{stroke:#7dd3fc;stroke-width:2px;stroke-linecap:round}@media (width<=700px){body{height:auto;min-height:100dvh}#app{height:auto}main{flex-direction:column;overflow:visible}#gutter{display:none}#editor-pane{border-bottom:1px solid #0f3460;flex:none;overflow:visible}#editor{flex:none;min-height:8rem;overflow:visible}#diagram-pane{flex:none;overflow:visible}#diagram-scroll{overflow:auto visible}}