/* Harmonograph — the drawing sits on paper, so the page stays light and quiet. */

main { max-width: 940px; }
.lede { color: var(--soft); margin-bottom: 20px; }

/* A paper card rather than a dark stage: this one is a plotter drawing, not an instrument. */
.paper {
  background: #fbf7ef;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

canvas { width: 100%; height: auto; display: block; }

.controls { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.seed { font-size: 13px; color: var(--soft); }
.seed b { color: var(--ink); font-variant-numeric: tabular-nums; }

.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; }
.knobs label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
  color: var(--soft);
}
.knobs input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.knobs span { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

/* the ink swatch doubles as the value readout for the hue slider */
.sw { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); }

.note { font-size: 13px; margin-top: 18px; }