.pal-starters>h2,.pal-maker>h2,.pal-rules>h2,.pal-contrast>h2{margin-top:22px}
.pal-jump{margin:var(--s1) 0 2px;font-size:14px}
.pal-card{display:flex;flex-direction:column;gap:10px}
.pal-head{font-size:var(--t3);font-weight:700;display:flex;gap:var(--s2);align-items:baseline}
.pal-angle{font-size:var(--t2);font-weight:500;color:var(--mut);font-variant-numeric:tabular-nums}
.pal-strip{display:block;width:100%;height:44px;border:1px solid var(--line);border-radius:12px;overflow:hidden}

.pal-colors{display:grid;gap:6px;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.pal-colors[data-n="2"]{--n:2}.pal-colors[data-n="3"]{--n:3}.pal-colors[data-n="4"]{--n:2}
@media(min-width:800px){.pal-colors[data-n="4"]{--n:4}}
.pal-color{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:48px;padding:6px var(--s1);font-weight:500}
.pal-color code{font-size:14px;font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pal-color .copy-label{font-size:12px;color:var(--mut)}
.pal-code{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.pal-swatch{flex:none}.pal-swatch rect{stroke:var(--line);stroke-width:1}

.pal-best{display:flex;flex-direction:column;gap:3px;text-decoration:none;color:var(--tx);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.pal-best:hover .pal-pair{text-decoration:underline;text-underline-offset:3px}
.pal-pair{font-size:14px}.pal-pair code{font-size:var(--t2)}
.verdict{font-size:var(--t2);color:#b42318}.verdict[data-pass="true"]{color:#067647}
.pal-all{width:100%;min-height:48px}
.pal-all .copy-label{background:none;padding:0;margin:0;border-radius:0;color:inherit;font:inherit}
.pal-card .status{margin:calc(-1 * var(--s1)) 0 0;min-height:20px;font-size:var(--t2)}

.pal-input{display:flex;gap:var(--s2);align-items:stretch}
.pal-input input[type=color]{flex:0 0 48px;width:48px;height:48px;padding:3px;cursor:pointer}
.pal-input input[type=text]{flex:1 1 auto;min-height:48px;font-family:var(--font-mono)}
.pal-maker .chips{margin-top:var(--s1)}.pal-maker .chip{min-height:var(--touch)}
#maker-result{margin-top:var(--s1)}

.pal-rules dl{display:grid;gap:10px;margin-top:10px}.pal-rules dt{font-weight:700;font-size:14px}.pal-rules dd{margin:0;font-size:var(--t2);color:var(--mut)}

.pal-pairs{border-top:1px solid var(--line);padding-top:10px;margin-top:var(--s3)}
.pal-pairs h3{font-size:14px;font-weight:700;overflow-wrap:anywhere}.pal-pairs h3 code{font-size:12px;font-weight:500;color:var(--mut)}
.pal-pairrow{display:flex;flex-wrap:wrap;gap:var(--s1) 14px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line)}
.pal-pairrow:last-child{border-bottom:0}

.pal-maker [hidden],#maker-pairs[hidden]{display:none!important}
.pal-base{display:flex;align-items:center;gap:var(--s2);margin-block:var(--s3)}
.color-input-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-block:var(--s2)}
.color-input-hint{font-size:14px;margin-block:var(--s3);overflow-wrap:anywhere}
#pal-hex-error,#palette-origin,#palette-lock{overflow-wrap:anywhere}
#pal-hex-error:not([role="status"]){color:var(--mut)}
#text-contrast{margin-top:var(--s4)}
#text-contrast table{width:100%;border-collapse:collapse;font-size:14px}
#text-contrast th,#text-contrast td{text-align:left;padding:var(--s2) var(--s1);border-bottom:1px solid var(--line);overflow-wrap:anywhere}
#text-contrast caption{text-align:left;margin-block:var(--s2)}