.cartoon-palettes-page .blog-main { max-width: 1080px; }
.cartoon-palettes-page [hidden] { display: none !important; }
.palette-page { --palette-border: color-mix(in srgb, var(--text-muted) 25%, transparent); }
.palette-page *, .palette-page *::before, .palette-page *::after { box-sizing: border-box; }
.palette-intro { margin-bottom: 1.8rem; }
.palette-eyebrow { color: var(--accent); font-size: .76rem; font-weight: 750; letter-spacing: .12em; }
.palette-page .palette-intro h1 { margin-top: .55rem; margin-bottom: .85rem; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08; }
.palette-page .palette-scope { max-width: 760px; color: var(--text-muted); font-size: .93rem; line-height: 1.6; }
.palette-search { margin: 0 0 2rem; padding: 1.15rem; background: var(--card-bg); border: 1px solid var(--palette-border); border-radius: 8px; }
.palette-search label { display: block; margin-bottom: .55rem; font-weight: 650; }
.palette-search-row { display: flex; gap: .65rem; }
.palette-search input { width: 100%; min-width: 0; }
.palette-page input, .palette-page select, .palette-page textarea { color: var(--text-main); background: var(--bg-page); border: 1px solid var(--palette-border); border-radius: 5px; padding: .65rem .75rem; font: inherit; }
.palette-page input { font-size: 1rem; }
.palette-page button { cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; border: 1px solid var(--palette-border); border-radius: 5px; color: var(--text-main); background: var(--card-bg); padding: .65rem .85rem; min-height: 42px; }
.palette-page button:hover { border-color: var(--accent); }
.palette-page button:disabled { cursor: wait; opacity: .65; }
.palette-page :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.palette-search #palette-result-count { margin: .5rem 0 0; font-size: .83rem; color: var(--text-muted); }
.palette-group { margin: 0 0 2.6rem; scroll-margin-top: 96px; }
.palette-group-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.palette-page .palette-group h2 { margin: 0 0 .35rem; font-size: 1.45rem; }
.palette-group-head p { margin: 0; color: var(--text-muted); font-size: .92rem; }
.palette-actions { display: flex; gap: .55rem; align-items: end; flex-shrink: 0; }
.palette-actions label { font-size: .78rem; display: grid; gap: .2rem; }
.palette-actions select { min-height: 42px; padding: .5rem; }
.palette-page .palette-color-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.palette-page .palette-color { min-width: 0; margin: 0; border: 1px solid var(--palette-border); border-radius: 8px; overflow: hidden; background: var(--card-bg); }
.palette-swatch { height: 94px; background: var(--palette-color); display: flex; justify-content: flex-end; align-items: end; padding: 8px; }
.palette-swatch img { object-fit: contain; border-radius: 4px; background: #fff; }
.palette-color-body { padding: .9rem; }
.palette-page .palette-color h3 { font-size: 1rem; margin: 0 0 .25rem; line-height: 1.3; }
.palette-page .palette-part { font-size: .83rem; color: var(--text-muted); margin: 0 0 .65rem; }
.palette-color code { display: block; background: transparent; padding: 0; font-size: .89rem; overflow-wrap: anywhere; color: var(--text-main); }
.palette-page .palette-copy-color { width: 100%; margin-top: .7rem; padding: .45rem .5rem; font-size: .82rem; }
.palette-links { display: grid; gap: .55rem; margin-top: .85rem; font-size: .78rem; line-height: 1.45; }
.palette-links a { width: fit-content; }
.palette-status { margin: .65rem 0 0; min-height: 1.2em; font-size: .86rem; color: var(--text-muted); }
.palette-manual label { display: block; font-size: .86rem; margin-bottom: .4rem; }
.palette-manual textarea { width: 100%; resize: vertical; font-family: monospace; }
.palette-empty { border: 1px dashed var(--palette-border); padding: 1.2rem; border-radius: 8px; margin-bottom: 2rem; }
.palette-page .palette-empty h2 { margin-top: 0; }
.palette-notes { border-top: 1px solid var(--palette-border); padding-top: 1rem; font-size: .93rem; }
@media (max-width: 640px) {
    .palette-group-head { display: block; }
    .palette-actions { margin-top: .8rem; }
    .palette-page .palette-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .palette-color-body { padding: .75rem .6rem; }
    .palette-swatch { height: 86px; }
    .palette-page .palette-color h3 { font-size: .92rem; }
    .palette-color code { font-size: .78rem; }
}