:root{font-family:system-ui,"Microsoft YaHei",sans-serif;color:#233d3b;background:#f3f5f1;font-size:14px}*{box-sizing:border-box}body{margin:0}main{max-width:1440px;margin:auto;padding:40px}header{margin-bottom:32px}h1{font-size:38px;letter-spacing:-1px;margin:10px 0}header>p:last-child{color:#637570}.eyebrow{font-size:11px;letter-spacing:3px;color:#568b81;font-weight:700}h2{font-size:16px;margin:0 0 20px}aside h2{color:#8baba3}h2 span{color:#233d3b;margin-left:10px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px}aside{display:grid;gap:18px}section{background:white;border:1px solid #dce5dd;border-radius:18px;padding:24px}label{display:block;color:#607570;font-size:12px;margin-bottom:14px}input,select,textarea{display:block;width:100%;padding:10px 12px;margin-top:7px;border:1px solid #d5ded7;border-radius:8px;background:#fbfcfa;color:#233d3b;font:inherit}textarea{resize:vertical}input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #368f81;outline-offset:2px}.pair{display:flex;gap:10px}.pair>*{flex:1;min-width:0}button{font:inherit;border:1px solid #d5ded7;border-radius:8px;background:white;padding:10px 13px;color:#375f57;cursor:pointer}button:hover{background:#edf5ef}.primary{background:#256e61;color:white;border-color:#256e61}.primary:hover{background:#185347}button:disabled{opacity:.45;cursor:not-allowed}.preview{align-self:start;position:sticky;top:20px;padding:28px;min-width:0}.preview-top,.section-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.badge{font-size:11px;background:#eef5ee;padding:8px;border-radius:30px;color:#527d70}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 22px}#canvas{background:#f8faf7;border-radius:12px;overflow:auto;max-height:760px;border:1px solid #e5ece5}#canvas svg{display:block;max-width:none}#canvas.vertical svg{width:100%;height:auto}.hint,footer{font-size:12px;color:#778980;line-height:1.8}footer{margin-top:24px}#status{min-height:22px;color:#256e61}.event{padding:12px 0;border-top:1px solid #e8eee9}.event strong{display:block;font-size:13px;overflow-wrap:anywhere}.event small{color:#82928a}.event-actions{display:flex;gap:8px;margin-top:8px}.event-actions button{padding:4px 10px;font-size:12px}#events{max-height:330px;overflow:auto;margin-bottom:14px}[hidden]{display:none!important}@media(max-width:800px){main{padding:22px 14px}.workspace{grid-template-columns:1fr}.preview{position:static;grid-row:1;padding:18px}h1{font-size:29px}.badge{display:none}#canvas{max-height:540px}}@media print{header,aside,.toolbar,footer,.hint,#status,.preview-top{display:none}.workspace{display:block}main,.preview{padding:0;border:0}#canvas{max-height:none;overflow:visible}}
@media(max-width:800px){#canvas.vertical svg{min-width:600px}}