.subgroup-emoji-grid{gap:var(--space-4);display:grid}.subgroup-emoji-grid__card{gap:var(--space-3);padding:var(--space-5);border:1px solid color-mix(in srgb, var(--color-gray-subtle) 72%, transparent);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-sm);color:var(--color-gray-normal);flex-direction:column;transition:transform .16s,border-color .16s,box-shadow .16s;display:flex;position:relative}.subgroup-emoji-grid__card-link{z-index:2;border-radius:inherit;position:absolute;inset:0}.subgroup-emoji-grid__card:hover{border-color:color-mix(in srgb, var(--color-primary-accent) 26%, var(--color-gray-subtle));box-shadow:var(--shadow-md);transform:translateY(-1px)}.subgroup-emoji-grid__card:has(.subgroup-emoji-grid__card-link:focus-visible){border-color:color-mix(in srgb, var(--color-primary-accent) 34%, var(--color-gray-subtle));box-shadow:var(--shadow-md)}.subgroup-emoji-grid__top{justify-content:space-between;align-items:flex-start;gap:var(--space-4);display:flex;position:relative}.subgroup-emoji-grid__media{align-items:center;gap:var(--space-2);flex-direction:column;flex-shrink:0;display:flex}.subgroup-emoji-grid__glyph-link{border-radius:1rem;display:flex}.subgroup-emoji-grid__glyph{background:color-mix(in srgb, var(--color-page) 28%, var(--color-surface));width:5rem;height:5rem;color:var(--color-gray-strong);box-shadow:var(--shadow-sm);border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;font-size:2.75rem;line-height:1;display:flex}.subgroup-emoji-grid__glyph--fallback{padding-inline:var(--space-2);text-align:center;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.6875rem}.subgroup-emoji-grid__copy-button{z-index:3;border:1px solid var(--color-gray-subtle);background:var(--color-surface);color:var(--color-gray-strong);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);border-radius:.5rem;align-items:center;gap:.375rem;padding:.3125rem .5625rem;transition:border-color .16s,color .16s,background-color .16s;display:inline-flex;position:relative}.subgroup-emoji-grid__copy-button[data-copied=true]{border-color:var(--color-primary-accent);color:var(--color-primary-accent)}.subgroup-emoji-grid__copy-icon{justify-content:center;align-items:center;width:.875rem;height:.875rem;display:inline-flex}.subgroup-emoji-grid__copy-icon svg{width:100%;height:100%}.subgroup-emoji-grid__copy-icon-check,.subgroup-emoji-grid__copy-button[data-copied=true] .subgroup-emoji-grid__copy-icon-copy{display:none}.subgroup-emoji-grid__copy-button[data-copied=true] .subgroup-emoji-grid__copy-icon-check{display:block}.subgroup-emoji-grid__meta{align-items:flex-end;gap:var(--space-1);text-align:right;min-width:0;color:var(--color-gray-muted);font-size:var(--font-size-xs);flex-direction:column;flex:1;line-height:1.5;display:flex}.subgroup-emoji-grid__unicode{margin-top:var(--space-1);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.6875rem}.subgroup-emoji-grid__content{gap:var(--space-2);display:grid;position:relative}.subgroup-emoji-grid__title{color:var(--color-gray-strong);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);line-height:1.35}.subgroup-emoji-grid__card:hover .subgroup-emoji-grid__title{color:var(--color-primary-accent)}.subgroup-emoji-grid__variant-count{color:var(--color-gray-muted);font-size:var(--font-size-sm);line-height:1.5}.subgroup-emoji-grid__description{color:var(--color-gray-muted);font-size:var(--font-size-sm);line-height:var(--line-height-relaxed)}.subgroup-emoji-grid:not(.subgroup-emoji-grid--row) .subgroup-emoji-grid__description{-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.subgroup-emoji-grid__tones{z-index:3;gap:var(--space-2);padding-top:var(--space-1);flex-wrap:wrap;display:flex;position:relative}.subgroup-emoji-grid__tone-button{border:1px solid var(--color-gray-subtle);background:var(--color-surface);width:2.25rem;height:2.25rem;color:var(--color-gray-strong);border-radius:.875rem;justify-content:center;align-items:center;font-size:1.125rem;transition:border-color .16s,background-color .16s,color .16s;display:inline-flex}.subgroup-emoji-grid__tone-button:hover{border-color:var(--color-primary-accent);background:color-mix(in srgb, var(--color-page) 24%, var(--color-surface))}.subgroup-emoji-grid__tone-button--active{border-color:var(--color-primary-accent);background:color-mix(in srgb, var(--color-primary-muted) 18%, var(--color-surface))}.subgroup-emoji-grid__card-link:focus-visible,.subgroup-emoji-grid__copy-button:focus-visible,.subgroup-emoji-grid__tone-button:focus-visible{outline:2px solid color-mix(in srgb, var(--color-primary-accent) 55%, white);outline-offset:2px}.subgroup-emoji-grid--row{grid-template-columns:minmax(0,1fr)}.subgroup-emoji-grid--row .subgroup-emoji-grid__card{gap:var(--space-4) var(--space-5);grid-template-columns:auto minmax(0,1fr);align-items:start;display:grid}.subgroup-emoji-grid--row .subgroup-emoji-grid__top{display:contents}.subgroup-emoji-grid--row .subgroup-emoji-grid__media{grid-area:1/1/span 2}.subgroup-emoji-grid--row .subgroup-emoji-grid__content{grid-area:1/2;min-width:0}.subgroup-emoji-grid--row .subgroup-emoji-grid__meta{text-align:left;grid-area:2/2;align-items:flex-start}.subgroup-emoji-grid--row .subgroup-emoji-grid__unicode{margin-top:0}.subgroup-emoji-grid--row .subgroup-emoji-grid__description{max-width:46rem}.subgroup-emoji-grid--row .subgroup-emoji-grid__tones{padding-top:var(--space-2)}@media (width>=640px){.subgroup-emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subgroup-emoji-grid--row{grid-template-columns:minmax(0,1fr)}}@media (width>=1024px){.subgroup-emoji-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.subgroup-emoji-grid--row{grid-template-columns:minmax(0,1fr)}.subgroup-emoji-grid--row .subgroup-emoji-grid__card{grid-template-columns:auto minmax(0,1fr) max-content}.subgroup-emoji-grid--row .subgroup-emoji-grid__media{grid-area:1/1}.subgroup-emoji-grid--row .subgroup-emoji-grid__content{grid-area:1/2;align-self:start}.subgroup-emoji-grid--row .subgroup-emoji-grid__meta{text-align:right;grid-area:1/3;align-items:flex-end}}
