*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f5f6f8;color:#1f2937}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px 16px 48px;gap:20px}.app h1{margin:0;font-size:1.6rem;color:#111827}.app p.lead{margin:0;max-width:640px;text-align:center;color:#4b5563;font-size:.95rem}.toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}button{font:inherit;border:1px solid #d1d5db;background:#fff;color:#111827;padding:8px 14px;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}button:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af}button:active:not(:disabled){transform:translateY(1px)}button.primary{background:#2563eb;border-color:#2563eb;color:#fff}button.primary:hover:not(:disabled){background:#1d4ed8;border-color:#1d4ed8}button.danger{background:#fff;border-color:#fca5a5;color:#b91c1c}button.danger:hover:not(:disabled){background:#fef2f2}button:disabled{opacity:.5;cursor:not-allowed}.canvas-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px;box-shadow:0 1px 2px #0000000a}canvas{display:block;touch-action:none;cursor:crosshair}.hint{font-size:.85rem;color:#6b7280;text-align:center;max-width:640px}.panels{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start}.panel-title{margin:0 0 8px;font-size:1rem;color:#374151;text-align:center}