#palette-related-section { min-width: 0; margin: 0 0 23px; padding: 16px; border: 1px solid var(--site-edge, var(--line)); border-radius: 11px; background: var(--surface); }
.palette-related-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.palette-related-heading h2 { margin: 0 0 5px; color: var(--ink); font-size: 12px; font-weight: 550; }
.palette-related-heading p, .palette-related-heading > span { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.palette-related-heading > span { text-align: right; }
.palette-related-row { display: flex; align-items: stretch; min-width: 0; gap: 12px; }
.palette-related-colors { display: flex; flex: 1 1 auto; min-width: 0; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; scrollbar-width: thin; scrollbar-color: var(--site-edge, var(--line)) transparent; overscroll-behavior-x: contain; }
.palette-related-color { display: flex; flex-direction: column; align-items: stretch; flex: 0 0 82px; width: 82px; gap: 6px; padding: 5px; border: 1px solid var(--site-edge, var(--line)); border-radius: 7px; text-align: left; background: var(--surface); color: var(--ink); }
.palette-related-color i { display: block; width: 100%; height: 35px; border: 1px solid #0000000a; border-radius: 4px; }
.palette-related-color > span { font-family: ui-monospace, monospace; font-size: 10px; line-height: 1.3; }
.palette-related-color small { font-size: 9px; line-height: 1.3; color: var(--muted); }
.palette-related-color.is-current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.palette-related-color.is-current small { color: var(--green); }
.palette-related-color:hover { border-color: var(--green); }
.palette-related-color:focus-visible, .palette-related-more:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.palette-related-more { display: flex; flex: 0 0 65px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; align-self: stretch; min-width: 0; margin-bottom: 8px; padding: 8px 5px; border: 1px solid var(--site-edge, var(--line)); border-radius: 7px; background: var(--green-pale); color: var(--green); font-size: 10px; }
.palette-related-more svg { width: 14px; height: 14px; }
.palette-related-more:disabled { cursor: wait; opacity: .6; }
.palette-related-status { min-height: 0; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }
.palette-related-status:not(:empty) { margin-top: 5px; }
@media (max-width: 600px) {
  #palette-related-section { padding: 13px 11px; margin-bottom: 18px; }
  .palette-related-heading { gap: 8px; }
  .palette-related-heading > span { max-width: 78px; font-size: 9px; }
  .palette-related-row { gap: 8px; }
  .palette-related-color { flex-basis: 76px; width: 76px; }
  .palette-related-more { flex-basis: 56px; }
}