* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  background: #0f172a;
  color: #e2e8f0;
  display: flex;
  justify-content: center;
}
main { padding: 2rem; max-width: 880px; width: 100%; }
h1 { font-size: 1.5rem; }
.toolbar { display: flex; gap: .5rem; margin: 1rem 0; }
button {
  padding: .5rem 1rem; border: 1px solid #334155; border-radius: 8px;
  background: #1e293b; color: #e2e8f0; font-weight: 600; cursor: pointer;
}
button.active { background: #2563eb; border-color: #2563eb; }
#evaluate { margin-left: auto; background: #16a34a; border-color: #16a34a; }
canvas {
  background: #fff; border-radius: 8px; touch-action: none;
  width: 100%; height: auto; cursor: crosshair;
}
.result { margin-top: 1rem; font-size: 1.5rem; min-height: 2rem; }
.result.error { color: #f87171; font-size: 1rem; }