.qcb-color-block{--qcb-ink:var(--qolorio-heading, #171a1d);--qcb-muted:var(--qolorio-muted, #65717d);--qcb-paper:var(--qolorio-white, #ffffff);--qcb-surface:var(--qolorio-surface, #f7f9fb);--qcb-border:var(--qolorio-border, #d9e0e6);--qcb-blue:var(--qolorio-blue, #28618f);--qcb-blue-hover:var(--qolorio-blue-hover, #214f75);--qcb-yellow:var(--qolorio-yellow, #f2ab3c);--qcb-focus:var(--qolorio-black, #0a0a0a);position:relative;container:qcb-colors / inline-size;box-sizing:border-box;min-width:0;width:100%;margin-block:26px;padding:clamp(16px, 2.5vw, 24px);border:1px solid var(--qcb-border);border-radius:14px;background:var(--qcb-paper);color:var(--qcb-ink);font-family:var(--inspiro-font-main,Inter,ui-sans-serif,system-ui,sans-serif);font-size:15px;line-height:1.5}.qcb-color-block *,.qcb-color-block *::before,.qcb-color-block *::after{box-sizing:border-box}.qcb-color-block .qcb-heading{margin-bottom:16px}.qcb-color-block .qcb-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--qcb-muted);font-size:12px;font-weight:600;line-height:1.5}.qcb-color-block .qcb-brand-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--qcb-yellow)}.qcb-color-block .qcb-kicker-divider{color:var(--qcb-border)}.qcb-color-block .qcb-title{margin:7px 0 0;color:var(--qcb-ink);font-family:var(--inspiro-font-headings,inherit);font-size:19px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}.qcb-color-block .qcb-swatches{display:grid;grid-template-columns:repeat(var(--qcb-columns,4),minmax(0,1fr));gap:1px;padding:1px;overflow:hidden;border:1px solid var(--qcb-border);border-radius:10px;background:var(--qcb-border)}.qcb-color-block .qcb-color-button{appearance:none;display:flex;flex-direction:column;min-width:0;width:100%;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:var(--qcb-paper);color:var(--qcb-ink);font:inherit;text-align:left;text-transform:none;letter-spacing:0;box-shadow:none;cursor:pointer}.qcb-color-block .qcb-color-button:disabled{cursor:default;opacity:1}.qcb-color-block .qcb-color-button:hover,.qcb-color-block .qcb-color-button:focus-visible{background:var(--qcb-surface);color:var(--qcb-ink)}.qcb-color-block .qcb-color-button:focus-visible{outline:3px solid var(--qcb-focus);outline-offset:-3px}.qcb-color-block .qcb-swatch{display:block;flex-shrink:0;width:100%;height:112px;background:var(--qcb-swatch)}.qcb-color-block .qcb-color-meta{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:48px;width:100%;padding:10px 12px}.qcb-color-block .qcb-color-meta code{margin:0;padding:0;border:0;background:none;color:var(--qcb-ink);font:600 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;user-select:text}.qcb-color-block .qcb-copy-symbol{display:grid;flex:0 0 16px;width:16px;height:16px;color:var(--qcb-muted)}.qcb-color-block .qcb-copy-symbol svg{grid-area:1 / 1;display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.qcb-color-block .qcb-icon-check{visibility:hidden}.qcb-color-block .qcb-copied .qcb-icon-copy{visibility:hidden}.qcb-color-block .qcb-copied .qcb-icon-check{visibility:visible;color:var(--qcb-blue)}.qcb-color-block--cards .qcb-swatches{gap:10px;padding:0;overflow:visible;border:0;border-radius:0;background:none}.qcb-color-block--cards .qcb-color-button{border:1px solid var(--qcb-border);border-radius:10px}.qcb-color-block--cards .qcb-color-button:focus-visible{outline-offset:2px}.qcb-color-block--single .qcb-color-button{flex-direction:row;align-items:stretch}.qcb-color-block--single .qcb-swatch{width:150px;height:88px}.qcb-color-block--single .qcb-color-meta{padding-inline:18px}.qcb-color-block--single .qcb-color-meta code{font-size:16px}.qcb-color-block .qcb-caption{margin:14px 0 0;color:var(--qcb-muted);font-size:14px;line-height:1.6;white-space:pre-line;overflow-wrap:anywhere}.qcb-color-block .qcb-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:16px}.qcb-color-block .qcb-hint{flex:1 1 210px;margin:0;color:var(--qcb-muted);font-size:12px;line-height:1.6}.qcb-color-block .qcb-actions{display:flex;flex-wrap:wrap;gap:8px}.qcb-color-block .qcb-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin:0;padding:10px 15px;border:1px solid #fff0;border-radius:8px;font:600 13px/1.5 var(--inspiro-font-main,Inter,ui-sans-serif,system-ui,sans-serif);letter-spacing:0;text-transform:none;text-decoration:none;text-align:center;box-shadow:none;white-space:normal;cursor:pointer}.qcb-color-block .qcb-action-primary{border-color:var(--qcb-blue);background:var(--qcb-blue);color:var(--qcb-paper)}.qcb-color-block .qcb-action-primary:hover{border-color:var(--qcb-blue-hover);background:var(--qcb-blue-hover);color:var(--qcb-paper)}.qcb-color-block .qcb-action-secondary{border-color:var(--qcb-border);background:var(--qcb-paper);color:var(--qcb-ink)}.qcb-color-block .qcb-action-secondary:hover{background:var(--qcb-surface);color:var(--qcb-ink)}.qcb-color-block .qcb-action:focus-visible{outline:3px solid var(--qcb-focus);outline-offset:2px}.qcb-color-block .qcb-action:disabled{cursor:default}.qcb-color-block .qcb-feedback{position:absolute;z-index:2;inset-inline:16px;bottom:10px;width:fit-content;max-width:calc(100% - 32px);margin:0;padding:8px 12px;border:1px solid var(--qcb-border);border-radius:8px;background:var(--qcb-paper);color:var(--qcb-ink);font-size:13px;line-height:1.5;box-shadow:0 3px 16px rgb(23 26 29 / 10%);opacity:0;pointer-events:none}.qcb-color-block .qcb-feedback.is-visible{opacity:1}.qcb-color-block .qcb-feedback.is-error{position:static;max-width:none;margin-top:12px;box-shadow:none;color:var(--qolorio-danger,#b42318)}.qcb-color-block .qcb-manual-copy{display:block;width:100%;min-height:80px;margin-top:8px;padding:10px;border:1px solid var(--qcb-border);border-radius:8px;background:var(--qcb-surface);color:var(--qcb-ink);font:13px/1.6 ui-monospace,monospace;resize:vertical}.qcb-color-block .qcb-manual-copy[hidden]{display:none}.qcb-color-block .qcb-noscript{margin:12px 0 0;color:var(--qcb-muted);font-size:13px}@media (max-width:760px){.qcb-color-block .qcb-swatches{grid-template-columns:repeat(var(--qcb-tablet-columns,3),minmax(0,1fr))}}@media (max-width:480px){.qcb-color-block .qcb-swatches{grid-template-columns:repeat(var(--qcb-mobile-columns,2),minmax(0,1fr))}.qcb-color-block .qcb-swatch{height:92px}.qcb-color-block .qcb-actions{width:100%}.qcb-color-block .qcb-action{flex:1 1 100%}.qcb-color-block--single .qcb-swatch{width:88px;height:80px}}@container qcb-colors (max-width:640px){.qcb-color-block .qcb-swatches{grid-template-columns:repeat(var(--qcb-tablet-columns,3),minmax(0,1fr))}.qcb-color-block .qcb-footer{align-items:flex-start}}@container qcb-colors (max-width:360px){.qcb-color-block .qcb-swatches{grid-template-columns:repeat(var(--qcb-mobile-columns,2),minmax(0,1fr))}.qcb-color-block .qcb-actions{width:100%}.qcb-color-block .qcb-action{flex:1 1 100%}.qcb-color-block--single .qcb-swatch{width:88px}}@container qcb-colors (max-width:240px){.qcb-color-block .qcb-swatches{grid-template-columns:minmax(0,1fr)}.qcb-color-block .qcb-kicker{gap:6px}.qcb-color-block--single .qcb-color-button{flex-direction:column}.qcb-color-block--single .qcb-swatch{width:100%;height:92px}.qcb-color-block--single .qcb-color-meta{padding:10px 12px}}