.live-color-demo{border:1px solid #cbd3d5;border-radius:10px;padding:1rem;margin:1.25rem 0;background:#fff;color:#202d36}.demo-controls{display:flex;flex-wrap:wrap;gap:.8rem;align-items:end}.demo-controls label{display:grid;gap:.35rem;max-width:100%}.demo-controls select,.demo-controls input:not([type=checkbox]),.demo-controls button,.demo-refresh{font:inherit;min-height:44px;max-width:100%;padding:.5rem;border:1px solid #71838b;border-radius:5px;background:#fff;color:#202d36}.demo-controls input[type=range]{padding:0}.demo-controls .check-label{display:flex;align-items:center;min-height:44px}.demo-record{font:inherit;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;border-left:3px solid #285f66;padding:.6rem .8rem;background:#f3f6f5;color:#202d36}.opacity-backdrop{background:#fff;border:1px solid #b7c4c8;padding:1rem;margin:1rem 0}.opacity-panel{padding:1.25rem;background:#eee;color:#000}.opacity-panel .demo-label{display:block;font-size:20px;font-weight:700;color:#000;opacity:1}.theme-component{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1rem;border:3px solid currentColor;margin:1rem 0;font-size:19px;font-weight:700}.theme-component svg{width:24px;height:24px;flex:none}.hex-stage{background:#fff;border:1px solid #b7c4c8;padding:1rem;margin:1rem 0}.hex-sample{height:90px;width:100%;border:1px solid #b7c4c8}.serialization-probe{font-weight:700}.live-color-demo [role=status]{min-height:1.5em}.page pre{max-width:100%;overflow:auto;white-space:pre;line-height:1.65}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #285f66;outline-offset:3px}@media(max-width:640px){.live-color-demo{padding:.8rem}.demo-controls{display:block}.demo-controls label,.demo-controls button{margin:.7rem 0;width:100%}.theme-component{font-size:18px;padding:.7rem}.demo-record{padding:.5rem}}@media print{.demo-controls,.demo-refresh{display:none}.live-color-demo{break-inside:avoid}}