.security-visualizer{position:relative;min-height:100vh;padding:100px 40px 80px;overflow:hidden}.particle-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.viz-content{position:relative;z-index:1;max-width:1100px;margin:0 auto}.viz-header{text-align:center;margin-bottom:40px}.viz-header h2{font-size:2rem;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--bronze);margin-bottom:8px}.viz-header p{color:var(--text-muted);font-size:1rem}.viz-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:30px}.control-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid var(--border);border-radius:8px;background:var(--black-card);color:var(--text);cursor:pointer;font-family:Inter,sans-serif;font-size:.85rem;font-weight:500;transition:all .2s}.control-btn:hover{border-color:var(--bronze);color:var(--bronze)}.control-btn.primary{background:var(--bronze);color:#000;border-color:var(--bronze)}.control-btn.primary:hover{background:var(--bronze-light)}.elapsed{display:flex;align-items:center;gap:6px;font-family:JetBrains Mono,monospace;color:var(--text-muted);font-size:.85rem;padding:10px 16px;background:var(--black-card);border:1px solid var(--border);border-radius:8px}.speed-timeline{background:var(--black-card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:24px}.timeline-header{display:flex;align-items:center;gap:8px;color:var(--text-muted);font-size:.8rem;margin-bottom:10px}.timeline-bar{display:flex;border-radius:4px;overflow:hidden;height:24px;gap:2px}.timeline-segment{display:flex;align-items:center;justify-content:center;transition:background .3s;border-radius:2px}.timeline-segment.current{animation:segmentPulse 1s ease infinite}@keyframes segmentPulse{0%,to{opacity:1}50%{opacity:.7}}.segment-label{font-family:JetBrains Mono,monospace;font-size:.65rem;color:#000;font-weight:600}.timeline-labels{display:flex;margin-top:6px}.timeline-labels span{font-size:.7rem;color:var(--text-dim);text-align:center;transition:color .2s}.timeline-labels span.active{color:var(--bronze);font-weight:600}.layers-row{display:flex;gap:8px;margin-bottom:24px;overflow-x:auto;padding-bottom:4px}.security-layer{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--black-card);cursor:pointer;transition:all .2s;flex:1;min-width:100px;font-family:Inter,sans-serif}.security-layer:hover{border-color:var(--bronze)}.security-layer.active{border-color:var(--bronze);background:#c9956c1a;box-shadow:0 0 20px #c9956c26}.security-layer.completed{border-color:var(--green)}.layer-icon{position:relative;color:var(--text-muted)}.security-layer.active .layer-icon{color:var(--bronze)}.security-layer.completed .layer-icon{color:var(--green)}.check-icon{position:absolute;bottom:-4px;right:-6px;color:var(--green);background:var(--black-card);border-radius:50%}.layer-label{font-size:.75rem;color:var(--text-muted);font-weight:500}.security-layer.active .layer-label{color:var(--bronze)}.pulse-ring-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.pulse-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:2px solid;border-radius:50%;animation:pulseOut 1.5s ease-out infinite;opacity:0}@keyframes pulseOut{0%{width:30px;height:30px;opacity:.5}to{width:80px;height:80px;opacity:0}}.panel-container{min-height:400px}.panel{background:var(--black-card);border:1px solid var(--border);border-radius:16px;padding:30px;animation:panelIn .3s ease}@keyframes panelIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.panel-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;color:var(--bronze)}.panel-header h3{flex:1;font-size:1.2rem}.panel-timing{font-family:JetBrains Mono,monospace;font-size:.8rem;color:var(--text-dim);padding:4px 10px;background:#c9956c1a;border:1px solid var(--border);border-radius:6px}.scan-area{display:flex;gap:30px;align-items:center}.scan-circle{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.scan-circle svg.scanning{animation:scanRotate 2s linear infinite;color:var(--bronze)}@keyframes scanRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.scan-progress-ring{position:absolute;top:0;left:0;width:100%;height:100%}.scan-progress-ring svg{width:100%;height:100%}.scan-checks{flex:1;display:flex;flex-direction:column;gap:12px}.check-item{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.9rem;transition:color .3s}.check-item.done{color:var(--green)}.fhe-content{display:flex;flex-direction:column;gap:20px}.encryption-flow{display:flex;align-items:center;justify-content:center;gap:16px}.flow-step{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:.85rem;transition:all .3s}.flow-step.active{border-color:var(--bronze);color:var(--text)}.flow-step.highlight.active{background:#c9956c1a;border-color:var(--bronze);color:var(--bronze)}.flow-arrow{color:var(--text-dim)}.fhe-params{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.fhe-params .param{display:flex;justify-content:space-between;padding:8px 12px;background:#0000004d;border-radius:6px;font-size:.8rem}.fhe-params .param span{color:var(--text-muted)}.fhe-params .param code{color:var(--bronze);font-family:JetBrains Mono,monospace}.encryption-stream{overflow:hidden;border:1px solid var(--border);border-radius:8px;padding:12px;background:#00000080;max-height:120px;overflow-y:auto}.cipher-text{display:flex;flex-direction:column;gap:2px;font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--bronze-dark);word-break:break-all}.cipher-line{animation:fadeInLine .3s ease}@keyframes fadeInLine{0%{opacity:0}to{opacity:1}}.zk-content{display:flex;flex-direction:column;gap:20px}.proof-stages{display:flex;flex-direction:column;gap:10px}.proof-stages .stage{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:.85rem;transition:all .3s}.proof-stages .stage.done{border-color:var(--green);color:var(--green)}.proof-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.proof-stats .stat{display:flex;justify-content:space-between;padding:8px 12px;background:#0000004d;border-radius:6px;font-size:.8rem}.proof-stats .stat span{color:var(--text-muted)}.proof-stats .stat code{color:var(--bronze);font-family:JetBrains Mono,monospace}.proof-result{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;font-size:.85rem;animation:fadeIn .3s ease}.proof-result.success{background:#4ade801a;border:1px solid var(--green);color:var(--green)}.chain-content{display:flex;flex-direction:column;gap:20px}.chain-flow{display:flex;align-items:center;justify-content:center;gap:16px}.chain-step{display:flex;align-items:center;gap:8px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);font-size:.85rem;transition:all .3s}.chain-step.active{border-color:var(--bronze);color:var(--text)}.chain-details{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.chain-details .detail{display:flex;justify-content:space-between;padding:8px 12px;background:#0000004d;border-radius:6px;font-size:.8rem}.chain-details .detail span{color:var(--text-muted)}.chain-details .detail code{color:var(--bronze);font-family:JetBrains Mono,monospace}.chain-confirmed{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#4ade801a;border:1px solid var(--green);border-radius:8px;color:var(--green);font-size:.85rem;animation:fadeIn .3s ease}.quantum-content{display:flex;flex-direction:column;gap:20px}.algorithms{display:flex;flex-direction:column;gap:10px}.algo{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:8px;color:var(--text-dim);transition:all .3s}.algo.active{border-color:var(--bronze);color:var(--text)}.algo div{display:flex;flex-direction:column}.algo div strong{font-size:.9rem}.algo div span{font-size:.75rem;color:var(--text-dim)}.quantum-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quantum-stats .stat{display:flex;justify-content:space-between;padding:8px 12px;background:#0000004d;border-radius:6px;font-size:.8rem}.quantum-stats .stat span{color:var(--text-muted)}.quantum-stats .stat code{color:var(--bronze);font-family:JetBrains Mono,monospace}.quantum-badge{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#c9956c1a;border:1px solid var(--bronze);border-radius:8px;color:var(--bronze);font-size:.85rem;animation:fadeIn .3s ease}.decision-content{min-height:200px;display:flex;align-items:center;justify-content:center}.access-granted{text-align:center;animation:grantedIn .5s ease}@keyframes grantedIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.granted-icon{color:var(--green);margin-bottom:16px}.access-granted h2{font-size:2rem;color:var(--green);letter-spacing:4px;margin-bottom:8px}.access-granted p{color:var(--text-muted);margin-bottom:24px}.granted-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.granted-stats>div{display:flex;flex-direction:column;align-items:center;padding:12px;background:#0000004d;border-radius:8px}.granted-stats span{font-size:.7rem;color:var(--text-dim);margin-bottom:4px}.granted-stats strong{color:var(--bronze);font-family:JetBrains Mono,monospace}.decision-pending{text-align:center;color:var(--text-dim)}.pulse-icon{animation:pulse 1s ease infinite;margin-bottom:12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.security-visualizer{padding:80px 16px 60px}.viz-header h2{font-size:1.4rem}.layers-row{gap:6px}.security-layer{min-width:70px;padding:10px 8px}.layer-label{font-size:.65rem}.panel{padding:20px}.fhe-params,.proof-stats,.chain-details,.quantum-stats{grid-template-columns:1fr}.granted-stats{grid-template-columns:repeat(2,1fr)}.scan-area{flex-direction:column}.encryption-flow,.chain-flow{flex-direction:column;gap:8px}.flow-arrow{transform:rotate(90deg)}.viz-controls{flex-wrap:wrap}}
