@keyframes breathe{0%,to{filter:drop-shadow(var(--glow-subtle))}50%{filter:drop-shadow(var(--glow-strong))}}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes modalSlideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes errorSlideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes errorShake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}@keyframes errorPulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes slideDown{0%{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUpModal{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes slideOutRight{0%{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}: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;--button-bg:#ffffff;--button-border:#cbd5e1;--button-hover:#f1f5f9;--path-color:#cbd5e1;--glow-strong:none;--glow-subtle:none;--glow-loss:none}[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;--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)}body,button{color:var(--text-color)}body,svg{width:100%}#container,body{flex-direction:column;overflow:hidden}body{margin:0;padding:0;background-color:var(--bg-color);font-family:"Roboto Mono",monospace;height:100vh;height:100dvh}#container{position:relative;background:var(--container-bg);width:100%;height:100%;display:flex;transition:all .3s ease}svg{height:auto;min-height:0;flex-grow:1}.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))}.stat-box-rect{stroke-width:2}.stat-label-text,.stat-value-text{text-anchor:middle;dominant-baseline:middle}.stat-value-text{font-size:20px;font-weight:700}.stat-label-text{font-size:10px;fill:#aaa;text-transform:uppercase;letter-spacing:1px}#controls,body{display:flex;align-items:center;justify-content:center}#controls{height:60px;background:var(--controls-bg);gap:20px;padding:0 20px;border-top:1px solid var(--grid-color);z-index:10}button{background:var(--button-bg);border:1px solid var(--button-border);padding:8px 20px;font-family:inherit;cursor:pointer;border-radius:4px;transition:all .2s;font-weight:700;font-size:12px;text-transform:uppercase}button:hover{background:var(--button-hover);border-color:var(--button-border)}button:active{transform:translateY(1px)}button.active{background:var(--loss-color);border-color:var(--loss-color);box-shadow:0 0 10px var(--loss-color)}.axis-label{fill:#888;font-size:10px}.grid-line{stroke:var(--grid-color);stroke-width:1;stroke-dasharray:4 4}.packet-lost rect{fill:var(--loss-color)!important;transition:fill .2s ease;filter:drop-shadow(var(--glow-loss))!important}.packet-lost .packet-text{opacity:0;transition:opacity .1s}.packet-lost text,.packet-success text{font-size:20px;font-weight:700;fill:#fff}@media (max-width:600px){#controls{gap:10px}button{padding:6px 12px;font-size:11px}}.glow-client,.glow-server{filter:drop-shadow(var(--glow-strong));transition:filter .3s ease;animation:breathe 3s ease-in-out infinite}.glow-line{filter:drop-shadow(var(--glow-subtle))}.packet-success rect{fill:#10b981!important;transition:fill .2s ease}.packet-success text{font-size:16px}#marketing-copy{max-width:700px;margin:20px auto;text-align:center;padding:0 20px;color:var(--text-color);opacity:.8}#marketing-copy h3{font-size:1.2rem;margin-bottom:10px;color:var(--client-color)}#marketing-copy p{font-size:.9rem;line-height:1.5;margin-bottom:10px}button.primary{border-color:var(--client-color);background:rgba(59,130,246,.1);box-shadow:0 0 10px rgba(59,130,246,.2)}button.primary:hover{background:rgba(59,130,246,.2);box-shadow:0 0 15px rgba(59,130,246,.4)}.start-overlay{position:absolute;top:0;left:0;width:100%;height:100%;justify-content:center;background:rgba(0,0,0,.3);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);z-index:100;transition:opacity .3s ease,visibility .3s ease}.start-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-card,.start-overlay,.test-button{display:flex;align-items:center}.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);gap:20px;animation:slideIn .4s ease-out}.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;flex-direction:column;gap:8px;transition:all .2s ease;box-shadow:0 4px 16px rgba(59,130,246,.2)}.test-button:hover{background:rgba(59,130,246,.05);transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.3)}.test-button:active{transform:translateY(0)}.test-subtitle{font-size:14px;font-weight:400;opacity:.9}.modal,.settings-button{align-items:center;justify-content:center}.settings-button{background:0 0;border:2px solid var(--button-border);border-radius:10px;padding:16px 24px;display:flex;cursor:pointer;transition:all .2s ease;color:var(--text-color);font-size:14px;font-weight:600;text-transform:none}.settings-button:hover{background:var(--button-hover);border-color:var(--client-color);color:var(--client-color)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:none;z-index:200;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.modal.active{display:flex}.modal-content{background:var(--controls-bg);border:2px solid var(--button-border);border-radius:16px;max-width:500px;width:90%;max-height:80vh;overflow-x:hidden;overflow-y:auto;box-shadow:0 24px 48px rgba(0,0,0,.4);animation:modalSlideIn .3s ease-out;-ms-overflow-style:none;scrollbar-width:none}.modal-content::-webkit-scrollbar{display:none}.close-button,.modal-header{display:flex;align-items:center}.modal-header{padding:24px 24px 16px;border-bottom:1px solid var(--button-border);justify-content:space-between}.modal-header h2{margin:0;font-size:20px;color:var(--text-color)}.close-button{background:0 0;border:0;font-size:24px;color:var(--text-color);cursor:pointer;width:32px;height:32px;justify-content:center;border-radius:8px;transition:background .2s ease}.close-button:hover{background:var(--button-hover)}.modal-body{padding:32px 28px;overflow-x:hidden;overflow-y:auto}.setting-group{margin-bottom:32px;overflow:visible;padding:0 4px}#calculation-mode-group{transition:opacity .3s ease;overflow:hidden;opacity:1}#calculation-mode-group:not(.hidden){min-height:120px;margin-bottom:32px}#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}.setting-label{display:block;font-weight:600;color:var(--text-color);margin-bottom:12px;font-size:14px}.preset-buttons{display:flex;gap:12px;flex-wrap:wrap;padding:4px 0;overflow:visible}.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;transition:all .2s ease}.preset-btn:hover{background:var(--button-hover);border-color:var(--client-color)}.preset-btn.active{background:rgba(59,130,246,.1);border-color:var(--client-color);color:var(--client-color)}.size-preset-btn.active{background:rgba(74,222,128,.15)!important;border-color:#4ade80!important;color:#4ade80!important}.radio-group{display:flex;flex-direction:column;gap:12px}.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;transition:all .2s ease}.radio-label:hover{background:var(--button-hover);border-color:var(--client-color)}.radio-label input[type=radio]{width:18px;height:18px;cursor:pointer}.radio-label input[type=radio]:checked+span{color:var(--client-color);font-weight:600}.slider{width:calc(100% - 16px);height:8px;border-radius:4px;background:var(--button-border);outline:0;-webkit-appearance:none;margin:0 8px}.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)}.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)}.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}.advanced-settings{margin-top:16px;border-top:1px solid var(--button-border);padding-top:16px}.advanced-settings summary{cursor:pointer;font-weight:600;color:var(--text-color);padding:8px 0;user-select:none}.advanced-settings summary:hover{color:var(--client-color)}.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}.number-input:focus{outline:0;border-color:var(--client-color)}.field-error{border-color:#dc2626!important;background:rgba(220,38,38,.05)!important}.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:errorSlideIn .2s ease-out}.modal-footer{padding:16px 24px 24px;border-top:1px solid var(--button-border)}.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;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 4px 16px rgba(59,130,246,.4)}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.6)}#reset-settings:hover{background:rgba(59,130,246,.25)!important;border-color:rgba(96,165,250,.5)!important;transform:translateY(-1px)}#reset-settings:active,.primary-button:active{transform:translateY(0)}.error-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:150;transition:opacity .3s ease,visibility .3s ease}.error-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.error-box{background:var(--controls-bg);border:3px solid #dc2626;border-radius:16px;padding:40px;max-width:450px;width:90%;text-align:center;box-shadow:0 24px 48px rgba(0,0,0,.4);animation:errorShake .5s ease-out}.error-icon{margin-bottom:16px;animation:errorPulse 2s ease-in-out infinite}.error-title{color:#dc2626;font-size:24px;font-weight:700;margin:0 0 12px;letter-spacing:1px}.error-message{color:var(--text-color);font-size:16px;margin:0 0 24px;line-height:1.5}.error-button,.theme-toggle{cursor:pointer;transition:all .2s ease}.error-button{background:#dc2626;color:#fff;border:0;border-radius:12px;padding:16px 32px;font-size:16px;font-weight:700;box-shadow:0 4px 16px rgba(220,38,38,.4)}.error-button:hover{background:#b91c1c;transform:translateY(-2px);box-shadow:0 6px 20px rgba(220,38,38,.6)}.error-button:active{transform:translateY(0)}.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;color:var(--text-color);font-size:14px;font-weight:600;text-transform:none}.theme-toggle:hover{background:var(--button-hover);border-color:var(--client-color);color:var(--client-color)}@media (max-width:600px){.start-card{flex-direction:column;padding:30px 20px}.test-button{font-size:20px;padding:20px 40px}.settings-button{padding:12px 20px;font-size:12px}.preset-buttons{flex-direction:column}.preset-btn{min-width:auto}}@media (max-width:400px){.test-button{font-size:18px;padding:16px 32px}.modal-content{width:95%}}.error-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;animation:fadeIn .3s ease-out}.error-modal-overlay.fade-out{animation:fadeOut .3s ease-in}.error-modal-content{background:var(--controls-bg);border:2px solid #dc2626;border-radius:12px;max-width:600px;width:100%;max-height:90vh;overflow-y:auto;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:slideUpModal .3s ease-out}.error-modal-header{display:flex;align-items:center;gap:15px;margin-bottom:20px}.error-icon{font-size:48px}.error-modal-header h2{margin:0;color:var(--text-color);font-size:24px;font-weight:700}.error-modal-message{font-size:16px;line-height:1.6;margin-bottom:25px;color:var(--text-color)}.error-modal-section{margin-bottom:20px}.error-modal-section h3{text-transform:uppercase;letter-spacing:.5px}.error-modal-section ol,.error-modal-section ul{margin:0;padding-left:20px;color:var(--text-color)}.error-modal-section li{margin-bottom:5px}.error-modal-technical{margin-bottom:20px;cursor:pointer}.error-modal-section h3,.error-modal-technical summary{font-size:14px;color:#999;margin-bottom:10px}.error-modal-technical-content{background:rgba(0,0,0,.3);padding:15px;border-radius:6px;font-family:monospace;font-size:12px;color:#999;margin-top:10px}.error-modal-technical-content .error-detail{color:#dc2626;margin-top:10px}.error-modal-actions{display:flex;gap:10px;margin-top:25px}.error-btn{flex:1;padding:12px 24px;border:0;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.error-btn-retry{background:#22c55e;color:#fff}.error-btn-retry:hover{background:#16a34a;transform:translateY(-1px)}.error-btn-close{background:var(--button-bg);color:var(--text-color);border:1px solid var(--button-border)}.error-btn-close:hover{background:var(--button-hover)}.error-toast{position:fixed;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:slideInRight .3s ease-out}.error-toast.fade-out{animation:slideOutRight .3s ease-in}.error-toast-error{background:rgba(220,38,38,.95)}.error-toast-warning{background:rgba(245,158,11,.95)}.error-toast-success{background:rgba(34,197,94,.95)}.error-toast-info{background:rgba(59,130,246,.95)}