.paint-divider{--paint:0;position:relative;height:190px;overflow:hidden;background:#d9c9af;isolation:isolate}
.paint-divider:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.paint-coat{position:absolute;inset:0;background:#376d78;clip-path:inset(0 calc((1 - var(--paint))*100%) 0 0)}
.paint-tool{position:absolute;left:calc(var(--paint)*100%);top:0;height:100%;width:150px;transform:translateX(-34px);filter:drop-shadow(5px 6px 5px #172b2833)}
.paint-tool svg{height:100%;width:150px;overflow:visible}
.paint-divider.is-painted .paint-tool{opacity:0;transition:opacity .3s}
.motion-off .paint-tool{display:none}
@media(max-width:760px){.paint-divider{height:135px}.paint-tool{width:107px;transform:translateX(-24px)}.paint-tool svg{width:107px}}
@media(prefers-reduced-motion:reduce){.paint-tool{display:none}.paint-coat{clip-path:none}}