.lead { color: var(--text-2); max-width: 64ch; line-height: 1.55; }

.rc-stage {
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
}
.rc-stage.alpha {
  background-image:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%), linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker) 75%), linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.rc-stage canvas { display: block; max-width: 100%; height: auto; }
.rc-stage canvas.picking { cursor: crosshair; }

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin-bottom: 14px; }
.seg button { border: 0; background: var(--surface); padding: 7px 14px; font-size: .86rem; cursor: pointer; color: var(--text); }
.seg button.on { background: var(--accent-bg); color: var(--accent-2); font-weight: 650; }

.rc-controls { display: grid; gap: 12px; max-width: 420px; }
.rc-controls .field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rc-val { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.rc-color { display: flex; gap: 8px; }
.rc-color input[type="color"] { width: 42px; height: 34px; padding: 2px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); cursor: pointer; }
.rc-color input[type="text"] { font-family: var(--mono); font-size: .8rem; }

.rc-actions { margin-top: 16px; }
.rc-compare { margin-top: 18px; max-width: 620px; }