/* The specimen: nine families, twelve effects each, every one numbered. */
.sheet { display: grid; gap: clamp(12px, 1.8vw, 22px); padding: clamp(12px, 1.8vw, 22px) clamp(12px, 2.4vw, 28px) 48px; }
.fam { padding: 16px 18px 18px; }
.fam ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.fam li { display: grid; gap: 8px; align-content: start; min-width: 0; }
.fam .xmark { width: 100%; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fam .cap { display: flex; gap: 7px; align-items: baseline; min-width: 0; }
.fam .cap b { font: 500 10px/1 var(--mono); background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fam .cap span { font: 400 13px/1.2 var(--serif); color: var(--tx2); min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
@media (max-width: 1180px) { .fam ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fam ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 420px) { .fam ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } }