.pl{display:flex;flex-direction:column;gap:20px}.pl__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:start}.pl__inputs{gap:20px;padding:24px}.pl__imgwrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:repeating-conic-gradient(color-mix(in oklab,var(--fg) 8%,transparent) 0 25%,transparent 0 50%) 0 0 /16px 16px}.pl__img{display:block;width:100%;max-height:320px;object-fit:contain}.pl__meta{font-size:12px;line-height:1.6;color:var(--fg-faint);margin:6px 0 0;overflow-wrap:anywhere}.pl__result{display:flex;flex-direction:column;gap:16px;min-width:0}.pl__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.pl__swatch{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-height:104px;padding:12px;border-radius:var(--radius);border:1px solid var(--line);animation:pl-in .32s ease-out both}.pl__swatch .ui-btn{position:absolute;top:6px;inset-inline-end:6px;color:inherit}.pl__hex{font-family:var(--font-mono);font-size:var(--text-sm)}.pl__share{font-size:12px;opacity:.85;font-variant-numeric:tabular-nums}.pl__bar{display:flex;height:12px;margin-top:14px;border-radius:999px;overflow:hidden}.pl__bar span{min-width:2px}@keyframes pl-in{0%{transform:translateY(6px);opacity:0}to{transform:none;opacity:1}}@media (prefers-reduced-motion:reduce){.pl__swatch{animation:none}}@media (max-width:960px){.pl__grid{grid-template-columns:minmax(0,1fr)}}@media (pointer:coarse){.pl__swatch .ui-btn{--h:44px;min-width:44px}}