:root{--bg-color:#1c202b;--header-bg:#191c26;--header-border:#26273b;--text-color:#d4d0ca;--h1-color:#c0bab2;--card-bg:#26273b;--border-color:#26273b;--btn-bg:#2a2b42;--btn-hover-bg:#2c2d46;--btn-text:#fff;--dl-color:#6ffbf7;--ul-color:#ab6ae2;--ping-color:#e0c900;--empty-meter:#9193a8;--empty-range:#9193a8;--range-thumb-color:#30b3b0;--icon-fill:currentColor;--header-modal-bg:#212233;--modal-action-border:#5c5c6b;--radio-btn-bg:transparent;--radio-btn-border:#d4d0ca;--text-tooltip:#26273b;--bg-tooltip:#9193a8;--border-tooltip:#26273b;--bg-highlight-dot:#26273b;--border-highlight-dl-dot:#25dbd5;--border-highlight-ul-dot:#c18aef}html.theme-light{--bg-color:#ededed;--header-bg:#f3f3f3;--header-border:#c8c8c8;--h1-color:#1a1a1a;--card-bg:#fff;--border-color:#f7f7f7;--btn-bg:#fff;--btn-hover-bg:#fcfcfc;--btn-text:#1a1a1a;--dl-color:#2bc4bf;--ul-color:#ab6ae2;--ping-color:#cebc29;--empty-range:#e0e0e0;--icon-fill:currentColor;--text-color:#747474;--header-modal-bg:#f7f7f7;--modal-action-border:#eaeaea;--radio-btn-bg:transparent;--radio-btn-border:#747474;--text-tooltip:#1a1a1a;--bg-tooltip:#f3f3f3;--border-tooltip:#dedede;--bg-highlight-dot:#fff;--border-highlight-dl-dot:#10b4af;--border-highlight-ul-dot:#a130ff}html,body{color:var(--text-color);background:var(--bg-color);border:none;margin:0;padding:0;transition:background-color .3s,color .3s}body{text-align:center;flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;display:flex}.icon{vertical-align:middle;justify-content:center;align-items:center;width:1em;height:1em;display:inline-flex}.icon svg{width:1em;height:1em}.top-header{background-color:var(--header-bg);border-bottom:1px solid var(--header-border);justify-content:space-between;align-items:center;margin-bottom:80px;padding:16px 32px;display:flex}.logo-area{align-items:center;gap:.5em;text-decoration:none;display:flex}.logo-area .logo-text{color:var(--h1-color);margin:0;font-size:1.5em}.logo-area .icon{font-size:2em}.top-controls{align-items:center;gap:1em;display:flex}.custom-dropdown{position:relative}.dropdown-selected{box-sizing:border-box;cursor:pointer;background:var(--card-bg);border-radius:8px;align-items:center;gap:.5em;height:2.5em;padding:0 1em;font-weight:700;display:flex}.dropdown-selected:hover{opacity:.8}.dropdown-options{z-index:100;background:var(--card-bg);border-radius:8px;flex-direction:column;min-width:100%;margin:.5em 0 0;padding:0;list-style:none;display:none;position:absolute;top:100%;left:0;overflow:hidden;transform:translateY(-2px);box-shadow:0 4px 15px #0000001a}.chart-bg{z-index:1;opacity:.6;width:100%;height:65%;position:absolute;bottom:.4em;left:0}circle.chart-dot.visible,circle.chart-dot.visible[data-color=--dl-color],circle.chart-dot.visible[data-color=--ul-color]{display:none}.chart-highlight{z-index:2;box-sizing:border-box;pointer-events:none;opacity:0;background:0 0;border:1px solid #0000;border-radius:50%;width:5px;height:5px;margin-top:-2.5px;margin-left:-2.5px;transition:opacity .1s ease-out;position:absolute;top:0;left:0}.chart-highlight.visible{background-color:var(--bg-highlight-dot);opacity:.9}.chart-highlight[data-color=--dl-color]{border-color:var(--border-highlight-dl-dot)}.chart-highlight[data-color=--ul-color]{border-color:var(--border-highlight-ul-dot)}.chart-tooltip,.stat-tooltip{z-index:20;color:var(--text-tooltip);text-align:center;white-space:nowrap;pointer-events:none;background:var(--bg-tooltip);border:1px solid var(--border-tooltip);opacity:0;border-radius:3px;flex-direction:column;align-items:center;padding:.3em .4em;font-size:.7em;font-weight:700;line-height:1.25;transition:opacity .12s;display:flex;position:absolute}.chart-tooltip:after,.stat-tooltip:after{box-sizing:border-box;content:"";background:var(--bg-tooltip);border-right:1px solid var(--border-tooltip);border-bottom:1px solid var(--border-tooltip);width:8px;height:8px;position:absolute;bottom:-5px;left:50%;transform:translate(-50%)rotate(45deg)}.stat-tooltip{bottom:calc(100% + 10px);left:50%;transform:translate(-50%)}@media (hover:none){.chart-tooltip,.stat-tooltip{display:none}}.chart-tooltip.visible,.stat-tooltip.visible{opacity:1}.info-btn{width:20px;height:20px;color:var(--text-color);pointer-events:auto;cursor:pointer;opacity:.5;background:0 0;border:none;grid-column:3;justify-content:center;justify-self:start;align-items:center;margin-left:10px;padding:0;transition:opacity .2s,transform .2s;display:flex}.info-btn:hover{opacity:1;transform:scale(1.1)}.info-btn.hidden{visibility:hidden;pointer-events:none;opacity:0}.info-btn .icon{width:100%;height:100%}.details-body{flex-direction:column;gap:20px;display:flex}.details-summary{text-align:center;font-size:1.1em}.details-final-val{color:var(--text-color);margin-top:5px;font-size:2em;font-weight:700;display:inline-block}.details-table-wrapper{border:2px solid var(--header-modal-bg);border-radius:8px;max-height:400px;overflow-y:auto}.details-table{text-align:center;border-collapse:collapse;width:100%}.details-table th,.details-table td{border:2px solid var(--header-modal-bg);padding:10px 15px}.details-table th:first-child,.details-table td:first-child{text-align:left}.details-table th:last-child,.details-table td:last-child{text-align:right}.details-table th:not(:last-child),.details-table td:not(:last-child){border-right:2px solid var(--header-modal-bg)}.details-table th:first-child,.details-table th:last-child,.details-table th{z-index:2;text-transform:uppercase;background:var(--header-modal-bg);opacity:1;font-size:.9em;font-weight:700;position:sticky;top:0}.details-method-name{opacity:.8;font-size:.85em;font-weight:400}.details-summary-row{border-top:2px solid var(--header-modal-bg);font-weight:700}.details-table tr:last-child td{border-bottom:none}.details-table tbody tr:nth-child(odd){background:var(--header-modal-bg)}.custom-dropdown.open .dropdown-options{display:flex}.dropdown-options li{text-transform:uppercase;cursor:pointer;padding:.5em 1em;font-weight:700}.dropdown-options li:hover{background:var(--border-color)}.dropdown-options li.active{color:var(--dl-color)}.icon-btn{box-sizing:border-box;width:2.5em;height:2.5em;font-family:inherit;font-size:inherit;color:var(--text-color);cursor:pointer;background:var(--card-bg);border:none;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:opacity .2s;display:flex}.icon-btn:hover{opacity:.8}#startStopBtn{box-sizing:border-box;width:100%;height:4em;color:var(--btn-text);text-transform:uppercase;cursor:pointer;background-color:var(--btn-bg);border:.5em solid var(--border-color);border-radius:0;justify-content:center;align-items:center;margin:0;font-weight:700;line-height:1;transition:background-color .3s,border-color .3s,color .3s;display:flex}#startStopBtn .btn-text{pointer-events:none;display:inline-block}#startStopBtn.running{animation:1.5s ease-out btn-fade-running}#startStopBtn.done .btn-text{animation:.8s ease-out btn-fade-done}#startStopBtn.reset{animation:1.5s ease-out btn-fade-reset}@keyframes btn-fade-running{0%{opacity:.8;transform:translateY(1px)}to{opacity:1;transform:translateY(0)}}@keyframes btn-fade-done{0%{opacity:.5}to{opacity:1}}@keyframes btn-fade-reset{0%{opacity:.8;transform:translateY(1px)}to{opacity:1;transform:translateY(0)}}#startStopBtn:hover{background-color:var(--btn-hover-bg);transition:background-color .7s ease-in}#test{margin-bottom:40px}div.testArea{box-sizing:border-box;background-color:var(--card-bg);width:calc(50% - 5px);height:10em;position:relative}div.testName{z-index:9;pointer-events:none;width:100%;font-size:1.2em;position:absolute;top:1em;left:0}div.meterText{z-index:9;pointer-events:none;width:100%;font-size:4.5em;font-weight:lighter;transition:opacity .25s;position:absolute;bottom:.3em;left:0}.subTextWrapper{z-index:9;pointer-events:none;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;height:20px;display:grid;position:absolute;bottom:.5em;left:0}div.meterSubText{color:var(--text-color);text-align:center;opacity:.6;grid-column:2;font-size:.8em}#dlText{color:var(--dl-color)}#ulText{color:var(--ul-color)}#pingText,#jitText,#dlPingText,#ulPingText{color:var(--ping-color)}div.meterText:empty:before,span.meterText:empty:before{color:var(--empty-meter);content:"0.00";transition:color .8s,opacity .8s}#dlText.active:empty:before{color:var(--dl-color);opacity:.85}#ulText.active:empty:before{color:var(--ul-color);opacity:.85}div.testGroup{box-sizing:border-box;flex-wrap:wrap;justify-content:space-between;gap:10px;width:100%;max-width:640px;margin:0 auto;display:flex}.title{color:var(--text-color);text-transform:uppercase;margin-left:5px;font-weight:700}.ping_jitter_area{box-sizing:border-box;background-color:var(--card-bg);flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;width:100%;padding:10px 5px;display:flex}.ping_jitter_area .stat-item{cursor:default;border:0;align-items:center;gap:4px;min-width:0;margin:0;padding:0;display:inline-flex;position:relative}.ping_jitter_area .icon{color:var(--ping-color);align-items:center;display:inline-flex}.testArea .icon{transform-origin:50%;justify-content:center;align-items:center;transition:transform .2s,opacity .2s;display:inline-flex}.testArea .icon.pulsing{animation:1.2s ease-in-out infinite icon-pulse}@keyframes icon-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.9;transform:scale(.9)}}@media (prefers-reduced-motion:reduce){#startStopBtn.running .btn-text,#startStopBtn.done .btn-text,#startStopBtn.reset .btn-text,.testArea .icon.pulsing{opacity:.9;animation:none}}.testArea .icon#download-icon{color:var(--dl-color)}.testArea .icon#upload-icon{color:var(--ul-color)}.ipArea{box-sizing:border-box;background-color:var(--card-bg);justify-content:center;align-items:self-end;width:100%;padding:10px;display:flex}.ipArea span{min-height:1em}#ip-icon{opacity:.6;padding:0 5px;font-size:28px}.modal-overlay{z-index:1000;opacity:1;background-color:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;transition:opacity .2s,visibility .2s;display:flex;position:fixed;top:0;left:0}.modal-overlay.hidden{visibility:hidden;pointer-events:none;opacity:0}.modal-content{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;width:90%;max-width:480px;display:flex;box-shadow:0 10px 30px #0000004d}.modal-header{background-color:var(--header-modal-bg);border-bottom:1px solid var(--header-border);border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:12px 20px;display:flex}.modal-header h2{color:var(--h1-color);margin:0;font-size:1.5rem}.modal-header-actions{align-items:center;gap:8px;display:flex}.icon-btn-ghost,.close-btn{width:28px;height:28px;color:var(--text-color);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:0;transition:color .2s,opacity .2s,transform .15s;display:inline-flex}.icon-btn-ghost{font-size:1.2rem}.icon-btn-ghost:hover,.close-btn:hover{color:var(--h1-color);opacity:.8}.icon-btn-ghost:active,.close-btn:active{transform:scale(.92)}.icon-btn-ghost.copied{color:var(--dl-color)}.close-btn{font-size:1.4rem;line-height:1}.modal-body{flex-direction:column;gap:15px;padding:20px;display:flex}.setting-group label{justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:700;display:flex}.setting-group .range-value{color:var(--dl-color);font-size:1.1rem}.setting-group input[type=range]{cursor:pointer;width:100%}@supports ((-moz-appearance:none)){.setting-group input[type=range]{appearance:none;background:0 0}}@supports ((-webkit-appearance:none)){.setting-group input[type=range]{appearance:none;background:0 0}}@supports (accent-color:red){.setting-group input[type=range]{accent-color:var(--dl-color)}}.setting-group input[type=range]::-moz-range-track{background:var(--empty-range);border-radius:10px;height:6px}.setting-group input[type=range]::-moz-range-progress{background:var(--dl-color);border-radius:10px;height:6px}.setting-group input[type=range]::-moz-range-thumb{appearance:none;background:var(--range-thumb-color);border:none;border-radius:50%;width:16px;height:16px}.setting-group input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--dl-color) var(--value-percent,0%), var(--empty-range) var(--value-percent,0%));border-radius:10px;height:6px}.setting-group input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--range-thumb-color);border:none;border-radius:50%;width:16px;height:16px;margin-top:-5px}.settings-hint{color:var(--empty-meter);text-align:left;margin:-10px 0 5px;font-size:.85rem}.radio-group{flex-direction:column;display:flex}.radio-options{flex-direction:column;gap:16px;display:flex}.setting-group label.radio-option{text-align:left;cursor:pointer;justify-content:flex-start;align-items:flex-start;gap:12px;margin-bottom:0;font-weight:400;display:flex}.radio-option input[type=radio]{width:1.25em;height:1.25em;font:inherit;color:currentColor;appearance:none;cursor:pointer;background-color:var(--radio-btn-bg);border:1px solid var(--radio-btn-border);border-radius:50%;flex-shrink:0;place-content:center;margin:2px 0 0;transition:all .2s ease-in-out;display:grid}.radio-option input[type=radio]:before{content:"";background-color:var(--dl-color);border-radius:50%;width:.65em;height:.65em;transition:transform .12s ease-in-out;transform:scale(0)}.radio-option input[type=radio]:checked{border-color:var(--dl-color)}.radio-option input[type=radio]:checked:before{transform:scale(1)}.radio-content{flex-direction:column;display:flex}.radio-title{color:var(--text-color);font-size:.85rem;font-weight:400}.radio-desc{color:var(--empty-meter);margin-top:4px;font-size:.8rem;line-height:1.35}.checkbox-group label{cursor:pointer;justify-content:flex-start;align-items:center;gap:12px;margin:0;font-size:.85rem;font-weight:400;display:flex}.checkbox-group input[type=checkbox]{width:1.25em;height:1.25em;font:inherit;color:currentColor;appearance:none;cursor:pointer;border:1px solid var(--text-color);background-color:#0000;border-radius:.25em;place-content:center;margin:0;transition:all .2s ease-in-out;display:grid}.checkbox-group input[type=checkbox]:before{content:"";background-color:var(--dl-color);width:.65em;height:.65em;box-shadow:inset 1em 1em var(--card-bg);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform-origin:50%;transition:transform .12s ease-in-out;transform:scale(0)}.checkbox-group input[type=checkbox]:checked{background-color:var(--dl-color);border-color:var(--dl-color)}.checkbox-group input[type=checkbox]:checked:before{transform:scale(1)}.modal-actions{border-top:1px solid var(--modal-action-border);justify-content:flex-end;gap:20px;margin-top:10px;padding-top:20px;display:flex}.btn-primary,.btn-secondary{width:150px;color:var(--card-bg);cursor:pointer;border:1px solid var(--header-modal-bg);border-radius:8px;padding:10px 20px;font-size:1rem;font-weight:600;transition:background-color .2s,opacity .2s}.btn-primary:hover,.btn-secondary:hover{opacity:.9}.btn-primary{background-color:var(--dl-color)}.btn-secondary{background-color:var(--ul-color)}.icon-btn svg{width:1.25em;height:1.25em}.setting-group-toggle{align-items:center;display:flex}.setting-label{color:var(--text-color);margin-right:12px;font-size:1rem;font-weight:700}.radio-group .setting-label{text-align:left;margin-bottom:12px}.toggle-container{justify-content:center;align-items:center;gap:16px;display:flex}.toggle-label{color:var(--text-color);cursor:pointer;font-size:16px;transition:opacity .2s}.toggle-label.inactive{opacity:.5}.circle-toggle{width:48px;height:48px;color:var(--text-color);cursor:pointer;background-color:var(--header-modal-bg);border:1px solid var(--modal-action-border);border-radius:50%;justify-content:center;align-items:center;transition:background-color .2s,border-color .2s;display:flex}.circle-toggle:hover{background:#ffffff0d}.circle-toggle svg{width:24px;height:24px}@media (max-width:1080px){.top-header{padding:16px 24px}}@media (max-width:720px){.top-header{margin-bottom:60px}}@media (max-width:672px){.top-header{margin-bottom:40px}div.testGroup{padding:0 10px}}@media (max-width:655px){.top-header{padding:15px}div.testGroup{padding:0 15px}}@media (max-width:610px){div.testArea{width:100%}.logo-area .logo-text{font-size:16px}.top-controls{gap:10px}}@media (max-width:522px){.setting-group-toggle{flex-direction:column;align-items:start;gap:10px}}@media (max-width:425px){.ping_jitter_area{gap:15px}}@media (max-width:392px){.ping_jitter_area{gap:10px}}@media (max-width:355px){.dropdown-selected{height:2em;padding:0 .5em}.icon-btn{width:2em;height:2em}}
