.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));grid-gap:1.5rem;gap:1.5rem}.swatch-chip{height:140px;border:1px solid color-mix(in srgb,var(--color-foreground) 22%,transparent)}.swatch-meta{padding-top:.9rem;display:flex;flex-direction:column;gap:.2rem}.swatch-name{font-size:var(--font-size--md);font-weight:500}.swatch-hex{color:var(--color-muted);letter-spacing:.08em}.swatch-hex,.swatch-role{font-size:var(--font-size--sm)}.swatch-role{margin-top:.5rem;color:var(--color-subdued);line-height:1.5}.type-specimen{border-top:var(--border-hairline)}.type-row{padding:clamp(1.75rem,4vw,3rem) 0;border-bottom:var(--border-hairline);display:grid;grid-template-columns:220px 1fr;grid-gap:2rem;gap:2rem;align-items:baseline}.type-tag{padding-top:.4rem}.specimen-display{font-size:clamp(3rem,8vw,6.5rem)}.specimen-heading{font-size:clamp(2rem,4.5vw,3.5rem)}.specimen-body{font-size:var(--font-size--lg);line-height:1.6;color:var(--color-subdued);max-width:52ch}.specimen-label{color:var(--color-foreground)}.scale-table{width:100%;margin-top:clamp(2.5rem,5vw,4rem);border-collapse:collapse;font-size:var(--font-size--sm)}.scale-table td,.scale-table th{text-align:left;padding:.9rem 1rem .9rem 0;border-bottom:var(--border-hairline)}.scale-table th{font-weight:400}.scale-table td:first-child{font-family:var(--font-display),serif;font-size:var(--font-size--md)}.shape-demo{display:grid;grid-template-columns:1fr 1fr;grid-gap:2rem;gap:2rem}.shape-block{border:var(--border-hairline);padding:clamp(2rem,5vw,3.5rem);display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}.square-input{display:inline-block;letter-spacing:.05em;padding:1rem 1.25rem;border:1px solid var(--color-foreground);border-radius:var(--radius-square);color:var(--color-muted);min-width:240px}.shape-note,.square-input{font-size:var(--font-size--sm)}.shape-note{color:var(--color-subdued);line-height:1.6}.anatomy-list{list-style:none;margin-top:clamp(2.5rem,5vw,4rem);border-top:var(--border-hairline)}.anatomy-list li{display:grid;grid-template-columns:220px 1fr;grid-gap:2rem;gap:2rem;padding:1.75rem 0;border-bottom:var(--border-hairline)}.anatomy-list p{font-size:var(--font-size--md);color:var(--color-subdued);max-width:68ch}.anatomy-figure{margin-top:clamp(3rem,6vw,5rem)}.anatomy-figure figcaption{margin-top:1rem}@media (max-width:768px){.anatomy-list li,.type-row{grid-template-columns:1fr;gap:.75rem}.shape-demo{grid-template-columns:1fr}}