@keyframes breathe{0%,to{filter:drop-shadow(var(--glow-subtle))}50%{filter:drop-shadow(var(--glow-strong))}}@keyframes openpacketloss-slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes openpacketloss-modalSlideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes openpacketloss-errorSlideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes openpacketloss-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes openpacketloss-fadeOut{0%{opacity:1}to{opacity:0}}@keyframes openpacketloss-slideUpModal{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes openpacketloss-slideInRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes openpacketloss-slideOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}#openpacketloss-root,#openpacketloss-root *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root{--bg-color:#ffffff;--container-bg:#f8fafc;--controls-bg:#ffffff;--client-color:#3b82f6;--server-color:#3b82f6;--line-color:#cbd5e1;--text-color:#0f172a;--grid-color:#e2e8f0;--loss-color:#dc2626;--success-color:#10b981;--button-bg:#ffffff;--button-border:#cbd5e1;--button-hover:#f1f5f9;--path-color:#cbd5e1;--glow-strong:none;--glow-subtle:none;--glow-loss:none}.dark,[data-theme=dark]{--bg-color:#09090b;--container-bg:#18181b;--controls-bg:#09090b;--client-color:#3b82f6;--server-color:#3b82f6;--line-color:#71717a;--text-color:#f4f4f5;--grid-color:#27272a;--loss-color:#ef4444;--success-color:#22c55e;--button-bg:#27272a;--button-border:#3f3f46;--button-hover:#3f3f46;--path-color:#3f3f46;--glow-strong:0 0 15px rgba(59, 130, 246, 0.6);--glow-subtle:0 0 8px rgba(59, 130, 246, 0.3);--glow-loss:0 0 15px rgba(239, 68, 68, 0.6)}#openpacketloss-root,#openpacketloss-root #container{position:relative;width:100%;height:100%;flex-direction:column;overflow:hidden}#openpacketloss-root{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:"Roboto Mono",monospace;min-height:200px;container-type:size}#openpacketloss-root #container{background:var(--container-bg);display:flex}#openpacketloss-root svg{width:100%;height:auto;min-height:0;flex-grow:1}#openpacketloss-root .packet-text{font-size:14px;font-weight:700;fill:#fff;pointer-events:none;text-anchor:middle;dominant-baseline:middle;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}#openpacketloss-root .stat-box-rect{stroke-width:2}#openpacketloss-root .stat-value-text{font-size:20px;font-weight:700;text-anchor:middle;dominant-baseline:middle}#openpacketloss-root .stat-label-text{font-size:10px;fill:#aaa;text-anchor:middle;dominant-baseline:middle;text-transform:uppercase;letter-spacing:1px}#openpacketloss-root,#openpacketloss-root #controls{display:flex;align-items:center;justify-content:center}#openpacketloss-root #controls{height:60px;background:var(--controls-bg);gap:20px;padding:0 20px;border-top:1px solid var(--grid-color);z-index:10}#openpacketloss-root button{background:var(--button-bg);color:var(--text-color);border:1px solid var(--button-border);padding:8px 20px;font-family:inherit;cursor:pointer;border-radius:4px;font-weight:700;font-size:12px;text-transform:uppercase}#openpacketloss-root button:hover{background:var(--button-hover);border-color:var(--button-border)}#openpacketloss-root button:active{transform:translateY(1px)}#openpacketloss-root button.active{background:var(--loss-color);border-color:var(--loss-color);box-shadow:0 0 10px var(--loss-color)}#openpacketloss-root .axis-label{fill:#888;font-size:10px}#openpacketloss-root .grid-line{stroke:var(--grid-color);stroke-width:1;stroke-dasharray:4 4}#openpacketloss-root .packet-lost rect{fill:var(--loss-color)!important;filter:drop-shadow(var(--glow-loss))!important}#openpacketloss-root .packet-lost .packet-text{opacity:0}#openpacketloss-root .packet-lost text{font-size:20px;font-weight:700;fill:#fff}@media (max-width:600px){#openpacketloss-root #controls{gap:10px}#openpacketloss-root button{padding:6px 12px;font-size:11px}#openpacketloss-root .stat-value-text{font-size:24px}#openpacketloss-root .stat-label-text{font-size:12px;font-weight:700}}#openpacketloss-root .glow-client,#openpacketloss-root .glow-server{filter:drop-shadow(var(--glow-strong));animation:breathe 3s ease-in-out infinite}#openpacketloss-root .glow-line{filter:drop-shadow(var(--glow-subtle))}#openpacketloss-root .packet-success rect{fill:var(--success-color)!important}#openpacketloss-root .packet-success text{font-size:16px;font-weight:700;fill:#fff}#openpacketloss-root #marketing-copy{max-width:700px;margin:20px auto;text-align:center;padding:0 20px;color:var(--text-color);opacity:.8}#openpacketloss-root #marketing-copy h3{font-size:1.2rem;margin-bottom:10px;color:var(--client-color)}#openpacketloss-root #marketing-copy p{font-size:.9rem;line-height:1.5;margin-bottom:10px}#openpacketloss-root button.primary{border-color:var(--client-color);background:rgba(59,130,246,.1);box-shadow:0 0 10px rgba(59,130,246,.2)}#openpacketloss-root button.primary:hover{background:rgba(59,130,246,.2);box-shadow:0 0 15px rgba(59,130,246,.4)}#openpacketloss-root .start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:0 0;z-index:100}#openpacketloss-root .start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}#openpacketloss-root .start-card{background:var(--controls-bg);border:2px solid var(--button-border);border-radius:20px;padding:40px;box-shadow:0 20px 60px rgba(0,0,0,.3);display:flex;align-items:center;gap:20px;animation:openpacketloss-slideIn .4s ease-out;max-width:90%}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .start-card{padding:20px;gap:12px;border-radius:16px}}@container (max-width: 350px) or (max-height: 300px){#openpacketloss-root .start-card{padding:12px;gap:8px;flex-direction:column;border-radius:12px}}#openpacketloss-root .test-button{background:0 0;color:var(--text-color);border:2px solid var(--client-color);border-radius:12px;padding:20px 40px;font-size:20px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 4px 16px rgba(59,130,246,.2);white-space:nowrap;transition:all .2s ease}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .test-button{padding:12px 24px;font-size:16px;border-radius:10px}}@container (max-width: 350px) or (max-height: 300px){#openpacketloss-root .test-button{padding:8px 16px;font-size:14px;border-radius:8px;width:100%}}#openpacketloss-root .test-button:hover{background:rgba(59,130,246,.05);transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.3)}#openpacketloss-root .test-button:active{transform:translateY(0)}#openpacketloss-root .test-subtitle{font-size:14px;font-weight:400;opacity:.9}#openpacketloss-root .settings-button,#openpacketloss-root .theme-toggle{background:0 0;border:2px solid var(--button-border);border-radius:10px;padding:16px 24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-color);font-size:14px;font-weight:600;text-transform:none;transition:all .2s ease}#openpacketloss-root .settings-button:hover,#openpacketloss-root .theme-toggle:hover{background:var(--button-hover);border-color:var(--client-color);color:var(--client-color)}#openpacketloss-root .modal{position:absolute;top:0;left:0;width:100%;height:100%;background:0 0;display:none;align-items:center;justify-content:center;z-index:200}#openpacketloss-root .modal.active{display:flex}#openpacketloss-root .modal-content{background:var(--controls-bg);border:2px solid var(--button-border);border-radius:16px;max-width:500px;width:90%;max-height:90%;overflow-x:hidden;overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,.4);animation:openpacketloss-modalSlideIn .3s ease-out;-ms-overflow-style:none;scrollbar-width:none}#openpacketloss-root .modal-content::-webkit-scrollbar{display:none}#openpacketloss-root .modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--button-border);display:flex;justify-content:space-between;align-items:center}#openpacketloss-root .modal-header h2{margin:0;font-size:20px;color:var(--text-color)}#openpacketloss-root .close-button{background:0 0;border:0;font-size:24px;color:var(--text-color);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px}#openpacketloss-root .close-button:hover{background:var(--button-hover)}#openpacketloss-root .modal-body{padding:24px 20px;overflow-x:hidden;overflow-y:auto}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .modal-header{padding:16px 20px}#openpacketloss-root .modal-header h2{font-size:16px}#openpacketloss-root .modal-body{padding:16px}#openpacketloss-root .setting-group{margin-bottom:16px}#openpacketloss-root .setting-label{font-size:13px;margin-bottom:8px}}#openpacketloss-root .setting-group{margin-bottom:20px;overflow:visible;padding:0 4px}#openpacketloss-root #calculation-mode-group{overflow:hidden;opacity:1}#openpacketloss-root #calculation-mode-group:not(.hidden){min-height:100px;margin-bottom:20px}#openpacketloss-root #calculation-mode-group.hidden{opacity:0;pointer-events:none;min-height:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;height:0}#openpacketloss-root .setting-label{display:block;font-weight:600;color:var(--text-color);margin-bottom:12px;font-size:14px}#openpacketloss-root .preset-buttons{display:flex;gap:12px;flex-wrap:wrap;padding:4px 0;overflow:visible}#openpacketloss-root .preset-buttons.gap-small{gap:8px}#openpacketloss-root .preset-btn{flex:1;min-width:120px;padding:12px 16px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:10px;color:var(--text-color);font-size:14px;font-weight:600;cursor:pointer}#openpacketloss-root .preset-btn:hover{background:var(--button-hover);border-color:var(--client-color)}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .preset-btn{padding:8px 12px;font-size:12px;min-width:80px}}#openpacketloss-root .preset-btn.active{background:rgba(59,130,246,.1);border-color:var(--client-color);color:var(--client-color)}#openpacketloss-root .size-preset-btn{flex:1;min-width:0;padding:10px 4px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:8px;color:var(--text-color);font-size:10px;font-weight:600;cursor:pointer;text-align:center;white-space:nowrap}#openpacketloss-root .size-preset-btn:hover{background:var(--button-hover);border-color:var(--client-color)}#openpacketloss-root .size-preset-btn.active{background:rgba(74,222,128,.15)!important;border-color:#4ade80!important;color:#4ade80!important}#openpacketloss-root .radio-group{display:flex;flex-direction:column;gap:12px}#openpacketloss-root .radio-label{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:10px;cursor:pointer}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .radio-label{padding:8px 12px;gap:8px;font-size:12px}}#openpacketloss-root .radio-label:hover{background:var(--button-hover);border-color:var(--client-color)}#openpacketloss-root .radio-label input[type=radio]{width:18px;height:18px;cursor:pointer}#openpacketloss-root .radio-label input[type=radio]:checked+span{color:var(--client-color);font-weight:600}#openpacketloss-root .slider{width:calc(100% - 16px);height:8px;border-radius:4px;background:var(--button-border);outline:0;-webkit-appearance:none;appearance:none;margin:0 8px}#openpacketloss-root .slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--client-color);cursor:pointer;box-shadow:0 2px 8px rgba(59,130,246,.4)}#openpacketloss-root .slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--client-color);cursor:pointer;border:0;box-shadow:0 2px 8px rgba(59,130,246,.4)}#openpacketloss-root .slider-labels{display:flex;justify-content:space-between;margin-top:8px;margin-left:8px;margin-right:8px;font-size:12px;color:var(--text-color);opacity:.6}#openpacketloss-root .advanced-settings{margin-top:16px;border-top:1px solid var(--button-border);padding-top:16px}#openpacketloss-root .advanced-settings summary{cursor:pointer;font-weight:600;color:var(--text-color);padding:8px 0;user-select:none}#openpacketloss-root .advanced-settings summary:hover{color:var(--client-color)}#openpacketloss-root .number-input{width:100%;padding:10px 12px;background:var(--button-bg);border:2px solid var(--button-border);border-radius:8px;color:var(--text-color);font-size:14px;font-family:"Roboto Mono",monospace;box-sizing:border-box}#openpacketloss-root .number-input:focus{outline:0;border-color:var(--client-color)}#openpacketloss-root .field-error{border-color:#dc2626!important;background:rgba(220,38,38,.05)!important}#openpacketloss-root .field-error-message{display:none;color:#dc2626;font-size:12px;margin-top:8px;padding:8px 12px;background:rgba(220,38,38,.1);border-radius:6px;border-left:3px solid #dc2626;animation:openpacketloss-errorSlideIn .2s ease-out}#openpacketloss-root .modal-footer{padding:16px 24px 24px;border-top:1px solid var(--button-border)}#openpacketloss-root .primary-button{width:100%;padding:16px;background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%)!important;color:#fff!important;border:0;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(59,130,246,.4)}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .primary-button{padding:12px;font-size:14px;border-radius:10px}}#openpacketloss-root .primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.6)}#openpacketloss-root #reset-settings:hover{background:rgba(59,130,246,.25)!important;border-color:rgba(96,165,250,.5)!important;transform:translateY(-1px)}#openpacketloss-root #reset-settings:active,#openpacketloss-root .primary-button:active{transform:translateY(0)}@container (max-width: 500px) or (max-height: 400px){#openpacketloss-root .settings-button,#openpacketloss-root .theme-toggle{padding:10px 16px;font-size:12px;border-radius:8px}}@container (max-width: 350px) or (max-height: 300px){#openpacketloss-root .settings-button,#openpacketloss-root .theme-toggle{padding:8px 12px;width:100%}}@media (max-width:600px){#openpacketloss-root .start-card{flex-direction:column;padding:30px 20px}#openpacketloss-root .test-button{font-size:20px;padding:20px 40px}#openpacketloss-root .settings-button,#openpacketloss-root .theme-toggle{padding:12px 20px;font-size:12px}#openpacketloss-root .preset-buttons{flex-direction:column}#openpacketloss-root .preset-btn{min-width:auto}}@media (max-width:400px){#openpacketloss-root .test-button{font-size:18px;padding:16px 32px}#openpacketloss-root .modal-content{width:95%}}#openpacketloss-root .error-modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:0 0;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:openpacketloss-fadeIn .3s ease-out}#openpacketloss-root .error-modal-overlay.fade-out{animation:openpacketloss-fadeOut .3s ease-in}#openpacketloss-root .error-modal-compact{background:var(--controls-bg);border:2px solid #dc2626;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;max-width:420px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.5)}#openpacketloss-root .error-modal-header{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}#openpacketloss-root .error-icon{font-size:24px}#openpacketloss-root .error-modal-header h2{margin:0;color:var(--text-color);font-size:16px;font-weight:700}#openpacketloss-root .error-modal-message{font-size:13px;line-height:1.4;margin:0;color:var(--text-color);opacity:.9}#openpacketloss-root .error-modal-technical-hint{background:rgba(0,0,0,.05);padding:10px;border-radius:6px;font-family:inherit;font-size:11px;color:var(--text-color);opacity:.8;margin:4px 0;border-left:3px solid #dc2626;text-align:left}[data-theme=dark] #openpacketloss-root .error-modal-technical-hint{background:rgba(255,255,255,.05)}#openpacketloss-root .error-modal-technical-hint .error-detail{color:#ef4444;font-weight:600;margin-top:5px}#openpacketloss-root .error-modal-actions{display:flex;gap:8px;margin-top:8px}#openpacketloss-root .error-btn{flex:1;padding:8px 12px;border:0;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}#openpacketloss-root .error-btn-retry{background:#22c55e;color:#fff}#openpacketloss-root .error-btn-retry:hover{background:#16a34a;transform:translateY(-1px)}#openpacketloss-root .error-btn-learn{background:rgba(59,130,246,.1);color:var(--client-color);border:1px solid var(--client-color)!important;text-decoration:none;display:flex;align-items:center;justify-content:center;text-align:center}#openpacketloss-root .error-btn-learn:hover{background:rgba(59,130,246,.2);transform:translateY(-1px)}#openpacketloss-root .error-btn-close{background:var(--button-bg);color:var(--text-color);border:1px solid var(--button-border)}#openpacketloss-root .error-btn-close:hover{background:var(--button-hover)}#openpacketloss-root .error-toast{position:absolute;top:20px;right:20px;color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:9999;font-family:monospace;font-size:13px;max-width:400px;animation:openpacketloss-slideInRight .3s ease-out}#openpacketloss-root .error-toast.fade-out{animation:openpacketloss-slideOutRight .3s ease-in}#openpacketloss-root .error-toast-error{background:rgba(220,38,38,.95)}#openpacketloss-root .error-toast-warning{background:rgba(245,158,11,.95)}#openpacketloss-root .error-toast-success{background:rgba(34,197,94,.95)}#openpacketloss-root .error-toast-info{background:rgba(59,130,246,.95)}@media (max-height:500px){#openpacketloss-root .modal-body{padding:12px}#openpacketloss-root .setting-group{margin-bottom:8px}#openpacketloss-root .error-modal-compact{padding:12px;gap:4px}#openpacketloss-root .error-icon{font-size:18px}#openpacketloss-root .error-modal-header h2{font-size:14px}#openpacketloss-root .error-modal-message{font-size:12px}#openpacketloss-root .error-modal-technical-hint{padding:8px;font-size:10px}#openpacketloss-root .error-btn{padding:6px 10px;font-size:11px}#openpacketloss-root .modal-footer,#openpacketloss-root .modal-header{padding:8px 16px}}