*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e2e8f0;background:#0f1117;flex-direction:column;height:100vh;font-family:Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden}.topbar{z-index:10;background:#1a1d2e;border-bottom:1px solid #2d3148;flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 24px;display:flex}.topbar h1{color:#a78bfa;letter-spacing:.05em;text-transform:uppercase;font-size:1rem;font-weight:600}.tab-group{gap:8px;display:flex}.tab-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #3d4166;border-radius:6px;padding:8px 20px;font-size:.875rem;font-weight:500;transition:all .2s}.tab-btn:hover{color:#e2e8f0;background:#2d3148}.tab-btn.active{color:#fff;background:#6d28d9;border-color:#7c3aed}.controls{align-items:center;gap:8px;display:flex}.ctrl-btn{color:#94a3b8;cursor:pointer;background:#1e2235;border:1px solid #3d4166;border-radius:6px;justify-content:center;align-items:center;width:34px;height:34px;font-size:1.1rem;transition:all .2s;display:flex}.ctrl-btn:hover{color:#e2e8f0;background:#2d3148}.zoom-label{color:#64748b;text-align:center;min-width:44px;font-size:.8rem}.canvas-wrap{flex:1;position:relative;overflow:hidden}.diagram-panel{width:100%;height:100%;display:none}.diagram-panel.active{display:block}.diagram-panel svg{width:100%;height:100%;display:block}.legend{color:#94a3b8;pointer-events:none;z-index:10;background:#1a1d2e;border:1px solid #2d3148;border-radius:8px;padding:12px 16px;font-size:.75rem;position:absolute;bottom:20px;left:20px}.legend-title{color:#a78bfa;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-weight:600}.legend-item{align-items:center;gap:8px;margin-bottom:4px;display:flex}.legend-dot{border-radius:3px;flex-shrink:0;width:12px;height:12px}.hint{color:#475569;pointer-events:none;z-index:10;background:#1a1d2e;border:1px solid #2d3148;border-radius:8px;padding:10px 14px;font-size:.72rem;line-height:1.6;position:absolute;bottom:20px;right:20px}