.pg-bar { gap: 12px; }
.pg-kbd { margin-left: 2px; background: rgba(0,0,0,.18); color: inherit; border-color: transparent; box-shadow: none; }
.pg-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 400px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.pg-sw { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; min-width: 0; transition: background-color 280ms var(--ease); }
.pg-tools { display: flex; gap: 4px; opacity: .55; transition: opacity var(--dur); }
.pg-sw:hover .pg-tools, .pg-sw:focus-within .pg-tools, .pg-sw.locked .pg-tools { opacity: 1; }
.pg-ico { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: inherit; cursor: pointer; transition: background var(--dur); }
.pg-ico:hover { background: rgba(127,127,127,.22); }
.pg-ico[aria-pressed="true"] { background: rgba(127,127,127,.3); }
.pg-ico[aria-pressed="false"] svg { opacity: .7; }
.pg-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.pg-info { display: grid; gap: 4px; min-width: 0; }
.pg-hex { width: 100%; min-width: 0; padding: 2px 4px; margin-left: -4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: inherit; font-size: 22px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.pg-hex:hover { border-color: rgba(127,127,127,.35); }
.pg-hex:focus { border-color: currentColor; outline: none; }
.pg-lch { font-size: 11.5px; opacity: .8; overflow-wrap: anywhere; }
.pg-con { white-space: pre-line; font-size: 11.5px; font-weight: 550; opacity: .85; }
.pg-saved { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.pg-saved-row { flex-wrap: nowrap; gap: 6px; }
.pg-strip { flex: 1; display: flex; height: 34px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); transition: transform 120ms; }
.pg-strip:hover { transform: translateY(-1px); }
.pg-strip span { flex: 1; }
.pg-lower { align-items: start; }
.pg-lower .out { max-height: 260px; overflow: auto; }
@media (max-width: 760px) {
  .pg-swatches { grid-template-columns: minmax(0, 1fr); height: auto; }
  .pg-sw { flex-direction: row-reverse; align-items: center; min-height: 92px; padding: 10px 12px; gap: 8px; }
  .pg-tools { opacity: 1; }
  .pg-hex { font-size: 18px; }
  .pg-ico { width: 30px; height: 30px; }
}