/* Approved color bookmark index, integrated into the V5 homepage. */
.color-index{--nav-duration:320ms}.color-index .all-row{margin-bottom:24px}.color-index .all-filter{font-size:16px}
.color-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.color-item{--nav-rich:var(--tone-rich);--nav-light:var(--tone-light);border:0;min-width:0;text-align:left;cursor:pointer;position:relative;isolation:isolate;display:flex;flex-direction:column;color:#26372e;padding:22px 20px 17px;min-height:96px;background:transparent;}
.color-item[data-category=documents]{--nav-rich:#5bdb79;--nav-light:#70dcf4}
.color-item[data-category=research]{--nav-rich:#ad73ef;--nav-light:#d5b9ff}
.color-item[data-category=sales]{--nav-rich:#ffac69;--nav-light:#ffe66e}
.color-item[data-category=marketing]{--nav-rich:#e992c0;--nav-light:#ffbfa9}
.color-item[data-category=work]{--nav-rich:#efc27e;--nav-light:#f4e18a}
.color-item[data-category=money]{--nav-rich:#8cda69;--nav-light:#73dcc7}
.color-item[data-category=dev]{--nav-rich:#7c9bf2;--nav-light:#a8d8ff}
.color-label{position:relative;font:500 18px/1.3 Manrope;letter-spacing:-.5px;z-index:2;white-space:nowrap}
.color-meta{position:relative;z-index:2;font:10px/1.4 Mono;letter-spacing:.1px;color:#758276;margin-top:10px;transition:color var(--nav-duration)}
.choice-symbol{position:absolute;z-index:2;right:19px;bottom:16px;font:19px Manrope;opacity:0;transform:translate(-3px,3px);transition:opacity var(--nav-duration),transform var(--nav-duration)}
.color-item:hover .choice-symbol,.color-item:focus-visible .choice-symbol,.color-item[aria-pressed=true] .choice-symbol{opacity:1;transform:none}
.color-item[aria-pressed=true] .choice-symbol{font-size:0}.color-item[aria-pressed=true] .choice-symbol::after{content:'✓';font-size:15px}
.color-item[data-empty=true] .color-label{color:#647164}.color-item[data-empty=true] .color-meta{color:#7c887c}.color-item[data-empty=true] .color-material{filter:saturate(.65)}
.color-material{position:absolute;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 85% 10%,var(--nav-light),transparent 75%),var(--nav-rich)}
.ribbon .color-grid{column-gap:26px;row-gap:0;border-top:1px solid #ccd6c8;border-bottom:1px solid #ccd6c8}
.ribbon .color-item{padding:24px 3px 19px 27px;min-height:98px;background:transparent;border-radius:0}
.ribbon .color-item:nth-child(n+6){border-top:1px solid #dce2d8}
.ribbon .color-label{font-size:20px;letter-spacing:-.6px}
.ribbon .color-meta{margin-top:9px}
.ribbon .color-material{left:0;top:0;width:9px;height:46px;border-radius:0 0 3px 1px;transition:height var(--nav-duration) cubic-bezier(.2,.7,.2,1),width var(--nav-duration)}
.ribbon .color-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:48px;background:linear-gradient(90deg,var(--tone-soft),transparent);opacity:0;transition:opacity var(--nav-duration)}
.ribbon .color-item:hover .color-material,.ribbon .color-item:focus-visible .color-material{height:57px}
.ribbon .color-item[aria-pressed=true] .color-material{height:100%;width:5px;border-radius:0}
.ribbon .color-item:hover::before,.ribbon .color-item:focus-visible::before,.ribbon .color-item[aria-pressed=true]::before{opacity:1}
.ribbon .color-item[aria-pressed=true] .color-label{text-decoration:underline;text-decoration-color:var(--nav-rich);text-underline-offset:6px;text-decoration-thickness:2px}
.ribbon .choice-symbol{right:5px;bottom:18px}

.guide-v5 .color-index .all-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.guide-v5 .color-index .all-filter{padding:8px 0;font:500 16px Manrope;display:inline-flex;gap:13px;align-items:baseline;color:#586a60;background:none;border:0;border-bottom:1px solid transparent}
.guide-v5 .color-index .all-filter[aria-pressed=true]{color:#172b20;border-bottom-color:#172b20}
.guide-v5 .color-index .nav-count{font:10px Mono;color:#7b897f;letter-spacing:.2px}
.guide-v5 .color-index .grid-caption{font:10px Mono;color:#7a857e}
.guide-v5 .catalog-results{display:flex;align-items:center;justify-content:space-between;min-height:28px;margin-top:24px}
.guide-v5 .catalog-reset{border:0;background:none;font:12px Inter;color:#52645a;padding:5px 0}
.guide-v5 .catalog-reset[hidden]{display:none}
.guide-v5 .catalog-toolbar{margin-bottom:23px}
@media(prefers-reduced-motion:reduce){.color-index{--nav-duration:0ms}}