:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#131416;background:#edf2f4;font-size:15px}*{box-sizing:border-box}body{margin:0}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;gap:16px}h1{font-size:21px;margin:0;font-weight:650}h1 span{color:#1b6c80}header>span,.hint,.source p{color:#5d5f60;font-size:13px}main{display:grid;grid-template-columns:300px minmax(0,1fr);gap:12px;padding:0 12px 12px;min-height:calc(100vh - 64px)}aside,.workspace{border:1px solid #e8eaec;border-radius:16px;background:#fff}aside{padding:20px}h2{font-size:16px;margin:0 0 12px}aside>p{font-size:14px;line-height:1.6;margin:0 0 20px}.source{background:#f4f6f8;padding:12px;margin:0 0 12px;border-radius:6px}.source>label{font-weight:600;display:block;margin-bottom:10px}input[type=file]{width:100%;font-size:12px}input::file-selector-button{padding:8px;border:1px solid #cdced1;background:white;border-radius:4px;cursor:pointer}.source p{word-break:break-all;margin:8px 0}.adjust{display:grid;gap:5px}.adjust label{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}.adjust input{min-width:0;flex:1}input[type=range]{accent-color:#1b6c80;width:100%;min-height:24px}button,select{font:inherit;min-height:42px;border:1px solid #cdced1;border-radius:4px;background:#fff;padding:8px 12px;color:inherit}button{cursor:pointer}button:hover:not(:disabled){background:#e7edef}button:disabled{cursor:not-allowed;opacity:.45}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1b6c80;outline-offset:3px}#swap{width:100%;margin-bottom:24px}select{width:100%;margin:8px 0 16px}label[for=line]{display:flex;justify-content:space-between}output{font-variant-numeric:tabular-nums;color:#5d5f60}.color{display:flex;align-items:center;justify-content:space-between;margin-top:8px}input[type=color]{height:36px;width:52px;border:1px solid #cdced1;background:white}.hint{margin-top:16px;margin-bottom:0}.workspace{padding:24px;display:flex;flex-direction:column;min-width:0}.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.preview-head h2{margin:0}.preview-head span{font-size:13px;color:#5d5f60}.stage{background:#f4f6f8;margin:20px 0;flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}canvas{max-width:100%;max-height:65vh;object-fit:contain;width:auto;height:auto;display:block}footer{display:flex;justify-content:space-between;align-items:center;gap:16px}footer p{font-size:14px;line-height:1.5;margin:0}.primary{background:#1b6c80;color:white;border-color:#1b6c80;white-space:nowrap}.primary:hover:not(:disabled){background:#125466}#status.error{color:#b92329}@media(max-width:800px){header{padding:0 16px}header>span{display:none}main{grid-template-columns:1fr;padding:0 8px 8px}.workspace{grid-row:1;padding:16px}.stage{min-height:220px;padding:12px;margin:16px 0}canvas{max-height:45vh}aside{padding:16px}.source{display:block}footer{align-items:flex-start}footer p{max-width:60%}h1{font-size:19px}}