.color-model-demo{background:#fff;color:#202d36;border:1px solid #cbd3d5;border-radius:10px;padding:1rem;margin:1.3rem 0}.model-controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end}.model-controls label{display:grid;gap:.35rem;max-width:100%}.model-controls select,.model-controls input:not([type=checkbox]),.model-controls button{font:inherit;min-height:44px;max-width:100%;padding:.5rem;border:1px solid #71838b;border-radius:5px;background:#fff;color:#202d36}.model-record{white-space:pre-wrap;overflow-wrap:anywhere;background:#f3f6f5;border-left:3px solid #285f66;padding:.7rem;font:inherit;line-height:1.65}.model-patch{min-height:90px;border:1px solid #b7c4c8;background:#fff;margin:1rem 0}.patch-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.p3-patch{background-color:#e04545}.page pre{max-width:100%;overflow:auto;white-space:pre;line-height:1.65}@supports(color:color(display-p3 1 0 0)){@media(color-gamut:p3){.color-model-demo.p3-enabled .p3-patch{background-color:color(display-p3 1 0 0)}}}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #285f66;outline-offset:3px}@media(max-width:640px){.color-model-demo{padding:.8rem}.model-controls{display:block}.model-controls label,.model-controls button{width:100%;margin:.7rem 0}.patch-pair{grid-template-columns:1fr 1fr;gap:.7rem}}@media print{.model-controls{display:none}}

.model-controls label{min-height:44px}

@media(max-width:640px){.patch-pair p{min-height:4em}}

.model-controls label:has(input[type=checkbox]){display:flex;align-items:flex-start;gap:.65rem}.model-controls input[type=checkbox]{flex:none;margin-top:.35rem}

.model-controls label{min-width:0}.model-controls select{min-width:0;width:100%}