.viz-container{max-width:1100px;margin:0 auto} .viz-header{text-align:center;margin-bottom:40px} .viz-header h1{font-size:2.5rem;margin-bottom:10px;background:linear-gradient(90deg,#34d399,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .subtitle{color:#888;font-size:1.1rem} h2{font-size:1.5rem;color:#fff;margin-bottom:12px} h4{font-size:.95rem;color:#ccc;margin:16px 0 8px} .section-desc{color:#888;margin-bottom:20px;line-height:1.6} .overview-section{margin-bottom:50px} .overview-card{background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(52,211,153,.03));border:1px solid rgba(52,211,153,.3);border-radius:16px;padding:24px 28px;font-size:1.05rem;line-height:1.8;color:#ccc} .overview-card strong{color:#fff} .interactive-section{margin-bottom:50px} .step-indicator{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:center} .step-pill{padding:6px 14px;border-radius:20px;font-size:.8rem;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1);color:#888;cursor:pointer;transition:all .3s} .step-pill:hover{border-color:rgba(52,211,153,.3);color:#ccc} .step-pill.active{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.5);color:#34d399;font-weight:600} .step-counter{text-align:center;color:#34d399;font-size:.9rem;font-weight:600;margin-bottom:20px;font-family:monospace} .handshake-columns{display:grid;grid-template-columns:1fr 120px 1fr;gap:16px;margin-bottom:24px;min-height:200px} .hs-party{background:rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;transition:all .4s} .client-party{border-color:rgba(96,165,250,.2);background:rgba(96,165,250,.05)} .server-party{border-color:rgba(52,211,153,.2);background:rgba(52,211,153,.05)} .hs-party.active-party.client-party{border-color:rgba(96,165,250,.6);background:rgba(96,165,250,.15);box-shadow:0 0 20px rgba(96,165,250,.15)} .hs-party.active-party.server-party{border-color:rgba(52,211,153,.6);background:rgba(52,211,153,.15);box-shadow:0 0 20px rgba(52,211,153,.15)} .hs-party.connected{border-color:rgba(52,211,153,.5);box-shadow:0 0 16px rgba(52,211,153,.12)} .party-header{font-weight:700;font-size:1rem;margin-bottom:6px;color:#fff} .party-state{font-family:monospace;font-size:.75rem;color:#fbbf24;margin-bottom:12px;padding:3px 8px;background:rgba(251,191,36,.1);border-radius:6px;display:inline-block} .party-details{font-size:.85rem;color:#aaa;line-height:1.6} .party-details ul,.party-details ol{margin:6px 0;padding-left:18px} .party-details li{margin-bottom:3px} .party-details code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px;font-size:.8rem;color:#34d399} .hs-center-lane{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative} .lane-line{position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.06)} .arrow-container{position:relative;z-index:1;width:100%} .hs-arrow{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;border-radius:8px;font-size:.7rem;font-family:monospace;animation:arrowFadeIn .5s ease-out;flex-direction:column;text-align:center} .hs-arrow.plaintext{background:rgba(96,165,250,.15);border:1px solid rgba(96,165,250,.3);color:#93c5fd} .hs-arrow.encrypted{background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3);color:#86efac} .arrow-label{font-size:.65rem;word-break:break-word;line-height:1.3} .arrow-graphic{font-size:1.2rem} @keyframes arrowFadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} .message-detail-box{background:rgba(0,0,0,.3);border:1px solid rgba(52,211,153,.2);border-radius:14px;padding:20px 24px;margin-bottom:20px} .detail-title{font-size:1.1rem;font-weight:700;color:#34d399;margin-bottom:12px} .detail-body{color:#bbb;font-size:.9rem;line-height:1.7} .detail-body ul,.detail-body ol{margin:8px 0;padding-left:20px} .detail-body li{margin-bottom:5px} .detail-body strong{color:#fff} .detail-body code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px;font-size:.82rem;color:#34d399} .stepper-controls{display:flex;gap:12px;justify-content:center} .step-btn{padding:10px 24px;border-radius:10px;font-size:.9rem;font-weight:600;cursor:pointer;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.1);color:#34d399;transition:all .2s} .step-btn:hover:not(:disabled){background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.6)} .step-btn:disabled{opacity:.3;cursor:default} .step-btn.primary{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.5)} .step-btn.primary:hover{background:rgba(52,211,153,.3)} .comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px} .comparison-col{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px;overflow:hidden} .comparison-header{text-align:center;font-weight:700;font-size:1rem;padding:10px;border-radius:8px;margin-bottom:16px} .comparison-header.tls12{background:rgba(239,68,68,.15);color:#fca5a5} .comparison-header.tls13{background:rgba(52,211,153,.15);color:#86efac} .comparison-steps{margin-bottom:12px} .comp-step{margin-bottom:14px;padding-left:12px;border-left:2px solid rgba(255,255,255,.1)} .comp-step.data-step{border-left-color:rgba(168,85,247,.4)} .comp-label{display:inline-block;font-size:.7rem;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .comp-msgs{display:flex;flex-direction:column;gap:4px} .comp-msg{font-size:.78rem;font-family:monospace;padding:4px 8px;border-radius:6px;line-height:1.4} .right-msg{background:rgba(96,165,250,.1);color:#93c5fd} .left-msg{background:rgba(52,211,153,.1);color:#86efac} .data-msg{background:rgba(168,85,247,.1);color:#d8b4fe} .comp-total{text-align:center;font-size:.9rem;color:#888;padding:10px;border-top:1px solid rgba(255,255,255,.06)} .comp-total strong{color:#fff} .highlight-total{color:#34d399} .highlight-total strong{color:#34d399} .latency-calc{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px} .calc-input-group{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap} .calc-input-group label{color:#aaa;font-size:.9rem;font-weight:600;white-space:nowrap} .calc-input-group input[type=range]{flex:1;min-width:200px;accent-color:#34d399} .calc-value{color:#34d399;font-weight:700;font-family:monospace;font-size:1rem;min-width:60px} .calc-results{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px} .calc-result-card{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;text-align:center} .calc-result-card.highlight-calc{border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.08)} .calc-result-card.zerort-calc{border-color:rgba(168,85,247,.4);background:rgba(168,85,247,.08)} .calc-protocol{font-size:.8rem;color:#888;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px} .calc-time{font-size:1.5rem;font-weight:700;color:#fff;font-family:monospace;margin-bottom:4px} .highlight-calc .calc-time{color:#34d399} .zerort-calc .calc-time{color:#c084fc} .calc-formula{font-size:.75rem;color:#666;font-family:monospace} .calc-savings{color:#888;font-size:.88rem;line-height:1.6;padding:12px 16px;background:rgba(52,211,153,.05);border-radius:10px;border-left:3px solid rgba(52,211,153,.3)} .calc-savings strong{color:#34d399} .cipher-suite-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px} .cipher-card{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;cursor:pointer;transition:all .2s;text-align:left} .cipher-card:hover{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.05)} .cipher-card.active-cipher{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.1);box-shadow:0 0 12px rgba(52,211,153,.1)} .cipher-name{font-family:monospace;font-size:.78rem;color:#fff;font-weight:600;margin-bottom:4px;word-break:break-all} .cipher-tag{font-size:.7rem;color:#888} .active-cipher .cipher-tag{color:#34d399} .cipher-detail-panel{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px 24px} .cipher-detail-header{font-family:monospace;font-size:1rem;font-weight:700;color:#fbbf24;margin-bottom:16px} .cipher-components{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px} .cipher-component{background:rgba(0,0,0,.2);border-radius:8px;padding:10px 14px} .comp-label-text{font-size:.75rem;color:#666;display:block;margin-bottom:2px} .comp-value{font-size:.88rem;color:#fff;font-weight:600} .cipher-explanation{color:#aaa;font-size:.88rem;line-height:1.7} .cipher-explanation strong{color:#fff} .cipher-explanation sup{font-size:.65em} .rtt-toggle-container{display:flex;gap:8px;margin-bottom:20px;justify-content:center} .rtt-toggle-btn{padding:8px 20px;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.2);color:#888;transition:all .2s} .rtt-toggle-btn:hover{border-color:rgba(52,211,153,.3);color:#ccc} .rtt-toggle-btn.active{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.5);color:#34d399} .zero-rtt-viz{min-height:200px} .rtt-flow{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:24px;animation:arrowFadeIn .3s ease-out} .rtt-flow.hidden{display:none} .rtt-flow-title{font-weight:700;color:#fff;font-size:1rem;margin-bottom:16px;text-align:center} .rtt-flow-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:16px} .rtt-step{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;padding:12px;background:rgba(0,0,0,.15);border-radius:10px} .rtt-step.zero-rtt-highlight{background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3)} .rtt-client-side{font-size:.8rem;color:#93c5fd;text-align:right} .rtt-server-side{font-size:.8rem;color:#86efac;text-align:left} .rtt-arrow{font-size:.75rem;font-family:monospace;white-space:nowrap;padding:4px 10px;border-radius:6px;text-align:center;min-width:100px} .rtt-arrow.right-arrow{background:rgba(96,165,250,.15);color:#93c5fd} .rtt-arrow.left-arrow{background:rgba(52,211,153,.15);color:#86efac} .rtt-arrow.zero-rtt-arrow{background:rgba(168,85,247,.15);color:#d8b4fe} .rtt-arrow strong{color:#d8b4fe} .rtt-note{font-size:.85rem;color:#888;line-height:1.6;padding:12px 16px;border-radius:10px;background:rgba(0,0,0,.15)} .rtt-note strong{color:#fff} .rtt-note.rtt-warning{border-left:3px solid rgba(239,68,68,.5);background:rgba(239,68,68,.05)} .rtt-warning strong{color:#fca5a5} .cert-chain{display:flex;flex-direction:column;align-items:center;gap:0;margin-bottom:24px} .cert-node{background:rgba(0,0,0,.2);border:2px solid rgba(255,255,255,.1);border-radius:14px;padding:18px 24px;width:100%;max-width:500px;text-align:center;transition:all .3s} .cert-node:hover{border-color:rgba(52,211,153,.3)} .root-cert{border-color:rgba(168,85,247,.3);background:rgba(168,85,247,.05)} .intermediate-cert{border-color:rgba(96,165,250,.3);background:rgba(96,165,250,.05)} .leaf-cert{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.05)} .cert-badge-label{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em;margin-bottom:8px;text-transform:uppercase} .root-cert .cert-badge-label{background:rgba(168,85,247,.2);color:#d8b4fe} .intermediate-cert .cert-badge-label{background:rgba(96,165,250,.2);color:#93c5fd} .leaf-cert .cert-badge-label{background:rgba(52,211,153,.2);color:#86efac} .cert-title{font-weight:700;color:#fff;font-size:1rem;margin-bottom:6px} .cert-info{font-size:.78rem;color:#888;font-family:monospace;line-height:1.5} .cert-chain-arrow{color:#555;font-size:1.1rem;padding:4px 0;text-align:center} .chain-explanation{background:rgba(0,0,0,.15);border-radius:12px;padding:16px 20px;color:#aaa;font-size:.88rem;line-height:1.7} .chain-explanation strong{color:#fff} .kex-visualization{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;margin-bottom:24px} .kex-party{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px} .kex-party h4{color:#fff;margin:0 0 12px;text-align:center} .kex-step{font-size:.82rem;color:#aaa;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.5} .kex-step:last-child{border-bottom:none} .kex-step code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px;font-size:.78rem;color:#34d399} .kex-step.send-step{color:#93c5fd} .kex-step.derive-step{color:#86efac;font-weight:600} .kex-middle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:140px} .kex-arrow-right,.kex-arrow-left{font-size:.8rem;font-family:monospace;padding:6px 12px;border-radius:6px} .kex-arrow-right{background:rgba(96,165,250,.15);color:#93c5fd} .kex-arrow-left{background:rgba(52,211,153,.15);color:#86efac} .kex-shared{font-size:.78rem;font-family:monospace;padding:8px 12px;border-radius:8px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:#fbbf24;text-align:center} .kex-shared code{font-size:.75rem;color:#fbbf24;background:none;padding:0} .kex-note{font-size:.72rem;color:#666;text-align:center;line-height:1.5;max-width:160px} .kex-curves{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px} .curve-card{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:18px} .curve-card h4{color:#fff;margin:0 0 8px} .curve-card p{color:#aaa;font-size:.85rem;line-height:1.6;margin:0} .curve-card strong{color:#fff} .kex-key-derivation{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:20px} .kex-key-derivation h4{color:#fff;margin:0 0 8px} .kex-key-derivation p{color:#aaa;font-size:.88rem;line-height:1.6;margin-bottom:16px} .kex-key-derivation strong{color:#fff} .kex-key-derivation code{background:rgba(0,0,0,.3);padding:1px 5px;border-radius:3px;font-size:.82rem;color:#34d399} .key-tree{display:flex;flex-direction:column;align-items:center;gap:4px} .key-node{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);border-radius:8px;padding:8px 18px;font-family:monospace;font-size:.82rem;color:#86efac;font-weight:600} .key-branch{color:#555;font-size:.85rem} .key-leaves{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .key-leaf{background:rgba(96,165,250,.1);border:1px solid rgba(96,165,250,.3);border-radius:8px;padding:6px 14px;font-family:monospace;font-size:.72rem;color:#93c5fd} .fs-comparison{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px} .fs-card{border-radius:14px;padding:20px;border:1px solid rgba(255,255,255,.1)} .fs-bad{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.2)} .fs-good{background:rgba(52,211,153,.05);border-color:rgba(52,211,153,.2)} .fs-card h4{color:#fff;margin:0 0 12px} .fs-flow{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .fs-step{font-size:.82rem;color:#aaa;padding:8px 12px;background:rgba(0,0,0,.15);border-radius:8px;line-height:1.5} .fs-step strong{color:#fff} .fs-step.fs-danger{border-left:3px solid #ef4444;color:#fca5a5} .fs-step.fs-safe{border-left:3px solid #34d399;color:#86efac} .fs-verdict{font-size:.85rem;font-weight:700;padding:8px 12px;border-radius:8px;text-align:center} .fs-verdict.bad{background:rgba(239,68,68,.1);color:#fca5a5} .fs-verdict.good{background:rgba(52,211,153,.1);color:#86efac} .fs-explanation{background:rgba(0,0,0,.15);border-radius:12px;padding:16px 20px;color:#aaa;font-size:.88rem;line-height:1.7} .fs-explanation strong{color:#fff} .attacks-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .attack-card{background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px} .attack-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px;flex-wrap:wrap} .attack-header h4{color:#fff;margin:0;font-size:.9rem} .attack-status{font-size:.65rem;font-weight:700;padding:3px 8px;border-radius:6px;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em} .attack-status.mitigated{background:rgba(52,211,153,.15);color:#86efac} .attack-status.warning{background:rgba(251,191,36,.15);color:#fbbf24} .attack-status.info{background:rgba(96,165,250,.15);color:#93c5fd} .attack-card p{color:#888;font-size:.82rem;line-height:1.6;margin:0} .attack-card strong{color:#ccc} .removed-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .removed-item{background:rgba(0,0,0,.2);border:1px solid rgba(239,68,68,.15);border-radius:12px;padding:16px;border-left:3px solid rgba(239,68,68,.4)} .removed-feature{font-weight:700;color:#fca5a5;font-size:.9rem;margin-bottom:4px} .removed-reason{color:#888;font-size:.82rem;line-height:1.5} .viz-footer{text-align:center;color:#666;font-size:.9rem;padding:20px 0;border-top:1px solid rgba(255,255,255,.1);margin-bottom:30px} .share-buttons{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:30px} .share-buttons span{color:#666} .share-btn{padding:8px 16px;border-radius:8px;background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.3);color:#34d399;font-size:.85rem;font-weight:600;transition:all .2s;text-decoration:none} .share-btn:hover{background:rgba(52,211,153,.2);border-color:rgba(52,211,153,.5)} @media(max-width:768px){ .handshake-columns{grid-template-columns:1fr;gap:12px} .hs-center-lane{order:1;flex-direction:row;padding:12px 0} .lane-line{display:none} .client-party{order:0} .server-party{order:2} .comparison-grid{grid-template-columns:1fr} .calc-results{grid-template-columns:1fr} .cipher-suite-list{grid-template-columns:1fr} .cipher-components{grid-template-columns:1fr} .kex-visualization{grid-template-columns:1fr} .kex-curves{grid-template-columns:1fr} .fs-comparison{grid-template-columns:1fr} .attacks-grid{grid-template-columns:1fr} .removed-grid{grid-template-columns:1fr} .rtt-step{grid-template-columns:1fr;text-align:center} .rtt-client-side,.rtt-server-side{text-align:center} .step-indicator{gap:4px} .step-pill{font-size:.7rem;padding:4px 8px} .viz-header h1{font-size:1.8rem} .key-leaves{flex-direction:column;align-items:center} }{}