.gen-color-strip{display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}.gen-color-strip__label{font-family:var(--font-mono);font-size:var(--text-caption);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted)}.gen-color-strip__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2xs)}.gen-color-strip__item{position:relative;display:inline-flex}.gen-color-strip__chip{display:inline-block;width:26px;height:26px;border-radius:4px;border:1px solid var(--color-border-subtle);box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.1);cursor:default;outline:none;transition:transform .14s ease,box-shadow .18s ease,border-color .16s ease}.gen-color-strip__chip:focus-visible,.gen-color-strip__chip:hover{transform:translateY(-2px) scale(1.06);border-color:var(--color-border-strong);box-shadow:0 4px 10px rgba(0,0,0,.15),inset 0 0 0 1px hsla(0,0%,100%,.14);z-index:2}.gen-color-strip__chip[data-metallic=true]{background-image:linear-gradient(140deg,hsla(0,0%,100%,.26),hsla(0,0%,100%,0) 45%,rgba(0,0,0,.2));background-blend-mode:overlay}.gen-color-strip__tooltip{position:absolute;top:calc(100% + var(--space-2xs));left:50%;transform:translateX(-50%) translateY(-2px);z-index:5;display:flex;flex-direction:column;gap:var(--space-4xs);padding:var(--space-xs) var(--space-sm);background:var(--color-text-primary);color:var(--color-on-image);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .14s ease,transform .14s ease}.gen-color-strip__item:focus-within .gen-color-strip__tooltip,.gen-color-strip__item:hover .gen-color-strip__tooltip{opacity:1;transform:translateX(-50%) translateY(0)}.gen-color-strip__tip-name{font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:500;color:var(--color-on-image);letter-spacing:-.005em}.gen-color-strip__tip-meta{color:var(--color-on-image-muted)}.gen-color-strip__more,.gen-color-strip__tip-meta{font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:.08em}.gen-color-strip__more{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:26px;padding:0 var(--space-xs);background:transparent;border:1px dashed var(--color-border-default);border-radius:4px;color:var(--color-text-muted);cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease}.gen-color-strip__more:focus-visible,.gen-color-strip__more:hover{background:var(--surface-tint-02);border-color:var(--color-text-muted);color:var(--color-text-primary);outline:none}@media (max-width:640px){.gen-color-strip__grid{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--space-3xs);scrollbar-width:none}.gen-color-strip__grid::-webkit-scrollbar{display:none}.gen-color-strip__chip{flex-shrink:0}.gen-color-strip__tooltip{top:auto;bottom:calc(100% + var(--space-2xs))}}