* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', 'SF Pro Display', system-ui, sans-serif; background: #fff; color: #1a1a1a; height: 100vh; display: flex; flex-direction: column; }

.main-area { flex: 1; position: relative; overflow: hidden; background: #fafafa; }
canvas { display: block; width: 100%; height: 100%; }

.bottom-bar {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; align-items: stretch; gap: 10px; pointer-events: none;
}
.bottom-bar > * { pointer-events: auto; }

.panel {
  background: #ffffffee; border: 1px solid #e0e0e0; padding: 10px 14px; font-size: 13px;
}

.formula-panel { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.formula-panel label { color: #888; white-space: nowrap; }
.formula-panel input[type="text"] {
  background: #fff; border: 1px solid #d0d0d0; color: #1a1a1a; padding: 6px 10px;
  border-radius: 0; font-size: 15px; font-family: 'Fira Code', 'Consolas', monospace; outline: none; width: 260px;
}
.formula-panel input[type="text"]:focus { border-color: #1a1a1a; }

.range-panel { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.range-panel label { color: #888; white-space: nowrap; }
.range-panel input[type="number"] {
  background: #fff; border: 1px solid #d0d0d0; color: #1a1a1a; padding: 6px 8px;
  border-radius: 0; font-size: 14px; width: 60px; outline: none;
}
.range-panel input[type="number"]:focus { border-color: #1a1a1a; }

.toggle-group { display: flex; gap: 0; flex-shrink: 0; align-items: stretch; }
.toggle-btn {
  background: #fff; border: 1px solid #d0d0d0; color: #888; padding: 5px 14px;
  border-radius: 0; font-size: 13px; cursor: pointer; transition: all .15s; margin-left: -1px;
}
.toggle-btn:first-child { margin-left: 0; }
.toggle-btn.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.toggle-btn:hover:not(.active) { border-color: #999; color: #555; }

.info-panel { line-height: 1.6; max-width: 360px; margin-left: auto; }
.info-panel .val { color: #1a1a1a; font-weight: 600; font-family: 'Fira Code', monospace; }

.tooltip {
  position: absolute; pointer-events: none; background: #ffffffee; border: 1px solid #1a1a1a;
  border-radius: 0; padding: 5px 9px; font-size: 13px; font-family: 'Fira Code', monospace;
  color: #1a1a1a; display: none; white-space: nowrap;
}