/* Sign: a fountain pen on good paper. The pad is a white card with one baseline, like the line on a cheque. */
:root { --page: #f4f4f1; --card: #ffffff; --ink: #161616; --soft: #5b5b57; --line: #d8d8d2; --field: #ececea; --act: #1b2a4a; --on-act: #ffffff; --stop: #b3261e; --wide: 760px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #121212; --card: #1c1c1c; --ink: #ededeb; --soft: #a6a6a1; --line: #333331; --field: #121212; --act: #a9bfff; --on-act: #0d1733; --stop: #ff8a80; color-scheme: dark; }
}
.pad { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 12px; aspect-ratio: 5 / 2; box-shadow: 0 2px 10px rgb(0 0 0 / .08); overflow: hidden; }
.pad canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.pad .line { position: absolute; left: 7%; right: 7%; bottom: 26%; border-bottom: 1.5px solid #c9c9c3; }
.hint-in { position: absolute; left: 7%; bottom: 14%; color: #a9a9a3; font-size: 14px; }
.chip.swatch::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--sw); margin-right: 8px; vertical-align: -2px; }