:root{color:#172033;background:#f4f6f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;place-items:start center;padding:32px 16px}.panel{width:min(100%,560px);display:grid;gap:22px;padding:28px;border:1px solid #d9dee7;border-radius:8px;background:#fff;box-shadow:0 14px 36px #1720331a}.field{display:grid;gap:10px}label,.color-control span,.size-label{color:#38445c;font-size:.92rem;font-weight:650}textarea{width:100%;min-height:116px;resize:vertical;border:1px solid #c8d0dd;border-radius:8px;padding:12px 14px;color:#172033;background:#fff}textarea:focus,input[type=range]:focus-visible,button:focus-visible{outline:3px solid #86b7ff;outline-offset:2px}.color-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.color-control{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 12px;border:1px solid #d9dee7;border-radius:8px;background:#fbfcfe}input[type=color]{width:42px;height:34px;padding:0;border:0;border-radius:6px;background:transparent;cursor:pointer}.size-label{display:flex;align-items:center;justify-content:space-between}output{color:#5a667a;font-weight:600}input[type=range]{width:100%;accent-color:#176f66}.preview{display:grid;place-items:center;min-height:312px;padding:20px;border:1px solid #d9dee7;border-radius:8px;background:linear-gradient(45deg,#eef2f6 25%,transparent 25%),linear-gradient(-45deg,#eef2f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef2f6 75%),linear-gradient(-45deg,transparent 75%,#eef2f6 75%);background-color:#fff;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;overflow:auto}.preview svg{max-width:100%;height:auto;border:1px solid #e1e6ef}.preview-placeholder{margin:0;color:#5a667a;font-weight:650;text-align:center}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}button{min-height:44px;border:0;border-radius:8px;color:#fff;background:#176f66;font-weight:700;cursor:pointer}button:hover{background:#105d55}button:disabled{background:#a7b0bf;cursor:not-allowed}.canvas-export{position:fixed;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}@media (max-width: 520px){.panel{padding:20px}.color-row,.actions{grid-template-columns:1fr}}