:root{color-scheme:light;--paper:#f4f3ed;--ink:#20342b;--muted:#657069;--line:#cdd2c9;--green:#246644;--error:#a43e32;--white:#fffefa}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
.page{max-width:1260px;margin:0 auto;padding:40px 64px 25px;min-height:100svh;display:flex;flex-direction:column}
.masthead{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--line);gap:20px}
.brand{font-family:"Avenir Next","Trebuchet MS",sans-serif;font-weight:650;font-size:23px;letter-spacing:-.8px;color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand-mark{width:24px;height:24px;border:2px solid var(--green);border-radius:50%;position:relative}
.brand-mark:after{content:"";position:absolute;width:11px;height:11px;right:-5px;bottom:-3px;border:2px solid var(--green);background:var(--paper)}
.eyebrow,.panel-no,.footer,.section-label{font-size:11px;letter-spacing:1.5px}
.eyebrow,.panel-no{font-family:"SFMono-Regular",Consolas,monospace}
.edition{color:var(--muted);padding-left:18px}
.layout{display:grid;grid-template-columns:1fr 1.15fr;gap:84px;align-items:center;padding:70px 0 80px;flex:1}
.intro{align-self:start;padding-top:24px}
.section-label{margin:0 0 24px;color:var(--green);font-weight:600;letter-spacing:2px}
h1{font-size:clamp(45px,5vw,65px);font-weight:500;line-height:1.25;letter-spacing:-3px;margin:0}
h1 span{color:var(--green)}
.intro-copy{max-width:290px;color:var(--muted);font-size:15px;line-height:1.95;margin:28px 0 36px}
.environment{border-top:1px solid var(--line);max-width:290px;margin:0;padding-top:18px;display:flex;gap:48px}
dt{font-size:12px;color:var(--muted);margin-bottom:9px}
dd{margin:0;font-size:15px}
.environment dd{font-family:"SFMono-Regular",Consolas,"PingFang SC",monospace}
.test-panel{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--ink);padding:25px 30px 24px;position:relative}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
h2{font-size:14px;font-weight:600;margin:0}
.panel-no{color:var(--muted);font-size:10px}
.result{padding:32px 0 29px;min-height:237px}
.signal{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;margin-bottom:22px}
.signal span{width:11px;height:11px;border-radius:50%;background:var(--muted)}
.status-label{font-size:11px;letter-spacing:2px;margin:0 0 9px;color:var(--muted)}
h3{margin:0;font-size:28px;font-weight:500;letter-spacing:-.7px;line-height:1.4}
.status-detail{font-size:13px;color:var(--muted);margin:12px 0 0;line-height:1.8;min-height:24px;overflow-wrap:anywhere}
[data-state="success"] .signal{border-color:#b9d4c1;background:#eef6ef}
[data-state="success"] .signal span{background:var(--green)}
[data-state="success"] .status-label{color:var(--green)}
[data-state="error"] .signal{border-color:#dec0b9;background:#fcf2ef}
[data-state="error"] .signal span{background:var(--error)}
[data-state="error"] .status-label{color:var(--error)}
[data-state="loading"] .signal span{animation:pulse 1s ease-in-out infinite}
.measurements{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;margin:0 0 25px;padding:21px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.measurements dd{font-size:13px;font-family:"SFMono-Regular",Consolas,monospace;line-height:1.5;font-variant-numeric:tabular-nums}
.measurements .unit{color:var(--muted);font-size:11px}
button{width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--green);background:var(--green);color:#fff;font-family:inherit;font-weight:500;font-size:14px;min-height:49px;padding:12px 17px;cursor:pointer;transition:background .2s,transform .2s}
button:hover:not(:disabled){background:#1b5034;transform:translateY(-1px)}
button:disabled{cursor:progress;opacity:.7}
button svg{width:18px;height:18px}
button:focus-visible,a:focus-visible{outline:3px solid #bc791c;outline-offset:5px}
.test-note{font-size:11px;color:var(--muted);margin:15px 0 0;line-height:1.7}
.no-script{font-size:13px;line-height:1.6;color:var(--error)}
.footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:10px;letter-spacing:.7px;gap:20px}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
@media(max-width:900px){.page{padding:30px 36px 24px}.layout{gap:40px;padding:48px 0 55px}.test-panel{padding:24px}h1{font-size:51px}.environment{gap:28px}.eyebrow{font-size:10px;letter-spacing:.6px}}
@media(max-width:650px){.page{padding:24px 23px}.masthead{padding-bottom:23px}.brand{font-size:21px}.eyebrow{font-size:9px;max-width:116px;text-align:right;line-height:1.7}.edition{padding-left:5px}.layout{grid-template-columns:1fr;gap:35px;padding:33px 0 40px}.intro{padding-top:0}.section-label{margin-bottom:18px}h1{font-size:47px;letter-spacing:-2px}h1 br{display:none}.intro-copy{max-width:100%;font-size:14px;margin:19px 0 23px}.environment{max-width:none;gap:50px;padding-top:15px}.test-panel{padding:21px}.result{padding:26px 0;min-height:218px}h3{font-size:27px}.measurements{gap:12px}.measurements dd{font-size:12px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}