.pg-colors .ratio{border:1px solid var(--line);border-radius:14px;height:70px;display:flex;overflow:hidden}.pg-colors .ratio i{font:700 var(--t-xs) / 1 var(--sans);white-space:nowrap;justify-content:center;align-items:center;display:flex}.pg-colors .ratio .r-cobalt{background:var(--cobalt);color:#fff;flex:60}.pg-colors .ratio .r-white{color:var(--ink-3);border-right:1px solid var(--line);background:#fff;flex:25}.pg-colors .ratio .r-coral{background:var(--coral);color:#fff;flex:10}.pg-colors .ratio .r-lime{background:var(--lime);color:var(--ink);flex:5}.pg-colors .pair{border-radius:12px;align-items:center;gap:14px;padding:16px 18px;font-weight:700;display:flex}.pg-colors .pair .lvl{font:700 var(--t-xs) / 1 var(--mono);white-space:nowrap;background:#fff3;border-radius:7px;margin-left:auto;padding:6px 10px}.pg-colors .role-card .dot{width:12px;height:12px;display:inline-block}.pg-colors .scale-list{flex-direction:column;gap:22px;display:flex}.pg-colors .scale-meta{align-items:baseline;gap:10px;margin-bottom:8px;display:flex}.pg-colors .scale-meta b{letter-spacing:-.01em;font-size:1rem;font-weight:800}.pg-colors .scale-meta code{font-family:var(--mono);color:var(--ink-3);font-size:12px}.pg-colors .scale-track{grid-template-columns:repeat(11,1fr);gap:4px;display:grid}.pg-colors .scale-chip{cursor:pointer;color:#fff;text-align:left;min-height:64px;transition:transform .16s var(--e), box-shadow .16s var(--e);border:none;border-radius:9px;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px 7px;display:flex;position:relative;overflow:hidden}.pg-colors .scale-chip:hover{z-index:1;transform:translateY(-3px)}.pg-colors .scale-chip.light{color:var(--ink)}.pg-colors .scale-chip .step{font:700 12px/1 var(--mono)}.pg-colors .scale-chip .val{font:600 9.5px/1 var(--mono);opacity:.72;letter-spacing:-.02em}.pg-colors .scale-chip.brand{box-shadow:inset 0 0 0 2px #ffffffeb}.pg-colors .scale-chip.brand.light{box-shadow:inset 0 0 0 2px var(--ink)}.pg-colors .scale-chip .brand-flag{font:800 7.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink);background:#fff;border-radius:5px;padding:3px 5px;position:absolute;top:6px;left:6px}.pg-colors .scale-chip.light .brand-flag{background:var(--ink);color:#fff}@media (max-width:860px){.pg-colors .scale-chip{border-radius:7px;min-height:52px;padding:6px 4px}.pg-colors .scale-chip .val,.pg-colors .scale-chip .brand-flag{display:none}}@media (prefers-reduced-motion:reduce){.pg-colors .scale-chip{transition:none}}