:root{color-scheme:light;--ink:#18312b;--muted:#607269;--green:#225d48;--orange:#e97238}
*{box-sizing:border-box}
body{margin:0;background:#f4f4ed;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
main{max-width:1120px;margin:auto;padding:32px 36px}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:26px;border-bottom:1px solid #d5dcd0}
.brand{font-size:15px;font-weight:800;letter-spacing:2px}
.badge{font-size:10px;letter-spacing:1.5px;border:1px solid #c8d2c7;border-radius:30px;padding:8px 13px}
.intro{padding:62px 0 40px;max-width:760px}
.eyebrow{font-size:13px;letter-spacing:2px;color:var(--green)}
h1{font-size:clamp(34px,5vw,60px);line-height:1.22;letter-spacing:-2px;margin:20px 0 23px}
h1 span{color:var(--orange)}
.description{max-width:590px;font-size:15px;line-height:1.9;color:var(--muted)}
.demo{display:grid;grid-template-columns:1fr 1.15fr;border:1px solid #d0d8ca;border-radius:20px;overflow:hidden;background:#fffef9}
.form-panel,.response-panel{padding:32px}
.step{font-size:11px;letter-spacing:1.5px;color:var(--muted)}
h2{font-size:23px;margin:24px 0}
label{display:block;font-size:13px;margin-bottom:9px}
input{width:100%;border:1px solid #c5d1c5;border-radius:9px;background:#fff;padding:14px;font:inherit}
input:focus-visible,button:focus-visible{outline:3px solid #e6a878;outline-offset:3px}
button{width:100%;display:flex;justify-content:space-between;margin-top:16px;padding:15px 18px;border:0;border-radius:9px;background:var(--green);color:#fff;font:inherit;cursor:pointer}
button:disabled{opacity:.6;cursor:wait}
.hint{font:11px ui-monospace,monospace;color:var(--muted);margin:18px 0}
#status{font-size:12px;color:var(--muted);min-height:32px;line-height:1.7}
.response-panel{background:#eaf0e5;border-left:1px solid #d0d8ca}
.response-heading{display:flex;justify-content:space-between;gap:10px}
#http-status{font:11px ui-monospace,monospace;color:var(--green)}
#greeting{font-size:20px;line-height:1.65;margin:31px 0 25px;overflow-wrap:anywhere}
pre{background:#17332b;color:#d6ead9;border-radius:11px;padding:21px;font:12px/1.9 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);padding:24px 0;line-height:1.8}
@media(max-width:700px){main{padding:22px 20px}.badge{font-size:9px}.intro{padding-top:40px}.demo{grid-template-columns:1fr}.form-panel,.response-panel{padding:25px}.response-panel{border-left:0;border-top:1px solid #d0d8ca}footer{flex-direction:column;gap:6px}h1{letter-spacing:-1px}}