*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f8fb;color:#18212f}.wrap{max-width:1100px;margin:0 auto;padding:24px 18px 60px}.hero{padding:22px 0}h1{margin:0 0 8px;font-size:clamp(28px,5vw,42px)}.hero p{color:#667085}.tool{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(16,24,40,.06)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{font-weight:600;font-size:14px;display:block;margin-bottom:7px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff}textarea{min-height:180px;resize:vertical}button,.btn{border:0;border-radius:10px;padding:11px 16px;cursor:pointer;background:#14b8a6;color:#fff;font-weight:700}button.secondary,.btn.secondary{background:#eef2f6;color:#344054}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.output{margin-top:18px;padding:16px;border-radius:12px;background:#f8fafc;border:1px solid #e4e7ec;white-space:pre-wrap;overflow:auto}.preview{margin-top:18px;min-height:120px;display:grid;place-items:center;border:1px dashed #cfd6df;border-radius:12px;background:#fff}.muted{color:#667085;font-size:14px}.drop{border:2px dashed #cfd6df;border-radius:14px;padding:28px;text-align:center;cursor:pointer}.drop.drag{border-color:#14b8a6;background:#ecfdf8}canvas{max-width:100%;height:auto;border-radius:10px}table{width:100%;border-collapse:collapse;margin-top:14px}th,td{border-bottom:1px solid #eaecf0;padding:9px;text-align:left}@media(max-width:720px){.grid{grid-template-columns:1fr}.tool{padding:16px}}