@import url("../colors_and_type.css?v=3");

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: var(--color-ink);
  font-family: var(--font-text);
}
.card {
  width: 700px;
  padding: 24px;
  background: #ffffff;
}
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--color-ink-muted-48); }

                       
.swatch {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: 8px;
  border: 1px solid var(--color-hairline);
}
.label {
  font-family: var(--font-text);
  font-size: 11px;
  letter-spacing: -0.1px;
  color: var(--color-ink);
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--color-ink-muted-48);
}