@keyframes canvasGlow{0%,100%{box-shadow:0 0 40px rgba(255,153,0,4%),inset 0 0 60px rgba(255,153,0,1%)}50%{box-shadow:0 0 60px rgba(255,153,0,7%),inset 0 0 80px rgba(255,153,0,3%)}}@media(prefers-color-scheme:dark){@keyframes canvasGlow{0%,100%{box-shadow:0 0 40px rgba(255,153,0,5%),inset 0 0 60px rgba(255,153,0,2%)}50%{box-shadow:0 0 60px rgba(255,153,0,8%),inset 0 0 80px rgba(255,153,0,4%)}}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}@keyframes recordingBorder{0%,100%{border-color:#ef4444}50%{border-color:#fca5a5}}.diagram-editor{font-family:jetbrains mono,fira code,monospace;color:#e0e0e0}.diagram-editor>div:first-child{width:100%!important;height:auto!important}.diagram-editor canvas{width:100%!important;height:auto!important;border-radius:16px;border:1px solid #2a2a4e;box-shadow:0 0 40px rgba(0,0,0,.5),inset 0 0 60px rgba(255,153,0,3%);display:block}.diagram-editor canvas.recording{border:3px solid #ef4444;box-shadow:0 0 40px rgba(239,68,68,.3),inset 0 0 60px rgba(239,68,68,5%);animation:recordingBorder 1s infinite}.diagram-editor .controls-panel{margin-top:20px;padding:16px;background:#1a1a2e;border-radius:12px;border:1px solid #2a2a4e}.diagram-editor .input-row{display:flex;gap:12px;margin-bottom:12px}.diagram-editor .input-group{flex:1}.diagram-editor .input-label{color:#888;font-size:11px;display:block;margin-bottom:6px}.diagram-editor .text-input{width:100%;padding:10px 14px;background:#0d0d1a;border:1px solid #3a3a5e;border-radius:8px;color:#e0e0e0;font-family:inherit;font-size:14px;outline:none;transition:border-color .15s}.diagram-editor .text-input:focus{border-color:#f90}.diagram-editor .text-input.large{padding:12px 16px}.diagram-editor .quick-add-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.diagram-editor .quick-add-label{color:#666;font-size:11px;margin-right:4px;align-self:center}.diagram-editor .quick-add-btn{padding:4px 10px;background:#2a2a4e;border:1px solid #3a3a5e;border-radius:4px;color:#888;font-size:10px;cursor:pointer;font-family:inherit;transition:all .15s}.diagram-editor .quick-add-btn:hover{background:#3a3a5e;color:#e0e0e0}.diagram-editor .quick-add-btn.fanout{background:#2a1a4e;border-color:#5a3a7e;color:#d946ef}.diagram-editor .quick-add-btn.fanout:hover{background:#3a2a5e}.diagram-editor .quick-add-btn.clear{background:#4a1a1a;border-color:#6a2a2a;color:#ef4444}.diagram-editor .quick-add-btn.clear:hover{background:#6a2a2a}.diagram-editor .detected-services{margin-top:12px;padding:10px;background:#0d0d1a;border-radius:6px;border:1px solid #2a2a4e}.diagram-editor .detected-services-label{color:#666;font-size:10px;margin-bottom:6px}.diagram-editor .detected-services-list{display:flex;flex-wrap:wrap;gap:6px}.diagram-editor .service-badge{padding:4px 8px;background:#1a1a2e;border:1px solid;border-radius:4px;font-size:11px;display:flex;align-items:center;gap:4px}.diagram-editor .service-badge.fanout-target{background:#1a1a3e}.diagram-editor .service-badge .fanout-indicator{color:#d946ef;margin-left:2px}.diagram-editor .service-badge .fanout-label{color:#d946ef;margin-left:2px;font-size:9px}.diagram-editor .empty-services{color:#666;font-size:11px;font-style:italic}.diagram-editor .button-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center}.diagram-editor .btn{padding:12px 24px;border-radius:8px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;transition:transform .1s,box-shadow .1s;border:none}.diagram-editor .btn:hover{transform:translateY(-2px)}.diagram-editor .btn-primary{background:linear-gradient(135deg,#ff9900 0%,#ff6600 100%);color:#0d0d1a;box-shadow:0 4px 15px rgba(255,153,0,.3)}.diagram-editor .btn-primary:hover{box-shadow:0 6px 20px rgba(255,153,0,.4)}.diagram-editor .btn-secondary{background:#3a3a5e;border:1px solid #4a4a6e;color:#e0e0e0}.diagram-editor .btn-secondary.active{background:#4ade80;color:#0d0d1a}.diagram-editor .btn-record{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);color:#fff;box-shadow:0 4px 15px rgba(139,92,246,.3);display:flex;align-items:center;gap:8px}.diagram-editor .btn-record.recording{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);box-shadow:0 4px 15px rgba(239,68,68,.4)}.diagram-editor .record-indicator{width:10px;height:10px;background:#ef4444;border-radius:50%}.diagram-editor .btn-record.recording .record-indicator{background:#fff;border-radius:2px;animation:pulse 1s infinite}.diagram-editor .export-group{position:relative;display:flex}.diagram-editor .export-group .btn:hover{transform:none}.diagram-editor .export-menu button:hover{background:#2a2a4e}.diagram-editor .export-dropdown-toggle{padding:12px 10px;border-left:1px solid rgba(255,255,255,.2)}.diagram-editor .speed-control{display:flex;align-items:center;gap:10px;background:#1a1a2e;padding:8px 16px;border-radius:8px;border:1px solid #2a2a4e}.diagram-editor .speed-label{color:#888;font-size:12px}.diagram-editor .speed-slider{width:100px;accent-color:#ff9900}.diagram-editor .speed-value{color:#f90;font-size:12px;min-width:35px}.diagram-editor .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}.diagram-editor .stat-card{background:#1a1a2e;padding:16px;border-radius:12px;border:1px solid #2a2a4e;text-align:center}.diagram-editor .stat-value{font-size:24px;font-weight:700}.diagram-editor .stat-value.orange{color:#f90}.diagram-editor .stat-value.pink{color:#ff4f8b}.diagram-editor .stat-value.green{color:#4ade80}.diagram-editor .stat-value.purple{color:#8b5cf6}.diagram-editor .stat-label{color:#666;font-size:11px;margin-top:4px}.diagram-editor .info-panel{margin-top:24px;padding:16px;background:#1a1a2e;border-radius:12px;border:1px solid #2a2a4e}.diagram-editor .info-panel h3{color:#e0e0e0;margin:0 0 12px;font-size:14px}.diagram-editor .example-list{display:flex;flex-direction:column;gap:8px}.diagram-editor .example-btn{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#0d0d1a;border:1px solid #2a2a4e;border-radius:6px;color:#888;font-size:12px;cursor:pointer;font-family:inherit;text-align:left;transition:all .15s}.diagram-editor .example-btn:hover{border-color:#f90;color:#e0e0e0}.diagram-editor .example-btn code{color:#f90;font-size:11px;background:0 0;padding:0}.diagram-editor .example-btn .desc{color:#666;font-size:10px}.diagram-editor .feature-list{color:#888;font-size:12px;margin:0;padding-left:20px;line-height:1.8}.diagram-editor .feature-list .highlight{font-weight:700}.diagram-editor .feature-list .orange{color:#f90}.diagram-editor .feature-list .green{color:#4ade80}.diagram-editor .feature-list .pink{color:#ff4f8b}.diagram-editor .feature-list .blue{color:#60a5fa}.diagram-editor .feature-list .purple{color:#c084fc}.diagram-editor .feature-list .violet{color:#8b5cf6}.diagram-editor .info-panel .tip{color:#666;font-size:11px;margin-top:12px;margin-bottom:0}@media(prefers-color-scheme:light){.diagram-editor{color:#374151}.diagram-editor canvas{border-color:#d1d5db!important;box-shadow:0 0 30px rgba(0,0,0,8%),inset 0 0 40px rgba(255,153,0,2%)}.diagram-editor .controls-panel{background:#fff!important;border-color:#e5e7eb!important}.diagram-editor .text-input{background:#f9fafb!important;border-color:#d1d5db!important;color:#374151!important}.diagram-editor .input-label{color:#6b7280!important}.diagram-editor .btn-secondary{background:#e5e7eb!important;border-color:#d1d5db!important;color:#374151!important}.diagram-editor .speed-control,.diagram-editor .autoplay-rate-control{background:#f3f4f6!important;border-color:#e5e7eb!important}.diagram-editor .export-menu{background:#fff!important;border-color:#e5e7eb!important}.diagram-editor .export-menu button:hover{background:#f3f4f6!important}.diagram-editor .quick-add-btn{background:#f3f4f6!important;border-color:#d1d5db!important;color:#6b7280!important}.diagram-editor .detected-services{background:#f9fafb!important;border-color:#e5e7eb!important}.diagram-editor .service-badge{background:#f3f4f6!important}.diagram-editor .stat-card{background:#fff!important;border-color:#e5e7eb!important}.diagram-editor .info-panel{background:#fff!important;border-color:#e5e7eb!important}.diagram-editor .example-btn{background:#f9fafb!important;border-color:#e5e7eb!important;color:#6b7280!important}.diagram-editor .example-btn:hover{color:#374151!important}.diagram-editor .btn-autoplay{background:#22c55e!important;color:#fff!important}}.code-sample{position:relative}.copy-btn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:6px;cursor:pointer;transition:all .15s;padding:4px 10px;font-family:inherit;font-size:11px;color:#888}.copy-btn:hover{border-color:#f90;color:#e0e0e0}.copy-btn .copy-label{display:inline}.copy-btn .copied-label{display:none}.copy-btn.copied .copy-label{display:none}.copy-btn.copied .copied-label{display:inline}.copy-btn.copied{border-color:#4ade80;color:#4ade80;background:rgba(74,222,128,.15)}@media(prefers-color-scheme:light){.copy-btn{background:rgba(0,0,0,5%);border-color:rgba(0,0,0,.1);color:#9ca3af}.copy-btn:hover{color:#374151}}