.diagram-container[data-v-7df98a0a]{width:100%;margin:0 auto;padding:1rem}.controls[data-v-7df98a0a]{display:flex;gap:12px;align-items:center;margin-bottom:1rem;padding:12px;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.controls label[data-v-7df98a0a]{font-weight:500}.controls select[data-v-7df98a0a]{padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px}.controls button[data-v-7df98a0a]{padding:8px 16px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s}.controls button[data-v-7df98a0a]:hover:not(:disabled){background:#2563eb}.controls button[data-v-7df98a0a]:disabled{background:#cbd5e1;cursor:not-allowed}.network-svg[data-v-7df98a0a]{width:100%;height:auto;background:#fff;border-radius:10px;box-shadow:0 2px 8px #00000014;border:1px solid #e2e8f0}.network-svg g.active[data-v-7df98a0a]{filter:drop-shadow(0 0 8px rgba(34,197,94,.4))}.network-svg g.highlighted rect[data-v-7df98a0a]{transition:fill .3s ease}.clickable-button[data-v-7df98a0a]{cursor:pointer}.clickable-button:not(.disabled):hover rect[data-v-7df98a0a]{filter:brightness(1.1)}.clickable-button.disabled[data-v-7df98a0a]{cursor:not-allowed;opacity:.6}.info-text[data-v-7df98a0a]{color:#475569;font-size:.95rem;font-style:italic}.status-text[data-v-7df98a0a]{margin-top:1rem;padding:12px 16px;background:#f0f9ff;border-left:4px solid #0ea5e9;border-radius:6px;font-size:14px;min-height:20px}.bottom-section[data-v-7df98a0a]{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-top:1.5rem}.legend[data-v-7df98a0a]{padding:16px;background:#f8fafc;border-radius:8px;font-size:.9rem;border:1px solid #e2e8f0}.legend strong[data-v-7df98a0a]{display:block;margin-bottom:8px;color:#0f172a}.legend ul[data-v-7df98a0a]{margin:0;padding-left:20px}.legend li[data-v-7df98a0a]{margin:6px 0;color:#475569}.animation-controls[data-v-7df98a0a]{padding:16px;background:#fefce8;border-radius:8px;border:1px solid #fde047}.animation-controls strong[data-v-7df98a0a]{display:block;margin-bottom:12px;color:#0f172a}.layer-section[data-v-7df98a0a]{padding:16px;border-radius:8px;border:2px solid}.https-layer[data-v-7df98a0a]{background:#fef3c7;border-color:#f59e0b}.tcp-layer[data-v-7df98a0a]{background:#dbeafe;border-color:#3b82f6}.ip-layer[data-v-7df98a0a]{background:#e9d5ff;border-color:#8b5cf6}.layer-header[data-v-7df98a0a]{font-weight:700;font-size:1rem;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid rgba(0,0,0,.1)}.layer-content[data-v-7df98a0a]{min-height:100px}.layer-content .waiting[data-v-7df98a0a]{text-align:center;color:#64748b;font-style:italic;margin:20px 0}.packet-details[data-v-7df98a0a]{padding:16px;background:#f0f9ff;border-radius:8px;border:1px solid #7dd3fc}.packet-details strong[data-v-7df98a0a]{display:block;margin-bottom:12px;color:#0f172a;font-size:1rem}.detail-section[data-v-7df98a0a]{margin:16px 0;padding:12px;background:#fff;border-radius:6px;border:1px solid #e0f2fe}.section-header[data-v-7df98a0a]{font-weight:700;color:#0c4a6e;margin-bottom:10px;font-size:.95rem;padding-bottom:6px;border-bottom:2px solid #e0f2fe}.detail-row[data-v-7df98a0a]{display:flex;justify-content:space-between;padding:6px 4px;font-size:.9rem;border-bottom:1px solid #f1f5f9}.detail-row[data-v-7df98a0a]:last-child{border-bottom:none}.detail-row .label[data-v-7df98a0a]{color:#64748b;font-weight:500}.detail-row .value[data-v-7df98a0a]{color:#0f172a;font-weight:600;font-family:Courier New,monospace}.detail-row .value.highlight[data-v-7df98a0a]{color:#0369a1;background:#e0f2fe;padding:2px 8px;border-radius:4px}.encrypted-content[data-v-7df98a0a]{padding:8px 0}.encrypted-text[data-v-7df98a0a]{font-family:Courier New,monospace!important;font-size:.75rem!important;letter-spacing:.5px;word-break:break-all;background:#1f2937;color:#fff!important;padding:8px!important;border-radius:4px;display:inline-block;max-width:100%}.encrypted-label[data-v-7df98a0a],.encrypted-state[data-v-7df98a0a]{color:#fff!important}.step-description[data-v-7df98a0a]{margin-top:16px;padding:14px;background:#fefce8;border-radius:6px;border-left:4px solid #facc15}.desc-header[data-v-7df98a0a]{font-weight:700;color:#854d0e;margin-bottom:8px;font-size:.95rem}.step-description p[data-v-7df98a0a]{margin:0;color:#3f3f46;font-size:.9rem;line-height:1.6}.control-group[data-v-7df98a0a]{margin:12px 0}.control-group label[data-v-7df98a0a]{display:block;font-size:.9rem;color:#475569;margin-bottom:6px;font-weight:500}.control-group input[type=checkbox][data-v-7df98a0a]{margin-right:6px;cursor:pointer}.speed-buttons[data-v-7df98a0a]{display:flex;gap:8px;margin-top:6px}.speed-buttons button[data-v-7df98a0a]{flex:1;padding:8px 12px;background:#fff;border:2px solid #e2e8f0;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s}.speed-buttons button[data-v-7df98a0a]:hover:not(:disabled){border-color:#fbbf24;background:#fffbeb}.speed-buttons button.active[data-v-7df98a0a]{background:#fbbf24;border-color:#f59e0b;color:#fff;font-weight:600}.speed-buttons button[data-v-7df98a0a]:disabled{opacity:.5;cursor:not-allowed}.step-button[data-v-7df98a0a]{width:100%;padding:10px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background .2s;font-size:.95rem}.step-button[data-v-7df98a0a]:hover{background:#059669}.step-info[data-v-7df98a0a]{margin-top:8px;padding:8px;background:#fff;border-radius:4px;text-align:center}.step-info small[data-v-7df98a0a]{color:#64748b;font-weight:500}@media (max-width: 768px){.bottom-section[data-v-7df98a0a]{grid-template-columns:1fr}}main[data-v-7a2f422d]{padding:1.2rem;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial}h1[data-v-7a2f422d]{margin:0 0 .5rem}body{margin:0;background:#f6f8fa;color:#0f172a}