*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0f1419;color:#e6e6e6}.app{display:flex;flex-direction:column;height:100vh}.header{padding:16px 24px;background:#1a1f2e;border-bottom:1px solid #2a2f3e}.header h1{margin:0 0 12px;font-size:20px;font-weight:600}.input-row{display:flex;gap:8px}.input-row input{flex:1;padding:10px 12px;background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;color:#e6e6e6;font-size:14px}.input-row input:focus{outline:none;border-color:#4a7cff}.input-row button{padding:10px 20px;background:#4a7cff;border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;font-size:14px}.input-row button:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{padding:8px 14px;background:transparent;border:1px solid #2a2f3e;border-radius:6px;color:#d1d5db;cursor:pointer;font-size:13px}.btn-secondary:hover:not(:disabled){border-color:#4a7cff;color:#e6e6e6}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.main{flex:1;display:flex;overflow:hidden}.diagram-panel{flex:1;padding:24px;overflow:auto;display:flex;flex-direction:column;align-items:center}.diagram-title{font-size:18px;font-weight:600;margin-bottom:8px;align-self:flex-start}.diagram-summary{font-size:14px;color:#9ca3b0;margin-bottom:24px;align-self:flex-start;max-width:700px}.mermaid-container{background:#fff;border-radius:8px;padding:24px;width:100%;display:flex;justify-content:center}.mermaid-container svg{max-width:100%;height:auto}.mermaid-container .node{cursor:pointer}.mermaid-container .node.flow-active>rect,.mermaid-container .node.flow-active>polygon,.mermaid-container .node.flow-active>circle,.mermaid-container .node.flow-active>ellipse,.mermaid-container .node.flow-active>path{stroke:#4a7cff;stroke-width:3px;filter:drop-shadow(0 0 6px rgba(74,124,255,.85))}.details-panel{width:440px;padding:0;background:#1a1f2e;border-left:1px solid #2a2f3e;overflow-y:auto;display:flex;flex-direction:column}.details-panel>.empty{padding:24px}.tabbed-panel{display:flex;flex-direction:column;flex:1;min-height:0}.tabbed-header{padding:20px 24px 12px;border-bottom:1px solid #2a2f3e}.tabbed-header h2{margin:0 0 8px;font-size:18px}.component-summary{font-size:13px;color:#9ca3b0;line-height:1.5}.tab-list{display:flex;gap:4px;padding:0 16px;background:#1a1f2e;border-bottom:1px solid #2a2f3e;position:sticky;top:0;z-index:1}.tab-btn{padding:10px 14px;background:transparent;border:none;color:#9ca3b0;cursor:pointer;font-size:13px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}.tab-btn:hover{color:#e6e6e6}.tab-btn.active{color:#4a7cff;border-bottom-color:#4a7cff}.tab-btn:focus-visible{outline:2px solid #4a7cff;outline-offset:-2px;border-radius:3px}.tab-panel{padding:20px 24px;overflow-y:auto;flex:1;min-height:0}.section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid #2a2f3e}.section:last-child{border-bottom:none}.section-heading{font-size:12px;text-transform:uppercase;color:#4a7cff;margin-bottom:8px;letter-spacing:.6px;font-weight:600}.section-body{font-size:13px;line-height:1.55;color:#d1d5db}.section-body p{margin:0 0 8px}.section-body p:last-child{margin-bottom:0}.section-body ul,.section-body ol{margin:0 0 8px;padding-left:20px}.section-body li{margin-bottom:2px}.section-body code{background:#0f1419;padding:1px 5px;border-radius:3px;font-size:12px;font-family:SF Mono,Menlo,Consolas,monospace}.section-body pre{background:#0f1419;padding:10px 12px;border-radius:4px;overflow-x:auto;font-size:12px;margin:8px 0}.section-body pre code{background:none;padding:0}.section-body table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px}.section-body th,.section-body td{border:1px solid #2a2f3e;padding:6px 10px;text-align:left}.section-body th{background:#0f1419;font-weight:600}.section-body strong{color:#e6e6e6}.capacity-block{background:#1a1f2e;border:1px solid #2a2f3e;border-radius:6px;padding:16px 20px;margin-bottom:24px;align-self:flex-start;max-width:700px;font-size:13px;color:#d1d5db}.capacity-label{font-size:11px;text-transform:uppercase;color:#4a7cff;letter-spacing:.5px;margin-bottom:6px;margin-top:8px;font-weight:600}.capacity-label:first-child{margin-top:0}.capacity-block ul{margin:0 0 8px;padding-left:20px}.empty{color:#6b7280;font-size:13px;text-align:center;margin-top:24px}.error{color:#ef4444;font-size:14px;margin-top:12px}.loading{color:#9ca3b0;margin-top:40px}.tab-loading{color:#9ca3b0;font-size:13px;margin-top:16px;font-style:italic}.tab-error,.tab-empty{margin-top:16px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}.tab-toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}.bottleneck-card{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:14px 16px;margin-bottom:12px}.bottleneck-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.bottleneck-title{font-size:14px;font-weight:600;color:#e6e6e6}.bottleneck-row{margin-top:8px}.bottleneck-row-label{font-size:11px;text-transform:uppercase;color:#4a7cff;letter-spacing:.5px;font-weight:600;margin-bottom:2px}.bottleneck-row-value{font-size:13px;color:#d1d5db;line-height:1.5}.severity-pill{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#0f1419;white-space:nowrap}.severity-pill.sev-high{background:#ef4444;color:#fff}.severity-pill.sev-medium{background:#f59e0b;color:#1a1f2e}.severity-pill.sev-low{background:#facc15;color:#1a1f2e}.chat{display:flex;flex-direction:column;height:100%;min-height:0}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px;min-height:200px}.chat-hint{margin-top:8px}.chat-msg{display:flex;flex-direction:column;gap:4px}.chat-role{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;color:#9ca3b0}.chat-user .chat-role{color:#4a7cff}.chat-body{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:10px 12px;font-size:13px;line-height:1.55;color:#d1d5db}.chat-user .chat-body{background:#1a2340;border-color:#2c3a67}.chat-user-text{white-space:pre-wrap;word-wrap:break-word}.chat-body p{margin:0 0 8px}.chat-body p:last-child{margin-bottom:0}.chat-body ul,.chat-body ol{margin:4px 0 8px;padding-left:20px}.chat-body code{background:#1a1f2e;padding:1px 5px;border-radius:3px;font-size:12px;font-family:SF Mono,Menlo,Consolas,monospace}.chat-body pre{background:#1a1f2e;padding:8px 10px;border-radius:4px;overflow-x:auto;font-size:12px}.chat-body pre code{background:none;padding:0}.chat-thinking{color:#9ca3b0;font-style:italic}.chat-error{margin-top:8px}.chat-input-row{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #2a2f3e}.chat-input-row textarea{flex:1;padding:8px 10px;background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;color:#e6e6e6;font-size:13px;font-family:inherit;resize:vertical;min-height:40px;max-height:160px}.chat-input-row textarea:focus{outline:none;border-color:#4a7cff}.chat-input-row button{padding:8px 16px;background:#4a7cff;border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;font-size:13px;align-self:flex-start}.chat-input-row button:disabled{opacity:.5;cursor:not-allowed}.whatif-section{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:14px 16px;margin-bottom:14px}.whatif-heading{font-size:12px;text-transform:uppercase;color:#4a7cff;letter-spacing:.5px;font-weight:600;margin-bottom:10px}.whatif-row{display:flex;gap:8px}.whatif-row input{flex:1;padding:8px 10px;background:#1a1f2e;border:1px solid #2a2f3e;border-radius:6px;color:#e6e6e6;font-size:13px}.whatif-row input:focus,.whatif-grid input:focus{outline:none;border-color:#4a7cff}.whatif-row button,.whatif-section>button{padding:8px 14px;background:#4a7cff;border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;font-size:13px}.whatif-row button:disabled,.whatif-section>button:disabled{opacity:.5;cursor:not-allowed}.whatif-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}.whatif-grid label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#9ca3b0;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.whatif-grid input{padding:7px 9px;background:#1a1f2e;border:1px solid #2a2f3e;border-radius:6px;color:#e6e6e6;font-size:13px;text-transform:none;letter-spacing:normal;font-weight:400}.whatif-result{margin-top:16px}.whatif-summary{font-size:13px;line-height:1.55;color:#d1d5db;margin-bottom:16px;padding:12px 14px;background:#0f1419;border-left:3px solid #4a7cff;border-radius:4px}.whatif-block{margin-bottom:16px}.whatif-block-heading{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#4a7cff;font-weight:600;margin-bottom:8px}.impact-list,.bottleneck-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.impact-list li,.bottleneck-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:#d1d5db}.impact-list strong,.bottleneck-list strong{color:#e6e6e6}.impact-note{color:#9ca3b0;font-size:12px}.impact-pill{font-size:11px;padding:2px 8px;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}.impact-pill.impact-affected{background:#f59e0b;color:#1a1f2e}.impact-pill.impact-replaced{background:#ef4444;color:#fff}.impact-pill.impact-new{background:#22c55e;color:#0f1419}.tradeoffs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tradeoff-col{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:10px 12px}.tradeoff-col-heading{font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:6px}.tradeoff-col:nth-child(1) .tradeoff-col-heading{color:#22c55e}.tradeoff-col:nth-child(2) .tradeoff-col-heading{color:#ef4444}.tradeoff-col ul{margin:0;padding-left:18px;font-size:13px;color:#d1d5db}.tradeoff-col li{margin-bottom:4px;line-height:1.45}.tradeoff-col li.muted{color:#6b7280;list-style:none;margin-left:-18px}.header-v2{padding:14px 24px 12px}.header-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.header-top h1{margin:0;font-size:20px;font-weight:600}.header-sub{margin-top:8px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:13px;color:#9ca3b0}.header-design-title{color:#e6e6e6;font-weight:600}.header-dot{color:#4a5568}.header-design-problem{font-style:italic}.header-capacity{margin-top:6px;font-size:12px;color:#7dd3fc;font-family:SF Mono,Menlo,Consolas,monospace;letter-spacing:.2px}.design-picker{position:relative}.design-picker-btn{background:#0f1419;border:1px solid #2a2f3e;color:#e6e6e6;border-radius:6px;padding:8px 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;min-width:200px;justify-content:space-between}.design-picker-btn:hover:not(:disabled){border-color:#4a7cff}.design-picker-btn:disabled{opacity:.6;cursor:not-allowed}.design-picker-caret{color:#9ca3b0;font-size:10px}.design-picker-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:320px;max-width:380px;background:#1a1f2e;border:1px solid #2a2f3e;border-radius:8px;box-shadow:0 12px 28px #00000073;list-style:none;margin:0;padding:6px;z-index:20}.design-picker-menu li{margin:0}.design-picker-item{width:100%;background:transparent;border:0;text-align:left;padding:10px 12px;border-radius:6px;cursor:pointer;color:#e6e6e6;display:flex;flex-direction:column;gap:3px}.design-picker-item:hover,.design-picker-item.selected{background:#12204a}.design-picker-item-title{font-size:13px;font-weight:600}.design-picker-item-problem{font-size:12px;color:#9ca3b0;line-height:1.4}.design-picker-footer{border-top:1px solid #2a2f3e;margin-top:6px;padding-top:6px;text-align:center}.link-btn{background:transparent;border:0;color:#4a7cff;cursor:pointer;font-size:12px;padding:6px 10px}.link-btn:hover{text-decoration:underline}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#080c14b8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}.modal{background:#1a1f2e;border:1px solid #2a2f3e;border-radius:12px;width:min(920px,100%);max-height:90vh;overflow:auto;padding:24px 28px 28px;box-shadow:0 24px 60px #0000008c}.modal-header{display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:18px}.modal-subtitle{margin-top:6px;color:#9ca3b0;font-size:13px;margin-bottom:20px}.btn-icon{background:transparent;border:0;color:#9ca3b0;cursor:pointer;font-size:16px;padding:4px 8px;border-radius:6px}.btn-icon:hover{color:#e6e6e6;background:#0f1419}.design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.design-card{background:#0f1419;border:1px solid #2a2f3e;border-radius:8px;padding:16px;cursor:pointer;color:#e6e6e6;text-align:left;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}.design-card:hover{border-color:#4a7cff;transform:translateY(-1px)}.design-card.selected{border-color:#4a7cff;box-shadow:0 0 0 1px #4a7cff inset}.design-card-title{font-size:14px;font-weight:600}.design-card-problem{font-size:13px;color:#9ca3b0;line-height:1.5;flex:1}.design-card-source{font-size:11px;color:#4a7cff;font-family:SF Mono,Menlo,Consolas,monospace}.diagram-view{width:100%;display:flex;flex-direction:column;align-items:center}.mermaid-container{background:#fff;border-radius:8px;padding:24px;width:100%;position:relative;overflow:visible;display:flex;justify-content:center}.mermaid-container .node.is-selected>rect,.mermaid-container .node.is-selected>polygon,.mermaid-container .node.is-selected>circle,.mermaid-container .node.is-selected>ellipse,.mermaid-container .node.is-selected>path{stroke:#4a7cff;stroke-width:3px}.mermaid-container .node.util-low>rect,.mermaid-container .node.util-low>polygon,.mermaid-container .node.util-low>circle,.mermaid-container .node.util-low>ellipse,.mermaid-container .node.util-low>path{stroke:#22c55e;stroke-width:2px}.mermaid-container .node.util-mid>rect,.mermaid-container .node.util-mid>polygon,.mermaid-container .node.util-mid>circle,.mermaid-container .node.util-mid>ellipse,.mermaid-container .node.util-mid>path{stroke:#f59e0b;stroke-width:2.5px;filter:drop-shadow(0 0 4px rgba(245,158,11,.55))}.mermaid-container .node.util-high>rect,.mermaid-container .node.util-high>polygon,.mermaid-container .node.util-high>circle,.mermaid-container .node.util-high>ellipse,.mermaid-container .node.util-high>path{stroke:#ef4444;stroke-width:3px;animation:util-high-pulse 1.4s ease-in-out infinite}@keyframes util-high-pulse{0%,to{filter:drop-shadow(0 0 3px rgba(239,68,68,.6))}50%{filter:drop-shadow(0 0 10px rgba(239,68,68,.95))}}.mermaid-container .node.flow-active>rect,.mermaid-container .node.flow-active>polygon,.mermaid-container .node.flow-active>circle,.mermaid-container .node.flow-active>ellipse,.mermaid-container .node.flow-active>path{stroke:#4a7cff;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(74,124,255,.9))}.mermaid-container .node.dropping>rect,.mermaid-container .node.dropping>polygon,.mermaid-container .node.dropping>circle,.mermaid-container .node.dropping>ellipse,.mermaid-container .node.dropping>path{animation:drop-pulse .7s ease-out}@keyframes drop-pulse{0%{stroke:#ef4444;stroke-width:4px;filter:drop-shadow(0 0 14px rgba(239,68,68,.95))}to{stroke:#2a2f3e;stroke-width:1px;filter:none}}.queue-badge{position:absolute;transform:translate(-50%,-100%);background:#ef4444;color:#fff;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:10px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #00000059}.sim-token-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.sim-token{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#7dd3fc,#0ea5e9 70%,#0ea5e900);box-shadow:0 0 6px #0ea5e9e6;transform:translate(-9999px,-9999px);transition:opacity .15s;will-change:transform}.sim-token.dropped{background:radial-gradient(circle,#fca5a5,#ef4444 70%,#ef444400);box-shadow:0 0 8px #ef4444e6;opacity:.7}.sim-control{width:100%;max-width:720px;margin-top:20px;align-self:flex-start;background:#1a1f2e;border:1px solid #2a2f3e;border-radius:8px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}.sim-control-header{display:flex;align-items:center;justify-content:space-between}.sim-control-title{font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#4a7cff}.sim-status{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#9ca3b0}.sim-status-running{color:#22c55e}.sim-status-done{color:#7dd3fc}.sim-status-error{color:#ef4444}.op-picker{display:flex;flex-direction:column;gap:6px}.op-picker-label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:#9ca3b0;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.op-picker-label select{background:#0f1419;border:1px solid #2a2f3e;color:#e6e6e6;font-size:13px;padding:8px 10px;border-radius:6px}.op-picker-desc{font-size:12px;color:#9ca3b0;line-height:1.4}.op-picker-empty{color:#9ca3b0;font-size:12px;font-style:italic}.sim-control-row{display:flex;gap:12px}.sim-control-row-inline{flex-wrap:wrap}.sim-slider{flex:1;display:flex;flex-direction:column;gap:6px}.sim-slider-label{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#9ca3b0;font-weight:600}.sim-slider-value{color:#e6e6e6;font-family:SF Mono,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.4px}.sim-slider input[type=range]{width:100%;accent-color:#4a7cff}.sim-segmented{display:flex;flex-direction:column;gap:6px;flex:1;min-width:180px}.sim-segmented-label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#9ca3b0;font-weight:600}.sim-segmented-btns{display:flex;gap:0;border:1px solid #2a2f3e;border-radius:6px;overflow:hidden}.sim-seg-btn{flex:1;background:#0f1419;border:0;color:#d1d5db;padding:7px 10px;font-size:12px;cursor:pointer;border-right:1px solid #2a2f3e}.sim-seg-btn:last-child{border-right:none}.sim-seg-btn:hover:not(:disabled){color:#e6e6e6;background:#12204a}.sim-seg-btn.active{background:#4a7cff;color:#fff;font-weight:600}.sim-seg-btn:disabled{opacity:.5;cursor:not-allowed}.sim-control-buttons{justify-content:flex-start}.btn-primary{background:#22c55e;border:0;color:#0f1419;font-weight:600;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:13px}.btn-primary:hover:not(:disabled){background:#16a34a;color:#fff}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:#ef4444;border:0;color:#fff;font-weight:600;padding:10px 20px;border-radius:6px;cursor:pointer;font-size:13px}.btn-danger:hover{background:#dc2626}.sim-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:4px;border-top:1px solid #2a2f3e;padding-top:12px}.sim-stat{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}.sim-stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#9ca3b0;font-weight:600}.sim-stat-value{font-size:18px;font-weight:700;font-family:SF Mono,Menlo,Consolas,monospace;color:#e6e6e6;letter-spacing:.3px}.tabbed-header-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.kind-pill{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#4a7cff;background:#12204a;padding:3px 8px;border-radius:10px;font-weight:600}.live-stats-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;background:#0f1419;border:1px solid #2a2f3e;border-radius:6px}.live-stat{display:flex;gap:4px;align-items:baseline;font-size:12px}.live-stat-label{text-transform:uppercase;font-size:10px;letter-spacing:.4px;color:#9ca3b0;font-weight:600}.live-stat-value{color:#e6e6e6;font-family:SF Mono,Menlo,Consolas,monospace;font-weight:600}.why-block{margin-bottom:16px}.why-btn{margin-bottom:10px}.why-body{padding:10px 12px;background:#0f1419;border-left:3px solid #4a7cff;border-radius:4px;font-size:13px;line-height:1.55;color:#d1d5db}.why-body p{margin:0 0 8px}.why-body p:last-child{margin-bottom:0}.why-body ul,.why-body ol{margin:4px 0 8px;padding-left:20px}.swap-tab{display:flex;flex-direction:column;gap:14px}.swap-hint{font-size:12px;color:#9ca3b0;padding:10px 12px;background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;line-height:1.5}.swap-hint strong{color:#e6e6e6;font-family:SF Mono,Menlo,Consolas,monospace}.swap-list{display:flex;flex-direction:column;gap:10px}.swap-card{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:12px 14px}.swap-card.pending{border-color:#4a7cff}.swap-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}.swap-card-name{font-size:14px;font-weight:600;color:#e6e6e6}.before-after{background:#0f1419;border:1px solid #2a2f3e;border-radius:6px;padding:10px 12px;overflow-x:auto}.before-after table{width:100%;border-collapse:collapse;font-size:12px}.before-after th{text-align:left;text-transform:uppercase;letter-spacing:.4px;font-size:10px;color:#9ca3b0;padding:4px 8px;border-bottom:1px solid #2a2f3e}.before-after td{padding:6px 8px;border-bottom:1px solid #1a1f2e;font-family:SF Mono,Menlo,Consolas,monospace;color:#e6e6e6}.before-after tr:last-child td{border-bottom:none}.ba-label{text-transform:uppercase;font-size:10px;letter-spacing:.4px;color:#9ca3b0;font-family:inherit!important;font-weight:600}.delta-good{color:#22c55e}.delta-bad{color:#ef4444}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#12204a;border:1px solid #4a7cff;color:#e6e6e6;padding:10px 16px;border-radius:8px;font-size:13px;box-shadow:0 12px 28px #0000008c;z-index:200;animation:toast-in .2s ease-out}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.details-empty{padding:24px}.step-player{margin-top:16px;padding:16px;background:#131826;border:1px solid #24304d;border-radius:10px;color:#e6e6e6}.step-player-empty{padding:24px}.sp-header{margin-bottom:14px}.sp-op-select{display:flex;align-items:center;gap:10px}.sp-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7c8aab;font-weight:600}.sp-op-select select{flex:1;padding:8px 10px;background:#0f1419;border:1px solid #2a3552;color:#e6e6e6;border-radius:6px;font-size:13px;cursor:pointer}.sp-op-desc{margin-top:6px;font-size:12.5px;color:#9aa7c3;line-height:1.45}.sp-transport{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0;border-top:1px solid #1d2640;border-bottom:1px solid #1d2640}.sp-btn{padding:6px 12px;background:#1a2238;border:1px solid #2a3552;color:#cfd8ec;border-radius:6px;font-size:12.5px;cursor:pointer;font-family:inherit}.sp-btn:hover:not(:disabled){background:#24304d}.sp-btn:disabled{opacity:.35;cursor:not-allowed}.sp-btn-primary{background:#22c55e;border-color:#16a34a;color:#0f1419;font-weight:600}.sp-btn-primary:hover:not(:disabled){background:#16a34a;color:#fff}.sp-btn-ghost{background:transparent}.sp-speed{display:flex;align-items:center;gap:6px;margin-left:6px}.sp-chip{padding:4px 8px;background:transparent;border:1px solid #2a3552;color:#9aa7c3;border-radius:999px;font-size:11px;cursor:pointer;font-family:inherit}.sp-chip-active{background:#4a7cff;border-color:#4a7cff;color:#fff}.sp-progress{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:180px}.sp-progress-label{font-size:11px;color:#7c8aab;white-space:nowrap}.sp-progress-bar{flex:1;height:4px;background:#1d2640;border-radius:2px;overflow:hidden}.sp-progress-fill{height:100%;background:linear-gradient(90deg,#4a7cff,#22c55e);transition:width .3s ease}.sp-dots{display:flex;gap:6px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid #1d2640}.sp-dot{width:26px;height:26px;border-radius:50%;border:1px solid #2a3552;background:transparent;color:#7c8aab;font-size:11px;cursor:pointer;font-family:inherit;transition:transform .15s,background .15s,color .15s}.sp-dot:hover{background:#1a2238;color:#cfd8ec}.sp-dot-past{background:#1a2238;color:#7dd3fc;border-color:#334a7a}.sp-dot-active{background:#4a7cff!important;color:#fff!important;border-color:#4a7cff!important;transform:scale(1.12);box-shadow:0 0 0 3px #4a7cff40}.sp-step{padding-top:14px}.sp-step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}.sp-step-chip{padding:3px 10px;background:#1a2a4a;color:#7dd3fc;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em}.sp-step-title{margin:0;font-size:15px;font-weight:600;color:#e6e6e6;flex:1;min-width:200px}.sp-inspect-btn{padding:4px 10px;background:transparent;border:1px solid #2a3552;color:#7dd3fc;border-radius:6px;cursor:pointer;font-size:11.5px;font-family:inherit}.sp-inspect-btn:hover{background:#1a2a4a}.sp-action{margin:8px 0 12px;font-size:13.5px;line-height:1.55;color:#c5cfe3}.sp-payload{margin:10px 0;padding:10px 12px;border-radius:8px;border:1px solid #24304d;background:#0b1020}.sp-payload-in{border-left:3px solid #7dd3fc}.sp-payload-out{border-left:3px solid #22c55e}.sp-payload-head{display:flex;align-items:center;gap:8px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7c8aab;font-weight:600;margin-bottom:6px}.sp-payload-arrow{color:#7dd3fc;font-size:13px}.sp-payload-out .sp-payload-arrow{color:#22c55e}.sp-payload-body{margin:0;font-size:12px;color:#cfd8ec;white-space:pre-wrap;word-break:break-word;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;max-height:180px;overflow:auto}.sp-code{margin:10px 0;padding:10px 12px;border-radius:8px;background:#05080f;border:1px solid #1d2640}.sp-code-label{font-size:11px;color:#7c8aab;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:6px}.sp-code pre{margin:0;font-size:12px;color:#e4e9f5;white-space:pre-wrap;word-break:break-word;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.sp-state{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin:10px 0}.sp-state-col{padding:10px 12px;border-radius:8px;background:#0b1020;border:1px solid #24304d}.sp-state-col-after{border-color:#22c55e33;background:#0b1a12}.sp-state-label{font-size:11px;color:#7c8aab;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:6px}.sp-state-col pre{margin:0;font-size:11.5px;color:#cfd8ec;white-space:pre-wrap;word-break:break-word;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;max-height:160px;overflow:auto}.sp-state-arrow{align-self:center;color:#4a7cff;font-size:18px;font-weight:700}.sp-decision{margin:10px 0;padding:8px 12px;background:#2a1a0b;border:1px solid #7a3e1d;border-radius:8px;display:flex;gap:10px;align-items:center;font-size:13px}.sp-decision-label{color:#fbbf24;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.sp-decision-value{color:#fcd34d}.sp-note{margin-top:10px;padding:8px 12px;background:#0f1f2a;border-left:3px solid #7dd3fc;border-radius:4px;font-size:12.5px;color:#9ed3ea;line-height:1.5}.stress-section{margin-top:14px}.stress-toggle{width:100%;padding:10px 14px;background:#131826;border:1px solid #24304d;border-radius:8px;color:#9aa7c3;text-align:left;font-size:13px;cursor:pointer;font-family:inherit}.stress-toggle:hover{background:#1a2238;color:#cfd8ec}.stress-open .stress-toggle{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent;color:#cfd8ec}.stress-open .sim-control{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.mermaid-container svg{overflow:visible}.mermaid-container path.hld-edge{transition:stroke .2s ease,stroke-width .2s ease,filter .2s ease}.mermaid-container path.edge-active{stroke:#4a7cff!important;stroke-width:3.5px!important;filter:drop-shadow(0 0 6px rgba(74,124,255,.75));animation:edge-dash .9s linear infinite;stroke-dasharray:8 6}.mermaid-container path.edge-active.edge-response{stroke:#22c55e!important;filter:drop-shadow(0 0 6px rgba(34,197,94,.7))}@keyframes edge-dash{to{stroke-dashoffset:-28}}.hld-packet-dot{fill:#4a7cff;stroke:#c7d7ff;stroke-width:2;filter:drop-shadow(0 0 8px rgba(74,124,255,.9))}.hld-packet-response .hld-packet-dot{fill:#22c55e;stroke:#d1fae5;filter:drop-shadow(0 0 8px rgba(34,197,94,.9))}.hld-packet-label-bg{fill:#0b1020;stroke:#4a7cff;stroke-width:1.2;opacity:.95}.hld-packet-label{fill:#e4e9f5;font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:10px;font-weight:600;paint-order:stroke}.hld-packet-arrived .hld-packet-dot{animation:packet-pop .22s ease-out forwards}@keyframes packet-pop{0%{transform:scale(1);opacity:1}60%{transform:scale(1.8);opacity:.8}to{transform:scale(2.4);opacity:0}}.mermaid-container .node.pulse>rect,.mermaid-container .node.pulse>polygon,.mermaid-container .node.pulse>path,.mermaid-container .node.pulse>circle,.mermaid-container .node.pulse>ellipse{animation:node-pulse .8s ease-out;transform-box:fill-box;transform-origin:center}@keyframes node-pulse{0%{filter:drop-shadow(0 0 0 rgba(74,124,255,0));transform:scale(1)}40%{filter:drop-shadow(0 0 14px rgba(74,124,255,.9));transform:scale(1.06)}to{filter:drop-shadow(0 0 0 rgba(74,124,255,0));transform:scale(1)}}.mermaid-container .node.flow-active>rect,.mermaid-container .node.flow-active>polygon,.mermaid-container .node.flow-active>path,.mermaid-container .node.flow-active>circle,.mermaid-container .node.flow-active>ellipse{stroke:#4a7cff!important;stroke-width:3px!important;filter:drop-shadow(0 0 10px rgba(74,124,255,.55))}.sp-banner{margin-top:10px;padding:8px 12px;background:#2a1f08;border:1px solid #7a5a1d;color:#fcd34d;border-radius:6px;font-size:12.5px;line-height:1.5}.diagram-view{display:flex;flex-direction:column;gap:10px;padding:12px;background:#0e1322;border:1px solid #24304d;border-radius:10px}.diagram-legend{display:flex;flex-wrap:wrap;gap:12px;padding:2px 4px;font-size:11px;color:#9aa7c3}.legend-item{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}.legend-swatch{display:inline-block;width:14px;height:10px;border-radius:3px}.diagram-svg-wrap{width:100%;overflow-x:auto;overflow-y:visible;position:relative;background:#0b1020;border-radius:8px;padding:8px 0}.hld-svg{display:block;min-width:100%}.hld-svg .hld-edge{transition:stroke .2s ease,stroke-width .2s ease,filter .2s ease}.hld-svg .hld-edge.edge-active{stroke:#4a7cff;stroke-width:3.5;filter:drop-shadow(0 0 6px rgba(74,124,255,.8));stroke-dasharray:8 6;animation:hld-edge-dash .9s linear infinite}.hld-svg .hld-edge.edge-response{stroke:#22c55e;filter:drop-shadow(0 0 6px rgba(34,197,94,.8))}@keyframes hld-edge-dash{to{stroke-dashoffset:-28}}.hld-node{transition:filter .2s ease}.hld-node:hover .hld-node-shape,.hld-node:hover .hld-cyl>path,.hld-node:hover .hld-cyl>ellipse{filter:brightness(1.25)}.hld-node-kind{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:9px;letter-spacing:.1em;font-weight:700;opacity:.85;pointer-events:none}.hld-node-name{font-size:13px;font-weight:600;pointer-events:none}.hld-node.is-selected .hld-node-shape,.hld-node.is-selected .hld-cyl>path,.hld-node.is-selected .hld-cyl>ellipse{stroke-width:3;filter:drop-shadow(0 0 10px rgba(74,124,255,.65))}.hld-node.flow-active .hld-node-shape,.hld-node.flow-active .hld-cyl>path,.hld-node.flow-active .hld-cyl>ellipse{stroke:#4a7cff!important;stroke-width:3;filter:drop-shadow(0 0 14px rgba(74,124,255,.8))}.hld-node.pulse .hld-node-shape,.hld-node.pulse .hld-cyl>path,.hld-node.pulse .hld-cyl>ellipse{animation:hld-node-pulse .8s ease-out;transform-box:fill-box;transform-origin:center}@keyframes hld-node-pulse{0%{filter:drop-shadow(0 0 0 rgba(74,124,255,0));transform:scale(1)}40%{filter:drop-shadow(0 0 18px rgba(74,124,255,.95));transform:scale(1.06)}to{filter:drop-shadow(0 0 0 rgba(74,124,255,0));transform:scale(1)}}.hld-node.dropping .hld-node-shape,.hld-node.dropping .hld-cyl>path,.hld-node.dropping .hld-cyl>ellipse{stroke:#ef4444!important;filter:drop-shadow(0 0 10px rgba(239,68,68,.85));animation:hld-node-drop .7s ease-out}@keyframes hld-node-drop{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.hld-node.util-low .hld-node-shape{stroke:#22c55e}.hld-node.util-mid .hld-node-shape{stroke:#fbbf24}.hld-node.util-high .hld-node-shape{stroke:#ef4444;animation:hld-node-pulse 1.2s ease-out infinite}.hld-packet{pointer-events:none}.hld-packet-dot{fill:#4a7cff;stroke:#c7d7ff;stroke-width:2;filter:drop-shadow(0 0 10px rgba(74,124,255,.95))}.hld-packet-response .hld-packet-dot{fill:#22c55e;stroke:#d1fae5;filter:drop-shadow(0 0 10px rgba(34,197,94,.95))}.hld-packet-label-bg{fill:#0b1020;stroke:#4a7cff;stroke-width:1.2;opacity:.96}.hld-packet-response .hld-packet-label-bg{stroke:#22c55e}.hld-packet-label{fill:#e4e9f5;font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:10px;font-weight:600}.hld-packet-arrived .hld-packet-dot{animation:hld-packet-pop .3s ease-out forwards}@keyframes hld-packet-pop{0%{r:9;opacity:1}60%{r:18;opacity:.6}to{r:24;opacity:0}}.dp-sparkle{display:inline-block;margin-right:4px;filter:drop-shadow(0 0 6px rgba(250,204,21,.6))}.dp-custom-badge{display:inline-block;margin-left:8px;padding:1px 8px;background:linear-gradient(135deg,#a855f7,#4a7cff);color:#fff;border-radius:999px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle}.design-picker-generate-row{border-bottom:1px solid #24304d;padding:0}.design-picker-generate-btn{width:100%;padding:12px 14px;background:linear-gradient(135deg,#a855f71f,#4a7cff1f);border:none;color:#e6e6e6;font-size:13px;text-align:left;cursor:pointer;font-family:inherit;font-weight:600}.design-picker-generate-btn:hover{background:linear-gradient(135deg,#a855f73d,#4a7cff3d)}.design-card.design-card-generate{background:linear-gradient(135deg,#a855f726,#4a7cff26);border:1.5px dashed #a855f7}.design-card.design-card-generate:hover{background:linear-gradient(135deg,#a855f747,#4a7cff47)}.design-card.is-custom{border-color:#a855f7}.modal.modal-sm{max-width:640px}.generate-textarea{width:100%;margin-top:8px;padding:12px;background:#0b1020;border:1px solid #2a3552;color:#e6e6e6;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;min-height:100px}.generate-textarea:focus{outline:none;border-color:#4a7cff;box-shadow:0 0 0 3px #4a7cff33}.generate-textarea:disabled{opacity:.6}.generate-examples{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}.generate-examples-label{font-size:11px;color:#7c8aab;text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-right:4px}.generate-example-chip{padding:4px 10px;background:#1a2238;border:1px solid #2a3552;color:#9aa7c3;border-radius:999px;font-size:11.5px;cursor:pointer;font-family:inherit}.generate-example-chip:hover:not(:disabled){background:#24304d;color:#cfd8ec}.generate-error{margin-top:10px;padding:8px 12px;background:#2a0f0f;border:1px solid #7a1d1d;color:#fca5a5;border-radius:6px;font-size:12.5px}.generate-actions{margin-top:14px;display:flex;gap:8px;justify-content:flex-end}.generate-actions .btn-primary{padding:8px 16px;background:linear-gradient(135deg,#a855f7,#4a7cff);border:none;color:#fff;font-weight:600;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px}.generate-actions .btn-primary:disabled{opacity:.4;cursor:not-allowed;background:#2a3552}.generate-actions .btn-secondary{padding:8px 16px;background:transparent;border:1px solid #2a3552;color:#9aa7c3;border-radius:6px;cursor:pointer;font-family:inherit;font-size:13px}.generate-actions .btn-secondary:hover:not(:disabled){background:#1a2238}.generate-actions .btn-secondary:disabled{opacity:.4;cursor:not-allowed}.mode-switch{display:inline-flex;background:#0b1020;border:1px solid #2a3552;border-radius:8px;padding:3px;gap:2px;margin-right:auto;margin-left:16px}.mode-switch-btn{padding:6px 14px;background:transparent;border:none;color:#9aa7c3;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:5px;font-family:inherit;letter-spacing:.02em}.mode-switch-btn:hover:not(.active){color:#cfd8ec}.mode-switch-btn.active{background:linear-gradient(135deg,#4a7cff,#3a63cc);color:#fff;box-shadow:0 1px 4px #4a7cff66}.main-single{display:block;overflow:auto}.dbi-page{padding:20px 24px;max-width:1400px;margin:0 auto;color:#e6e6e6}.dbi-intro{margin-bottom:18px}.dbi-intro h1{margin:0 0 6px;font-size:22px;font-weight:700}.dbi-subtitle{color:#9aa7c3;font-size:13px;line-height:1.55;max-width:780px}.dbi-subtitle em{color:#cfd8ec;font-style:italic}.dbi-group{margin-bottom:18px}.dbi-group-label{font-size:11px;color:#7c8aab;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:8px}.dbi-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-bottom:0}.dbi-tab{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:#131826;border:1px solid #24304d;border-radius:10px;color:#e6e6e6;cursor:pointer;font-family:inherit;text-align:left;transition:background .15s,border-color .15s,transform .15s}.dbi-tab:hover{background:#1a2238;border-color:#334a7a}.dbi-tab.active{background:linear-gradient(135deg,#4a7cff26,#a855f71a);border-color:#4a7cff;box-shadow:0 0 0 2px #4a7cff33}.dbi-tab-label{font-size:14px;font-weight:700;color:#e6e6e6}.dbi-tab-blurb{font-size:11.5px;color:#9aa7c3;line-height:1.45}.dbi-widget-host{background:#0e1322;border:1px solid #24304d;border-radius:12px;padding:0;overflow:hidden}.app-title-btn{background:transparent;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer;letter-spacing:inherit;border-radius:4px;transition:color .15s,text-shadow .15s}.app-title-btn:hover{color:#cfd8ec;text-shadow:0 0 12px rgba(74,124,255,.35)}.app-title-btn:focus-visible{outline:2px solid #4a7cff;outline-offset:3px}.modal.modal-about{max-width:560px;color:#e6e6e6;background:#0b1020;border:1px solid #1d2640;box-shadow:0 10px 40px #00000080,0 0 40px #4a7cff0d}.modal.modal-about .modal-header h2{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:14px;font-weight:500;color:#9aa7c3;letter-spacing:.02em}.about-prompt{color:#22c55e;margin-right:6px}.about-body{padding:4px 22px 20px}.about-hero{padding:14px 0 10px;border-bottom:1px solid #1d2640;margin-bottom:14px}.about-name{font-size:22px;font-weight:700;letter-spacing:-.01em;background:linear-gradient(135deg,#e6e6e6,#9aa7c3);-webkit-background-clip:text;background-clip:text;color:transparent}.about-role{margin-top:2px;font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:11.5px;color:#7dd3fc;letter-spacing:.02em}.about-lede{margin:0 0 14px;font-size:13.5px;line-height:1.65;color:#cfd8ec}.about-lede em{color:#a9b8d6;font-style:italic}.about-stack{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.about-stack .chip{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:10.5px;padding:3px 9px;border:1px solid #24304d;border-radius:4px;background:#0e1322;color:#9aa7c3;letter-spacing:.02em}.about-links{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.about-link{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:transparent;color:#cfd8ec;text-decoration:none;border:1px solid #24304d;border-radius:5px;font-size:12px;font-weight:500;font-family:SFMono-Regular,Consolas,Menlo,monospace;transition:background .12s,border-color .12s,color .12s}.about-link:hover{background:#131826;color:#e6e6e6}.about-link-linkedin:hover{border-color:#0a66c2}.about-link-github:hover{border-color:#6b7280}.about-link-instagram:hover{border-color:#fd1d1d}.about-project{padding-top:14px;border-top:1px dashed #1d2640}.about-section-label{font-family:SFMono-Regular,Consolas,Menlo,monospace;font-size:10.5px;color:#5f6b84;margin-bottom:6px}.about-project p{margin:0;font-size:12.5px;color:#9aa7c3;line-height:1.6}.about-project p em{color:#a9b8d6;font-style:italic}