:root{--ink:#403344;--accent:#76516d;--paper:#f5f2f4;--line:#ded5dc}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}header{height:70px;max-width:1220px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header a{color:inherit;text-decoration:none}.logo{font-size:22px;font-weight:800}.logo span{font-size:11px;letter-spacing:2px;color:#9d8998;margin-left:8px}main{max-width:1180px;margin:auto;padding:45px 24px 80px}.intro{text-align:center;margin-bottom:48px}.pill{display:inline-block;padding:7px 13px;border-radius:99px;background:#e9e1e7;color:var(--accent);font-size:13px}.intro h1{font:700 clamp(34px,5vw,56px) STKaiti,KaiTi,serif;margin:20px 0 12px}.intro p{color:#806d7d;font-size:17px}.workspace{display:grid;grid-template-columns:390px 1fr;gap:28px;align-items:start}form,.preview,.docs{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 12px 40px rgba(70,48,66,.08)}form{padding:26px}h2{margin:0 0 22px}label{display:block;color:#765f72;font-size:13px;margin:14px 0}input{display:block;width:100%;margin-top:7px;border:1px solid #ded5dc;border-radius:11px;padding:11px 12px;background:#faf8f9;color:var(--ink);font:15px inherit;outline:0}input:focus{border-color:#896b82;box-shadow:0 0 0 3px #eee6ec}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:flex;gap:10px;margin-top:20px}button{border:0;border-radius:12px;padding:12px 18px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer;flex:1}.secondary{background:#eee8ec;color:var(--ink)}.preview{padding:18px}.preview-head{display:flex;justify-content:space-between;padding:2px 4px 14px}.preview-head span{color:#9b8997;font-size:13px}.preview img{display:block;width:100%;border-radius:15px;background:#f1edef}.docs{margin-top:70px;padding:34px}.docs h2{margin-top:14px}.docs p{color:#756674}.docs pre{overflow:auto;background:#342b36;color:#eadfe7;padding:18px;border-radius:13px}.hint{font-size:14px}code{font-family:Consolas,monospace}footer{text-align:center;padding:30px;color:#94848f;border-top:1px solid #e5dee3}@media(max-width:850px){main{padding-top:25px}.workspace{grid-template-columns:1fr}.preview{order:-1}.docs{margin-top:35px}}@media(max-width:480px){.grid{grid-template-columns:1fr}.intro h1{font-size:36px}.workspace{gap:18px}form,.docs{padding:20px}}