/* Color palette generator landing page (tools/color-palette-generator only) */
.cpg-demo{display:grid;gap:0;align-self:start}
.cpg-demo-head{display:grid;gap:4px;padding:18px 20px 14px;border-bottom:1px solid #dbe2f3}
.cpg-demo-head strong{font-size:1.1rem;line-height:1.3;color:#17213c}
.cpg-demo-head small{font-size:.86rem;line-height:1.5;color:#4a5670}
.cpg-figure{margin:0;line-height:0;background:#F5F0E8}
.cpg-photo{display:block;width:100%;height:auto}
.cpg-swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0;padding:16px 20px 6px;list-style:none}
.cpg-swatches li{display:grid;gap:4px;min-width:0;text-align:center}
.cpg-chip{display:block;height:54px;border-radius:10px;border:1px solid rgba(23,33,60,.14)}
.cpg-c1{background:#2C1810}.cpg-c2{background:#5C4033}.cpg-c3{background:#8B6914}
.cpg-c4{background:#C08A4E}.cpg-c5{background:#D4C5A9}.cpg-c6{background:#F5F0E8}
.cpg-swatches code{font:700 .8rem/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;color:#17213c;overflow-wrap:anywhere;user-select:all}
.cpg-swatches small{font-size:.72rem;line-height:1.3;color:#4a5670}
.cpg-contrast{display:flex;align-items:center;gap:14px;margin:10px 20px 0;padding:12px 14px;border:1px solid #dbe2f3;border-radius:12px;background:#fbfcff}
.cpg-sample{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border:1px solid #dbe2f3;border-radius:10px;background:#fff;color:#8B6914;font-size:1.5rem;font-weight:800}
.cpg-contrast p{margin:0;font-size:.92rem;line-height:1.45;color:#17213c}
.cpg-contrast small{font-size:.8rem;color:#4a5670}
.cpg-badge{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:#e3f4ea;color:#155c38;font-size:.75rem;font-weight:800;letter-spacing:.04em}
.cpg-code{margin:12px 20px 0;padding:12px 14px;border-radius:12px;background:#0b213d;color:#e8eefb;font:600 .82rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;overflow-x:auto}
.cpg-foot{margin:10px 20px 18px;font-size:.84rem;line-height:1.5;color:#4a5670}
@media (max-width:560px){
  .cpg-swatches{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 14px 4px}
  .cpg-demo-head{padding:16px 14px 12px}
  .cpg-contrast,.cpg-code{margin-left:14px;margin-right:14px}
  .cpg-foot{margin:10px 14px 16px}
}