.tool-hero{margin-bottom:28px}.tool-workspace{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);gap:18px}.tool-panel,.preview-panel{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.tool-panel{padding:24px}.preview-panel{padding:20px;min-width:0}.editor-controls{display:grid;gap:15px}.editor-controls label{display:grid;gap:7px;font-weight:700}.editor-controls textarea,.editor-controls input[type=number],.editor-controls select{font:inherit;width:100%;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;color:var(--text)}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.control-actions{display:flex}.button{border:0;cursor:pointer;font:inherit;font-weight:800}.button--primary{background:var(--brand);color:#fff}.preview-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.preview-head span,.tool-note{color:var(--muted)}.canvas-wrap{min-height:420px;border:1px solid var(--line);border-radius:18px;background:#f8fafc;display:grid;place-items:center;overflow:auto;padding:16px}.canvas-wrap canvas{max-width:100%;height:auto;border-radius:12px}.canvas-wrap--checker{background-image:linear-gradient(45deg,#f0f2f5 25%,transparent 25%),linear-gradient(-45deg,#f0f2f5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f2f5 75%),linear-gradient(-45deg,transparent 75%,#f0f2f5 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}@media(max-width:850px){.tool-workspace{grid-template-columns:1fr}.canvas-wrap{min-height:300px}}@media(max-width:560px){.control-grid{grid-template-columns:1fr}.site-main{width:min(100% - 24px,1180px);padding-top:34px}.tool-panel,.preview-panel{padding:16px}}