:root{--purple:#4b144d;--yellow:#fbc02d}.mainContainerX{text-align:center;justify-content:center;min-height:calc(100vh - 200px);padding:32px 16px;display:flex}.mainContainerX .pingContainer{width:100%;max-width:1400px}.pingHeader{text-align:left;margin-bottom:32px}.pingHeader h1{color:#eee;margin:0 0 8px;font-size:24px;font-weight:500}.pingHeader .description{color:#aaa;margin:0;font-size:15px}.pingForm{flex-direction:column;gap:40px;display:flex}.boxesContainer{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:32px;width:100%;display:flex}@media (max-width:768px){.boxesContainer{gap:24px}}.boxWrapper{flex-direction:column;flex:280px;align-items:center;gap:16px;max-width:420px;display:flex}.pingBox{aspect-ratio:16/9;background-color:#1a1a1a;border:2px solid #444;border-radius:12px;width:100%;transition:background-color;position:relative;overflow:hidden}.pingBox.flash{background-color:#fff;border-color:#fff}.pingBox:hover .removeBoxBtn{opacity:1}.removeBoxBtn{color:#fff;cursor:pointer;opacity:0;background:#00000080;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:opacity .2s,background-color .2s;display:flex;position:absolute;top:12px;right:12px}.removeBoxBtn:hover{background:#ff3c3ccc}.removeBoxBtn svg{width:20px;height:20px}.inputGroup{align-items:center;width:100%;max-width:320px;display:flex;position:relative}.pingInput{text-align:center;color:#fff;background:#252525;border:2px solid #444;border-radius:8px;outline:none;width:100%;padding:16px 20px;font-family:inherit;font-size:20px;transition:border-color .2s,background-color .2s}.pingInput::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.pingInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pingInput{appearance:textfield}.pingInput:focus,.pingInput:hover{background:#2a2a2a;border-color:#666}.pingInput::placeholder{color:#888}.actions{justify-content:center;align-items:center;gap:16px;display:flex}@media (max-width:480px){.actions{flex-direction:column;width:100%}.actions button{width:100%}}.addBtn,.testBtn{cursor:pointer;border-radius:8px;padding:12px 32px;font-family:inherit;font-size:18px;font-weight:500;transition:all .2s}.addBtn{color:#aaa;background:0 0;border:2px dashed #555}.addBtn:hover{color:#fff;background:#ffffff0d;border-color:#888}.testBtn{color:#111;background:#eee;border:2px solid #eee}.testBtn:hover{background:#fff;border-color:#fff;transform:translateY(-1px)}.testBtn:active{background:#ddd;transform:translateY(1px)}.testBtn:disabled{color:#777;cursor:not-allowed;background:#333;border-color:#333;transform:none}.infoSection{text-align:left;background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;max-width:800px;margin:48px auto 0;padding:32px}.infoSection p.intro{color:#ccc;text-align:center;margin-top:0;margin-bottom:24px;font-size:16px;line-height:1.6}.infoSection .latencyChain h3{color:#fff;border-bottom:1px solid #ffffff1a;margin-top:0;margin-bottom:16px;padding-bottom:8px;font-size:20px}.infoSection .latencyChain ul{margin:0 0 24px;padding:0;list-style-type:none}.infoSection .latencyChain ul li{color:#aaa;border-left:2px solid #444;margin-bottom:16px;padding-left:16px;font-size:15px;line-height:1.6}.infoSection .latencyChain ul li strong{color:#ddd;margin-bottom:4px;display:block}.infoSection .latencyChain ul li code{color:#eee;background:#ffffff1a;border-radius:4px;padding:2px 6px;font-size:14px}.infoSection .latencyChain p.summary{color:var(--yellow);border-left:4px solid var(--yellow);background:#fbc02d1a;border-radius:8px;margin:0;padding:16px;font-size:16px;font-weight:500;line-height:1.5}