:root {
  --fg: #1f1f1f;
  --muted: #8c8c8c;
  --line: #e4e4e4;
  --f: #2d70b3;
  --g: #c74440;
}
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #fff; color: var(--fg);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
canvas[hidden], .row[hidden], .val[hidden], .seg[hidden], #axes[hidden] { display: none; }

#panel {
  position: fixed; top: 14px; left: 14px; width: 232px; padding: 6px 14px 8px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 8px;
}
.row { display: flex; align-items: center; gap: 8px; height: 32px; }
.k { color: var(--muted); }
.fn { font-style: italic; width: 46px; flex: none; }
.f { color: var(--f); }
.g { color: var(--g); }

input[type=text] {
  flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; font: inherit; color: var(--fg); padding: 2px 0; outline: none;
}
input[type=text]:focus { border-bottom-color: var(--fg); }
input.err { color: var(--g); border-bottom-color: var(--g); }
input.num { flex: none; width: 48px; text-align: center; }

.seg { display: inline-flex; gap: 2px; }
.seg button, #auto {
  border: 0; background: none; font: inherit; color: var(--muted);
  padding: 2px 8px; border-radius: 4px; cursor: pointer;
}
.seg button:hover, #auto:hover { color: var(--fg); }
.seg button.on { color: var(--fg); background: #efefef; }
.seg svg {
  display: block; width: 16px; height: 16px; margin: 2px 0;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
}
#anim { margin-left: auto; }

input[type=range] { flex: 1; min-width: 0; margin: 0; accent-color: var(--fg); }
.v { width: 26px; text-align: right; font-variant-numeric: tabular-nums; }

.out { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; font-variant-numeric: tabular-nums; }
#formula { color: var(--muted); height: 26px; line-height: 26px; }
.val { display: flex; gap: 8px; align-items: center; height: 24px; }
#cut { color: var(--muted); }

#wrench {
  position: fixed; top: 14px; right: 14px; width: 30px; height: 30px; padding: 6px;
  border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 6px;
}
#wrench:hover, #wrench.on { color: var(--fg); }
#wrench svg { display: block; width: 18px; height: 18px; fill: currentColor; }
#axes {
  position: fixed; top: 48px; right: 14px; width: 168px; padding: 4px 12px 6px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--line); border-radius: 8px;
}
#axes .k:first-child { width: 10px; }
#auto { margin-left: auto; }

#credit { position: fixed; right: 14px; bottom: 12px; color: var(--muted); font-size: 12px; pointer-events: none; }