/* genre */
/* genre chip (GenreChip.kt): surfaceContainer tonal, tight padding, 14px accent icon */
.gchip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;min-height:32px;border-radius:20px;
  background:var(--md-surface-container);color:var(--md-on-surface);flex:0 0 auto;cursor:pointer;
  font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px;white-space:nowrap;
  transition:border-radius var(--dur-sheet) var(--ease-sheet)}
.gchip:active{border-radius:10px}
.gchip .ic{width:14px;height:14px;display:grid;place-items:center;color:var(--md-primary);flex:0 0 auto}
.gchip .ic svg{width:14px;height:14px;fill:currentColor;
  transition:transform var(--dur-chipIcon) var(--ease-chipIcon)}
.gchip:active .ic svg{transform:scale(1.35)}
/* genre tile (GenreCard.kt): 96 tall, 20 radius, surfaceContainerHigh, 48px motif in the accent */
@font-face{
  font-family:"Heebo";src:url("/fonts/heebo-bold.ttf") format("truetype");
  font-weight:700;font-style:normal;font-display:swap;
}
.gcard{
  position:relative;height:96px;border-radius:20px;background:var(--md-surface-container-high);
  cursor:pointer;overflow:hidden;
}
/* GenreWeaveLayer: the motif tiled faintly in the accent, drifting slowly. */
.gcard .weave{position:absolute;inset:0;color:var(--md-primary);opacity:.06;pointer-events:none}
.gcard .weave i{
  position:absolute;inset:-40px;background-repeat:repeat;background-size:40px 80px;
  animation:weave 24s linear infinite;
}
.gcard .mot{position:absolute;top:50%;right:16px;transform:translateY(-50%);width:48px;height:48px;
  color:var(--md-primary);opacity:.30}
.gcard .mot svg{width:100%;height:100%;fill:currentColor;display:block}
.gcard .gt{
  position:absolute;left:16px;right:76px;bottom:16px;
  font-family:"Heebo",system-ui,sans-serif;font-size:16px;line-height:20px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gcard:hover{background:var(--md-surface-container-highest)}
.gsec{padding:6px 12px}
.gsec.first{padding-top:16px}
/* GenreCatalogTopSpacing */
.gsec:not(.first){padding-top:22px}
/* GenreSectionGap */
.gsect{font-family:"Heebo",system-ui,sans-serif;font-size:22px;line-height:28px;font-weight:700;margin:0 0 16px;padding:0 4px}
.genregrid{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}