body[data-calculator-slug="tools/color-palette"] { overflow-wrap: anywhere; }
.cpal-shell { align-items: start; }
.cpal-shell > *, .cpal-inputs > * { min-width: 0; }
.cpal-inputs { display: grid; gap: 1rem; }
.cpal-app input[type="color"] { width: 100%; max-width: 8rem; min-height: 44px; cursor: pointer; }
.cpal-app input[type="text"], .cpal-app textarea { width: 100%; box-sizing: border-box; }
.cpal-app .button { min-width: 44px; min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.cpal-app #cpal-apply { background: #1d4ed8; color: #ffffff; }
.cpal-app #cpal-apply:hover { background: #1e40af; color: #ffffff; }
.cpal-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.cpal-app #cpal-grid { margin-top: 1rem; min-height: 28rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cpal-app .cpal-swatch { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: .5rem; min-height: 120px; min-width: 0; font: inherit; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; border: 2px solid transparent; }
.cpal-swatch strong { display: block; font-family: ui-monospace, monospace; }
.cpal-selected-mark { min-height: 1.5em; font-size: .85em; }
.cpal-swatch[aria-pressed="true"] { border-color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.cpal-app button:focus-visible, .cpal-app input:focus-visible, .cpal-app textarea:focus-visible, .cpal-app summary:focus-visible { outline: 3px solid var(--accent, #2563eb); outline-offset: 4px; }
.cpal-app .cpal-swatch:focus-visible { outline: 3px solid var(--fg, #172033); outline-offset: 4px; }
.cpal-detail-swatch { min-height: 96px; font-family: ui-monospace, monospace; }
.cpal-details { display: grid; gap: 1rem; }
.cpal-details dd { margin: .3rem 0 0; }
.cpal-details .w40-code { display: block; min-height: 1.5em; overflow-wrap: anywhere; }
.cpal-keywords { margin-top: 1rem; }
.cpal-keywords p { overflow-wrap: anywhere; }
.cpal-error { color: #9f1239; min-height: 1.5em; }
.cpal-app .w40-banner { color: #172554; }
.cpal-app .w40-banner--error { color: #881337; }
.cpal-app .w40-banner--warning { color: #713f12; }
.cpal-app [hidden] { display: none !important; }
.cpal-app #cpal-manual { margin-top: 1rem; }
.cpal-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root.dark .cpal-error { color: #fda4af; }
@media (min-width: 600px) {
  .cpal-inputs { grid-template-columns: 8rem minmax(0, 1fr); }
  .cpal-app #cpal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .cpal-shell { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (forced-colors: active) {
  .cpal-app .cpal-swatch, .cpal-app .cpal-detail-swatch { forced-color-adjust: none; }
  .cpal-app .cpal-swatch:focus-visible { outline-color: Highlight; }
}