.cp{--cp-bg:#fff;--cp-fg:#141414;--cp-muted:#8a8a8a;--cp-field:#f3f3f3;--cp-field-hover:#ebebeb;--cp-line:#00000014;--cp-focus:#141414;z-index:9999;box-sizing:border-box;background:var(--cp-bg);width:284px;color:var(--cp-fg);box-shadow:0 0 0 1px var(--cp-line),0 12px 32px -8px #00000038,0 2px 6px #0000000f;opacity:0;transform-origin:0 0;pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:16px;padding:12px;font:500 12px/1.2 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;transition:opacity .14s,transform .14s;position:fixed;transform:translateY(4px)scale(.98)}.cp.open{opacity:1;pointer-events:auto;transform:none}.cp *{box-sizing:border-box}.cp-head{align-items:center;gap:8px;margin-bottom:12px;display:flex}.cp-compare{height:30px;box-shadow:inset 0 0 0 1px var(--cp-line);border-radius:9px;flex:1;display:flex;overflow:hidden}.cp-compare button{cursor:pointer;border:0;flex:1;padding:0;position:relative}.cp-compare .cp-prev:after{content:"Revert";letter-spacing:.02em;opacity:0;color:var(--cp-prev-ink,#000);place-items:center;font:600 10px/1 inherit;transition:opacity .12s;display:grid;position:absolute;inset:0}.cp-compare .cp-prev:hover:after{opacity:.7}.cp-compare .cp-next{cursor:default}.cp-icon{background:var(--cp-field);width:30px;height:30px;color:var(--cp-fg);cursor:pointer;border:0;border-radius:9px;flex:none;place-items:center;transition:background .12s;display:grid}.cp-icon:hover{background:var(--cp-field-hover)}.cp-icon svg{width:15px;height:15px}.cp-wheel-wrap{justify-content:center;padding:4px 0 12px;display:flex}.cp-wheel{cursor:crosshair;touch-action:none;width:212px;height:212px;box-shadow:0 0 0 1px var(--cp-line);background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:50%;outline:none;position:relative}.cp-wheel:before{content:"";background:radial-gradient(circle closest-side,#fff,#fff0);border-radius:50%;position:absolute;inset:0}.cp-shade{pointer-events:none;background:#000;border-radius:50%;position:absolute;inset:0}.cp-wheel:focus-visible{box-shadow:0 0 0 2px var(--cp-bg),0 0 0 4px var(--cp-focus)}.cp-handle{pointer-events:none;border:3px solid #fff;border-radius:50%;width:20px;height:20px;margin:-10px 0 0 -10px;transition:transform .1s;position:absolute;box-shadow:0 0 0 1px #00000040,0 2px 6px #0000004d}.cp-wheel.dragging .cp-handle{transform:scale(1.15)}.cp-slider{cursor:pointer;touch-action:none;height:14px;box-shadow:inset 0 0 0 1px var(--cp-line);border-radius:7px;outline:none;margin:0 2px 14px;position:relative}.cp-slider:focus-visible{box-shadow:0 0 0 2px var(--cp-bg),0 0 0 4px var(--cp-focus)}.cp-thumb{pointer-events:none;border:3px solid #fff;border-radius:50%;width:18px;height:18px;margin:-9px 0 0 -9px;position:absolute;top:50%;box-shadow:0 0 0 1px #00000040,0 1px 4px #0000004d}.cp-rows{gap:6px;display:grid}.cp-row{grid-template-columns:38px 1fr 26px;align-items:start;gap:6px;display:grid}.cp-label{letter-spacing:.06em;color:var(--cp-muted);padding-top:9px;font-size:10.5px;font-weight:600}.cp-fields{gap:4px;display:grid}.cp-fields.n1{grid-template-columns:1fr}.cp-fields.n3{grid-template-columns:repeat(3,1fr)}.cp-fields.n4{grid-template-columns:repeat(4,1fr)}.cp-field{flex-direction:column;gap:3px;min-width:0;display:flex}.cp-field input{background:var(--cp-field);width:100%;height:30px;color:var(--cp-fg);font-variant-numeric:tabular-nums;text-align:center;-webkit-user-select:text;user-select:text;border:0;border-radius:8px;outline:none;padding:0 4px;font:500 12.5px/1 inherit;transition:background .12s,box-shadow .12s}.cp-field input:hover{background:var(--cp-field-hover)}.cp-field input:focus{background:var(--cp-bg);box-shadow:inset 0 0 0 1.5px var(--cp-focus)}.cp-field input.bad{box-shadow:inset 0 0 0 1.5px #e5484d}.cp-field.hex input{text-align:left;letter-spacing:.03em;text-transform:uppercase;padding-left:10px}.cp-sub{color:var(--cp-muted);text-align:center;cursor:ew-resize;border-radius:4px;padding:1px 0;font-size:9.5px;font-weight:600}.cp-sub:hover{color:var(--cp-fg);background:var(--cp-field)}.cp-copy{width:26px;height:30px;color:var(--cp-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;place-items:center;transition:background .12s,color .12s;display:grid}.cp-copy:hover{background:var(--cp-field);color:var(--cp-fg)}.cp-copy svg{width:14px;height:14px}.cp-copy.done{color:#30a46c}.cp-hint{color:var(--cp-muted);text-align:center;margin-top:10px;font-size:10px;font-weight:500}
html .cp{--cp-bg:var(--bg);--cp-fg:var(--ink);--cp-muted:var(--muted);--cp-field:color-mix(in oklch, var(--ink) 6%, var(--bg));--cp-field-hover:color-mix(in oklch, var(--ink) 10%, var(--bg));--cp-line:var(--edge-strong);--cp-focus:var(--ink);font-family:var(--font-text)}html[data-theme=dark] .cp{box-shadow:0 0 0 1px var(--cp-line), 0 16px 40px -8px #0009}
.MeshGradient-module__9hUhba__tool{gap:var(--space-md) clamp(var(--space-md), 3vw, var(--space-xl));grid-template-columns:minmax(0,1fr) 17.5rem;grid-template-areas:"frame rail""bar bar""help help";display:grid}.MeshGradient-module__9hUhba__frame{height:clamp(20rem,62vh,34rem);padding:clamp(var(--space-sm), 2vw, var(--space-md));border:1px solid var(--edge);border-radius:var(--radius-control);background:color-mix(in oklch, var(--ink) 3%, transparent);grid-area:frame;place-items:center;display:grid;container-type:size}.MeshGradient-module__9hUhba__stage{width:min(100cqw, 100cqh * var(--ratio));touch-action:none;pointer-events:auto;position:relative}.MeshGradient-module__9hUhba__canvas{border-radius:var(--radius-media);width:100%;height:100%;display:block}.MeshGradient-module__9hUhba__handle{cursor:grab;touch-action:none;background:0 0;border:0;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;padding:0;position:absolute}.MeshGradient-module__9hUhba__handle:active{cursor:grabbing}.MeshGradient-module__9hUhba__handle:before{content:"";background:var(--point,#fff);width:1.125rem;height:1.125rem;transition:transform var(--dur-fast) var(--ease-out-quart);border:2.5px solid #fff;border-radius:50%;margin:-.5625rem;position:absolute;inset:50%;box-shadow:0 0 0 1px #00000073,0 1px 4px #00000059}.MeshGradient-module__9hUhba__handle:hover:before{transform:scale(1.15)}.MeshGradient-module__9hUhba__handle[data-selected]:before{transform:scale(1.3);box-shadow:0 0 0 1px #00000073,0 0 0 4px #ffffff8c,0 1px 6px #0006}.MeshGradient-module__9hUhba__handle:focus-visible{outline:none}.MeshGradient-module__9hUhba__handle:focus-visible:before{outline-offset:4px;outline:2px solid #fff;box-shadow:0 0 0 1px #00000080,0 0 0 7px #0000008c}.MeshGradient-module__9hUhba__rail{gap:var(--space-md);flex-direction:column;grid-area:rail;min-width:0;display:flex}.MeshGradient-module__9hUhba__group{gap:var(--space-xs);border:0;flex-direction:column;min-width:0;margin:0;padding:0;display:flex}.MeshGradient-module__9hUhba__group+.MeshGradient-module__9hUhba__group{padding-top:var(--space-md);border-top:1px solid var(--edge)}.MeshGradient-module__9hUhba__groupHead{justify-content:space-between;align-items:baseline;gap:var(--space-xs);display:flex}.MeshGradient-module__9hUhba__count{font-size:var(--text-label);color:var(--muted);font-variant-numeric:tabular-nums}.MeshGradient-module__9hUhba__wells{gap:var(--space-2xs);grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));margin:0;padding:0;list-style:none;display:grid}.MeshGradient-module__9hUhba__well{border:1px solid var(--edge);background:var(--raised);min-width:0;transition:border-color var(--dur-fast) var(--ease-out-quart);border-radius:.75rem;align-items:center;gap:.3125rem;padding:.25rem;display:flex}.MeshGradient-module__9hUhba__well:hover,.MeshGradient-module__9hUhba__well:focus-within{border-color:var(--edge-strong)}.MeshGradient-module__9hUhba__well[data-selected]{border-color:var(--ink)}.MeshGradient-module__9hUhba__swatch{width:1.75rem;height:1.75rem;box-shadow:inset 0 0 0 1px var(--edge);font-variant-numeric:tabular-nums;cursor:pointer;border:0;border-radius:.5rem;flex:none;place-items:center;padding:0;font-size:.6875rem;font-weight:600;display:grid}.MeshGradient-module__9hUhba__swatch:focus-visible,.MeshGradient-module__9hUhba__swatch[aria-expanded=true]{outline:2px solid var(--ink);outline-offset:2px}.MeshGradient-module__9hUhba__hex{width:100%;min-width:0;color:var(--ink);font:inherit;font-size:var(--text-label);font-variant-numeric:tabular-nums;letter-spacing:0;background:0 0;border:0;flex:1;padding:.25rem 0}.MeshGradient-module__9hUhba__hex:focus-visible{outline:none}.MeshGradient-module__9hUhba__wellRemove{width:1.375rem;height:1.375rem;color:var(--muted);cursor:pointer;transition:color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart);background:0 0;border:0;border-radius:50%;flex:none;place-items:center;padding:0;display:grid}.MeshGradient-module__9hUhba__wellRemove:hover:not(:disabled){color:var(--ink);background:var(--brand-wash)}.MeshGradient-module__9hUhba__wellRemove:disabled{opacity:.3;cursor:not-allowed}.MeshGradient-module__9hUhba__wellRemove:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.MeshGradient-module__9hUhba__barArea{grid-area:bar}.MeshGradient-module__9hUhba__noteArea{margin-top:calc(-1 * var(--space-xs));grid-column:1/-1}.MeshGradient-module__9hUhba__help{font-size:var(--text-label);color:var(--muted);grid-area:help}@media (max-width:60rem){.MeshGradient-module__9hUhba__tool{grid-template-columns:minmax(0,1fr);grid-template-areas:"frame""bar""rail""help"}.MeshGradient-module__9hUhba__frame{height:auto;container-type:inline-size}.MeshGradient-module__9hUhba__stage{width:min(100cqw, 62vh * var(--ratio))}.MeshGradient-module__9hUhba__rail{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));display:grid}.MeshGradient-module__9hUhba__group+.MeshGradient-module__9hUhba__group{border-top:0;padding-top:0}}@media (prefers-reduced-motion:reduce){.MeshGradient-module__9hUhba__handle:before,.MeshGradient-module__9hUhba__well,.MeshGradient-module__9hUhba__wellRemove{transition:none}}
.controls-module__K8s7DG__label{font-family:var(--font-text);font-size:var(--text-label);letter-spacing:0;color:var(--muted);padding:0;font-weight:500;line-height:1.3}.controls-module__K8s7DG__hint{font-size:var(--text-label);color:var(--muted);max-width:60ch;line-height:1.45}.controls-module__K8s7DG__bar{justify-content:space-between;align-items:center;gap:var(--space-2xs) var(--space-md);flex-wrap:wrap;display:flex}.controls-module__K8s7DG__barGroup{align-items:center;gap:var(--space-2xs);flex-wrap:wrap;display:flex}.controls-module__K8s7DG__button{border:1px solid var(--edge-strong);background:color-mix(in oklch, var(--bg) 72%, transparent);min-height:2.5rem;color:var(--ink);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);border-radius:999px;align-items:center;gap:.4375rem;padding:.5rem .9375rem;font-weight:500;display:inline-flex}.controls-module__K8s7DG__button:hover:not(:disabled){border-color:var(--ink);background:var(--brand-wash)}.controls-module__K8s7DG__button:active:not(:disabled){transition-duration:60ms;transform:scale(.97)}.controls-module__K8s7DG__button:disabled{opacity:.45;cursor:not-allowed}.controls-module__K8s7DG__primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}.controls-module__K8s7DG__primary:hover:not(:disabled){background:color-mix(in oklch, var(--ink), var(--bg) 18%);border-color:color-mix(in oklch, var(--ink), var(--bg) 18%)}.controls-module__K8s7DG__segments{border:1px solid var(--edge);background:color-mix(in oklch, var(--bg) 70%, transparent);border-radius:999px;align-self:flex-start;gap:2px;padding:3px;display:inline-flex}.controls-module__K8s7DG__segment{color:var(--muted);font-size:var(--text-label);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);background:0 0;border:0;border-radius:999px;padding:.375rem .8125rem;font-weight:500}.controls-module__K8s7DG__segment:hover{color:var(--ink)}.controls-module__K8s7DG__segment[aria-pressed=true]{background:var(--ink);color:var(--bg)}.controls-module__K8s7DG__segment:focus-visible,.controls-module__K8s7DG__button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.controls-module__K8s7DG__note{min-height:1.25rem;font-size:var(--text-label);color:var(--ink);font-weight:500;line-height:1.25rem}@media (max-width:30rem){.controls-module__K8s7DG__button{padding-inline:.75rem}}@media (prefers-reduced-motion:reduce){.controls-module__K8s7DG__button,.controls-module__K8s7DG__segment{transition:none}.controls-module__K8s7DG__button:active:not(:disabled){transform:none}}