.ico-tile { --ic: var(--text-dim);
  width: var(--ico-sz, 40px); height: var(--ico-sz, 40px); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: calc(var(--ico-sz, 40px) / 3.6);
  color: var(--ic);
  background: color-mix(in srgb, var(--ic) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ic) 24%, transparent); }
.ico-tile .ico { width: 55%; height: 55%; display: block; }
.ico-tile.ic-brand .ico { width: 52%; height: 52%; }
.ico-tile.ic-brand.ic-wide .ico { width: 86%; height: 86%; }
.ico-tile.ic-art .ico { width: 68%; height: 68%; }
.ico-tile.ic-letter { font-weight: 750; font-size: calc(var(--ico-sz, 40px) * .42); line-height: 1;
  letter-spacing: -.02em; font-family: inherit;
  background: color-mix(in srgb, var(--ic) 9%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--ic) 62%, transparent); }
:root[data-theme="light"] .ico-tile.ic-letter { background: color-mix(in srgb, var(--ic) 8%, #fff);
  border-color: color-mix(in srgb, var(--ic) 70%, #000); }
.ic-rose { --ic: #f2708a; }
.ic-amber { --ic: #e0a458; }
.ic-green { --ic: #34c37e; }
.ic-cyan { --ic: #35b7c8; }
.ic-violet { --ic: #8b7ff8; }
.ic-blue { --ic: #4f8ff7; }
.ic-teal { --ic: #2fb8a0; }
.ic-slate { --ic: #9aa1ad; }
:root[data-theme="light"] .ico-tile { background: color-mix(in srgb, var(--ic) 15%, #fff);
  border-color: color-mix(in srgb, var(--ic) 34%, transparent);
  color: color-mix(in srgb, var(--ic) 78%, #000); }