*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:#0a0e27;color:#e0e6ed;overflow:hidden}#container{display:flex;height:100vh}#sidebar{width:350px;background:#121729;border-right:1px solid #1e2538;overflow-y:auto;display:flex;flex-direction:column}#graph-container{flex:1;position:relative}#svg-container{width:100%;height:100%}.header{padding:24px;border-bottom:1px solid #1e2538}.header h1{font-size:20px;font-weight:600;margin-bottom:8px;color:#fff}.header p{font-size:13px;color:#8b93a6;line-height:1.5}.controls{padding:20px;border-bottom:1px solid #1e2538}.control-group{margin-bottom:16px}.control-group label{display:block;font-size:12px;font-weight:500;color:#8b93a6;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.filter-buttons{display:flex;flex-wrap:wrap;gap:6px}.filter-btn{padding:6px 12px;font-size:11px;border:1px solid #2a3142;background:#1a1f35;color:#8b93a6;border-radius:4px;cursor:pointer;transition:all .2s}.filter-btn:hover{background:#232944;border-color:#3a4152}.filter-btn.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.search-box{width:100%;padding:10px 12px;font-size:13px;background:#1a1f35;border:1px solid #2a3142;border-radius:6px;color:#e0e6ed;outline:none;transition:all .2s}.search-box:focus{border-color:#3b82f6;background:#1e2538}.search-box::placeholder{color:#5a6378}#pattern-details{flex:1;overflow-y:auto;padding:20px}.detail-card{background:#1a1f35;border:1px solid #2a3142;border-radius:8px;padding:20px;margin-bottom:16px}.detail-card h3{font-size:16px;font-weight:600;color:#fff;margin-bottom:8px}.detail-card .short-id{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;background:#3b82f6;color:#fff;border-radius:4px;margin-bottom:12px}.detail-section{margin-bottom:16px}.detail-section:last-child{margin-bottom:0}.detail-section h4{font-size:12px;font-weight:600;color:#8b93a6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.detail-section p,.detail-section ul{font-size:13px;line-height:1.6;color:#b8c0d0}.detail-section ul{list-style:none;padding-left:0}.detail-section li{padding:4px 0 4px 16px;position:relative}.detail-section li:before{content:"•";position:absolute;left:0;color:#3b82f6}.badge{display:inline-block;padding:4px 10px;font-size:11px;font-weight:500;border-radius:4px;margin-right:6px;margin-bottom:6px}.badge.layer{background:#1e3a5f;color:#60a5fa}.badge.compute{background:#3d2e5f;color:#c4b5fd}.badge.state{background:#2e4f3d;color:#86efac}.badge.safety{background:#5f2e2e;color:#fca5a5}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}.metric-card{background:#0f1420;border:1px solid #2a3142;border-radius:6px;padding:12px}.metric-label{font-size:11px;color:#8b93a6;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}.metric-value{font-size:18px;font-weight:600;color:#fff}.empty-state{text-align:center;padding:40px 20px;color:#5a6378}.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.5}.node{cursor:pointer;transition:all .3s}.node circle{stroke:#2a3142;stroke-width:2px}.node:hover circle{stroke-width:3px;filter:brightness(1.2)}.node.selected circle{stroke:#fbbf24;stroke-width:4px}.node.dimmed{opacity:.2}.node text{font-size:11px;font-weight:500;fill:#e0e6ed;pointer-events:none;text-anchor:middle;user-select:none}.link{stroke:#2a3142;stroke-opacity:.6;fill:none;transition:all .3s}.link.dimmed{opacity:.1}.link.highlighted{stroke:#3b82f6;stroke-opacity:1;stroke-width:2px}.link-label{font-size:9px;fill:#5a6378;pointer-events:none;user-select:none}.legend{position:absolute;top:20px;right:20px;background:#121729;border:1px solid #2a3142;border-radius:8px;padding:16px;min-width:200px}.legend h4{font-size:12px;font-weight:600;color:#fff;margin-bottom:12px}.legend-item{display:flex;align-items:center;margin-bottom:8px;font-size:11px;color:#8b93a6}.legend-item:last-child{margin-bottom:0}.legend-color{width:16px;height:16px;border-radius:3px;margin-right:8px;border:1px solid #2a3142}.zoom-controls{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px}.zoom-btn{width:40px;height:40px;background:#121729;border:1px solid #2a3142;border-radius:6px;color:#e0e6ed;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.zoom-btn:hover{background:#1a1f35;border-color:#3b82f6}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0a0e27}::-webkit-scrollbar-thumb{background:#2a3142;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a4152}.accessibility-menu{position:fixed;top:80px;right:20px;width:380px;background:#1a1f35;border:1px solid #2a3142;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.5);z-index:10000;display:none}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#121729;border-bottom:1px solid #2a3142;border-radius:8px 8px 0 0;user-select:none}.menu-title{font-size:16px;font-weight:600;color:#fff;margin:0}.menu-close{background:none;border:none;color:#8895a7;font-size:24px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .2s}.menu-close:hover{color:#e0e6ed}.menu-content{padding:20px;max-height:500px;overflow-y:auto}.menu-section{margin-bottom:20px}.menu-section:last-child{margin-bottom:0}.menu-section h4{font-size:13px;font-weight:600;color:#8895a7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.hotkey-list{list-style:none;padding:0;margin:0}.hotkey-item{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#121729;border:1px solid #1e2538;border-radius:6px;margin-bottom:8px;transition:background .2s,border-color .2s}.hotkey-item:hover{background:#1a1f35;border-color:#2a3142}.hotkey-item:last-child{margin-bottom:0}.hotkey-keys{font-family:SF Mono,Monaco,Inconsolata,Courier New,monospace;font-size:12px;color:#3b82f6;background:#0a0e27;padding:4px 8px;border-radius:4px;border:1px solid #1e2538;white-space:nowrap;font-weight:500}.hotkey-description{font-size:13px;color:#8895a7;margin-left:12px;flex:1;text-align:right}.notification-container{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:20000;display:flex;flex-direction:column;gap:8px;pointer-events:none}.notification{display:flex;align-items:center;gap:12px;background:#1a1f35;border:1px solid #2a3142;border-radius:8px;padding:12px 16px;min-width:300px;max-width:500px;box-shadow:0 4px 16px rgba(0,0,0,.4);opacity:0;transform:translateY(-20px);transition:all .3s ease;pointer-events:all}.notification.show{opacity:1;transform:translateY(0)}.notification.hide{opacity:0;transform:translateY(-20px)}.notification-icon{font-size:18px;font-weight:700;flex-shrink:0}.notification-success{border-left:3px solid #10b981}.notification-success .notification-icon{color:#10b981}.notification-error{border-left:3px solid #ef4444}.notification-error .notification-icon{color:#ef4444}.notification-warning{border-left:3px solid #f59e0b}.notification-warning .notification-icon{color:#f59e0b}.notification-info{border-left:3px solid #3b82f6}.notification-info .notification-icon{color:#3b82f6}.notification-message{flex:1;font-size:14px;color:#e0e6ed;line-height:1.4}.notification-close{background:none;border:none;color:#8895a7;font-size:20px;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color .2s;flex-shrink:0}.notification-close:hover{color:#e0e6ed}.node-circle.keyboard-focused{stroke:#3b82f6;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(59,130,246,.6))}button:focus-visible,input:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}