:root{color-scheme:light;--ink:#16313c;--muted:#516873;--line:#cbd9df;--paper:#f4f7f5;--accent:#086b61}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.75 system-ui,"Microsoft YaHei",sans-serif}header{background:#143a41;color:white;padding:18px max(24px,calc((100% - 1120px)/2));display:flex;justify-content:space-between;gap:20px}header a{color:white;text-decoration:none}.brand{font-weight:750;letter-spacing:.03em}main{max-width:1120px;margin:36px auto;padding:0 24px}h1{font-size:clamp(26px,4vw,42px);line-height:1.25;margin:12px 0 20px}h2{font-size:22px;margin-top:30px}p{max-width:85ch}a{color:#086b61;text-underline-offset:3px}.eyebrow{font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--accent)}.badge{display:inline-block;padding:3px 10px;background:#dceee8;border-radius:20px;font-size:13px}.editor,.cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel,.card{background:white;border:1px solid var(--line);border-radius:10px;padding:22px}.card h2{margin:0;font-size:19px}.card p{font-size:14px;color:var(--muted)}textarea{resize:vertical;min-height:220px;width:100%;border:1px solid #a6bcc4;border-radius:6px;background:#fafdfe;color:var(--ink);padding:14px;font:14px/1.6 Consolas,monospace;tab-size:2}label{display:block;font-weight:650;margin-bottom:8px}input[type=text]{width:100%;padding:9px;border:1px solid #a6bcc4;border-radius:4px;font:inherit}button{cursor:pointer;font:inherit;border:1px solid var(--accent);border-radius:6px;padding:9px 17px;background:var(--accent);color:white;margin:10px 8px 0 0}button.secondary{background:white;color:var(--accent)}button:focus-visible,a:focus-visible,textarea:focus-visible,input:focus-visible{outline:3px solid #e9ad43;outline-offset:3px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e7eeed;border-radius:6px;padding:16px;font:14px/1.6 Consolas,monospace}.notice{border-left:4px solid #b07c25;padding:8px 16px;background:#fff8e9}#status{min-height:30px}#status[data-state=error]{color:#a12a22}footer{border-top:1px solid var(--line);padding:24px;color:var(--muted);text-align:center;font-size:13px}.related{display:flex;flex-wrap:wrap;gap:10px 24px}.split{display:grid;grid-template-columns:2fr 1fr;gap:32px}small{color:var(--muted)}@media(max-width:720px){.editor,.cards,.split{grid-template-columns:1fr}header{padding:16px 24px}header nav{font-size:13px}main{margin-top:24px}.panel{padding:15px}}