*{box-sizing:border-box}html,body{margin:0;background:#f5f7fb;color:#13233d;font:15.5px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:12px 20px;background:#0f2c55;color:#fff;box-shadow:0 2px 10px #0003}
header .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:19px}header .brand img{width:32px;height:32px;border-radius:8px}header .brand b{color:#ff3b42}
header .tag{color:#b9cbe4;font-weight:600}header .spec{margin-left:auto;color:#fff;border:1px solid #ffffff66;border-radius:9px;padding:6px 10px;text-decoration:none;font-weight:600;font-size:14px}
.wrap{display:flex;max-width:1180px;margin:0 auto}
.toc{position:sticky;top:64px;align-self:flex-start;flex:none;width:190px;padding:24px 10px 24px 20px;display:flex;flex-direction:column;gap:4px}
.toc a{color:#3a5070;text-decoration:none;padding:5px 8px;border-radius:8px;font-weight:600;font-size:14px}.toc a:hover{background:#e3ebf9;color:#0f2c55}
main{flex:1;min-width:0;padding:18px 24px 60px}
section{background:#fff;border-radius:16px;box-shadow:0 1px 4px #0f2c5520;padding:20px 24px;margin:0 0 16px}
.hero{background:linear-gradient(135deg,#0f2c55,#183f75);color:#fff}.hero h1{margin:0 0 8px;font-size:30px;line-height:1.15;letter-spacing:-.4px}.hero p{color:#d6e1f1;max-width:760px}
.hero code{background:#ffffff22;color:#fff}.pills{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.pills span{background:#ffffff1f;border:1px solid #ffffff33;border-radius:99px;padding:4px 11px;font-size:13px;font-weight:600}
.env{font-size:14px}
h2{margin:0 0 10px;font-size:21px}h3{margin:16px 0 6px;font-size:16px}
code{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:#eef2f8;border-radius:5px;padding:1px 5px}
pre{background:#0d1b2e;color:#dbe7f7;border-radius:12px;padding:14px 16px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}pre code{background:none;padding:0;color:inherit;font:inherit}
table{border-collapse:collapse;width:100%;font-size:14.5px;margin:8px 0}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #e3e9f2;vertical-align:top}th{color:#5b6f8c;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
.muted{color:#5b6f8c}
.con label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:#3a5070}
.con input,.con select{min-height:40px;border:1px solid #c6d2e3;border-radius:9px;padding:0 10px;font:14.5px system-ui,sans-serif;background:#fff;color:#13233d}
.con .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.con .grid .w{grid-column:1/-1}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
button{min-height:40px;border-radius:10px;border:1px solid #c6d2e3;background:#fff;color:#0f2c55;font:700 14px system-ui,sans-serif;padding:0 14px;cursor:pointer}button.go{background:#1fa463;border-color:#1fa463;color:#fff}button:disabled{opacity:.5}
.out{min-height:120px;max-height:420px;white-space:pre-wrap}
footer{color:#5b6f8c;font-size:13px;padding:6px 4px}footer a{color:#0f2c55}
@media (max-width:820px){.toc{display:none}main{padding:12px}section{padding:16px}.hero h1{font-size:24px}.con .grid{grid-template-columns:1fr}}